diff --git a/templates/users_and_workouts_wrapper.html b/templates/users_and_workouts_wrapper.html
index 19af13c..fc3155c 100644
--- a/templates/users_and_workouts_wrapper.html
+++ b/templates/users_and_workouts_wrapper.html
@@ -2,12 +2,4 @@
 {{ render_partial('workouts_list.html', user=u, workouts=u.workouts, bikes=bikes) }}
 {% endfor %}
 
-<script>
-    document.querySelectorAll('.accordion-button').forEach(header => {
-        header.addEventListener('click', () => {
-            header.parentElement.parentElement.querySelector('div.collapse').classList.toggle('hidden');
-        });
-    });
-</script>
-
 {{ render_partial('users.html', users=users, bikes=bikes) }}
\ No newline at end of file
diff --git a/templates/workouts_list.html b/templates/workouts_list.html
index 6bae00f..4b371e1 100644
--- a/templates/workouts_list.html
+++ b/templates/workouts_list.html
@@ -48,7 +48,10 @@
     <h2 class="mb-0">
         <button
             class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
-            type="button">
+            type="button" _="on click 
+            toggle .hidden on #workouts-list-accordion-{{ user.id }}
+            then toggle .hidden on #workouts-list-accordion-{{ user.id }}-open-icon
+            then toggle .hidden on #workouts-list-accordion-{{ user.id }}-close-icon">
             <div>
                 <h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts</h2>
 
@@ -56,13 +59,19 @@
             <span
                 class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                    stroke="currentColor" class="h-6 w-6">
+                    stroke="currentColor" class="h-6 w-6" id="workouts-list-accordion-{{ user.id }}-open-icon">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                 </svg>
+
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="h-6 w-6 hidden" id="workouts-list-accordion-{{ user.id }}-close-icon">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        transform="translate(12,12) scale(1,-1) translate(-12,-12)" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                </svg>
             </span>
         </button>
     </h2>
-    <div class="!visible collapse p-4 hidden">
+    <div class="!visible collapse p-4 hidden" id="workouts-list-accordion-{{ user.id }}">
         {{ render_partial('partials/calendar.html', calendar_month=user.calendar_month, user_id = user.id) }}
 
         <div id="workouts-list-wrapper-for-user-{{ user.id }}" class="mt-5 pl-2">{{