diff --git a/src/components/standalone/monitoring/VpnMonitor.vue b/src/components/standalone/monitoring/VpnMonitor.vue
index 713575b2..b83f6c7c 100644
--- a/src/components/standalone/monitoring/VpnMonitor.vue
+++ b/src/components/standalone/monitoring/VpnMonitor.vue
@@ -402,7 +402,7 @@ function getTunnelName(tunnelId: string) {
         <!-- connected tunnels -->
         <NeCard
           :title="t('standalone.real_time_monitor.connected_tunnels')"
-          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+          class="sm:col-span-6 md:col-span-6 lg:col-span-4 xl:col-span-3 3xl:col-span-3"
         >
           <SimpleStat class="mt-1">
             <span>{{ connectedTunnels.length }}/{{ allTunnels.length }}</span>
@@ -412,7 +412,7 @@ function getTunnelName(tunnelId: string) {
         <ConfiguredTunnelsCard
           :tunnels="allTunnels"
           :tunnelDevices="tunnelDevices"
-          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+          class="row-span-2 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-9 3xl:col-span-5"
         ></ConfiguredTunnelsCard>
         <!-- tunnels traffic -->
         <InterfaceTrafficCard
@@ -420,7 +420,7 @@ function getTunnelName(tunnelId: string) {
           :key="tunnelDevice"
           :iface="getTunnelName(tunnelId)"
           :device="tunnelDevice"
-          class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
+          class="row-span-2 sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-6 3xl:col-span-4"
         />
       </template>
     </div>