diff --git a/src/howitz/endpoints.py b/src/howitz/endpoints.py
index 33d7ac2c..bbce2f61 100644
--- a/src/howitz/endpoints.py
+++ b/src/howitz/endpoints.py
@@ -235,12 +235,14 @@ def get_events():
 
 @main.route('/events/<event_id>/expand_row', methods=["GET"])
 def expand_event_row(event_id):
-    event_id = int(event_id)
     selected_events = session.get("selected_events", []) or []
+    session["expanded_events"].append(event_id)
+    session.modified = True
     expanded_events = session.get("expanded_events", []) or []
-    expanded_events.append(event_id)
     current_app.logger.debug('EXPANDED EVENTS %s', expanded_events)
 
+    event_id = int(event_id)
+
     event_attr, event_logs, event_history, event_msgs = get_event_details(event_id)
     event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
 
@@ -250,16 +252,20 @@ def expand_event_row(event_id):
 
 @main.route('/events/<event_id>/collapse_row', methods=["GET"])
 def collapse_event_row(event_id):
-    event_id = int(event_id)
-    selected_events = session.get("selected_events", []) or []
-    expanded_events = session.get("expanded_events", []) or []
+
+    selected_events = session["selected_events"]
+
     try:
-        expanded_events.remove(event_id)
+        session["expanded_events"].remove(event_id)
+        session.modified = True
     except ValueError:
         pass
-    session["expanded_events"] = expanded_events
+    # session["expanded_events"] = expanded_events
+    expanded_events = session.get("expanded_events", []) or []
     current_app.logger.debug('EXPANDED EVENTS %s', expanded_events)
 
+    event_id = int(event_id)
+
     event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
 
     return render_template('/responses/collapse-row.html', event=event, id=event_id, is_selected=str(event_id) in selected_events)
@@ -268,6 +274,7 @@ def collapse_event_row(event_id):
 @main.route('/event/<event_id>/update_status', methods=['GET', 'POST'])
 def update_event_status(event_id):
     event_id = int(event_id)
+    selected_events = session.get("selected_events", []) or []
     event = current_app.event_manager.create_event_from_id(int(event_id))
     current_state = event.adm_state
 
@@ -286,7 +293,7 @@ def update_event_status(event_id):
 
         return render_template('/components/row/expanded-row.html', event=event, id=event_id, event_attr=event_attr,
                                event_logs=event_logs,
-                               event_history=event_history, event_msgs=event_msgs)
+                               event_history=event_history, event_msgs=event_msgs, is_selected=str(event_id) in selected_events)
 
     elif request.method == 'GET':
         return render_template('/responses/get-update-event-status-form.html', id=event_id, current_state=current_state)
@@ -307,7 +314,30 @@ def unselect_event(i):
     except ValueError:
         pass
 
-    return render_template('/components/row/event-unchecked-box.html', id=i)
+    event_id = int(i)
+
+    event_attr, event_logs, event_history, event_msgs = get_event_details(event_id)
+    event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
+
+    # expanded_events = session.get("expanded_events", []) or []
+    # is_expanded = str(i) in session["expanded_events"]
+    # current_app.logger.debug("EXPANDED EVENTS %s", session["expanded_events"])
+    # current_app.logger.debug("is Expanded %s", is_expanded)
+
+    # return render_template('/components/responses/select-expanded-row.html', event=event, id=event_id,
+    #                        is_selected=False)
+
+    # if is_expanded:
+    #     return render_template('/responses/unselect-expanded-row.html', event=event, id=event_id, is_selected=False)
+    # else:
+    #     return render_template('/components/row/event-row.html', event=event, id=event_id, is_selected=False)
+
+    return render_template('/responses/row-toggle-select.html', event=event, id=event_id, event_attr=event_attr,
+                               event_logs=event_logs,
+                               event_history=event_history, event_msgs=event_msgs, is_selected=False, is_expanded=str(i) in session["expanded_events"])
+
+
+    # return render_template('/components/row/event-unchecked-box.html', id=i)
 
 
 @main.route('/event/<i>/select', methods=["GET"])
@@ -322,7 +352,31 @@ def select_event(i):
 
     # print("SELECTED EVENTS", session["selected_events"])
 
-    return render_template('/components/row/event-checked-box.html', id=i)
+    event_id = int(i)
+
+    event_attr, event_logs, event_history, event_msgs = get_event_details(event_id)
+    event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
+
+    # is_expanded = str(i) in session["expanded_events"]
+    # current_app.logger.debug("EXPANDED EVENTS %s", session["expanded_events"])
+    # current_app.logger.debug("is Expanded %s", is_expanded)
+    #
+    # # return render_template('/components/responses/select-expanded-row.html', event=event, id=event_id,
+    # #                        is_selected=False)
+    #
+    # if is_expanded:
+    #     return render_template('/responses/unselect-expanded-row.html', event=event, id=event_id, is_selected=True)
+    # else:
+    #     return render_template('/components/row/selected-event-row.html', event=event, id=event_id, is_selected=True)
+
+    # # event_attr, event_logs, event_history, event_msgs = get_event_details(event_id)
+    # event = create_table_event(current_app.event_manager.create_event_from_id(event_id))
+    #
+    return render_template('/responses/row-toggle-select.html', event=event, id=event_id, event_attr=event_attr,
+                               event_logs=event_logs,
+                               event_history=event_history, event_msgs=event_msgs, is_selected=True, is_expanded=str(i) in session["expanded_events"])
+    #
+    # # return render_template('/components/row/event-checked-box.html', id=i)
 
 
 # TODO: replace this with some other HTMX pattern
diff --git a/src/howitz/templates/components/row/collapse-btn.html b/src/howitz/templates/components/row/collapse-btn.html
index 78228f23..b36041c7 100644
--- a/src/howitz/templates/components/row/collapse-btn.html
+++ b/src/howitz/templates/components/row/collapse-btn.html
@@ -1,6 +1,6 @@
 <td
         id="toggle-row-btn-{{ id }}"
-        class="{{ padding }} border border-slate-700 relative"
+        class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }} relative"
         hx-get="/events/{{ id }}/collapse_row"
         hx-trigger="click"
         hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
diff --git a/src/howitz/templates/components/row/colored-data-cells.html b/src/howitz/templates/components/row/colored-data-cells.html
index e5361521..785d97d0 100644
--- a/src/howitz/templates/components/row/colored-data-cells.html
+++ b/src/howitz/templates/components/row/colored-data-cells.html
@@ -3,7 +3,7 @@
     <div class="absolute inset-y-0 left-0 z-10 bg-{{ color }}-500 w-1 h-full"></div>
 </td>
 
-<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-700 text-{{ color }}-500">
+<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-{{ border_color_level if border_color_level else '700' }} text-{{ color }}-500">
     <div class="relative z-0">
         <div class="h-2 bg-{{ color }}-200 opacity-30 blur-xl">
             {{ event.op_state }}
@@ -13,7 +13,7 @@
         </div>
     </div>
 </td>
-<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-700 text-{{ color }}-500">
+<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-{{ border_color_level if border_color_level else '700' }} text-{{ color }}-500">
     <div class="relative z-0">
         <div class="h-2 bg-{{ color }}-200 opacity-30 blur-xl">
             {{ event.adm_state }}
diff --git a/src/howitz/templates/components/row/data-cells.html b/src/howitz/templates/components/row/data-cells.html
index d38435a6..3f121e58 100644
--- a/src/howitz/templates/components/row/data-cells.html
+++ b/src/howitz/templates/components/row/data-cells.html
@@ -3,14 +3,14 @@
 {% include "/components/row/colored-data-cells.html" %}
 {% endwith %}
 {% else %}
-<td class="{{ padding }} text-center border border-slate-700">{{ event.id }}</td>
-<td class="{{ padding }} text-center font-medium  whitespace-nowrap text-white border border-slate-700">{{
+<td class="{{ padding }} text-center border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.id }}</td>
+<td class="{{ padding }} text-center font-medium  whitespace-nowrap text-white border border-slate-{{ border_color_level if border_color_level else '700' }}">{{
     event.op_state }}
 </td>
-<td class="{{ padding }} text-center font-medium text-white border border-slate-700">{{ event.adm_state }}</td>
+<td class="{{ padding }} text-center font-medium text-white border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.adm_state }}</td>
 {% endif %}
-<td class="{{ padding }} border border-slate-700">{{ event.age }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.downtime }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.router }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.port }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.description }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.age }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.downtime }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.router }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.port }}</td>
+<td class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }}">{{ event.description }}</td>
diff --git a/src/howitz/templates/components/row/event-checked-box.html b/src/howitz/templates/components/row/event-checked-box.html
index 46971dfe..ce61cccc 100644
--- a/src/howitz/templates/components/row/event-checked-box.html
+++ b/src/howitz/templates/components/row/event-checked-box.html
@@ -6,7 +6,7 @@
                checked
                hx-get="/event/{{ id }}/unselect"
                hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
-               hx-target="closest td"
+               hx-target="#event-accordion-row-{{ id }}"
                hx-swap="outerHTML"
         >
         <label for="unselect-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
diff --git a/src/howitz/templates/components/row/event-unchecked-box.html b/src/howitz/templates/components/row/event-unchecked-box.html
index 4bfdf66d..43c65a3e 100644
--- a/src/howitz/templates/components/row/event-unchecked-box.html
+++ b/src/howitz/templates/components/row/event-unchecked-box.html
@@ -5,8 +5,9 @@
                class="w-4 h-4 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
                hx-get="/event/{{ id }}/select"
                hx-trigger='click from:#select-event-{{ id }}, dblclick from:#select-event-{{ id }} consume'
-               hx-target="closest td"
+               hx-target="#event-accordion-row-{{ id }}"
                hx-swap="outerHTML"
+
         >
         <label for="select-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
     </div>
diff --git a/src/howitz/templates/components/row/expand-btn.html b/src/howitz/templates/components/row/expand-btn.html
index be7d66f8..16c23823 100644
--- a/src/howitz/templates/components/row/expand-btn.html
+++ b/src/howitz/templates/components/row/expand-btn.html
@@ -1,6 +1,6 @@
 <td
         id="toggle-row-btn-{{ id }}"
-        class="{{ padding }} border border-slate-700 relative"
+        class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }} relative"
         hx-get="/events/{{ id }}/expand_row"
         hx-trigger="click"
         hx-target="#event-accordion-row-{{ id }}"
diff --git a/src/howitz/templates/components/row/expanded-row.html b/src/howitz/templates/components/row/expanded-row.html
index 81c8dffb..861f6cbf 100644
--- a/src/howitz/templates/components/row/expanded-row.html
+++ b/src/howitz/templates/components/row/expanded-row.html
@@ -1,33 +1,65 @@
 {% block content %}
 
-<tr
-        class="bg-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
-        id="event-accordion-row-{{ id }}"
-        hx-get="/events/{{ id }}/collapse_row"
-        hx-trigger="dblclick"
-        hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
->
+    {% if is_selected %}
+            <tr
+            class="bg-white border-2 dark:bg-gray-700 dark:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-600"
+            id="event-accordion-row-{{ id }}"
+            hx-get="/events/{{ id }}/collapse_row"
+            hx-trigger="dblclick"
+            hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+    >
 
-    {% with padding='px-3 py-2' %}
+        {% with padding='px-3 py-2' %}
 
-    {% if is_selected %}
-    {% include "/components/row/event-checked-box.html" %}
+            {% if is_selected %}
+                {% include "/components/row/event-checked-box.html" %}
+            {% else %}
+                {% include "/components/row/event-unchecked-box.html" %}
+            {% endif %}
+
+            {% with event=event, border_color_level = '500' if is_selected else '700'  %}
+                {% include "/components/row/data-cells.html" %}
+            {% endwith %}
+
+            {% with id=id, color=event.color, border_color_level = '500' if is_selected else '700'  %}
+                {% include "/components/row/collapse-btn.html" %}
+            {% endwith %}
+
+        {% endwith %}
+
+    </tr>
     {% else %}
-    {% include "/components/row/event-unchecked-box.html" %}
-    {% endif %}
+        <tr
+                class="bg-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
+                id="event-accordion-row-{{ id }}"
+                hx-get="/events/{{ id }}/collapse_row"
+                hx-trigger="dblclick"
+                hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+        >
+
+            {% with padding='px-3 py-2' %}
+
+                {% if is_selected %}
+                    {% include "/components/row/event-checked-box.html" %}
+                {% else %}
+                    {% include "/components/row/event-unchecked-box.html" %}
+                {% endif %}
 
-    {% with event=event %}
-    {% include "/components/row/data-cells.html" %}
-    {% endwith %}
+                {% with event=event %}
+                    {% include "/components/row/data-cells.html" %}
+                {% endwith %}
 
-    {% with id=id, color=event.color %}
-    {% include "/components/row/collapse-btn.html" %}
-    {% endwith %}
+                {% with id=id, color=event.color %}
+                    {% include "/components/row/collapse-btn.html" %}
+                {% endwith %}
+
+            {% endwith %}
+
+        </tr>
+    {% endif %}
 
-    {% endwith %}
 
-</tr>
 
-{% include "/components/accordion/event-details.html" %}
+    {% include "/components/accordion/event-details.html" %}
 
 {% endblock content %}
diff --git a/src/howitz/templates/components/row/selected-event-row.html b/src/howitz/templates/components/row/selected-event-row.html
new file mode 100644
index 00000000..ad2f2331
--- /dev/null
+++ b/src/howitz/templates/components/row/selected-event-row.html
@@ -0,0 +1,28 @@
+<tr
+        class="bg-white border-2 dark:bg-gray-700 dark:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-600"
+        id="event-accordion-row-{{ id }}"
+        hx-get="/events/{{ id }}/expand_row"
+        hx-trigger="dblclick"
+        hx-target="#event-accordion-row-{{ id }}"
+        hx-swap="outerHTML"
+>
+    {% with padding='px-3 py-2' %}
+
+    {% if is_selected %}
+    {% include "/components/row/event-checked-box.html" %}
+    {% else %}
+    {% include "/components/row/event-unchecked-box.html" %}
+    {% endif %}
+
+    {% with event=event, border_color_level = '500' if is_selected else '700' %}
+    {% include "/components/row/data-cells.html" %}
+    {% endwith %}
+
+    {% with id=id, color=event.color, border_color_level = '500' if is_selected else '700' %}
+    {% include "/components/row/expand-btn.html" %}
+    {% endwith %}
+
+    {% endwith %}
+
+</tr>
+
diff --git a/src/howitz/templates/components/row/selected-expanded-row.html b/src/howitz/templates/components/row/selected-expanded-row.html
new file mode 100644
index 00000000..182dc431
--- /dev/null
+++ b/src/howitz/templates/components/row/selected-expanded-row.html
@@ -0,0 +1,65 @@
+{% block content %}
+
+    {% if is_selected %}
+            <tr
+            class="bg-white border-2 dark:bg-gray-700 dark:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-600"
+            id="event-accordion-row-{{ id }}"
+            hx-get="/events/{{ id }}/collapse_row"
+            hx-trigger="dblclick"
+            hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+    >
+
+        {% with padding='px-3 py-2' %}
+
+            {% if is_selected %}
+                {% include "/components/row/event-checked-box.html" %}
+            {% else %}
+                {% include "/components/row/event-unchecked-box.html" %}
+            {% endif %}
+
+            {% with event=event, border_color_level = '500' if is_selected else '700'  %}
+                {% include "/components/row/data-cells.html" %}
+            {% endwith %}
+
+            {% with id=id, color=event.color, border_color_level = '500' if is_selected else '700'  %}
+                {% include "/components/row/collapse-btn.html" %}
+            {% endwith %}
+
+        {% endwith %}
+
+    </tr>
+    {% else %}
+        <tr
+                class="bg-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
+                id="event-accordion-row-{{ id }}"
+                hx-get="/events/{{ id }}/collapse_row"
+                hx-trigger="dblclick"
+                hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+        >
+
+            {% with padding='px-3 py-2' %}
+
+                {% if is_selected %}
+                    {% include "/components/row/event-checked-box.html" %}
+                {% else %}
+                    {% include "/components/row/event-unchecked-box.html" %}
+                {% endif %}
+
+                {% with event=event %}
+                    {% include "/components/row/data-cells.html" %}
+                {% endwith %}
+
+                {% with id=id, color=event.color %}
+                    {% include "/components/row/collapse-btn.html" %}
+                {% endwith %}
+
+            {% endwith %}
+
+        </tr>
+    {% endif %}
+
+
+
+    {% include "/components/accordion/event-details.html" %}
+
+{% endblock content %}
\ No newline at end of file
diff --git a/src/howitz/templates/components/table/events-table.html b/src/howitz/templates/components/table/events-table.html
index 7d9c13aa..f41d4047 100644
--- a/src/howitz/templates/components/table/events-table.html
+++ b/src/howitz/templates/components/table/events-table.html
@@ -1,5 +1,5 @@
 <table
-        class="border-collapse border border-slate-500 w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto"
+        class="border-collapse border border-slate-500 w-full text-sm text-left text-gray-600 dark:text-gray-300 table-auto"
         hx-get="/get_events"
         hx-swap="innerHTML"
         hx-target="#eventlist-list"
diff --git a/src/howitz/templates/responses/collapse-row.html b/src/howitz/templates/responses/collapse-row.html
index feff9489..f4e61250 100644
--- a/src/howitz/templates/responses/collapse-row.html
+++ b/src/howitz/templates/responses/collapse-row.html
@@ -1,10 +1,17 @@
-{% with id=id, event=event %}
-{% include "/components/row/event-row.html" %}
-{% endwith %}
+{% if is_selected %}
+    {% with id=id, event=event %}
+        {% include "/components/row/selected-event-row.html" %}
+    {% endwith %}
+{% else %}
+    {% with id=id, event=event %}
+        {% include "/components/row/event-row.html" %}
+    {% endwith %}
+{% endif %}
 
 <tr
         id="event-details-row-{{ id }}"
         class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+        hx-swap-oob="delete"
 
 >
-</tr>
\ No newline at end of file
+</tr>
diff --git a/src/howitz/templates/responses/row-toggle-select.html b/src/howitz/templates/responses/row-toggle-select.html
new file mode 100644
index 00000000..d099899e
--- /dev/null
+++ b/src/howitz/templates/responses/row-toggle-select.html
@@ -0,0 +1,39 @@
+{% if is_selected %}
+    {% if is_expanded %}
+        {% with id=id, event=event %}
+            {% include "/components/row/selected-expanded-row.html" %}
+            <tr
+                    id="event-details-row-{{ id }}"
+                    class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+                    hx-swap-oob="true"
+
+            >
+            </tr>
+        {% endwith %}
+    {% else %}
+        {% with id=id, event=event %}
+            {% include "/components/row/selected-event-row.html" %}
+        {% endwith %}
+    {% endif %}
+
+
+{% else %}
+    {% if is_expanded %}
+        {% with id=id, event=event %}
+            {% include "/components/row/expanded-row.html" %}
+        {% endwith %}
+        <tr
+                id="event-details-row-{{ id }}"
+                class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+                hx-swap-oob="true"
+
+        >
+        </tr>
+    {% else %}
+        {% with id=id, event=event %}
+            {% include "/components/row/event-row.html" %}
+        {% endwith %}
+    {% endif %}
+
+{% endif %}
+
diff --git a/src/howitz/templates/responses/unselect-expanded-row.html b/src/howitz/templates/responses/unselect-expanded-row.html
new file mode 100644
index 00000000..5e54f23d
--- /dev/null
+++ b/src/howitz/templates/responses/unselect-expanded-row.html
@@ -0,0 +1,121 @@
+{% block content %}
+
+    {% if is_selected %}
+        <tr
+                class="bg-white border-2 dark:bg-gray-700 dark:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-600"
+                id="event-accordion-row-{{ id }}"
+                hx-get="/events/{{ id }}/collapse_row"
+                hx-trigger="dblclick"
+                hx-swap="multi:#event-details-row-{{ id }}:delete,#event-accordion-row-{{ id }}:outerHTML"
+        >
+
+            {% with padding='px-3 py-2' %}
+
+                {% if is_selected %}
+                    <td class="w-4 p-4">
+                        <div class="flex items-center">
+                            <input id="unselect-event-{{ id }}"
+                                   type="checkbox"
+                                   class="w-4 h-4 text-white rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+                                   checked
+                                   hx-get="/event/{{ id }}/unselect"
+                                   hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
+                                   hx-target="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+                            >
+                            <label for="unselect-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
+                        </div>
+                    </td>
+                {% else %}
+                    <td class="w-4 p-4">
+                        <div class="flex items-center">
+                            <input id="select-event-{{ id }}"
+                                   type="checkbox"
+                                   class="w-4 h-4 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+                                   hx-get="/event/{{ id }}/select"
+                                   hx-trigger='click from:#select-event-{{ id }}, dblclick from:#select-event-{{ id }} consume'
+                                   hx-target="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+
+                            >
+                            <label for="select-event-{{ id }}" class="sr-only">checkbox event {{ id }}</label>
+                        </div>
+                    </td>
+                {% endif %}
+
+                {% with event=event, border_color_level = '500' if is_selected else '700' %}
+                    {% include "/components/row/data-cells.html" %}
+                {% endwith %}
+
+                {% with id=id, color=event.color, border_color_level = '500' if is_selected else '700' %}
+                    {% include "/components/row/collapse-btn.html" %}
+                {% endwith %}
+
+            {% endwith %}
+
+        </tr>
+    {% else %}
+        <tr
+                class="bg-white dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600"
+                id="event-accordion-row-{{ id }}"
+                hx-get="/events/{{ id }}/collapse_row"
+                hx-trigger="dblclick"
+                hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+        >
+
+            {% with padding='px-3 py-2' %}
+
+                {% if is_selected %}
+                    {% include "/components/row/event-checked-box.html" %}
+                {% else %}
+                    {% include "/components/row/event-unchecked-box.html" %}
+                {% endif %}
+
+                {% with event=event %}
+                    {% include "/components/row/data-cells.html" %}
+                {% endwith %}
+
+                {% with id=id, color=event.color %}
+                    {% include "/components/row/collapse-btn.html" %}
+                {% endwith %}
+
+            {% endwith %}
+
+        </tr>
+    {% endif %}
+
+
+
+    {% include "/components/accordion/event-details.html" %}
+
+{% endblock content %}
+
+
+<tr
+        id="event-details-row-{{ id }}"
+        class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+
+>
+</tr>
+
+<td
+        id="toggle-row-btn-{{ id }}"
+        class="{{ padding }} border border-slate-{{ border_color_level if border_color_level else '700' }} relative"
+        hx-get="/events/{{ id }}/collapse_row"
+        hx-trigger="click"
+        hx-swap-oob="true"
+        hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
+        hx-indicator="#row-{{ id }}-indicator"
+>
+
+    {% include "/components/row/row-toggle-spinner.html" %}
+
+    <svg
+            id="svg-icon-{{ id }}"
+            class="rotate-180 w-6 h-6 shrink-0 z-0"
+            fill="{{ color if (color != '' and color is not none) else 'currentColor' }}" viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+
+        <path fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+    </svg>
+</td>