diff --git a/cypress/platform/state-refactor.html b/cypress/platform/state-refactor.html
index b52fc52f3..be8e86205 100644
--- a/cypress/platform/state-refactor.html
+++ b/cypress/platform/state-refactor.html
@@ -17,88 +17,73 @@
 
   <style>
     body {
-      /* background: rgb(221, 208, 208); */
-      /* background:#333; */
       font-family: 'Arial';
-      /* font-size: 18px !important; */
     }
 
     table {
       width: 100%;
-      /* Makes the table take full width */
       border-collapse: collapse;
-      /* Removes space between borders */
       table-layout: fixed;
-      /* Ensures that columns have consistent width */
     }
 
     th,
     td {
       border: 1px solid black;
-      /* Adds border to cells */
       padding: 10px;
-      /* Adds padding inside cells */
       text-align: center;
-      /* Centers text in cells */
       vertical-align: middle;
-      /* Aligns content vertically in the middle */
     }
 
     .separator {
       height: 20px;
-      /* Height of the separator row */
       background-color: #f0f0f0;
-      /* Light gray background for the separator */
     }
 
     .vertical-header {
-      /* writing-mode: vertical-rl; */
-      /* Rotates text for vertical headers */
       text-align: center;
-      /* Centers the rotated text */
-      /* transform: rotate(180deg); */
-      /* Corrects the orientation of the text */
     }
 
-    h1 {
-      color: grey;
+    .collapsible {
+      background-color: #f9f9f9;
+      color: #444;
+      cursor: pointer;
+      padding: 18px;
+      width: 100%;
+      border: none;
+      text-align: left;
+      outline: none;
+      font-size: 15px;
     }
 
-
-
-    .mermaid2 {
-      display: none;
+    .active,
+    .collapsible:hover {
+      background-color: #ccc;
     }
 
-    .mermaid svg {
-      /* font-size: 18px !important; */
-      background-color: #efefef;
-      background-image: radial-gradient(#fff 51%, transparent 91%),
-        radial-gradient(#fff 51%, transparent 91%);
-      background-size: 20px 20px;
-      background-position: 0 0, 10px 10px;
-      background-repeat: repeat;
+    .collapsible:after {
+      content: '\002B';
+      color: #777;
+      font-weight: bold;
+      float: right;
+      margin-left: 2px;
     }
 
-    .malware {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 150px;
-      background: red;
-      color: black;
-      display: flex;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-family: monospace;
-      font-size: 72px;
+    .active:after {
+      content: "\2212";
     }
 
-    /* tspan {
-        font-size: 6px !important;
-      } */
+    .content {
+      padding: 0 5px;
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.2s ease-out;
+      background-color: #f1f1f1;
+    }
+
+    .content .pre-scrollable {
+      max-height: 200px;
+      overflow-y: scroll;
+    }
   </style>
 </head>
 
@@ -112,12 +97,14 @@
       <th>ELK with rough</th>
     </tr>
     <tr>
-      <th class="vertical-header">Simple State (only id)
-        <br />
-        <br />
-        <pre>
+      <th class="vertical-header">
+        <button class="collapsible">Simple State (only id)</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
       stateId
   </pre>
+          </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -155,13 +142,16 @@ stateDiagram-v2
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
     <tr>
-      <th class="vertical-header">State with description with `as` keyword
-        <br />
-        <br />
-        <pre>
+      <th class="vertical-header">
+        <button class="collapsible">State with description with `as` keyword</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
 
     state "description text" as s2
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -196,13 +186,16 @@ stateDiagram-v2
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
     <tr>
-      <th class="vertical-header">State with description with `:` syntax
-        <br />
-        <br />
-        <pre>
+      <th class="vertical-header">
+        <button class="collapsible">State with description with `:` syntax</button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
 
     s2 :  description text
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -239,15 +232,20 @@ stateDiagram-v2
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
-      <tr>
-      <th class="vertical-header">State with transition 
-        <br />
-        <br />
-        <pre>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          State with transition
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
 
     s1 --> s2
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -292,15 +290,20 @@ stateDiagram-v2
     </tr>
 
     </tr>
-      <tr>
-      <th class="vertical-header">State transition with label
-        <br />
-        <br />
-        <pre>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          State transition with label
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
 
     s1 --> s2: A transition
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -344,17 +347,22 @@ stateDiagram-v2
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-      </tr>
-      <tr>
-      <th class="vertical-header">Start & End
-        <br />
-        <br />
-        <pre>
+    </tr>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Start & End
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
 
       [*] --> test
     test --> [*]
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -402,12 +410,15 @@ stateDiagram-v2
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-     </tr>
-      <tr>
-      <th class="vertical-header">Composite state
-        <br />
-        <br />
-        <pre>
+    </tr>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Composite state
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
 
       [*] --> First
     state First {
@@ -416,6 +427,8 @@ stateDiagram-v2
     }
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -476,14 +489,17 @@ stateDiagram-v2
     </tr>
 
 
-         </tr>
-      <tr>
-      <th class="vertical-header">Nested Composite state
-        <br />
-        <br />
-        <pre>
+    </tr>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Nested Composite state
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+
 
-   
     [*] --> Level1
 
     state Level1 {
@@ -502,6 +518,8 @@ stateDiagram-v2
 
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -602,11 +620,14 @@ stateDiagram-v2
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-          <tr>
-      <th class="vertical-header">Composite state with transition
-        <br />
-        <br />
-        <pre>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Composite state with transition
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
     [*] --> B1
     B1 --> B2
     B1 --> B3
@@ -627,6 +648,8 @@ stateDiagram-v2
 
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -725,11 +748,15 @@ stateDiagram-v2
     </tr>
 
 
-          <tr>
-      <th class="vertical-header">Choice
-        <br />
-        <br />
-        <pre>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+
+          Choice
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
     state if_state &lt;&lt;choice&gt;&gt;
     [*] --> IsPositive
     IsPositive --> if_state
@@ -740,6 +767,8 @@ stateDiagram-v2
 
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -792,11 +821,14 @@ stateDiagram-v2
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-              <tr>
-      <th class="vertical-header">Fork & Join
-        <br />
-        <br />
-        <pre>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Fork & Join
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
     state fork_state &lt;&lt;fork&gt;&gt;
       [*] --> fork_state
       fork_state --> State2
@@ -811,6 +843,8 @@ stateDiagram-v2
 
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -885,11 +919,14 @@ stateDiagram-v2
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
     </tr>
 
-                  <tr>
-      <th class="vertical-header">Notes
-        <br />
-        <br />
-        <pre>
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Notes
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
 
   TN1: The state with a note
   note right of TN1
@@ -899,6 +936,8 @@ stateDiagram-v2
   note left of TN2 : note text
 
   </pre>
+          </div>
+        </div>
       </th>
       <td>
         <pre id="diagram1" class="mermaid">
@@ -954,6 +993,217 @@ stateDiagram-v2
       </pre>
       </td>
     </tr>
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Concurrent states
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+[*] --> Active
+
+state Active {
+    [*] --> NumLockOff
+    NumLockOff --> NumLockOn : EvNumLockPressed
+    NumLockOn --> NumLockOff : EvNumLockPressed
+    --
+    [*] --> CapsLockOff
+    CapsLockOff --> CapsLockOn : EvCapsLockPressed
+    CapsLockOn --> CapsLockOff : EvCapsLockPressed
+    --
+    [*] --> ScrollLockOff
+    ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+    ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+}
+
+
+  </pre>
+          </div>
+        </div>
+      </th>
+      <td>
+        <pre id="diagram1" class="mermaid">
+     stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"handdrawn": true} }%%
+     stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"handdrawn": false, "layout": "elk"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram4" class="mermaid">
+%%{init: {"handdrawn": true, "layout": "elk"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+      </pre>
+      </td>
+    </tr>
+
+
+    <!-- Separator row -->
+    <tr class="separator">
+      <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
+    </tr>
+
+    <tr>
+      <th class="vertical-header">
+        <button class="collapsible">
+          Directions
+        </button>
+        <div class="content">
+          <div class="pre-scrollable">
+            <pre>
+direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+  </pre>
+          </div>
+        </div>
+      </th>
+      <td>
+        <pre id="diagram1" class="mermaid">
+     stateDiagram-v2
+    direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram2" class="mermaid">
+%%{init: {"handdrawn": true} }%%
+     stateDiagram-v2
+   direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram3" class="mermaid">
+%%{init: {"handdrawn": false, "layout": "elk"} }%%
+     stateDiagram-v2
+    direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      </pre>
+      </td>
+      <td>
+        <pre id="diagram4" class="mermaid">
+%%{init: {"handdrawn": true, "layout": "elk"} }%%
+     stateDiagram-v2
+    direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      </pre>
+      </td>
+    </tr>
+
+
     <!-- Separator row -->
     <tr class="separator">
       <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
@@ -997,6 +1247,20 @@ stateDiagram-v2
       console.error(err);
     };
 
+
+    var coll = document.getElementsByClassName("collapsible");
+    for (var i = 0; i < coll.length; i++) {
+      coll[i].addEventListener("click", function () {
+        this.classList.toggle("active");
+        var content = this.nextElementSibling;
+        if (content.style.maxHeight) {
+          content.style.maxHeight = null;
+        } else {
+          content.style.maxHeight = content.scrollHeight + "px";
+        }
+      });
+    }
+
   </script>
 </body>