diff --git a/templates/partials/workout_note.html b/templates/partials/workout_note.html
index a935d65..68a6d5f 100644
--- a/templates/partials/workout_note.html
+++ b/templates/partials/workout_note.html
@@ -1,7 +1,7 @@
 <div id="workout-note" hx-target="this" hx-swap="outerHTML swap:0.5s">
     {% if is_edit|default(false, true) == false %}
     {% if note|length > 0 %}
-    <span class="text-base font-normal text-gray-500">{{ note }}</span>
+    <span class="text-base font-normal text-gray-500 whitespace-normal">{{ note | replace('\n', '<br>') | safe }}</span>
     <a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
         hx-get="{{ url_for('get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
         hx-target="#workout-note">
@@ -17,7 +17,9 @@
     {% else %}
     <div class="flex items-center">
         <textarea
-            class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 overflow-y-hidden"
+            _="on load set my.style.height to my.scrollHeight + 'px'
+             on input set my.style.height to 0 then set my.style.height to my.scrollHeight + 'px'"
             placeholder="Your note..." name="note">{{ note }}</textarea>
         <div class="flex flex-col">
             <button
@@ -42,18 +44,6 @@
                 <span class="sr-only">Save note</span>
             </button>
         </div>
-        <script>
-            (function () {
-                const tx = document.querySelector('#workout-note textarea');
-                tx.setAttribute("style", "height:" + (tx.scrollHeight) + "px;overflow-y:hidden;");
-                tx.addEventListener("input", OnInput, false);
-
-                function OnInput() {
-                    this.style.height = 0;
-                    this.style.height = (this.scrollHeight) + "px";
-                }
-            })();
-        </script>
     </div>
     {% endif %}
 </div>
\ No newline at end of file