diff --git a/src/css/styles.css b/src/css/styles.css
index 4dba43d..27028b3 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -96,6 +96,7 @@ header h1 {
     margin-bottom: 3px;
   }
 }
+
 .item.charge {
   cursor: pointer;
 }
@@ -111,7 +112,7 @@ header h1 {
 .info-box.charge.active {
   max-height: 100px; /* Adjust this to be more than the expected height of the content */
   opacity: 1;
-  padding-top: 0.5rem;
+  padding-block: 0.5rem;
 }
 
 .info-box.charge .item {
diff --git a/src/vehicle-info-card.ts b/src/vehicle-info-card.ts
index be773fd..b581f6c 100644
--- a/src/vehicle-info-card.ts
+++ b/src/vehicle-info-card.ts
@@ -366,8 +366,8 @@ export class VehicleCard extends LitElement {
     const generateChargingDataSimulated = () => {
       const data = [
         { name: 'Power', state: 3.7, unit: 'kW', icon: 'mdi:flash' },
-        { name: 'Current state', state: 50, unit: '%', icon: 'mdi:battery-charging-medium' },
-        { name: 'Maximum', state: 60, unit: '%' },
+        { name: 'Current state', state: 25, unit: '%' },
+        { name: 'Maximum', state: 80, unit: '%' },
         { name: 'Program', state: selectedProgramMapping[3], icon: 'mdi:ev-station' },
       ];
 
@@ -375,6 +375,19 @@ export class VehicleCard extends LitElement {
         if (item.name === 'Maximum') {
           return { ...item, icon: `mdi:battery-charging-${item.state}` };
         }
+        if (item.name === 'Current state') {
+          const itemState = typeof item.state === 'string' ? parseFloat(item.state) : item.state;
+          let icon;
+          if (itemState < 35) {
+            icon = 'mdi:battery-charging-low';
+          } else if (itemState < 70) {
+            icon = 'mdi:battery-charging-medium';
+          } else {
+            icon = 'mdi:battery-charging-high';
+          }
+          return { ...item, icon };
+        }
+
         return item;
       });
     };