diff --git a/src/app/src/app.vue b/src/app/src/app.vue
index d2e78e77..bee5a0c6 100644
--- a/src/app/src/app.vue
+++ b/src/app/src/app.vue
@@ -120,7 +120,7 @@ router.beforeEach((to, from) => {
       >
         <UFieldGroup>
           <UTooltip
-            text="Toggle Studio"
+            :text="$t('studio.tooltips.toggleStudio')"
             :kbds="['meta', '.']"
           >
             <UButton
diff --git a/src/app/src/components/AppBanner.vue b/src/app/src/components/AppBanner.vue
index 1869c196..3700503c 100644
--- a/src/app/src/components/AppBanner.vue
+++ b/src/app/src/components/AppBanner.vue
@@ -56,10 +56,10 @@ function handleReload() {
           </div>
           <div class="flex-1 min-w-0">
             <p class="text-sm font-medium text-highlighted">
-              New website version detected
+              {{ $t('studio.newVersionBanner.title') }}
             </p>
             <p class="text-xs text-muted mt-0.5">
-              A new version of your website has been deployed. Reload the app to see the latest changes.
+              {{ $t('studio.newVersionBanner.description') }}
             </p>
           </div>
         </div>
@@ -70,7 +70,7 @@ function handleReload() {
           :loading="isReloadingApp"
           @click="handleReload"
         >
-          Reload
+          {{ $t('studio.buttons.reload') }}
         </UButton>
       </div>
     </div>
diff --git a/src/app/src/components/AppFooter.vue b/src/app/src/components/AppFooter.vue
index b2c98a39..d6817538 100644
--- a/src/app/src/components/AppFooter.vue
+++ b/src/app/src/components/AppFooter.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStudio } from '../composables/useStudio'
 import { useStudioState } from '../composables/useStudioState'
 import type { DropdownMenuItem } from '@nuxt/ui'
@@ -7,6 +8,7 @@ import type { DropdownMenuItem } from '@nuxt/ui'
 const { ui, host, git } = useStudio()
 const { devMode, preferences, updatePreference, unsetActiveLocation } = useStudioState()
 const user = host.user.get()
+const { t } = useI18n()
 
 // const showTechnicalMode = computed({
 //   get: () => preferences.value.showTechnicalMode,
@@ -31,7 +33,7 @@ const userMenuItems = computed(() => [
       ]
     : undefined,
   [{
-    label: 'Sign out',
+    label: t('studio.buttons.signOut'),
     icon: 'i-lucide-log-out',
     onClick: () => {
       fetch('/__nuxt_studio/auth/session', { method: 'delete' }).then(() => {
@@ -41,6 +43,12 @@ const userMenuItems = computed(() => [
   }],
 ].filter(Boolean) as DropdownMenuItem[][])
 
+const syncTooltipText = computed(() => {
+  return preferences.value.syncEditorAndRoute
+    ? t('studio.tooltips.unlinkEditor')
+    : t('studio.tooltips.linkEditor')
+})
+
 function closeStudio() {
   unsetActiveLocation()
   ui.close()
@@ -70,7 +78,7 @@ function closeStudio() {
         >
           <USwitch
             v-model="showTechnicalMode"
-            label="Developer view"
+            :label="$t('studio.footer.developer_view')"
             size="xs"
             :ui="{ root: 'w-full flex-row-reverse justify-between', wrapper: 'ms-0' }"
           />
@@ -88,7 +96,7 @@ function closeStudio() {
 
     <div class="flex items-center">
       <UTooltip
-        :text="preferences.syncEditorAndRoute ? 'Unlink editor and preview' : 'Link editor and preview'"
+        :text="syncTooltipText"
         :delay-duration="0"
       >
         <UButton
diff --git a/src/app/src/components/content/ContentEditorCode.vue b/src/app/src/components/content/ContentEditorCode.vue
index 51b67b62..96a7595f 100644
--- a/src/app/src/components/content/ContentEditorCode.vue
+++ b/src/app/src/components/content/ContentEditorCode.vue
@@ -7,6 +7,7 @@ import { useStudio } from '../../composables/useStudio'
 import { useMonaco } from '../../composables/useMonaco'
 import { useMonacoDiff } from '../../composables/useMonacoDiff'
 import { fromBase64ToUTF8 } from '../../utils/string'
+import { useI18n } from 'vue-i18n'
 import { areContentEqual } from '../../utils/content'
 
 const props = defineProps({
@@ -23,6 +24,7 @@ const props = defineProps({
 
 const document = defineModel<DatabasePageItem>()
 const { mediaTree, host, ui } = useStudio()
+const { t } = useI18n()
 
 const editorRef = ref<HTMLElement>()
 const diffEditorRef = ref<HTMLElement>()
@@ -53,7 +55,7 @@ const { editor, setContent: setEditorContent } = useMonaco(editorRef, {
   readOnly: props.readOnly,
   colorMode: ui.colorMode,
   onSetup: async (monaco) => {
-    setupSuggestion(monaco.monaco, host.meta.components(), mediaTree.root.value)
+    setupSuggestion(monaco.monaco, host.meta.components(), mediaTree.root.value, t)
   },
   onChange: (newContent) => {
     if (props.readOnly) {
diff --git a/src/app/src/components/content/ContentEditorConflict.vue b/src/app/src/components/content/ContentEditorConflict.vue
index fc668f9e..2ef8dd26 100644
--- a/src/app/src/components/content/ContentEditorConflict.vue
+++ b/src/app/src/components/content/ContentEditorConflict.vue
@@ -53,7 +53,7 @@ useMonacoDiff(diffEditorRef, {
         />
         <div class="flex-1">
           <h3 class="font-semibold text-highlighted text-sm mb-3">
-            Conflict Detected
+            {{ $t('studio.conflict.title') }}
           </h3>
 
           <dl class="space-y-2 text-xs mb-4">
@@ -63,7 +63,7 @@ useMonacoDiff(diffEditorRef, {
                   name="i-simple-icons:github"
                   class="size-3.5"
                 />
-                Repository
+                {{ $t('studio.conflict.repository') }}
               </dt>
               <dd class="text-highlighted font-medium">
                 <UButton
@@ -83,7 +83,7 @@ useMonacoDiff(diffEditorRef, {
                   name="i-lucide-git-branch"
                   class="size-3.5"
                 />
-                Branch
+                {{ $t('studio.conflict.branch') }}
               </dt>
               <dd class="text-highlighted font-medium">
                 <UButton
@@ -103,7 +103,7 @@ useMonacoDiff(diffEditorRef, {
                   name="i-lucide-file"
                   class="size-3.5"
                 />
-                File
+                {{ $t('studio.conflict.file') }}
               </dt>
               <dd class="text-highlighted font-medium">
                 <UButton
@@ -118,7 +118,7 @@ useMonacoDiff(diffEditorRef, {
           </dl>
 
           <p class="text-xs mb-2">
-            The content on GitHub differs from your website version. Ensure your latest changes are deployed and refresh the page.
+            {{ $t('studio.conflict.description') }}
           </p>
         </div>
       </div>
@@ -130,14 +130,14 @@ useMonacoDiff(diffEditorRef, {
           name="i-simple-icons:git"
           class="size-3.5"
         />
-        GitHub
+        {{ $t('studio.conflict.githubVersion') }}
       </div>
       <div class="flex items-center gap-1 text-sm text-muted">
         <UIcon
           name="i-lucide-globe"
           class="size-3.5"
         />
-        Website
+        {{ $t('studio.conflict.websiteVersion') }}
       </div>
     </div>
 
diff --git a/src/app/src/components/header/HeaderMain.vue b/src/app/src/components/header/HeaderMain.vue
index 841c2d1a..52c80428 100644
--- a/src/app/src/components/header/HeaderMain.vue
+++ b/src/app/src/components/header/HeaderMain.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStudio } from '../../composables/useStudio'
 import type { StudioFeature } from '../../types'
 import { useStudioState } from '../../composables/useStudioState'
@@ -8,20 +9,21 @@ import { useStudioState } from '../../composables/useStudioState'
 const router = useRouter()
 const route = useRoute()
 const { context } = useStudio()
+const { t } = useI18n()
 const { setLocation, devMode } = useStudioState()
 
-const items = [
+const items = computed(() => [
   {
-    label: 'Content',
+    label: t('studio.nav.content'),
     value: 'content',
     to: '/content',
   },
   {
-    label: 'Media',
+    label: t('studio.nav.media'),
     value: 'media',
     to: '/media',
   },
-]
+])
 
 const current = computed({
   get: () => route.name as string,
@@ -53,7 +55,7 @@ const current = computed({
 
     <UButton
       v-if="!devMode"
-      label="Review"
+      :label="$t('studio.buttons.review')"
       color="neutral"
       :variant="context.draftCount.value > 0 ? 'solid' : 'soft'"
       to="/review"
diff --git a/src/app/src/components/header/HeaderReview.vue b/src/app/src/components/header/HeaderReview.vue
index 24b15739..4dde57b1 100644
--- a/src/app/src/components/header/HeaderReview.vue
+++ b/src/app/src/components/header/HeaderReview.vue
@@ -5,18 +5,21 @@ import { useStudio } from '../../composables/useStudio'
 import { useRouter } from 'vue-router'
 import { StudioBranchActionId } from '../../types'
 import { useStudioState } from '../../composables/useStudioState'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
 const { location } = useStudioState()
 const { context } = useStudio()
+const { t } = useI18n()
 
 const isPublishing = ref(false)
 const openTooltip = ref(false)
 
-type Schema = z.output<typeof schema>
-const schema = z.object({
-  commitMessage: z.string().nonempty('Commit message is required'),
-})
+type Schema = z.output<typeof schema.value>
+
+const schema = computed(() => z.object({
+  commitMessage: z.string().nonempty(t('studio.validation.commitRequired')),
+}))
 
 const state = reactive<Schema>({
   commitMessage: '',
@@ -24,7 +27,7 @@ const state = reactive<Schema>({
 
 const validationErrors = computed(() => {
   try {
-    schema.parse(state)
+    schema.value.parse(state)
     return []
   }
   catch (error) {
@@ -48,7 +51,7 @@ const tooltipText = computed(() => {
   if (validationErrors.value.length > 0) {
     return validationErrors.value[0].message
   }
-  return 'Publish changes'
+  return t('studio.tooltips.publishChanges')
 })
 
 async function publishChanges() {
@@ -67,7 +70,7 @@ async function publishChanges() {
     router.push({
       path: '/error',
       query: {
-        error: err.message || 'Failed to publish changes',
+        error: err.message || t('studio.publish.failedGeneric'),
       },
     })
   }
@@ -100,7 +103,7 @@ defineShortcuts({
   >
     <div class="w-full flex items-center gap-2">
       <UTooltip
-        text="Back to content"
+        :text="$t('studio.tooltips.backToContent')"
         :kbds="['esc']"
       >
         <UButton
@@ -108,7 +111,7 @@ defineShortcuts({
           color="neutral"
           variant="soft"
           size="sm"
-          aria-label="Back"
+          :aria-label="$t('studio.buttons.back')"
           @click="backToEditor"
         />
       </UTooltip>
@@ -124,7 +127,7 @@ defineShortcuts({
 
         <UInput
           v-model="state.commitMessage"
-          placeholder="Commit message"
+          :placeholder="$t('studio.placeholders.commitMessage')"
           size="sm"
           :disabled="isPublishing"
           class="w-full"
@@ -145,7 +148,7 @@ defineShortcuts({
           :loading="isPublishing"
           :disabled="validationErrors.length > 0"
           icon="i-lucide-check"
-          label="Publish"
+          :label="$t('studio.buttons.publish')"
           :ui="{ leadingIcon: 'size-3.5' }"
         />
       </UTooltip>
diff --git a/src/app/src/components/header/HeaderSuccess.vue b/src/app/src/components/header/HeaderSuccess.vue
index 2bb1ff55..88da206e 100644
--- a/src/app/src/components/header/HeaderSuccess.vue
+++ b/src/app/src/components/header/HeaderSuccess.vue
@@ -11,7 +11,7 @@ function goBack() {
 <template>
   <div class="w-full flex items-center gap-2">
     <UTooltip
-      text="Back to content"
+      :text="$t('studio.tooltips.backToContent')"
       :kbds="['esc']"
     >
       <UButton
@@ -19,7 +19,7 @@ function goBack() {
         color="neutral"
         variant="soft"
         size="sm"
-        aria-label="Back"
+        :aria-label="$t('studio.buttons.back')"
         @click="goBack"
       />
     </UTooltip>
diff --git a/src/app/src/components/media/MediaCard.vue b/src/app/src/components/media/MediaCard.vue
index f87dd846..5e2e2e3d 100644
--- a/src/app/src/components/media/MediaCard.vue
+++ b/src/app/src/components/media/MediaCard.vue
@@ -46,7 +46,7 @@ const imageSrc = computed(() => isImageFile(props.item.fsPath) ? props.item.rout
           :src="imageSrc"
           width="48"
           height="48"
-          alt="File preview"
+          :alt="$t('studio.media.altFilePreview')"
           class="w-full h-full object-cover"
         />
       </div>
diff --git a/src/app/src/components/media/MediaCardForm.vue b/src/app/src/components/media/MediaCardForm.vue
index 8227234f..2d6e11b3 100644
--- a/src/app/src/components/media/MediaCardForm.vue
+++ b/src/app/src/components/media/MediaCardForm.vue
@@ -42,7 +42,7 @@ const isImage = computed(() => props.renamedItem && isImageFile(props.renamedIte
           :src="renamedItem.routePath"
           width="48"
           height="48"
-          alt="File preview"
+          :alt="$t('studio.media.altFilePreview')"
           class="w-full h-full object-cover"
         />
       </div>
diff --git a/src/app/src/components/media/MediaEditorAudio.vue b/src/app/src/components/media/MediaEditorAudio.vue
index 96f6e7d5..0b62971d 100644
--- a/src/app/src/components/media/MediaEditorAudio.vue
+++ b/src/app/src/components/media/MediaEditorAudio.vue
@@ -14,7 +14,7 @@
         :ui="{ leadingIcon: 'w-16 h-16', trailingIcon: 'w-16 h-16' }"
       >
         <template #default>
-          <span class="sr-only">Play Audio</span>
+          <span class="sr-only">{{ $t('studio.media.playAudio') }}</span>
         </template>
       </UButton>
     </div>
@@ -31,7 +31,7 @@
       @ended="isPlaying = false"
     >
       <source :src="src">
-      Your browser does not support the audio tag.
+      {{ $t('studio.media.audioTagNotSupported') }}
     </audio>
   </div>
 </template>
diff --git a/src/app/src/components/media/MediaEditorImage.vue b/src/app/src/components/media/MediaEditorImage.vue
index 8392f651..af2a6230 100644
--- a/src/app/src/components/media/MediaEditorImage.vue
+++ b/src/app/src/components/media/MediaEditorImage.vue
@@ -5,6 +5,7 @@ import type { MediaItem, GithubFile } from '../../types'
 import type { PropType } from 'vue'
 import { useStudio } from '../../composables/useStudio'
 import { joinURL } from 'ufo'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   mediaItem: {
@@ -18,6 +19,7 @@ const props = defineProps({
 })
 
 const { git } = useStudio()
+const { t } = useI18n()
 
 const imageRef = ref<HTMLImageElement | null>(null)
 const imageDimensions = ref({ width: 0, height: 0 })
@@ -39,13 +41,13 @@ const fileExtension = computed(() => {
 
 const imageInfo = computed(() => {
   const info = [
-    { label: 'Width', value: `${imageDimensions.value.width}px` },
-    { label: 'Height', value: `${imageDimensions.value.height}px` },
-    { label: 'Type', value: fileExtension.value },
+    { label: t('studio.media.metaWidth'), value: `${imageDimensions.value.width}px` },
+    { label: t('studio.media.metaHeight'), value: `${imageDimensions.value.height}px` },
+    { label: t('studio.media.metaType'), value: fileExtension.value },
   ]
 
   if (props.githubFile) {
-    info.push({ label: 'Size', value: formatBytes(props.githubFile.size) })
+    info.push({ label: t('studio.media.metaSize'), value: formatBytes(props.githubFile.size) })
   }
 
   return info
@@ -79,7 +81,7 @@ const githubPath = computed(() => {
       <img
         ref="imageRef"
         :src="mediaItem.path"
-        alt="Image preview"
+        :alt="$t('studio.media.altImagePreview')"
         class="max-w-full max-h-full object-contain"
       >
     </div>
@@ -108,7 +110,7 @@ const githubPath = computed(() => {
           name="i-lucide-file"
           class="w-3.5 h-3.5"
         />
-        <span>File name</span>
+        <span>{{ $t('studio.media.fileName') }}</span>
       </div>
       <p class="text-xs font-mono text-highlighted truncate">
         {{ githubFile.name }}
@@ -124,7 +126,7 @@ const githubPath = computed(() => {
           name="i-lucide-globe"
           class="w-3.5 h-3.5"
         />
-        <span>Public path</span>
+        <span>{{ $t('studio.media.publicPath') }}</span>
       </div>
       <p class="text-xs font-mono text-highlighted truncate">
         {{ mediaItem.path }}
@@ -143,7 +145,7 @@ const githubPath = computed(() => {
           name="i-simple-icons:github"
           class="w-3.5 h-3.5"
         />
-        <span>GitHub path</span>
+        <span>{{ $t('studio.media.githubPath') }}</span>
       </div>
       <p class="text-xs font-mono text-highlighted truncate">
         {{ githubFile.path }}
@@ -159,7 +161,7 @@ const githubPath = computed(() => {
           name="i-simple-icons:markdown"
           class="w-3.5 h-3.5"
         />
-        <span>Markdown</span>
+        <span>{{ $t('studio.media.markdown') }}</span>
       </div>
       <p class="text-xs font-mono text-highlighted truncate">
         {{ markdownCode }}
diff --git a/src/app/src/components/media/MediaEditorVideo.vue b/src/app/src/components/media/MediaEditorVideo.vue
index 3bf121f2..25b94aa5 100644
--- a/src/app/src/components/media/MediaEditorVideo.vue
+++ b/src/app/src/components/media/MediaEditorVideo.vue
@@ -14,7 +14,7 @@
         :ui="{ leadingIcon: 'w-16 h-16', trailingIcon: 'w-16 h-16' }"
       >
         <template #default>
-          <span class="sr-only">Play Video</span>
+          <span class="sr-only">{{ $t('studio.media.playVideo') }}</span>
         </template>
       </UButton>
     </div>
@@ -34,7 +34,7 @@
         :src="src"
         type="video/mp4"
       >
-      Your browser does not support the video tag.
+      {{ $t('studio.media.videoTagNotSupported') }}
     </video>
   </div>
 </template>
diff --git a/src/app/src/components/shared/AlertMDCFormatting.vue b/src/app/src/components/shared/AlertMDCFormatting.vue
index 249304b2..de06a545 100644
--- a/src/app/src/components/shared/AlertMDCFormatting.vue
+++ b/src/app/src/components/shared/AlertMDCFormatting.vue
@@ -20,7 +20,7 @@ function toggleAction() {
 
 <template>
   <UAlert
-    title="Formatting applied to align with MDC syntax standard."
+    :title="$t('studio.alert.mdcFormatting')"
     color="info"
     variant="soft"
     orientation="horizontal"
diff --git a/src/app/src/components/shared/CopyButton.vue b/src/app/src/components/shared/CopyButton.vue
index 7b7ff5f1..4d670b35 100644
--- a/src/app/src/components/shared/CopyButton.vue
+++ b/src/app/src/components/shared/CopyButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   content: {
@@ -9,6 +10,13 @@ const props = defineProps({
 })
 
 const copied = ref(false)
+const { t } = useI18n()
+
+const tooltipText = computed(() => {
+  return copied.value
+    ? t('studio.tooltips.copiedToClipboard')
+    : t('studio.tooltips.copyToClipboard')
+})
 
 async function handleCopy() {
   if (!props.content) return
@@ -22,7 +30,7 @@ async function handleCopy() {
 </script>
 
 <template>
-  <UTooltip :text="copied ? 'Copied to clipboard' : 'Copy to clipboard'">
+  <UTooltip :text="tooltipText">
     <UButton
       :icon="copied ? 'i-lucide-clipboard-check' : 'i-lucide-clipboard'"
       variant="ghost"
diff --git a/src/app/src/components/shared/item/ItemActionsDropdown.vue b/src/app/src/components/shared/item/ItemActionsDropdown.vue
index 063c39a8..2cc2172c 100644
--- a/src/app/src/components/shared/item/ItemActionsDropdown.vue
+++ b/src/app/src/components/shared/item/ItemActionsDropdown.vue
@@ -5,8 +5,10 @@ import { StudioItemActionId } from '../../../types'
 import type { TreeItem, StudioAction } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
 import type { DropdownMenuItem } from '@nuxt/ui/runtime/components/DropdownMenu.vue.js'
+import { useI18n } from 'vue-i18n'
 
 const { context } = useStudio()
+const { t } = useI18n()
 
 const props = defineProps({
   item: {
@@ -36,6 +38,16 @@ watch(context.actionInProgress, (actionInProgress) => {
   }
 })
 
+const getActionLabel = (action: StudioAction<StudioItemActionId>) => {
+  return t(`studio.actions.labels.${action.id}`, action.label || action.id)
+}
+
+const getPendingActionLabel = (action: StudioAction<StudioItemActionId> | null) => {
+  if (!action) return ''
+  const verb = action.id.split('-')[0]
+  return t('studio.actions.confirmAction', { action: t(`studio.actions.verbs.${verb}`, verb) })
+}
+
 const actions = computed<DropdownMenuItem[]>(() => {
   const hasPendingAction = pendingAction.value !== null
   const hasLoadingAction = loadingAction.value !== null
@@ -56,6 +68,7 @@ const actions = computed<DropdownMenuItem[]>(() => {
 
     return {
       ...action,
+      label: isPending ? getPendingActionLabel(pendingAction.value) : getActionLabel(action),
       icon,
       color: isPending ? (isDeleteAction ? 'error' : 'secondary') : 'neutral',
       slot: isPending ? 'pending-action' : undefined,
@@ -101,9 +114,7 @@ const actions = computed<DropdownMenuItem[]>(() => {
   })
 })
 
-const pendingActionLabel = computed(() => {
-  return `Click again to ${pendingAction.value?.id.split('-')[0]}`
-})
+const pendingActionLabel = computed(() => getPendingActionLabel(pendingAction.value))
 </script>
 
 <template>
@@ -118,7 +129,7 @@ const pendingActionLabel = computed(() => {
       color="neutral"
       variant="ghost"
       icon="i-ph-dots-three-vertical"
-      aria-label="Open actions"
+      :aria-label="t('studio.aria.openActions')"
       square
       size="sm"
       class="cursor-pointer"
diff --git a/src/app/src/components/shared/item/ItemActionsToolbar.vue b/src/app/src/components/shared/item/ItemActionsToolbar.vue
index 45351b41..b5e43c49 100644
--- a/src/app/src/components/shared/item/ItemActionsToolbar.vue
+++ b/src/app/src/components/shared/item/ItemActionsToolbar.vue
@@ -5,8 +5,10 @@ import { useStudio } from '../../../composables/useStudio'
 import type { StudioAction } from '../../../types'
 import { StudioItemActionId } from '../../../types'
 import { MEDIA_EXTENSIONS } from '../../../utils/file'
+import { useI18n } from 'vue-i18n'
 
 const { context } = useStudio()
+const { t } = useI18n()
 const fileInputRef = ref<HTMLInputElement>()
 const toolbarRef = ref<HTMLElement>()
 const pendingAction = ref<StudioAction<StudioItemActionId> | null>(null)
@@ -20,6 +22,15 @@ watch(context.actionInProgress, (action) => {
 })
 
 const item = computed(() => context.activeTree.value.currentItem.value)
+
+const getActionTooltip = (action: StudioAction<StudioItemActionId>, isPending: boolean) => {
+  if (isPending) {
+    const verb = action.id.split('-')[0]
+    return t('studio.actions.confirmAction', { action: t(`studio.actions.verbs.${verb}`, verb) })
+  }
+  return action.tooltip ? t(action.tooltip, action.tooltip) : t(`studio.actions.labels.${action.id}`, action.id)
+}
+
 const actions = computed(() => {
   const hasPendingAction = pendingAction.value !== null
   const hasLoadingAction = loadingAction.value !== null
@@ -43,7 +54,7 @@ const actions = computed(() => {
       color: isPending ? (isDeleteAction ? 'error' : 'secondary') : 'neutral',
       variant: isPending ? 'soft' : 'ghost',
       icon,
-      tooltip: isPending ? `Click again to ${action.id.split('-')[0].toLowerCase()}` : action.tooltip,
+      tooltip: getActionTooltip(action, isPending),
       disabled: (hasPendingAction && !isPending) || hasLoadingAction,
       isOneStepAction,
       isPending,
diff --git a/src/app/src/components/shared/item/ItemBadge.vue b/src/app/src/components/shared/item/ItemBadge.vue
index 2ccb1cf4..da13ad53 100644
--- a/src/app/src/components/shared/item/ItemBadge.vue
+++ b/src/app/src/components/shared/item/ItemBadge.vue
@@ -14,7 +14,7 @@ defineProps({
 <template>
   <UBadge
     :color="COLOR_UI_STATUS_MAP[status] as never"
-    :label="status"
+    :label="$t(`studio.review.${status.toLowerCase()}`)"
     variant="soft"
     size="sm"
   />
diff --git a/src/app/src/components/shared/item/ItemBreadcrumb.vue b/src/app/src/components/shared/item/ItemBreadcrumb.vue
index a20a402f..71a68e33 100644
--- a/src/app/src/components/shared/item/ItemBreadcrumb.vue
+++ b/src/app/src/components/shared/item/ItemBreadcrumb.vue
@@ -5,8 +5,10 @@ import { computed, unref } from 'vue'
 import { type TreeItem, TreeStatus } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
 import { findParentFromFsPath } from '../../../utils/tree'
+import { useI18n } from 'vue-i18n'
 
 const { context } = useStudio()
+const { t } = useI18n()
 
 const currentItem = computed(() => context.activeTree.value.currentItem.value)
 const tree = computed(() => context.activeTree.value.root.value)
@@ -15,7 +17,7 @@ const items = computed<BreadcrumbItem[]>(() => {
   const rootTreeItem = context.activeTree.value.rootItem.value
   const rootBreadcrumbItem = {
     icon: 'i-lucide-folder-git',
-    label: rootTreeItem.name,
+    label: t(`studio.nav.${rootTreeItem.name.toLowerCase()}`, rootTreeItem.name),
     onClick: () => {
       context.activeTree.value.select(rootTreeItem)
     },
diff --git a/src/app/src/components/shared/item/ItemCard.vue b/src/app/src/components/shared/item/ItemCard.vue
index 49cb2c52..d21dce73 100644
--- a/src/app/src/components/shared/item/ItemCard.vue
+++ b/src/app/src/components/shared/item/ItemCard.vue
@@ -4,6 +4,9 @@ import type { PropType } from 'vue'
 import { computed } from 'vue'
 import { titleCase } from 'scule'
 import { COLOR_UI_STATUS_MAP } from '../../../utils/tree'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const props = defineProps({
   item: {
@@ -22,7 +25,7 @@ const statusRingColor = computed(() => props.item.status && props.item.status !=
 const displayInfo = computed(() => {
   if (isDirectory.value) {
     const itemcount = props.item.children?.filter(child => !child.hide).length || 0
-    return `${itemcount} ${itemcount === 1 ? 'item' : 'items'}`
+    return t('studio.items.itemCount', itemcount)
   }
   return props.item.routePath || props.item.fsPath
 })
diff --git a/src/app/src/components/shared/item/ItemCardForm.vue b/src/app/src/components/shared/item/ItemCardForm.vue
index 19e0e577..0f53bad4 100644
--- a/src/app/src/components/shared/item/ItemCardForm.vue
+++ b/src/app/src/components/shared/item/ItemCardForm.vue
@@ -14,8 +14,10 @@ import { joinURL, withLeadingSlash, withoutLeadingSlash } from 'ufo'
 import { useStudio } from '../../../composables/useStudio'
 import { parseName, getFileExtension, CONTENT_EXTENSIONS, MEDIA_EXTENSIONS } from '../../../utils/file'
 import { upperFirst } from 'scule'
+import { useI18n } from 'vue-i18n'
 
 const { context } = useStudio()
+const { t } = useI18n()
 
 const isLoading = ref(false)
 const formRef = ref<HTMLDivElement>()
@@ -59,9 +61,9 @@ const fullName = computed(() => {
 
 const schema = computed(() => z.object({
   name: z.string()
-    .min(1, 'Name cannot be empty')
-    .refine((name: string) => !name.endsWith('.'), 'Name cannot end with "."')
-    .refine((name: string) => !name.startsWith('/'), 'Name cannot start with "/"'),
+    .min(1, t('studio.validation.nameEmpty'))
+    .refine((name: string) => !name.endsWith('.'), t('studio.validation.nameEndsWithDot'))
+    .refine((name: string) => !name.startsWith('/'), t('studio.validation.nameStartsWithSlash')),
   extension: z.enum([...CONTENT_EXTENSIONS, ...MEDIA_EXTENSIONS] as [string, ...string[]]).nullish(),
   prefix: z.preprocess(
     val => val === '' ? null : val,
@@ -94,16 +96,16 @@ const schema = computed(() => z.object({
 
   return !isDuplicate
 }, {
-  message: 'Name already exists',
+  message: t('studio.validation.nameExists'),
   path: ['name'],
 }))
 
-type Schema = {
+type SchemaType = {
   name: string
   extension: string | null | undefined
   prefix: string | null | undefined
 }
-const state = reactive<Schema>({
+const state = reactive<SchemaType>({
   name: originalName.value,
   extension: originalExtension.value,
   prefix: originalPrefix.value,
@@ -139,7 +141,8 @@ const routePath = computed(() => {
 
 const displayInfo = computed(() => {
   if (isDirectory.value) {
-    return `${props.renamedItem?.children?.length || 0} items`
+    const itemCount = props.renamedItem?.children?.length || 0
+    return t('studio.items.itemCount', itemCount)
   }
   return routePath.value
 })
@@ -148,13 +151,7 @@ const tooltipText = computed(() => {
   if (validationErrors.value.length > 0) {
     return validationErrors.value[0]?.message
   }
-
-  if (props.actionId === StudioItemActionId.RenameItem) {
-    return 'Rename'
-  }
-  else {
-    return 'Create file'
-  }
+  return t(`studio.actions.labels.${props.actionId}`)
 })
 
 const handleClickOutside = (event: MouseEvent) => {
@@ -285,7 +282,8 @@ async function onSubmit() {
                       type="text"
                       pattern="[0-9]*"
                       variant="soft"
-                      placeholder="N°"
+                      :placeholder="$t('studio.placeholders.order')"
+                      min="1"
                       class="h-5"
                       size="xs"
                       :disabled="isLoading"
@@ -304,7 +302,7 @@ async function onSubmit() {
                       v-model="state.name"
                       variant="soft"
                       autofocus
-                      placeholder="File name"
+                      :placeholder="$t('studio.placeholders.fileName')"
                       class="w-full h-5"
                       size="xs"
                       :disabled="isLoading"
@@ -343,7 +341,7 @@ async function onSubmit() {
                   color="neutral"
                   variant="ghost"
                   icon="i-ph-x"
-                  aria-label="Cancel"
+                  :aria-label="$t('studio.aria.cancel')"
                   size="xs"
                   square
                   :disabled="isLoading"
@@ -359,7 +357,7 @@ async function onSubmit() {
                     type="submit"
                     variant="soft"
                     :color="validationErrors.length > 0 ? 'error' : 'secondary'"
-                    aria-label="Submit button"
+                    :aria-label="$t('studio.aria.submit')"
                     :disabled="validationErrors.length > 0 || isLoading"
                     :loading="isLoading"
                     size="xs"
diff --git a/src/app/src/components/shared/item/ItemCardReview.vue b/src/app/src/components/shared/item/ItemCardReview.vue
index 4a6a9e88..95dd17a9 100644
--- a/src/app/src/components/shared/item/ItemCardReview.vue
+++ b/src/app/src/components/shared/item/ItemCardReview.vue
@@ -54,7 +54,7 @@ function toggleOpen() {
               {{ fileName }}
             </span>
             <UBadge
-              :label="draftItem.status"
+              :label="$t(`studio.review.${draftItem.status.toLowerCase()}`)"
               :color="statusColor"
               variant="soft"
               size="xs"
diff --git a/src/app/src/composables/useStudio.ts b/src/app/src/composables/useStudio.ts
index 76edecaa..cd8d74c4 100644
--- a/src/app/src/composables/useStudio.ts
+++ b/src/app/src/composables/useStudio.ts
@@ -40,6 +40,8 @@ export const useStudio = createSharedComposable(() => {
   const mediaTree = useTree(StudioFeature.Media, host, draftMedias)
   const context = useContext(host, git, documentTree, mediaTree)
 
+  ui.setLocale(host.meta.defaultLocale)
+
   host.on.mounted(async () => {
     if (devMode.value) {
       initDevelopmentMode()
diff --git a/src/app/src/composables/useUI.ts b/src/app/src/composables/useUI.ts
index ac1d127d..c4ecfa0d 100644
--- a/src/app/src/composables/useUI.ts
+++ b/src/app/src/composables/useUI.ts
@@ -1,5 +1,5 @@
 import { createSharedComposable } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { getCurrentInstance, ref, watch } from 'vue'
 import type { StudioHost } from '../types'
 import { useSidebar } from './useSidebar'
 
@@ -21,6 +21,17 @@ export const useUI = createSharedComposable((host: StudioHost) => {
     }
   })
 
+  function setLocale(locale: string) {
+    const currentVueInstance = getCurrentInstance()
+    if (currentVueInstance) {
+      import(`../locales/${locale}.json`).then((locales) => {
+        const i18n = currentVueInstance.appContext.provides.i18n.global
+        i18n.locale.value = locale
+        i18n.setLocaleMessage(locale, locales.default)
+      })
+    }
+  }
+
   return {
     colorMode,
     sidebar,
@@ -30,5 +41,6 @@ export const useUI = createSharedComposable((host: StudioHost) => {
     },
     toggle: () => isOpen.value = !isOpen.value,
     close: () => isOpen.value = false,
+    setLocale,
   }
 })
diff --git a/src/app/src/locales/en.json b/src/app/src/locales/en.json
new file mode 100644
index 00000000..4349e8a3
--- /dev/null
+++ b/src/app/src/locales/en.json
@@ -0,0 +1,177 @@
+{
+  "studio": {
+    "buttons": {
+      "edit": "Edit this page",
+      "retryPublish": "Retry Publish",
+      "reloadApp": "Reload application",
+      "reload": "Reload",
+      "signOut": "Sign out",
+      "review": "Review",
+      "publish": "Publish",
+      "back": "Back"
+    },
+    "headings": {
+      "directories": "Directories",
+      "files": "Files",
+      "media": "Media"
+    },
+    "tooltips": {
+      "toggleStudio": "Toggle Studio",
+      "unlinkEditor": "Unlink editor and preview",
+      "linkEditor": "Link editor and preview",
+      "copiedToClipboard": "Copied to clipboard",
+      "copyToClipboard": "Copy to clipboard",
+      "publishChanges": "Publish changes",
+      "backToContent": "Back to content"
+    },
+    "notifications": {
+      "error": {
+        "unknown": "An unknown error occurred"
+      }
+    },
+    "publish": {
+      "failedTitle": "Publish Failed",
+      "summary": "on {branch} of {repo} repository",
+      "errorTitle": "Error during GitHub publish",
+      "failedGeneric": "Failed to publish changes"
+    },
+    "review": {
+      "title": "Review changes",
+      "created": "Created",
+      "updated": "Updated",
+      "deleted": "Deleted"
+    },
+    "publishSuccess": {
+      "title": "Changes Published",
+      "summary": "{count} change published on {branch} of {repo} repository | {count} changes published on {branch} of {repo} repository",
+      "alertTitleWaiting": "Waiting for deployment...",
+      "alertTitleComplete": "Deployment complete",
+      "alertDescWaiting": "The website needs to be deployed for changes to be visible in Studio.",
+      "alertDescComplete": "A new version of your website has been deployed. Please refresh your app to see changes in Studio."
+    },
+    "newVersionBanner": {
+      "title": "New website version detected",
+      "description": "A new version of your website has been deployed. Reload the app to see the latest changes.",
+      "reloadButton": "Reload"
+    },
+    "footer": {
+      "developer_view": "Developer view"
+    },
+    "alert": {
+      "mdcFormatting": "Formatting applied to align with MDC syntax standard."
+    },
+    "conflict": {
+      "title": "Conflict Detected",
+      "repository": "Repository",
+      "branch": "Branch",
+      "file": "File",
+      "description": "The content on GitHub differs from your website version. Ensure your latest changes are deployed and refresh the page.",
+      "githubVersion": "GitHub",
+      "websiteVersion": "Website"
+    },
+    "nav": {
+      "content": "Content",
+      "media": "Media"
+    },
+    "placeholders": {
+      "commitMessage": "Commit message",
+      "order": "N°",
+      "fileName": "File name"
+    },
+    "validation": {
+      "commitRequired": "Commit message is required",
+      "nameEmpty": "Name cannot be empty",
+      "nameEndsWithDot": "Name cannot end with '.'",
+      "nameStartsWithSlash": "Name cannot start with '/'",
+      "nameExists": "Name already exists"
+    },
+    "media": {
+      "altFilePreview": "File preview",
+      "altImagePreview": "Image preview",
+      "playAudio": "Play Audio",
+      "audioTagNotSupported": "Your browser does not support the audio tag.",
+      "playVideo": "Play Video",
+      "videoTagNotSupported": "Your browser does not support the video tag.",
+      "metaWidth": "Width",
+      "metaHeight": "Height",
+      "metaType": "Type",
+      "metaSize": "Size",
+      "fileName": "File name",
+      "publicPath": "Public path",
+      "githubPath": "GitHub path",
+      "markdown": "Markdown"
+    },
+    "aria": {
+      "openActions": "Open actions",
+      "cancel": "Cancel",
+      "submit": "Submit"
+    },
+    "actions": {
+      "confirmAction": "Click again to {action}",
+      "verbs": {
+        "create": "create",
+        "delete": "delete",
+        "rename": "rename",
+        "upload": "upload",
+        "duplicate": "duplicate"
+      },
+      "labels": {
+        "create-document": "New file",
+        "create-document-folder": "New folder",
+        "create-media-folder": "New media folder",
+        "rename-item": "Rename",
+        "delete-item": "Delete",
+        "upload-media": "Upload media",
+        "duplicate-item": "Duplicate",
+        "revert-item": "Revert changes",
+        "publish-branch": "Publish branch"
+      },
+      "tooltips": {
+        "revert-item": "Revert changes",
+        "create-document": "Create a new file",
+        "upload-media": "Upload media",
+        "create-document-folder": "Create a new folder",
+        "create-media-folder": "Create a new folder",
+        "rename-item": "Rename file",
+        "duplicate-item": "Duplicate file",
+        "delete-item": "Delete file",
+        "publish-branch": "Publish branch"
+      }
+    },
+    "items": {
+      "itemCount": "1 item | {count} items"
+    },
+    "monaco": {
+      "headings": {
+        "h1": "Heading 1",
+        "h2": "Heading 2",
+        "h3": "Heading 3"
+      },
+      "styles": {
+        "bold": "Bold",
+        "italic": "Italic"
+      },
+      "lists": {
+        "bulleted": "Bulleted List",
+        "numbered": "Numbered List"
+      },
+      "other": {
+        "emojis": "Emojis",
+        "blockquote": "Blockquote",
+        "code": "Code",
+        "inlineCode": "Inline Code",
+        "link": "Link",
+        "image": "Image"
+      },
+      "writeSomething": "Write Something",
+      "docs": {
+        "path": "Path in project:",
+        "props": "Props",
+        "slots": "Slots",
+        "type": "type",
+        "required": "required",
+        "default": "default"
+      }
+    }
+  }
+}
diff --git a/src/app/src/locales/fr.json b/src/app/src/locales/fr.json
new file mode 100644
index 00000000..99266d19
--- /dev/null
+++ b/src/app/src/locales/fr.json
@@ -0,0 +1,177 @@
+{
+  "studio": {
+    "buttons": {
+      "edit": "Editer la page",
+      "retryPublish": "Réessayer la publication",
+      "reloadApp": "Recharger l'application",
+      "reload": "Recharger",
+      "signOut": "Se déconnecter",
+      "review": "Valider",
+      "publish": "Publier",
+      "back": "Retour"
+    },
+    "headings": {
+      "directories": "Dossiers",
+      "files": "Fichiers",
+      "media": "Médias"
+    },
+    "tooltips": {
+      "toggleStudio": "Afficher/Masquer le Studio",
+      "unlinkEditor": "Délier l'éditeur et l'aperçu",
+      "linkEditor": "Lier l'éditeur et l'aperçu",
+      "copiedToClipboard": "Copié dans le presse-papiers",
+      "copyToClipboard": "Copier dans le presse-papiers",
+      "publishChanges": "Publier les changements",
+      "backToContent": "Retour au contenu"
+    },
+    "notifications": {
+      "error": {
+        "unknown": "Une erreur inconnue est survenue"
+      }
+    },
+    "publish": {
+      "failedTitle": "Échec de la publication",
+      "summary": "sur la branche {branch} du dépôt {repo}",
+      "errorTitle": "Erreur lors de la publication sur GitHub",
+      "failedGeneric": "Échec de la publication des changements"
+    },
+    "review": {
+      "title": "Changements à valider",
+      "created": "Créé",
+      "updated": "Modifié",
+      "deleted": "Supprimé"
+    },
+    "publishSuccess": {
+      "title": "Changements publiés",
+      "summary": "{count} changement publié sur la branche {branch} du dépôt {repo} | {count} changements publiés sur la branche {branch} du dépôt {repo}",
+      "alertTitleWaiting": "En attente de déploiement...",
+      "alertTitleComplete": "Déploiement terminé",
+      "alertDescWaiting": "Le site web doit être déployé pour que les changements soient visibles dans le Studio.",
+      "alertDescComplete": "Une nouvelle version de votre site a été déployée. Veuillez rafraîchir l'application pour voir les changements dans le Studio."
+    },
+    "newVersionBanner": {
+      "title": "Nouvelle version du site détectée",
+      "description": "Une nouvelle version de votre site a été déployée. Rechargez l'application pour voir les derniers changements.",
+      "reloadButton": "Recharger"
+    },
+    "footer": {
+      "developer_view": "Vue développeur"
+    },
+    "alert": {
+      "mdcFormatting": "Formatage appliqué pour s'aligner sur le standard de syntaxe MDC."
+    },
+    "conflict": {
+      "title": "Conflit détecté",
+      "repository": "Dépôt",
+      "branch": "Branche",
+      "file": "Fichier",
+      "description": "Le contenu sur GitHub diffère de la version de votre site web. Assurez-vous que vos dernières modifications sont déployées et actualisez la page.",
+      "githubVersion": "GitHub",
+      "websiteVersion": "Site Web"
+    },
+    "nav": {
+      "content": "Contenu",
+      "media": "Média"
+    },
+    "placeholders": {
+      "commitMessage": "Message de commit",
+      "order": "N°",
+      "fileName": "Nom du fichier"
+    },
+    "validation": {
+      "commitRequired": "Message de commit requis",
+      "nameEmpty": "Le nom ne peut pas être vide",
+      "nameEndsWithDot": "Le nom ne peut pas se terminer par '.'",
+      "nameStartsWithSlash": "Le nom ne peut pas commencer par '/'",
+      "nameExists": "Ce nom existe déjà"
+    },
+    "media": {
+      "altFilePreview": "Aperçu du fichier",
+      "altImagePreview": "Aperçu de l'image",
+      "playAudio": "Lire l'audio",
+      "audioTagNotSupported": "Votre navigateur ne supporte pas la balise audio.",
+      "playVideo": "Lire la vidéo",
+      "videoTagNotSupported": "Votre navigateur ne supporte pas la balise vidéo.",
+      "metaWidth": "Largeur",
+      "metaHeight": "Hauteur",
+      "metaType": "Type",
+      "metaSize": "Taille",
+      "fileName": "Nom du fichier",
+      "publicPath": "Chemin public",
+      "githubPath": "Chemin GitHub",
+      "markdown": "Markdown"
+    },
+    "aria": {
+      "openActions": "Ouvrir les actions",
+      "cancel": "Annuler",
+      "submit": "Valider"
+    },
+    "actions": {
+      "confirmAction": "Cliquez à nouveau pour {action}",
+      "verbs": {
+        "create": "créer",
+        "delete": "supprimer",
+        "rename": "renommer",
+        "upload": "téléverser",
+        "duplicate": "dupliquer"
+      },
+      "labels": {
+        "create-document": "Nouveau fichier",
+        "create-document-folder": "Nouveau dossier",
+        "create-media-folder": "Nouveau dossier média",
+        "rename-item": "Renommer",
+        "delete-item": "Supprimer",
+        "upload-media": "Téléverser un média",
+        "duplicate-item": "Dupliquer",
+        "revert-item": "Annuler les modifications",
+        "publish-branch": "Publier la branche"
+      },
+      "tooltips": {
+        "revert-item": "Annuler les modifications",
+        "create-document": "Créer un nouveau fichier",
+        "upload-media": "Téléverser un média",
+        "create-document-folder": "Créer un nouveau dossier",
+        "create-media-folder": "Créer un nouveau dossier",
+        "rename-item": "Renommer le fichier",
+        "duplicate-item": "Dupliquer le fichier",
+        "delete-item": "Supprimer le fichier",
+        "publish-branch": "Publier la branche"
+      }
+    },
+    "items": {
+      "itemCount": "1 élément | {count} éléments"
+    },
+    "monaco": {
+      "headings": {
+        "h1": "Titre 1",
+        "h2": "Titre 2",
+        "h3": "Titre 3"
+      },
+      "styles": {
+        "bold": "Gras",
+        "italic": "Italique"
+      },
+      "lists": {
+        "bulleted": "Liste à puces",
+        "numbered": "Liste numérotée"
+      },
+      "other": {
+        "emojis": "Émojis",
+        "blockquote": "Citation",
+        "code": "Bloc de code",
+        "inlineCode": "Code (en ligne)",
+        "link": "Lien",
+        "image": "Image"
+      },
+      "writeSomething": "Écrivez quelque chose",
+      "docs": {
+        "path": "Chemin dans le projet :",
+        "props": "Props",
+        "slots": "Slots",
+        "type": "type",
+        "required": "requis",
+        "default": "défaut"
+      }
+    }
+  }
+}
diff --git a/src/app/src/main.ts b/src/app/src/main.ts
index bcf28f21..b6378384 100644
--- a/src/app/src/main.ts
+++ b/src/app/src/main.ts
@@ -1,14 +1,12 @@
 import type { VueElementConstructor } from 'vue'
 import { defineCustomElement } from 'vue'
 import { createRouter, createMemoryHistory } from 'vue-router'
-
 // @ts-expect-error -- inline css
 import styles from './assets/css/main.css?inline'
-
 import { createHead } from '@unhead/vue/client'
 import { generateColors, tailwindColors } from './utils/colors'
 import { refineTailwindStyles } from './utils/styles.ts'
-
+import { createI18n } from 'vue-i18n'
 import App from './app.vue'
 import Content from './pages/content.vue'
 import Media from './pages/media.vue'
@@ -55,7 +53,18 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
         })
 
         app.use(router)
-        // app._context.provides.usehead = true
+
+        const i18n = createI18n({
+          legacy: false,
+          locale: 'en',
+          fallbackLocale: 'en',
+          globalInjection: true,
+        })
+
+        app.provide('i18n', i18n)
+
+        app.use(i18n)
+
         app.use({
           install() {
             const head = createHead({
diff --git a/src/app/src/pages/content.vue b/src/app/src/pages/content.vue
index b129e64a..64c8fc8e 100644
--- a/src/app/src/pages/content.vue
+++ b/src/app/src/pages/content.vue
@@ -56,7 +56,7 @@ const showFileForm = computed(() => {
                 class="size-3.5 text-muted"
               />
               <h3 class="text-xs uppercase tracking-wider text-muted">
-                Directories
+                {{ $t('studio.headings.directories') }}
               </h3>
               <UBadge
                 v-if="folderTree?.length > 0"
@@ -81,7 +81,7 @@ const showFileForm = computed(() => {
                 class="size-3.5 text-muted"
               />
               <h3 class="text-xs uppercase tracking-wider text-muted">
-                Files
+                {{ $t('studio.headings.files') }}
               </h3>
               <UBadge
                 v-if="fileTree?.length > 0"
diff --git a/src/app/src/pages/error.vue b/src/app/src/pages/error.vue
index de678f4d..f1f6cbb3 100644
--- a/src/app/src/pages/error.vue
+++ b/src/app/src/pages/error.vue
@@ -2,13 +2,15 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStudio } from '../composables/useStudio'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const { git } = useStudio()
 
 const errorMessage = computed(() => {
-  return (route.query.error as string) || 'An unknown error occurred'
+  return (route.query.error as string) || t('studio.notifications.error.unknown')
 })
 
 const repositoryInfo = computed(() => git.getRepositoryInfo())
@@ -32,34 +34,39 @@ function retry() {
 
       <div class="text-center">
         <h1 class="text-2xl font-bold text-default mb-2">
-          Publish Failed
+          {{ $t('studio.publish.failedTitle') }}
         </h1>
-        <p class="text-dimmed flex items-center flex-wrap justify-center">
-          on
-          <UButton
-            :label="repositoryInfo.branch"
-            icon="i-lucide-git-branch"
-            :to="git.getBranchUrl()"
-            variant="link"
-            target="_blank"
-            :padded="false"
-          />
-          of
-          <UButton
-            :label="`${repositoryInfo.owner}/${repositoryInfo.repo}`"
-            icon="i-simple-icons:github"
-            :to="git.getRepositoryUrl()"
-            variant="link"
-            target="_blank"
-            :padded="false"
-          />
-          repository
-        </p>
+        <i18n-t
+          keypath="studio.publish.summary"
+          tag="p"
+          class="text-gray-600 flex items-center flex-wrap justify-center gap-x-1"
+        >
+          <template #branch>
+            <UButton
+              :label="repositoryInfo.branch"
+              icon="i-lucide-git-branch"
+              :to="git.getBranchUrl()"
+              variant="link"
+              target="_blank"
+              :padded="false"
+            />
+          </template>
+          <template #repo>
+            <UButton
+              :label="`${repositoryInfo.owner}/${repositoryInfo.repo}`"
+              icon="i-simple-icons:github"
+              :to="git.getRepositoryUrl()"
+              variant="link"
+              target="_blank"
+              :padded="false"
+            />
+          </template>
+        </i18n-t>
       </div>
 
       <UAlert
         icon="i-lucide-alert-triangle"
-        title="Error during GitHub publish"
+        :title="$t('studio.publish.errorTitle')"
         :description="errorMessage"
         color="error"
         variant="soft"
@@ -70,7 +77,7 @@ function retry() {
           icon="i-lucide-rotate-ccw"
           @click="retry"
         >
-          Retry Publish
+          {{ $t('studio.buttons.retryPublish') }}
         </UButton>
       </div>
     </div>
diff --git a/src/app/src/pages/media.vue b/src/app/src/pages/media.vue
index 8f1bf7f3..075ce4be 100644
--- a/src/app/src/pages/media.vue
+++ b/src/app/src/pages/media.vue
@@ -80,7 +80,7 @@ async function onFileDrop(event: DragEvent) {
                   class="size-3.5 text-muted"
                 />
                 <h3 class="text-xs font-semibold uppercase tracking-wider text-muted">
-                  Directories
+                  {{ $t('studio.headings.directories') }}
                 </h3>
                 <UBadge
                   v-if="folderTree?.length > 0"
@@ -105,7 +105,7 @@ async function onFileDrop(event: DragEvent) {
                   class="size-3.5 text-muted"
                 />
                 <h3 class="text-xs font-semibold uppercase tracking-wider text-muted">
-                  Media
+                  {{ $t('studio.headings.media') }}
                 </h3>
                 <UBadge
                   :label="fileTree.length.toString()"
diff --git a/src/app/src/pages/review.vue b/src/app/src/pages/review.vue
index 588f7a67..ef4e139f 100644
--- a/src/app/src/pages/review.vue
+++ b/src/app/src/pages/review.vue
@@ -18,19 +18,16 @@ const groupedDrafts = computed(() => {
 const statusConfig = {
   created: {
     icon: 'i-lucide-file-plus-2',
-    label: 'Created',
     color: COLOR_UI_STATUS_MAP[DraftStatus.Created],
     iconClass: 'text-success',
   },
   updated: {
     icon: 'i-lucide-file-edit',
-    label: 'Updated',
     color: COLOR_UI_STATUS_MAP[DraftStatus.Updated],
     iconClass: 'text-warning',
   },
   deleted: {
     icon: 'i-lucide-file-x-2',
-    label: 'Deleted',
     color: COLOR_UI_STATUS_MAP[DraftStatus.Deleted],
     iconClass: 'text-error',
   },
@@ -41,7 +38,7 @@ const statusConfig = {
   <div class="flex flex-col h-full text-default">
     <div class="flex items-center gap-1 px-4 py-2 border-b-[0.5px] border-default bg-muted/70">
       <h2 class="text-xs font-semibold text-muted">
-        Review changes
+        {{ $t('studio.review.title') }}
       </h2>
       <UBadge
         v-if="context.draftCount.value > 0"
@@ -68,7 +65,7 @@ const statusConfig = {
                 :class="statusConfig[status].iconClass"
                 class="w-3.5 h-3.5"
               />
-              <span class="text-xs font-semibold">{{ statusConfig[status].label }}</span>
+              <span class="text-xs font-semibold">{{ $t(`studio.review.${status}`) }}</span>
               <UBadge
                 :label="drafts.length.toString()"
                 :color="statusConfig[status].color as never"
diff --git a/src/app/src/pages/success.vue b/src/app/src/pages/success.vue
index 1d27a1de..647cbdf0 100644
--- a/src/app/src/pages/success.vue
+++ b/src/app/src/pages/success.vue
@@ -3,10 +3,12 @@ import { computed, ref, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStudio } from '../composables/useStudio'
 import { useStudioState } from '../composables/useStudioState'
+import { useI18n } from 'vue-i18n'
 
 const route = useRoute()
 const { git } = useStudio()
 const { manifestId } = useStudioState()
+const { t } = useI18n()
 
 const isReloadingApp = ref(false)
 const isWaitingForDeployment = ref(true)
@@ -20,9 +22,9 @@ const repositoryInfo = computed(() => git.getRepositoryInfo())
 
 const alertDescription = computed(() => {
   if (isWaitingForDeployment.value) {
-    return 'The website needs to be deployed for changes to be visible in Studio.'
+    return t('studio.publishSuccess.alertDescWaiting')
   }
-  return 'A new version of your website has been deployed. Please refresh your app to see changes in Studio.'
+  return t('studio.publishSuccess.alertDescComplete')
 })
 
 function reload() {
@@ -60,35 +62,45 @@ onMounted(() => {
 
       <div class="text-center">
         <h1 class="text-2xl font-bold text-default mb-2">
-          Changes Published
+          {{ $t('studio.publishSuccess.title') }}
         </h1>
-        <p class="text-dimmed flex items-center flex-wrap justify-center">
-          <span class="font-semibold text-default">{{ changeCount }} &nbsp;</span>
-          {{ changeCount === 1 ? 'change' : 'changes' }} published on
-          <UButton
-            :label="repositoryInfo.branch"
-            icon="i-lucide-git-branch"
-            :to="git.getBranchUrl()"
-            variant="link"
-            target="_blank"
-            :padded="false"
-          />
-          of
-          <UButton
-            :label="`${repositoryInfo.owner}/${repositoryInfo.repo}`"
-            icon="i-simple-icons:github"
-            :to="git.getRepositoryUrl()"
-            variant="link"
-            target="_blank"
-            :padded="false"
-          />
-          repository
-        </p>
+        <i18n-t
+          keypath="studio.publishSuccess.summary"
+          tag="p"
+          class="text-dimmed flex items-center flex-wrap justify-center"
+          :plural="changeCount"
+        >
+          <template #count>
+            <span class="font-semibold text-default">{{ changeCount }}</span>
+          </template>
+
+          <template #branch>
+            <UButton
+              :label="repositoryInfo.branch"
+              icon="i-lucide-git-branch"
+              :to="git.getBranchUrl()"
+              variant="link"
+              target="_blank"
+              :padded="false"
+            />
+          </template>
+
+          <template #repo>
+            <UButton
+              :label="`${repositoryInfo.owner}/${repositoryInfo.repo}`"
+              icon="i-simple-icons:github"
+              :to="git.getRepositoryUrl()"
+              variant="link"
+              target="_blank"
+              :padded="false"
+            />
+          </template>
+        </i18n-t>
       </div>
 
       <UAlert
         :icon="isWaitingForDeployment ? 'i-lucide-loader' : 'i-lucide-check'"
-        :title="isWaitingForDeployment ? 'Waiting for deployment...' : 'Deployment complete'"
+        :title="isWaitingForDeployment ? $t('studio.publishSuccess.alertTitleWaiting') : $t('studio.publishSuccess.alertTitleComplete')"
         :description="alertDescription"
         :color="isWaitingForDeployment ? 'warning' : 'success'"
         variant="soft"
@@ -103,7 +115,7 @@ onMounted(() => {
           :loading="isReloadingApp"
           @click="reload"
         >
-          Reload application
+          {{ $t('studio.buttons.reloadApp') }}
         </UButton>
       </div>
     </div>
diff --git a/src/app/src/types/index.ts b/src/app/src/types/index.ts
index 155871f8..097fa8cc 100644
--- a/src/app/src/types/index.ts
+++ b/src/app/src/types/index.ts
@@ -21,6 +21,7 @@ export interface StudioHost {
   meta: {
     dev: boolean
     components: () => ComponentMeta[]
+    defaultLocale: string
   }
   on: {
     routeChange: (fn: (to: RouteLocationNormalized, from: RouteLocationNormalized) => void) => void
diff --git a/src/app/src/utils/context.ts b/src/app/src/utils/context.ts
index e7825b98..e8ac4e80 100644
--- a/src/app/src/utils/context.ts
+++ b/src/app/src/utils/context.ts
@@ -6,59 +6,59 @@ export const twoStepActions: StudioItemActionId[] = [StudioItemActionId.CreateDo
 export const STUDIO_ITEM_ACTION_DEFINITIONS: StudioAction<StudioItemActionId>[] = [
   {
     id: StudioItemActionId.RevertItem,
-    label: 'Revert changes',
+    label: 'studio.actions.labels.revert-item',
     icon: 'i-lucide-undo',
-    tooltip: 'Revert changes',
+    tooltip: 'studio.actions.tooltips.revert-item',
   },
   {
     id: StudioItemActionId.CreateDocument,
-    label: 'Create file',
+    label: 'studio.actions.labels.create-document',
     icon: 'i-lucide-file-plus',
-    tooltip: 'Create a new file',
+    tooltip: 'studio.actions.tooltips.create-document',
   },
   {
     id: StudioItemActionId.UploadMedia,
-    label: 'Upload media',
+    label: 'studio.actions.labels.upload-media',
     icon: 'i-lucide-upload',
-    tooltip: 'Upload media',
+    tooltip: 'studio.actions.tooltips.upload-media',
   },
   {
     id: StudioItemActionId.CreateDocumentFolder,
-    label: 'Create folder',
+    label: 'studio.actions.labels.create-document-folder',
     icon: 'i-lucide-folder-plus',
-    tooltip: 'Create a new folder',
+    tooltip: 'studio.actions.tooltips.create-document-folder',
   },
   {
     id: StudioItemActionId.CreateMediaFolder,
-    label: 'Create folder',
+    label: 'studio.actions.labels.create-media-folder',
     icon: 'i-lucide-folder-plus',
-    tooltip: 'Create a new folder',
+    tooltip: 'studio.actions.tooltips.create-media-folder',
   },
   {
     id: StudioItemActionId.RenameItem,
-    label: 'Rename',
+    label: 'studio.actions.labels.rename-item',
     icon: 'i-lucide-pencil',
-    tooltip: 'Rename file',
+    tooltip: 'studio.actions.tooltips.rename-item',
   },
   {
     id: StudioItemActionId.DuplicateItem,
-    label: 'Duplicate',
+    label: 'studio.actions.labels.duplicate-item',
     icon: 'i-lucide-copy',
-    tooltip: 'Duplicate file',
+    tooltip: 'studio.actions.tooltips.duplicate-item',
   },
   {
     id: StudioItemActionId.DeleteItem,
-    label: 'Delete',
+    label: 'studio.actions.labels.delete-item',
     icon: 'i-lucide-trash',
-    tooltip: 'Delete file',
+    tooltip: 'studio.actions.tooltips.delete-item',
   },
 ] as const
 
 export const STUDIO_BRANCH_ACTION_DEFINITIONS: StudioAction<StudioBranchActionId>[] = [{
   id: StudioBranchActionId.PublishBranch,
-  label: 'Publish branch',
+  label: 'studio.actions.labels.publish-branch',
   icon: 'i-lucide-rocket',
-  tooltip: 'Publish branch',
+  tooltip: 'studio.actions.tooltips.publish-branch',
 }] as const
 
 export function computeItemActions(itemActions: StudioAction<StudioItemActionId>[], item: TreeItem | null, feature: StudioFeature | null): StudioAction<StudioItemActionId>[] {
diff --git a/src/app/src/utils/monaco/index.ts b/src/app/src/utils/monaco/index.ts
index 7bb7ae91..a1fc1c78 100644
--- a/src/app/src/utils/monaco/index.ts
+++ b/src/app/src/utils/monaco/index.ts
@@ -7,6 +7,43 @@ export type { editor as Editor } from 'modern-monaco/editor-core'
 export type Monaco = Awaited<ReturnType<typeof import('modern-monaco')['init']>>
 
 export const setupMonaco = createSingletonPromise(async () => {
+  // List from https://github.com/microsoft/vscode/blob/2022aede9218d2fe7668115a75fa56032f863014/build/lib/i18n.js#L24C1-L34C3
+  const validNlsLanguages = [
+    'zh-tw',
+    'zh-cn',
+    'ja',
+    'ko',
+    'de',
+    'fr',
+    'es',
+    'ru',
+    'it',
+  ]
+  // @ts-expect-error - global property defined in the nuxt plugin
+  const locale: string = window.__NUXT_STUDIO_DEFAULT_LOCALE__ || 'en'
+
+  let finalLocale: string
+  if (locale === 'en') {
+    finalLocale = 'en'
+  }
+  else if (validNlsLanguages.includes(locale)) {
+    finalLocale = locale
+  }
+  else {
+    console.warn(`[Monaco] could not load locale '${locale}'. Valid locales: ${validNlsLanguages.join(', ')}`)
+    finalLocale = 'en'
+  }
+
+  try {
+    if (finalLocale !== 'en') {
+      const nlsUrl = `https://esm.sh/monaco-editor/esm/nls.messages.${finalLocale}.js`
+      await import(/* @vite-ignore */ nlsUrl)
+    }
+  }
+  catch (e) {
+    console.error(`[Monaco] error while loading locale: ${finalLocale}`, e)
+  }
+
   // @ts-expect-error -- use dynamic import to reduce bundle size
   const init = await import('https://esm.sh/modern-monaco').then(m => m.init)
   // @ts-expect-error -- use dynamic import to reduce bundle size
diff --git a/src/app/src/utils/monaco/mdc-compilation.ts b/src/app/src/utils/monaco/mdc-compilation.ts
index c1ce421d..10eeb2e9 100644
--- a/src/app/src/utils/monaco/mdc-compilation.ts
+++ b/src/app/src/utils/monaco/mdc-compilation.ts
@@ -6,11 +6,17 @@ import type { TreeItem, ComponentMeta } from '../../types'
 type Monaco = typeof import('modern-monaco/editor-core')
 type CompletionItemType = 'inline' | 'block' | 'all'
 type CompletionItem = languages.CompletionItem & { type: CompletionItemType }
+type TFunction = (key: string, defaultVal?: string) => string
 
 const projectComponents = ref<ComponentMeta[]>([])
 const projectMedias = ref<TreeItem[]>([])
 
-export const setupSuggestion = (monaco: typeof import('modern-monaco/editor-core'), componentsMeta: ComponentMeta[], treeMedia: TreeItem[]) => {
+export const setupSuggestion = (
+  monaco: typeof import('modern-monaco/editor-core'),
+  componentsMeta: ComponentMeta[],
+  treeMedia: TreeItem[],
+  t: TFunction,
+) => {
   projectComponents.value = componentsMeta
   projectMedias.value = treeMedia
 
@@ -60,8 +66,8 @@ export const setupSuggestion = (monaco: typeof import('modern-monaco/editor-core
 
       return {
         suggestions: [
-          ...getGlobalCompletionItems(monaco, range, trigger),
-          ...getProjectCompletionItems(monaco, range, trigger, projectComponents.value as ComponentMeta[]),
+          ...getGlobalCompletionItems(monaco, range, trigger, t),
+          ...getProjectCompletionItems(monaco, range, trigger, projectComponents.value as ComponentMeta[], t),
           ...getMediasCompletionItems(monaco, range, trigger, projectMedias.value),
         ].filter(item => completionType === 'all' || item.type === completionType),
       }
@@ -156,10 +162,10 @@ function findComponentProps(componentName: string, components: ComponentMeta[])
   return component.meta.props || []
 }
 
-function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'): CompletionItem[] {
+function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/', t: TFunction): CompletionItem[] {
   return [
     {
-      label: 'Heading 1',
+      label: t('studio.monaco.headings.h1'),
       filterText: trigger + 'heading 1',
       detail: '#',
       insertText: '# ${1:title}',
@@ -169,7 +175,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Heading 2',
+      label: t('studio.monaco.headings.h2'),
       filterText: trigger + 'heading 2',
       detail: '##',
       insertText: '## ${1:title}',
@@ -179,7 +185,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Heading 3',
+      label: t('studio.monaco.headings.h3'),
       filterText: trigger + 'heading 3',
       detail: '###',
       insertText: '### ${1:title}',
@@ -189,7 +195,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Bold',
+      label: t('studio.monaco.styles.bold'),
       filterText: trigger + 'bold',
       insertText: '**${1:title}**',
       detail: '**',
@@ -199,7 +205,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Italic',
+      label: t('studio.monaco.styles.italic'),
       filterText: trigger + 'italic',
       insertText: '_${1:title}_',
       detail: '_',
@@ -209,7 +215,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Emojis',
+      label: t('studio.monaco.other.emojis'),
       filterText: trigger + 'emoji',
       insertText: ':${1}:',
       detail: ':',
@@ -219,7 +225,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Bulleted List',
+      label: t('studio.monaco.lists.bulleted'),
       filterText: trigger + 'bulleted-list',
       insertText: '- ${1:Item 1}\n- ${2:Item 2}\n\n${3}',
       detail: '-',
@@ -229,7 +235,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Numbered List',
+      label: t('studio.monaco.lists.numbered'),
       filterText: trigger + 'numbered-list',
       insertText: '1. ${1:Item 1}\n2. ${2:Item 2}\n\n${3}',
       detail: '1.',
@@ -239,7 +245,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Blockquote',
+      label: t('studio.monaco.other.blockquote'),
       filterText: trigger + 'blockquote',
       insertText: '> ${1}\n> ${2}\n\n${3}',
       detail: '>',
@@ -249,7 +255,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Code',
+      label: t('studio.monaco.other.code'),
       filterText: trigger + 'code',
       insertText: '```${1:language}\n${2:code}\n```\n\n${3}',
       detail: '```',
@@ -259,7 +265,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Inline Code',
+      label: t('studio.monaco.other.inlineCode'),
       filterText: trigger + 'code-inline',
       insertText: '`$1` $2',
       detail: '`',
@@ -269,7 +275,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Link',
+      label: t('studio.monaco.other.link'),
       filterText: trigger + 'link',
       detail: '[]()',
       documentation: [
@@ -282,7 +288,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
       range,
     },
     {
-      label: 'Image',
+      label: t('studio.monaco.other.image'),
       filterText: trigger + 'image',
       detail: '![]()',
       kind: monaco.languages.CompletionItemKind.Field,
@@ -294,7 +300,7 @@ function getGlobalCompletionItems(monaco: Monaco, range: IRange, trigger = '/'):
   ]
 }
 
-function getProjectCompletionItems(monaco: Monaco, range: IRange, trigger = '/', componentsMeta: ComponentMeta[]): CompletionItem[] {
+function getProjectCompletionItems(monaco: Monaco, range: IRange, trigger = '/', componentsMeta: ComponentMeta[], t: TFunction): CompletionItem[] {
   const componentsItems: CompletionItem[] = componentsMeta.map((comp) => {
     let tabIndex = 1
     const isBlock = comp.meta.slots?.length
@@ -310,7 +316,7 @@ function getProjectCompletionItems(monaco: Monaco, range: IRange, trigger = '/',
     }
 
     if (isBlock) {
-      insertText += `\n\${${tabIndex++}:Write Something}`
+      insertText += `\n\${${tabIndex++}:${t('studio.monaco.writeSomething')}}`
     }
 
     if (isBlock) {
@@ -324,7 +330,7 @@ function getProjectCompletionItems(monaco: Monaco, range: IRange, trigger = '/',
       insertText,
       documentation: {
         supportHtml: true,
-        value: getComponentDocumentation(comp),
+        value: getComponentDocumentation(comp, t),
       },
       kind: monaco.languages.CompletionItemKind.Module,
       insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
@@ -357,25 +363,25 @@ export const getMediasCompletionItems = (monaco: Monaco, range: IRange, trigger
   return mediasItems
 }
 
-const getComponentDocumentation = (comp: ComponentMeta) => `
-Path in project: \`${comp.path}\`
+const getComponentDocumentation = (comp: ComponentMeta, t: TFunction) => `
+${t('studio.monaco.docs.path')} \`${comp.path}\`
 
 <br />
 
-## Props
+## ${t('studio.monaco.docs.props')}
 
 ${comp.meta.props.map((prop) => {
   return `
   - **${prop.name}**
-  - - type: ${prop.type},
-  - - required: ${prop.required},
-  - - default: ${prop.default},
+  - - ${t('studio.monaco.docs.type')}: ${prop.type},
+  - - ${t('studio.monaco.docs.required')}: ${prop.required},
+  - - ${t('studio.monaco.docs.default')}: ${prop.default},
   `
 }).join('\n')}
 
 <br />
 
-## Slots
+## ${t('studio.monaco.docs.slots')}
 
 ${comp.meta.slots.map(slot => `- ${slot.name}`).join('\n')}
 
diff --git a/src/module/src/module.ts b/src/module/src/module.ts
index 75303f1c..794bcf7b 100644
--- a/src/module/src/module.ts
+++ b/src/module/src/module.ts
@@ -81,6 +81,16 @@ interface ModuleOptions {
   development?: {
     sync?: boolean
   }
+  /**
+   * i18n settings for the Studio.
+   */
+  i18n?: {
+    /**
+     * The default locale to use.
+     * @default 'en'
+     */
+    defaultLocale?: string
+  }
 }
 
 const logger = useLogger('nuxt-studio')
@@ -92,6 +102,7 @@ export default defineNuxtModule<ModuleOptions>({
     docs: 'https://content.nuxt.com/studio',
   },
   defaults: {
+    dev: true,
     route: '/_studio',
     repository: {
       provider: 'github',
@@ -107,7 +118,9 @@ export default defineNuxtModule<ModuleOptions>({
         clientSecret: process.env.STUDIO_GITHUB_CLIENT_SECRET,
       },
     },
-    dev: true,
+    i18n: {
+      defaultLocale: 'en',
+    },
   },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url)
@@ -138,6 +151,8 @@ export default defineNuxtModule<ModuleOptions>({
       },
       // @ts-expect-error Autogenerated type does not match with options
       repository: options.repository,
+      // @ts-expect-error Autogenerated type does not match with options
+      i18n: options.i18n,
     }
 
     nuxt.options.runtimeConfig.studio = {
diff --git a/src/module/src/runtime/host.ts b/src/module/src/runtime/host.ts
index 3b6c70fc..fe85d56b 100644
--- a/src/module/src/runtime/host.ts
+++ b/src/module/src/runtime/host.ts
@@ -8,7 +8,7 @@ import { kebabCase } from 'scule'
 import type { StudioHost, StudioUser, DatabaseItem, MediaItem, Repository } from 'nuxt-studio/app'
 import type { RouteLocationNormalized, Router } from 'vue-router'
 // @ts-expect-error queryCollection is not defined in .nuxt/imports.d.ts
-import { clearError, getAppManifest, queryCollection, queryCollectionItemSurroundings, queryCollectionNavigation, queryCollectionSearchSections } from '#imports'
+import { clearError, getAppManifest, queryCollection, queryCollectionItemSurroundings, queryCollectionNavigation, queryCollectionSearchSections, useRuntimeConfig } from '#imports'
 import { collections } from '#content/preview'
 import { publicAssetsStorage } from '#build/studio-public-assets'
 import { useHostMeta } from './composables/useMeta'
@@ -107,6 +107,7 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
     meta: {
       dev: false,
       components: () => meta.componentsMeta.value,
+      defaultLocale: useRuntimeConfig().public.studio.i18n?.defaultLocale || 'en',
     },
     on: {
       routeChange: (fn: (to: RouteLocationNormalized, from: RouteLocationNormalized) => void) => {