diff --git a/examples/server/public/index.html.gz b/examples/server/public/index.html.gz
index 477bc412a..6a64e1159 100644
Binary files a/examples/server/public/index.html.gz and b/examples/server/public/index.html.gz differ
diff --git a/examples/server/webui/index.html b/examples/server/webui/index.html
index e802a584c..6ecd93fe5 100644
--- a/examples/server/webui/index.html
+++ b/examples/server/webui/index.html
@@ -261,8 +261,11 @@
           <span v-if="msg.content === null" class="loading loading-dots loading-md"></span>
           <!-- render message as markdown -->
           <div v-else dir="auto">
-            <details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="isGenerating">
-              <summary class="collapse-title">Reasoning?</summary>
+            <details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="splitMsgContent.isThinking">
+              <summary class="collapse-title text-xl font-medium">
+                <span v-if="splitMsgContent.isThinking">Thinking<span class="loading loading-dots loading-md" style="vertical-align: middle;"></span></span>
+                <span v-else >Thought Process</span>
+              </summary>
               <vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown>
             </details>
             <vue-markdown :source="splitMsgContent.content"></vue-markdown>
diff --git a/examples/server/webui/src/main.js b/examples/server/webui/src/main.js
index 4afb1e719..bd6a3ffaf 100644
--- a/examples/server/webui/src/main.js
+++ b/examples/server/webui/src/main.js
@@ -191,24 +191,27 @@ const MessageBubble = defineComponent({
     },
     splitMsgContent() {
       const content = this.msg.content;
-      if (this.msg.role !== 'assistant'){
-        return {content};
+      if (this.msg.role !== "assistant") {
+        return { content };
       }
-      let actualContent = '';
-      let cot = '';
-      let thinkSplit = content.split("<think>",2);
+      let actualContent = "";
+      let cot = "";
+      let isThinking = false;
+      let thinkSplit = content.split("<think>", 2);
       actualContent += thinkSplit[0];
-      while (thinkSplit[1]!==undefined){
+      while (thinkSplit[1] !== undefined) {
         // <think> tag found
-        thinkSplit = thinkSplit[1].split("</think>",2);
-        cot+=thinkSplit[0];
-        if(thinkSplit[1]!==undefined){
+        thinkSplit = thinkSplit[1].split("</think>", 2);
+        cot += thinkSplit[0];
+        isThinking = true;
+        if (thinkSplit[1] !== undefined) {
           // </think> closing tag found
-          thinkSplit = thinkSplit[1].split("<think>",2);
-          actualContent+=thinkSplit[0];
+          isThinking = false;
+          thinkSplit = thinkSplit[1].split("<think>", 2);
+          actualContent += thinkSplit[0];
         }
       }
-      return {content : actualContent, cot };
+      return { content: actualContent, cot , isThinking};
     },
   },
   methods: {