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 002f4f651d..95119faecf 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -17,7 +17,7 @@
         </div>
       </div>
       <VehicleConnectionStateIcon :vehicle-id="vehicleId" class="q-mt-sm" />
-      <div v-if="vehicleSocValue !== null">
+      <div v-if="isVehicleSocModule !== undefined">
         <SliderDouble
           class="q-mt-sm"
           :current-value="vehicleSocValue"
@@ -82,12 +82,16 @@ const vehicleInfo = computed(() => {
   return mqttStore.vehicleInfo(props.vehicleId);
 });
 
+const isVehicleSocModule = computed(() => {
+  return mqttStore.vehicleSocModule(props.vehicleId)?.name;
+});
+
 const vehicleSocModuleType = computed(() => {
   return mqttStore.vehicleSocModule(props.vehicleId)?.type;
 });
 
 const vehicleSocValue = computed(() => {
-  return mqttStore.vehicleSocValue(props.vehicleId);
+  return mqttStore.vehicleSocValue(props.vehicleId) || 0;
 });
 
 const refreshSoc = () => {