diff --git a/public/index.html b/public/index.html
index 1cfb80fd9..aba5c6c40 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6247,15 +6247,20 @@
                             <div class="mes_edit_cancel menu_button  fa-solid fa-xmark" title="Cancel" data-i18n="[title]Cancel"></div>
                         </div>
                     </div>
-                    <details class="mes_reasoning_details">
-                        <summary class="mes_reasoning_summary">
-                            <span data-i18n="Reasoning">Reasoning</span>
-                            <div class="mes_reasoning_actions">
-                                <div class="mes_reasoning_edit_done mes_button fa-solid fa-check" title="Confirm" data-i18n="[title]Confirmedit"></div>
-                                <div class="mes_reasoning_edit_cancel mes_button fa-solid fa-xmark" title="Cancel edit" data-i18n="[title]Cancel edit"></div>
-                                <div class="mes_reasoning_edit mes_button fa-solid fa-pencil" title="Edit reasoning" data-i18n="[title]Edit reasoning"></div>
+                    <details class="mes_reasoning_details" open>
+                        <summary class="mes_reasoning_summary flex-container">
+                            <div class="mes_reasoning_header_block flex-container">
+                                <div class="mes_reasoning_header flex-container">
+                                    <span class="mes_reasoning_header_title" data-i18n="Thought for some time">Thought for some time</span>
+                                    <div class="mes_reasoning_arrow fa-solid fa-chevron-up"></div>
+                                </div>
+                            </div>
+                            <div class="mes_reasoning_actions flex-container">
+                                <div class="mes_reasoning_edit_done menu_button edit_button fa-solid fa-check" title="Confirm" data-i18n="[title]Confirmedit"></div>
+                                <div class="mes_reasoning_delete menu_button edit_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>
+                                <div class="mes_reasoning_edit_cancel menu_button edit_button fa-solid fa-xmark" title="Cancel edit" data-i18n="[title]Cancel edit"></div>
                                 <div class="mes_reasoning_copy mes_button fa-solid fa-copy" title="Copy reasoning" data-i18n="[title]Copy reasoning"></div>
-                                <div class="mes_reasoning_delete mes_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>
+                                <div class="mes_reasoning_edit mes_button fa-solid fa-pencil" title="Edit reasoning" data-i18n="[title]Edit reasoning"></div>
                             </div>
                         </summary>
                         <div class="mes_reasoning"></div>
diff --git a/public/script.js b/public/script.js
index 4e037ac46..495fd3053 100644
--- a/public/script.js
+++ b/public/script.js
@@ -2189,26 +2189,29 @@ function insertSVGIcon(mes, extra) {
         modelName = extra.api;
     }
 
-    const image = new Image();
-    // Add classes for styling and identification
-    image.classList.add('icon-svg', 'timestamp-icon');
-    image.src = `/img/${modelName}.svg`;
-    image.title = `${extra?.api ? extra.api + ' - ' : ''}${extra?.model ?? ''}`;
-
-    image.onload = async function () {
-        // Check if an SVG already exists adjacent to the timestamp
-        let existingSVG = mes.find('.timestamp').next('.timestamp-icon');
-
-        if (existingSVG.length) {
-            // Replace existing SVG
-            existingSVG.replaceWith(image);
-        } else {
-            // Append the new SVG if none exists
-            mes.find('.timestamp').after(image);
-        }
-
-        await SVGInject(image);
+    const insertOrReplaceSVG = (image, className, targetSelector, insertBefore) => {
+        image.onload = async function () {
+            let existingSVG = insertBefore ? mes.find(targetSelector).prev(`.${className}`) : mes.find(targetSelector).next(`.${className}`);
+            if (existingSVG.length) {
+                existingSVG.replaceWith(image);
+            } else {
+                if (insertBefore) mes.find(targetSelector).before(image);
+                else mes.find(targetSelector).after(image);
+            }
+            await SVGInject(image);
+        };
     };
+
+    const createModelImage = (className, targetSelector, insertBefore) => {
+        const image = new Image();
+        image.classList.add('icon-svg', className);
+        image.src = `/img/${modelName}.svg`;
+        image.title = `${extra?.api ? extra.api + ' - ' : ''}${extra?.model ?? ''}`;
+        insertOrReplaceSVG(image, className, targetSelector, insertBefore);
+    };
+
+    createModelImage('timestamp-icon', '.timestamp');
+    createModelImage('thinking-icon', '.mes_reasoning_header_title', true);
 }
 
 
diff --git a/public/style.css b/public/style.css
index 3821d594e..dd4c7b527 100644
--- a/public/style.css
+++ b/public/style.css
@@ -342,18 +342,44 @@ input[type='checkbox']:focus-visible {
 
 .mes_reasoning {
     display: block;
-    border: 1px solid var(--SmartThemeBorderColor);
-    background-color: var(--black30a);
-    border-radius: 5px;
+    border-left: 2px solid var(--SmartThemeEmColor);
+    border-radius: 2px;
     padding: 5px;
-    margin: 5px 0;
+    padding-left: 14px;
+    margin-bottom: 0.5rem;
     overflow-y: auto;
+    color: var(--SmartThemeEmColor);
 }
 
-.mes_reasoning_summary {
+.mes_reasoning *:last-child {
+    margin-bottom: 0;
+}
+
+.mes_reasoning em,
+.mes_reasoning i,
+.mes_reasoning u,
+.mes_reasoning q,
+.mes_reasoning blockquote {
+    filter: saturate(0.5);
+}
+
+.mes_reasoning_details .mes_reasoning em {
+    color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%)
+}
+
+.mes_reasoning_header_block {
+    flex-grow: 1;
+}
+
+.mes_reasoning_header {
     cursor: pointer;
     position: relative;
-    margin: 2px;
+    user-select: none;
+    margin: 0.5rem 2px;
+    padding: 7px 14px;
+    border-radius: 10px;
+    background-color: var(--grey30);
+    font-size: 0.9rem;
 }
 
 @supports not selector(:has(*)) {
@@ -368,24 +394,20 @@ input[type='checkbox']:focus-visible {
 .mes_block:has(.edit_textarea) .mes_reasoning_details,
 .mes_reasoning_details:not([open]) .mes_reasoning_actions,
 .mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning,
-.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_done,
-.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_cancel,
-.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.mes_reasoning_edit_done, .mes_reasoning_edit_cancel) {
+.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .edit_button,
+.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.edit_button) {
     display: none;
 }
 
-.mes_reasoning_actions {
-    position: absolute;
-    right: 0;
-    top: 0;
+.mes_reasoning_details .mes_reasoning_arrow {
+    font-size: 10px;
+    width: 10px;
+    height: 10px;
+    margin-top: 5px;
+}
 
-    display: flex;
-    gap: 4px;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    transition: all 200ms;
-    overflow-x: hidden;
-    padding: 1px;
+.mes_reasoning_details:not([open]) .mes_reasoning_arrow {
+    transform: rotate(180deg);
 }
 
 .mes_reasoning_summary>span {
@@ -4224,7 +4246,8 @@ input[type="range"]::-webkit-slider-thumb {
     transition: 0.3s ease-in-out;
 }
 
-.mes_edit_buttons .menu_button {
+.mes_edit_buttons .menu_button,
+.mes_reasoning_actions .edit_button {
     opacity: 0.5;
     padding: 0px;
     font-size: 1rem;
@@ -4237,6 +4260,12 @@ input[type="range"]::-webkit-slider-thumb {
     align-items: center;
 }
 
+.mes_reasoning_actions .edit_button {
+    margin-bottom: 0.5rem;
+    opacity: 1;
+    filter: brightness(0.7);
+}
+
 .mes_reasoning_edit_cancel,
 .mes_edit_cancel.menu_button {
     background-color: var(--crimson70a);