diff --git a/webapp/index.html b/webapp/index.html
index bbb68b549..c9038613d 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -11,7 +11,7 @@
   </head>
   <body>
     <noscript>
-        <strong>We're sorry but OpenDTU doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        <strong>We're sorry but OpenDTU-OnBattery doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 200ce6695..8c5f2f98a 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -18,7 +18,7 @@ export default defineComponent({
 <style>
 /* Show it is fixed to the top */
 body {
-    min-height: 75rem;
+    padding-bottom: 1rem;
     padding-top: 4.5rem;
 }
 </style>
diff --git a/webapp/src/components/BatteryView.vue b/webapp/src/components/BatteryView.vue
index d7a9665d2..78e151280 100644
--- a/webapp/src/components/BatteryView.vue
+++ b/webapp/src/components/BatteryView.vue
@@ -45,7 +45,7 @@
                                 v-bind:key="section"
                                 class="col order-0"
                             >
-                                <div class="card" :class="{ 'border-info': true }">
+                                <div class="card card-table" :class="{ 'border-info': true }">
                                     <div class="card-header text-bg-info">{{ $t('battery.' + section) }}</div>
                                     <div class="card-body">
                                         <div class="table-responsive">
@@ -53,7 +53,7 @@
                                                 <thead>
                                                     <tr>
                                                         <th scope="col">{{ $t('battery.Property') }}</th>
-                                                        <th style="text-align: right" scope="col">
+                                                        <th class="value" scope="col">
                                                             {{ $t('battery.Value') }}
                                                         </th>
                                                         <th scope="col">{{ $t('battery.Unit') }}</th>
@@ -62,7 +62,7 @@
                                                 <tbody>
                                                     <tr v-for="(prop, key) in values" v-bind:key="key">
                                                         <th scope="row">{{ $t('battery.' + key) }}</th>
-                                                        <td style="text-align: right">
+                                                        <td class="value">
                                                             <template v-if="isStringValue(prop) && prop.translate">
                                                                 {{ $t('battery.' + prop.value) }}
                                                             </template>
@@ -91,7 +91,7 @@
                                 </div>
                             </div>
                             <div class="col order-1" v-show="batteryData.showIssues">
-                                <div class="card">
+                                <div class="card card-table">
                                     <div :class="{ 'card-header': true, 'border-bottom-0': maxIssueValue === 0 }">
                                         <div class="d-flex flex-row justify-content-between align-items-baseline">
                                             {{ $t('battery.issues') }}
diff --git a/webapp/src/components/CardElement.vue b/webapp/src/components/CardElement.vue
index e7027367b..28a0fd533 100644
--- a/webapp/src/components/CardElement.vue
+++ b/webapp/src/components/CardElement.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['card', addSpace ? 'mt-5' : '']">
+    <div :class="['card', table ? 'card-table' : '', addSpace ? 'mt-5' : '']">
         <div :class="['card-header', textVariant]">{{ text }}</div>
         <div :class="['card-body', 'card-text', centerContent ? 'text-center' : '', flexChildren ? 'd-flex' : '']">
             <slot />
@@ -14,6 +14,7 @@ export default defineComponent({
     props: {
         text: String,
         textVariant: String,
+        table: Boolean,
         addSpace: Boolean,
         centerContent: Boolean,
         flexChildren: Boolean,
diff --git a/webapp/src/components/FirmwareInfo.vue b/webapp/src/components/FirmwareInfo.vue
index e1f5d1ef6..e49c2c7ec 100644
--- a/webapp/src/components/FirmwareInfo.vue
+++ b/webapp/src/components/FirmwareInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/GridProfile.vue b/webapp/src/components/GridProfile.vue
index 8385dd479..a9e7f26de 100644
--- a/webapp/src/components/GridProfile.vue
+++ b/webapp/src/components/GridProfile.vue
@@ -19,7 +19,11 @@
         </table>
 
         <div class="accordion" id="accordionProfile">
-            <div class="accordion-item" v-for="(section, index) in gridProfileList.sections" :key="index">
+            <div
+                class="accordion-item accordion-table"
+                v-for="(section, index) in gridProfileList.sections"
+                :key="index"
+            >
                 <h2 class="accordion-header">
                     <button
                         class="accordion-button collapsed"
diff --git a/webapp/src/components/HardwareInfo.vue b/webapp/src/components/HardwareInfo.vue
index 372eeff0d..982549d65 100644
--- a/webapp/src/components/HardwareInfo.vue
+++ b/webapp/src/components/HardwareInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/HeapDetails.vue b/webapp/src/components/HeapDetails.vue
index bb2c8a27d..32d2ffd6a 100644
--- a/webapp/src/components/HeapDetails.vue
+++ b/webapp/src/components/HeapDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary">
+    <CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/HttpRequestSettings.vue b/webapp/src/components/HttpRequestSettings.vue
index 66b252efc..ef15ce562 100644
--- a/webapp/src/components/HttpRequestSettings.vue
+++ b/webapp/src/components/HttpRequestSettings.vue
@@ -1,70 +1,68 @@
 <template>
-    <div>
-        <InputElement
-            :label="$t('httprequestsettings.url')"
-            v-model="cfg.url"
-            type="text"
-            maxlength="1024"
-            placeholder="http://admin:supersecret@mypowermeter.home/status"
-            prefix="GET "
-            :tooltip="$t('httprequestsettings.urlDescription')"
-            wide
-        />
+    <InputElement
+        :label="$t('httprequestsettings.url')"
+        v-model="cfg.url"
+        type="text"
+        maxlength="1024"
+        placeholder="http://admin:supersecret@mypowermeter.home/status"
+        prefix="GET "
+        :tooltip="$t('httprequestsettings.urlDescription')"
+        wide
+    />
 
-        <div class="row mb-3">
-            <label for="auth_type" class="col-sm-4 col-form-label">{{ $t('httprequestsettings.authorization') }}</label>
-            <div class="col-sm-8">
-                <select id="auth_type" class="form-select" v-model="cfg.auth_type">
-                    <option v-for="a in authTypeList" :key="a.key" :value="a.key">
-                        {{ $t('httprequestsettings.authType' + a.value) }}
-                    </option>
-                </select>
-            </div>
+    <div class="row mb-3">
+        <label for="auth_type" class="col-sm-4 col-form-label">{{ $t('httprequestsettings.authorization') }}</label>
+        <div class="col-sm-8">
+            <select id="auth_type" class="form-select" v-model="cfg.auth_type">
+                <option v-for="a in authTypeList" :key="a.key" :value="a.key">
+                    {{ $t('httprequestsettings.authType' + a.value) }}
+                </option>
+            </select>
         </div>
+    </div>
 
-        <InputElement
-            v-if="cfg.auth_type != 0"
-            :label="$t('httprequestsettings.username')"
-            v-model="cfg.username"
-            type="text"
-            maxlength="64"
-            wide
-        />
+    <InputElement
+        v-if="cfg.auth_type != 0"
+        :label="$t('httprequestsettings.username')"
+        v-model="cfg.username"
+        type="text"
+        maxlength="64"
+        wide
+    />
 
-        <InputElement
-            v-if="cfg.auth_type != 0"
-            :label="$t('httprequestsettings.password')"
-            v-model="cfg.password"
-            type="password"
-            maxlength="64"
-            wide
-        />
+    <InputElement
+        v-if="cfg.auth_type != 0"
+        :label="$t('httprequestsettings.password')"
+        v-model="cfg.password"
+        type="password"
+        maxlength="64"
+        wide
+    />
 
-        <InputElement
-            :label="$t('httprequestsettings.headerKey')"
-            v-model="cfg.header_key"
-            type="text"
-            maxlength="64"
-            :tooltip="$t('httprequestsettings.headerKeyDescription')"
-            wide
-        />
+    <InputElement
+        :label="$t('httprequestsettings.headerKey')"
+        v-model="cfg.header_key"
+        type="text"
+        maxlength="64"
+        :tooltip="$t('httprequestsettings.headerKeyDescription')"
+        wide
+    />
 
-        <InputElement
-            :label="$t('httprequestsettings.headerValue')"
-            v-model="cfg.header_value"
-            type="text"
-            maxlength="256"
-            wide
-        />
+    <InputElement
+        :label="$t('httprequestsettings.headerValue')"
+        v-model="cfg.header_value"
+        type="text"
+        maxlength="256"
+        wide
+    />
 
-        <InputElement
-            :label="$t('httprequestsettings.timeout')"
-            v-model="cfg.timeout"
-            type="number"
-            :postfix="$t('httprequestsettings.milliSeconds')"
-            wide
-        />
-    </div>
+    <InputElement
+        :label="$t('httprequestsettings.timeout')"
+        v-model="cfg.timeout"
+        type="number"
+        :postfix="$t('httprequestsettings.milliSeconds')"
+        wide
+    />
 </template>
 
 <script lang="ts">
diff --git a/webapp/src/components/HuaweiView.vue b/webapp/src/components/HuaweiView.vue
index 32b7c2b66..79a3ca913 100644
--- a/webapp/src/components/HuaweiView.vue
+++ b/webapp/src/components/HuaweiView.vue
@@ -43,14 +43,14 @@
                     <div class="card-body">
                         <div class="row flex-row flex-wrap align-items-start g-3">
                             <div class="col order-0">
-                                <div class="card" :class="{ 'border-info': true }">
+                                <div class="card card-table" :class="{ 'border-info': true }">
                                     <div class="card-header bg-info">{{ $t('huawei.Input') }}</div>
                                     <div class="card-body">
                                         <table class="table table-striped table-hover">
                                             <thead>
                                                 <tr>
                                                     <th scope="col">{{ $t('huawei.Property') }}</th>
-                                                    <th style="text-align: right" scope="col">
+                                                    <th class="value" scope="col">
                                                         {{ $t('huawei.Value') }}
                                                     </th>
                                                     <th scope="col">{{ $t('huawei.Unit') }}</th>
@@ -59,35 +59,35 @@
                                             <tbody>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.input_voltage') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ formatNumber(huaweiData.input_voltage.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.input_voltage.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.input_current') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ formatNumber(huaweiData.input_current.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.input_current.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.input_power') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ formatNumber(huaweiData.input_power.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.input_power.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.input_temp') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ Math.round(huaweiData.input_temp.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.input_temp.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.efficiency') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.efficiency.v.toFixed(1) }}
                                                     </td>
                                                     <td>{{ huaweiData.efficiency.u }}</td>
@@ -98,14 +98,14 @@
                                 </div>
                             </div>
                             <div class="col order-1">
-                                <div class="card" :class="{ 'border-info': false }">
+                                <div class="card card-table" :class="{ 'border-info': false }">
                                     <div class="card-header bg-info">{{ $t('huawei.Output') }}</div>
                                     <div class="card-body">
                                         <table class="table table-striped table-hover">
                                             <thead>
                                                 <tr>
                                                     <th scope="col">{{ $t('huawei.Property') }}</th>
-                                                    <th style="text-align: right" scope="col">
+                                                    <th class="value" scope="col">
                                                         {{ $t('huawei.Value') }}
                                                     </th>
                                                     <th scope="col">{{ $t('huawei.Unit') }}</th>
@@ -114,35 +114,35 @@
                                             <tbody>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.output_voltage') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.output_voltage.v.toFixed(1) }}
                                                     </td>
                                                     <td>{{ huaweiData.output_voltage.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.output_current') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.output_current.v.toFixed(2) }}
                                                     </td>
                                                     <td>{{ huaweiData.output_current.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.max_output_current') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.max_output_current.v.toFixed(1) }}
                                                     </td>
                                                     <td>{{ huaweiData.max_output_current.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.output_power') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ huaweiData.output_power.v.toFixed(1) }}
                                                     </td>
                                                     <td>{{ huaweiData.output_power.u }}</td>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row">{{ $t('huawei.output_temp') }}</th>
-                                                    <td style="text-align: right">
+                                                    <td class="value">
                                                         {{ Math.round(huaweiData.output_temp.v) }}
                                                     </td>
                                                     <td>{{ huaweiData.output_temp.u }}</td>
diff --git a/webapp/src/components/InterfaceApInfo.vue b/webapp/src/components/InterfaceApInfo.vue
index f5e220544..18b8c3f30 100644
--- a/webapp/src/components/InterfaceApInfo.vue
+++ b/webapp/src/components/InterfaceApInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary">
+    <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/InterfaceNetworkInfo.vue b/webapp/src/components/InterfaceNetworkInfo.vue
index ea87dc5e0..832030cd9 100644
--- a/webapp/src/components/InterfaceNetworkInfo.vue
+++ b/webapp/src/components/InterfaceNetworkInfo.vue
@@ -2,6 +2,7 @@
     <CardElement
         :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
         textVariant="text-bg-primary"
+        table
     >
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index 94dbc57af..b7ebc27ba 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -1,11 +1,10 @@
 <template>
     <div
-        class="card"
+        class="card card-table"
         :class="{
             'border-info': channelType == 'AC',
             'border-secondary': channelType == 'INV',
         }"
-        style="overflow: hidden"
     >
         <div v-if="channelType == 'INV'" class="card-header text-bg-secondary">
             {{ $t('inverterchannelinfo.General') }}
@@ -21,12 +20,12 @@
         </div>
 
         <div class="table-responsive">
-            <table class="table table-striped table-hover" style="margin: 0">
+            <table class="table table-striped table-hover">
                 <tbody>
                     <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
                         <template v-if="key != 'name' && property">
                             <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
-                            <td style="text-align: right; padding-right: 0">
+                            <td class="value">
                                 {{
                                     $n(property.v, 'decimal', {
                                         minimumFractionDigits: property.d,
diff --git a/webapp/src/components/InverterTotalInfo.vue b/webapp/src/components/InverterTotalInfo.vue
index a1f0a3157..d811bd03f 100644
--- a/webapp/src/components/InverterTotalInfo.vue
+++ b/webapp/src/components/InverterTotalInfo.vue
@@ -99,7 +99,7 @@
                     :text="$t('invertertotalinfo.BatteryCharge')"
                 >
                     <div class="flex-fill" v-if="totalBattData.soc">
-                        <h2>
+                        <h2 class="mb-0">
                             {{
                                 $n(totalBattData.soc.v, 'decimal', {
                                     minimumFractionDigits: totalBattData.soc.d,
@@ -111,7 +111,7 @@
                     </div>
 
                     <div class="flex-fill" v-if="totalBattData.voltage">
-                        <h2>
+                        <h2 class="mb-0">
                             {{
                                 $n(totalBattData.voltage.v, 'decimal', {
                                     minimumFractionDigits: totalBattData.voltage.d,
@@ -131,7 +131,7 @@
                     :text="$t('invertertotalinfo.BatteryPower')"
                 >
                     <div class="flex-fill" v-if="totalBattData.power">
-                        <h2>
+                        <h2 class="mb-0">
                             {{
                                 $n(totalBattData.power.v, 'decimal', {
                                     minimumFractionDigits: totalBattData.power.d,
@@ -143,7 +143,7 @@
                     </div>
 
                     <div class="flex-fill" v-if="totalBattData.current">
-                        <h2>
+                        <h2 class="mb-0">
                             {{
                                 $n(totalBattData.current.v, 'decimal', {
                                     minimumFractionDigits: totalBattData.current.d,
diff --git a/webapp/src/components/MemoryInfo.vue b/webapp/src/components/MemoryInfo.vue
index 7fffbd810..321b9030a 100644
--- a/webapp/src/components/MemoryInfo.vue
+++ b/webapp/src/components/MemoryInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <thead>
diff --git a/webapp/src/components/PinInfo.vue b/webapp/src/components/PinInfo.vue
index a24103254..03dcfbbb3 100644
--- a/webapp/src/components/PinInfo.vue
+++ b/webapp/src/components/PinInfo.vue
@@ -1,40 +1,36 @@
 <template>
-    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary">
-        <div class="table-responsive">
-            <table class="table table-hover table-condensed">
-                <thead>
-                    <tr>
-                        <th>{{ $t('pininfo.Category') }}</th>
-                        <th>{{ $t('pininfo.Name') }}</th>
-                        <th>{{ $t('pininfo.ValueSelected') }}</th>
-                        <th>{{ $t('pininfo.ValueActive') }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <template v-for="category in categories" :key="category">
-                        <tr v-for="(prop, prop_idx) in properties(category)" :key="prop">
-                            <td v-if="prop_idx == 0" :rowspan="properties(category).length">
-                                {{ capitalizeFirstLetter(category) }}
-                            </td>
-                            <td :class="{ 'table-danger': !isEqual(category, prop) }">
-                                {{ prop }}
-                            </td>
-                            <td>
-                                <template v-if="selectedPinAssignment && category in selectedPinAssignment">
-                                    {{ (selectedPinAssignment as any)[category][prop] }}</template
-                                >
-                            </td>
-                            <td>
-                                <template v-if="currentPinAssignment && category in currentPinAssignment">
-                                    {{ (currentPinAssignment as any)[category][prop] }}</template
-                                >
-                            </td>
-                        </tr>
-                    </template>
-                </tbody>
-            </table>
+    <div class="row flex-row flex-wrap g-3">
+        <div class="col" v-for="category in categories" :key="category">
+            <CardElement :text="capitalizeFirstLetter(category)" textVariant="text-bg-primary" table>
+                <div class="table-responsive">
+                    <table class="table table-hover table-condensed">
+                        <tbody>
+                            <tr>
+                                <th>{{ $t('pininfo.Name') }}</th>
+                                <th class="text-center">{{ $t('pininfo.ValueSelected') }}</th>
+                                <th class="text-center">{{ $t('pininfo.ValueActive') }}</th>
+                            </tr>
+                            <tr v-for="(prop, prop_idx) in properties(category)" :key="prop_idx">
+                                <td :class="{ 'table-danger': !isEqual(category, prop) }">
+                                    {{ prop }}
+                                </td>
+                                <td class="text-center">
+                                    <template v-if="selectedPinAssignment && category in selectedPinAssignment">
+                                        {{ (selectedPinAssignment as any)[category][prop] }}</template
+                                    >
+                                </td>
+                                <td class="text-center">
+                                    <template v-if="currentPinAssignment && category in currentPinAssignment">
+                                        {{ (currentPinAssignment as any)[category][prop] }}</template
+                                    >
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </CardElement>
         </div>
-    </CardElement>
+    </div>
 </template>
 
 <script lang="ts">
diff --git a/webapp/src/components/RadioInfo.vue b/webapp/src/components/RadioInfo.vue
index ed84e0fb8..758a710ca 100644
--- a/webapp/src/components/RadioInfo.vue
+++ b/webapp/src/components/RadioInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/TaskDetails.vue b/webapp/src/components/TaskDetails.vue
index a9ab86ac3..badc5b815 100644
--- a/webapp/src/components/TaskDetails.vue
+++ b/webapp/src/components/TaskDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary">
+    <CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/VedirectView.vue b/webapp/src/components/VedirectView.vue
index 95cb245b8..e385bf8e7 100644
--- a/webapp/src/components/VedirectView.vue
+++ b/webapp/src/components/VedirectView.vue
@@ -64,7 +64,7 @@
                     <div class="card-body">
                         <div class="row flex-row flex-wrap align-items-start g-3">
                             <div v-for="(values, section) in item.values" v-bind:key="section" class="col order-0">
-                                <div class="card" :class="{ 'border-info': section === 'device' }">
+                                <div class="card card-table" :class="{ 'border-info': section === 'device' }">
                                     <div :class="section === 'device' ? 'card-header text-bg-info' : 'card-header'">
                                         {{ $t('vedirecthome.section_' + section) }}
                                     </div>
@@ -74,7 +74,7 @@
                                                 <thead>
                                                     <tr>
                                                         <th scope="col">{{ $t('vedirecthome.Property') }}</th>
-                                                        <th style="text-align: right" scope="col">
+                                                        <th class="value" scope="col">
                                                             {{ $t('vedirecthome.Value') }}
                                                         </th>
                                                         <th scope="col">{{ $t('vedirecthome.Unit') }}</th>
@@ -85,7 +85,7 @@
                                                         <th scope="row">
                                                             {{ $t('vedirecthome.' + section + '.' + key) }}
                                                         </th>
-                                                        <td style="text-align: right">
+                                                        <td class="value">
                                                             <template v-if="typeof prop === 'string'">
                                                                 {{ prop }}
                                                             </template>
diff --git a/webapp/src/components/WifiApInfo.vue b/webapp/src/components/WifiApInfo.vue
index 024ac7a63..0a8978912 100644
--- a/webapp/src/components/WifiApInfo.vue
+++ b/webapp/src/components/WifiApInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary">
+    <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/components/WifiStationInfo.vue b/webapp/src/components/WifiStationInfo.vue
index db13594cd..5143e4b4d 100644
--- a/webapp/src/components/WifiStationInfo.vue
+++ b/webapp/src/components/WifiStationInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary">
+    <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index ae13e2c11..e2c3c7f57 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -452,28 +452,28 @@
         "PerformReboot": "Neustart durchführen",
         "Reboot": "Neustarten!",
         "Cancel": "@:base.Cancel",
-        "RebootOpenDTU": "OpenDTU neu starten",
+        "RebootOpenDTU": "OpenDTU-OnBattery neu starten",
         "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/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a> zu melden."
+        "RebootHint": "<b>Hinweis:</b> Ein manueller Neustart muss normalerweise nicht durchgeführt werden. OpenDTU-OnBattery 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/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a> zu melden."
     },
     "dtuadmin": {
         "DtuSettings": "DTU-Einstellungen",
         "DtuConfiguration": "DTU-Konfiguration",
-        "Serial": "Seriennummer:",
+        "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": "Abfrageintervall:",
+        "PollInterval": "Abfrageintervall",
         "VerboseLogging": "@:base.VerboseLogging",
         "Seconds": "Sekunden",
-        "NrfPaLevel": "NRF24 Sendeleistung:",
-        "CmtPaLevel": "CMT2300A Sendeleistung:",
+        "NrfPaLevel": "NRF24 Sendeleistung",
+        "CmtPaLevel": "CMT2300A Sendeleistung",
         "NrfPaLevelHint": "Verwendet für HM-Wechselrichter. Stellen Sie sicher, dass Ihre Stromversorgung stabil genug ist, bevor Sie die Sendeleistung erhöhen.",
         "CmtPaLevelHint": "Verwendet für HMS/HMT-Wechselrichter. Stellen Sie sicher, dass Ihre Stromversorgung stabil genug ist, bevor Sie die Sendeleistung erhöhen.",
-        "CmtCountry": "CMT2300A Region/Land:",
+        "CmtCountry": "CMT2300A Region/Land",
         "CmtCountryHint": "Jedes Land hat unterschiedliche Frequenzzuteilungen.",
         "country_0": "Europa ({min}MHz - {max}MHz)",
         "country_1": "Nordamerika ({min}MHz - {max}MHz)",
         "country_2": "Brasilien ({min}MHz - {max}MHz)",
-        "CmtFrequency": "CMT2300A Frequenz:",
+        "CmtFrequency": "CMT2300A Frequenz",
         "CmtFrequencyHint": "Stelle sicher, dass nur Frequenzen verwendet werden, welche im entsprechenden Land erlaubt sind! Nach einer Frequenzänderung kann es bis zu 15min dauern bis eine Verbindung hergestellt wird.",
         "CmtFrequencyWarning": "Die gewählte Frequenz liegt außerhalb des zulässigen Bereichs in der gewählten Region/dem Land. Vergewissere dich, dass mit dieser Auswahl keine lokalen Regularien verletzt werden.",
         "MHz": "{mhz} MHz",
@@ -486,8 +486,8 @@
     "securityadmin": {
         "SecuritySettings": "Sicherheitseinstellungen",
         "AdminPassword": "Administrator-Passwort",
-        "Password": "Passwort:",
-        "RepeatPassword": "Passwort wiederholen:",
+        "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 zwischen 8 und 64 Zeichen lang sein.",
         "Permissions": "Berechtigungen",
         "ReadOnly": "Nur-Lese-Zugriff auf die Weboberfläche ohne Passwort zulassen"
@@ -495,40 +495,40 @@
     "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:",
+        "TimeServer": "Zeitserver",
+        "TimeServerHint": "Der Standardwert ist in Ordnung, solange OpenDTU-OnBattery direkten Zugang zum Internet hat.",
+        "Timezone": "Zeitzone",
+        "TimezoneConfig": "Zeitzonenkonfiguration",
         "LocationConfiguration": "Standortkonfiguration",
-        "Longitude": "Längengrad:",
-        "Latitude": "Breitengrad:",
-        "SunSetType": "Dämmerungstyp:",
+        "Longitude": "Längengrad",
+        "Latitude": "Breitengrad",
+        "SunSetType": "Dämmerungstyp",
         "SunSetTypeHint": "Beeinflusst die Tag/Nacht Berechnung. Es kann bis zu einer Minute dauern bis der neue Typ angewendet wurde.",
         "OFFICIAL": "Standard Dämmerung (90.8°)",
         "NAUTICAL": "Nautische Dämmerung (102°)",
         "CIVIL": "Bürgerliche Dämmerung (96°)",
         "ASTONOMICAL": "Astronomische Dämmerung (108°)",
         "ManualTimeSynchronization": "Manuelle Zeitsynchronisation",
-        "CurrentOpenDtuTime": "Aktuelle OpenDTU-Zeit:",
-        "CurrentLocalTime": "Aktuelle lokale Zeit:",
+        "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."
+        "SynchronizeTimeHint": "<b>Hinweis:</b> Sie können die manuelle Zeitsynchronisation verwenden, um die aktuelle Zeit von OpenDTU-OnBattery 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": "Netzwerkeinstellungen",
         "WifiConfiguration": "WLAN-Konfiguration",
-        "WifiSsid": "WLAN-SSID:",
-        "WifiPassword": "WLAN-Passwort:",
-        "Hostname": "Hostname:",
+        "WifiSsid": "WLAN-SSID",
+        "WifiPassword": "WLAN-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}:",
+        "IpAddress": "IP-Adresse",
+        "Netmask": "Netzmaske",
+        "DefaultGateway": "Standardgateway",
+        "Dns": "DNS-Server {num}",
         "AdminAp": "WLAN-Konfiguration (Admin AccessPoint)",
-        "ApTimeout": "AccessPoint Zeitlimit:",
+        "ApTimeout": "AccessPoint Zeitlimit",
         "ApTimeoutHint": "Zeit die der AccessPoint offen gehalten wird. Ein Wert von 0 bedeutet unendlich.",
         "Minutes": "Minuten",
         "EnableMdns": "mDNS aktivieren",
@@ -545,38 +545,38 @@
         "VerboseLogging": "@:base.VerboseLogging",
         "EnableHass": "Home Assistant MQTT-Auto-Discovery aktivieren",
         "MqttBrokerParameter": "MQTT-Broker-Parameter",
-        "Hostname": "Hostname:",
+        "Hostname": "Hostname",
         "HostnameHint": "Hostname oder IP-Adresse",
-        "Port": "Port:",
-        "ClientId": "Client ID:",
-        "Username": "Benutzername:",
+        "Port": "Port",
+        "ClientId": "Client ID",
+        "Username": "Benutzername",
         "UsernameHint": "Benutzername, leer lassen für anonyme Verbindung",
-        "Password": "Passwort:",
+        "Password": "Passwort",
         "PasswordHint": "Passwort, leer lassen für anonyme Verbindung",
-        "BaseTopic": "Basis-Topic:",
+        "BaseTopic": "Basis-Topic",
         "BaseTopicHint": "Basis-Topic, wird allen veröffentlichten Themen vorangestellt (z.B. inverter/)",
-        "PublishInterval": "Veröffentlichungsintervall:",
+        "PublishInterval": "Veröffentlichungsintervall",
         "Seconds": "Sekunden",
         "CleanSession": "CleanSession Flag aktivieren",
         "EnableRetain": "Retain Flag aktivieren",
         "EnableTls": "TLS aktivieren",
-        "RootCa": "CA-Root-Zertifikat (Standard Letsencrypt):",
+        "RootCa": "CA-Root-Zertifikat (Standard Letsencrypt)",
         "TlsCertLoginEnable": "TLS Zertifikat Login",
-        "ClientCert": "TLS Client-Zertifikat:",
-        "ClientKey": "TLS Client-Key:",
+        "ClientCert": "TLS Client-Zertifikat",
+        "ClientKey": "TLS Client-Key",
         "LwtParameters": "LWT-Parameter",
-        "LwtTopic": "LWT-Topic:",
+        "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",
-        "LwtQos": "QoS (Quality of Service):",
+        "LwtOnline": "LWT-Online-Nachricht",
+        "LwtOnlineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU-OnBattery online ist",
+        "LwtOffline": "LWT-Offline-Nachricht",
+        "LwtOfflineHint": "Nachricht, die im LWT-Topic veröffentlicht wird, wenn OpenDTU-OnBattery offline ist",
+        "LwtQos": "QoS (Quality of Service)",
         "QOS0": "0 (Höchstens einmal)",
         "QOS1": "1 (Mindestens einmal)",
         "QOS2": "2 (Exakt einmal)",
         "HassParameters": "Home Assistant MQTT-Auto-Discovery-Parameter",
-        "HassPrefixTopic": "Präfix Topic:",
+        "HassPrefixTopic": "Präfix Topic",
         "HassPrefixTopicHint": "The prefix for the discovery topic",
         "HassRetain": "Retain Flag aktivieren",
         "HassExpire": "Ablauffunktion aktivieren",
@@ -770,7 +770,7 @@
         "StringYtOffset": "Ertragsversatz String {num}:",
         "StringYtOffsetHint": "Dieser Offset wird beim Auslesen des Gesamtertragswertes des Wechselrichters angewendet. Damit kann der Gesamtertrag des Wechselrichters auf Null gesetzt werden, wenn ein gebrauchter Wechselrichter verwendet wird.",
         "InverterHint": "*) Geben Sie die W<sub>p</sub> des Ports ein, um die Einstrahlung zu errechnen.",
-        "ReachableThreshold": "Erreichbarkeit Schwellenwert:",
+        "ReachableThreshold": "Erreichbarkeit Schwellenwert",
         "ReachableThresholdHint": "Legt fest, wie viele Anfragen fehlschlagen dürfen, bis der Wechselrichter als unerreichbar eingestuft wird.",
         "ZeroRuntime": "Nulle Laufzeit Daten",
         "ZeroRuntimeHint": "Nulle Laufzeit Daten (keine Ertragsdaten), wenn der Wechselrichter nicht erreichbar ist.",
@@ -794,7 +794,7 @@
         "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.",
+        "RestoreHint": "<b>Hinweis:</b> Bei diesem Vorgang wird die Konfigurationsdatei durch die wiederhergestellte Konfiguration ersetzt und OpenDTU-OnBattery 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.",
@@ -832,7 +832,7 @@
         "ProjectOriginBody1": "OpenDTU-OnBattery ist eine Erweiterung von OpenDTU. Das Basis-Projekt OpenDTU wurde aus <a href=\"https://www.mikrocontroller.net/topic/525778\" target=\"_blank\">dieser Diskussion (mikrocontroller.net)</a> heraus gestartet.",
         "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.",
+        "ProjectOriginBody4": "OpenDTU und OpenDTU-OnBattery sind 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 <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/releases\" target=\"_blank\">Github</a> zu finden.",
         "ErrorReporting": "Fehlerberichte",
@@ -851,37 +851,36 @@
         "DeviceManager": "Hardware-Einstellungen",
         "ParseError": "Syntaxfehler in 'pin_mapping.json': {error}",
         "PinAssignment": "Anschlusseinstellungen",
-        "SelectedProfile": "Ausgewähltes Profil:",
+        "SelectedProfile": "Ausgewähltes Profil",
         "DefaultProfile": "(Standardeinstellungen)",
         "ProfileHint": "Ihr Gerät reagiert möglicherweise nicht mehr, wenn Sie ein inkompatibles Profil wählen. In diesem Fall müssen Sie eine Löschung über das serielle Interface durchführen.",
         "Display": "Display",
-        "PowerSafe": "Ausschalten wenn kein Inverter erreichbar:",
+        "PowerSafe": "Ausschalten wenn kein Inverter erreichbar",
         "PowerSafeHint": "Schaltet das Display aus, wenn kein Wechselrichter Strom erzeugt",
-        "Screensaver": "OLED-Schutz gegen Einbrennen:",
+        "Screensaver": "OLED-Schutz gegen Einbrennen",
         "ScreensaverHint": "Bewegt die Ausgabe bei jeder Aktualisierung um ein Einbrennen zu verhindern (v. a. für OLED-Displays nützlich)",
-        "DiagramMode": "Diagramm Modus:",
+        "DiagramMode": "Diagramm Modus",
         "off": "Deaktiviert",
         "small": "Klein",
         "fullscreen": "Vollbild",
-        "DiagramDuration": "Diagramm Periode:",
+        "DiagramDuration": "Diagramm Periode",
         "DiagramDurationHint": "Die Zeitperiode welche im Diagramm dargestellt wird.",
         "Seconds": "Sekunden",
-        "Contrast": "Kontrast ({contrast}):",
-        "Rotation": "Rotation:",
+        "Contrast": "Kontrast ({contrast})",
+        "Rotation": "Rotation",
         "rot0": "Keine Rotation",
         "rot90": "90 Grad Drehung",
         "rot180": "180 Grad Drehung",
         "rot270": "270 Grad Drehung",
-        "DisplayLanguage": "Displaysprache:",
+        "DisplayLanguage": "Displaysprache",
         "en": "Englisch",
         "de": "Deutsch",
         "fr": "Französisch",
         "Leds": "LEDs",
-        "EqualBrightness": "Gleiche Helligkeit:",
-        "LedBrightness": "LED {led} Helligkeit ({brightness}):"
+        "EqualBrightness": "Gleiche Helligkeit",
+        "LedBrightness": "LED {led} Helligkeit ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Anschlussübersicht",
         "Category": "Kategorie",
         "Name": "Name",
         "ValueSelected": "Ausgewählt",
@@ -918,9 +917,9 @@
         "SetOnline": "Limit setzen, CAN Bus verbunden",
         "LimitHint": "<b>Hinweis:</b> Spannungsbereich wenn CAN Bus nicht verbunden ist 48V-58.5V ",
         "Close": "Schließen",
-        "SetVoltageLimit": "Spannungslimit:",
-        "SetCurrentLimit": "Stromlimit:",
-        "CurrentLimit": "Aktuelles Limit: "
+        "SetVoltageLimit": "Spannungslimit",
+        "SetCurrentLimit": "Stromlimit",
+        "CurrentLimit": "Aktuelles Limit "
     },
     "acchargeradmin": {
         "ChargerSettings": "AC Ladegerät Einstellungen",
@@ -942,7 +941,8 @@
         "StopBatterySoCThreshold": "Laden bei SoC beenden",
         "StopBatterySoCThresholdHint": "Zur Verlängerung der Akku-Lebensdauer kann der Ladevorgang bei einem bestimmten SoC gestoppt werden.\nHinweis: Manche LiFePO-Akkus müssen gelegentlich voll geladen werden, um die SoC-Anzeige akkurat zu halten.",
         "Seconds": "@:base.Seconds",
-        "EnableEmergencyCharge": "Notfallladen: Batterie wird mit maximaler Leistung geladen wenn durch das Batterie BMS angefordert",
+        "EnableEmergencyCharge": "Notfallladen",
+        "EnableEmergencyChargeHint": "Batterie wird mit maximaler Leistung geladen wenn durch das Batterie BMS angefordert",
         "targetPowerConsumption": "Angestrebter Netzbezug",
         "targetPowerConsumptionHint": "Bei postiven Werten wird die eingestellte Leistung aus dem Stromnetz bezogen. Bei negativen Werten wird das Netzteil vorzeitig abgeschaltet."
     },
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 5e76c52ff..fb76b2dfb 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -454,28 +454,28 @@
         "PerformReboot": "Perform Reboot",
         "Reboot": "Reboot!",
         "Cancel": "@:base.Cancel",
-        "RebootOpenDTU": "Reboot OpenDTU",
+        "RebootOpenDTU": "Reboot OpenDTU-OnBattery",
         "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/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a>."
+        "RebootHint": "<b>Note:</b> A manual reboot does not normally have to be performed. OpenDTU-OnBattery 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/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a>."
     },
     "dtuadmin": {
         "DtuSettings": "DTU Settings",
         "DtuConfiguration": "DTU Configuration",
-        "Serial": "Serial:",
+        "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:",
+        "PollInterval": "Poll Interval",
         "VerboseLogging": "@:base.VerboseLogging",
         "Seconds": "Seconds",
-        "NrfPaLevel": "NRF24 Transmitting power:",
-        "CmtPaLevel": "CMT2300A Transmitting power:",
+        "NrfPaLevel": "NRF24 Transmitting power",
+        "CmtPaLevel": "CMT2300A Transmitting power",
         "NrfPaLevelHint": "Used for HM-Inverters. Make sure your power supply is stable enough before increasing the transmit power.",
         "CmtPaLevelHint": "Used for HMS/HMT-Inverters. Make sure your power supply is stable enough before increasing the transmit power.",
-        "CmtCountry": "CMT2300A Region/Country:",
+        "CmtCountry": "CMT2300A Region/Country",
         "CmtCountryHint": "Each country has different frequency allocations.",
         "country_0": "Europe ({min}MHz - {max}MHz)",
         "country_1": "North America ({min}MHz - {max}MHz)",
         "country_2": "Brazil ({min}MHz - {max}MHz)",
-        "CmtFrequency": "CMT2300A Frequency:",
+        "CmtFrequency": "CMT2300A Frequency",
         "CmtFrequencyHint": "Make sure to only use frequencies that are allowed in the respective country! After a frequency change, it can take up to 15min until a connection is established.",
         "CmtFrequencyWarning": "The selected frequency is outside the allowed range in your selected region/country. Make sure that this selection does not violate any local regulations.",
         "MHz": "{mhz} MHz",
@@ -488,8 +488,8 @@
     "securityadmin": {
         "SecuritySettings": "Security Settings",
         "AdminPassword": "Admin password",
-        "Password": "Password:",
-        "RepeatPassword": "Repeat 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 without password"
@@ -497,10 +497,10 @@
     "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:",
+        "TimeServer": "Time Server",
+        "TimeServerHint": "The default value is fine as long as OpenDTU-OnBattery has direct access to the internet.",
+        "Timezone": "Timezone",
+        "TimezoneConfig": "Timezone Config",
         "LocationConfiguration": "Location Configuration",
         "Longitude": "Longitude",
         "Latitude": "Latitude",
@@ -511,26 +511,26 @@
         "CIVIL": "Civil dawn (96°)",
         "ASTONOMICAL": "Astronomical dawn (108°)",
         "ManualTimeSynchronization": "Manual Time Synchronization",
-        "CurrentOpenDtuTime": "Current OpenDTU Time:",
-        "CurrentLocalTime": "Current Local Time:",
+        "CurrentOpenDtuTime": "Current OpenDTU-OnBattery 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."
+        "SynchronizeTimeHint": "<b>Hint:</b> You can use the manual time synchronization to set the current time of OpenDTU-OnBattery 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:",
+        "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}:",
+        "IpAddress": "IP Address",
+        "Netmask": "Netmask",
+        "DefaultGateway": "Default Gateway",
+        "Dns": "DNS Server {num}",
         "AdminAp": "WiFi Configuration (Admin AccessPoint)",
-        "ApTimeout": "AccessPoint Timeout:",
+        "ApTimeout": "AccessPoint Timeout",
         "ApTimeoutHint": "Time which the AccessPoint is kept open. A value of 0 means infinite.",
         "Minutes": "minutes",
         "EnableMdns": "Enable mDNS",
@@ -547,38 +547,38 @@
         "VerboseLogging": "@:base.VerboseLogging",
         "EnableHass": "Enable Home Assistant MQTT Auto Discovery",
         "MqttBrokerParameter": "MQTT Broker Parameter",
-        "Hostname": "Hostname:",
+        "Hostname": "Hostname",
         "HostnameHint": "Hostname or IP address",
-        "Port": "Port:",
-        "ClientId": "Client ID:",
-        "Username": "Username:",
+        "Port": "Port",
+        "ClientId": "Client ID",
+        "Username": "Username",
         "UsernameHint": "Username, leave empty for anonymous connection",
-        "Password": "Password:",
+        "Password": "Password",
         "PasswordHint": "Password, leave empty for anonymous connection",
-        "BaseTopic": "Base Topic:",
+        "BaseTopic": "Base Topic",
         "BaseTopicHint": "Base topic, will be prepend to all published topics (e.g. inverter/)",
-        "PublishInterval": "Publish Interval:",
+        "PublishInterval": "Publish Interval",
         "Seconds": "seconds",
         "CleanSession": "Enable CleanSession flag",
         "EnableRetain": "Enable Retain Flag",
         "EnableTls": "Enable TLS",
-        "RootCa": "CA-Root-Certificate (default Letsencrypt):",
+        "RootCa": "CA-Root-Certificate (default Letsencrypt)",
         "TlsCertLoginEnable": "Enable TLS Certificate Login",
-        "ClientCert": "TLS Client-Certificate:",
-        "ClientKey": "TLS Client-Key:",
+        "ClientCert": "TLS Client-Certificate",
+        "ClientKey": "TLS Client-Key",
         "LwtParameters": "LWT Parameters",
-        "LwtTopic": "LWT Topic:",
+        "LwtTopic": "LWT Topic",
         "LwtTopicHint": "LWT topic, will be append base topic",
-        "LwtOnline": "LWT Online message:",
+        "LwtOnline": "LWT Online message",
         "LwtOnlineHint": "Message that will be published to LWT topic when online",
-        "LwtOffline": "LWT Offline message:",
+        "LwtOffline": "LWT Offline message",
         "LwtOfflineHint": "Message that will be published to LWT topic when offline",
-        "LwtQos": "QoS (Quality of Service):",
+        "LwtQos": "QoS (Quality of Service)",
         "QOS0": "0 (At most once)",
         "QOS1": "1 (At least once)",
         "QOS2": "2 (Exactly once)",
         "HassParameters": "Home Assistant MQTT Auto Discovery Parameters",
-        "HassPrefixTopic": "Prefix Topic:",
+        "HassPrefixTopic": "Prefix Topic",
         "HassPrefixTopicHint": "The prefix for the discovery topic",
         "HassRetain": "Enable Retain Flag",
         "HassExpire": "Enable Expiration",
@@ -773,7 +773,7 @@
         "StringYtOffset": "Yield total offset string {num}:",
         "StringYtOffsetHint": "This offset is applied the read yield total value from the inverter. This can be used to set the yield total of the inverter to zero if a used inverter is used. But you can still try polling data.",
         "InverterHint": "*) Enter the W<sub>p</sub> of the channel to calculate irradiation.",
-        "ReachableThreshold": "Reachable Threshold:",
+        "ReachableThreshold": "Reachable Threshold",
         "ReachableThresholdHint": "Defines how many requests are allowed to fail until the inverter is treated is not reachable.",
         "ZeroRuntime": "Zero runtime data",
         "ZeroRuntimeHint": "Zero runtime data (no yield data) if inverter becomes unreachable.",
@@ -797,7 +797,7 @@
         "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.",
+        "RestoreHint": "<b>Note:</b> This operation replaces the configuration file with the restored configuration and restarts OpenDTU-OnBattery 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.",
@@ -835,7 +835,7 @@
         "ProjectOriginBody1": "OpenDTU-OnBattery is a fork of OpenDTU. The upstream project OpenDTU 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.",
+        "ProjectOriginBody4": "OpenDTU and OpenDTU-OnBattery are freely available. If you paid money for the software, you probably got ripped off.",
         "NewsUpdates": "News & Updates",
         "NewsUpdatesBody": "New updates can be found on <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/releases\" target=\"_blank\">Github</a>.",
         "ErrorReporting": "Error Reporting",
@@ -854,37 +854,36 @@
         "DeviceManager": "Device-Manager",
         "ParseError": "Parse error in 'pin_mapping.json': {error}",
         "PinAssignment": "Connection settings",
-        "SelectedProfile": "Selected profile:",
+        "SelectedProfile": "Selected profile",
         "DefaultProfile": "(Default settings)",
         "ProfileHint": "Your device may stop responding if you select an incompatible profile. In this case, you must perform a deletion via the serial interface.",
         "Display": "Display",
-        "PowerSafe": "Switch off if no solar:",
+        "PowerSafe": "Switch off if no solar",
         "PowerSafeHint": "Turn off the display if no inverter is producing.",
-        "Screensaver": "OLED Anti burn-in:",
+        "Screensaver": "OLED Anti burn-in",
         "ScreensaverHint": "Move the display a little bit on each update to prevent burn-in. (Useful especially for OLED displays)",
-        "DiagramMode": "Diagram mode:",
+        "DiagramMode": "Diagram mode",
         "off": "Off",
         "small": "Small",
         "fullscreen": "Fullscreen",
-        "DiagramDuration": "Diagram duration:",
+        "DiagramDuration": "Diagram duration",
         "DiagramDurationHint": "The time period which is shown in the diagram.",
         "Seconds": "Seconds",
-        "Contrast": "Contrast ({contrast}):",
-        "Rotation": "Rotation:",
+        "Contrast": "Contrast ({contrast})",
+        "Rotation": "Rotation",
         "rot0": "No rotation",
         "rot90": "90 degree rotation",
         "rot180": "180 degree rotation",
         "rot270": "270 degree rotation",
-        "DisplayLanguage": "Display language:",
+        "DisplayLanguage": "Display language",
         "en": "English",
         "de": "German",
         "fr": "French",
         "Leds": "LEDs",
-        "EqualBrightness": "Equal brightness:",
-        "LedBrightness": "LED {led} brightness ({brightness}):"
+        "EqualBrightness": "Equal brightness",
+        "LedBrightness": "LED {led} brightness ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Connection overview",
         "Category": "Category",
         "Name": "Name",
         "Number": "Number",
@@ -922,9 +921,9 @@
         "SetOnline": "Set limit, CAN bus connected",
         "LimitHint": "<b>Hint:</b> CAN bus not connected voltage limit is 48V-58.5V.",
         "Close": "close",
-        "SetVoltageLimit": "Voltage limit:",
-        "SetCurrentLimit": "Current limit:",
-        "CurrentLimit": "Current limit:"
+        "SetVoltageLimit": "Voltage limit",
+        "SetCurrentLimit": "Current limit",
+        "CurrentLimit": "Current limit"
     },
     "acchargeradmin": {
         "ChargerSettings": "AC Charger Settings",
@@ -946,7 +945,8 @@
         "StopBatterySoCThreshold": "Stop charging at SoC",
         "StopBatterySoCThresholdHint": "To prolong the battery's lifespan, charging can be stopped at a certain SoC level.\nHint: In order to keep the SoC reading accurate, some LiFePO cells must be charged to full capacity regularly.",
         "Seconds": "@:base.Seconds",
-        "EnableEmergencyCharge": "Emergency charge. Battery charged with maximum power if requested by Battery BMS",
+        "EnableEmergencyCharge": "Emergency charge",
+        "EnableEmergencyChargeHint": "Battery charged with maximum power if requested by Battery BMS",
         "targetPowerConsumption": "Target power consumption",
         "targetPowerConsumptionHint": "Postitive values use grid power to charge the battery. Negative values result in early shutdown"
     },
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index 37e107ac1..4ff30aa39 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -469,9 +469,9 @@
         "PerformReboot": "Effectuer un redémarrage",
         "Reboot": "Redémarrer !",
         "Cancel": "@:base.Cancel",
-        "RebootOpenDTU": "Redémarrer OpenDTU",
+        "RebootOpenDTU": "Redémarrer OpenDTU-OnBattery",
         "RebootQuestion": "Voulez-vous vraiment redémarrer l'appareil ?",
-        "RebootHint": "<b>Astuce :</b> Normalement, il n'est pas nécessaire de procéder à un redémarrage manuel. OpenDTU effectue automatiquement tout redémarrage nécessaire (par exemple, après une mise à jour du firmware). Les paramètres sont également adoptés sans redémarrage. Si vous devez redémarrer en raison d'une erreur, veuillez envisager de la signaler à l'adresse suivante <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a>."
+        "RebootHint": "<b>Astuce :</b> Normalement, il n'est pas nécessaire de procéder à un redémarrage manuel. OpenDTU-OnBattery effectue automatiquement tout redémarrage nécessaire (par exemple, après une mise à jour du firmware). Les paramètres sont également adoptés sans redémarrage. Si vous devez redémarrer en raison d'une erreur, veuillez envisager de la signaler à l'adresse suivante <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/issues\" class=\"alert-link\" target=\"_blank\">Github</a>."
     },
     "dtuadmin": {
         "DtuSettings": "Paramètres du DTU",
@@ -485,12 +485,12 @@
         "CmtPaLevel": "CMT2300A Niveau de puissance d'émission",
         "NrfPaLevelHint": "Used for HM-Inverters. Assurez-vous que votre alimentation est suffisamment stable avant d'augmenter la puissance d'émission.",
         "CmtPaLevelHint": "Used for HMS/HMT-Inverters. Assurez-vous que votre alimentation est suffisamment stable avant d'augmenter la puissance d'émission.",
-        "CmtCountry": "CMT2300A Region/Country:",
+        "CmtCountry": "CMT2300A Region/Country",
         "CmtCountryHint": "Each country has different frequency allocations.",
         "country_0": "Europe ({min}MHz - {max}MHz)",
         "country_1": "North America ({min}MHz - {max}MHz)",
         "country_2": "Brazil ({min}MHz - {max}MHz)",
-        "CmtFrequency": "CMT2300A Frequency:",
+        "CmtFrequency": "CMT2300A Frequency",
         "CmtFrequencyHint": "Make sure to only use frequencies that are allowed in the respective country! After a frequency change, it can take up to 15min until a connection is established.",
         "CmtFrequencyWarning": "The selected frequency is outside the allowed range in your selected region/country. Make sure that this selection does not violate any local regulations.",
         "MHz": "{mhz} MHz",
@@ -513,7 +513,7 @@
         "NtpSettings": "Paramètres NTP",
         "NtpConfiguration": "Configuration du protocole NTP",
         "TimeServer": "Serveur horaire",
-        "TimeServerHint": "La valeur par défaut convient tant que OpenDTU a un accès direct à Internet.",
+        "TimeServerHint": "La valeur par défaut convient tant que OpenDTU-OnBattery a un accès direct à Internet.",
         "Timezone": "Fuseau horaire",
         "TimezoneConfig": "Configuration du fuseau horaire",
         "LocationConfiguration": "Géolocalisation",
@@ -526,10 +526,10 @@
         "CIVIL": "Civil dawn (96°)",
         "ASTONOMICAL": "Astronomical dawn (108°)",
         "ManualTimeSynchronization": "Synchronisation manuelle de l'heure",
-        "CurrentOpenDtuTime": "Heure actuelle de l'OpenDTU",
+        "CurrentOpenDtuTime": "Heure actuelle de l'OpenDTU-OnBattery",
         "CurrentLocalTime": "Heure locale actuelle",
         "SynchronizeTime": "Synchroniser l'heure",
-        "SynchronizeTimeHint": "<b>Astuce :</b> Vous pouvez utiliser la synchronisation horaire manuelle pour définir l'heure actuelle d'OpenDTU si aucun serveur NTP n'est disponible. Mais attention, en cas de mise sous tension, l'heure est perdue. Notez également que la précision de l'heure sera faussée, car elle ne peut pas être resynchronisée régulièrement et le microcontrôleur ESP32 ne dispose pas d'une horloge temps réel."
+        "SynchronizeTimeHint": "<b>Astuce :</b> Vous pouvez utiliser la synchronisation horaire manuelle pour définir l'heure actuelle d'OpenDTU-OnBattery si aucun serveur NTP n'est disponible. Mais attention, en cas de mise sous tension, l'heure est perdue. Notez également que la précision de l'heure sera faussée, car elle ne peut pas être resynchronisée régulièrement et le microcontrôleur ESP32 ne dispose pas d'une horloge temps réel."
     },
     "networkadmin": {
         "NetworkSettings": "Paramètres réseau",
@@ -561,10 +561,10 @@
         "Hostname": "Nom d'hôte",
         "HostnameHint": "Nom d'hôte ou adresse IP",
         "Port": "Port",
-        "ClientId": "Client ID:",
+        "ClientId": "Client ID",
         "Username": "Nom d'utilisateur",
         "UsernameHint": "Nom d'utilisateur, laisser vide pour une connexion anonyme",
-        "Password": "Mot de passe:",
+        "Password": "Mot de passe",
         "PasswordHint": "Mot de passe, laissez vide pour une connexion anonyme",
         "BaseTopic": "Sujet de base",
         "BaseTopicHint": "Sujet de base, qui sera ajouté en préambule à tous les sujets publiés (par exemple, inverter/).",
@@ -575,8 +575,8 @@
         "EnableTls": "Activer le TLS",
         "RootCa": "Certificat CA-Root (par défaut Letsencrypt)",
         "TlsCertLoginEnable": "Activer la connexion par certificat TLS",
-        "ClientCert": "Certificat client TLS:",
-        "ClientKey": "Clé client TLS:",
+        "ClientCert": "Certificat client TLS",
+        "ClientKey": "Clé client TLS",
         "LwtParameters": "Paramètres LWT",
         "LwtTopic": "Sujet LWT",
         "LwtTopicHint": "Sujet LWT, sera ajouté comme sujet de base",
@@ -584,7 +584,7 @@
         "LwtOnlineHint": "Message qui sera publié sur le sujet LWT lorsqu'il sera en ligne",
         "LwtOffline": "Message hors ligne de LWT",
         "LwtOfflineHint": "Message qui sera publié sur le sujet LWT lorsqu'il sera hors ligne",
-        "LwtQos": "QoS (Quality of Service):",
+        "LwtQos": "QoS (Quality of Service)",
         "QOS0": "0 (Au maximum une fois)",
         "QOS1": "1 (Au moins une fois)",
         "QOS2": "2 (Exactement une fois)",
@@ -694,7 +694,7 @@
         "RestoreHeader": "Restaurer le fichier de configuration",
         "Back": "Retour",
         "UploadSuccess": "Succès du téléversement",
-        "RestoreHint": "<b>Note :</b> Cette opération remplace le fichier de configuration par la configuration restaurée et redémarre OpenDTU pour appliquer tous les paramètres.",
+        "RestoreHint": "<b>Note :</b> Cette opération remplace le fichier de configuration par la configuration restaurée et redémarre OpenDTU-OnBattery pour appliquer tous les paramètres.",
         "ResetHeader": "Effectuer une réinitialisation d'usine",
         "FactoryResetButton": "Restaurer les paramètres d'usine",
         "ResetHint": "<b>Note :</b> Cliquez sur \"Restaurer les paramètres d'usine\" pour restaurer et initialiser les paramètres d'usine par défaut et redémarrer.",
@@ -782,7 +782,7 @@
         "ProjectOriginBody1": "Ce projet a été démarré suite à cette discussion <a href=\"https://www.mikrocontroller.net/topic/525778\" target=\"_blank\">(Mikrocontroller.net)</a>.",
         "ProjectOriginBody2": "Le protocole Hoymiles a été décrypté grâce aux efforts volontaires de nombreux participants. OpenDTU, entre autres, a été développé sur la base de ce travail. Le projet est sous licence Open Source (<a href=\"https://www.gnu.de/documents/gpl-2.0.de.html\" target=\"_blank\">GNU General Public License version 2</a>).",
         "ProjectOriginBody3": "Le logiciel a été développé au mieux de nos connaissances et de nos convictions. Néanmoins, aucune responsabilité ne peut être acceptée en cas de dysfonctionnement ou de perte de garantie de l'onduleur.",
-        "ProjectOriginBody4": "OpenDTU est disponible gratuitement. Si vous avez payé pour le logiciel, vous avez probablement été arnaqué.",
+        "ProjectOriginBody4": "OpenDTU et OpenDTU-OnBattery sont disponible gratuitement. Si vous avez payé pour le logiciel, vous avez probablement été arnaqué.",
         "NewsUpdates": "Actualités et mises à jour",
         "NewsUpdatesBody": "Les nouvelles mises à jour peuvent être trouvées sur <a href=\"https://github.com/hoylabs/OpenDTU-OnBattery/releases\" target=\"_blank\">Github</a>.",
         "ErrorReporting": "Rapport d'erreurs",
@@ -809,15 +809,15 @@
         "PowerSafeHint": "Eteindre l'écran si aucun onduleur n'est en production.",
         "Screensaver": "OLED Anti burn-in",
         "ScreensaverHint": "Déplacez un peu l'écran à chaque mise à jour pour éviter le phénomène de brûlure. (Utile surtout pour les écrans OLED)",
-        "DiagramMode": "Diagram mode:",
+        "DiagramMode": "Diagram mode",
         "off": "Off",
         "small": "Small",
         "fullscreen": "Fullscreen",
-        "DiagramDuration": "Diagram duration:",
+        "DiagramDuration": "Diagram duration",
         "DiagramDurationHint": "The time period which is shown in the diagram.",
         "Seconds": "Seconds",
-        "Contrast": "Contraste ({contrast}):",
-        "Rotation": "Rotation:",
+        "Contrast": "Contraste ({contrast})",
+        "Rotation": "Rotation",
         "rot0": "Pas de rotation",
         "rot90": "Rotation de 90 degrés",
         "rot180": "Rotation de 180 degrés",
@@ -827,11 +827,10 @@
         "de": "Allemand",
         "fr": "Français",
         "Leds": "LEDs",
-        "EqualBrightness": "Même luminosité:",
-        "LedBrightness": "LED {led} luminosité ({brightness}):"
+        "EqualBrightness": "Même luminosité",
+        "LedBrightness": "LED {led} luminosité ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Vue d'ensemble des connexions",
         "Category": "Catégorie",
         "Name": "Nom",
         "ValueSelected": "Sélectionné",
@@ -868,9 +867,9 @@
         "SetOnline": "Set limit, CAN bus connected",
         "LimitHint": "<b>Hint:</b> CAN bus not connected voltage limit is 48V-58.5V.",
         "Close": "close",
-        "SetVoltageLimit": "Voltage limit:",
-        "SetCurrentLimit": "Current limit:",
-        "CurrentLimit": "Current limit:"
+        "SetVoltageLimit": "Voltage limit",
+        "SetCurrentLimit": "Current limit",
+        "CurrentLimit": "Current limit"
     },
     "acchargeradmin": {
         "ChargerSettings": "AC Charger Settings",
@@ -892,7 +891,8 @@
         "StopBatterySoCThreshold": "Stop charging at SoC",
         "StopBatterySoCThresholdHint": "To prolong the battery's lifespan, charging can be stopped at a certain SoC level.\nHint: In order to keep the SoC reading accurate, some LiFePO cells must be charged to full capacity regularly.",
         "Seconds": "@:base.Seconds",
-        "EnableEmergencyCharge": "Emergency charge. Battery charged with maximum power if requested by Battery BMS",
+        "EnableEmergencyCharge": "Emergency charge",
+        "EnableEmergencyChargeHint": "Battery charged with maximum power if requested by Battery BMS",
         "targetPowerConsumption": "Target power consumption",
         "targetPowerConsumptionHint": "Postitive values use grid power to charge the battery. Negative values result in early shutdown"
     },
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index c96ca25f8..f752804bc 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -28,6 +28,13 @@ import { createRouter, createWebHistory } from 'vue-router';
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     linkActiveClass: 'active',
+    scrollBehavior() {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({ top: 0 });
+            }, 100);
+        });
+    },
     routes: [
         {
             path: '/',
diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index f97d33894..d654b41ac 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -4,3 +4,63 @@
 .container-fluid .row {
     font-feature-settings: 'tnum';
 }
+
+@include media-breakpoint-up(sm) {
+    label.col-form-label,
+    label.form-check-label {
+        text-align: end;
+    }
+}
+
+table.table tr:last-child th,
+table.table tr:last-child td {
+    border-bottom: 0;
+}
+
+table.table {
+    margin-bottom: 0;
+}
+
+div.card.card-table {
+    // prevent tables in cards from
+    // messing up the bottom corner radii
+    overflow: hidden;
+}
+
+div.card.card-table tr > :first-child {
+    padding-left: var(--bs-card-cap-padding-x);
+}
+
+div.card.card-table tr > :last-child {
+    padding-right: var(--bs-card-cap-padding-x);
+}
+
+div.accordion-item.accordion-table tr > :first-child {
+    padding-left: var(--bs-accordion-btn-padding-x);
+}
+
+div.accordion-item.accordion-table div.accordion-body {
+    padding-top: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+div.card.card-table div.card-body {
+    padding: 0;
+}
+
+div.card div.card-body > :last-child {
+    margin-bottom: auto !important;
+}
+
+div.card.card-table table .value {
+    text-align: right;
+    padding-right: 0;
+}
+
+// blend cards into tabbed navigation (device admin view)
+div.card-tabbed {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
diff --git a/webapp/src/views/AcChargerAdminView.vue b/webapp/src/views/AcChargerAdminView.vue
index d8ae820e6..44193bcf8 100644
--- a/webapp/src/views/AcChargerAdminView.vue
+++ b/webapp/src/views/AcChargerAdminView.vue
@@ -13,195 +13,140 @@
                     wide
                 />
 
-                <div class="row mb-3" v-show="acChargerConfigList.enabled">
-                    <label class="col-sm-4 col-form-label">
-                        {{ $t('acchargeradmin.CanControllerFrequency') }}
-                    </label>
-                    <div class="col-sm-8">
-                        <select class="form-select" v-model="acChargerConfigList.can_controller_frequency">
-                            <option
-                                v-for="frequency in frequencyTypeList"
-                                :key="frequency.key"
-                                :value="frequency.value"
-                            >
-                                {{ frequency.key }} MHz
-                            </option>
-                        </select>
+                <template v-if="acChargerConfigList.enabled">
+                    <div class="row mb-3">
+                        <label class="col-sm-4 col-form-label">
+                            {{ $t('acchargeradmin.CanControllerFrequency') }}
+                        </label>
+                        <div class="col-sm-8">
+                            <select class="form-select" v-model="acChargerConfigList.can_controller_frequency">
+                                <option
+                                    v-for="frequency in frequencyTypeList"
+                                    :key="frequency.key"
+                                    :value="frequency.value"
+                                >
+                                    {{ frequency.key }} MHz
+                                </option>
+                            </select>
+                        </div>
                     </div>
-                </div>
 
+                    <InputElement
+                        :label="$t('acchargeradmin.VerboseLogging')"
+                        v-model="acChargerConfigList.verbose_logging"
+                        type="checkbox"
+                        wide
+                    />
+
+                    <InputElement
+                        :label="$t('acchargeradmin.EnableAutoPower')"
+                        v-model="acChargerConfigList.auto_power_enabled"
+                        type="checkbox"
+                        wide
+                    />
+
+                    <InputElement
+                        v-if="acChargerConfigList.auto_power_enabled"
+                        :label="$t('acchargeradmin.EnableBatterySoCLimits')"
+                        v-model="acChargerConfigList.auto_power_batterysoc_limits_enabled"
+                        type="checkbox"
+                        wide
+                    />
+
+                    <InputElement
+                        :label="$t('acchargeradmin.EnableEmergencyCharge')"
+                        :tooltip="$t('acchargeradmin.EnableEmergencyChargeHint')"
+                        v-model="acChargerConfigList.emergency_charge_enabled"
+                        type="checkbox"
+                        wide
+                    />
+                </template>
+            </CardElement>
+
+            <CardElement
+                :text="$t('acchargeradmin.Limits')"
+                textVariant="text-bg-primary"
+                add-space
+                v-if="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled"
+            >
                 <InputElement
-                    v-show="acChargerConfigList.enabled"
-                    :label="$t('acchargeradmin.VerboseLogging')"
-                    v-model="acChargerConfigList.verbose_logging"
-                    type="checkbox"
+                    :label="$t('acchargeradmin.VoltageLimit')"
+                    :tooltip="$t('acchargeradmin.stopVoltageLimitHint')"
+                    v-model="acChargerConfigList.voltage_limit"
+                    postfix="V"
+                    type="number"
                     wide
+                    required
+                    step="0.01"
+                    min="42"
+                    max="58.5"
                 />
 
                 <InputElement
-                    v-show="acChargerConfigList.enabled"
-                    :label="$t('acchargeradmin.EnableAutoPower')"
-                    v-model="acChargerConfigList.auto_power_enabled"
-                    type="checkbox"
+                    :label="$t('acchargeradmin.enableVoltageLimit')"
+                    :tooltip="$t('acchargeradmin.enableVoltageLimitHint')"
+                    v-model="acChargerConfigList.enable_voltage_limit"
+                    postfix="V"
+                    type="number"
                     wide
+                    required
+                    step="0.01"
+                    min="42"
+                    max="58.5"
                 />
 
                 <InputElement
-                    v-show="acChargerConfigList.enabled && acChargerConfigList.auto_power_enabled"
-                    :label="$t('acchargeradmin.EnableBatterySoCLimits')"
-                    v-model="acChargerConfigList.auto_power_batterysoc_limits_enabled"
-                    type="checkbox"
+                    :label="$t('acchargeradmin.lowerPowerLimit')"
+                    v-model="acChargerConfigList.lower_power_limit"
+                    postfix="W"
+                    type="number"
                     wide
+                    required
+                    min="50"
+                    max="3000"
                 />
 
                 <InputElement
-                    v-show="acChargerConfigList.enabled"
-                    :label="$t('acchargeradmin.EnableEmergencyCharge')"
-                    v-model="acChargerConfigList.emergency_charge_enabled"
-                    type="checkbox"
+                    :label="$t('acchargeradmin.upperPowerLimit')"
+                    :tooltip="$t('acchargeradmin.upperPowerLimitHint')"
+                    v-model="acChargerConfigList.upper_power_limit"
+                    postfix="W"
+                    type="number"
                     wide
+                    required
+                    min="100"
+                    max="3000"
                 />
 
-                <CardElement
-                    :text="$t('acchargeradmin.Limits')"
-                    textVariant="text-bg-primary"
-                    add-space
-                    v-show="acChargerConfigList.auto_power_enabled || acChargerConfigList.emergency_charge_enabled"
-                >
-                    <div class="row mb-3">
-                        <label for="voltageLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.VoltageLimit') }}:
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.stopVoltageLimitHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    step="0.01"
-                                    class="form-control"
-                                    id="voltageLimit"
-                                    placeholder="42"
-                                    v-model="acChargerConfigList.voltage_limit"
-                                    aria-describedby="voltageLimitDescription"
-                                    min="42"
-                                    max="58.5"
-                                    required
-                                />
-                                <span class="input-group-text" id="voltageLimitDescription">V</span>
-                            </div>
-                        </div>
-                        <label for="enableVoltageLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.enableVoltageLimit') }}:
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.enableVoltageLimitHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    step="0.01"
-                                    class="form-control"
-                                    id="enableVoltageLimit"
-                                    placeholder="42"
-                                    v-model="acChargerConfigList.enable_voltage_limit"
-                                    aria-describedby="enableVoltageLimitDescription"
-                                    min="42"
-                                    max="58.5"
-                                    required
-                                />
-                                <span class="input-group-text" id="enableVoltageLimitDescription">V</span>
-                            </div>
-                        </div>
-                        <label for="lowerPowerLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.lowerPowerLimit') }}:</label
-                        >
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    id="lowerPowerLimit"
-                                    placeholder="150"
-                                    v-model="acChargerConfigList.lower_power_limit"
-                                    aria-describedby="lowerPowerLimitDescription"
-                                    min="50"
-                                    max="3000"
-                                    required
-                                />
-                                <span class="input-group-text" id="lowerPowerLimitDescription">W</span>
-                            </div>
-                        </div>
-                        <label for="upperPowerLimit" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.upperPowerLimit') }}:
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.upperPowerLimitHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    id="upperPowerLimit"
-                                    placeholder="2000"
-                                    v-model="acChargerConfigList.upper_power_limit"
-                                    aria-describedby="upperPowerLimitDescription"
-                                    min="100"
-                                    max="3000"
-                                    required
-                                />
-                                <span class="input-group-text" id="upperPowerLimitDescription">W</span>
-                            </div>
-                        </div>
-                        <label for="targetPowerConsumption" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.targetPowerConsumption') }}:
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.targetPowerConsumptionHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    id="targetPowerConsumption"
-                                    placeholder="0"
-                                    v-model="acChargerConfigList.target_power_consumption"
-                                    aria-describedby="targetPowerConsumptionDescription"
-                                    required
-                                />
-                                <span class="input-group-text" id="targetPowerConsumptionDescription">W</span>
-                            </div>
-                        </div>
-                    </div>
-                </CardElement>
-                <CardElement
-                    :text="$t('acchargeradmin.BatterySoCLimits')"
-                    textVariant="text-bg-primary"
-                    add-space
-                    v-show="
-                        acChargerConfigList.auto_power_enabled &&
-                        acChargerConfigList.auto_power_batterysoc_limits_enabled
-                    "
-                >
-                    <div class="row mb-3">
-                        <label for="stopBatterySoCThreshold" class="col-sm-2 col-form-label"
-                            >{{ $t('acchargeradmin.StopBatterySoCThreshold') }}:
-                            <BIconInfoCircle v-tooltip :title="$t('acchargeradmin.StopBatterySoCThresholdHint')" />
-                        </label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <input
-                                    type="number"
-                                    class="form-control"
-                                    id="stopBatterySoCThreshold"
-                                    placeholder="95"
-                                    v-model="acChargerConfigList.stop_batterysoc_threshold"
-                                    aria-describedby="stopBatterySoCThresholdDescription"
-                                    min="2"
-                                    max="99"
-                                    required
-                                />
-                                <span class="input-group-text" id="stopBatterySoCThresholdDescription">%</span>
-                            </div>
-                        </div>
-                    </div>
-                </CardElement>
+                <InputElement
+                    :label="$t('acchargeradmin.targetPowerConsumption')"
+                    :tooltip="$t('acchargeradmin.targetPowerConsumptionHint')"
+                    v-model="acChargerConfigList.target_power_consumption"
+                    postfix="W"
+                    type="number"
+                    wide
+                    required
+                />
+            </CardElement>
+            <CardElement
+                :text="$t('acchargeradmin.BatterySoCLimits')"
+                textVariant="text-bg-primary"
+                add-space
+                v-if="
+                    acChargerConfigList.auto_power_enabled && acChargerConfigList.auto_power_batterysoc_limits_enabled
+                "
+            >
+                <InputElement
+                    :label="$t('acchargeradmin.StopBatterySoCThreshold')"
+                    :tooltip="$t('acchargeradmin.StopBatterySoCThresholdHint')"
+                    v-model="acChargerConfigList.stop_batterysoc_threshold"
+                    postfix="%"
+                    type="number"
+                    wide
+                    required
+                    min="2"
+                    max="99"
+                />
             </CardElement>
 
             <FormFooter @reload="getChargerConfig" />
@@ -215,7 +160,6 @@ import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
-import { BIconInfoCircle } from 'bootstrap-icons-vue';
 import type { AcChargerConfig } from '@/types/AcChargerConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -227,7 +171,6 @@ export default defineComponent({
         CardElement,
         FormFooter,
         InputElement,
-        BIconInfoCircle,
     },
     data() {
         return {
diff --git a/webapp/src/views/BatteryAdminView.vue b/webapp/src/views/BatteryAdminView.vue
index 46bd5da79..d0090a76b 100644
--- a/webapp/src/views/BatteryAdminView.vue
+++ b/webapp/src/views/BatteryAdminView.vue
@@ -13,30 +13,31 @@
                     wide
                 />
 
-                <InputElement
-                    v-show="batteryConfigList.enabled"
-                    :label="$t('batteryadmin.VerboseLogging')"
-                    v-model="batteryConfigList.verbose_logging"
-                    type="checkbox"
-                    wide
-                />
+                <template v-if="batteryConfigList.enabled">
+                    <InputElement
+                        :label="$t('batteryadmin.VerboseLogging')"
+                        v-model="batteryConfigList.verbose_logging"
+                        type="checkbox"
+                        wide
+                    />
 
-                <div class="row mb-3" v-show="batteryConfigList.enabled">
-                    <label class="col-sm-4 col-form-label">
-                        {{ $t('batteryadmin.Provider') }}
-                    </label>
-                    <div class="col-sm-8">
-                        <select class="form-select" v-model="batteryConfigList.provider">
-                            <option v-for="provider in providerTypeList" :key="provider.key" :value="provider.key">
-                                {{ $t(`batteryadmin.Provider` + provider.value) }}
-                            </option>
-                        </select>
+                    <div class="row mb-3">
+                        <label class="col-sm-4 col-form-label">
+                            {{ $t('batteryadmin.Provider') }}
+                        </label>
+                        <div class="col-sm-8">
+                            <select class="form-select" v-model="batteryConfigList.provider">
+                                <option v-for="provider in providerTypeList" :key="provider.key" :value="provider.key">
+                                    {{ $t(`batteryadmin.Provider` + provider.value) }}
+                                </option>
+                            </select>
+                        </div>
                     </div>
-                </div>
+                </template>
             </CardElement>
 
             <CardElement
-                v-show="batteryConfigList.enabled && batteryConfigList.provider == 1"
+                v-if="batteryConfigList.enabled && batteryConfigList.provider == 1"
                 :text="$t('batteryadmin.JkBmsConfiguration')"
                 textVariant="text-bg-primary"
                 addSpace
@@ -152,7 +153,7 @@
 
                     <InputElement
                         :label="$t('batteryadmin.DischargeCurrentLimitBelowSoc')"
-                        v-show="batteryConfigList.enabled"
+                        v-if="batteryConfigList.enabled"
                         v-model="batteryConfigList.discharge_current_limit_below_soc"
                         type="number"
                         min="0"
@@ -165,7 +166,7 @@
 
                     <InputElement
                         :label="$t('batteryadmin.DischargeCurrentLimitBelowVoltage')"
-                        v-show="batteryConfigList.enabled"
+                        v-if="batteryConfigList.enabled"
                         v-model="batteryConfigList.discharge_current_limit_below_voltage"
                         type="number"
                         min="0"
@@ -196,7 +197,7 @@
                             <div
                                 class="alert alert-secondary"
                                 role="alert"
-                                v-show="batteryConfigList.enabled"
+                                v-if="batteryConfigList.enabled"
                                 v-html="$t('batteryadmin.BatteryReportedDischargeCurrentLimitInfo')"
                             ></div>
 
diff --git a/webapp/src/views/DeviceAdminView.vue b/webapp/src/views/DeviceAdminView.vue
index 258ec5b2c..f49f0cec4 100644
--- a/webapp/src/views/DeviceAdminView.vue
+++ b/webapp/src/views/DeviceAdminView.vue
@@ -51,7 +51,7 @@
                     aria-labelledby="nav-pin-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <div class="row mb-3">
                                 <label for="inputPinProfile" class="col-sm-2 col-form-label">{{
@@ -78,19 +78,15 @@
                                 </div>
                             </div>
 
-                            <div class="row mb-3">
-                                <div class="col-sm-2"></div>
-                                <div class="col-sm-10">
-                                    <div
-                                        class="btn-group mb-2 me-2"
-                                        v-for="(doc, index) in pinMappingList.find(
-                                            (i) => i.name === deviceConfigList.curPin.name
-                                        )?.links"
-                                        :key="index"
-                                    >
-                                        <a :href="doc.url" class="btn btn-primary" target="_blank">{{ doc.name }}</a>
-                                    </div>
-                                </div>
+                            <div class="mb-3 d-flex justify-content-end gap-3" v-if="docLinks.length">
+                                <a
+                                    v-for="(doc, index) in docLinks"
+                                    :key="index"
+                                    :href="doc.url"
+                                    class="btn btn-primary"
+                                    target="_blank"
+                                    >{{ doc.name }}</a
+                                >
                             </div>
 
                             <div
@@ -116,7 +112,7 @@
                     aria-labelledby="nav-display-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <InputElement
                                 :label="$t('deviceadmin.PowerSafe')"
@@ -217,7 +213,7 @@
                     aria-labelledby="nav-leds-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <InputElement
                                 :label="$t('deviceadmin.EqualBrightness')"
@@ -313,6 +309,12 @@ export default defineComponent({
             this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[0].brightness));
         },
     },
+    computed: {
+        docLinks() {
+            const mapping = this.pinMappingList.find((i) => i.name === this.deviceConfigList.curPin.name);
+            return mapping?.links || [];
+        },
+    },
     methods: {
         getPinMappingList() {
             this.pinMappingLoading = true;
diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
index 668c3edee..74f33afb7 100644
--- a/webapp/src/views/DtuAdminView.vue
+++ b/webapp/src/views/DtuAdminView.vue
@@ -50,7 +50,7 @@
                         <BIconInfoCircle v-tooltip :title="$t('dtuadmin.CmtPaLevelHint')" />
                     </label>
                     <div class="col-sm-10">
-                        <div class="input-group mb-3">
+                        <div class="input-group">
                             <input
                                 type="range"
                                 class="form-control form-range"
@@ -91,7 +91,7 @@
                         <BIconInfoCircle v-tooltip :title="$t('dtuadmin.CmtFrequencyHint')" />
                     </label>
                     <div class="col-sm-10">
-                        <div class="input-group mb-3">
+                        <div class="input-group">
                             <input
                                 type="range"
                                 class="form-control form-range"
diff --git a/webapp/src/views/FirmwareUpgradeView.vue b/webapp/src/views/FirmwareUpgradeView.vue
index df8e43046..338e001e8 100644
--- a/webapp/src/views/FirmwareUpgradeView.vue
+++ b/webapp/src/views/FirmwareUpgradeView.vue
@@ -17,16 +17,15 @@
             <p class="h1 mb-2">
                 <BIconExclamationCircleFill />
             </p>
-
-            <span style="vertical-align: middle" class="ml-2">
-                {{ OTAError }}
-            </span>
-            <br />
-            <br />
-            <button class="btn btn-light" @click="clear"><BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}</button>
-            <button class="btn btn-primary" @click="retryOTA">
-                <BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }}
-            </button>
+            {{ OTAError }}
+            <div class="mt-3 d-flex gap-3 justify-content-center">
+                <button class="btn btn-light" @click="clear">
+                    <BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}
+                </button>
+                <button class="btn btn-primary" @click="retryOTA">
+                    <BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }}
+                </button>
+            </div>
         </CardElement>
 
         <CardElement
@@ -35,13 +34,8 @@
             center-content
             v-else-if="!loading && !uploading && OTASuccess"
         >
-            <span class="h1 mb-2">
-                <BIconCheckCircle />
-            </span>
-            <span> {{ $t('firmwareupgrade.OtaSuccess') }} </span>
-            <br />
-            <br />
-            <div class="text-center">
+            <BIconCheckCircle class="fs-1" />&nbsp;{{ $t('firmwareupgrade.OtaSuccess') }}
+            <div>
                 <div class="spinner-border" role="status">
                     <span class="visually-hidden"></span>
                 </div>
@@ -62,7 +56,7 @@
             center-content
             v-else-if="!loading && !uploading"
         >
-            <div class="form-group pt-2 mt-3">
+            <div class="form-group">
                 <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
             </div>
         </CardElement>
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index ba4eb0509..e50098fb7 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -17,7 +17,12 @@
         />
         <div class="row gy-3 mt-0">
             <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { display: 'none' } : {}]">
-                <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+                <div
+                    class="nav nav-pills row-cols-sm-1 gap-3"
+                    id="v-pills-tab"
+                    role="tablist"
+                    aria-orientation="vertical"
+                >
                     <button
                         v-for="inverter in inverterData"
                         :key="inverter.serial"
@@ -217,8 +222,8 @@
                                 </div>
                             </BootstrapAlert>
 
-                            <div class="accordion mt-5" id="accordionExample">
-                                <div class="accordion-item">
+                            <div class="accordion mt-5" id="accordionRadioStats">
+                                <div class="accordion-item accordion-table">
                                     <h2 class="accordion-header">
                                         <button
                                             class="accordion-button collapsed"
@@ -234,7 +239,7 @@
                                     <div
                                         id="collapseStats"
                                         class="accordion-collapse collapse"
-                                        data-bs-parent="#accordionExample"
+                                        data-bs-parent="#accordionRadioStats"
                                     >
                                         <div class="accordion-body">
                                             <table class="table table-striped table-hover">
@@ -309,23 +314,25 @@
                                                     </tr>
                                                 </tbody>
                                             </table>
-                                            <button
-                                                :disabled="!isLogged || performRadioStatsReset"
-                                                type="button"
-                                                class="btn btn-danger"
-                                                @click="onResetRadioStats(inverter.serial)"
-                                            >
-                                                <template v-if="!performRadioStatsReset">
-                                                    {{ $t('home.StatsReset') }}
-                                                </template>
-                                                <template v-else>
-                                                    <span
-                                                        class="spinner-border spinner-border-sm"
-                                                        aria-hidden="true"
-                                                    ></span>
-                                                    <span role="status"> {{ $t('home.StatsResetting') }}</span>
-                                                </template>
-                                            </button>
+                                            <div class="d-flex">
+                                                <button
+                                                    :disabled="!isLogged || performRadioStatsReset"
+                                                    type="button"
+                                                    class="btn btn-danger ms-auto me-3 mt-3"
+                                                    @click="onResetRadioStats(inverter.serial)"
+                                                >
+                                                    <template v-if="!performRadioStatsReset">
+                                                        <BIconArrowCounterclockwise />&nbsp;{{ $t('home.StatsReset') }}
+                                                    </template>
+                                                    <template v-else>
+                                                        <span
+                                                            class="spinner-border spinner-border-sm"
+                                                            aria-hidden="true"
+                                                        ></span>
+                                                        <span role="status">&nbsp;{{ $t('home.StatsResetting') }}</span>
+                                                    </template>
+                                                </button>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index 548c8ff54..68b3f72ea 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -20,13 +20,13 @@
                         required
                     />
                 </div>
-                <div class="ml-auto text-right">
-                    <button type="submit" class="btn btn-primary my-2">
+                <div class="d-flex my-3">
+                    <button type="submit" class="btn btn-primary ms-auto">
                         {{ $t('inverteradmin.Add') }}
                     </button>
                 </div>
-                <div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div>
             </form>
+            <div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div>
         </CardElement>
 
         <CardElement :text="$t('inverteradmin.InverterList')" textVariant="text-bg-primary" add-space>
@@ -81,8 +81,8 @@
                     </tbody>
                 </table>
             </div>
-            <div class="ml-auto text-right">
-                <button class="btn btn-primary my-2" @click="onSaveOrder()">
+            <div class="d-flex mt-1 mb-3">
+                <button class="btn btn-primary ms-auto" @click="onSaveOrder()">
                     {{ $t('inverteradmin.SaveOrder') }}
                 </button>
             </div>
@@ -267,7 +267,7 @@
             </div>
 
             <div
-                class="tab-pane fade show"
+                class="tab-pane fade show pt-3"
                 id="nav-advanced"
                 role="tabpanel"
                 aria-labelledby="nav-advanced-tab"
diff --git a/webapp/src/views/LoginView.vue b/webapp/src/views/LoginView.vue
index f24a791f5..aaa11bfc1 100644
--- a/webapp/src/views/LoginView.vue
+++ b/webapp/src/views/LoginView.vue
@@ -20,7 +20,7 @@
                         {{ $t('login.UsernameRequired') }}
                     </div>
                 </div>
-                <div class="form-group">
+                <div class="form-group mt-3">
                     <label htmlFor="password">{{ $t('login.Password') }}</label>
                     <input
                         type="password"
@@ -33,7 +33,7 @@
                         {{ $t('login.PasswordRequired') }}
                     </div>
                 </div>
-                <div class="form-group">
+                <div class="d-flex justify-content-end mt-3">
                     <button class="btn btn-primary" :disabled="dataLoading">
                         {{ $t('login.LoginButton') }}
                     </button>
diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index 0420a1fce..daa9fb4b8 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -14,7 +14,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_enabled"
+                    v-if="mqttConfigList.mqtt_enabled"
                     :label="$t('mqttadmin.VerboseLogging')"
                     v-model="mqttConfigList.mqtt_verbose_logging"
                     type="checkbox"
@@ -22,7 +22,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_enabled"
+                    v-if="mqttConfigList.mqtt_enabled"
                     :label="$t('mqttadmin.EnableHass')"
                     v-model="mqttConfigList.mqtt_hass_enabled"
                     type="checkbox"
@@ -34,7 +34,7 @@
                 :text="$t('mqttadmin.MqttBrokerParameter')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled"
+                v-if="mqttConfigList.mqtt_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.Hostname')"
@@ -107,7 +107,7 @@
                 <InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls"
+                    v-if="mqttConfigList.mqtt_tls"
                     :label="$t('mqttadmin.RootCa')"
                     v-model="mqttConfigList.mqtt_root_ca_cert"
                     type="textarea"
@@ -116,14 +116,14 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls"
+                    v-if="mqttConfigList.mqtt_tls"
                     :label="$t('mqttadmin.TlsCertLoginEnable')"
                     v-model="mqttConfigList.mqtt_tls_cert_login"
                     type="checkbox"
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    v-if="mqttConfigList.mqtt_tls_cert_login"
                     :label="$t('mqttadmin.ClientCert')"
                     v-model="mqttConfigList.mqtt_client_cert"
                     type="textarea"
@@ -132,7 +132,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    v-if="mqttConfigList.mqtt_tls_cert_login"
                     :label="$t('mqttadmin.ClientKey')"
                     v-model="mqttConfigList.mqtt_client_key"
                     type="textarea"
@@ -145,7 +145,7 @@
                 :text="$t('mqttadmin.LwtParameters')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled"
+                v-if="mqttConfigList.mqtt_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.LwtTopic')"
@@ -190,7 +190,7 @@
                 :text="$t('mqttadmin.HassParameters')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
+                v-if="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.HassPrefixTopic')"
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index c79a4366b..7aaed981a 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -5,7 +5,7 @@
         :show-reload="true"
         @reload="getMqttInfo"
     >
-        <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -89,11 +89,11 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-show="mqttDataList.mqtt_tls">
+                        <tr v-if="mqttDataList.mqtt_tls">
                             <th>{{ $t('mqttinfo.RootCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_root_ca_cert_info }}</td>
                         </tr>
-                        <tr>
+                        <tr v-if="mqttDataList.mqtt_tls">
                             <th>{{ $t('mqttinfo.TlsCertLogin') }}</th>
                             <td>
                                 <StatusBadge
@@ -103,7 +103,7 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-show="mqttDataList.mqtt_tls_cert_login">
+                        <tr v-if="mqttDataList.mqtt_tls && mqttDataList.mqtt_tls_cert_login">
                             <th>{{ $t('mqttinfo.ClientCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_client_cert_info }}</td>
                         </tr>
@@ -112,7 +112,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -165,7 +165,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index 058dfe322..dab84c952 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -26,7 +26,11 @@
                     type="text"
                     maxlength="32"
                 >
-                    <div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')"></div>
+                    <div
+                        class="alert alert-secondary mb-0 mt-3"
+                        role="alert"
+                        v-html="$t('networkadmin.HostnameHint')"
+                    ></div>
                 </InputElement>
 
                 <InputElement :label="$t('networkadmin.EnableDhcp')" v-model="networkConfigList.dhcp" type="checkbox" />
@@ -89,7 +93,7 @@
                     type="checkbox"
                 />
 
-                <div v-if="networkConfigList.syslogenabled">
+                <template v-if="networkConfigList.syslogenabled">
                     <InputElement
                         :label="$t('networkadmin.SyslogHostname')"
                         v-model="networkConfigList.sysloghostname"
@@ -104,7 +108,7 @@
                         min="1"
                         max="65535"
                     />
-                </div>
+                </template>
             </CardElement>
 
             <CardElement :text="$t('networkadmin.AdminAp')" textVariant="text-bg-primary" add-space>
diff --git a/webapp/src/views/NtpInfoView.vue b/webapp/src/views/NtpInfoView.vue
index 68100d1c8..29aa00e43 100644
--- a/webapp/src/views/NtpInfoView.vue
+++ b/webapp/src/views/NtpInfoView.vue
@@ -1,6 +1,6 @@
 <template>
     <BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNtpInfo">
-        <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -21,7 +21,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
diff --git a/webapp/src/views/PowerLimiterAdminView.vue b/webapp/src/views/PowerLimiterAdminView.vue
index 05b7bdd9c..639641a40 100644
--- a/webapp/src/views/PowerLimiterAdminView.vue
+++ b/webapp/src/views/PowerLimiterAdminView.vue
@@ -228,7 +228,7 @@
                     wide
                 />
 
-                <div v-if="powerLimiterConfigList.solar_passthrough_enabled">
+                <template v-if="powerLimiterConfigList.solar_passthrough_enabled">
                     <InputElement
                         :label="$t('powerlimiteradmin.SolarPassthroughLosses')"
                         v-model="powerLimiterConfigList.solar_passthrough_losses"
@@ -245,7 +245,7 @@
                         role="alert"
                         v-html="$t('powerlimiteradmin.SolarPassthroughLossesInfo')"
                     ></div>
-                </div>
+                </template>
             </CardElement>
 
             <CardElement
@@ -261,7 +261,7 @@
                     wide
                 />
 
-                <div v-if="!powerLimiterConfigList.ignore_soc">
+                <template v-if="!powerLimiterConfigList.ignore_soc">
                     <div
                         class="alert alert-secondary"
                         role="alert"
@@ -302,7 +302,7 @@
                         type="number"
                         wide
                     />
-                </div>
+                </template>
             </CardElement>
 
             <CardElement
@@ -335,7 +335,7 @@
                     wide
                 />
 
-                <div v-if="isSolarPassthroughEnabled()">
+                <template v-if="isSolarPassthroughEnabled()">
                     <InputElement
                         :label="$t('powerlimiteradmin.FullSolarPassthroughStartThreshold')"
                         :tooltip="$t('powerlimiteradmin.FullSolarPassthroughStartThresholdHint')"
@@ -360,7 +360,7 @@
                         step="0.01"
                         wide
                     />
-                </div>
+                </template>
 
                 <InputElement
                     :label="$t('powerlimiteradmin.VoltageLoadCorrectionFactor')"
diff --git a/webapp/src/views/PowerMeterAdminView.vue b/webapp/src/views/PowerMeterAdminView.vue
index c0a9514c1..554791567 100644
--- a/webapp/src/views/PowerMeterAdminView.vue
+++ b/webapp/src/views/PowerMeterAdminView.vue
@@ -13,30 +13,35 @@
                     wide
                 />
 
-                <InputElement
-                    v-show="powerMeterConfigList.enabled"
-                    :label="$t('powermeteradmin.VerboseLogging')"
-                    v-model="powerMeterConfigList.verbose_logging"
-                    type="checkbox"
-                    wide
-                />
+                <template v-if="powerMeterConfigList.enabled">
+                    <InputElement
+                        :label="$t('powermeteradmin.VerboseLogging')"
+                        v-model="powerMeterConfigList.verbose_logging"
+                        type="checkbox"
+                        wide
+                    />
 
-                <div class="row mb-3" v-show="powerMeterConfigList.enabled">
-                    <label for="inputPowerMeterSource" class="col-sm-4 col-form-label">{{
-                        $t('powermeteradmin.PowerMeterSource')
-                    }}</label>
-                    <div class="col-sm-8">
-                        <select id="inputPowerMeterSource" class="form-select" v-model="powerMeterConfigList.source">
-                            <option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key">
-                                {{ source.value }}
-                            </option>
-                        </select>
+                    <div class="row mb-3">
+                        <label for="inputPowerMeterSource" class="col-sm-4 col-form-label">{{
+                            $t('powermeteradmin.PowerMeterSource')
+                        }}</label>
+                        <div class="col-sm-8">
+                            <select
+                                id="inputPowerMeterSource"
+                                class="form-select"
+                                v-model="powerMeterConfigList.source"
+                            >
+                                <option v-for="source in powerMeterSourceList" :key="source.key" :value="source.key">
+                                    {{ source.value }}
+                                </option>
+                            </select>
+                        </div>
                     </div>
-                </div>
+                </template>
             </CardElement>
 
-            <div v-if="powerMeterConfigList.enabled">
-                <div v-if="powerMeterConfigList.source === 0 || powerMeterConfigList.source === 3">
+            <template v-if="powerMeterConfigList.enabled">
+                <template v-if="powerMeterConfigList.source === 0 || powerMeterConfigList.source === 3">
                     <div class="alert alert-secondary mt-5" role="alert">
                         <h2>{{ $t('powermeteradmin.jsonPathExamplesHeading') }}:</h2>
                         {{ $t('powermeteradmin.jsonPathExamplesExplanation') }}
@@ -58,10 +63,10 @@
                             <li><code>total</code> &mdash; <code>{ "othervalue": 66, "total": 123.4 }</code></li>
                         </ul>
                     </div>
-                </div>
+                </template>
 
                 <!-- yarn linter wants us to not combine v-if with v-for, so we need to wrap the CardElements //-->
-                <div v-if="powerMeterConfigList.source === 0">
+                <template v-if="powerMeterConfigList.source === 0">
                     <CardElement
                         v-for="(mqtt, index) in powerMeterConfigList.mqtt.values"
                         v-bind:key="index"
@@ -107,7 +112,7 @@
                             wide
                         />
                     </CardElement>
-                </div>
+                </template>
 
                 <CardElement
                     v-if="powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2"
@@ -133,7 +138,7 @@
                     />
                 </CardElement>
 
-                <div v-if="powerMeterConfigList.source === 3">
+                <template v-if="powerMeterConfigList.source === 3">
                     <div class="alert alert-secondary mt-5" role="alert">
                         <h2>{{ $t('powermeteradmin.urlExamplesHeading') }}:</h2>
                         <ul>
@@ -178,7 +183,7 @@
                             wide
                         />
 
-                        <div v-if="httpJson.enabled || index == 0">
+                        <template v-if="httpJson.enabled || index == 0">
                             <HttpRequestSettings
                                 v-model="httpJson.http_request"
                                 v-if="index == 0 || powerMeterConfigList.http_json.individual_requests"
@@ -213,7 +218,7 @@
                                 type="checkbox"
                                 wide
                             />
-                        </div>
+                        </template>
                     </CardElement>
 
                     <CardElement
@@ -221,7 +226,7 @@
                         textVariant="text-bg-primary"
                         add-space
                     >
-                        <div class="text-center mt-3 mb-3">
+                        <div class="text-center mb-3">
                             <button type="button" class="btn btn-primary" @click="testHttpJsonRequest()">
                                 {{ $t('powermeteradmin.testHttpJsonRequest') }}
                             </button>
@@ -235,9 +240,9 @@
                             {{ testHttpJsonRequestAlert.message }}
                         </BootstrapAlert>
                     </CardElement>
-                </div>
+                </template>
 
-                <div v-if="powerMeterConfigList.source === 6">
+                <template v-if="powerMeterConfigList.source === 6">
                     <CardElement :text="$t('powermeteradmin.HTTP_SML')" textVariant="text-bg-primary" add-space>
                         <InputElement
                             :label="$t('powermeteradmin.pollingInterval')"
@@ -257,7 +262,7 @@
                         textVariant="text-bg-primary"
                         add-space
                     >
-                        <div class="text-center mt-3 mb-3">
+                        <div class="text-center mb-3">
                             <button type="button" class="btn btn-primary" @click="testHttpSmlRequest()">
                                 {{ $t('powermeteradmin.testHttpSmlRequest') }}
                             </button>
@@ -271,8 +276,8 @@
                             {{ testHttpSmlRequestAlert.message }}
                         </BootstrapAlert>
                     </CardElement>
-                </div>
-            </div>
+                </template>
+            </template>
 
             <FormFooter @reload="getPowerMeterConfig" />
         </form>
diff --git a/webapp/src/views/VedirectInfoView.vue b/webapp/src/views/VedirectInfoView.vue
index 0a1fdd8c8..aff6da75f 100644
--- a/webapp/src/views/VedirectInfoView.vue
+++ b/webapp/src/views/VedirectInfoView.vue
@@ -1,6 +1,6 @@
 <template>
     <BasePage :title="$t('vedirectinfo.VedirectInformation')" :isLoading="dataLoading">
-        <CardElement :text="$t('vedirectinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('vedirectinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
