From 81b1227e826239774d5672c140607a5c66458dd7 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Fri, 21 Nov 2025 19:20:19 +0100
Subject: [PATCH 1/2] feat(#22): Use translation keys in files

---
 .../app/components/DeleteModal.vue            |   8 +-
 legalconsenthub/app/components/FormEngine.vue |   5 +-
 .../components/FormStepperWithNavigation.vue  |   8 +-
 .../components/FormValidationIndicator.vue    |  57 +++----
 .../app/components/NotificationsSlideover.vue |   4 +-
 .../app/components/RestoreVersionModal.vue    |  11 +-
 legalconsenthub/app/components/TheComment.vue |  11 +-
 legalconsenthub/app/components/UserMenu.vue   |  22 +--
 .../app/components/VersionComparisonModal.vue |  34 ++--
 .../app/components/VersionHistory.vue         |  35 ++--
 .../app/components/formelements/TheSelect.vue |   2 +-
 .../formelements/TheTitleBodyInput.vue        |   4 +-
 .../components/formelements/Unimplemented.vue |   2 +-
 .../composables/useFormElementManagement.ts   |   7 +-
 .../app/composables/usePermissions.ts         |   1 -
 legalconsenthub/app/error.vue                 |   6 +-
 legalconsenthub/app/layouts/default.vue       |   6 +-
 .../app/middleware/permissions.global.ts      |   1 -
 legalconsenthub/app/pages/administration.vue  |  37 +++--
 .../application-forms/[id]/[sectionIndex].vue |   9 +-
 .../pages/application-forms/[id]/versions.vue |  14 +-
 legalconsenthub/app/pages/create.vue          |  15 +-
 legalconsenthub/app/pages/index.vue           |  19 ++-
 legalconsenthub/app/pages/login.vue           |  53 +++---
 legalconsenthub/app/utils/formDiff.ts         |   6 +-
 legalconsenthub/i18n/locales/de.json          | 157 +++++++++++++++++-
 legalconsenthub/i18n/locales/en.json          | 157 +++++++++++++++++-
 legalconsenthub/types/formDiff.ts             |   1 -
 28 files changed, 497 insertions(+), 195 deletions(-)

diff --git a/legalconsenthub/app/components/DeleteModal.vue b/legalconsenthub/app/components/DeleteModal.vue
index c89519a..29594fb 100644
--- a/legalconsenthub/app/components/DeleteModal.vue
+++ b/legalconsenthub/app/components/DeleteModal.vue
@@ -1,11 +1,11 @@
 <template>
-  <UModal :open="isOpen" title="Mitbestimmungsantrag löschen" @update:open="$emit('update:isOpen', $event)">
+  <UModal :open="isOpen" :title="$t('applicationForms.deleteTitle')" @update:open="$emit('update:isOpen', $event)">
     <template #body>
-      Möchten Sie wirklich den Mitbestimmungsantrag <strong>{{ applicationFormToDelete.name }}</strong> löschen?
+      <span v-html="$t('applicationForms.deleteConfirm', { name: applicationFormToDelete.name })"></span>
     </template>
     <template #footer>
-      <UButton label="Abbrechen" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />
-      <UButton label="Löschen" color="neutral" @click="$emit('delete', applicationFormToDelete.id)" />
+      <UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />
+      <UButton :label="$t('common.delete')" color="neutral" @click="$emit('delete', applicationFormToDelete.id)" />
     </template>
   </UModal>
 </template>
diff --git a/legalconsenthub/app/components/FormEngine.vue b/legalconsenthub/app/components/FormEngine.vue
index 60f21d1..56643e2 100644
--- a/legalconsenthub/app/components/FormEngine.vue
+++ b/legalconsenthub/app/components/FormEngine.vue
@@ -92,18 +92,19 @@ function getResolvedComponent(formElement: FormElementDto) {
 }
 
 function getDropdownItems(formElementId: string, formElementPosition: number): DropdownMenuItem[] {
+  const { t: $t } = useI18n()
   const items = []
 
   if (route.path !== '/create') {
     items.push({
-      label: 'Comments',
+      label: $t('applicationForms.formElements.comments'),
       icon: 'i-lucide-message-square-more',
       onClick: () => toggleComments(formElementId)
     })
   }
 
   items.push({
-    label: 'Add input field below',
+    label: $t('applicationForms.formElements.addInputBelow'),
     icon: 'i-lucide-list-plus',
     onClick: () => emit('add:input-form', formElementPosition)
   })
diff --git a/legalconsenthub/app/components/FormStepperWithNavigation.vue b/legalconsenthub/app/components/FormStepperWithNavigation.vue
index b6f31f4..bb88aea 100644
--- a/legalconsenthub/app/components/FormStepperWithNavigation.vue
+++ b/legalconsenthub/app/components/FormStepperWithNavigation.vue
@@ -30,7 +30,7 @@
 
     <div class="flex gap-2 justify-between">
       <UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
-        Prev
+        {{ $t('applicationForms.navigation.previous') }}
       </UButton>
 
       <UButton
@@ -40,15 +40,15 @@
         size="lg"
         @click="handleNavigate('forward')"
       >
-        Next
+        {{ $t('applicationForms.navigation.next') }}
       </UButton>
 
       <div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
         <UButton trailing-icon="i-lucide-save" :disabled="disabled" variant="outline" size="lg" @click="emit('save')">
-          Save
+          {{ $t('applicationForms.navigation.save') }}
         </UButton>
         <UButton trailing-icon="i-lucide-send-horizontal" :disabled="disabled" size="lg" @click="emit('submit')">
-          Submit
+          {{ $t('applicationForms.navigation.submit') }}
         </UButton>
       </div>
     </div>
diff --git a/legalconsenthub/app/components/FormValidationIndicator.vue b/legalconsenthub/app/components/FormValidationIndicator.vue
index 19d865b..59cb023 100644
--- a/legalconsenthub/app/components/FormValidationIndicator.vue
+++ b/legalconsenthub/app/components/FormValidationIndicator.vue
@@ -1,13 +1,7 @@
 <template>
   <div class="flex items-center gap-2">
     <div class="relative flex items-center justify-center">
-      <svg
-        class="shield-ring"
-        :class="ringClass"
-        width="48"
-        height="48"
-        viewBox="0 0 48 48"
-      >
+      <svg class="shield-ring" :class="ringClass" width="48" height="48" viewBox="0 0 48 48">
         <circle
           class="ring-background"
           cx="24"
@@ -32,24 +26,13 @@
           transform="rotate(-90 24 24)"
         />
       </svg>
-      
+
       <Transition name="shield-pulse" mode="out-in">
-        <UIcon
-          :key="status"
-          :name="shieldIcon"
-          class="absolute shield-icon"
-          :class="iconClass"
-        />
+        <UIcon :key="status" :name="shieldIcon" class="absolute shield-icon" :class="iconClass" />
       </Transition>
     </div>
-    
-    <UBadge
-      :label="statusLabel"
-      :color="badgeColor"
-      size="md"
-      variant="subtle"
-      class="status-badge"
-    />
+
+    <UBadge :label="statusLabel" :color="badgeColor" size="md" variant="subtle" class="status-badge" />
   </div>
 </template>
 
@@ -75,16 +58,18 @@ const shieldIcon = computed(() => {
   }
 })
 
+const { t: $t } = useI18n()
+
 const statusLabel = computed(() => {
   switch (props.status) {
     case ComplianceStatus.Critical:
-      return 'Kritisch'
+      return $t('compliance.critical')
     case ComplianceStatus.Warning:
-      return 'Warnung'
+      return $t('compliance.warning')
     case ComplianceStatus.NonCritical:
-      return 'Unkritisch'
+      return $t('compliance.nonCritical')
     default:
-      return 'Unkritisch'
+      return $t('compliance.nonCritical')
   }
 })
 
@@ -144,15 +129,18 @@ const progressOffset = computed(() => {
   return circumference - (progressValue.value / 100) * circumference
 })
 
-watch(() => props.status, () => {
-  const element = document.querySelector('.shield-ring')
-  if (element) {
-    element.classList.add('status-change-pulse')
-    setTimeout(() => {
-      element.classList.remove('status-change-pulse')
-    }, 600)
+watch(
+  () => props.status,
+  () => {
+    const element = document.querySelector('.shield-ring')
+    if (element) {
+      element.classList.add('status-change-pulse')
+      setTimeout(() => {
+        element.classList.remove('status-change-pulse')
+      }, 600)
+    }
   }
-})
+)
 </script>
 
 <style scoped>
@@ -210,4 +198,3 @@ watch(() => props.status, () => {
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
 }
 </style>
-
diff --git a/legalconsenthub/app/components/NotificationsSlideover.vue b/legalconsenthub/app/components/NotificationsSlideover.vue
index a7e501f..f98e0a7 100644
--- a/legalconsenthub/app/components/NotificationsSlideover.vue
+++ b/legalconsenthub/app/components/NotificationsSlideover.vue
@@ -1,9 +1,9 @@
 <template>
-  <USlideover v-model:open="isOpen" title="Benachrichtigungen">
+  <USlideover v-model:open="isOpen" :title="$t('notifications.title')">
     <template #body>
       <div v-if="notifications.length === 0" class="text-center py-8 text-muted">
         <UIcon name="i-heroicons-bell-slash" class="h-8 w-8 mx-auto mb-2" />
-        <p>Keine Benachrichtigungen</p>
+        <p>{{ $t('notifications.empty') }}</p>
       </div>
 
       <NuxtLink
diff --git a/legalconsenthub/app/components/RestoreVersionModal.vue b/legalconsenthub/app/components/RestoreVersionModal.vue
index ac3427f..2daf2ed 100644
--- a/legalconsenthub/app/components/RestoreVersionModal.vue
+++ b/legalconsenthub/app/components/RestoreVersionModal.vue
@@ -1,19 +1,18 @@
 <template>
-  <UModal :open="open" title="Version wiederherstellen" @update:open="$emit('update:open', $event)">
+  <UModal :open="open" :title="$t('versions.restoreTitle')" @update:open="$emit('update:open', $event)">
     <template #body>
       <div class="space-y-2">
         <p>
-          Möchten Sie Version <strong>v{{ versionNumber }}</strong> wirklich wiederherstellen?
+          {{ $t('versions.restoreConfirm', { number: versionNumber }) }}
         </p>
         <p class="text-sm text-gray-600">
-          Dies erstellt eine neue Version mit dem Inhalt der ausgewählten Version. Die aktuelle Version und alle
-          Änderungen bleiben in der Historie erhalten.
+          {{ $t('versions.restoreDescription') }}
         </p>
       </div>
     </template>
     <template #footer>
-      <UButton label="Abbrechen" color="neutral" variant="outline" @click="$emit('update:open', false)" />
-      <UButton label="Wiederherstellen" color="primary" :loading="loading" @click="$emit('confirm')" />
+      <UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:open', false)" />
+      <UButton :label="$t('versions.restore')" color="primary" :loading="loading" @click="$emit('confirm')" />
     </template>
   </UModal>
 </template>
diff --git a/legalconsenthub/app/components/TheComment.vue b/legalconsenthub/app/components/TheComment.vue
index 38730dc..44dbb1f 100644
--- a/legalconsenthub/app/components/TheComment.vue
+++ b/legalconsenthub/app/components/TheComment.vue
@@ -23,9 +23,11 @@
     </UChatMessages>
   </template>
   <UTextarea v-model="commentTextAreaValue" class="w-full" />
-  <UButton v-if="!isEditingComment" class="my-3 lg:my-4" @click="submitComment(formElementId)"> Submit </UButton>
-  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="updateEditComment"> Edit comment </UButton>
-  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="cancelEditComment"> Cancel </UButton>
+  <UButton v-if="!isEditingComment" class="my-3 lg:my-4" @click="submitComment(formElementId)">
+    {{ $t('comments.submit') }}
+  </UButton>
+  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="updateEditComment"> {{ $t('comments.edit') }} </UButton>
+  <UButton v-if="isEditingComment" class="my-3 lg:my-4" @click="cancelEditComment"> {{ $t('common.cancel') }} </UButton>
 </template>
 
 <script setup lang="ts">
@@ -50,11 +52,12 @@ const {
 } = commentActions
 
 function createChatMessageActions(comment: CommentDto) {
+  const { t: $t } = useI18n()
   const chatMessageActions = []
 
   if (isCommentByUser(comment)) {
     chatMessageActions.push({
-      label: 'Edit',
+      label: $t('comments.editAction'),
       icon: 'i-lucide-pencil',
       onClick: () => editComment(comment)
     })
diff --git a/legalconsenthub/app/components/UserMenu.vue b/legalconsenthub/app/components/UserMenu.vue
index 5902f26..b85e67f 100644
--- a/legalconsenthub/app/components/UserMenu.vue
+++ b/legalconsenthub/app/components/UserMenu.vue
@@ -71,6 +71,8 @@ const user = ref({
   }
 })
 
+const { t: $t } = useI18n()
+
 const items = computed<DropdownMenuItem[][]>(() => [
   [
     {
@@ -81,27 +83,27 @@ const items = computed<DropdownMenuItem[][]>(() => [
   ],
   [
     {
-      label: 'Profile',
+      label: $t('user.profile'),
       icon: 'i-lucide-user'
     },
     {
-      label: 'Administration',
+      label: $t('user.administration'),
       icon: 'i-lucide-shield',
       to: '/administration'
     },
     {
-      label: 'Settings',
+      label: $t('user.settings'),
       icon: 'i-lucide-settings',
       to: '/settings'
     }
   ],
   [
     {
-      label: 'Theme',
+      label: $t('user.theme'),
       icon: 'i-lucide-palette',
       children: [
         {
-          label: 'Primary',
+          label: $t('user.themePrimary'),
           slot: 'chip',
           chip: appConfig.ui.colors.primary,
           content: {
@@ -121,7 +123,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
           }))
         },
         {
-          label: 'Neutral',
+          label: $t('user.themeNeutral'),
           slot: 'chip',
           chip: appConfig.ui.colors.neutral,
           content: {
@@ -143,11 +145,11 @@ const items = computed<DropdownMenuItem[][]>(() => [
       ]
     },
     {
-      label: 'Appearance',
+      label: $t('user.appearance'),
       icon: 'i-lucide-sun-moon',
       children: [
         {
-          label: 'Light',
+          label: $t('user.light'),
           icon: 'i-lucide-sun',
           type: 'checkbox',
           checked: colorMode.value === 'light',
@@ -157,7 +159,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
           }
         },
         {
-          label: 'Dark',
+          label: $t('user.dark'),
           icon: 'i-lucide-moon',
           type: 'checkbox',
           checked: colorMode.value === 'dark',
@@ -175,7 +177,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
   ],
   [
     {
-      label: 'Log out',
+      label: $t('user.logout'),
       icon: 'i-lucide-log-out',
       async onSelect(e: Event) {
         e.preventDefault()
diff --git a/legalconsenthub/app/components/VersionComparisonModal.vue b/legalconsenthub/app/components/VersionComparisonModal.vue
index 95557e7..677c3ad 100644
--- a/legalconsenthub/app/components/VersionComparisonModal.vue
+++ b/legalconsenthub/app/components/VersionComparisonModal.vue
@@ -1,7 +1,7 @@
 <template>
-  <UModal :open="open" title="Vergleich mit Version" @update:open="$emit('update:open', $event)">
+  <UModal :open="open" :title="$t('versions.compare')" @update:open="$emit('update:open', $event)">
     <template #header>
-      <h3 class="text-lg font-semibold">Vergleich: Aktuelles Formular mit Version v{{ versionNumber }}</h3>
+      <h3 class="text-lg font-semibold">{{ $t('versions.comparisonTitle', { number: versionNumber }) }}</h3>
     </template>
 
     <template #body>
@@ -9,13 +9,13 @@
         <UIcon name="i-lucide-loader-circle" class="animate-spin h-8 w-8" />
       </div>
 
-      <div v-else-if="error" class="text-red-500">Fehler beim Laden der Version: {{ error }}</div>
+      <div v-else-if="error" class="text-red-500">{{ $t('versions.comparisonError') }}: {{ error }}</div>
 
       <div v-else-if="diff && hasChanges" class="space-y-6">
         <div v-if="diff.elementsAdded.length > 0" class="space-y-2">
           <h4 class="font-semibold text-success flex items-center gap-2">
             <UIcon name="i-lucide-plus-circle" />
-            Hinzugefügte Elemente ({{ diff.elementsAdded.length }})
+            {{ $t('versions.elementsAdded', { count: diff.elementsAdded.length }) }}
           </h4>
           <UCard v-for="(element, index) in diff.elementsAdded" :key="`added-${index}`" variant="subtle">
             <div class="flex items-start gap-2">
@@ -31,14 +31,17 @@
         <div v-if="diff.elementsRemoved.length > 0" class="space-y-2">
           <h4 class="font-semibold text-error flex items-center gap-2">
             <UIcon name="i-lucide-minus-circle" />
-            Entfernte Elemente ({{ diff.elementsRemoved.length }})
+            {{ $t('versions.elementsRemoved', { count: diff.elementsRemoved.length }) }}
           </h4>
           <UCard v-for="(element, index) in diff.elementsRemoved" :key="`removed-${index}`" variant="subtle">
             <div class="flex items-start gap-2">
               <UBadge color="error" variant="subtle">-</UBadge>
               <div class="flex-1">
-                <div class="font-medium">{{ element.title || 'Ohne Titel' }}</div>
-                <div class="text-sm text-gray-500">Typ: {{ element.type }} · Sektion: {{ element.sectionTitle }}</div>
+                <div class="font-medium">{{ element.title || $t('versions.elementWithoutTitle') }}</div>
+                <div class="text-sm text-gray-500">
+                  {{ $t('common.type') }}: {{ element.type }} · {{ $t('versions.elementIn') }}
+                  {{ element.sectionTitle }}
+                </div>
               </div>
             </div>
           </UCard>
@@ -47,14 +50,14 @@
         <div v-if="diff.elementsModified.length > 0" class="space-y-2">
           <h4 class="font-semibold text-warning flex items-center gap-2">
             <UIcon name="i-lucide-pencil" />
-            Geänderte Elemente ({{ diff.elementsModified.length }})
+            {{ $t('versions.elementsModified', { count: diff.elementsModified.length }) }}
           </h4>
           <UCard v-for="(element, index) in diff.elementsModified" :key="`modified-${index}`" variant="subtle">
             <div class="space-y-2">
               <div class="flex items-start gap-2">
                 <UBadge color="warning" variant="subtle">~</UBadge>
                 <div class="flex-1">
-                  <div class="font-medium">Element in {{ element.sectionTitle }}</div>
+                  <div class="font-medium">{{ $t('versions.elementIn') }} {{ element.sectionTitle }}</div>
 
                   <div
                     v-if="
@@ -66,7 +69,7 @@
                   >
                     <div v-if="element.optionsAdded.length > 0">
                       <div class="text-sm font-medium text-success">
-                        Optionen hinzugefügt ({{ element.optionsAdded.length }}):
+                        {{ $t('versions.optionsAdded', { count: element.optionsAdded.length }) }}:
                       </div>
                       <div
                         v-for="(option, optIdx) in element.optionsAdded"
@@ -80,7 +83,7 @@
 
                     <div v-if="element.optionsRemoved.length > 0">
                       <div class="text-sm font-medium text-error">
-                        Optionen entfernt ({{ element.optionsRemoved.length }}):
+                        {{ $t('versions.optionsRemoved', { count: element.optionsRemoved.length }) }}:
                       </div>
                       <div
                         v-for="(option, optIdx) in element.optionsRemoved"
@@ -94,7 +97,7 @@
 
                     <div v-if="element.optionsModified.length > 0">
                       <div class="text-sm font-medium text-warning">
-                        Optionen geändert ({{ element.optionsModified.length }}):
+                        {{ $t('versions.optionsModified', { count: element.optionsModified.length }) }}:
                       </div>
                       <div
                         v-for="(option, optIdx) in element.optionsModified"
@@ -117,12 +120,12 @@
         </div>
       </div>
 
-      <div v-else class="text-center py-8 text-gray-500">Keine Unterschiede gefunden</div>
+      <div v-else class="text-center py-8 text-gray-500">{{ $t('versions.noChanges') }}</div>
     </template>
 
     <template #footer>
       <div class="flex justify-end">
-        <UButton label="Schließen" color="neutral" variant="outline" @click="$emit('update:open', false)" />
+        <UButton :label="$t('common.close')" color="neutral" variant="outline" @click="$emit('update:open', false)" />
       </div>
     </template>
   </UModal>
@@ -145,6 +148,7 @@ defineEmits<{
 }>()
 
 const { getVersion } = useApplicationFormVersion()
+const { t: $t } = useI18n()
 
 const loading = ref(false)
 const error = ref<string | null>(null)
@@ -176,7 +180,7 @@ async function loadVersionAndCompare() {
     versionData.value = await getVersion(props.applicationFormId, props.versionNumber)
     diff.value = compareApplicationForms(props.currentForm, versionData.value.snapshot)
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Unbekannter Fehler'
+    error.value = e instanceof Error ? e.message : $t('versions.unknownError')
   } finally {
     loading.value = false
   }
diff --git a/legalconsenthub/app/components/VersionHistory.vue b/legalconsenthub/app/components/VersionHistory.vue
index 2465888..165c1d6 100644
--- a/legalconsenthub/app/components/VersionHistory.vue
+++ b/legalconsenthub/app/components/VersionHistory.vue
@@ -4,9 +4,9 @@
       <UIcon name="i-lucide-loader-circle" class="animate-spin h-8 w-8" />
     </div>
 
-    <div v-else-if="error" class="text-red-500">Fehler beim Laden der Versionen: {{ error }}</div>
+    <div v-else-if="error" class="text-red-500">{{ $t('versions.loadError') }}: {{ error }}</div>
 
-    <div v-else-if="versions.length === 0" class="text-center py-8 text-gray-500">Keine Versionen verfügbar</div>
+    <div v-else-if="versions.length === 0" class="text-center py-8 text-gray-500">{{ $t('versions.empty') }}</div>
 
     <div v-else class="space-y-3">
       <UCard v-for="version in versions" :key="version.id" class="hover:shadow-md transition-shadow">
@@ -29,7 +29,7 @@
               size="sm"
               color="neutral"
               variant="outline"
-              label="Vergleichen"
+              :label="$t('versions.compare')"
               @click="openComparisonModal(version)"
             />
             <UButton
@@ -37,7 +37,7 @@
               size="sm"
               color="neutral"
               variant="outline"
-              label="Wiederherstellen"
+              :label="$t('versions.restore')"
               @click="openRestoreModal(version)"
             />
           </div>
@@ -76,6 +76,7 @@ const emit = defineEmits<{
 
 const { getVersions, restoreVersion } = useApplicationFormVersion()
 const toast = useToast()
+const { t: $t } = useI18n()
 
 const versions = ref<ApplicationFormVersionListItemDto[]>([])
 const loading = ref(false)
@@ -91,10 +92,10 @@ async function loadVersions() {
   try {
     versions.value = await getVersions(props.applicationFormId)
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Unbekannter Fehler'
+    error.value = e instanceof Error ? e.message : $t('versions.unknownError')
     toast.add({
-      title: 'Fehler',
-      description: 'Versionen konnten nicht geladen werden',
+      title: $t('common.error'),
+      description: $t('versions.loadErrorDescription'),
       color: 'error'
     })
   } finally {
@@ -119,8 +120,8 @@ async function handleRestore() {
   try {
     await restoreVersion(props.applicationFormId, selectedVersion.value.versionNumber)
     toast.add({
-      title: 'Erfolg',
-      description: `Version v${selectedVersion.value.versionNumber} wurde wiederhergestellt`,
+      title: $t('common.success'),
+      description: $t('versions.restored', { number: selectedVersion.value.versionNumber }),
       color: 'success'
     })
     isRestoreModalOpen.value = false
@@ -128,8 +129,8 @@ async function handleRestore() {
     emit('restored')
   } catch {
     toast.add({
-      title: 'Fehler',
-      description: 'Version konnte nicht wiederhergestellt werden',
+      title: $t('common.error'),
+      description: $t('versions.restoreError'),
       color: 'error'
     })
   } finally {
@@ -154,18 +155,20 @@ function getStatusColor(status: ApplicationFormStatus) {
   }
 }
 
+const { t: $t } = useI18n()
+
 function getStatusLabel(status: ApplicationFormStatus): string {
   switch (status) {
     case 'DRAFT':
-      return 'Entwurf'
+      return $t('applicationForms.status.draft')
     case 'SUBMITTED':
-      return 'Eingereicht'
+      return $t('applicationForms.status.submitted')
     case 'APPROVED':
-      return 'Genehmigt'
+      return $t('applicationForms.status.approved')
     case 'REJECTED':
-      return 'Abgelehnt'
+      return $t('applicationForms.status.rejected')
     case 'SIGNED':
-      return 'Signiert'
+      return $t('applicationForms.status.signed')
     default:
       return status
   }
diff --git a/legalconsenthub/app/components/formelements/TheSelect.vue b/legalconsenthub/app/components/formelements/TheSelect.vue
index edb6f24..0f32b9b 100644
--- a/legalconsenthub/app/components/formelements/TheSelect.vue
+++ b/legalconsenthub/app/components/formelements/TheSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <USelect v-model="modelValue" placeholder="Select status" :items="items" />
+  <USelect v-model="modelValue" :placeholder="$t('applicationForms.formElements.selectPlaceholder')" :items="items" />
 </template>
 
 <script setup lang="ts">
diff --git a/legalconsenthub/app/components/formelements/TheTitleBodyInput.vue b/legalconsenthub/app/components/formelements/TheTitleBodyInput.vue
index 0f8cdfc..5f3e375 100644
--- a/legalconsenthub/app/components/formelements/TheTitleBodyInput.vue
+++ b/legalconsenthub/app/components/formelements/TheTitleBodyInput.vue
@@ -1,8 +1,8 @@
 <template>
-  <UFormField label="Titel">
+  <UFormField :label="$t('applicationForms.formElements.title')">
     <UInput v-model="title" class="w-full" :disabled="props.disabled" />
   </UFormField>
-  <UFormField label="Text">
+  <UFormField :label="$t('applicationForms.formElements.text')">
     <UTextarea v-model="body" class="w-full" autoresize :disabled="props.disabled" />
   </UFormField>
 </template>
diff --git a/legalconsenthub/app/components/formelements/Unimplemented.vue b/legalconsenthub/app/components/formelements/Unimplemented.vue
index 24629db..0dce1b3 100644
--- a/legalconsenthub/app/components/formelements/Unimplemented.vue
+++ b/legalconsenthub/app/components/formelements/Unimplemented.vue
@@ -1,3 +1,3 @@
 <template>
-  <div>Element unimplemented:</div>
+  <div>{{ $t('applicationForms.formElements.unimplemented') }}</div>
 </template>
diff --git a/legalconsenthub/app/composables/useFormElementManagement.ts b/legalconsenthub/app/composables/useFormElementManagement.ts
index 7a943a3..157ce0e 100644
--- a/legalconsenthub/app/composables/useFormElementManagement.ts
+++ b/legalconsenthub/app/composables/useFormElementManagement.ts
@@ -25,7 +25,12 @@ export function useFormElementManagement() {
 
     if (applicationFormId) {
       try {
-        return await applicationForm.addFormElementToSubSection(applicationFormId, subsectionId, inputFormElement, position + 1)
+        return await applicationForm.addFormElementToSubSection(
+          applicationFormId,
+          subsectionId,
+          inputFormElement,
+          position + 1
+        )
       } catch (error) {
         console.error('Failed to add form element:', error)
         throw error
diff --git a/legalconsenthub/app/composables/usePermissions.ts b/legalconsenthub/app/composables/usePermissions.ts
index f1185cf..82d8d7f 100644
--- a/legalconsenthub/app/composables/usePermissions.ts
+++ b/legalconsenthub/app/composables/usePermissions.ts
@@ -149,4 +149,3 @@ export const usePermissions = () => {
     canDeleteComment
   }
 }
-
diff --git a/legalconsenthub/app/error.vue b/legalconsenthub/app/error.vue
index 658be8c..4f8783f 100644
--- a/legalconsenthub/app/error.vue
+++ b/legalconsenthub/app/error.vue
@@ -11,9 +11,11 @@ defineProps<{
   error: NuxtError
 }>()
 
+const { t: $t } = useI18n()
+
 useSeoMeta({
-  title: 'Page not found',
-  description: 'We are sorry but this page could not be found.'
+  title: $t('error.pageNotFound'),
+  description: $t('error.pageNotFoundDescription')
 })
 
 useHead({
diff --git a/legalconsenthub/app/layouts/default.vue b/legalconsenthub/app/layouts/default.vue
index 3f2b3f6..5ab87c2 100644
--- a/legalconsenthub/app/layouts/default.vue
+++ b/legalconsenthub/app/layouts/default.vue
@@ -36,10 +36,12 @@
 </template>
 
 <script setup lang="ts">
+const { t: $t } = useI18n()
+
 const links = [
   [
     {
-      label: 'General',
+      label: $t('common.general'),
       icon: 'i-lucide-user',
       to: '/settings',
       exact: true
@@ -47,7 +49,7 @@ const links = [
   ],
   [
     {
-      label: 'General2',
+      label: $t('common.general'),
       icon: 'i-lucide-user',
       to: '/settings',
       exact: true
diff --git a/legalconsenthub/app/middleware/permissions.global.ts b/legalconsenthub/app/middleware/permissions.global.ts
index a748ba9..7ec2816 100644
--- a/legalconsenthub/app/middleware/permissions.global.ts
+++ b/legalconsenthub/app/middleware/permissions.global.ts
@@ -5,4 +5,3 @@ export default defineNuxtRouteMiddleware((to) => {
     return navigateTo('/', { replace: true })
   }
 })
-
diff --git a/legalconsenthub/app/pages/administration.vue b/legalconsenthub/app/pages/administration.vue
index 5ce66f3..b704613 100644
--- a/legalconsenthub/app/pages/administration.vue
+++ b/legalconsenthub/app/pages/administration.vue
@@ -1,7 +1,7 @@
 <template>
   <UDashboardPanel id="administration">
     <template #header>
-      <UDashboardNavbar title="Administration - JSON Template Editor" :ui="{ right: 'gap-3' }">
+      <UDashboardNavbar :title="$t('templates.editorTitle')" :ui="{ right: 'gap-3' }">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
@@ -10,21 +10,21 @@
           <UButton
             v-if="hasUnsavedChanges"
             icon="i-lucide-rotate-ccw"
-            label="Zurücksetzen"
+            :label="$t('templates.reset')"
             color="neutral"
             variant="outline"
             @click="resetEditor"
           />
           <UButton
             icon="i-lucide-file-plus"
-            label="Neue Vorlage"
+            :label="$t('templates.newTemplate')"
             color="neutral"
             variant="outline"
             @click="createNewTemplate"
           />
           <UButton
             icon="i-lucide-save"
-            label="Speichern"
+            :label="$t('common.save')"
             :disabled="!hasUnsavedChanges || !isValidJson"
             :loading="isSaving"
             @click="saveTemplate"
@@ -40,17 +40,17 @@
             <div>
               <h3 class="font-semibold text-lg">{{ currentTemplate.name }}</h3>
               <p class="text-sm text-muted mt-1">
-                Zuletzt bearbeitet am {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
+                {{ $t('templates.lastModified') }} {{ formatDate(new Date(currentTemplate.modifiedAt)) }}
               </p>
             </div>
-            <UBadge v-if="hasUnsavedChanges" label="Ungespeicherte Änderungen" color="warning" variant="subtle" />
+            <UBadge v-if="hasUnsavedChanges" :label="$t('templates.unsavedChanges')" color="warning" variant="subtle" />
           </div>
         </UCard>
 
         <UCard v-else class="mb-4">
           <div class="text-center py-4">
             <UIcon name="i-lucide-info" class="size-8 text-muted mx-auto mb-2" />
-            <p class="text-muted">Keine Vorlage gefunden. Erstellen Sie eine neue Vorlage.</p>
+            <p class="text-muted">{{ $t('templates.noTemplateFound') }}</p>
           </div>
         </UCard>
 
@@ -70,8 +70,8 @@
           v-if="!isValidJson"
           color="error"
           icon="i-lucide-alert-circle"
-          title="Ungültiges JSON"
-          description="Das JSON-Format ist ungültig. Bitte korrigieren Sie die Syntax."
+          :title="$t('templates.invalidJson')"
+          :description="$t('templates.invalidJsonDescription')"
         />
       </div>
     </template>
@@ -92,6 +92,7 @@ const colorMode = useColorMode()
 const { hasRole } = usePermissions()
 const { getAllApplicationFormTemplates, updateApplicationFormTemplate, createApplicationFormTemplate } =
   await useApplicationFormTemplate()
+const { t: $t } = useI18n()
 
 if (!hasRole('CHIEF_EXECUTIVE_OFFICER') && !hasRole('IT_DEPARTMENT')) {
   await navigateTo('/')
@@ -194,8 +195,8 @@ function createNewTemplate() {
 async function saveTemplate() {
   if (!isValidJson.value) {
     toast.add({
-      title: 'Fehler',
-      description: 'Das JSON-Format ist ungültig.',
+      title: $t('common.error'),
+      description: $t('templates.invalidJsonDescription'),
       color: 'error'
     })
     return
@@ -210,15 +211,15 @@ async function saveTemplate() {
     if (currentTemplate.value?.id) {
       currentTemplate.value = await updateApplicationFormTemplate(currentTemplate.value.id, dataWithDates)
       toast.add({
-        title: 'Erfolg',
-        description: 'Vorlage erfolgreich aktualisiert.',
+        title: $t('common.success'),
+        description: $t('templates.updated'),
         color: 'success'
       })
     } else {
       currentTemplate.value = await createApplicationFormTemplate(dataWithDates)
       toast.add({
-        title: 'Erfolg',
-        description: 'Vorlage erfolgreich erstellt.',
+        title: $t('common.success'),
+        description: $t('templates.created'),
         color: 'success'
       })
     }
@@ -230,8 +231,8 @@ async function saveTemplate() {
     await refreshNuxtData('applicationFormTemplates')
   } catch (error) {
     toast.add({
-      title: 'Fehler',
-      description: 'Fehler beim Speichern der Vorlage.',
+      title: $t('common.error'),
+      description: $t('templates.saveError'),
       color: 'error'
     })
     console.error('Error saving template:', error)
@@ -242,7 +243,7 @@ async function saveTemplate() {
 
 onBeforeRouteLeave((to, from, next) => {
   if (hasUnsavedChanges.value) {
-    const answer = window.confirm('Sie haben ungespeicherte Änderungen. Möchten Sie die Seite wirklich verlassen?')
+    const answer = window.confirm($t('templates.unsavedWarning'))
     if (answer) {
       next()
     } else {
diff --git a/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue b/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
index 8be0859..7763edd 100644
--- a/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
+++ b/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
@@ -1,7 +1,7 @@
 <template>
   <UDashboardPanel id="home">
     <template #header>
-      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+      <UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
@@ -9,7 +9,7 @@
         <template #right>
           <UButton
             icon="i-lucide-circle-plus"
-            label="Neuer Mitbestimmungsantrag"
+            :label="$t('applicationForms.createNew')"
             to="/create"
             :disabled="!canWriteApplicationForms"
             size="xl"
@@ -59,6 +59,7 @@ import { useUserStore } from '~~/stores/useUserStore'
 
 const route = useRoute()
 const toast = useToast()
+const { t: $t } = useI18n()
 
 definePageMeta({
   // Prevent whole page from re-rendering when navigating between sections to keep state
@@ -113,7 +114,7 @@ async function onSave() {
     const updated = await updateForm(applicationForm.value.id, applicationForm.value)
     if (updated) {
       updateApplicationForm(updated)
-      toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
+      toast.add({ title: $t('common.success'), description: $t('applicationForms.saved'), color: 'success' })
     }
   }
 }
@@ -122,7 +123,7 @@ async function onSubmit() {
   if (applicationForm.value) {
     await submitApplicationForm(applicationForm.value.id)
     await navigateTo('/')
-    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
+    toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
   }
 }
 
diff --git a/legalconsenthub/app/pages/application-forms/[id]/versions.vue b/legalconsenthub/app/pages/application-forms/[id]/versions.vue
index 795951c..03d7931 100644
--- a/legalconsenthub/app/pages/application-forms/[id]/versions.vue
+++ b/legalconsenthub/app/pages/application-forms/[id]/versions.vue
@@ -2,7 +2,7 @@
 <template>
   <UDashboardPanel id="versions">
     <template #header>
-      <UDashboardNavbar :title="`Versionen: ${applicationForm?.name}`">
+      <UDashboardNavbar :title="$t('versions.pageTitle', { name: applicationForm?.name })">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
@@ -15,7 +15,12 @@
 
     <template #body>
       <div class="p-6">
-        <VersionHistory v-if="applicationForm" :application-form-id="applicationForm.id" :current-form="applicationForm" @restored="handleRestored" />
+        <VersionHistory
+          v-if="applicationForm"
+          :application-form-id="applicationForm.id"
+          :current-form="applicationForm"
+          @restored="handleRestored"
+        />
       </div>
     </template>
   </UDashboardPanel>
@@ -25,6 +30,7 @@
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
+const { t: $t } = useI18n()
 
 definePageMeta({
   key: (route) => `${route.params.id}-versions`
@@ -36,8 +42,8 @@ const { applicationForm, navigationLinks: links, refresh } = await useApplicatio
 async function handleRestored() {
   await refresh()
   toast.add({
-    title: 'Version wiederhergestellt',
-    description: 'Das Formular wurde auf die ausgewählte Version zurückgesetzt.',
+    title: $t('versions.restored'),
+    description: $t('versions.restoredDescription'),
     color: 'success'
   })
   router.push(`/application-forms/${applicationForm.value.id}/0`)
diff --git a/legalconsenthub/app/pages/create.vue b/legalconsenthub/app/pages/create.vue
index 029a036..4234dbb 100644
--- a/legalconsenthub/app/pages/create.vue
+++ b/legalconsenthub/app/pages/create.vue
@@ -1,7 +1,7 @@
 <template>
   <UDashboardPanel id="home">
     <template #header>
-      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+      <UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
@@ -18,9 +18,9 @@
       <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-4xl mx-auto">
         <div v-if="!canWriteApplicationForms" class="text-center py-12">
           <UIcon name="i-lucide-shield-x" class="w-16 h-16 mx-auto text-red-400 mb-4" />
-          <h2 class="text-2xl font-semibold text-gray-700 mb-2">Keine Berechtigung</h2>
-          <p class="text-gray-500 mb-4">Sie haben keine Berechtigung zum Erstellen von Anträgen.</p>
-          <UButton to="/" class="mt-4"> Zurück zur Übersicht </UButton>
+          <h2 class="text-2xl font-semibold text-gray-700 mb-2">{{ $t('applicationForms.noPermission') }}</h2>
+          <p class="text-gray-500 mb-4">{{ $t('applicationForms.noPermissionDescription') }}</p>
+          <UButton to="/" class="mt-4"> {{ $t('applicationForms.backToOverview') }} </UButton>
         </div>
         <div v-else-if="applicationFormTemplate">
           <FormStepperWithNavigation
@@ -29,7 +29,7 @@
             @submit="onSubmit"
             @add-input-form="handleAddInputForm"
           >
-            <UFormField label="Name" class="mb-4">
+            <UFormField :label="$t('common.name')" class="mb-4">
               <UInput v-model="applicationFormTemplate.name" class="w-full" />
             </UFormField>
           </FormStepperWithNavigation>
@@ -57,6 +57,7 @@ const { canWriteApplicationForms } = usePermissions()
 const userStore = useUserStore()
 const { selectedOrganization } = storeToRefs(userStore)
 const toast = useToast()
+const { t: $t } = useI18n()
 
 const { data, error } = await useAsyncData<PagedApplicationFormDto>(
   'create-application-form',
@@ -98,7 +99,7 @@ watch(
 async function onSave() {
   const applicationForm = await prepareAndCreateApplicationForm()
   if (applicationForm) {
-    toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
+    toast.add({ title: $t('common.success'), description: $t('applicationForms.saved'), color: 'success' })
   }
 }
 
@@ -107,7 +108,7 @@ async function onSubmit() {
   if (applicationForm) {
     await submitApplicationForm(applicationForm.id)
     await navigateTo('/')
-    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
+    toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
   }
 }
 
diff --git a/legalconsenthub/app/pages/index.vue b/legalconsenthub/app/pages/index.vue
index 20490ab..0e90ccc 100644
--- a/legalconsenthub/app/pages/index.vue
+++ b/legalconsenthub/app/pages/index.vue
@@ -1,13 +1,13 @@
 <template>
   <UDashboardPanel id="home">
     <template #header>
-      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+      <UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
 
         <template #right>
-          Aktuelle Organisation
+          {{ $t('organization.current') }}
           <USelect
             v-model="selectedOrganizationId"
             :items="organizations"
@@ -20,7 +20,7 @@
             class="w-48"
           />
 
-          <UTooltip text="Notifications" :shortcuts="['N']">
+          <UTooltip :text="$t('notifications.tooltip')" :shortcuts="['N']">
             <UButton color="neutral" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
               <UChip :show="unreadCount > 0" color="error" inset>
                 <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
@@ -31,7 +31,7 @@
 
           <UButton
             icon="i-lucide-circle-plus"
-            label="Neuer Mitbestimmungsantrag"
+            :label="$t('applicationForms.createNew')"
             to="/create"
             :disabled="!canWriteApplicationForms"
             size="xl"
@@ -86,18 +86,18 @@
             <div class="flex items-center gap-2 text-sm">
               <UIcon name="i-lucide-pencil" class="size-4 text-muted shrink-0" />
               <span class="text-muted">
-                Zuletzt bearbeitet von
+                {{ $t('applicationForms.lastEditedBy') }}
                 <span class="font-medium text-highlighted">{{ applicationFormElem.lastModifiedBy.name }}</span>
-                am {{ formatDate(applicationFormElem.modifiedAt) }}
+                {{ $t('common.on') }} {{ formatDate(applicationFormElem.modifiedAt) }}
               </span>
             </div>
 
             <div class="flex items-center gap-2 text-sm">
               <UIcon name="i-lucide-user-plus" class="size-4 text-muted shrink-0" />
               <span class="text-muted">
-                Erstellt von
+                {{ $t('applicationForms.createdBy') }}
                 <span class="font-medium text-highlighted">{{ applicationFormElem.createdBy.name }}</span>
-                am {{ formatDate(applicationFormElem.createdAt) }}
+                {{ $t('common.on') }} {{ formatDate(applicationFormElem.createdAt) }}
               </span>
             </div>
           </div>
@@ -122,6 +122,7 @@ const { getAllApplicationForms, deleteApplicationFormById } = useApplicationForm
 const route = useRoute()
 const userStore = useUserStore()
 const { organizations, selectedOrganization } = storeToRefs(userStore)
+const { t: $t } = useI18n()
 
 // Inject notification state from layout
 const { isNotificationsSlideoverOpen, unreadCount } = inject('notificationState', {
@@ -178,7 +179,7 @@ const applicationForms = computed({
 function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
   return [
     {
-      label: 'Löschen',
+      label: $t('common.delete'),
       icon: 'i-lucide-trash',
       to: `?delete&id=${applicationForm.id}`,
       disabled: !canWriteApplicationForms.value
diff --git a/legalconsenthub/app/pages/login.vue b/legalconsenthub/app/pages/login.vue
index ed13368..066e589 100644
--- a/legalconsenthub/app/pages/login.vue
+++ b/legalconsenthub/app/pages/login.vue
@@ -1,40 +1,37 @@
 <template>
-    <UCard variant="subtle">
-      <template #header>
-        <div class="text-center">
-          <UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
-          <h1 class="text-3xl font-bold text-gray-900 mb-2">
-            Welcome
-          </h1>
-          <p class="text-gray-600">
-            You will be redirected to Keycloak to authenticate
-          </p>
-        </div>
-      </template>
-
+  <UCard variant="subtle">
+    <template #header>
       <div class="text-center">
-        <UButton
-          color="primary"
-          size="xl"
-          icon="i-lucide-log-in"
-          @click="handleSignIn"
-        >
-          Sign in with Keycloak
-        </UButton>
+        <UIcon name="i-lucide-lock" class="mx-auto h-16 w-16 text-primary-500 mb-6" />
+        <h1 class="text-3xl font-bold text-gray-900 mb-2">
+          {{ $t('auth.welcome') }}
+        </h1>
+        <p class="text-gray-600">
+          {{ $t('auth.redirectMessage') }}
+        </p>
       </div>
+    </template>
 
-      <template #footer>
-        <div class="text-center text-xs text-gray-500">
-          By signing in, you agree to our terms of service
-        </div>
-      </template>
-    </UCard>
+    <div class="text-center">
+      <UButton color="primary" size="xl" icon="i-lucide-log-in" @click="handleSignIn">
+        {{ $t('auth.signIn') }}
+      </UButton>
+    </div>
+
+    <template #footer>
+      <div class="text-center text-xs text-gray-500">
+        {{ $t('auth.termsAgreement') }}
+      </div>
+    </template>
+  </UCard>
 </template>
 
 <script setup lang="ts">
 definePageMeta({ auth: false, layout: 'auth' })
 
-useSeoMeta({ title: 'Login' })
+const { t: $t } = useI18n()
+
+useSeoMeta({ title: $t('auth.login') })
 
 function handleSignIn() {
   navigateTo('/auth/keycloak', { external: true })
diff --git a/legalconsenthub/app/utils/formDiff.ts b/legalconsenthub/app/utils/formDiff.ts
index 8a7a480..6ae3de8 100644
--- a/legalconsenthub/app/utils/formDiff.ts
+++ b/legalconsenthub/app/utils/formDiff.ts
@@ -74,7 +74,7 @@ function flattenFormElements(form: ApplicationFormDto): Array<{ element: FormEle
   for (const section of form.formElementSections) {
     for (const subsection of section.formElementSubSections) {
       for (const element of subsection.formElements) {
-      elements.push({ element, sectionTitle: section.title })
+        elements.push({ element, sectionTitle: section.title })
       }
     }
   }
@@ -88,7 +88,7 @@ function flattenSnapshotElements(
   for (const section of snapshot.sections) {
     for (const subsection of section.subsections) {
       for (const element of subsection.elements) {
-      elements.push({ element, sectionTitle: section.title })
+        elements.push({ element, sectionTitle: section.title })
       }
     }
   }
@@ -110,7 +110,7 @@ function compareElements(
   position: number
 ): ElementModification | null {
   const optionsDiff = compareOptions(current.options, version.options)
-  
+
   if (optionsDiff.added.length > 0 || optionsDiff.removed.length > 0 || optionsDiff.modified.length > 0) {
     return {
       sectionTitle,
diff --git a/legalconsenthub/i18n/locales/de.json b/legalconsenthub/i18n/locales/de.json
index 83e5777..e575e66 100644
--- a/legalconsenthub/i18n/locales/de.json
+++ b/legalconsenthub/i18n/locales/de.json
@@ -1,10 +1,148 @@
 {
-  "roles": {
-    "admin": "Administrator",
-    "employee": "Arbeitnehmer",
-    "employer": "Arbeitgeber",
-    "worksCouncilMember": "Betriebsratsmitglied",
-    "worksCouncilChair": "Betriebsratsvorsitzender"
+  "applicationForms": {
+    "title": "Mitbestimmungsanträge",
+    "createNew": "Neuer Mitbestimmungsantrag",
+    "noFormsAvailable": "Keine Anträge vorhanden",
+    "noPermission": "Keine Berechtigung",
+    "noPermissionDescription": "Sie haben keine Berechtigung zum Erstellen von Anträgen.",
+    "backToOverview": "Zurück zur Übersicht",
+    "deleteConfirm": "Möchten Sie wirklich den Mitbestimmungsantrag <strong>{name}</strong> löschen?",
+    "deleteTitle": "Mitbestimmungsantrag löschen",
+    "lastEditedBy": "Zuletzt bearbeitet von",
+    "createdBy": "Erstellt von",
+    "saved": "Antrag erfolgreich gespeichert",
+    "submitted": "Antrag erfolgreich eingereicht",
+    "deleted": "Antrag erfolgreich gelöscht",
+    "formElements": {
+      "comments": "Kommentare",
+      "addInputBelow": "Eingabefeld hinzufügen",
+      "selectPlaceholder": "Status auswählen",
+      "title": "Titel",
+      "text": "Text",
+      "unimplemented": "Element nicht implementiert:"
+    },
+    "status": {
+      "draft": "Entwurf",
+      "submitted": "Eingereicht",
+      "approved": "Genehmigt",
+      "rejected": "Abgelehnt",
+      "signed": "Signiert"
+    },
+    "navigation": {
+      "previous": "Zurück",
+      "next": "Weiter",
+      "save": "Speichern",
+      "submit": "Einreichen"
+    }
+  },
+  "templates": {
+    "title": "Vorlagen",
+    "editorTitle": "Administration - JSON Template Editor",
+    "newTemplate": "Neue Vorlage",
+    "reset": "Zurücksetzen",
+    "unsavedChanges": "Ungespeicherte Änderungen",
+    "noTemplateFound": "Keine Vorlage gefunden. Erstellen Sie eine neue Vorlage.",
+    "invalidJson": "Ungültiges JSON",
+    "invalidJsonDescription": "Das JSON-Format ist ungültig. Bitte korrigieren Sie die Syntax.",
+    "lastModified": "Zuletzt bearbeitet am",
+    "created": "Vorlage erfolgreich erstellt",
+    "updated": "Vorlage erfolgreich aktualisiert",
+    "saveError": "Fehler beim Speichern der Vorlage",
+    "unsavedWarning": "Sie haben ungespeicherte Änderungen. Möchten Sie die Seite wirklich verlassen?"
+  },
+  "versions": {
+    "title": "Versionen",
+    "pageTitle": "Versionen: {name}",
+    "empty": "Keine Versionen verfügbar",
+    "loading": "Versionen werden geladen...",
+    "loadError": "Fehler beim Laden der Versionen",
+    "loadErrorDescription": "Versionen konnten nicht geladen werden",
+    "unknownError": "Unbekannter Fehler",
+    "compare": "Vergleichen",
+    "restore": "Wiederherstellen",
+    "restored": "Erfolg",
+    "restoredDescription": "Das Formular wurde auf die ausgewählte Version zurückgesetzt.",
+    "restoreError": "Version konnte nicht wiederhergestellt werden",
+    "restoreTitle": "Version wiederherstellen",
+    "restoreConfirm": "Möchten Sie Version v{number} wirklich wiederherstellen?",
+    "restoreDescription": "Dies erstellt eine neue Version mit dem Inhalt der ausgewählten Version. Die aktuelle Version und alle Änderungen bleiben in der Historie erhalten.",
+    "comparisonTitle": "Vergleich: Aktuelles Formular mit Version v{number}",
+    "comparisonError": "Fehler beim Laden der Version",
+    "elementsAdded": "Hinzugefügte Elemente ({count})",
+    "elementsRemoved": "Entfernte Elemente ({count})",
+    "elementsModified": "Geänderte Elemente ({count})",
+    "elementWithoutTitle": "Ohne Titel",
+    "elementIn": "Element in",
+    "optionsAdded": "Optionen hinzugefügt ({count})",
+    "optionsRemoved": "Optionen entfernt ({count})",
+    "optionsModified": "Optionen geändert ({count})",
+    "noChanges": "Keine Unterschiede gefunden"
+  },
+  "comments": {
+    "title": "Kommentare",
+    "empty": "Keine Kommentare vorhanden",
+    "submit": "Absenden",
+    "edit": "Kommentar bearbeiten",
+    "editAction": "Bearbeiten"
+  },
+  "compliance": {
+    "title": "Compliance-Status",
+    "critical": "Kritisch",
+    "warning": "Warnung",
+    "nonCritical": "Unkritisch"
+  },
+  "notifications": {
+    "title": "Benachrichtigungen",
+    "empty": "Keine Benachrichtigungen",
+    "unreadCount": "{count} ungelesen",
+    "tooltip": "Benachrichtigungen"
+  },
+  "administration": {
+    "title": "Administration",
+    "accessDenied": "Zugriff verweigert"
+  },
+  "user": {
+    "profile": "Profil",
+    "administration": "Administration",
+    "settings": "Einstellungen",
+    "logout": "Abmelden",
+    "theme": "Design",
+    "themePrimary": "Primärfarbe",
+    "themeNeutral": "Neutralfarbe",
+    "appearance": "Erscheinungsbild",
+    "light": "Hell",
+    "dark": "Dunkel"
+  },
+  "organization": {
+    "current": "Aktuelle Organisation"
+  },
+  "auth": {
+    "welcome": "Willkommen",
+    "redirectMessage": "Sie werden zur Authentifizierung zu Keycloak weitergeleitet",
+    "signIn": "Mit Keycloak anmelden",
+    "termsAgreement": "Mit der Anmeldung stimmen Sie unseren Nutzungsbedingungen zu",
+    "login": "Anmelden"
+  },
+  "error": {
+    "pageNotFound": "Seite nicht gefunden",
+    "pageNotFoundDescription": "Es tut uns leid, aber diese Seite konnte nicht gefunden werden."
+  },
+  "common": {
+    "save": "Speichern",
+    "cancel": "Abbrechen",
+    "delete": "Löschen",
+    "edit": "Bearbeiten",
+    "close": "Schließen",
+    "confirm": "Bestätigen",
+    "back": "Zurück",
+    "loading": "Laden...",
+    "error": "Fehler",
+    "success": "Erfolg",
+    "name": "Name",
+    "home": "Home",
+    "type": "Typ",
+    "general": "Allgemein",
+    "on": "am"
   },
   "serverConnection": {
     "title": "Verbindung zum Server unterbrochen",
@@ -13,5 +151,12 @@
     "lastCheck": "Letzte Überprüfung",
     "retryInfo": "Automatischer Wiederholungsversuch alle 60 Sekunden",
     "retryNow": "Jetzt erneut versuchen"
+  },
+  "roles": {
+    "admin": "Administrator",
+    "employee": "Arbeitnehmer",
+    "employer": "Arbeitgeber",
+    "worksCouncilMember": "Betriebsratsmitglied",
+    "worksCouncilChair": "Betriebsratsvorsitzender"
   }
 }
diff --git a/legalconsenthub/i18n/locales/en.json b/legalconsenthub/i18n/locales/en.json
index 66e18e7..80389c6 100644
--- a/legalconsenthub/i18n/locales/en.json
+++ b/legalconsenthub/i18n/locales/en.json
@@ -1,10 +1,148 @@
 {
-  "roles": {
-    "admin": "Administrator",
-    "employee": "Employee",
-    "employer": "Employer",
-    "worksCouncilMember": "Works Council Member",
-    "worksCouncilChair": "Works Council Chair"
+  "applicationForms": {
+    "title": "Co-determination Applications",
+    "createNew": "New Co-determination Application",
+    "noFormsAvailable": "No applications available",
+    "noPermission": "No Permission",
+    "noPermissionDescription": "You do not have permission to create applications.",
+    "backToOverview": "Back to Overview",
+    "deleteConfirm": "Do you really want to delete the co-determination application <strong>{name}</strong>?",
+    "deleteTitle": "Delete Co-determination Application",
+    "lastEditedBy": "Last edited by",
+    "createdBy": "Created by",
+    "saved": "Application form saved",
+    "submitted": "Application form submitted",
+    "deleted": "Application form deleted",
+    "formElements": {
+      "comments": "Comments",
+      "addInputBelow": "Add input field below",
+      "selectPlaceholder": "Select status",
+      "title": "Title",
+      "text": "Text",
+      "unimplemented": "Element unimplemented:"
+    },
+    "status": {
+      "draft": "Draft",
+      "submitted": "Submitted",
+      "approved": "Approved",
+      "rejected": "Rejected",
+      "signed": "Signed"
+    },
+    "navigation": {
+      "previous": "Previous",
+      "next": "Next",
+      "save": "Save",
+      "submit": "Submit"
+    }
+  },
+  "templates": {
+    "title": "Templates",
+    "editorTitle": "Administration - JSON Template Editor",
+    "newTemplate": "New Template",
+    "reset": "Reset",
+    "unsavedChanges": "Unsaved Changes",
+    "noTemplateFound": "No template found. Create a new template.",
+    "invalidJson": "Invalid JSON",
+    "invalidJsonDescription": "The JSON format is invalid. Please correct the syntax.",
+    "lastModified": "Last edited on",
+    "created": "Template successfully created",
+    "updated": "Template successfully updated",
+    "saveError": "Error saving template",
+    "unsavedWarning": "You have unsaved changes. Do you really want to leave this page?"
+  },
+  "versions": {
+    "title": "Versions",
+    "pageTitle": "Versions: {name}",
+    "empty": "No versions available",
+    "loading": "Loading versions...",
+    "loadError": "Error loading versions",
+    "loadErrorDescription": "Versions could not be loaded",
+    "unknownError": "Unknown error",
+    "compare": "Compare",
+    "restore": "Restore",
+    "restored": "Success",
+    "restoredDescription": "The form has been restored to the selected version.",
+    "restoreError": "Version could not be restored",
+    "restoreTitle": "Restore Version",
+    "restoreConfirm": "Do you really want to restore version v{number}?",
+    "restoreDescription": "This will create a new version with the content of the selected version. The current version and all changes will remain in the history.",
+    "comparisonTitle": "Comparison: Current Form with Version v{number}",
+    "comparisonError": "Error loading version",
+    "elementsAdded": "Added Elements ({count})",
+    "elementsRemoved": "Removed Elements ({count})",
+    "elementsModified": "Modified Elements ({count})",
+    "elementWithoutTitle": "Without Title",
+    "elementIn": "Element in",
+    "optionsAdded": "Options added ({count})",
+    "optionsRemoved": "Options removed ({count})",
+    "optionsModified": "Options modified ({count})",
+    "noChanges": "No differences found"
+  },
+  "comments": {
+    "title": "Comments",
+    "empty": "No comments available",
+    "submit": "Submit",
+    "edit": "Edit Comment",
+    "editAction": "Edit"
+  },
+  "compliance": {
+    "title": "Compliance Status",
+    "critical": "Critical",
+    "warning": "Warning",
+    "nonCritical": "Non-critical"
+  },
+  "notifications": {
+    "title": "Notifications",
+    "empty": "No notifications",
+    "unreadCount": "{count} unread",
+    "tooltip": "Notifications"
+  },
+  "administration": {
+    "title": "Administration",
+    "accessDenied": "Access denied"
+  },
+  "user": {
+    "profile": "Profile",
+    "administration": "Administration",
+    "settings": "Settings",
+    "logout": "Log out",
+    "theme": "Theme",
+    "themePrimary": "Primary Color",
+    "themeNeutral": "Neutral Color",
+    "appearance": "Appearance",
+    "light": "Light",
+    "dark": "Dark"
+  },
+  "organization": {
+    "current": "Current Organization"
+  },
+  "auth": {
+    "welcome": "Welcome",
+    "redirectMessage": "You will be redirected to Keycloak to authenticate",
+    "signIn": "Sign in with Keycloak",
+    "termsAgreement": "By signing in, you agree to our terms of service",
+    "login": "Login"
+  },
+  "error": {
+    "pageNotFound": "Page not found",
+    "pageNotFoundDescription": "We are sorry but this page could not be found."
+  },
+  "common": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "edit": "Edit",
+    "close": "Close",
+    "confirm": "Confirm",
+    "back": "Back",
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "name": "Name",
+    "home": "Home",
+    "type": "Type",
+    "general": "General",
+    "on": "on"
   },
   "serverConnection": {
     "title": "Server Connection Lost",
@@ -13,5 +151,12 @@
     "lastCheck": "Last check",
     "retryInfo": "Automatic retry every 60 seconds",
     "retryNow": "Try again now"
+  },
+  "roles": {
+    "admin": "Administrator",
+    "employee": "Employee",
+    "employer": "Employer",
+    "worksCouncilMember": "Works Council Member",
+    "worksCouncilChair": "Works Council Chair"
   }
 }
diff --git a/legalconsenthub/types/formDiff.ts b/legalconsenthub/types/formDiff.ts
index 49f3b81..5fbdc6d 100644
--- a/legalconsenthub/types/formDiff.ts
+++ b/legalconsenthub/types/formDiff.ts
@@ -28,4 +28,3 @@ export interface OptionModification {
   value: string
   labelChanged: { from: string; to: string }
 }
-

From 4cb0589a6459aea7aad976f5d49f6d65ef061776 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sat, 22 Nov 2025 08:56:15 +0100
Subject: [PATCH 2/2] feat(#22): Add settings page with language switcher

---
 CLAUDE.md                                     |   2 +
 legalconsenthub/app/app.vue                   |  10 +-
 .../app/components/DeleteModal.vue            |   2 +-
 legalconsenthub/app/components/UserMenu.vue   | 115 +--------------
 legalconsenthub/app/pages/settings.vue        | 135 ++++++++++++++++++
 legalconsenthub/i18n/locales/de.json          |  30 ++--
 legalconsenthub/i18n/locales/en.json          |  30 ++--
 legalconsenthub/nuxt.config.ts                |   1 +
 8 files changed, 190 insertions(+), 135 deletions(-)
 create mode 100644 legalconsenthub/app/pages/settings.vue

diff --git a/CLAUDE.md b/CLAUDE.md
index 9a220dd..66d06c5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -231,6 +231,8 @@ legalconsenthub/
 │   │   ├── permissions.global.ts       # Authorization check
 │   │   └── refreshToken.global.ts      # Token refresh logic
 │   ├── pages/                          # Route pages
+│   │   ├── settings.vue               # User settings page (language, theme, appearance)
+│   │   ├── administration.vue         # Admin template editor
 │   │   ├── application-forms/
 │   │   ├── callback.vue               # OAuth callback
 │   │   ├── create.vue
diff --git a/legalconsenthub/app/app.vue b/legalconsenthub/app/app.vue
index 57b60a6..df7550f 100644
--- a/legalconsenthub/app/app.vue
+++ b/legalconsenthub/app/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <UApp>
+  <UApp :locale="locales[locale]">
     <NuxtLoadingIndicator />
 
     <NuxtLayout>
@@ -11,9 +11,14 @@
 </template>
 
 <script setup lang="ts">
+import * as locales from '@nuxt/ui/locale'
+
+const { locale } = useI18n()
 const colorMode = useColorMode()
 
 const color = computed(() => (colorMode.value === 'dark' ? '#111827' : 'white'))
+const lang = computed(() => locales[locale.value].code)
+const dir = computed(() => locales[locale.value].dir)
 
 useHead({
   meta: [
@@ -23,7 +28,8 @@ useHead({
   ],
   link: [{ rel: 'icon', href: '/favicon.ico' }],
   htmlAttrs: {
-    lang: 'en'
+    lang,
+    dir
   }
 })
 
diff --git a/legalconsenthub/app/components/DeleteModal.vue b/legalconsenthub/app/components/DeleteModal.vue
index 29594fb..e8658c0 100644
--- a/legalconsenthub/app/components/DeleteModal.vue
+++ b/legalconsenthub/app/components/DeleteModal.vue
@@ -1,7 +1,7 @@
 <template>
   <UModal :open="isOpen" :title="$t('applicationForms.deleteTitle')" @update:open="$emit('update:isOpen', $event)">
     <template #body>
-      <span v-html="$t('applicationForms.deleteConfirm', { name: applicationFormToDelete.name })"></span>
+      {{ $t('applicationForms.deleteConfirm', { name: applicationFormToDelete.name }) }}
     </template>
     <template #footer>
       <UButton :label="$t('common.cancel')" color="neutral" variant="outline" @click="$emit('update:isOpen', false)" />
diff --git a/legalconsenthub/app/components/UserMenu.vue b/legalconsenthub/app/components/UserMenu.vue
index b85e67f..752dbbf 100644
--- a/legalconsenthub/app/components/UserMenu.vue
+++ b/legalconsenthub/app/components/UserMenu.vue
@@ -14,18 +14,11 @@
       variant="ghost"
       block
       :square="collapsed"
-      class="data-[state=open]:bg-(--ui-bg-elevated)"
+      class="data-[state=open]:bg-elevated"
       :ui="{
         trailingIcon: 'text-(--ui-text-dimmed)'
       }"
     />
-
-    <template #chip-leading="{ item }">
-      <span
-        :style="{ '--chip': `var(--color-${(item as any).chip}-400)` }"
-        class="ms-0.5 size-2 rounded-full bg-(--chip)"
-      />
-    </template>
   </UDropdownMenu>
 </template>
 
@@ -37,30 +30,6 @@ defineProps<{
   collapsed?: boolean
 }>()
 
-const colorMode = useColorMode()
-const appConfig = useAppConfig()
-
-const colors = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose'
-]
-const neutrals = ['slate', 'gray', 'zinc', 'neutral', 'stone']
-
 const userStore = useUserStore()
 const { user: keyCloakUser } = storeToRefs(userStore)
 
@@ -82,10 +51,6 @@ const items = computed<DropdownMenuItem[][]>(() => [
     }
   ],
   [
-    {
-      label: $t('user.profile'),
-      icon: 'i-lucide-user'
-    },
     {
       label: $t('user.administration'),
       icon: 'i-lucide-shield',
@@ -97,84 +62,6 @@ const items = computed<DropdownMenuItem[][]>(() => [
       to: '/settings'
     }
   ],
-  [
-    {
-      label: $t('user.theme'),
-      icon: 'i-lucide-palette',
-      children: [
-        {
-          label: $t('user.themePrimary'),
-          slot: 'chip',
-          chip: appConfig.ui.colors.primary,
-          content: {
-            align: 'center',
-            collisionPadding: 16
-          },
-          children: colors.map((color) => ({
-            label: color,
-            chip: color,
-            slot: 'chip',
-            checked: appConfig.ui.colors.primary === color,
-            type: 'checkbox',
-            onSelect: (e) => {
-              e.preventDefault()
-              appConfig.ui.colors.primary = color
-            }
-          }))
-        },
-        {
-          label: $t('user.themeNeutral'),
-          slot: 'chip',
-          chip: appConfig.ui.colors.neutral,
-          content: {
-            align: 'end',
-            collisionPadding: 16
-          },
-          children: neutrals.map((color) => ({
-            label: color,
-            chip: color,
-            slot: 'chip',
-            type: 'checkbox',
-            checked: appConfig.ui.colors.neutral === color,
-            onSelect: (e) => {
-              e.preventDefault()
-              appConfig.ui.colors.neutral = color
-            }
-          }))
-        }
-      ]
-    },
-    {
-      label: $t('user.appearance'),
-      icon: 'i-lucide-sun-moon',
-      children: [
-        {
-          label: $t('user.light'),
-          icon: 'i-lucide-sun',
-          type: 'checkbox',
-          checked: colorMode.value === 'light',
-          onSelect(e: Event) {
-            e.preventDefault()
-            colorMode.preference = 'light'
-          }
-        },
-        {
-          label: $t('user.dark'),
-          icon: 'i-lucide-moon',
-          type: 'checkbox',
-          checked: colorMode.value === 'dark',
-          onUpdateChecked(checked: boolean) {
-            if (checked) {
-              colorMode.preference = 'dark'
-            }
-          },
-          onSelect(e: Event) {
-            e.preventDefault()
-          }
-        }
-      ]
-    }
-  ],
   [
     {
       label: $t('user.logout'),
diff --git a/legalconsenthub/app/pages/settings.vue b/legalconsenthub/app/pages/settings.vue
new file mode 100644
index 0000000..8976497
--- /dev/null
+++ b/legalconsenthub/app/pages/settings.vue
@@ -0,0 +1,135 @@
+<template>
+  <UDashboardPanel id="settings">
+    <template #header>
+      <UDashboardNavbar :title="$t('settings.title')">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
+        <!-- Language Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.language.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('settings.language.description') }}</p>
+            </div>
+          </template>
+          <ULocaleSelect
+            :model-value="locale"
+            :locales="[de, en]"
+            class="w-full max-w-xs"
+            size="md"
+            @update:model-value="handleLocaleChange"
+          />
+        </UCard>
+
+        <!-- Appearance Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.appearance.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('settings.appearance.description') }}</p>
+            </div>
+          </template>
+          <URadioGroup v-model="selectedColorMode" :items="colorModeOptions" class="gap-4" />
+        </UCard>
+
+        <!-- Theme Colors Section -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('settings.theme.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('settings.theme.description') }}</p>
+            </div>
+          </template>
+
+          <div class="space-y-6">
+            <!-- Primary Color -->
+            <div>
+              <h4 class="text-sm font-medium text-highlighted mb-3">{{ $t('settings.theme.primary') }}</h4>
+              <div class="grid grid-cols-10 gap-2">
+                <button
+                  v-for="color in colors"
+                  :key="color"
+                  type="button"
+                  :class="[
+                    'w-10 h-10 rounded-md transition-all',
+                    appConfig.ui.colors.primary === color
+                      ? 'ring-2 ring-offset-2 ring-offset-background'
+                      : 'hover:scale-110'
+                  ]"
+                  :style="{
+                    backgroundColor: `var(--color-${color}-500)`,
+                    '--tw-ring-color': `var(--color-${color}-500)`
+                  }"
+                  @click="appConfig.ui.colors.primary = color"
+                />
+              </div>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import { de, en } from '@nuxt/ui/locale'
+
+definePageMeta({
+  layout: 'default'
+})
+
+const { t: $t, locale, setLocale } = useI18n()
+const colorMode = useColorMode()
+const appConfig = useAppConfig()
+
+const colors = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink'
+]
+
+function handleLocaleChange(newLocale: string | undefined) {
+  if (newLocale) {
+    setLocale(newLocale as 'de' | 'en')
+  }
+}
+
+const colorModeOptions = computed(() => [
+  {
+    value: 'light',
+    label: $t('settings.appearance.light'),
+    icon: 'i-lucide-sun'
+  },
+  {
+    value: 'dark',
+    label: $t('settings.appearance.dark'),
+    icon: 'i-lucide-moon'
+  }
+])
+
+const selectedColorMode = computed({
+  get: () => colorMode.value,
+  set: (value) => {
+    colorMode.preference = value as 'light' | 'dark'
+  }
+})
+</script>
diff --git a/legalconsenthub/i18n/locales/de.json b/legalconsenthub/i18n/locales/de.json
index e575e66..730c569 100644
--- a/legalconsenthub/i18n/locales/de.json
+++ b/legalconsenthub/i18n/locales/de.json
@@ -6,7 +6,7 @@
     "noPermission": "Keine Berechtigung",
     "noPermissionDescription": "Sie haben keine Berechtigung zum Erstellen von Anträgen.",
     "backToOverview": "Zurück zur Übersicht",
-    "deleteConfirm": "Möchten Sie wirklich den Mitbestimmungsantrag <strong>{name}</strong> löschen?",
+    "deleteConfirm": "Möchten Sie wirklich den Mitbestimmungsantrag \"{name}\" löschen?",
     "deleteTitle": "Mitbestimmungsantrag löschen",
     "lastEditedBy": "Zuletzt bearbeitet von",
     "createdBy": "Erstellt von",
@@ -102,16 +102,28 @@
     "accessDenied": "Zugriff verweigert"
   },
   "user": {
-    "profile": "Profil",
     "administration": "Administration",
     "settings": "Einstellungen",
-    "logout": "Abmelden",
-    "theme": "Design",
-    "themePrimary": "Primärfarbe",
-    "themeNeutral": "Neutralfarbe",
-    "appearance": "Erscheinungsbild",
-    "light": "Hell",
-    "dark": "Dunkel"
+    "logout": "Abmelden"
+  },
+  "settings": {
+    "title": "Einstellungen",
+    "language": {
+      "title": "Sprache",
+      "description": "Wählen Sie Ihre bevorzugte Sprache"
+    },
+    "appearance": {
+      "title": "Erscheinungsbild",
+      "description": "Wählen Sie zwischen hellem und dunklem Modus",
+      "light": "Hell",
+      "dark": "Dunkel"
+    },
+    "theme": {
+      "title": "Farbschema",
+      "description": "Passen Sie die Farben der Anwendung an",
+      "primary": "Primärfarbe",
+      "neutral": "Neutralfarbe"
+    }
   },
   "organization": {
     "current": "Aktuelle Organisation"
diff --git a/legalconsenthub/i18n/locales/en.json b/legalconsenthub/i18n/locales/en.json
index 80389c6..15dd78d 100644
--- a/legalconsenthub/i18n/locales/en.json
+++ b/legalconsenthub/i18n/locales/en.json
@@ -6,7 +6,7 @@
     "noPermission": "No Permission",
     "noPermissionDescription": "You do not have permission to create applications.",
     "backToOverview": "Back to Overview",
-    "deleteConfirm": "Do you really want to delete the co-determination application <strong>{name}</strong>?",
+    "deleteConfirm": "Do you really want to delete the co-determination application \"{name}\"?",
     "deleteTitle": "Delete Co-determination Application",
     "lastEditedBy": "Last edited by",
     "createdBy": "Created by",
@@ -102,16 +102,28 @@
     "accessDenied": "Access denied"
   },
   "user": {
-    "profile": "Profile",
     "administration": "Administration",
     "settings": "Settings",
-    "logout": "Log out",
-    "theme": "Theme",
-    "themePrimary": "Primary Color",
-    "themeNeutral": "Neutral Color",
-    "appearance": "Appearance",
-    "light": "Light",
-    "dark": "Dark"
+    "logout": "Log out"
+  },
+  "settings": {
+    "title": "Settings",
+    "language": {
+      "title": "Language",
+      "description": "Choose your preferred language"
+    },
+    "appearance": {
+      "title": "Appearance",
+      "description": "Choose between light and dark mode",
+      "light": "Light",
+      "dark": "Dark"
+    },
+    "theme": {
+      "title": "Color Theme",
+      "description": "Customize the application colors",
+      "primary": "Primary Color",
+      "neutral": "Neutral Color"
+    }
   },
   "organization": {
     "current": "Current Organization"
diff --git a/legalconsenthub/nuxt.config.ts b/legalconsenthub/nuxt.config.ts
index 176bce4..b7b17fe 100644
--- a/legalconsenthub/nuxt.config.ts
+++ b/legalconsenthub/nuxt.config.ts
@@ -28,6 +28,7 @@ export default defineNuxtConfig({
   ],
   i18n: {
     defaultLocale: 'de',
+    strategy: 'no_prefix',
     locales: [
       { code: 'en', name: 'English', file: 'en.json' },
       { code: 'de', name: 'Deutsch', file: 'de.json' }