diff --git a/examples/server/public/index.html.gz b/examples/server/public/index.html.gz
index 26f3583bd..cf7d18bf3 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 2180ef4ad..899ebd499 100644
--- a/examples/server/webui/index.html
+++ b/examples/server/webui/index.html
@@ -261,6 +261,10 @@
           <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' && msg.cot" class="collapse bg-base-200" :open="isGenerating">
+              <summary class="collapse-title">Reasoning</summary>
+              <vue-markdown :source="msg.cot" dir="auto" class="collapse-content"></vue-markdown>
+            </details>
             <vue-markdown :source="msg.content"></vue-markdown>
           </div>
           <!-- render timings if enabled -->
diff --git a/examples/server/webui/src/main.js b/examples/server/webui/src/main.js
index feb741a4e..7fec4f769 100644
--- a/examples/server/webui/src/main.js
+++ b/examples/server/webui/src/main.js
@@ -468,14 +468,22 @@ const mainApp = createApp({
         for await (const chunk of chunks) {
           const stop = chunk.stop;
           const addedContent = chunk.choices[0].delta.content;
-          const lastContent = this.pendingMsg.content || '';
+          const lastContent = this.pendingMsg.fullContent || '';
           if (addedContent) {
             this.pendingMsg = {
               id: this.pendingMsg.id,
               role: 'assistant',
-              content: lastContent + addedContent,
+              fullContent: lastContent + addedContent,
             };
           }
+          const regex = /<think>(.*?)?(?=(<\/think>)|$)/gis;
+          const matches = [];
+          let match;
+          while ((match = regex.exec(this.pendingMsg.fullContent)) !== null) {
+              matches.push(match[1]);
+          }
+          this.pendingMsg.content = this.pendingMsg.fullContent.replace(/<think>.*?(<\/think>|$)/gis, '');
+          this.pendingMsg.cot = matches.join('<br/>');
           const timings = chunk.timings;
           if (timings && this.config.showTokensPerSecond) {
             // only extract what's really needed, to save some space