diff --git a/webapp/src/components/BatteryView.vue b/webapp/src/components/BatteryView.vue
index 92966919..171e5bd8 100644
--- a/webapp/src/components/BatteryView.vue
+++ b/webapp/src/components/BatteryView.vue
@@ -6,7 +6,7 @@
   </div>
 
   <div v-else-if="'values' in batteryData"> <!-- suppress the card for MQTT battery provider -->
-    <div class="row gy-3">
+    <div class="row gy-3 mt-0">
       <div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
         <div class="card">
           <div class="card-header d-flex justify-content-between align-items-center" :class="{
diff --git a/webapp/src/components/HuaweiView.vue b/webapp/src/components/HuaweiView.vue
index a0917ebb..c9e1d396 100644
--- a/webapp/src/components/HuaweiView.vue
+++ b/webapp/src/components/HuaweiView.vue
@@ -6,7 +6,7 @@
   </div>
 
   <template v-else>
-    <div class="row gy-3">
+    <div class="row gy-3 mt-0">
       <div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
         <div class="card">
           <div class="card-header d-flex justify-content-between align-items-center" :class="{
diff --git a/webapp/src/components/InverterTotalInfo.vue b/webapp/src/components/InverterTotalInfo.vue
index 426550b7..adc9d91f 100644
--- a/webapp/src/components/InverterTotalInfo.vue
+++ b/webapp/src/components/InverterTotalInfo.vue
@@ -1,7 +1,6 @@
 <template>
-  <div v-show="totalVeData.enabled">
     <div class="row row-cols-1 row-cols-md-3 g-3">
-        <div class="col">
+        <div class="col" v-if="totalVeData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalYieldTotal')">
                 <h2>
                     {{ $n(totalVeData.total.YieldTotal.v, 'decimal', {
@@ -12,7 +11,7 @@
                 </h2>
             </CardElement>
         </div>
-        <div class="col">
+        <div class="col" v-if="totalVeData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalYieldDay')">
                 <h2>
                     {{ $n(totalVeData.total.YieldDay.v, 'decimal', {
@@ -23,7 +22,7 @@
                 </h2>
             </CardElement>
         </div>
-        <div class="col">
+        <div class="col" v-if="totalVeData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalPower')">
                 <h2>
                     {{ $n(totalVeData.total.Power.v, 'decimal', {
@@ -34,9 +33,6 @@
                 </h2>
             </CardElement>
         </div>
-    </div>
-  </div>
-  <div class="row row-cols-1 row-cols-md-3 g-3">
         <div class="col">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.InverterTotalYieldTotal')">
                 <h2>
@@ -70,10 +66,7 @@
                 </h2>
             </CardElement>
         </div>
-  </div>
-  <div v-show="totalBattData.enabled || powerMeterData.enabled || huaweiData.enabled">
-    <div class="row row-cols-1 row-cols-md-3 g-3">
-      <div class="col" v-if="totalBattData.enabled">
+        <div class="col" v-if="totalBattData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.BatterySoc')">
                 <h2>
                     {{ $n(totalBattData.soc.v, 'decimal', {
@@ -83,8 +76,8 @@
                     <small class="text-muted">{{ totalBattData.soc.u }}</small>
                 </h2>
             </CardElement>
-      </div>
-      <div class="col" v-if="powerMeterData.enabled">
+        </div>
+        <div class="col" v-if="powerMeterData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.HomePower')">
                 <h2>
                     {{ $n(powerMeterData.Power.v, 'decimal', {
@@ -94,8 +87,8 @@
                     <small class="text-muted">{{powerMeterData.Power.u }}</small>
                 </h2>
             </CardElement>
-      </div>
-      <div class="col" v-if="huaweiData.enabled">
+        </div>
+        <div class="col" v-if="huaweiData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.HuaweiPower')">
                 <h2>
                     {{ $n(huaweiData.Power.v, 'decimal', {
@@ -105,9 +98,8 @@
                     <small class="text-muted">{{huaweiData.Power.u }}</small>
                 </h2>
             </CardElement>
-      </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 82d6081e..a8d0c355 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -11,7 +11,7 @@
                 <span style="margin-left: .5rem">
                     OpenDTU-OnBattery
                 </span>
-                <span class="text-info">
+                <span class="text-info mx-2">
                     <BIconBatteryCharging width="20" height="20" class="d-inline-block align-text-center" />
                 </span>
             </router-link>
diff --git a/webapp/src/components/VedirectView.vue b/webapp/src/components/VedirectView.vue
index 052a2be3..d7f372e4 100644
--- a/webapp/src/components/VedirectView.vue
+++ b/webapp/src/components/VedirectView.vue
@@ -7,9 +7,9 @@
     </div>
 
     <template v-else>
-        <div class="row gy-3">
+        <div class="row gy-3 mt-0" v-for="(item, serial) in vedirect.instances" :key="serial">
             <div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
-                <div class="card" v-for="(item, serial) in vedirect.instances" :key="serial">
+                <div class="card">
                     <div class="card-header d-flex justify-content-between align-items-center"
                         :class="{
                             'text-bg-danger': item.data_age_ms >= 10000,
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 46b36291..2dd9ef44 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -1,8 +1,8 @@
 <template>
     <BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true" :showWebSocket="true" :isWebsocketConnected="isWebsocketConnected" @reload="reloadData">
         <HintView :hints="liveData.hints" />
-        <InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery" :powerMeterData="liveData.power_meter" :huaweiData="liveData.huawei"/><br />
-        <div class="row gy-3">
+        <InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery" :powerMeterData="liveData.power_meter" :huaweiData="liveData.huawei"/>
+        <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">
                     <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break"