diff --git a/Web App/web/src/views/Charging.vue b/Web App/web/src/views/Charging.vue
index 2dd9811..6a65141 100644
--- a/Web App/web/src/views/Charging.vue	
+++ b/Web App/web/src/views/Charging.vue	
@@ -57,6 +57,41 @@ const sessionMetrics = computed(() =>
 // --- Real OCPP control (Anker Solix), gated by the per-user control mode ---
 // The demo session card above is presentational; this card drives a real charger
 // via the control endpoints when the user has picked Own/Proxy CSMS in Settings.
+// --- Folding the cards ---
+//
+// The column runs long once the readings are in it, so every card folds away.
+// Which ones are folded is kept in localStorage rather than on the profile, the
+// same way the provider panel keeps its own: it is a per-device reading habit,
+// not an account setting, and it should survive leaving the tab. Keyed by card,
+// so a fold outlives switching charger.
+const COLLAPSED_KEY = "dv_charging_collapsed";
+
+const collapsed = ref(readCollapsed());
+
+function readCollapsed() {
+  try {
+    const raw = JSON.parse(localStorage.getItem(COLLAPSED_KEY) || "[]");
+    return Array.isArray(raw) ? raw.filter((id) => typeof id === "string") : [];
+  } catch {
+    return []; // unreadable (hand-edited, or written by an older version)
+  }
+}
+
+function isOpen(id) {
+  return !collapsed.value.includes(id);
+}
+
+function toggleCard(id) {
+  collapsed.value = isOpen(id)
+    ? [...collapsed.value, id]
+    : collapsed.value.filter((k) => k !== id);
+  try {
+    localStorage.setItem(COLLAPSED_KEY, JSON.stringify(collapsed.value));
+  } catch {
+    // A full or blocked store just means the choice lasts this visit only.
+  }
+}
+
 const ctlMode = ref("off");
 const ctlSerial = ref(localStorage.getItem("dv_ctl_serial") || "");
 const ctl = ref(null); // { connected, status, controlMode, ... }
@@ -728,12 +763,27 @@ onMounted(async () => {
       <!-- Real OCPP control (Own/Proxy CSMS) — the real home-charger control -->
       <div class="flex flex-col gap-4">
         <div v-if="ctlActive" class="dh-card p-4">
-          <div class="flex items-center justify-between">
+          <button
+            type="button"
+            class="flex w-full items-center justify-between gap-3 text-left"
+            :aria-expanded="isOpen('connection')"
+            @click="toggleCard('connection')"
+          >
             <p class="text-sm font-semibold text-strong">{{ t("charging.control.connectionTitle") }}</p>
-            <span class="dh-badge" :class="ctlConnected ? 'dh-badge-success' : 'dh-badge-warning'">
-              {{ ctlConnected ? t("charging.control.connected") : t("charging.control.disconnected") }}
+            <!-- Whether the charger is reachable is the one thing worth seeing
+                 with the card folded, so the badge rides in the header. -->
+            <span class="flex shrink-0 items-center gap-2">
+              <span class="dh-badge" :class="ctlConnected ? 'dh-badge-success' : 'dh-badge-warning'">
+                {{ ctlConnected ? t("charging.control.connected") : t("charging.control.disconnected") }}
+              </span>
+              <svg
+                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                class="h-4 w-4 shrink-0 text-muted transition-transform" :class="isOpen('connection') ? '' : '-rotate-90'"
+              ><path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6" /></svg>
             </span>
-          </div>
+          </button>
+
+          <div v-show="isOpen('connection')">
 
           <div class="mt-3 flex gap-2">
             <select v-if="pickingFromList" v-model="ctlSerial" class="dh-input" @change="refreshCtl">
@@ -809,12 +859,26 @@ onMounted(async () => {
             {{ ctl?.detail || t(ctlIsModbus ? "charging.control.modbusHint" : "charging.control.connectHint") }}
           </p>
           <p v-if="ctlError" class="mt-2 text-sm text-danger">{{ ctlError }}</p>
+          </div>
         </div>
 
         <!-- Acting on the charger, once there is a connection to act over. The
              card above is where that connection is set up. -->
         <div v-if="ctlActive && ctlConnected" class="dh-card p-4">
-          <p class="text-sm font-semibold text-strong">{{ t("charging.control.title") }}</p>
+          <button
+            type="button"
+            class="flex w-full items-center justify-between gap-3 text-left"
+            :aria-expanded="isOpen('control')"
+            @click="toggleCard('control')"
+          >
+            <p class="text-sm font-semibold text-strong">{{ t("charging.control.title") }}</p>
+            <svg
+              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              class="h-4 w-4 shrink-0 text-muted transition-transform" :class="isOpen('control') ? '' : '-rotate-90'"
+            ><path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6" /></svg>
+          </button>
+
+          <div v-show="isOpen('control')">
 
           <div class="mt-3 grid grid-cols-2 gap-2">
             <div class="rounded-control bg-sunken px-3 py-2">
@@ -896,13 +960,27 @@ onMounted(async () => {
               </button>
             </div>
           </div>
+          </div>
         </div>
 
         <!-- What the charger reports over Modbus. Its own card rather than a
              tail on the control one: control is for acting on the charger, and
              this is a long read that pushed the buttons off the screen. -->
         <div v-if="ctlIsModbus && ctlConnected" class="dh-card p-4">
-          <p class="text-sm font-semibold text-strong">{{ t("charging.modbus.title") }}</p>
+          <button
+            type="button"
+            class="flex w-full items-center justify-between gap-3 text-left"
+            :aria-expanded="isOpen('readings')"
+            @click="toggleCard('readings')"
+          >
+            <p class="text-sm font-semibold text-strong">{{ t("charging.modbus.title") }}</p>
+            <svg
+              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              class="h-4 w-4 shrink-0 text-muted transition-transform" :class="isOpen('readings') ? '' : '-rotate-90'"
+            ><path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6" /></svg>
+          </button>
+
+          <div v-show="isOpen('readings')">
           <div class="mt-3 flex flex-col gap-2">
             <section v-if="modbusPhases.length" class="rounded-control bg-sunken p-3">
               <h4 class="eyebrow">{{ t("charging.modbus.phases") }}</h4>
@@ -977,6 +1055,7 @@ onMounted(async () => {
               <p class="mt-1 text-[11px] text-muted">{{ t("charging.modbus.alarmsHint") }}</p>
             </section>
           </div>
+          </div>
         </div>
 
         <!-- Charger information: everything the record holds about each imported
@@ -985,7 +1064,18 @@ onMounted(async () => {
              card is what fills the column instead of a bare hint. -->
         <div class="dh-card p-4">
           <div class="flex items-center justify-between gap-2">
-            <p class="text-sm font-semibold text-strong">{{ t("charging.info.title") }}</p>
+            <button
+              type="button"
+              class="flex grow items-center justify-between gap-3 text-left"
+              :aria-expanded="isOpen('info')"
+              @click="toggleCard('info')"
+            >
+              <p class="text-sm font-semibold text-strong">{{ t("charging.info.title") }}</p>
+              <svg
+                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                class="h-4 w-4 shrink-0 text-muted transition-transform" :class="isOpen('info') ? '' : '-rotate-90'"
+              ><path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6" /></svg>
+            </button>
             <button
               v-if="homeChargers.length"
               type="button"
@@ -997,6 +1087,7 @@ onMounted(async () => {
             </button>
           </div>
 
+          <div v-show="isOpen('info')">
           <!-- The charger picked in the list beside this card, and only it. -->
           <div v-if="selectedHomeCharger" class="mt-3 rounded-control bg-sunken p-3">
             <div class="flex items-center justify-between gap-2">
@@ -1029,6 +1120,7 @@ onMounted(async () => {
           <!-- Control mode off: say why the card above is missing, here, where
                there is now something to read it against. -->
           <p v-if="!ctlActive" class="mt-3 text-xs text-muted">{{ t("charging.stations.noControlHint") }}</p>
+          </div>
         </div>
       </div>