diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index df35a15af5..7a61b92770 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,52 +1,60 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section>
-      <div class="row items-center text-h6 text-bold">
-        <div class="col flex items-center">
-          {{ name }}
-          <ChargePointLock :charge-point-id="props.chargePointId" />
-          <ChargePointStateIcon
-            :charge-point-id="Number(props.chargePointId)"
-          />
-          <ChargePointTimeCharging
-            :charge-point-id="Number(props.chargePointId)"
-            :readonly="true"
-            :iconSize="'xs'"
-            :toolTip="true"
-          />
-        </div>
-        <q-icon
-          class="cursor-pointer"
-          name="settings"
-          size="sm"
-          @click="settingsVisible = true"
+    <q-card-section
+      class="justify-between text-h6 text-bold ellipsis"
+      :title="name"
+    >
+      {{ name }}
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section class="row flex items-center justify-between">
+      <div>
+        <ChargePointStateIcon :charge-point-id="Number(props.chargePointId)" />
+        <ChargePointTimeCharging
+          :charge-point-id="Number(props.chargePointId)"
+          :readonly="true"
+          :iconSize="'xs'"
+          :toolTip="true"
         />
+        <ChargePointLock :charge-point-id="props.chargePointId" />
       </div>
+      <q-icon
+        class="cursor-pointer"
+        name="settings"
+        size="sm"
+        @click="settingsVisible = true"
+      />
+    </q-card-section>
+    <q-card-section>
       <ChargePointFaultMessage :charge-point-id="props.chargePointId" />
       <ChargePointStateMessage :charge-point-id="props.chargePointId" />
-      <div class="row items-center q-mt-sm">
-        <ChargePointVehicleSelect
-          :charge-point-id="Number(props.chargePointId)"
-        />
-        <ChargePointPriority :charge-point-id="props.chargePointId" />
-      </div>
+    </q-card-section>
+    <q-card-section class="row items-center q-mt-sm">
+      <ChargePointVehicleSelect
+        :charge-point-id="Number(props.chargePointId)"
+      />
+      <ChargePointPriority :charge-point-id="props.chargePointId" />
+    </q-card-section>
+    <q-card-section>
       <ChargePointModeButtons :charge-point-id="props.chargePointId" />
-      <div class="row q-mt-sm">
-        <div class="col">
-          <div class="text-subtitle2">Leistung</div>
-          <div class="col no-wrap">
-            <ChargePointPowerData
-              :power="power"
-              :phase-number="phaseNumber"
-              :current="chargingCurrent"
-            />
-          </div>
-        </div>
-        <div class="col text-right">
-          <div class="text-subtitle2">geladen</div>
-          {{ energyChargedPlugged }}
+    </q-card-section>
+    <q-card-section class="row q-mt-sm">
+      <div class="col">
+        <div class="text-subtitle2">Leistung</div>
+        <div class="col no-wrap">
+          <ChargePointPowerData
+            :power="power"
+            :phase-number="phaseNumber"
+            :current="chargingCurrent"
+          />
         </div>
       </div>
+      <div class="col text-right">
+        <div class="text-subtitle2">geladen</div>
+        {{ energyChargedPlugged }}
+      </div>
+    </q-card-section>
+    <q-card-section>
       <SliderDouble
         v-if="showSocTargetSlider"
         class="q-mt-sm"
@@ -292,4 +300,26 @@ onMounted(() => {
 .card-width {
   width: 22em;
 }
+
+.q-card__section {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.q-card__section:first-of-type {
+  padding-top: 16px;
+  padding-bottom: 0;
+}
+
+.q-card__section:last-of-type {
+  padding-top: 0;
+  padding-bottom: 16px;
+}
+
+.q-card__section:not(:first-of-type):not(:last-of-type) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 </style>