diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index 31d2edaaab..ccc9c6b756 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -4,39 +4,49 @@
     class="full-height card-width"
     :class="{ 'battery-sum': props.batteryId === -1 }"
   >
-    <q-card-section>
-      <div class="row text-h6 items-center text-bold justify-between">
-        {{ cardTitle }}
+    <q-card-section
+      class="text-h6 items-center text-bold justify-between ellipsis"
+      :title="cardTitle"
+    >
+      {{ cardTitle }}
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section class="row flex justify-end">
+      <q-icon
+        class="cursor-pointer q-mt-sm"
+        v-if="showSettings"
+        name="settings"
+        size="sm"
+        @click="dialog?.open()"
+      />
+    </q-card-section>
+    <q-card-section
+      class="row q-mt-sm text-subtitle2 justify-between full-width"
+    >
+      <div>Leistung:</div>
+      <div class="q-ml-sm">
+        {{ power }}
+      </div>
+    </q-card-section>
+    <q-separator v-if="showSettings" inset class="q-mt-sm" />
+    <q-card-section
+      v-if="showSettings"
+      class="row q-mt-md justify-between text-subtitle2"
+    >
+      <div>Laden mit Überschuss:</div>
+      <div class="q-ml-sm row items-center">
         <q-icon
-          class="cursor-pointer"
-          v-if="showSettings"
-          name="settings"
+          :name="batteryMode.icon"
           size="sm"
-          @click="dialog?.open()"
+          class="q-mr-sm"
+          color="primary"
         />
+        {{ batteryMode.label }}
       </div>
-      <div class="row q-mt-sm text-subtitle2 justify-between full-width">
-        <div>Leistung:</div>
-        <div class="q-ml-sm">
-          {{ power }}
-        </div>
-      </div>
-      <div
-        v-if="showSettings"
-        class="row q-mt-md justify-between text-subtitle2"
-      >
-        <div>Laden mit Überschuss:</div>
-        <div class="q-ml-sm row items-center">
-          <q-icon
-            :name="batteryMode.icon"
-            size="sm"
-            class="q-mr-sm"
-            color="primary"
-          />
-          {{ batteryMode.label }}
-        </div>
-      </div>
-      <div class="text-subtitle1 text-weight-bold q-mt-md">Heute:</div>
+    </q-card-section>
+    <q-separator inset class="q-mt-sm" />
+    <q-card-section>
+      <div class="text-subtitle1 text-weight-bold q-mt-sm">Heute:</div>
       <div class="row q-mt-sm text-subtitle2 justify-between full-width">
         <div>Geladen:</div>
         <div class="q-ml-sm">
@@ -49,6 +59,9 @@
           {{ dailyExportedEnergy }}
         </div>
       </div>
+    </q-card-section>
+    <q-separator inset class="q-mt-sm" />
+    <q-card-section>
       <SliderDouble
         class="q-mt-sm"
         :current-value="soc"
@@ -151,4 +164,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>
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 e0b9345962..66c260ca9a 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -1,9 +1,6 @@
 <template>
   <q-card ref="cardRef" class="full-height card-width">
-    <q-card-section
-      class="justify-between text-h6 text-bold ellipsis"
-      :title="name"
-    >
+    <q-card-section class="text-h6 text-bold ellipsis" :title="name">
       {{ name }}
     </q-card-section>
     <q-separator inset />
@@ -29,11 +26,17 @@
       <ChargePointFaultMessage :charge-point-id="props.chargePointId" />
       <ChargePointStateMessage :charge-point-id="props.chargePointId" />
     </q-card-section>
-    <q-card-section class="row items-center q-mt-sm">
+    <q-card-section
+      class="full-width row no-wrap justify-between content-start items-center q-mt-sm"
+    >
       <ChargePointVehicleSelect
+        class="col"
         :charge-point-id="Number(props.chargePointId)"
       />
-      <ChargePointPriority :charge-point-id="props.chargePointId" />
+      <ChargePointPriority
+        class="col-auto"
+        :charge-point-id="props.chargePointId"
+      />
     </q-card-section>
     <q-card-section>
       <ChargePointModeButtons :charge-point-id="props.chargePointId" />
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
index a0715d3f73..d3e165922c 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
@@ -1,16 +1,15 @@
 <template>
   <div v-if="props.readonly" class="q-mx-sm">
+    <q-icon name="directions_car" />
     {{ connectedVehicle?.name }}
   </div>
-  <q-btn-dropdown
-    v-else
-    color="grey"
-    :label="connectedVehicle?.name"
-    icon="directions_car"
-    dense
-    no-caps
-    class="flex-grow"
-  >
+  <q-btn-dropdown v-else color="grey" dense no-caps>
+    <template #label>
+      <span class="ellipsis q-ml-xs" :title="connectedVehicle?.name">
+        <q-icon name="directions_car" />
+        {{ connectedVehicle?.name }}
+      </span>
+    </template>
     <q-list>
       <q-item
         v-for="vehicle in vehicles"
@@ -21,7 +20,9 @@
         @click="connectedVehicle = vehicle"
       >
         <q-item-section>
-          <q-item-label>{{ vehicle.name }}</q-item-label>
+          <q-item-label class="ellipsis" :title="vehicle.name">{{
+            vehicle.name
+          }}</q-item-label>
         </q-item-section>
       </q-item>
     </q-list>
@@ -53,7 +54,4 @@ const vehicles = computed(() => mqttStore.vehicleList);
 </script>
 
 <style scoped>
-.flex-grow {
-  flex-grow: 1;
-}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index 758a0c7e67..ed8ad64c22 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -1,22 +1,25 @@
 <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">
-          {{ vehicle?.name }}
-        </div>
+    <q-card-section class="text-h6 text-bold ellipsis" :title="vehicle?.name">
+      {{ vehicle?.name }}
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section class="row q-mt-sm">
+      <div class="col">
+        <div class="text-subtitle2">Hersteller:</div>
+        {{ vehicleInfo?.manufacturer || 'keine Angabe' }}
       </div>
-      <div class="row q-mt-sm">
-        <div class="col">
-          <div class="text-subtitle2">Hersteller:</div>
-          {{ vehicleInfo?.manufacturer || 'keine Angabe' }}
-        </div>
-        <div class="col q-pl-sm">
-          <div class="text-subtitle2">Modell:</div>
-          {{ vehicleInfo?.model || 'keine Angabe' }}
-        </div>
+      <div class="col q-pl-sm">
+        <div class="text-subtitle2">Modell:</div>
+        {{ vehicleInfo?.model || 'keine Angabe' }}
       </div>
+    </q-card-section>
+    <q-separator inset class="q-mt-sm" />
+    <q-card-section>
       <VehicleConnectionStateIcon :vehicle-id="vehicleId" class="q-mt-sm" />
+    </q-card-section>
+    <q-separator inset class="q-mt-sm" />
+    <q-card-section>
       <SliderDouble
         v-if="vehicleSocType"
         class="q-mt-sm"
@@ -97,8 +100,25 @@ onMounted(() => {
   width: 22em;
 }
 
-.slider-container {
-  position: relative;
-  height: 40px;
+.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>
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
index 1ad6fb57f3..7bf15162cf 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue
@@ -12,6 +12,7 @@
         v-for="(chargePoint, index) in vehicleState"
         :key="index"
         :icon="chargePoint.plugged ? 'power' : 'power_off'"
+        class="ellipsis"
         :color="
           chargePoint.plugged
             ? chargePoint.charging