diff --git a/webapp/src/components/AboutView.vue b/webapp/src/components/AboutView.vue
index 37452dc6..6c2824db 100644
--- a/webapp/src/components/AboutView.vue
+++ b/webapp/src/components/AboutView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>About</h1>
             This project was started from
diff --git a/webapp/src/components/DtuAdminView.vue b/webapp/src/components/DtuAdminView.vue
index dfd25268..be9b1b3a 100644
--- a/webapp/src/components/DtuAdminView.vue
+++ b/webapp/src/components/DtuAdminView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>DTU Settings</h1>
         </div>
diff --git a/webapp/src/components/FirmwareUpgradeView.vue b/webapp/src/components/FirmwareUpgradeView.vue
index d52a6577..d7ff6b29 100644
--- a/webapp/src/components/FirmwareUpgradeView.vue
+++ b/webapp/src/components/FirmwareUpgradeView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>Firmware Upgrade</h1>
         </div>
diff --git a/webapp/src/components/HomeView.vue b/webapp/src/components/HomeView.vue
index cce36c24..e0388202 100644
--- a/webapp/src/components/HomeView.vue
+++ b/webapp/src/components/HomeView.vue
@@ -1,22 +1,24 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>Live Data</h1>
         </div>
         <template v-if="waitForData == true">Waiting for data... </template>
         <template v-else>
-            <div class="d-flex align-items-start">
-                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
-                    aria-orientation="vertical">
-                    <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link"
-                        :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
-                        :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
-                        aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
-                        {{ inverter.name }}
-                    </button>
+            <div class="row gy-3">
+                <div class="col-sm-3 col-md-2">
+                    <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"
+                            :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
+                            :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
+                            aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
+                            {{ inverter.name }}
+                        </button>
+                    </div>
                 </div>
 
-                <div class="tab-content" id="v-pills-tabContent">
+                <div class="tab-content col-sm-9 col-md-10" id="v-pills-tabContent">
                     <div v-for="inverter in inverterData" :key="inverter.serial" class="tab-pane fade show"
                         :id="'v-pills-' + inverter.serial" role="tabpanel"
                         :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
@@ -30,11 +32,14 @@
                                 {{ inverter.data_age }} seconds)
                             </div>
                             <div class="card-body">
-                                <div class="row row-cols-1 row-cols-md-3 g-4">
-                                    <div v-for="channel in 5" :key="channel">
-                                        <InverterChannelInfo v-if="inverter[channel - 1]"
-                                            :channelData="inverter[channel - 1]" :channelNumber="channel - 1" />
-                                    </div>
+                                <div class="row g-3">
+                                    <template v-for="channel in 5" :key="channel">
+                                        <div v-if="inverter[channel - 1]" class="col">
+                                            <InverterChannelInfo
+                                                :channelData="inverter[channel - 1]"
+                                                :channelNumber="channel - 1" />
+                                        </div>
+                                    </template>
                                 </div>
                             </div>
                         </div>
diff --git a/webapp/src/components/InverterAdminView.vue b/webapp/src/components/InverterAdminView.vue
index 14c3ec93..614741d8 100644
--- a/webapp/src/components/InverterAdminView.vue
+++ b/webapp/src/components/InverterAdminView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>Inverter Settings</h1>
         </div>
diff --git a/webapp/src/components/MqttAdminView.vue b/webapp/src/components/MqttAdminView.vue
index 385863ba..e2a5dbd4 100644
--- a/webapp/src/components/MqttAdminView.vue
+++ b/webapp/src/components/MqttAdminView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>MqTT Settings</h1>
         </div>
diff --git a/webapp/src/components/MqttInfoView.vue b/webapp/src/components/MqttInfoView.vue
index c32a273a..134d5a7a 100644
--- a/webapp/src/components/MqttInfoView.vue
+++ b/webapp/src/components/MqttInfoView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>MqTT Info</h1>
         </div>
diff --git a/webapp/src/components/NetworkAdminView.vue b/webapp/src/components/NetworkAdminView.vue
index 38faa62e..dd2dd522 100644
--- a/webapp/src/components/NetworkAdminView.vue
+++ b/webapp/src/components/NetworkAdminView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>Network Settings</h1>
         </div>
diff --git a/webapp/src/components/NetworkInfoView.vue b/webapp/src/components/NetworkInfoView.vue
index eb53ae7a..06b9b51e 100644
--- a/webapp/src/components/NetworkInfoView.vue
+++ b/webapp/src/components/NetworkInfoView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>Network Info</h1>
         </div>
diff --git a/webapp/src/components/NtpAdminView.vue b/webapp/src/components/NtpAdminView.vue
index aac3bc05..3f25a7d1 100644
--- a/webapp/src/components/NtpAdminView.vue
+++ b/webapp/src/components/NtpAdminView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>NTP Settings</h1>
         </div>
diff --git a/webapp/src/components/NtpInfoView.vue b/webapp/src/components/NtpInfoView.vue
index e1f54d36..4e140f4b 100644
--- a/webapp/src/components/NtpInfoView.vue
+++ b/webapp/src/components/NtpInfoView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>NTP Info</h1>
         </div>
diff --git a/webapp/src/components/SystemInfoView.vue b/webapp/src/components/SystemInfoView.vue
index 3385e9ef..703e2a02 100644
--- a/webapp/src/components/SystemInfoView.vue
+++ b/webapp/src/components/SystemInfoView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container" role="main">
+    <div class="container-xxl" role="main">
         <div class="page-header">
             <h1>System Info</h1>
         </div>
diff --git a/webapp/src/components/partials/InverterChannelInfo.vue b/webapp/src/components/partials/InverterChannelInfo.vue
index 3ee2db0c..cddd64e5 100644
--- a/webapp/src/components/partials/InverterChannelInfo.vue
+++ b/webapp/src/components/partials/InverterChannelInfo.vue
@@ -1,26 +1,24 @@
 <template>
-    <div class="col">
-        <div class="card">
-            <div v-if="channelNumber >= 1" class="card-header">String {{ channelNumber }}</div>
-            <div v-if="channelNumber == 0" class="card-header">Phase {{ channelNumber + 1 }}</div>
-            <div class="card-body">
-                <table class="table table-striped table-hover">
-                    <thead>
-                        <tr>
-                            <th scope="col">Property</th>
-                            <th scope="col">Value</th>
-                            <th scope="col">Unit</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
-                            <th scope="row">{{ key }}</th>
-                            <td style="text-align: right">{{ formatNumber(property.v) }}</td>
-                            <td>{{ property.u }}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+    <div class="card">
+        <div v-if="channelNumber >= 1" class="card-header">String {{ channelNumber }}</div>
+        <div v-if="channelNumber == 0" class="card-header">Phase {{ channelNumber + 1 }}</div>
+        <div class="card-body">
+            <table class="table table-striped table-hover">
+                <thead>
+                    <tr>
+                        <th scope="col">Property</th>
+                        <th style="text-align: right" scope="col">Value</th>
+                        <th scope="col">Unit</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
+                        <th scope="row">{{ key }}</th>
+                        <td style="text-align: right">{{ formatNumber(property.v) }}</td>
+                        <td>{{ property.u }}</td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>