diff --git a/dist/vehicle-info-card.js b/dist/vehicle-info-card.js
index 324e7d8..c8c1e3e 100644
--- a/dist/vehicle-info-card.js
+++ b/dist/vehicle-info-card.js
@@ -2056,15 +2056,15 @@ button.swiper-pagination-bullet {
           <ha-icon icon="mdi:close"></ha-icon>
         </div>
         <div class="card-toggle ">
-          <div class="headder-btn" @click="${this.togglePrevCard.bind(this)}">
+          <div class="headder-btn" @click="${()=>this.togglePrevCard()}">
             <ha-icon icon="mdi:chevron-left"></ha-icon>
           </div>
-          <div class="headder-btn" @click="${this.toggleNextCard.bind(this)}">
+          <div class="headder-btn" @click="${()=>this.toggleNextCard()}">
             <ha-icon icon="mdi:chevron-right"></ha-icon>
           </div>
         </div>
       </div>
-    `}toggleNextCard(){if(!this.activeCardType)return;const t=Object.keys(this.additionalCards),e=t.indexOf(this.activeCardType),i=t[(e+1)%t.length];this.toggleCard(i)}togglePrevCard(){if(!this.activeCardType)return;const t=Object.keys(this.additionalCards),e=t.indexOf(this.activeCardType),i=t[(e-1+t.length)%t.length];this.toggleCard(i)}toggleCard(t){this.additionalCards[t]&&this.additionalCards[t].length>0?this.activeCardType=this.activeCardType===t?null:t:this.activeCardType=this.activeCardType===t?null:`default-${t}`}generateCardTemplate(t,e,i){return Q`
+    `}toggleNextCard(){if(!this.activeCardType)return;const t=Object.keys(this.additionalCards),e=t.indexOf(this.activeCardType),i=t[(e+1)%t.length];this.toggleCard(i)}togglePrevCard(){if(!this.activeCardType)return;const t=Object.keys(this.additionalCards),e=t.indexOf(this.activeCardType),i=t[(e-1+t.length)%t.length];this.toggleCard(i)}toggleCard(t){if(this.additionalCards[t]&&this.additionalCards[t].length>0)this.activeCardType=this.activeCardType===t?null:t;else{const t=["default-tripCards","default-vehicleCards","default-ecoCards","default-tyreCards"],e=(t.indexOf(this.activeCardType||"")+1)%t.length;this.activeCardType=t[e]}}generateCardTemplate(t,e,i){return Q`
       <div class="default-card">
         <div class="data-header">${t}</div>
         ${e.map((({key:t,icon:e})=>Q`
diff --git a/src/vehicle-info-card.ts b/src/vehicle-info-card.ts
index 382237f..dbbe0fd 100644
--- a/src/vehicle-info-card.ts
+++ b/src/vehicle-info-card.ts
@@ -418,10 +418,10 @@ export class VehicleCard extends LitElement {
           <ha-icon icon="mdi:close"></ha-icon>
         </div>
         <div class="card-toggle ">
-          <div class="headder-btn" @click="${this.togglePrevCard.bind(this)}">
+          <div class="headder-btn" @click="${() => this.togglePrevCard()}">
             <ha-icon icon="mdi:chevron-left"></ha-icon>
           </div>
-          <div class="headder-btn" @click="${this.toggleNextCard.bind(this)}">
+          <div class="headder-btn" @click="${() => this.toggleNextCard()}">
             <ha-icon icon="mdi:chevron-right"></ha-icon>
           </div>
         </div>
@@ -453,9 +453,14 @@ export class VehicleCard extends LitElement {
 
   private toggleCard(cardType: string): void {
     if (this.additionalCards[cardType] && this.additionalCards[cardType].length > 0) {
+      // If the added card type is defined and has cards, toggle between added card types
       this.activeCardType = this.activeCardType === cardType ? null : cardType;
     } else {
-      this.activeCardType = this.activeCardType === cardType ? null : `default-${cardType}`;
+      // If the added card type is null or has no cards, cycle through default card types
+      const defaultCardTypes = ['default-tripCards', 'default-vehicleCards', 'default-ecoCards', 'default-tyreCards'];
+      const currentIndex = defaultCardTypes.indexOf(this.activeCardType || '');
+      const newIndex = (currentIndex + 1) % defaultCardTypes.length;
+      this.activeCardType = defaultCardTypes[newIndex];
     }
   }