diff --git a/public/scripts/reasoning.js b/public/scripts/reasoning.js
index 8f7d504b8..8a0ad7eb4 100644
--- a/public/scripts/reasoning.js
+++ b/public/scripts/reasoning.js
@@ -331,6 +331,11 @@ export class ReasoningHandler {
         const displayReasoning = messageFormatting(reasoning, '', false, false, messageId, {}, true);
         this.messageReasoningContentDom.innerHTML = displayReasoning;
 
+        // Update tooltip for hidden reasoning edit
+        /** @type {HTMLElement} */
+        const button = this.messageDom.querySelector('.mes_edit_add_reasoning');
+        button.title = this.state === ReasoningState.Hidden ? t`Hidden reasoning - Add reasoning block` : t`Add reasoning block`;
+
         // Update the reasoning duration in the UI
         this.#updateReasoningTimeUI();
     }
@@ -698,12 +703,9 @@ function setReasoningEventHandlers() {
         const textarea = messageBlock.find('.reasoning_edit_textarea');
         textarea.remove();
 
-        // If we cancel, we might have to remove the reasong class again if this is an unsaved empty reasoning
-        if (!messageBlock.attr('data--reasoning-state')) {
-            messageBlock.removeClass('reasoning');
-        }
-
         messageBlock.find('.mes_reasoning_edit_cancel:visible').trigger('click');
+
+        updateReasoningUI(messageBlock);
     });
 
     $(document).on('click', '.mes_edit_add_reasoning', async function () {
@@ -719,6 +721,12 @@ function setReasoningEventHandlers() {
 
         messageBlock.addClass('reasoning');
 
+        // To make hidden reasoning blocks editable, we just set them to "Done" here already.
+        // They will be done on save anyway - and on cancel the reasoning block gets rerendered too.
+        if (messageBlock.attr('data-reasoning-state') === ReasoningState.Hidden) {
+            messageBlock.attr('data-reasoning-state', ReasoningState.Done);
+        }
+
         // Open the reasoning area so we can actually edit it
         messageBlock.find('.mes_reasoning_details').attr('open', '');
         messageBlock.find('.mes_reasoning_edit').trigger('click');
diff --git a/public/style.css b/public/style.css
index f5754e5b5..9092d1885 100644
--- a/public/style.css
+++ b/public/style.css
@@ -417,13 +417,22 @@ input[type='checkbox']:focus-visible {
 .mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.edit_button),
 .mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .edit_button,
 .mes_block:has(.edit_textarea):has(.reasoning_edit_textarea) .mes_reasoning_actions,
-.mes.reasoning .mes_edit_add_reasoning,
+.mes.reasoning:not([data-reasoning-state="hidden"]) .mes_edit_add_reasoning,
 .mes[data-reasoning-state="hidden"] .mes_reasoning_arrow,
 .mes[data-reasoning-state="hidden"] .mes_reasoning,
 .mes[data-reasoning-state="hidden"] .mes_reasoning_copy {
     display: none;
 }
 
+.mes[data-reasoning-state="hidden"] .mes_edit_add_reasoning {
+    background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%);
+}
+
+/** Hide hidden reasoning blocks - revert this selector to show them again */
+.mes.reasoning[data-reasoning-state="hidden"] .mes_reasoning_details {
+    display: none;
+}
+
 .mes_reasoning_details .mes_reasoning_arrow {
     position: absolute;
     top: 50%;