From ab25914c48eecdbe1a590fea85c2fc891767636f Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Thu, 1 Dec 2022 21:35:46 +0100
Subject: [PATCH] Added i18n support for the web interface

---
 webapp/package.json                           |   1 +
 webapp/src/components/BasePage.vue            |   2 +-
 webapp/src/components/DevInfo.vue             |  22 +-
 webapp/src/components/EventLog.vue            |   8 +-
 webapp/src/components/FirmwareInfo.vue        |  36 +-
 webapp/src/components/HardwareInfo.vue        |  12 +-
 webapp/src/components/HintView.vue            |  14 +-
 webapp/src/components/InterfaceApInfo.vue     |   6 +-
 .../src/components/InterfaceNetworkInfo.vue   |  16 +-
 webapp/src/components/InverterChannelInfo.vue |  13 +-
 webapp/src/components/InverterTotalInfo.vue   |   6 +-
 webapp/src/components/MemoryInfo.vue          |  20 +-
 webapp/src/components/NavBar.vue              |  40 +-
 webapp/src/components/RadioInfo.vue           |  12 +-
 webapp/src/components/WifiApInfo.vue          |  12 +-
 webapp/src/components/WifiStationInfo.vue     |  14 +-
 webapp/src/locales/de.json                    | 404 ++++++++++++++++++
 webapp/src/locales/en.json                    | 404 ++++++++++++++++++
 webapp/src/locales/index.ts                   |  19 +
 webapp/src/main.ts                            |  11 +
 webapp/src/views/AboutView.vue                |  50 +--
 webapp/src/views/ConfigAdminView.vue          |  42 +-
 webapp/src/views/ConsoleInfoView.vue          |  14 +-
 webapp/src/views/DtuAdminView.vue             |  39 +-
 webapp/src/views/FirmwareUpgradeView.vue      |  20 +-
 webapp/src/views/HomeView.vue                 |  86 ++--
 webapp/src/views/InverterAdminView.vue        |  80 ++--
 webapp/src/views/LoginView.vue                |  16 +-
 webapp/src/views/MaintenanceRebootView.vue    |  23 +-
 webapp/src/views/MqttAdminView.vue            | 122 ++++--
 webapp/src/views/MqttInfoView.vue             |  74 ++--
 webapp/src/views/NetworkAdminView.vue         |  62 +--
 webapp/src/views/NetworkInfoView.vue          |   2 +-
 webapp/src/views/NtpAdminView.vue             |  39 +-
 webapp/src/views/NtpInfoView.vue              |  20 +-
 webapp/src/views/SecurityAdminView.vue        |  26 +-
 webapp/src/views/SystemInfoView.vue           |   8 +-
 webapp/yarn.lock                              |  52 ++-
 38 files changed, 1370 insertions(+), 477 deletions(-)
 create mode 100644 webapp/src/locales/de.json
 create mode 100644 webapp/src/locales/en.json
 create mode 100644 webapp/src/locales/index.ts

diff --git a/webapp/package.json b/webapp/package.json
index d1e059db..b3baa956 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -17,6 +17,7 @@
     "mitt": "^3.0.0",
     "spark-md5": "^3.0.2",
     "vue": "^3.2.45",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
diff --git a/webapp/src/components/BasePage.vue b/webapp/src/components/BasePage.vue
index 9124f37c..0a8d8ffe 100644
--- a/webapp/src/components/BasePage.vue
+++ b/webapp/src/components/BasePage.vue
@@ -7,7 +7,7 @@
 
         <div class="text-center" v-if="isLoading">
             <div class="spinner-border" role="status">
-                <span class="visually-hidden">Loading...</span>
+                <span class="visually-hidden">{{ $t('base.Loading') }}</span>
             </div>
         </div>
 
diff --git a/webapp/src/components/DevInfo.vue b/webapp/src/components/DevInfo.vue
index b9216831..df6003f2 100644
--- a/webapp/src/components/DevInfo.vue
+++ b/webapp/src/components/DevInfo.vue
@@ -1,40 +1,38 @@
 <template>
     <BootstrapAlert :show="!devInfoList.valid_data">
         <h4 class="alert-heading">
-            <BIconInfoSquare class="fs-2" />&nbsp;No Information available
-        </h4>Did not receive any valid data from the inverter till now. Still trying...
+            <BIconInfoSquare class="fs-2" />&nbsp;{{ $t('devinfo.NoInfo') }}
+        </h4>{{ $t('devinfo.NoInfoLong') }}
     </BootstrapAlert>
     <table v-if="devInfoList.valid_data" class="table table-hover">
         <tbody>
             <tr>
-                <td>Model</td>
+                <td>{{ $t('devinfo.Model') }}</td>
                 <td v-if="devInfoList.hw_model_name != ''">{{ devInfoList.hw_model_name }}</td>
-                <td v-else>Unknown model! Please report the "Hardware Part Number" and model (e.g. HM-350) as an issue
-                    <a href="https://github.com/tbnobody/OpenDTU/issues" target="_blank">here</a>.
-                </td>
+                <td v-else v-html="$t('devinfo.UnknownModel')"></td>
             </tr>
             <tr>
-                <td>Detected max. Power</td>
+                <td>{{ $t('devinfo.DetectedMaxPower') }}</td>
                 <td>{{ devInfoList.max_power }} W</td>
             </tr>
             <tr>
-                <td>Bootloader Version</td>
+                <td>{{ $t('devinfo.BootloaderVersion') }}</td>
                 <td>{{ formatVersion(devInfoList.fw_bootloader_version) }}</td>
             </tr>
             <tr>
-                <td>Firmware Version</td>
+                <td>{{ $t('devinfo.FirmwareVersion') }}</td>
                 <td>{{ formatVersion(devInfoList.fw_build_version) }}</td>
             </tr>
             <tr>
-                <td>Firmware Build Date</td>
+                <td>{{ $t('devinfo.FirmwareBuildDate') }}</td>
                 <td>{{ devInfoList.fw_build_datetime }}</td>
             </tr>
             <tr>
-                <td>Hardware Part Number</td>
+                <td>{{ $t('devinfo.HardwarePartNumber') }}</td>
                 <td>{{ devInfoList.hw_part_number }}</td>
             </tr>
             <tr>
-                <td>Hardware Version</td>
+                <td>{{ $t('devinfo.HardwareVersion') }}</td>
                 <td>{{ devInfoList.hw_version }}</td>
             </tr>
         </tbody>
diff --git a/webapp/src/components/EventLog.vue b/webapp/src/components/EventLog.vue
index 5edaf654..3dfbbf3f 100644
--- a/webapp/src/components/EventLog.vue
+++ b/webapp/src/components/EventLog.vue
@@ -1,10 +1,10 @@
 <template>
     <table class="table table-hover">
         <thead>
-            <th scope="col">Start</th>
-            <th scope="col">Stop</th>
-            <th scope="col">ID</th>
-            <th scope="col">Message</th>
+            <th scope="col">{{ $t('eventlog.Start') }}</th>
+            <th scope="col">{{ $t('eventlog.Stop') }}</th>
+            <th scope="col">{{ $t('eventlog.Id') }}</th>
+            <th scope="col">{{ $t('eventlog.Message') }}</th>
         </thead>
         <tbody>
             <template v-for="event in eventLogList.count" :key="event">
diff --git a/webapp/src/components/FirmwareInfo.vue b/webapp/src/components/FirmwareInfo.vue
index ca16857b..f34bb9ec 100644
--- a/webapp/src/components/FirmwareInfo.vue
+++ b/webapp/src/components/FirmwareInfo.vue
@@ -1,52 +1,54 @@
 <template>
     <div class="card">
         <div class="card-header text-bg-primary">
-            Firmware Information
+            {{ $t('firmwareinfo.FirmwareInformation') }}
         </div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
                         <tr>
-                            <th>Hostname</th>
+                            <th>{{ $t('firmwareinfo.Hostname') }}</th>
                             <td>{{ systemStatus.hostname }}</td>
                         </tr>
                         <tr>
-                            <th>SDK Version</th>
+                            <th>{{ $t('firmwareinfo.SdkVersion') }}</th>
                             <td>{{ systemStatus.sdkversion }}</td>
                         </tr>
                         <tr>
-                            <th>Config Version</th>
+                            <th>{{ $t('firmwareinfo.ConfigVersion') }}</th>
                             <td>{{ systemStatus.config_version }}</td>
                         </tr>
                         <tr>
-                            <th>Firmware Version / Git Hash</th>
+                            <th>{{ $t('firmwareinfo.FirmwareVersion') }}</th>
                             <td><a :href="'https://github.com/tbnobody/OpenDTU/commits/' + systemStatus.git_hash?.substring(1)"
-                                    target="_blank" v-tooltip title="Click here to show information about your current version">{{
-                                            systemStatus.git_hash?.substring(1)
-                                    }}</a></td>
+                                    target="_blank" v-tooltip :title="$t('firmwareinfo.FirmwareVersionHint')">
+                                    {{ systemStatus.git_hash?.substring(1) }}
+                                </a></td>
                         </tr>
                         <tr>
-                            <th>Firmware Update</th>
-                            <td><a :href="systemStatus.update_url" target="_blank" v-tooltip title="Click here to view the changes between your version 
-                                    and the latest version"><span class="badge" :class="systemStatus.update_status">{{
-                                            systemStatus.update_text
-                                    }}</span></a></td>
+                            <th>{{ $t('firmwareinfo.FirmwareUpdate') }}</th>
+                            <td><a :href="systemStatus.update_url" target="_blank" v-tooltip
+                                    :title="$t('firmwareinfo.FirmwareUpdateHint')">
+                                    <span class="badge" :class="systemStatus.update_status">
+                                        {{ systemStatus.update_text }}
+                                    </span>
+                                </a></td>
                         </tr>
                         <tr>
-                            <th>Reset Reason CPU 0</th>
+                            <th>{{ $t('firmwareinfo.ResetReason0') }}</th>
                             <td>{{ systemStatus.resetreason_0 }}</td>
                         </tr>
                         <tr>
-                            <th>Reset Reason CPU 1</th>
+                            <th>{{ $t('firmwareinfo.ResetReason1') }}</th>
                             <td>{{ systemStatus.resetreason_1 }}</td>
                         </tr>
                         <tr>
-                            <th>Config save count</th>
+                            <th>{{ $t('firmwareinfo.ConfigSaveCount') }}</th>
                             <td>{{ systemStatus.cfgsavecount }}</td>
                         </tr>
                         <tr>
-                            <th>Uptime</th>
+                            <th>{{ $t('firmwareinfo.Uptime') }}</th>
                             <td>{{ timeInHours(systemStatus.uptime) }}</td>
                         </tr>
                     </tbody>
diff --git a/webapp/src/components/HardwareInfo.vue b/webapp/src/components/HardwareInfo.vue
index c1131949..bb705f2c 100644
--- a/webapp/src/components/HardwareInfo.vue
+++ b/webapp/src/components/HardwareInfo.vue
@@ -1,27 +1,27 @@
 <template>
     <div class="card">
         <div class="card-header text-bg-primary">
-            Hardware Information
+            {{ $t('hardwareinfo.HardwareInformation') }}
         </div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
                         <tr>
-                            <th>Chip Model</th>
+                            <th>{{ $t('hardwareinfo.ChipModel') }}</th>
                             <td>{{ systemStatus.chipmodel }}</td>
                         </tr>
                         <tr>
-                            <th>Chip Revision</th>
+                            <th>{{ $t('hardwareinfo.ChipRevision') }}</th>
                             <td>{{ systemStatus.chiprevision }}</td>
                         </tr>
                         <tr>
-                            <th>Chip Cores</th>
+                            <th>{{ $t('hardwareinfo.ChipCores') }}</th>
                             <td>{{ systemStatus.chipcores }}</td>
                         </tr>
                         <tr>
-                            <th>CPU Frequency</th>
-                            <td>{{ systemStatus.cpufreq }} MHz</td>
+                            <th>{{ $t('hardwareinfo.CpuFrequency') }}</th>
+                            <td>{{ systemStatus.cpufreq }} {{ $t('hardwareinfo.Mhz') }}</td>
                         </tr>
                     </tbody>
                 </table>
diff --git a/webapp/src/components/HintView.vue b/webapp/src/components/HintView.vue
index c684a0c8..712577a9 100644
--- a/webapp/src/components/HintView.vue
+++ b/webapp/src/components/HintView.vue
@@ -1,20 +1,16 @@
 <template>
     <BootstrapAlert :show="hints.radio_problem" variant="danger">
-        <BIconBroadcast class="fs-4" /> Could not connect to a correct NRF24L01+ radio module. Please check the wiring.
+        <BIconBroadcast class="fs-4" /> {{ $t('hints.RadioProblem') }}
     </BootstrapAlert>
 
     <BootstrapAlert :show="hints.time_sync" variant="danger">
-        <BIconClock class="fs-4" /> The clock has not yet been synchronised. Without a
-        correctly set clock, no requests are made to the inverter. This is normal shortly after the start. However,
-        after a longer runtime (>1 minute), it indicates that the NTP server is not accessible. <a
-            @click="gotoTimeSettings" href="#" class="alert-link">Please check your time
-            settings.</a>
+        <BIconClock class="fs-4" /> {{ $t('hints.TimeSync') }}
+        <a @click="gotoTimeSettings" href="#" class="alert-link">{{ $t('hints.TimeSyncLink') }}</a>
     </BootstrapAlert>
 
     <BootstrapAlert :show="hints.default_password" variant="danger">
-        <BIconExclamationCircle class="fs-4" /> You are using the default password for the web interface and the
-        emergency access point. This is potentially insecure. <a @click="gotoPasswordSettings" href="#"
-            class="alert-link">Please change the password.</a>
+        <BIconExclamationCircle class="fs-4" /> {{ $t('hints.DefaultPassword') }}
+        <a @click="gotoPasswordSettings" href="#" class="alert-link">{{ $t('hints.DefaultPasswordLink') }}</a>
     </BootstrapAlert>
 </template>
 
diff --git a/webapp/src/components/InterfaceApInfo.vue b/webapp/src/components/InterfaceApInfo.vue
index d85be6e8..34940409 100644
--- a/webapp/src/components/InterfaceApInfo.vue
+++ b/webapp/src/components/InterfaceApInfo.vue
@@ -1,18 +1,18 @@
 <template>
     <div class="card">
         <div class="card-header text-bg-primary">
-            Network Interface (Access Point)
+            {{ $t('interfaceapinfo.NetworkInterface') }}
         </div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
                         <tr>
-                            <th>IP Address</th>
+                            <th>{{ $t('interfaceapinfo.IpAddress') }}</th>
                             <td>{{ networkStatus.ap_ip }}</td>
                         </tr>
                         <tr>
-                            <th>MAC Address</th>
+                            <th>{{ $t('interfaceapinfo.MacAddress') }}</th>
                             <td>{{ networkStatus.ap_mac }}</td>
                         </tr>
                     </tbody>
diff --git a/webapp/src/components/InterfaceNetworkInfo.vue b/webapp/src/components/InterfaceNetworkInfo.vue
index 4c96cd17..ad1fce84 100644
--- a/webapp/src/components/InterfaceNetworkInfo.vue
+++ b/webapp/src/components/InterfaceNetworkInfo.vue
@@ -1,38 +1,38 @@
 <template>
     <div class="card">
         <div class="card-header text-bg-primary">
-            Network Interface ({{ networkStatus.network_mode }})
+            {{ $t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode }) }}
         </div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
                         <tr>
-                            <th>Hostname</th>
+                            <th>{{ $t('interfacenetworkinfo.Hostname') }}</th>
                             <td>{{ networkStatus.network_hostname }}</td>
                         </tr>
                         <tr>
-                            <th>IP Address</th>
+                            <th>{{ $t('interfacenetworkinfo.IpAddress') }}</th>
                             <td>{{ networkStatus.network_ip }}</td>
                         </tr>
                         <tr>
-                            <th>Netmask</th>
+                            <th>{{ $t('interfacenetworkinfo.Netmask') }}</th>
                             <td>{{ networkStatus.network_netmask }}</td>
                         </tr>
                         <tr>
-                            <th>Default Gateway</th>
+                            <th>{{ $t('interfacenetworkinfo.DefaultGateway') }}</th>
                             <td>{{ networkStatus.network_gateway }}</td>
                         </tr>
                         <tr>
-                            <th>DNS 1</th>
+                            <th>{{ $t('interfacenetworkinfo.Dns', { num: 1 }) }}</th>
                             <td>{{ networkStatus.network_dns1 }}</td>
                         </tr>
                         <tr>
-                            <th>DNS 2</th>
+                            <th>{{ $t('interfacenetworkinfo.Dns', { num: 2 }) }}</th>
                             <td>{{ networkStatus.network_dns2 }}</td>
                         </tr>
                         <tr>
-                            <th>MAC Address</th>
+                            <th>{{ $t('interfacenetworkinfo.MacAddress') }}</th>
                             <td>{{ networkStatus.network_mac }}</td>
                         </tr>
                     </tbody>
diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index dc277910..1672a30c 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -2,22 +2,23 @@
     <div class="card" :class="{ 'border-info': channelNumber == 0 }">
         <div v-if="channelNumber >= 1" class="card-header">
             <template v-if="channelData.name.u != ''">{{ channelData.name.u }}</template>
-            <template v-else>String {{ channelNumber }}</template>
+            <template v-else>{{ $t('inverterchannelinfo.String', { num: channelNumber }) }}</template>
         </div>
-        <div v-if="channelNumber == 0" class="card-header text-bg-info">Phase {{ channelNumber + 1 }}</div>
+        <div v-if="channelNumber == 0" class="card-header text-bg-info">
+            {{ $t('inverterchannelinfo.Phase', { num: channelNumber + 1 }) }}</div>
         <div class="card-body">
             <table class="table table-striped table-hover">
                 <thead>
                     <tr>
-                        <th scope="col">Property</th>
-                        <th style="text-align: right" scope="col">Value</th>
-                        <th scope="col">Unit</th>
+                        <th scope="col">{{ $t('inverterchannelinfo.Property') }}</th>
+                        <th style="text-align: right" scope="col">{{ $t('inverterchannelinfo.Value') }}</th>
+                        <th scope="col">{{ $t('inverterchannelinfo.Unit') }}</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
                         <template v-if="key != 'name' && property">
-                            <th scope="row">{{ key }}</th>
+                            <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
                             <td style="text-align: right">{{ formatNumber(property.v, property.d) }}</td>
                             <td>{{ property.u }}</td>
                         </template>
diff --git a/webapp/src/components/InverterTotalInfo.vue b/webapp/src/components/InverterTotalInfo.vue
index c81c23dd..fecd026a 100644
--- a/webapp/src/components/InverterTotalInfo.vue
+++ b/webapp/src/components/InverterTotalInfo.vue
@@ -2,7 +2,7 @@
     <div class="row row-cols-1 row-cols-md-3 g-3">
         <div class="col">
             <div class="card">
-                <div class="card-header text-bg-success">Total Yield Total</div>
+                <div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalYieldTotal') }}</div>
                 <div class="card-body card-text text-center">
                     <h2>{{ formatNumber(totalData.YieldTotal.v, totalData.YieldTotal.d) }}
                         <small class="text-muted">{{ totalData.YieldTotal.u }}</small>
@@ -12,7 +12,7 @@
         </div>
         <div class="col">
             <div class="card">
-                <div class="card-header text-bg-success">Total Yield Day</div>
+                <div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalYieldDay') }}</div>
                 <div class="card-body card-text text-center">
                     <h2>{{ formatNumber(totalData.YieldDay.v, totalData.YieldDay.d) }}
                         <small class="text-muted">{{ totalData.YieldDay.u }}</small>
@@ -22,7 +22,7 @@
         </div>
         <div class="col">
             <div class="card">
-                <div class="card-header text-bg-success">Total Power</div>
+                <div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalPower') }}</div>
                 <div class="card-body card-text text-center">
                     <h2>{{ formatNumber(totalData.Power.v, totalData.Power.d) }}
                         <small class="text-muted">{{ totalData.Power.u }}</small>
diff --git a/webapp/src/components/MemoryInfo.vue b/webapp/src/components/MemoryInfo.vue
index 52ca7e11..caff2322 100644
--- a/webapp/src/components/MemoryInfo.vue
+++ b/webapp/src/components/MemoryInfo.vue
@@ -1,23 +1,25 @@
 <template>
     <div class="card">
-        <div class="card-header text-bg-primary">Memory Information</div>
+        <div class="card-header text-bg-primary">{{ $t('memoryinfo.MemoryInformation') }}</div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <thead>
                         <tr>
-                            <th>Type</th>
-                            <th>Usage</th>
-                            <th class="rightCell">Free</th>
-                            <th class="rightCell">Used</th>
-                            <th class="rightCell">Size</th>
+                            <th>{{ $t('memoryinfo.Type') }}</th>
+                            <th>{{ $t('memoryinfo.Usage') }}</th>
+                            <th class="rightCell">{{ $t('memoryinfo.Free') }}</th>
+                            <th class="rightCell">{{ $t('memoryinfo.Used') }}</th>
+                            <th class="rightCell">{{ $t('memoryinfo.Size') }}</th>
                         </tr>
                     </thead>
                     <tbody>
-                        <FsInfo name="Heap" :total="systemStatus.heap_total" :used="systemStatus.heap_used" />
-                        <FsInfo name="LittleFs" :total="systemStatus.littlefs_total"
+                        <FsInfo :name="$t('memoryinfo.Heap')" :total="systemStatus.heap_total"
+                            :used="systemStatus.heap_used" />
+                        <FsInfo :name="$t('memoryinfo.LittleFs')" :total="systemStatus.littlefs_total"
                             :used="systemStatus.littlefs_used" />
-                        <FsInfo name="Sketch" :total="systemStatus.sketch_total" :used="systemStatus.sketch_used" />
+                        <FsInfo :name="$t('memoryinfo.Sketch')" :total="systemStatus.sketch_total"
+                            :used="systemStatus.sketch_used" />
                     </tbody>
                 </table>
             </div>
diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index a2bb208e..4571810c 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -9,81 +9,81 @@
             <div class="collapse navbar-collapse" ref="navbarCollapse" id="navbarNavAltMarkup">
                 <ul class="navbar-nav me-auto">
                     <li class="nav-item">
-                        <router-link @click="onClick" class="nav-link" to="/">Live Data</router-link>
+                        <router-link @click="onClick" class="nav-link" to="/">{{ $t('menu.LiveView') }}</router-link>
                     </li>
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
                             data-bs-toggle="dropdown" aria-expanded="false">
-                            Settings
+                            {{ $t('menu.Settings') }}
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/network">Network Settings</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/network">{{ $t('menu.NetworkSettings') }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/ntp">NTP Settings</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/ntp">{{ $t('menu.NTPSettings') }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/mqtt">MqTT Settings</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/mqtt">{{ $t('menu.MQTTSettings') }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/inverter">Inverter Settings
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/inverter">{{ $t('menu.InverterSettings') }}
                                 </router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/security">Security Settings
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/security">{{ $t('menu.SecuritySettings') }}
                                 </router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/dtu">DTU Settings</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/dtu">{{ $t('menu.DTUSettings') }}</router-link>
                             </li>
                             <li>
                                 <hr class="dropdown-divider" />
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/config">Config Management</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/config">{{ $t('menu.ConfigManagement') }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/firmware/upgrade">Firmware Upgrade</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/firmware/upgrade">{{ $t('menu.FirmwareUpgrade') }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/maintenance/reboot">Device Reboot</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/maintenance/reboot">{{ $t('menu.DeviceReboot') }}</router-link>
                             </li>
                         </ul>
                     </li>
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
                             data-bs-toggle="dropdown" aria-expanded="false">
-                            Info
+                            {{ $t('menu.Info') }}
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/system">System</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/system">{{ $t('menu.System') }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/network">Network</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/network">{{ $t('menu.Network') }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/ntp">NTP</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/ntp">{{ $t('menu.NTP') }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/mqtt">MqTT</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/mqtt">{{ $t('menu.MQTT') }}</router-link>
                             </li>
                             <li>
                                 <hr class="dropdown-divider" />
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/console">Console</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/console">{{ $t('menu.Console') }}</router-link>
                             </li>
                         </ul>
                     </li>
                     <li class="nav-item">
-                        <router-link @click="onClick" class="nav-link" to="/about">About</router-link>
+                        <router-link @click="onClick" class="nav-link" to="/about">{{ $t('menu.About') }}</router-link>
                     </li>
                 </ul>
                 <form class="d-flex" role="search">
-                    <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">Logout</button>
-                    <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">Login</button>
+                    <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">{{ $t('menu.Logout') }}</button>
+                    <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">{{ $t('menu.Login') }}</button>
                 </form>
             </div>
         </div>
diff --git a/webapp/src/components/RadioInfo.vue b/webapp/src/components/RadioInfo.vue
index 62cf4bdf..09071e71 100644
--- a/webapp/src/components/RadioInfo.vue
+++ b/webapp/src/components/RadioInfo.vue
@@ -1,24 +1,24 @@
 <template>
     <div class="card">
         <div class="card-header text-bg-primary">
-            Radio Information
+            {{ $t('radioinfo.RadioInformation') }}
         </div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
                         <tr>
-                            <th>Chip Status</th>
+                            <th>{{ $t('radioinfo.ChipStatus') }}</th>
                             <td class="badge" :class="{
                                 'text-bg-danger': !systemStatus.radio_connected,
                                 'text-bg-success': systemStatus.radio_connected,
                             }">
-                                <span v-if="systemStatus.radio_connected">connected</span>
-                                <span v-else>not connected</span>
+                                <span v-if="systemStatus.radio_connected">{{ $t('radioinfo.Connected') }}</span>
+                                <span v-else>{{ $t('radioinfo.NotConnected') }}</span>
                             </td>
                         </tr>
                         <tr>
-                            <th>Chip Type</th>
+                            <th>{{ $t('radioinfo.ChipType') }}</th>
                             <td class="badge" :class="{
                                 'text-bg-danger': systemStatus.radio_connected && !systemStatus.radio_pvariant,
                                 'text-bg-success': systemStatus.radio_connected && systemStatus.radio_pvariant,
@@ -28,7 +28,7 @@
                                     v-if="systemStatus.radio_connected && systemStatus.radio_pvariant">nRF24L01+</span>
                                 <span
                                     v-else-if="systemStatus.radio_connected && !systemStatus.radio_pvariant">nRF24L01</span>
-                                <span v-else>Unknown</span>
+                                <span v-else>{{ $t('radioinfo.Unknown') }}</span>
                             </td>
                         </tr>
                     </tbody>
diff --git a/webapp/src/components/WifiApInfo.vue b/webapp/src/components/WifiApInfo.vue
index 2fe265a7..de6fd6f3 100644
--- a/webapp/src/components/WifiApInfo.vue
+++ b/webapp/src/components/WifiApInfo.vue
@@ -1,28 +1,28 @@
 <template>
     <div class="card">
         <div class="card-header text-bg-primary">
-            WiFi Information (Access Point)
+            {{ $t('wifiapinfo.WifiApInfo') }}
         </div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
                         <tr>
-                            <th>Status</th>
+                            <th>{{ $t('wifiapinfo.Status') }}</th>
                             <td class="badge" :class="{
                                 'text-bg-danger': !networkStatus.ap_status,
                                 'text-bg-success': networkStatus.ap_status,
                             }">
-                                <span v-if="networkStatus.ap_status">enabled</span>
-                                <span v-else>disabled</span>
+                                <span v-if="networkStatus.ap_status">{{ $t('wifiapinfo.Enabled') }}</span>
+                                <span v-else>{{ $t('wifiapinfo.Disabled') }}</span>
                             </td>
                         </tr>
                         <tr>
-                            <th>SSID</th>
+                            <th>{{ $t('wifiapinfo.Ssid') }}</th>
                             <td>{{ networkStatus.ap_ssid }}</td>
                         </tr>
                         <tr>
-                            <th># Stations</th>
+                            <th>{{ $t('wifiapinfo.Stations') }}</th>
                             <td>{{ networkStatus.ap_stationnum }}</td>
                         </tr>
                     </tbody>
diff --git a/webapp/src/components/WifiStationInfo.vue b/webapp/src/components/WifiStationInfo.vue
index 37997a9e..e1e6bef6 100644
--- a/webapp/src/components/WifiStationInfo.vue
+++ b/webapp/src/components/WifiStationInfo.vue
@@ -1,32 +1,32 @@
 <template>
     <div class="card">
         <div class="card-header text-bg-primary">
-            WiFi Information (Station)
+            {{ $t('wifistationinfo.WifiStationInfo') }}
         </div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
                         <tr>
-                            <th>Status</th>
+                            <th>{{ $t('wifistationinfo.Status') }}</th>
                             <td class="badge" :class="{
                                 'text-bg-danger': !networkStatus.sta_status,
                                 'text-bg-success': networkStatus.sta_status,
                             }">
-                                <span v-if="networkStatus.sta_status">enabled</span>
-                                <span v-else>disabled</span>
+                                <span v-if="networkStatus.sta_status">{{ $t('wifistationinfo.Enabled') }}</span>
+                                <span v-else>{{ $t('wifistationinfo.Disabled') }}</span>
                             </td>
                         </tr>
                         <tr>
-                            <th>SSID</th>
+                            <th>{{ $t('wifistationinfo.Ssid') }}</th>
                             <td>{{ networkStatus.sta_ssid }}</td>
                         </tr>
                         <tr>
-                            <th>Quality</th>
+                            <th>{{ $t('wifistationinfo.Quality') }}</th>
                             <td>{{ getRSSIasQuality(networkStatus.sta_rssi) }} %</td>
                         </tr>
                         <tr>
-                            <th>RSSI</th>
+                            <th>{{ $t('wifistationinfo.Rssi') }}</th>
                             <td>{{ networkStatus.sta_rssi }}</td>
                         </tr>
                     </tbody>
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
new file mode 100644
index 00000000..704f0348
--- /dev/null
+++ b/webapp/src/locales/de.json
@@ -0,0 +1,404 @@
+{
+    "menu": {
+        "LiveView": "Live Ansicht",
+        "Settings": "Einstellungen",
+        "NetworkSettings": "Netzwerk Einstellungen",
+        "NTPSettings": "NTP Einstellungen",
+        "MQTTSettings": "MQTT Einstellungen",
+        "InverterSettings": "Wechselrichter Einstellungen",
+        "SecuritySettings": "Sicherheitseinstellungen",
+        "DTUSettings": "DTU Einstellungen",
+        "ConfigManagement": "Konfigurationsverwaltung",
+        "FirmwareUpgrade": "Firmware Aktualisierung",
+        "DeviceReboot": "Geräteneustart",
+        "Info": "Info",
+        "System": "System",
+        "Network": "Netzwerk",
+        "NTP": "NTP",
+        "MQTT": "MQTT",
+        "Console": "Konsole",
+        "About": "Über",
+        "Logout": "Abmelden",
+        "Login": "Anmelden"
+    },
+    "base": {
+        "Loading": "Lade..."
+    },
+    "home": {
+        "LiveData": "Live Daten",
+        "SerialNumber": "Seriennummer: ",
+        "CurrentLimit": "Aktuelles Limit: ",
+        "DataAge": "Alter der Daten: ",
+        "Seconds": "Sekunden",
+        "ShowSetInverterLimit": "Zeige / Setze Wechselrichterlimit",
+        "TurnOnOff": "Schalte Wechselrichter ein oder aus",
+        "ShowInverterInfo": "Zeige Wechselrichter Informationen",
+        "ShowEventlog": "Zeige Ereignisanzeige",
+        "UnreadMessages": "Ungelesene Meldungen",
+        "Loading": "@:base.Loading",
+        "EventLog": "Ereignisanzeige",
+        "Close": "Schließen",
+        "InverterInfo": "Wechselrichter Informationen",
+        "LimitSettings": "Limit Einstellungen",
+        "LastLimitSetStatus": "Letzter Übertragungsstatus:",
+        "SetLimit": "Setze Limit:",
+        "Relative": "Relativ (%)",
+        "Absolute": "Absolut (W)",
+        "LimitHint": "<b>Hinweis:</b> Wenn das Limit als Absolutwert eingestellt wird, wird die Anzeige des aktuellen Wertes erst nach ~4 Minuten aktualisiert.",
+        "SetPersistent": "Limit dauerhaft setzen",
+        "SetNonPersistent": "Limit nicht dauerhaft setzen",
+        "PowerSettings": "Energieeinstellungen",
+        "LastPowerSetStatus": "Letzer Übertragungsstatus:",
+        "TurnOn": "Einschalten",
+        "TurnOff": "Ausschalten",
+        "Restart": "Neustarten"
+    },
+    "eventlog": {
+        "Start": "Begin",
+        "Stop": "Ende",
+        "Id": "Fehlernummer",
+        "Message": "Meldung"
+    },
+    "devinfo": {
+        "NoInfo": "Keine Informationen verfügbar",
+        "NoInfoLong": "Bisher wurden noch keine gültigen Daten vom Wechselrichter empfangen. Versuche es weiter...",
+        "UnknownModel": "Unbekanntes Modell! Bitte melden Sie die \"Hardware Teilenummer\" und das Modell (z.B. HM-350) als Problem <a href=\"https://github.com/tbnobody/OpenDTU/issues\" target=\"_blank\">hier</a>.",
+        "Model": "Modell",
+        "DetectedMaxPower": "Ermittelte max. Leistung",
+        "BootloaderVersion": "Bootloader Version",
+        "FirmwareVersion": "Firmware Version",
+        "FirmwareBuildDate": "Firmware Erstellungsdatum",
+        "HardwarePartNumber": "Hardware Teilenummer",
+        "HardwareVersion": "Hardware Version"
+    },
+    "systeminfo": {
+        "SystemInfo": "System Informationen",
+        "VersionError": "Fehler beim Abrufen von Versionsinformationen",
+        "VersionNew": "Neue Version verfügbar! Zeige Änderungen!",
+        "VersionOk": "Aktuell!"
+    },
+    "firmwareinfo": {
+        "FirmwareInformation": "Firmware Informationen",
+        "Hostname": "Hostname",
+        "SdkVersion": "SDK Version",
+        "ConfigVersion": "Konfigurationsversion",
+        "FirmwareVersion": "Firmware Version / Git Hash",
+        "FirmwareVersionHint": "Klicken Sie hier, um Informationen über Ihre aktuelle Version anzuzeigen",
+        "FirmwareUpdate": "Firmware Aktualisierung",
+        "FirmwareUpdateHint": "Klicken Sie hier, um die Änderungen zwischen Ihrer Version und der neuesten Version anzuzeigen",
+        "ResetReason0": "Reset Grund CPU 0",
+        "ResetReason1": "Reset Grund CPU 1",
+        "ConfigSaveCount": "Anzahl der Konfigurationsspeicherungen",
+        "Uptime": "Betriebszeit"
+    },
+    "hardwareinfo": {
+        "HardwareInformation": "Hardware Informationen",
+        "ChipModel": "Chip Modell",
+        "ChipRevision": "Chip Revision",
+        "ChipCores": "Chip Kerne",
+        "CpuFrequency": "CPU Frequenz",
+        "Mhz": "MHz"
+    },
+    "memoryinfo": {
+        "MemoryInformation": "Speicher Informationen",
+        "Type": "Typ",
+        "Usage": "Verwendung",
+        "Free": "Frei",
+        "Used": "Benutzt",
+        "Size": "Größe",
+        "Heap": "Heap",
+        "LittleFs": "LittleFs",
+        "Sketch": "Sketch"
+    },
+    "radioinfo": {
+        "RadioInformation": "Funkmodul Informationen",
+        "ChipStatus": "Chip Status",
+        "ChipType": "Chip Typ",
+        "Connected": "verbunden",
+        "NotConnected": "nicht verbunden",
+        "Unknown": "unbekannt"
+    },
+    "networkinfo": {
+        "NetworkInformation": "Netzwerk Informationen"
+    },
+    "wifistationinfo": {
+        "WifiStationInfo": "WiFi Informationen (Station)",
+        "Status": "Status",
+        "Enabled": "aktiv",
+        "Disabled": "nicht aktiv",
+        "Ssid": "SSID",
+        "Quality": "Qualität",
+        "Rssi": "RSSI"
+    },
+    "wifiapinfo": {
+        "WifiApInfo": "WiFi Informationen (Access Point)",
+        "Status": "@:wifistationinfo.Status",
+        "Enabled": "@:wifistationinfo.Enabled",
+        "Disabled": "@:wifistationinfo.Disabled",
+        "Ssid": "@:wifistationinfo.Ssid",
+        "Stations": "# Teilnehmer"
+    },
+    "interfacenetworkinfo": {
+        "NetworkInterface": "Netzwerk Schnittstelle ({iface})",
+        "Hostname": "@:firmwareinfo.Hostname",
+        "IpAddress": "IP Adresse",
+        "Netmask": "Netzmaske",
+        "DefaultGateway": "Standardgateway",
+        "Dns": "DNS {num}",
+        "MacAddress": "MAC Adresse"
+    },
+    "interfaceapinfo": {
+        "NetworkInterface": "Netzwerk Schnittstelle (Access Point)",
+        "IpAddress": "@:interfacenetworkinfo.IpAddress",
+        "MacAddress": "@:interfacenetworkinfo.MacAddress"
+    },
+    "ntpinfo": {
+        "NtpInformation": "NTP Informationen",
+        "ConfigurationSummary": "Konfigurationszusammenfassung",
+        "Server": "Server",
+        "Timezone": "Zeitzone",
+        "TimezoneDescription": "Zeitzonenbeschreibung",
+        "CurrentTime": "Aktuelle Zeit",
+        "Status": "Status",
+        "Synced": "synchronisiert",
+        "NotSynced": "nicht synchronisiert",
+        "LocalTime": "Lokale Uhrzeit"
+    },
+    "mqttinfo": {
+        "MqttInformation": "MQTT Informationen",
+        "ConfigurationSummary": "@:ntpinfo.ConfigurationSummary",
+        "Status": "@:ntpinfo.Status",
+        "Enabled": "aktiv",
+        "Disabled": "nicht aktiv",
+        "Server": "@:ntpinfo.Server",
+        "Port": "Port",
+        "Username": "Benutzername",
+        "BaseTopic": "Basis Topic",
+        "PublishInterval": "Veröffentlichungsintervall",
+        "Seconds": "{sec} Sekunden",
+        "Retain": "Retain",
+        "Tls": "TLS",
+        "RootCertifcateInfo": "Root CA-Zertifikat-Informationen",
+        "HassSummary": "Home Assistant MQTT Auto Discovery Konfigurationszusammenfassung",
+        "Expire": "Ablaufen",
+        "IndividualPanels": "Einzelne Paneele",
+        "RuntimeSummary": "Laufzeitzusammenfassung",
+        "ConnectionStatus": "Verbindungsstatus",
+        "Connected": "verbunden",
+        "Disconnected": "getrennt"
+    },
+    "console": {
+        "Console": "Konsole",
+        "VirtualDebugConsole": "Virtuelle Debug Konsole",
+        "EnableAutoScroll": "Automatisches Scrollen aktivieren",
+        "ClearConsole": "Konsole löschen",
+        "CopyToClipboard": "In die Zwischenablage kopieren"
+    },
+    "inverterchannelinfo": {
+        "String": "String {num}",
+        "Phase": "Phase {num}",
+        "Property": "Eigenschaft",
+        "Value": "Wert",
+        "Unit": "Einheit"
+    },
+    "invertertotalinfo": {
+        "TotalYieldTotal": "Gesamtertrag Insgesamt",
+        "TotalYieldDay": "Täglicher Gesamtertrag",
+        "TotalPower": "Gesamtleistung"
+    },
+    "inverterchannelproperty": {
+        "Power": "Leistung",
+        "Voltage": "Spannung",
+        "Current": "Strom",
+        "Power DC": "Power DC",
+        "YieldDay": "Täglicher Ertrag",
+        "YieldTotal": "Gesamtertrag",
+        "Frequency": "Frequenz",
+        "Temperature": "Temperatur",
+        "PowerFactor": "Leistungsfaktor",
+        "ReactivePower": "Blindleistung",
+        "Efficiency": "Wirkungsgrad",
+        "Irradiation": "Einstrahlung"
+    },
+    "maintenancereboot": {
+        "DeviceReboot": "Gerät neu starten",
+        "PerformReboot": "Neustart durchführen",
+        "Reboot": "Neustarten!",
+        "Cancel": "Abbrechen",
+        "RebootOpenDTU": "OpenDTU neustarten",
+        "RebootQuestion": "Möchten Sie das Gerät wirklich neu starten?",
+        "RebootHint": "<b>Hinweis:</b> Ein manueller Neustart muss normalerweise nicht durchgeführt werden. OpenDTU führt jeden erforderlichen Neustart (z. B. nach einem Firmware-Update) automatisch durch. Einstellungen werden auch ohne Neustart übernommen. Wenn Sie aufgrund eines Fehlers einen Neustart durchführen müssen, denken Sie bitte daran, diesen unter <a href=\"https://github.com/tbnobody/OpenDTU/issues\" class=\"alert-link\" target=\"_blank\">https://github.com/tbnobody/OpenDTU/issues</a> zu melden."
+    },
+    "dtuadmin": {
+        "DtuSettings": "DTU Einstellungen",
+        "DtuConfiguration": "DTU Konfiguration",
+        "Serial": "Seriennummer:",
+        "SerialHint": "Sowohl der Wechselrichter als auch die DTU haben eine Seriennummer. Die DTU-Seriennummer wird beim ersten Start zufällig generiert und muss normalerweise nicht geändert werden.",
+        "PollInterval": "Abfrage Interval:",
+        "Seconds": "Sekunden",
+        "PaLevel": "Sendeleistung:",
+        "PaLevelHint": "Stellen Sie sicher, dass Ihre Stromversorgung stabil genug ist, bevor Sie die Sendeleistung erhöhen.",
+        "Save": "Speichern",
+        "Min": "Minimum (-18 dBm)",
+        "Low": "Niedrig (-12 dBm)",
+        "High": "Hoch (-6 dBm)",
+        "Max": "Maximum (0 dBm)"
+    },
+    "securityadmin": {
+        "SecuritySettings": "Sicherheitseinstellungen",
+        "AdminPassword": "Administrator Passwort",
+        "Password": "Passwort:",
+        "RepeatPassword": "Passwort wiederholen:",
+        "PasswordHint": "<b>Hinweis:</b> Das Administrator-Passwort wird für den Zugriff auf die Webschnittstelle (Benutzer 'admin'), aber auch für die Verbindung mit dem Gerät im AP-Modus verwendet. Es muss 8..64 Zeichen lang sein.",
+        "Permissions": "Berechtigungen",
+        "ReadOnly": "Nur-Lese-Zugriff auf die Weboberfläche zulassen",
+        "Save": "@:dtuadmin.Save"
+    },
+    "ntpadmin": {
+        "NtpSettings": "NTP Einstellungen",
+        "NtpConfiguration": "NTP Konfiguration",
+        "TimeServer": "Zeitserver:",
+        "TimeServerHint": "Der Standardwert ist in Ordnung, solange OpenDTU direkten Zugang zum Internet hat.",
+        "Timezone": "Zeitzone:",
+        "TimezoneConfig": "Zeitzonenkonfiguration:",
+        "Save": "@:dtuadmin.Save",
+        "ManualTimeSynchronization": "Manuelle Zeitsynchronization",
+        "CurrentOpenDtuTime": "Aktuelle OpenDTU Zeit:",
+        "CurrentLocalTime": "Aktuelle lokale Zeit:",
+        "SynchronizeTime": "Zeit synchronisieren",
+        "SynchronizeTimeHint": "<b>Hinweis:</b> Sie können die manuelle Zeitsynchronisation verwenden, um die aktuelle Zeit von OpenDTU einzustellen, wenn kein NTP-Server verfügbar ist. Beachten Sie aber, dass im Falle eines Stromausfalls die Zeit verloren geht. Beachten Sie auch, dass die Zeitgenauigkeit stark verzerrt wird, da sie nicht regelmäßig neu synchronisiert werden kann und der ESP32-Mikrocontroller nicht über eine Echtzeituhr verfügt."
+    },
+    "networkadmin": {
+        "NetworkSettings": "Netzwerk Einstellungen",
+        "WifiConfiguration": "WiFi Konfiguration",
+        "WifiSsid": "WiFi SSID:",
+        "WifiPassword": "WiFi Passwort:",
+        "Hostname": "Hostname:",
+        "HostnameHint": "<b>Hinweis:</b> Der Text <span class=\"font-monospace\">%06X</span> wird durch die letzten 6 Ziffern der ESP-ChipID im Hex-Format ersetzt.",
+        "EnableDhcp": "DHCP aktivieren",
+        "StaticIpConfiguration": "Statische IP Konfiguration",
+        "IpAddress": "IP Adresse:",
+        "Netmask": "Netzmaske:",
+        "DefaultGateway": "Standardgateway:",
+        "Dns": "DNS Server {num}:",
+        "Save": "@:dtuadmin.Save"
+    },
+    "mqttadmin": {
+        "MqttSettings": "MQTT Einstellungen",
+        "MqttConfiguration": "MQTT Konfiguration",
+        "EnableMqtt": "MQTT aktivieren",
+        "EnableHass": "Home Assistant MQTT Auto Discovery aktivieren",
+        "MqttBrokerParameter": "MQTT Broker Parameter",
+        "Hostname": "Hostname:",
+        "HostnameHint": "Hostname oder IP Adresse",
+        "Port": "Port:",
+        "Username": "Benutzername:",
+        "UsernameHint": "Benutzername, leer lassen für anonyme Verbindung",
+        "Password": "Passwort:",
+        "PasswordHint": "Passwort, leer lassen für anonyme Verbindung",
+        "BaseTopic": "Basis Topic:",
+        "BaseTopicHint": "Basis Topic, wird allen veröffentlichten Themen vorangestellt (z.B. inverter/)",
+        "PublishInterval": "Veröffentlichungsintervall:",
+        "Seconds": "Sekunden",
+        "EnableRetain": "Retain Flag aktivieren",
+        "EnableTls": "TLS aktivieren",
+        "RootCa": "CA-Root-Zertifikat (Standard Letsencrypt):",
+        "LwtParameters": "LWT Parameter",
+        "LwtTopic": "LWT Topic:",
+        "LwtTopicHint": "LWT Topic, wird der Basis Topic angehängt",
+        "LwtOnline": "LWT Online Nachricht:",
+        "LwtOnlineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU online ist",
+        "LwtOffline": "LWT Offline Nachricht:",
+        "LwtOfflineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU offline ist",
+        "HassParameters": "Home Assistant MQTT Auto Discovery Parameter",
+        "HassPrefixTopic": "Präfix Topic:",
+        "HassPrefixTopicHint": "The prefix for the discovery topic",
+        "HassRetain": "Retain Flag aktivieren",
+        "HassExpire": "Ablauffunktion aktivieren",
+        "HassIndividual": "Einzelne Paneele",
+        "Save": "@:dtuadmin.Save"
+    },
+    "inverteradmin": {
+        "InverterSettings": "Wechselrichter Einstellungen",
+        "AddInverter": "Neuen Wechselrichter hinzufügen",
+        "Serial": "Seriennummer",
+        "Name": "Name",
+        "Add": "Hinzufügen",
+        "AddHint": "<b>Hinweis:</b> Sie können zusätzliche Parameter einstellen, nachdem Sie den Wechselrichter erstellt haben. Verwenden Sie dazu das Stiftsymbol in der Wechselrichterliste.",
+        "InverterList": "Wechselrichterliste",
+        "Type": "Typ",
+        "Action": "Aktion",
+        "DeleteInverter": "Wechselrichter löschen",
+        "EditInverter": "Wechselrichter bearbeiten",
+        "InverterSerial": "Wechselrichter Seriennummer:",
+        "InverterName": "Wechselrichter Name:",
+        "InverterNameHint": "Hier kann ein eigener Namen für den Wechselrichter angeben werden.",
+        "StringName": "Name String {num}:",
+        "StringNameHint": "Hier kann ein eigener Name für den entsprechenden Port des Wechselrichters angegeben werden.",
+        "StringMaxPower": "Max. Leistung String {num}:",
+        "StringMaxPowerHint": "Eingabe der maximalen Leistung der angeschlossenen Solarmodule.",
+        "InverterHint": "*) Geben Sie die W<sub>p</sub> des Ports ein, um die Einstrahlung zu errechnen.",
+        "Cancel": "@:maintenancereboot.Cancel",
+        "Save": "@:dtuadmin.Save",
+        "DeleteMsg": "Soll der Wechselrichter \"{name}\" mit der Seriennummer {serial} wirklich gelöscht werden?",
+        "Delete": "Löschen"
+    },
+    "configadmin": {
+        "ConfigManagement": "Konfigurationsverwaltung",
+        "BackupHeader": "Sicherung: Sicherung der Konfigurationsdatei",
+        "BackupConfig": "Sicherung der Konfigurationsdatei",
+        "Backup": "Sichern",
+        "RestoreHeader": "Wiederherstellen: Wiederherstellen der Konfigurationsdatei",
+        "Back": "Zurück",
+        "UploadSuccess": "Erfolgreich hochgeladen",
+        "RestoreHint": "<b>Hinweis:</b> Bei diesem Vorgang wird die Konfigurationsdatei durch die wiederhergestellte Konfiguration ersetzt und OpenDTU neu gestartet, um alle Einstellungen zu übernehmen.",
+        "ResetHeader": "Initialisieren: Werksreset durchführen",
+        "FactoryResetButton": "Werkseinstellungen wiederherstellen",
+        "ResetHint": "<b>Hinweis:</b> Klicken Sie auf Werkseinstellungen wiederherstellen, um die Werkseinstellungen wiederherzustellen und neu zu starten.",
+        "FactoryReset": "Werksreset",
+        "ResetMsg": "Sind Sie sicher, dass Sie die aktuelle Konfiguration löschen und alle Einstellungen auf die Werkseinstellungen zurücksetzen möchten?",
+        "ResetConfirm": "Werksreset!",
+        "Cancel": "@:maintenancereboot.Cancel"
+    },
+    "login": {
+        "Login": "Anmeldung",
+        "SystemLogin": "System Anmeldung",
+        "Username": "Benutzername",
+        "UsernameRequired": "Benutzername wird benötigt",
+        "Password": "Passwort",
+        "PasswordRequired": "Password wird benötigt",
+        "LoginButton": "Anmelden"
+    },
+    "firmwareupgrade": {
+        "FirmwareUpgrade": "Firmware Update",
+        "Loading": "@:base.Loading",
+        "OtaError": "OTA Fehler",
+        "Back": "Zurück",
+        "Retry": "Wiederholen",
+        "OtaStatus": "OTA Status",
+        "OtaSuccess": "OTA Erfolgreich. Das Gerät wurde automatisch neu gestartet und wird in wenigen Augenblicken wieder zur Verfügung stehen.",
+        "FirmwareUpload": "Firmware hochladen",
+        "UploadProgress": "Hochlade Fortschritt"
+    },
+    "about": {
+        "AboutOpendtu": "Über OpenDTU",
+        "ProjectOrigin": "Projekt Ursprung",
+        "ProjectOriginBody1": "Das Projekt wurde aus <a href=\"https://www.mikrocontroller.net/topic/525778\" target=\"_blank\">dieser Diskussion heraus gestartet. (Mikrocontroller.net)</a>",
+        "ProjectOriginBody2": "Das Hoymiles-Protokoll wurde durch die freiwilligen Bemühungen vieler Teilnehmer entschlüsselt. OpenDTU wurde unter anderem auf der Grundlage dieser Arbeit entwickelt. Das Projekt ist unter einer Open-Source-Lizenz lizenziert (<a href=\"https://www.gnu.de/documents/gpl-2.0.de.html\" target=\"_blank\">GNU General Public License version 2</a>).",
+        "ProjectOriginBody3": "Die Software wurde nach bestem Wissen und Gewissen entwickelt. Dennoch kann keine Haftung für eine Fehlfunktion oder einen Garantieverlust des Wechselrichters übernommen werden.",
+        "ProjectOriginBody4": "OpenDTU ist frei verfügbar. Wenn Sie Geld für die Software bezahlt haben, wurden Sie wahrscheinlich abgezockt.",
+        "NewsUpdates": "Neuigkeiten und Updates",
+        "NewsUpdatesBody": "Neue Updates sind auf Github zu finden: <a href=\"https://github.com/tbnobody/OpenDTU\" target=\"_blank\">https://github.com/tbnobody/OpenDTU</a>",
+        "ErrorReporting": "Fehlerberichte",
+        "ErrorReportingBody": "Bitte melden Sie Probleme über die von <a href=\"https://github.com/tbnobody/OpenDTU/issues\" target=\"_blank\">Github</a> bereitgestellte Funktion.",
+        "Discussion": "Diskussion",
+        "DiscussionBody": "Diskutieren Sie mit uns auf <a href=\"https://discord.gg/WzhxEY62mB\" target=\"_blank\">Discord</a> oder <a href=\"https://github.com/tbnobody/OpenDTU/discussions\" target=\"_blank\">Github</a>"
+    },
+    "hints": {
+        "RadioProblem": "Es konnte keine Verbindung zu einem korrekten NRF24L01+ Funkmodul hergestellt werden. Bitte überprüfen Sie die Verdrahtung.",
+        "TimeSync": "Die Uhr wurde noch nicht synchronisiert. Ohne eine korrekt eingestellte Uhr werden keine Anfragen an den Wechselrichter gesendet. Dies ist kurz nach dem Start normal. Nach einer längeren Laufzeit (>1 Minute) bedeutet es jedoch, dass der NTP-Server nicht erreichbar ist.",
+        "TimeSyncLink": "Bitte überprüfen Sie Ihre Zeiteinstellungen.",
+        "DefaultPassword": "Sie verwenden das Standardpasswort für die Weboberfläche und den Notfall Access Point. Dies ist potenziell unsicher.",
+        "DefaultPasswortLink": "Bitte ändern Sie das Passwort."
+    }
+}
\ No newline at end of file
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
new file mode 100644
index 00000000..f05cc318
--- /dev/null
+++ b/webapp/src/locales/en.json
@@ -0,0 +1,404 @@
+{
+    "menu": {
+        "LiveView": "Live View",
+        "Settings": "Settings",
+        "NetworkSettings": "Network Settings",
+        "NTPSettings": "NTP Settings",
+        "MQTTSettings": "MQTT Settings",
+        "InverterSettings": "Inverter Settings",
+        "SecuritySettings": "Security Settings",
+        "DTUSettings": "DTU Settings",
+        "ConfigManagement": "Config Management",
+        "FirmwareUpgrade": "Firmware Upgrade",
+        "DeviceReboot": "Device Reboot",
+        "Info": "Info",
+        "System": "System",
+        "Network": "Network",
+        "NTP": "NTP",
+        "MQTT": "MQTT",
+        "Console": "Console",
+        "About": "About",
+        "Logout": "Logout",
+        "Login": "Login"
+    },
+    "base": {
+        "Loading": "Loading..."
+    },
+    "home": {
+        "LiveData": "Live Data",
+        "SerialNumber": "Serial Number: ",
+        "CurrentLimit": "Current Limit: ",
+        "DataAge": "Data Age: ",
+        "Seconds": "seconds",
+        "ShowSetInverterLimit": "Show / Set Inverter Limit",
+        "TurnOnOff": "Turn Inverter on/off",
+        "ShowInverterInfo": "Show Inverter Info",
+        "ShowEventlog": "Show Eventlog",
+        "UnreadMessages": "unread messages",
+        "Loading": "@:base.Loading",
+        "EventLog": "Event Log",
+        "Close": "Close",
+        "InverterInfo": "Inverter Info",
+        "LimitSettings": "Limit Settings",
+        "LastLimitSetStatus": "Last Limit Set Status:",
+        "SetLimit": "Set Limit:",
+        "Relative": "Relative (%)",
+        "Absolute": "Absolute (W)",
+        "LimitHint": "<b>Hint:</b> If you set the limit as absolute value the display of the current value will only be updated after ~4 minutes.",
+        "SetPersistent": "Set Limit Persistent",
+        "SetNonPersistent": "Set Limit Non-Persistent",
+        "PowerSettings": "Power Settings",
+        "LastPowerSetStatus": "Last Power Set Status:",
+        "TurnOn": "Turn On",
+        "TurnOff": "Turn Off",
+        "Restart": "Restart"
+    },
+    "eventlog": {
+        "Start": "Start",
+        "Stop": "Stop",
+        "Id": "ID",
+        "Message": "Message"
+    },
+    "devinfo": {
+        "NoInfo": "No Information available",
+        "NoInfoLong": "Did not receive any valid data from the inverter till now. Still trying...",
+        "UnknownModel": "Unknown model! Please report the \"Hardware Part Number\" and model (e.g. HM-350) as an issue <a href=\"https://github.com/tbnobody/OpenDTU/issues\" target=\"_blank\">here</a>.",
+        "Model": "Model",
+        "DetectedMaxPower": "Detected max. Power",
+        "BootloaderVersion": "Bootloader Version",
+        "FirmwareVersion": "Firmware Version",
+        "FirmwareBuildDate": "Firmware Build Date",
+        "HardwarePartNumber": "Hardware Part Number",
+        "HardwareVersion": "Hardware Version"
+    },
+    "systeminfo": {
+        "SystemInfo": "System Info",
+        "VersionError": "Error fetching version information",
+        "VersionNew": "New version available! Show changes!",
+        "VersionOk": "Up to date!"
+    },
+    "firmwareinfo": {
+        "FirmwareInformation": "Firmware Information",
+        "Hostname": "Hostname",
+        "SdkVersion": "SDK Version",
+        "ConfigVersion": "Config Version",
+        "FirmwareVersion": "Firmware Version / Git Hash",
+        "FirmwareVersionHint": "Click here to show information about your current version",
+        "FirmwareUpdate": "Firmware Update",
+        "FirmwareUpdateHint": "Click here to view the changes between your version and the latest version",
+        "ResetReason0": "Reset Reason CPU 0",
+        "ResetReason1": "Reset Reason CPU 1",
+        "ConfigSaveCount": "Config save count",
+        "Uptime": "Uptime"
+    },
+    "hardwareinfo": {
+        "HardwareInformation": "Hardware Information",
+        "ChipModel": "Chip Model",
+        "ChipRevision": "Chip Revision",
+        "ChipCores": "Chip Cores",
+        "CpuFrequency": "CPU Frequency",
+        "Mhz": "MHz"
+    },
+    "memoryinfo": {
+        "MemoryInformation": "Memory Information",
+        "Type": "Type",
+        "Usage": "Usage",
+        "Free": "Free",
+        "Used": "Used",
+        "Size": "Size",
+        "Heap": "Heap",
+        "LittleFs": "LittleFs",
+        "Sketch": "Sketch"
+    },
+    "radioinfo": {
+        "RadioInformation": "Radio Information",
+        "ChipStatus": "Chip Status",
+        "ChipType": "Chip Type",
+        "Connected": "connected",
+        "NotConnected": "not connected",
+        "Unknown": "Unknown"
+    },
+    "networkinfo": {
+        "NetworkInformation": "Network Information"
+    },
+    "wifistationinfo": {
+        "WifiStationInfo": "WiFi Information (Station)",
+        "Status": "Status",
+        "Enabled": "enabled",
+        "Disabled": "disabled",
+        "Ssid": "SSID",
+        "Quality": "Quality",
+        "Rssi": "RSSI"
+    },
+    "wifiapinfo": {
+        "WifiApInfo": "WiFi Information (Access Point)",
+        "Status": "@:wifistationinfo.Status",
+        "Enabled": "@:wifistationinfo.Enabled",
+        "Disabled": "@:wifistationinfo.Disabled",
+        "Ssid": "@:wifistationinfo.Ssid",
+        "Stations": "# Stations"
+    },
+    "interfacenetworkinfo": {
+        "NetworkInterface": "Network Interface ({iface})",
+        "Hostname": "@:firmwareinfo.Hostname",
+        "IpAddress": "IP Address",
+        "Netmask": "Netmask",
+        "DefaultGateway": "Default Gateway",
+        "Dns": "DNS {num}",
+        "MacAddress": "MAC Address"
+    },
+    "interfaceapinfo": {
+        "NetworkInterface": "Network Interface (Access Point)",
+        "IpAddress": "@:interfacenetworkinfo.IpAddress",
+        "MacAddress": "@:interfacenetworkinfo.MacAddress"
+    },
+    "ntpinfo": {
+        "NtpInformation": "NTP Information",
+        "ConfigurationSummary": "Configuration Summary",
+        "Server": "Server",
+        "Timezone": "Timezone",
+        "TimezoneDescription": "Timezone Description",
+        "CurrentTime": "Current Time",
+        "Status": "Status",
+        "Synced": "synced",
+        "NotSynced": "not synced",
+        "LocalTime": "Local Time"
+    },
+    "mqttinfo": {
+        "MqttInformation": "MQTT Information",
+        "ConfigurationSummary": "@:ntpinfo.ConfigurationSummary",
+        "Status": "@:ntpinfo.Status",
+        "Enabled": "Enabled",
+        "Disabled": "Disabled",
+        "Server": "@:ntpinfo.Server",
+        "Port": "Port",
+        "Username": "Username",
+        "BaseTopic": "Base Topic",
+        "PublishInterval": "Publish Interval",
+        "Seconds": "{sec} seconds",
+        "Retain": "Retain",
+        "Tls": "TLS",
+        "RootCertifcateInfo": "Root CA Certifcate Info",
+        "HassSummary": "Home Assistant MQTT Auto Discovery Configuration Summary",
+        "Expire": "Expire",
+        "IndividualPanels": "Individual Panels",
+        "RuntimeSummary": "Runtime Summary",
+        "ConnectionStatus": "Connection Status",
+        "Connected": "connected",
+        "Disconnected": "disconnected"
+    },
+    "console": {
+        "Console": "Console",
+        "VirtualDebugConsole": "Virtual Debug Console",
+        "EnableAutoScroll": "Enable Auto Scroll",
+        "ClearConsole": "Clear Console",
+        "CopyToClipboard": "Copy to clipboard"
+    },
+    "inverterchannelinfo": {
+        "String": "String {num}",
+        "Phase": "Phase {num}",
+        "Property": "Property",
+        "Value": "Value",
+        "Unit": "Unit"
+    },
+    "invertertotalinfo": {
+        "TotalYieldTotal": "Total Yield Total",
+        "TotalYieldDay": "Total Yield Day",
+        "TotalPower": "Total Power"
+    },
+    "inverterchannelproperty": {
+        "Power": "Power",
+        "Voltage": "Voltage",
+        "Current": "Current",
+        "Power DC": "Power DC",
+        "YieldDay": "YieldDay",
+        "YieldTotal": "YieldTotal",
+        "Frequency": "Frequency",
+        "Temperature": "Temperature",
+        "PowerFactor": "PowerFactor",
+        "ReactivePower": "ReactivePower",
+        "Efficiency": "Efficiency",
+        "Irradiation": "Irradiation"
+    },
+    "maintenancereboot": {
+        "DeviceReboot": "Device Reboot",
+        "PerformReboot": "Perform Reboot",
+        "Reboot": "Reboot!",
+        "Cancel": "Cancel",
+        "RebootOpenDTU": "Reboot OpenDTU",
+        "RebootQuestion": "Do you really want to reboot the device?",
+        "RebootHint": "<b>Note:</b> A manual reboot does not normally have to be performed. OpenDTU performs any required reboot (e.g. after a firmware update) automatically. Settings are also adopted without rebooting. If you need to reboot due to an error, please consider reporting it at <a href=\"https://github.com/tbnobody/OpenDTU/issues\" class=\"alert-link\" target=\"_blank\">https://github.com/tbnobody/OpenDTU/issues</a>."
+    },
+    "dtuadmin": {
+        "DtuSettings": "DTU Settings",
+        "DtuConfiguration": "DTU Configuration",
+        "Serial": "Serial:",
+        "SerialHint": "Both the inverter and the DTU have a serial number. The DTU serial number is randomly generated at the first start and does not normally need to be changed.",
+        "PollInterval": "Poll Interval:",
+        "Seconds": "Seconds",
+        "PaLevel": "PA Level:",
+        "PaLevelHint": "Make sure your power supply is stable enough before increasing the transmit power.",
+        "Save": "Save",
+        "Min": "Minimum (-18 dBm)",
+        "Low": "Low (-12 dBm)",
+        "High": "High (-6 dBm)",
+        "Max": "Maximum (0 dBm)"
+    },
+    "securityadmin": {
+        "SecuritySettings": "Security Settings",
+        "AdminPassword": "Admin password",
+        "Password": "Password:",
+        "RepeatPassword": "Repeat Password:",
+        "PasswordHint": "<b>Hint:</b> The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode. It must be 8..64 characters.",
+        "Permissions": "Permissions",
+        "ReadOnly": "Allow readonly access to web interface",
+        "Save": "@:dtuadmin.Save"
+    },
+    "ntpadmin": {
+        "NtpSettings": "NTP Settings",
+        "NtpConfiguration": "NTP Configuration",
+        "TimeServer": "Time Server:",
+        "TimeServerHint": "The default value is fine as long as OpenDTU has direct access to the internet.",
+        "Timezone": "Timezone:",
+        "TimezoneConfig": "Timezone Config:",
+        "Save": "@:dtuadmin.Save",
+        "ManualTimeSynchronization": "Manual Time Synchronization",
+        "CurrentOpenDtuTime": "Current OpenDTU Time:",
+        "CurrentLocalTime": "Current Local Time:",
+        "SynchronizeTime": "Synchronize Time",
+        "SynchronizeTimeHint": "<b>Hint:</b> You can use the manual time synchronization to set the current time of OpenDTU if no NTP server is available. But be aware, that in case of power cycle the time gets lost. Also note that time accuracy will be skewed badly, as it can not be resynchronised regularly and the ESP32 microcontroller does not have a real time clock."
+    },
+    "networkadmin": {
+        "NetworkSettings": "Network Settings",
+        "WifiConfiguration": "WiFi Configuration",
+        "WifiSsid": "WiFi SSID:",
+        "WifiPassword": "WiFi Password:",
+        "Hostname": "Hostname:",
+        "HostnameHint": "<b>Hint:</b> The text <span class=\"font-monospace\">%06X</span> will be replaced with the last 6 digits of the ESP ChipID in hex format.",
+        "EnableDhcp": "Enable DHCP",
+        "StaticIpConfiguration": "Static IP Configuration",
+        "IpAddress": "IP Address:",
+        "Netmask": "Netmask:",
+        "DefaultGateway": "Default Gateway:",
+        "Dns": "DNS Server {num}:",
+        "Save": "@:dtuadmin.Save"
+    },
+    "mqttadmin": {
+        "MqttSettings": "MQTT Settings",
+        "MqttConfiguration": "MQTT Configuration",
+        "EnableMqtt": "Enable MQTT",
+        "EnableHass": "Enable Home Assistant MQTT Auto Discovery",
+        "MqttBrokerParameter": "MQTT Broker Parameter",
+        "Hostname": "Hostname:",
+        "HostnameHint": "Hostname or IP address",
+        "Port": "Port:",
+        "Username": "Username:",
+        "UsernameHint": "Username, leave empty for anonymous connection",
+        "Password": "Password:",
+        "PasswordHint": "Password, leave empty for anonymous connection",
+        "BaseTopic": "Base Topic:",
+        "BaseTopicHint": "Base topic, will be prepend to all published topics (e.g. inverter/)",
+        "PublishInterval": "Publish Interval:",
+        "Seconds": "seconds",
+        "EnableRetain": "Enable Retain Flag",
+        "EnableTls": "Enable TLS",
+        "RootCa": "CA-Root-Certificate (default Letsencrypt):",
+        "LwtParameters": "LWT Parameters",
+        "LwtTopic": "LWT Topic:",
+        "LwtTopicHint": "LWT topic, will be append base topic",
+        "LwtOnline": "LWT Online message:",
+        "LwtOnlineHint": "Message that will be published to LWT topic when online",
+        "LwtOffline": "LWT Offline message:",
+        "LwtOfflineHint": "Message that will be published to LWT topic when offline",
+        "HassParameters": "Home Assistant MQTT Auto Discovery Parameters",
+        "HassPrefixTopic": "Prefix Topic:",
+        "HassPrefixTopicHint": "The prefix for the discovery topic",
+        "HassRetain": "Enable Retain Flag",
+        "HassExpire": "Enable Expiration",
+        "HassIndividual": "Individual Panels",
+        "Save": "@:dtuadmin.Save"
+    },
+    "inverteradmin": {
+        "InverterSettings": "Inverter Settings",
+        "AddInverter": "Add a new Inverter",
+        "Serial": "Serial",
+        "Name": "Name",
+        "Add": "Add",
+        "AddHint": "<b>Hint:</b> You can set additional parameters after you have created the inverter. Use the pen icon in the inverter list.",
+        "InverterList": "Inverter List",
+        "Type": "Type",
+        "Action": "Action",
+        "DeleteInverter": "Delete inverter",
+        "EditInverter": "Edit inverter",
+        "InverterSerial": "Inverter Serial:",
+        "InverterName": "Inverter Name:",
+        "InverterNameHint": "Here you can specify a custom name for your inverter.",
+        "StringName": "Name string {num}:",
+        "StringNameHint": "Here you can specify a custom name for the respective port of your inverter.",
+        "StringMaxPower": "Max power string {num}:",
+        "StringMaxPowerHint": "Enter the max power of the connected solar panels.",
+        "InverterHint": "*) Enter the W<sub>p</sub> of the channel to calculate irradiation.",
+        "Cancel": "@:maintenancereboot.Cancel",
+        "Save": "@:dtuadmin.Save",
+        "DeleteMsg": "Are you sure you want to delete the inverter \"{name}\" with serial number {serial}?",
+        "Delete": "Delete"
+    },
+    "configadmin": {
+        "ConfigManagement": "Config Management",
+        "BackupHeader": "Backup: Configuration File Backup",
+        "BackupConfig": "Backup the configuration file",
+        "Backup": "Backup",
+        "RestoreHeader": "Restore: Restore the Configuration File",
+        "Back": "Back",
+        "UploadSuccess": "Upload Success",
+        "RestoreHint": "<b>Note:</b> This operation replaces the configuration file with the restored configuration and restarts OpenDTU to apply all settings.",
+        "ResetHeader": "Initialize: Perform Factory Reset",
+        "FactoryResetButton": "Restore Factory-Default Settings",
+        "ResetHint": "<b>Note:</b> Click Restore Factory-Default Settings to restore and initialize the factory-default settings and reboot.",
+        "FactoryReset": "Factory Reset",
+        "ResetMsg": "Are you sure you want to delete the current configuration and reset all settings to their factory defaults?",
+        "ResetConfirm": "Factory Reset!",
+        "Cancel": "@:maintenancereboot.Cancel"
+    },
+    "login": {
+        "Login": "Login",
+        "SystemLogin": "System Login",
+        "Username": "Username",
+        "UsernameRequired": "Username is required",
+        "Password": "Password",
+        "PasswordRequired": "Password is required",
+        "LoginButton": "Login"
+    },
+    "firmwareupgrade": {
+        "FirmwareUpgrade": "Firmware Upgrade",
+        "Loading": "@:base.Loading",
+        "OtaError": "OTA Error",
+        "Back": "Back",
+        "Retry": "Retry",
+        "OtaStatus": "OTA Status",
+        "OtaSuccess": "OTA Success. The unit has been automatically restarted and will be available again in a few moments.",
+        "FirmwareUpload": "Firmware Upload",
+        "UploadProgress": "Upload Progress"
+    },
+    "about": {
+        "AboutOpendtu": "About OpenDTU",
+        "ProjectOrigin": "Project Origin",
+        "ProjectOriginBody1": "This project was started from <a href=\"https://www.mikrocontroller.net/topic/525778\" target=\"_blank\">this discussion. (Mikrocontroller.net)</a>",
+        "ProjectOriginBody2": "The Hoymiles protocol was decrypted through the voluntary efforts of many participants. OpenDTU, among others, was developed based on this work. The project is licensed under an Open Source License (<a href=\"https://www.gnu.de/documents/gpl-2.0.de.html\" target=\"_blank\">GNU General Public License version 2</a>).",
+        "ProjectOriginBody3": "The software was developed to the best of our knowledge and belief. Nevertheless, no liability can be accepted for a malfunction or guarantee loss of the inverter.",
+        "ProjectOriginBody4": "OpenDTU is freely available. If you paid money for the software, you probably got ripped off.",
+        "NewsUpdates": "News & Updates",
+        "NewsUpdatesBody": "New updates can be found on Github: <a href=\"https://github.com/tbnobody/OpenDTU\" target=\"_blank\">https://github.com/tbnobody/OpenDTU</a>",
+        "ErrorReporting": "Error Reporting",
+        "ErrorReportingBody": "Please report issues using the feature provided by <a href=\"https://github.com/tbnobody/OpenDTU/issues\" target=\"_blank\">Github</a>",
+        "Discussion": "Discussion",
+        "DiscussionBody": "Discuss with us on <a href=\"https://discord.gg/WzhxEY62mB\" target=\"_blank\">Discord</a> or <a href=\"https://github.com/tbnobody/OpenDTU/discussions\" target=\"_blank\">Github</a>"
+    },
+    "hints": {
+        "RadioProblem": "Could not connect to a correct NRF24L01+ radio module. Please check the wiring.",
+        "TimeSync": "The clock has not yet been synchronised. Without a correctly set clock, no requests are made to the inverter. This is normal shortly after the start. However, after a longer runtime (>1 minute), it indicates that the NTP server is not accessible.",
+        "TimeSyncLink": "Please check your time settings.",
+        "DefaultPassword": "You are using the default password for the web interface and the emergency access point. This is potentially insecure.",
+        "DefaultPasswortLink": "Please change the password."
+    }
+}
\ No newline at end of file
diff --git a/webapp/src/locales/index.ts b/webapp/src/locales/index.ts
new file mode 100644
index 00000000..7deaab54
--- /dev/null
+++ b/webapp/src/locales/index.ts
@@ -0,0 +1,19 @@
+import en from './en.json'
+import de from './de.json'
+
+export enum Locales {
+    EN = 'en',
+    DE = 'de',
+}
+
+export const LOCALES = [
+    { value: Locales.EN, caption: 'English' },
+    { value: Locales.DE, caption: 'Deutsch' }
+]
+
+export const messages = {
+  [Locales.EN]: en,
+  [Locales.DE]: de
+};
+
+export const defaultLocale = Locales.EN;
\ No newline at end of file
diff --git a/webapp/src/main.ts b/webapp/src/main.ts
index 154ee27d..232cb4bd 100644
--- a/webapp/src/main.ts
+++ b/webapp/src/main.ts
@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import { messages, defaultLocale } from './locales'
 import App from './App.vue'
 import router from './router'
 import mitt from 'mitt';
@@ -14,6 +16,15 @@ app.config.globalProperties.$emitter = emitter;
 
 app.directive('tooltip', tooltip)
 
+const i18n = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: navigator.language.split('-')[0],
+    fallbackLocale: defaultLocale,
+    messages
+})
+
 app.use(router)
+app.use(i18n)
 
 app.mount('#app')
diff --git a/webapp/src/views/AboutView.vue b/webapp/src/views/AboutView.vue
index 91786754..61fcef41 100644
--- a/webapp/src/views/AboutView.vue
+++ b/webapp/src/views/AboutView.vue
@@ -1,5 +1,5 @@
 <template>
-    <BasePage :title="'About OpenDTU'">
+    <BasePage :title="$t('about.AboutOpendtu')">
         <div class="accordion" id="accordionExample">
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingOne">
@@ -7,33 +7,16 @@
                         data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                         <span class="badge text-bg-secondary">
                             <BIconInfoCircle class="fs-4" />
-                        </span>&nbsp;Project Origin
+                        </span>&nbsp;{{ $t('about.ProjectOrigin') }}
                     </button>
                 </h2>
                 <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                     data-bs-parent="#accordionExample">
                     <div class="accordion-body">
-                        <p class="fw-normal">
-                            This project was started from
-                            <a href="https://www.mikrocontroller.net/topic/525778" target="_blank">this discussion.
-                                (Mikrocontroller.net)</a>
-                        </p>
-                        <p class="fw-normal">
-                            The Hoymiles protocol was decrypted through the voluntary efforts of many participants.
-                            OpenDTU,
-                            among others, was developed based on this work. The project is licensed under an Open Source
-                            License (<a href="https://www.gnu.de/documents/gpl-2.0.de.html" target="_blank">GNU General
-                                Public License version 2</a>).
-                        </p>
-                        <p class="fw-normal">
-                            The software was developed to the best of our knowledge and belief. Nevertheless, no
-                            liability
-                            can be accepted for a malfunction or guarantee loss of the inverter.
-                        </p>
-                        <p class="fw-normal">
-                            OpenDTU is freely available. If you paid money for the software, you probably got ripped
-                            off.
-                        </p>
+                        <p class="fw-normal" v-html="$t('about.ProjectOriginBody1')"></p>
+                        <p class="fw-normal" v-html="$t('about.ProjectOriginBody2')"></p>
+                        <p class="fw-normal" v-html="$t('about.ProjectOriginBody3')"></p>
+                        <p class="fw-normal" v-html="$t('about.ProjectOriginBody4')"></p>
                     </div>
                 </div>
             </div>
@@ -43,15 +26,12 @@
                         data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                         <span class="badge text-bg-secondary">
                             <BIconActivity class="fs-4" />
-                        </span>&nbsp;News &amp; Updates
+                        </span>&nbsp;{{ $t('about.NewsUpdates') }}
                     </button>
                 </h2>
                 <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                     data-bs-parent="#accordionExample">
-                    <div class="accordion-body">
-                        New updates can be found on Github: <a href="https://github.com/tbnobody/OpenDTU"
-                            target="_blank">https://github.com/tbnobody/OpenDTU</a>
-                    </div>
+                    <div class="accordion-body" v-html="$t('about.NewsUpdatesBody')"></div>
                 </div>
             </div>
             <div class="accordion-item">
@@ -60,15 +40,12 @@
                         data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                         <span class="badge text-bg-secondary">
                             <BIconBug class="fs-4" />
-                        </span>&nbsp;Error Reporting
+                        </span>&nbsp;{{ $t('about.ErrorReporting') }}
                     </button>
                 </h2>
                 <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                     data-bs-parent="#accordionExample">
-                    <div class="accordion-body">
-                        Please report issues using the feature provided by <a
-                            href="https://github.com/tbnobody/OpenDTU/issues" target="_blank">Github</a>
-                    </div>
+                    <div class="accordion-body" v-html="$t('about.ErrorReportingBody')"></div>
                 </div>
             </div>
             <div class="accordion-item">
@@ -77,15 +54,12 @@
                         data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                         <span class="badge text-bg-secondary">
                             <BIconChat class="fs-4" />
-                        </span>&nbsp;Discussion
+                        </span>&nbsp;{{ $t('about.Discussion') }}
                     </button>
                 </h2>
                 <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                     data-bs-parent="#accordionExample">
-                    <div class="accordion-body">
-                        Discuss with us on <a href="https://discord.gg/WzhxEY62mB" target="_blank">Discord</a> or <a
-                            href="https://github.com/tbnobody/OpenDTU/discussions" target="_blank">Github</a>
-                    </div>
+                    <div class="accordion-body" v-html="$t('about.DiscussionBody')"></div>
                 </div>
             </div>
 
diff --git a/webapp/src/views/ConfigAdminView.vue b/webapp/src/views/ConfigAdminView.vue
index ce132bf2..f9641f8b 100644
--- a/webapp/src/views/ConfigAdminView.vue
+++ b/webapp/src/views/ConfigAdminView.vue
@@ -1,20 +1,20 @@
 <template>
-    <BasePage :title="'Config Management'" :isLoading="loading">
+    <BasePage :title="$t('configadmin.ConfigManagement')" :isLoading="loading">
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
         <div class="card">
-            <div class="card-header text-bg-primary">Backup: Configuration File Backup</div>
+            <div class="card-header text-bg-primary">{{ $t('configadmin.BackupHeader') }}</div>
             <div class="card-body text-center">
-                Backup the configuration file
-                <button class="btn btn-primary" @click="downloadConfig">Backup
+                {{ $t('configadmin.BackupConfig') }}
+                <button class="btn btn-primary" @click="downloadConfig">{{ $t('configadmin.Backup') }}
                 </button>
             </div>
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-bg-primary">Restore: Restore the Configuration File</div>
+            <div class="card-header text-bg-primary">{{ $t('configadmin.RestoreHeader') }}</div>
             <div class="card-body text-center">
 
                 <div v-if="!uploading && UploadError != ''">
@@ -27,7 +27,7 @@
                     <br />
                     <br />
                     <button class="btn btn-light" @click="clear">
-                        <BIconArrowLeft /> Back
+                        <BIconArrowLeft /> {{ $t('configadmin.Back') }}
                     </button>
                 </div>
 
@@ -35,11 +35,11 @@
                     <span class="h1 mb-2">
                         <BIconCheckCircle />
                     </span>
-                    <span> Upload Success </span>
+                    <span> {{ $t('configadmin.UploadSuccess') }} </span>
                     <br />
                     <br />
                     <button class="btn btn-primary" @click="clear">
-                        <BIconArrowLeft /> Back
+                        <BIconArrowLeft /> {{ $t('configadmin.Back') }}
                     </button>
                 </div>
 
@@ -58,24 +58,18 @@
                     </div>
                 </div>
 
-                <div class="alert alert-danger mt-3" role="alert">
-                    <b>Note:</b> This operation replaces the configuration file with the restored configuration and
-                    restarts OpenDTU to apply all settings.
-                </div>
+                <div class="alert alert-danger mt-3" role="alert" v-html="$t('configadmin.RestoreHint')"></div>
             </div>
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-bg-primary">Initialize: Perform Factory Reset</div>
+            <div class="card-header text-bg-primary">{{ $t('configadmin.ResetHeader') }}</div>
             <div class="card-body text-center">
 
-                <button class="btn btn-danger" @click="onFactoryResetModal">Restore Factory-Default Settings
+                <button class="btn btn-danger" @click="onFactoryResetModal">{{ $t('configadmin.FactoryResetButton') }}
                 </button>
 
-                <div class="alert alert-danger mt-3" role="alert">
-                    <b>Note:</b> Click Restore Factory-Default Settings to restore and initialize the
-                    factory-default settings and reboot.
-                </div>
+                <div class="alert alert-danger mt-3" role="alert" v-html="$t('configadmin.ResetHint')"></div>
             </div>
         </div>
     </BasePage>
@@ -84,18 +78,18 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Factory Reset</h5>
+                    <h5 class="modal-title">{{ $t('configadmin.FactoryReset') }}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    Are you sure you want to delete the current configuration and reset all settings to their
-                    factory defaults?
+                    {{ $t('configadmin.ResetMsg') }}
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" @click="onFactoryResetCancel"
-                        data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-danger" @click="onFactoryResetPerform">Factory
-                        Reset!</button>
+                        data-bs-dismiss="modal">{{ $t('configadmin.Cancel') }}</button>
+                    <button type="button" class="btn btn-danger" @click="onFactoryResetPerform">
+                        {{ $t('configadmin.ResetConfirm') }}
+                    </button>
                 </div>
             </div>
         </div>
diff --git a/webapp/src/views/ConsoleInfoView.vue b/webapp/src/views/ConsoleInfoView.vue
index 1de5f314..fdea7336 100644
--- a/webapp/src/views/ConsoleInfoView.vue
+++ b/webapp/src/views/ConsoleInfoView.vue
@@ -1,20 +1,24 @@
 <template>
-    <BasePage :title="'Console'" :isLoading="dataLoading">
+    <BasePage :title="$t('console.Console')" :isLoading="dataLoading">
         <div class="card">
-            <div class="card-header text-bg-primary">Virtual debug console</div>
+            <div class="card-header text-bg-primary">{{ $t('console.VirtualDebugConsole') }}</div>
             <div class="card-body">
                 <div class="row g-3 align-items-center">
                     <div class="col">
                         <div class="form-check form-switch">
                             <input class="form-check-input" type="checkbox" role="switch" id="autoScroll"
                                 v-model="isAutoScroll">
-                            <label class="form-check-label" for="autoScroll">Enable Auto Scroll</label>
+                            <label class="form-check-label" for="autoScroll">
+                                {{ $t('console.EnableAutoScroll') }}
+                            </label>
                         </div>
                     </div>
                     <div class="col text-end">
                         <div class="btn-group" role="group">
-                            <button type="button" class="btn btn-primary" :onClick="clearConsole">Clear Console</button>
-                            <button type="button" class="btn btn-secondary" :onClick="copyConsole">Copy to clipboard</button>
+                            <button type="button" class="btn btn-primary" :onClick="clearConsole">
+                                {{ $t('console.ClearConsole') }}</button>
+                            <button type="button" class="btn btn-secondary" :onClick="copyConsole">
+                                {{ $t('console.CopyToClipboard') }}</button>
                         </div>
                     </div>
                 </div>
diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
index 2ad263fa..1ecfb333 100644
--- a/webapp/src/views/DtuAdminView.vue
+++ b/webapp/src/views/DtuAdminView.vue
@@ -1,42 +1,43 @@
 <template>
-    <BasePage :title="'DTU Settings'" :isLoading="dataLoading">
+    <BasePage :title="$t('dtuadmin.DtuSettings')" :isLoading="dataLoading">
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
         <form @submit="saveDtuConfig">
             <div class="card">
-                <div class="card-header text-bg-primary">DTU Configuration</div>
+                <div class="card-header text-bg-primary">{{ $t('dtuadmin.DtuConfiguration') }}</div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label for="inputDtuSerial" class="col-sm-2 col-form-label">Serial:
-                            <BIconInfoCircle v-tooltip title="Both the inverter and the DTU have a serial number. 
-                                The DTU serial number is randomly generated at the first start and does not 
-                                normally need to be changed." />
-
+                        <label for="inputDtuSerial" class="col-sm-2 col-form-label">{{ $t('dtuadmin.Serial') }}
+                            <BIconInfoCircle v-tooltip :title="$t('dtuadmin.SerialHint')" />
                         </label>
                         <div class="col-sm-10">
                             <input type="number" class="form-control" id="inputDtuSerial" min="1" max="199999999999"
-                                placeholder="DTU Serial" v-model="dtuConfigList.dtu_serial" />
+                                v-model="dtuConfigList.dtu_serial" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputPollInterval" class="col-sm-2 col-form-label">Poll Interval:</label>
+                        <label for="inputPollInterval" class="col-sm-2 col-form-label">
+                            {{ $t('dtuadmin.PollInterval') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="input-group">
                                 <input type="number" class="form-control" id="inputPollInterval" min="1" max="86400"
-                                    placeholder="Poll Interval in Seconds" v-model="dtuConfigList.dtu_pollinterval"
+                                    v-model="dtuConfigList.dtu_pollinterval"
                                     aria-describedby="pollIntervalDescription" />
-                                <span class="input-group-text" id="pollIntervalDescription">seconds</span>
+                                <span class="input-group-text" id="pollIntervalDescription">
+                                    {{ $t('dtuadmin.Seconds') }}
+                                </span>
                             </div>
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputTimezone" class="col-sm-2 col-form-label">PA Level:
-                            <BIconInfoCircle v-tooltip
-                                title="Make sure your power supply is stable enough before increasing the transmit power." />
+                        <label for="inputTimezone" class="col-sm-2 col-form-label">
+                            {{ $t('dtuadmin.PaLevel') }}
+                            <BIconInfoCircle v-tooltip :title="$t('dtuadmin.PaLevelHint')" />
                         </label>
                         <div class="col-sm-10">
                             <select class="form-select" v-model="dtuConfigList.dtu_palevel">
@@ -48,7 +49,7 @@
                     </div>
                 </div>
             </div>
-            <button type="submit" class="btn btn-primary mb-3">Save</button>
+            <button type="submit" class="btn btn-primary mb-3">{{ $t('dtuadmin.Save') }}</button>
         </form>
     </BasePage>
 </template>
@@ -74,10 +75,10 @@ export default defineComponent({
             dataLoading: true,
             dtuConfigList: {} as DtuConfig,
             palevelList: [
-                { key: 0, value: "Minimum (-18 dBm)" },
-                { key: 1, value: "Low (-12 dBm)" },
-                { key: 2, value: "High (-6 dBm)" },
-                { key: 3, value: "Maximum (0 dBm)" },
+                { key: 0, value: this.$t('dtuadmin.Min') },
+                { key: 1, value: this.$t('dtuadmin.Low') },
+                { key: 2, value: this.$t('dtuadmin.High') },
+                { key: 3, value: this.$t('dtuadmin.Max') },
             ],
             alertMessage: "",
             alertType: "info",
diff --git a/webapp/src/views/FirmwareUpgradeView.vue b/webapp/src/views/FirmwareUpgradeView.vue
index aed73036..479bb61c 100644
--- a/webapp/src/views/FirmwareUpgradeView.vue
+++ b/webapp/src/views/FirmwareUpgradeView.vue
@@ -1,15 +1,15 @@
 <template>
-    <BasePage :title="'Firmware Upgrade'">
+    <BasePage :title="$t('firmwareupgrade.FirmwareUpgrade')">
         <div class="position-relative" v-if="loading">
             <div class="position-absolute top-50 start-50 translate-middle">
                 <div class="spinner-border" role="status">
-                    <span class="visually-hidden">Loading...</span>
+                    <span class="visually-hidden">{{ $t('firmwareupgrade.Loading') }}</span>
                 </div>
             </div>
         </div>
 
         <div v-if="!loading && !uploading && OTAError != ''" class="card">
-            <div class="card-header text-bg-danger">OTA Error</div>
+            <div class="card-header text-bg-danger">{{ $t('firmwareupgrade.OtaError') }}</div>
             <div class="card-body text-center">
                 <p class="h1 mb-2">
                     <BIconExclamationCircleFill />
@@ -21,31 +21,31 @@
                 <br />
                 <br />
                 <button class="btn btn-light" @click="clear">
-                    <BIconArrowLeft /> Back
+                    <BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}
                 </button>
                 <button class="btn btn-primary" @click="retryOTA">
-                    <BIconArrowRepeat /> Retry
+                    <BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }}
                 </button>
             </div>
         </div>
 
         <div v-else-if="!loading && !uploading && OTASuccess" class="card">
-            <div class="card-header text-bg-success">OTA Status</div>
+            <div class="card-header text-bg-success">{{ $t('firmwareupgrade.OtaStatus') }}</div>
             <div class="card-body text-center">
                 <span class="h1 mb-2">
                     <BIconCheckCircle />
                 </span>
-                <span> OTA Success. The unit has been automatically restarted and will be available again in a few moments. </span>
+                <span> {{ $t('firmwareupgrade.OtaSuccess') }} </span>
                 <br />
                 <br />
                 <button class="btn btn-primary" @click="clear">
-                    <BIconArrowLeft /> Back
+                    <BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}
                 </button>
             </div>
         </div>
 
         <div v-else-if="!loading && !uploading" class="card">
-            <div class="card-header text-bg-primary">Firmware Upload</div>
+            <div class="card-header text-bg-primary">{{ $t('firmwareupgrade.FirmwareUpload') }}</div>
             <div class="card-body text-center">
                 <div class="form-group pt-2 mt-3">
                     <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
@@ -54,7 +54,7 @@
         </div>
 
         <div v-else-if="!loading && uploading" class="card">
-            <div class="card-header text-bg-primary">Upload Progress</div>
+            <div class="card-header text-bg-primary">{{ $t('firmwareupgrade.UploadProgress') }}</div>
             <div class="card-body text-center">
                 <div class="progress">
                     <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index a6830429..4faaef66 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-    <BasePage :title="'Live Data'" :isLoading="dataLoading" :isWideScreen="true">
+    <BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true">
         <HintView :hints="liveData.hints" />
         <InverterTotalInfo :totalData="liveData.total" /><br />
         <div class="row gy-3">
@@ -37,15 +37,15 @@
                                         {{ inverter.name }}
                                     </div>
                                     <div style="padding-right: 2em;">
-                                        Serial Number: {{ inverter.serial }}
+                                        {{ $t('home.SerialNumber') }}{{ inverter.serial }}
                                     </div>
                                     <div style="padding-right: 2em;">
-                                        Current Limit: <template v-if="inverter.limit_absolute > -1"> {{
+                                        {{ $t('home.CurrentLimit') }}<template v-if="inverter.limit_absolute > -1"> {{
                                                 formatNumber(inverter.limit_absolute, 0)
                                         }} W | </template>{{ formatNumber(inverter.limit_relative, 0) }} %
                                     </div>
                                     <div style="padding-right: 2em;">
-                                        Data Age: {{ inverter.data_age }} seconds
+                                        {{ $t('home.DataAge') }}{{ inverter.data_age }} {{ $t('home.Seconds') }}
                                         <template v-if="inverter.data_age > 300">
                                             / {{ calculateAbsoluteTime(inverter.data_age) }}
                                         </template>
@@ -55,7 +55,7 @@
                             <div class="btn-toolbar p-2" role="toolbar">
                                 <div class="btn-group me-2" role="group">
                                     <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowLimitSettings(inverter.serial)" v-tooltip title="Show / Set Inverter Limit">
+                                        @click="onShowLimitSettings(inverter.serial)" v-tooltip :title="$t('home.ShowSetInverterLimit')">
                                         <BIconSpeedometer style="font-size:24px;" />
 
                                     </button>
@@ -63,7 +63,7 @@
 
                                 <div class="btn-group me-2" role="group">
                                     <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowPowerSettings(inverter.serial)" v-tooltip title="Turn Inverter on/off">
+                                        @click="onShowPowerSettings(inverter.serial)" v-tooltip :title="$t('home.TurnOnOff')">
                                         <BIconPower style="font-size:24px;" />
 
                                     </button>
@@ -71,7 +71,7 @@
 
                                 <div class="btn-group me-2" role="group">
                                     <button type="button" class="btn btn-sm btn-info"
-                                        @click="onShowDevInfo(inverter.serial)" v-tooltip title="Show Inverter Info">
+                                        @click="onShowDevInfo(inverter.serial)" v-tooltip :title="$t('home.ShowInverterInfo')">
                                         <BIconCpu style="font-size:24px;" />
 
                                     </button>
@@ -80,12 +80,12 @@
                                 <div class="btn-group" role="group">
                                     <button v-if="inverter.events >= 0" type="button"
                                         class="btn btn-sm btn-secondary position-relative"
-                                        @click="onShowEventlog(inverter.serial)" v-tooltip title="Show Eventlog">
+                                        @click="onShowEventlog(inverter.serial)" v-tooltip :title="$t('home.ShowEventlog')">
                                         <BIconJournalText style="font-size:24px;" />
                                         <span
                                             class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
                                             {{ inverter.events }}
-                                            <span class="visually-hidden">unread messages</span>
+                                            <span class="visually-hidden">{{ $t('home.UnreadMessages') }}</span>
                                         </span>
                                     </button>
                                 </div>
@@ -111,13 +111,13 @@
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Event Log</h5>
+                    <h5 class="modal-title">{{ $t('home.EventLog') }}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <div class="text-center" v-if="eventLogLoading">
                         <div class="spinner-border" role="status">
-                            <span class="visually-hidden">Loading...</span>
+                            <span class="visually-hidden">{{ $t('home.Loading') }}</span>
                         </div>
                     </div>
 
@@ -126,7 +126,7 @@
 
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" @click="onHideEventlog"
-                        data-bs-dismiss="modal">Close</button>
+                        data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
                 </div>
 
             </div>
@@ -137,13 +137,13 @@
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Inverter Info</h5>
+                    <h5 class="modal-title">{{ $t('home.InverterInfo') }}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <div class="text-center" v-if="devInfoLoading">
                         <div class="spinner-border" role="status">
-                            <span class="visually-hidden">Loading...</span>
+                            <span class="visually-hidden">{{ $t('home.Loading') }}</span>
                         </div>
                     </div>
 
@@ -152,7 +152,7 @@
 
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" @click="onHideDevInfo"
-                        data-bs-dismiss="modal">Close</button>
+                        data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
                 </div>
             </div>
         </div>
@@ -163,7 +163,7 @@
             <div class="modal-content">
                 <form @submit="onSubmitLimit">
                     <div class="modal-header">
-                        <h5 class="modal-title">Limit Settings</h5>
+                        <h5 class="modal-title">{{ $t('home.LimitSettings') }}</h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
@@ -173,15 +173,14 @@
                         </BootstrapAlert>
                         <div class="text-center" v-if="limitSettingLoading">
                             <div class="spinner-border" role="status">
-                                <span class="visually-hidden">Loading...</span>
+                                <span class="visually-hidden">{{ $t('home.Loading') }}</span>
                             </div>
                         </div>
 
                         <template v-if="!limitSettingLoading">
 
                             <div class="row mb-3">
-                                <label for="inputCurrentLimit" class="col-sm-3 col-form-label">Current
-                                    Limit:</label>
+                                <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }} </label>
                                 <div class="col-sm-4">
                                     <div class="input-group">
                                         <input type="text" class="form-control" id="inputCurrentLimit"
@@ -202,8 +201,9 @@
                             </div>
 
                             <div class="row mb-3 align-items-center">
-                                <label for="inputLastLimitSet" class="col-sm-3 col-form-label">Last Limit Set
-                                    Status:</label>
+                                <label for="inputLastLimitSet" class="col-sm-3 col-form-label">
+                                    {{ $t('home.LastLimitSetStatus') }}
+                                </label>
                                 <div class="col-sm-9">
                                     <span class="badge" :class="{
                                         'text-bg-danger': currentLimitList.limit_set_status == 'Failure',
@@ -217,7 +217,7 @@
                             </div>
 
                             <div class="row mb-3">
-                                <label for="inputTargetLimit" class="col-sm-3 col-form-label">Set Limit:</label>
+                                <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit') }}</label>
                                 <div class="col-sm-9">
                                     <div class="input-group">
                                         <input type="number" name="inputTargetLimit" class="form-control"
@@ -227,16 +227,11 @@
                                             data-bs-toggle="dropdown" aria-expanded="false">{{ targetLimitTypeText
                                             }}</button>
                                         <ul class="dropdown-menu dropdown-menu-end">
-                                            <li><a class="dropdown-item" @click="onSelectType(1)" href="#">Relative
-                                                    (%)</a></li>
-                                            <li><a class="dropdown-item" @click="onSelectType(0)" href="#">Absolute
-                                                    (W)</a></li>
+                                            <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{ $t('home.Relative') }}</a></li>
+                                            <li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{ $t('home.Absolute') }}</a></li>
                                         </ul>
                                     </div>
-                                    <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert">
-                                        <b>Hint:</b> If you set the limit as absolute value the display of the
-                                        current value will only be updated after ~4 minutes.
-                                    </div>
+                                    <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert" v-html="$t('home.LimitHint')"></div>
                                 </div>
                             </div>
                         </template>
@@ -244,13 +239,11 @@
                     </div>
 
                     <div class="modal-footer">
-                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">Set Limit
-                            Persistent</button>
+                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">{{ $t('home.SetPersistent') }}</button>
 
-                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">Set Limit
-                            Non-Persistent</button>
+                        <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">{{ $t('home.SetNonPersistent') }}</button>
 
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
                     </div>
                 </form>
             </div>
@@ -261,7 +254,7 @@
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Power Settings</h5>
+                    <h5 class="modal-title">{{ $t('home.PowerSettings') }}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
@@ -271,14 +264,13 @@
                     </BootstrapAlert>
                     <div class="text-center" v-if="powerSettingLoading">
                         <div class="spinner-border" role="status">
-                            <span class="visually-hidden">Loading...</span>
+                            <span class="visually-hidden">{{ $t('home.Loading') }}</span>
                         </div>
                     </div>
 
                     <template v-if="!powerSettingLoading">
                         <div class="row mb-3 align-items-center">
-                            <label for="inputLastPowerSet" class="col col-form-label">Last Power Set
-                                Status:</label>
+                            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus') }}</label>
                             <div class="col">
                                 <span class="badge" :class="{
                                     'text-bg-danger': successCommandPower == 'Failure',
@@ -293,13 +285,13 @@
 
                         <div class="d-grid gap-2 col-6 mx-auto">
                             <button type="button" class="btn btn-success" @click="onSetPowerSettings(true)">
-                                <BIconToggleOn class="fs-4" />&nbsp;Turn On
+                                <BIconToggleOn class="fs-4" />&nbsp;{{ $t('home.TurnOn') }}
                             </button>
                             <button type="button" class="btn btn-danger" @click="onSetPowerSettings(false)">
-                                <BIconToggleOff class="fs-4" />&nbsp;Turn Off
+                                <BIconToggleOff class="fs-4" />&nbsp;{{ $t('home.TurnOff') }}
                             </button>
                             <button type="button" class="btn btn-warning" @click="onSetPowerSettings(true, true)">
-                                <BIconArrowCounterclockwise class="fs-4" />&nbsp;Restart
+                                <BIconArrowCounterclockwise class="fs-4" />&nbsp;{{ $t('home.Restart') }}
                             </button>
                         </div>
                     </template>
@@ -307,7 +299,7 @@
                 </div>
 
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close') }}</button>
                 </div>
             </div>
         </div>
@@ -390,7 +382,7 @@ export default defineComponent({
 
             targetLimitMin: 2,
             targetLimitMax: 100,
-            targetLimitTypeText: "Relative (%)",
+            targetLimitTypeText: this.$t('home.Relative'),
             targetLimitType: 1,
             targetLimitPersistent: false,
 
@@ -559,7 +551,7 @@ export default defineComponent({
             this.targetLimitList.serial = 0;
             this.targetLimitList.limit_value = 0;
             this.targetLimitType = 1;
-            this.targetLimitTypeText = "Relative (%)";
+            this.targetLimitTypeText = this.$t('home.Relative');
 
             this.limitSettingLoading = true;
             fetch("/api/limit/status", { headers: authHeader() })
@@ -604,11 +596,11 @@ export default defineComponent({
         },
         onSelectType(type: number) {
             if (type == 1) {
-                this.targetLimitTypeText = "Relative (%)";
+                this.targetLimitTypeText = this.$t('home.Relative');
                 this.targetLimitMin = 2;
                 this.targetLimitMax = 100;
             } else {
-                this.targetLimitTypeText = "Absolute (W)";
+                this.targetLimitTypeText = this.$t('home.Absolute');
                 this.targetLimitMin = 10;
                 this.targetLimitMax = (this.currentLimitList.max_power > 0 ? this.currentLimitList.max_power : 1500);
             }
diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index 77be97f0..68916129 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -1,45 +1,42 @@
 <template>
-    <BasePage :title="'Inverter Settings'" :isLoading="dataLoading">
+    <BasePage :title="$t('inverteradmin.InverterSettings')" :isLoading="dataLoading">
         <BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
             {{ alert.message }}
         </BootstrapAlert>
 
         <div class="card">
-            <div class="card-header text-bg-primary">Add a new Inverter</div>
+            <div class="card-header text-bg-primary">{{ $t('inverteradmin.AddInverter') }}</div>
             <div class="card-body">
                 <form class="form-inline" v-on:submit.prevent="onSubmit">
                     <div class="form-group">
-                        <label>Serial</label>
+                        <label>{{ $t('inverteradmin.Serial') }}</label>
                         <input v-model="newInverterData.serial" type="number" class="form-control ml-sm-2 mr-sm-4 my-2"
                             required />
                     </div>
                     <div class="form-group">
-                        <label>Name</label>
+                        <label>{{ $t('inverteradmin.Name') }}</label>
                         <input v-model="newInverterData.name" type="text" class="form-control ml-sm-2 mr-sm-4 my-2"
                             maxlength="31" required />
                     </div>
                     <div class="ml-auto text-right">
-                        <button type="submit" class="btn btn-primary my-2">Add</button>
-                    </div>
-                    <div class="alert alert-secondary" role="alert">
-                        <b>Hint:</b> You can set additional parameters after you have created the inverter. Use the pen
-                        icon in the inverter list.
+                        <button type="submit" class="btn btn-primary my-2">{{ $t('inverteradmin.Add') }}</button>
                     </div>
+                    <div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div>
                 </form>
             </div>
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-bg-primary">Inverter List</div>
+            <div class="card-header text-bg-primary">{{ $t('inverteradmin.InverterList') }}</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table">
                         <thead>
                             <tr>
-                                <th scope="col">Serial</th>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Action</th>
+                                <th scope="col">{{ $t('inverteradmin.Serial') }}</th>
+                                <th>{{ $t('inverteradmin.Name') }}</th>
+                                <th>{{ $t('inverteradmin.Type') }}</th>
+                                <th>{{ $t('inverteradmin.Action') }}</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -48,10 +45,10 @@
                                 <td>{{ inverter.name }}</td>
                                 <td>{{ inverter.type }}</td>
                                 <td>
-                                    <a href="#" class="icon text-danger" title="Delete inverter">
+                                    <a href="#" class="icon text-danger" :title="$t('inverteradmin.DeleteInverter')">
                                         <BIconTrash v-on:click="onOpenModal(modalDelete, inverter)" />
                                     </a>&nbsp;
-                                    <a href="#" class="icon" title="Edit inverter">
+                                    <a href="#" class="icon" :title="$t('inverteradmin.EditInverter')">
                                         <BIconPencil v-on:click="onOpenModal(modal, inverter)" />
                                     </a>
                                 </td>
@@ -67,18 +64,19 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Edit Inverter</h5>
+                    <h5 class="modal-title">{{ $t('inverteradmin.EditInverter') }}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <form>
                         <div class="mb-3">
-                            <label for="inverter-serial" class="col-form-label">Inverter Serial:</label>
+                            <label for="inverter-serial" class="col-form-label">
+                                {{ $t('inverteradmin.InverterSerial') }}
+                            </label>
                             <input v-model="selectedInverterData.serial" type="number" id="inverter-serial"
                                 class="form-control" />
-                            <label for="inverter-name" class="col-form-label">Inverter Name:
-                                <BIconInfoCircle v-tooltip
-                                    title="Here you can specify a custom name for your inverter." />
+                            <label for="inverter-name" class="col-form-label">{{ $t('inverteradmin.InverterName') }}
+                                <BIconInfoCircle v-tooltip :title="$t('inverteradmin.InverterNameHint')" />
                             </label>
                             <input v-model="selectedInverterData.name" type="text" id="inverter-name"
                                 class="form-control" maxlength="31" />
@@ -87,11 +85,9 @@
                         <div v-for="(max, index) in selectedInverterData.channel" :key="`${index}`">
                             <div class="row g-2">
                                 <div class="col-md">
-                                    <label :for="`inverter-name_${index}`" class="col-form-label">Name string {{ index
-                                            + 1
-                                    }}:
-                                        <BIconInfoCircle v-tooltip
-                                            title="Here you can specify a custom name for the respective port of your inverter." />
+                                    <label :for="`inverter-name_${index}`" class="col-form-label">
+                                        {{ $t('inverteradmin.StringName', { num: index + 1 }) }}
+                                        <BIconInfoCircle v-tooltip :title="$t('inverteradmin.StringNameHint')" />
                                     </label>
                                     <div class="d-flex mb-2">
                                         <div class="input-group">
@@ -101,10 +97,10 @@
                                     </div>
                                 </div>
                                 <div class="col-md-5">
-                                    <label :for="`inverter-max_${index}`" class="col-form-label">Max power string {{
-                                            index + 1
-                                    }}: <BIconInfoCircle v-tooltip
-                                            title="Enter the max power of the connected solar panels." /></label>
+                                    <label :for="`inverter-max_${index}`" class="col-form-label">
+                                        {{ $t('inverteradmin.StringMaxPower', { num: index + 1 }) }}
+                                        <BIconInfoCircle v-tooltip :title="$t('inverteradmin.StringMaxPowerHint')" />
+                                    </label>
                                     <div class="d-flex mb-2">
                                         <div class="input-group">
                                             <input type="number" class="form-control" :id="`inverter-max_${index}`"
@@ -117,16 +113,16 @@
                                 </div>
                             </div>
                         </div>
-                        <div :id="`inverter-customizer`" class="form-text">*) Enter the W<sub>p</sub> of the channel to
-                            calculate irradiation.</div>
+                        <div :id="`inverter-customizer`" class="form-text" v-html="$t('inverteradmin.InverterHint')">
+                        </div>
                     </form>
 
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" @click="onCloseModal(modal)"
-                        data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary" @click="onEditSubmit">Save
-                        changes</button>
+                        data-bs-dismiss="modal">{{ $t('inverteradmin.Cancel') }}</button>
+                    <button type="button" class="btn btn-primary" @click="onEditSubmit">
+                        {{ $t('inverteradmin.Save') }}</button>
                 </div>
             </div>
         </div>
@@ -136,17 +132,21 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Delete Inverter</h5>
+                    <h5 class="modal-title">{{ $t('inverteradmin.DeleteInverter') }}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    Are you sure you want to delete the inverter "{{ selectedInverterData.name }}" with serial number
-                    {{ selectedInverterData.serial }}?
+                    {{ $t('inverteradmin.DeleteMsg', {
+                            name: selectedInverterData.name,
+                            serial: selectedInverterData.serial
+                        })
+                    }}
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" @click="onCloseModal(modalDelete)"
-                        data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-danger" @click="onDelete">Delete</button>
+                        data-bs-dismiss="modal">{{ $t('inverteradmin.Cancel') }}</button>
+                    <button type="button" class="btn btn-danger" @click="onDelete">
+                        {{ $t('inverteradmin.Delete') }}</button>
                 </div>
             </div>
         </div>
diff --git a/webapp/src/views/LoginView.vue b/webapp/src/views/LoginView.vue
index faad63d1..65c8b0f4 100644
--- a/webapp/src/views/LoginView.vue
+++ b/webapp/src/views/LoginView.vue
@@ -1,28 +1,30 @@
 <template>
-    <BasePage :title="'Login'" :isLoading="dataLoading">
+    <BasePage :title="$t('login.Login')" :isLoading="dataLoading">
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
         <div class="card">
-            <div class="card-header text-bg-danger">System Login</div>
+            <div class="card-header text-bg-danger">{{ $t('login.SystemLogin') }}</div>
             <div class="card-body">
 
                 <form @submit.prevent="handleSubmit">
                     <div class="form-group">
-                        <label for="username">Username</label>
+                        <label for="username">{{ $t('login.Username') }}</label>
                         <input type="text" v-model="username" name="username" class="form-control"
                             :class="{ 'is-invalid': submitted && !username }" />
-                        <div v-show="submitted && !username" class="invalid-feedback">Username is required</div>
+                        <div v-show="submitted && !username" class="invalid-feedback">{{ $t('login.UsernameRequired') }}
+                        </div>
                     </div>
                     <div class="form-group">
-                        <label htmlFor="password">Password</label>
+                        <label htmlFor="password">{{ $t('login.Password') }}</label>
                         <input type="password" v-model="password" name="password" class="form-control"
                             :class="{ 'is-invalid': submitted && !password }" />
-                        <div v-show="submitted && !password" class="invalid-feedback">Password is required</div>
+                        <div v-show="submitted && !password" class="invalid-feedback">
+                            {{ $t('login.PasswordRequired') }}</div>
                     </div>
                     <div class="form-group">
-                        <button class="btn btn-primary" :disabled="dataLoading">Login</button>
+                        <button class="btn btn-primary" :disabled="dataLoading">{{ $t('login.LoginButton') }}</button>
                     </div>
                 </form>
             </div>
diff --git a/webapp/src/views/MaintenanceRebootView.vue b/webapp/src/views/MaintenanceRebootView.vue
index 75de8b0d..fc50eebb 100644
--- a/webapp/src/views/MaintenanceRebootView.vue
+++ b/webapp/src/views/MaintenanceRebootView.vue
@@ -1,23 +1,17 @@
 <template>
-    <BasePage :title="'Device Reboot'" :isLoading="dataLoading">
+    <BasePage :title="$t('maintenancereboot.DeviceReboot')" :isLoading="dataLoading">
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
         <div class="card mt-5">
-            <div class="card-header text-bg-primary">Perform Reboot</div>
+            <div class="card-header text-bg-primary">{{ $t('maintenancereboot.PerformReboot') }}</div>
             <div class="card-body text-center">
 
-                <button class="btn btn-danger" @click="onOpenModal(performReboot)">Reboot!
+                <button class="btn btn-danger" @click="onOpenModal(performReboot)">{{ $t('maintenancereboot.Reboot') }}
                 </button>
 
-                <div class="alert alert-danger mt-3" role="alert">
-                    <b>Note:</b> A manual reboot does not normally have to be performed. OpenDTU performs any required
-                    reboot (e.g. after a firmware update) automatically. Settings are also adopted without rebooting. If
-                    you need to reboot due to an error, please consider reporting it at <a
-                        href="https://github.com/tbnobody/OpenDTU/issues" class="alert-link"
-                        target="_blank">https://github.com/tbnobody/OpenDTU/issues</a>.
-                </div>
+                <div class="alert alert-danger mt-3" role="alert" v-html="$t('maintenancereboot.RebootHint')"></div>
             </div>
         </div>
     </BasePage>
@@ -26,16 +20,17 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title">Reboot OpenDTU</h5>
+                    <h5 class="modal-title">{{ $t('maintenancereboot.RebootOpenDTU') }}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    Do you really want to reboot the device?
+                    {{ $t('maintenancereboot.RebootQuestion') }}
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" @click="onCloseModal(performReboot)"
-                        data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-danger" @click="onReboot">Reboot</button>
+                        data-bs-dismiss="modal">{{ $t('maintenancereboot.Cancel') }}</button>
+                    <button type="button" class="btn btn-danger" @click="onReboot">
+                        {{ $t('maintenancereboot.Reboot') }}</button>
                 </div>
             </div>
         </div>
diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index b905aaff..d76040b9 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -1,15 +1,17 @@
 <template>
-    <BasePage :title="'MqTT Settings'" :isLoading="dataLoading">
+    <BasePage :title="$t('mqttadmin.MqttSettings')" :isLoading="dataLoading">
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
         <form @submit="saveMqttConfig">
             <div class="card">
-                <div class="card-header text-bg-primary">MqTT Configuration</div>
+                <div class="card-header text-bg-primary">{{ $t('mqttadmin.MqttConfiguration') }}</div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label class="col-sm-4 form-check-label" for="inputMqtt">Enable MqTT</label>
+                        <label class="col-sm-4 form-check-label" for="inputMqtt">
+                            {{ $t('mqttadmin.EnableMqtt') }}
+                        </label>
                         <div class="col-sm-8">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputMqtt"
@@ -19,8 +21,9 @@
                     </div>
 
                     <div class="row mb-3" v-show="mqttConfigList.mqtt_enabled">
-                        <label class="col-sm-4 form-check-label" for="inputMqttHass">Enable Home Assistant MQTT Auto
-                            Discovery</label>
+                        <label class="col-sm-4 form-check-label" for="inputMqttHass">
+                            {{ $t('mqttadmin.EnableHass') }}
+                        </label>
                         <div class="col-sm-8">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputMqttHass"
@@ -33,67 +36,78 @@
 
             <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
                 <div class="card-header text-bg-primary">
-                    MqTT Broker Parameter
+                    {{ $t('mqttadmin.MqttBrokerParameter') }}
                 </div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label for="inputHostname" class="col-sm-2 col-form-label">Hostname:</label>
+                        <label for="inputHostname" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.Hostname') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputHostname" maxlength="128"
-                                placeholder="Hostname or IP address" v-model="mqttConfigList.mqtt_hostname" />
+                                :placeholder="$t('mqttadmin.HostnameHint')" v-model="mqttConfigList.mqtt_hostname" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputPort" class="col-sm-2 col-form-label">Port:</label>
+                        <label for="inputPort" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.Port') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="number" class="form-control" id="inputPort" min="1" max="65535"
-                                placeholder="Port number" v-model="mqttConfigList.mqtt_port" />
+                                v-model="mqttConfigList.mqtt_port" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputUsername" class="col-sm-2 col-form-label">Username:</label>
+                        <label for="inputUsername" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.Username') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputUsername" maxlength="64"
-                                placeholder="Username, leave empty for anonymous connection"
-                                v-model="mqttConfigList.mqtt_username" />
+                                :placeholder="$t('mqttadmin.UsernameHint')" v-model="mqttConfigList.mqtt_username" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>
+                        <label for="inputPassword" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.Password') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="password" class="form-control" id="inputPassword" maxlength="64"
-                                placeholder="Password, leave empty for anonymous connection"
-                                v-model="mqttConfigList.mqtt_password" />
+                                :placeholder="$t('mqttadmin.PasswordHint')" v-model="mqttConfigList.mqtt_password" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputTopic" class="col-sm-2 col-form-label">Base Topic:</label>
+                        <label for="inputTopic" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.BaseTopic') }}</label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputTopic" maxlength="32"
-                                placeholder="Base topic, will be prepend to all published topics (e.g. inverter/)"
-                                v-model="mqttConfigList.mqtt_topic" />
+                                :placeholder="$t('mqttadmin.BaseTopicHint')" v-model="mqttConfigList.mqtt_topic" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputPublishInterval" class="col-sm-2 col-form-label">Publish Interval:</label>
+                        <label for="inputPublishInterval" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.PublishInterval') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="input-group">
                                 <input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400"
                                     placeholder="Publish Interval in Seconds"
                                     v-model="mqttConfigList.mqtt_publish_interval"
                                     aria-describedby="publishIntervalDescription" />
-                                <span class="input-group-text" id="publishIntervalDescription">seconds</span>
+                                <span class="input-group-text" id="publishIntervalDescription">
+                                    {{ $t('mqttadmin.Seconds') }}</span>
                             </div>
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputRetain">Enable Retain Flag</label>
+                        <label class="col-sm-2 form-check-label" for="inputRetain">
+                            {{ $t('mqttadmin.EnableRetain') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputRetain"
@@ -103,7 +117,9 @@
                     </div>
 
                     <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputTls">Enable TLS</label>
+                        <label class="col-sm-2 form-check-label" for="inputTls">
+                            {{ $t('mqttadmin.EnableTls') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputTls"
@@ -113,13 +129,13 @@
                     </div>
 
                     <div class="row mb-3" v-show="mqttConfigList.mqtt_tls">
-                        <label for="inputCert" class="col-sm-2 col-form-label">CA-Root-Certificate (default
-                            Letsencrypt):</label>
+                        <label for="inputCert" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.RootCa') }}
+                        </label>
                         <div class="col-sm-10">
                             <textarea class="form-control" id="inputCert" maxlength="2048" rows="10"
-                                placeholder="Root CA Certificate from Letsencrypt"
                                 v-model="mqttConfigList.mqtt_root_ca_cert">
-                                </textarea>
+                            </textarea>
                         </div>
                     </div>
 
@@ -127,36 +143,41 @@
             </div>
 
             <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
-                <div class="card-header text-bg-primary">LWT Parameters</div>
+                <div class="card-header text-bg-primary">{{ $t('mqttadmin.LwtParameters') }}</div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label for="inputLwtTopic" class="col-sm-2 col-form-label">LWT Topic:</label>
+                        <label for="inputLwtTopic" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.LwtTopic') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="input-group">
-                                <span class="input-group-text" id="basic-addon3">{{
-                                mqttConfigList.mqtt_topic
-                                }}</span>
+                                <span class="input-group-text" id="basic-addon3">
+                                    {{ mqttConfigList.mqtt_topic }}
+                                </span>
                                 <input type="text" class="form-control" id="inputLwtTopic" maxlength="32"
-                                    placeholder="LWT topic, will be append base topic"
-                                    v-model="mqttConfigList.mqtt_lwt_topic" aria-describedby="basic-addon3" />
+                                    :placeholder="$t('mqttadmin.LwtTopicHint')" aria-describedby="basic-addon3"
+                                    v-model="mqttConfigList.mqtt_lwt_topic" />
                             </div>
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputLwtOnline" class="col-sm-2 col-form-label">LWT Online message:</label>
+                        <label for="inputLwtOnline" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.LwtOnline') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputLwtOnline" maxlength="20"
-                                placeholder="Message that will be published to LWT topic when online"
-                                v-model="mqttConfigList.mqtt_lwt_online" />
+                                :placeholder="$t('mqttadmin.LwtOnlineHint')" v-model="mqttConfigList.mqtt_lwt_online" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputLwtOffline" class="col-sm-2 col-form-label">LWT Offline message:</label>
+                        <label for="inputLwtOffline" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.LwtOffline') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputLwtOffline" maxlength="20"
-                                placeholder="Message that will be published to LWT topic when offline"
+                                :placeholder="$t('mqttadmin.LwtOfflineHint')"
                                 v-model="mqttConfigList.mqtt_lwt_offline" />
                         </div>
                     </div>
@@ -164,19 +185,23 @@
             </div>
 
             <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled">
-                <div class="card-header text-bg-primary">Home Assistant MQTT Auto Discovery Parameters</div>
+                <div class="card-header text-bg-primary">{{ $t('mqttadmin.HassParameters') }}</div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label for="inputHassTopic" class="col-sm-2 col-form-label">Prefix Topic:</label>
+                        <label for="inputHassTopic" class="col-sm-2 col-form-label">
+                            {{ $t('mqttadmin.HassPrefixTopic') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputHassTopic" maxlength="32"
-                                placeholder="The prefix for the discovery topic"
+                                :placeholder="$t('mqttadmin.HassPrefixTopicHint')"
                                 v-model="mqttConfigList.mqtt_hass_topic" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputHassRetain">Enable Retain Flag</label>
+                        <label class="col-sm-2 form-check-label" for="inputHassRetain">
+                            {{ $t('mqttadmin.HassRetain') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputHassRetain"
@@ -186,7 +211,9 @@
                     </div>
 
                     <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputHassExpire">Enable Expiration</label>
+                        <label class="col-sm-2 form-check-label" for="inputHassExpire">
+                            {{ $t('mqttadmin.HassExpire') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputHassExpire"
@@ -196,8 +223,9 @@
                     </div>
 
                     <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputIndividualPanels">Individual
-                            Panels:</label>
+                        <label class="col-sm-2 form-check-label" for="inputIndividualPanels">
+                            {{ $t('mqttadmin.HassIndividual') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputIndividualPanels"
@@ -209,7 +237,7 @@
                 </div>
             </div>
 
-            <button type="submit" class="btn btn-primary mb-3">Save</button>
+            <button type="submit" class="btn btn-primary mb-3">{{ $t('mqttadmin.Save') }}</button>
         </form>
     </BasePage>
 </template>
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index 43cc2331..c6c98b73 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -1,63 +1,63 @@
 <template>
-    <BasePage :title="'MqTT Info'" :isLoading="dataLoading">
+    <BasePage :title="$t('mqttinfo.MqttInformation')" :isLoading="dataLoading">
         <div class="card">
-            <div class="card-header text-bg-primary">Configuration Summary</div>
+            <div class="card-header text-bg-primary">{{ $t('mqttinfo.ConfigurationSummary') }}</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
                         <tbody>
                             <tr>
-                                <th>Status</th>
+                                <th>{{ $t('mqttinfo.Status') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !mqttDataList.mqtt_enabled,
                                     'text-bg-success': mqttDataList.mqtt_enabled,
                                 }">
-                                    <span v-if="mqttDataList.mqtt_enabled">enabled</span>
-                                    <span v-else>disabled</span>
+                                    <span v-if="mqttDataList.mqtt_enabled">{{ $t('mqttinfo.Enabled') }}</span>
+                                    <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
                                 </td>
                             </tr>
                             <tr>
-                                <th>Server</th>
+                                <th>{{ $t('mqttinfo.Server') }}</th>
                                 <td>{{ mqttDataList.mqtt_hostname }}</td>
                             </tr>
                             <tr>
-                                <th>Port</th>
+                                <th>{{ $t('mqttinfo.Port') }}</th>
                                 <td>{{ mqttDataList.mqtt_port }}</td>
                             </tr>
                             <tr>
-                                <th>Username</th>
+                                <th>{{ $t('mqttinfo.Username') }}</th>
                                 <td>{{ mqttDataList.mqtt_username }}</td>
                             </tr>
                             <tr>
-                                <th>Base Topic</th>
+                                <th>{{ $t('mqttinfo.BaseTopic') }}</th>
                                 <td>{{ mqttDataList.mqtt_topic }}</td>
                             </tr>
                             <tr>
-                                <th>Publish Interval</th>
-                                <td>{{ mqttDataList.mqtt_publish_interval }} seconds</td>
+                                <th>{{ $t('mqttinfo.PublishInterval') }}</th>
+                                <td>{{ $t('mqttinfo.Seconds', { sec: mqttDataList.mqtt_publish_interval }) }}</td>
                             </tr>
                             <tr>
-                                <th>Retain</th>
+                                <th>{{ $t('mqttinfo.Retain') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !mqttDataList.mqtt_retain,
                                     'text-bg-success': mqttDataList.mqtt_retain,
                                 }">
-                                    <span v-if="mqttDataList.mqtt_retain">enabled</span>
-                                    <span v-else>disabled</span>
+                                    <span v-if="mqttDataList.mqtt_retain">{{ $t('mqttinfo.Enabled') }}</span>
+                                    <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
                                 </td>
                             </tr>
                             <tr>
-                                <th>TLS</th>
+                                <th>{{ $t('mqttinfo.Tls') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !mqttDataList.mqtt_tls,
                                     'text-bg-success': mqttDataList.mqtt_tls,
                                 }">
-                                    <span v-if="mqttDataList.mqtt_tls">enabled</span>
-                                    <span v-else>disabled</span>
+                                    <span v-if="mqttDataList.mqtt_tls">{{ $t('mqttinfo.Enabled') }}</span>
+                                    <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
                                 </td>
                             </tr>
                             <tr v-show="mqttDataList.mqtt_tls">
-                                <th>Root CA Certifcate Info</th>
+                                <th>{{ $t('mqttinfo.RootCertifcateInfo') }}</th>
                                 <td>{{ mqttDataList.mqtt_root_ca_cert_info }}</td>
                             </tr>
                         </tbody>
@@ -67,54 +67,54 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-bg-primary">Home Assistant MQTT Auto Discovery Configuration Summary
-            </div>
+            <div class="card-header text-bg-primary">{{ $t('mqttinfo.HassSummary') }}</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
                         <tbody>
                             <tr>
-                                <th>Status</th>
+                                <th>{{ $t('mqttinfo.Status') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !mqttDataList.mqtt_hass_enabled,
                                     'text-bg-success': mqttDataList.mqtt_hass_enabled,
                                 }">
-                                    <span v-if="mqttDataList.mqtt_hass_enabled">enabled</span>
-                                    <span v-else>disabled</span>
+                                    <span v-if="mqttDataList.mqtt_hass_enabled">{{ $t('mqttinfo.Enabled') }}</span>
+                                    <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
                                 </td>
                             </tr>
                             <tr>
-                                <th>Base Topic</th>
+                                <th>{{ $t('mqttinfo.BaseTopic') }}</th>
                                 <td>{{ mqttDataList.mqtt_hass_topic }}</td>
                             </tr>
                             <tr>
-                                <th>Retain</th>
+                                <th>{{ $t('mqttinfo.Retain') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !mqttDataList.mqtt_hass_retain,
                                     'text-bg-success': mqttDataList.mqtt_hass_retain,
                                 }">
-                                    <span v-if="mqttDataList.mqtt_hass_retain">enabled</span>
-                                    <span v-else>disabled</span>
+                                    <span v-if="mqttDataList.mqtt_hass_retain">{{ $t('mqttinfo.Enabled') }}</span>
+                                    <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
                                 </td>
                             </tr>
                             <tr>
-                                <th>Expire</th>
+                                <th>{{ $t('mqttinfo.Expire') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !mqttDataList.mqtt_hass_expire,
                                     'text-bg-success': mqttDataList.mqtt_hass_expire,
                                 }">
-                                    <span v-if="mqttDataList.mqtt_hass_expire">enabled</span>
-                                    <span v-else>disabled</span>
+                                    <span v-if="mqttDataList.mqtt_hass_expire">{{ $t('mqttinfo.Enabled') }}</span>
+                                    <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
                                 </td>
                             </tr>
                             <tr>
-                                <th>Individual Panels</th>
+                                <th>{{ $t('mqttinfo.IndividualPanels') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !mqttDataList.mqtt_hass_individualpanels,
                                     'text-bg-success': mqttDataList.mqtt_hass_individualpanels,
                                 }">
-                                    <span v-if="mqttDataList.mqtt_hass_individualpanels">enabled</span>
-                                    <span v-else>disabled</span>
+                                    <span v-if="mqttDataList.mqtt_hass_individualpanels">{{ $t('mqttinfo.Enabled')
+                                    }}</span>
+                                    <span v-else>{{ $t('mqttinfo.Disabled') }}</span>
                                 </td>
                             </tr>
                         </tbody>
@@ -124,19 +124,19 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-bg-primary">Runtime Summary</div>
+            <div class="card-header text-bg-primary">{{ $t('mqttinfo.RuntimeSummary') }}</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
                         <tbody>
                             <tr>
-                                <th>Connection Status</th>
+                                <th>{{ $t('mqttinfo.ConnectionStatus') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !mqttDataList.mqtt_connected,
                                     'text-bg-success': mqttDataList.mqtt_connected,
                                 }">
-                                    <span v-if="mqttDataList.mqtt_connected">connected</span>
-                                    <span v-else>disconnected</span>
+                                    <span v-if="mqttDataList.mqtt_connected">{{ $t('mqttinfo.Connected') }}</span>
+                                    <span v-else>{{ $t('mqttinfo.Disconnected') }}</span>
                                 </td>
                             </tr>
                         </tbody>
diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index cfe60c80..10a1485a 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -1,44 +1,50 @@
 <template>
-    <BasePage :title="'Network Settings'" :isLoading="dataLoading">
+    <BasePage :title="$t('networkadmin.NetworkSettings')" :isLoading="dataLoading">
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
         <form @submit="saveNetworkConfig">
             <div class="card">
-                <div class="card-header text-bg-primary">WiFi Configuration</div>
+                <div class="card-header text-bg-primary">{{ $t('networkadmin.WifiConfiguration') }}</div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label for="inputSSID" class="col-sm-2 col-form-label">WiFi SSID:</label>
+                        <label for="inputSSID" class="col-sm-2 col-form-label">
+                            {{ $t('networkadmin.WifiSsid') }}
+                        </label>
                         <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputSSID" maxlength="32" placeholder="SSID"
+                            <input type="text" class="form-control" id="inputSSID" maxlength="32"
                                 v-model="networkConfigList.ssid" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputPassword" class="col-sm-2 col-form-label">WiFi Password:</label>
+                        <label for="inputPassword" class="col-sm-2 col-form-label">
+                            {{ $t('networkadmin.WifiPassword') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="password" class="form-control" id="inputPassword" maxlength="64"
-                                placeholder="PSK" v-model="networkConfigList.password" />
+                                v-model="networkConfigList.password" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputHostname" class="col-sm-2 col-form-label">Hostname:</label>
+                        <label for="inputHostname" class="col-sm-2 col-form-label">
+                            {{ $t('networkadmin.Hostname') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputHostname" maxlength="32"
-                                placeholder="Hostname" v-model="networkConfigList.hostname" />
+                                v-model="networkConfigList.hostname" />
 
-                            <div class="alert alert-secondary" role="alert">
-                                <b>Hint:</b> The text <span class="font-monospace">%06X</span> will be replaced
-                                with the last 6 digits of the ESP ChipID in hex format.
+                            <div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')">
                             </div>
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label class="col-sm-2 form-check-label" for="inputDHCP">Enable DHCP</label>
+                        <label class="col-sm-2 form-check-label" for="inputDHCP">
+                            {{ $t('networkadmin.EnableDhcp') }}
+                        </label>
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputDHCP"
@@ -51,51 +57,59 @@
 
             <div class="card" v-show="!networkConfigList.dhcp">
                 <div class="card-header text-bg-primary">
-                    Static IP Configuration
+                    {{ $t('networkadmin.StaticIpConfiguration') }}
                 </div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label for="inputIP" class="col-sm-2 col-form-label">IP Address:</label>
+                        <label for="inputIP" class="col-sm-2 col-form-label">{{ $t('networkadmin.IpAddress') }}</label>
                         <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputIP" maxlength="32" placeholder="IP address"
+                            <input type="text" class="form-control" id="inputIP" maxlength="32"
                                 v-model="networkConfigList.ipaddress" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputNetmask" class="col-sm-2 col-form-label">Netmask:</label>
+                        <label for="inputNetmask" class="col-sm-2 col-form-label">
+                            {{ $t('networkadmin.Netmask') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputNetmask" maxlength="32"
-                                placeholder="Netmask" v-model="networkConfigList.netmask" />
+                                v-model="networkConfigList.netmask" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputGateway" class="col-sm-2 col-form-label">Default Gateway:</label>
+                        <label for="inputGateway" class="col-sm-2 col-form-label">
+                            {{ $t('networkadmin.DefaultGateway') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputGateway" maxlength="32"
-                                placeholder="Default Gateway" v-model="networkConfigList.gateway" />
+                                v-model="networkConfigList.gateway" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputDNS1" class="col-sm-2 col-form-label">DNS Server 1:</label>
+                        <label for="inputDNS1" class="col-sm-2 col-form-label">
+                            {{ $t('networkadmin.Dns', { num: 1 }) }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputDNS1" maxlength="32"
-                                placeholder="DNS Server 1" v-model="networkConfigList.dns1" />
+                                v-model="networkConfigList.dns1" />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputDNS2" class="col-sm-2 col-form-label">DNS Server 2:</label>
+                        <label for="inputDNS2" class="col-sm-2 col-form-label">
+                            {{ $t('networkadmin.Dns', { num: 2 }) }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputDNS2" maxlength="32"
-                                placeholder="DNS Server 2" v-model="networkConfigList.dns2" />
+                                v-model="networkConfigList.dns2" />
                         </div>
                     </div>
                 </div>
             </div>
-            <button type="submit" class="btn btn-primary mb-3">Save</button>
+            <button type="submit" class="btn btn-primary mb-3">{{ $t('networkadmin.Save') }}</button>
         </form>
     </BasePage>
 </template>
diff --git a/webapp/src/views/NetworkInfoView.vue b/webapp/src/views/NetworkInfoView.vue
index cfa92ac7..a1f85a1b 100644
--- a/webapp/src/views/NetworkInfoView.vue
+++ b/webapp/src/views/NetworkInfoView.vue
@@ -1,5 +1,5 @@
 <template>
-    <BasePage :title="'Network Info'" :isLoading="dataLoading">
+    <BasePage :title="$t('networkinfo.NetworkInformation')" :isLoading="dataLoading">
         <WifiStationInfo :networkStatus="networkDataList" />
         <div class="mt-5"></div>
         <WifiApInfo :networkStatus="networkDataList" />
diff --git a/webapp/src/views/NtpAdminView.vue b/webapp/src/views/NtpAdminView.vue
index f7148326..0529e89d 100644
--- a/webapp/src/views/NtpAdminView.vue
+++ b/webapp/src/views/NtpAdminView.vue
@@ -1,17 +1,17 @@
 <template>
-    <BasePage :title="'NTP Settings'" :isLoading="dataLoading || timezoneLoading">
+    <BasePage :title="$t('ntpadmin.NtpSettings')" :isLoading="dataLoading || timezoneLoading">
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
         <form @submit="saveNtpConfig">
             <div class="card">
-                <div class="card-header text-bg-primary">NTP Configuration</div>
+                <div class="card-header text-bg-primary">{{ $t('ntpadmin.NtpConfiguration') }}</div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:
-                            <BIconInfoCircle v-tooltip
-                                title="The default value is fine as long as OpenDTU has direct access to the internet." />
+                        <label for="inputNtpServer" class="col-sm-2 col-form-label">
+                            {{ $t('ntpadmin.TimeServer') }}
+                            <BIconInfoCircle v-tooltip :title="$t('ntpadmin.TimeServerHint')" />
                         </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputNtpServer" maxlength="32"
@@ -20,7 +20,7 @@
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputTimezone" class="col-sm-2 col-form-label">Timezone:</label>
+                        <label for="inputTimezone" class="col-sm-2 col-form-label">{{ $t('ntpadmin.Timezone') }}</label>
                         <div class="col-sm-10">
                             <select class="form-select" v-model="timezoneSelect">
                                 <option v-for="(config, name) in timezoneList" :key="name + '---' + config"
@@ -32,7 +32,9 @@
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputTimezoneConfig" class="col-sm-2 col-form-label">Timezone Config:</label>
+                        <label for="inputTimezoneConfig" class="col-sm-2 col-form-label">
+                            {{ $t('ntpadmin.TimezoneConfig') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
                                 placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
@@ -40,35 +42,34 @@
                     </div>
                 </div>
             </div>
-            <button type="submit" class="btn btn-primary mb-3">Save</button>
+            <button type="submit" class="btn btn-primary mb-3">{{ $t('ntpadmin.Save') }}</button>
         </form>
 
         <div class="card">
-            <div class="card-header text-bg-primary">Manual Time Synchronization</div>
+            <div class="card-header text-bg-primary">{{ $t('ntpadmin.ManualTimeSynchronization') }}</div>
             <div class="card-body">
                 <div class="row mb-3">
-                    <label for="currentMcuTime" class="col-sm-2 col-form-label">Current OpenDTU Time:</label>
+                    <label for="currentMcuTime" class="col-sm-2 col-form-label">
+                        {{ $t('ntpadmin.CurrentOpenDtuTime') }}
+                    </label>
                     <div class="col-sm-10">
                         <input type="text" class="form-control" id="currentMcuTime" v-model="mcuTime" disabled />
                     </div>
                 </div>
                 <div class="row mb-3">
-                    <label for="currentLocalTime" class="col-sm-2 col-form-label">Current Local Time:</label>
+                    <label for="currentLocalTime" class="col-sm-2 col-form-label">
+                        {{ $t('ntpadmin.CurrentLocalTime') }}
+                    </label>
                     <div class="col-sm-10">
                         <input type="text" class="form-control" id="currentLocalTime" v-model="localTime" disabled />
                     </div>
                 </div>
                 <div class="text-center mb-3">
-                    <button type="button" class="btn btn-danger" @click="setCurrentTime()"
-                        title="Synchronize Time">Synchronize Time
+                    <button type="button" class="btn btn-danger" @click="setCurrentTime()">
+                        {{ $t('ntpadmin.SynchronizeTime') }}
                     </button>
                 </div>
-                <div class="alert alert-secondary" role="alert">
-                    <b>Hint:</b> You can use the manual time synchronization to set the current time of OpenDTU if
-                    no NTP server is available. But be aware, that in case of power cycle the time gets lost. Also
-                    note that time accuracy will be skewed badly, as it can not be resynchronised regularly and the
-                    ESP32 microcontroller does not have a real time clock.
-                </div>
+                <div class="alert alert-secondary" role="alert" v-html="$t('ntpadmin.SynchronizeTimeHint')"></div>
 
             </div>
         </div>
diff --git a/webapp/src/views/NtpInfoView.vue b/webapp/src/views/NtpInfoView.vue
index a9b69beb..58ff4f90 100644
--- a/webapp/src/views/NtpInfoView.vue
+++ b/webapp/src/views/NtpInfoView.vue
@@ -1,21 +1,21 @@
 <template>
-    <BasePage :title="'NTP Info'" :isLoading="dataLoading">
+    <BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading">
         <div class="card">
-            <div class="card-header text-bg-primary">Configuration Summary</div>
+            <div class="card-header text-bg-primary">{{ $t('ntpinfo.ConfigurationSummary') }}</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
                         <tbody>
                             <tr>
-                                <th>Server</th>
+                                <th>{{ $t('ntpinfo.Server') }}</th>
                                 <td>{{ ntpDataList.ntp_server }}</td>
                             </tr>
                             <tr>
-                                <th>Timezone</th>
+                                <th>{{ $t('ntpinfo.Timezone') }}</th>
                                 <td>{{ ntpDataList.ntp_timezone }}</td>
                             </tr>
                             <tr>
-                                <th>Timezone Description</th>
+                                <th>{{ $t('ntpinfo.TimezoneDescription') }}</th>
                                 <td>{{ ntpDataList.ntp_timezone_descr }}</td>
                             </tr>
                         </tbody>
@@ -25,23 +25,23 @@
         </div>
 
         <div class="card mt-5">
-            <div class="card-header text-bg-primary">Current Time</div>
+            <div class="card-header text-bg-primary">{{ $t('ntpinfo.CurrentTime') }}</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
                         <tbody>
                             <tr>
-                                <th>Status</th>
+                                <th>{{ $t('ntpinfo.Status') }}</th>
                                 <td class="badge" :class="{
                                     'text-bg-danger': !ntpDataList.ntp_status,
                                     'text-bg-success': ntpDataList.ntp_status,
                                 }">
-                                    <span v-if="ntpDataList.ntp_status">synced</span>
-                                    <span v-else>not synced</span>
+                                    <span v-if="ntpDataList.ntp_status">{{ $t('ntpinfo.Synced') }}</span>
+                                    <span v-else>{{ $t('ntpinfo.NotSynced') }}</span>
                                 </td>
                             </tr>
                             <tr>
-                                <th>Local Time</th>
+                                <th>{{ $t('ntpinfo.LocalTime') }}</th>
                                 <td>{{ ntpDataList.ntp_localtime }}</td>
                             </tr>
                         </tbody>
diff --git a/webapp/src/views/SecurityAdminView.vue b/webapp/src/views/SecurityAdminView.vue
index 8677e809..b400ad69 100644
--- a/webapp/src/views/SecurityAdminView.vue
+++ b/webapp/src/views/SecurityAdminView.vue
@@ -1,15 +1,17 @@
 <template>
-    <BasePage :title="'Security Settings'" :isLoading="dataLoading">
+    <BasePage :title="$t('securityadmin.SecuritySettings')" :isLoading="dataLoading">
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
         <form @submit="savePasswordConfig">
             <div class="card">
-                <div class="card-header text-bg-primary">Admin password</div>
+                <div class="card-header text-bg-primary">{{ $t('securityadmin.AdminPassword') }}</div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>
+                        <label for="inputPassword" class="col-sm-2 col-form-label">
+                            {{ $t('securityadmin.Password') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="password" class="form-control" id="inputPassword" maxlength="64"
                                 placeholder="Password" v-model="securityConfigList.password" />
@@ -17,27 +19,27 @@
                     </div>
 
                     <div class="row mb-3">
-                        <label for="inputPasswordRepeat" class="col-sm-2 col-form-label">Repeat Password:</label>
+                        <label for="inputPasswordRepeat" class="col-sm-2 col-form-label">
+                            {{ $t('securityadmin.RepeatPassword') }}
+                        </label>
                         <div class="col-sm-10">
                             <input type="password" class="form-control" id="inputPasswordRepeat" maxlength="64"
                                 placeholder="Password" v-model="passwordRepeat" />
                         </div>
                     </div>
 
-                    <div class="alert alert-secondary" role="alert">
-                        <b>Hint:</b>
-                        The administrator password is used to access this web interface (user 'admin'), but also to
-                        connect to the device when in AP mode. It must be 8..64 characters.
-                    </div>
+                    <div class="alert alert-secondary" role="alert" v-html="$t('securityadmin.PasswordHint')"></div>
 
                 </div>
             </div>
 
             <div class="card mt-5">
-                <div class="card-header text-bg-primary">Permissions</div>
+                <div class="card-header text-bg-primary">{{ $t('securityadmin.Permissions') }}</div>
                 <div class="card-body">
                     <div class="row mb-3">
-                        <label class="col-sm-6 form-check-label" for="inputReadonly">Allow readonly access to web interface</label>
+                        <label class="col-sm-6 form-check-label" for="inputReadonly">
+                            {{ $t('securityadmin.ReadOnly') }}
+                        </label>
                         <div class="col-sm-6">
                             <div class="form-check form-switch">
                                 <input class="form-check-input" type="checkbox" id="inputReadonly"
@@ -48,7 +50,7 @@
                 </div>
             </div>
 
-            <button type="submit" class="btn btn-primary mb-3">Save</button>
+            <button type="submit" class="btn btn-primary mb-3">{{ $t('securityadmin.Save') }}</button>
         </form>
     </BasePage>
 </template>
diff --git a/webapp/src/views/SystemInfoView.vue b/webapp/src/views/SystemInfoView.vue
index 8d2fc1ff..e18adddc 100644
--- a/webapp/src/views/SystemInfoView.vue
+++ b/webapp/src/views/SystemInfoView.vue
@@ -1,5 +1,5 @@
 <template>
-    <BasePage :title="'System Info'" :isLoading="dataLoading">
+    <BasePage :title="$t('systeminfo.SystemInfo')" :isLoading="dataLoading">
         <FirmwareInfo :systemStatus="systemDataList" />
         <div class="mt-5"></div>
         <HardwareInfo :systemStatus="systemDataList" />
@@ -58,15 +58,15 @@ export default defineComponent({
                     if (response.ok) {
                         return response.json()
                     }
-                    throw new Error('Error fetching version information');
+                    throw new Error(this.$t("systeminfo.VersionError"));
                 })
                 .then((data) => {
                     if (data.total_commits > 0) {
-                        this.systemDataList.update_text = "New version available! Show changes!"
+                        this.systemDataList.update_text = this.$t("systeminfo.VersionNew");
                         this.systemDataList.update_status = "text-bg-danger";
                         this.systemDataList.update_url = data.html_url;
                     } else {
-                        this.systemDataList.update_text = "Up to date!"
+                        this.systemDataList.update_text = this.$t("systeminfo.VersionOk");
                         this.systemDataList.update_status = "text-bg-success";
                     }
                 })
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index d280b716..66fd1114 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -151,6 +151,44 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@intlify/core-base@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
+  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+  dependencies:
+    "@intlify/devtools-if" "9.2.2"
+    "@intlify/message-compiler" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+
+"@intlify/devtools-if@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
+  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+
+"@intlify/message-compiler@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
+  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+    source-map "0.6.1"
+
+"@intlify/shared@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
+  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
+
+"@intlify/vue-devtools@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
+  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -415,7 +453,7 @@
     "@vue/compiler-dom" "3.2.45"
     "@vue/shared" "3.2.45"
 
-"@vue/devtools-api@^6.4.5":
+"@vue/devtools-api@^6.2.1", "@vue/devtools-api@^6.4.5":
   version "6.4.5"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
   integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
@@ -1855,7 +1893,7 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-source-map@^0.6.1:
+source-map@0.6.1, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -2074,6 +2112,16 @@ vue-eslint-parser@^9.0.0, vue-eslint-parser@^9.0.1:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-i18n@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
+  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+    "@vue/devtools-api" "^6.2.1"
+
 vue-router@^4.1.6:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"