diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.js
index 6472d71fea0..07d46032b5f 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.js
@@ -40,6 +40,7 @@ export class ChatGPTAlternativesDialog extends ChatGPTDialog {
             }],
             messages: [],
             alternativesMode: '',
+            messagesInProgress: 0,
             currentBatchId: null,
         });
         this._generationIndex = 0;
@@ -52,20 +53,20 @@ export class ChatGPTAlternativesDialog extends ChatGPTDialog {
 
     switchAlternativesMode(ev) {
         this.state.alternativesMode = ev.currentTarget.getAttribute('data-mode');
-        this.state.messages = [];
-        this._generateAlternatives();
+        this._generateAlternatives(1);
     }
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
-    async _generateAlternatives() {
+    async _generateAlternatives(numberOfAlternatives = this.props.numberOfAlternatives) {
+        this.state.messagesInProgress = numberOfAlternatives;
         const batchId = new Date().getTime();
         this.state.currentBatchId = batchId;
         let wasError = false;
         let messageIndex = 0;
-        while (!wasError && messageIndex < this.props.numberOfAlternatives && this.state.currentBatchId === batchId) {
+        while (!wasError && messageIndex < numberOfAlternatives && this.state.currentBatchId === batchId) {
             this._generationIndex += 1;
             let query = messageIndex ? 'Write one alternative version of the original text.' : 'Try again another single version of the original text.';
             if (this.state.alternativesMode && !messageIndex) {
@@ -85,10 +86,12 @@ export class ChatGPTAlternativesDialog extends ChatGPTDialog {
                             content,
                         });
                     }
-                    this.state.messages.push({
+                    this.state.messages.unshift({
                         author: 'assistant',
                         text: alternative,
                         isError,
+                        batchId,
+                        mode: this.state.alternativesMode,
                     });
                 }
             }).catch(() => {
@@ -98,9 +101,11 @@ export class ChatGPTAlternativesDialog extends ChatGPTDialog {
                 }
             });
             messageIndex += 1;
+            this.state.messagesInProgress -= 1;
             if (wasError) {
                 break;
             }
         }
+        this.state.messagesInProgress = 0;
     }
 }
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.xml b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.xml
index c2acbafcb3b..49d9ed5c303 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.xml
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.xml
@@ -7,17 +7,26 @@
             <div class="mb-3">
                 <t t-foreach="Object.entries(props.alternativesModes)"
                     t-as="alternative" t-key="alternative_index">
-                    <button type="button" class="btn me-2 btn-sm"
-                        t-att-class="state.alternativesMode == alternative[0] ? 'btn-success' : 'btn-info'"
+                    <button type="button" class="btn me-2 btn-sm btn-info"
+                        t-att-class="state.alternativesMode == alternative[0] and state.messagesInProgress ? 'btn-success' : 'btn-info'"
                         t-on-click="switchAlternativesMode" t-att-data-mode="alternative[0]">
                         <t t-out="alternative[1]"/>
                     </button>
                 </t>
             </div>
             <div class="list-group">
+                <div t-if="state.messagesInProgress" class="d-flex align" t-att-class="{ 'mb-3': state.messages.length }">
+                    <img src="/web/static/img/spin.svg" alt="Loading..." class="me-2"
+                        style="filter:invert(1); opacity: 0.5; width: 30px; height: 30px;"/>
+                    <p class="m-0 text-muted align-self-center">
+                        <em t-if="state.messagesInProgress == 1">Generating an alternative...</em>
+                        <em t-else="">Generating <t t-out="state.messagesInProgress"/> alternatives...</em>
+                    </p>
+                </div>
                 <t t-foreach="state.messages" t-as="message" t-key="message_index">
                     <t t-if="message.isError">
-                        <div class="list-group-item o-chatgpt-alternative border-danger bg-danger o-message-error">
+                        <div class="list-group-item o-chatgpt-alternative border-danger bg-danger o-message-error"
+                            t-att-class="{ 'text-muted': state.currentBatchId != message.batchId }">
                             <t t-out="message.text"/>
                         </div>
                     </t>
@@ -25,18 +34,15 @@
                         <button type="button" class="list-group-item list-group-item-action o-chatgpt-alternative"
                             t-on-click="selectMessage"
                             t-att-data-message-index="message_index"
-                            t-att-class="{ active: state.selectedMessage == message_index }">
+                            t-att-class="{
+                                active: state.selectedMessage == message_index,
+                                'text-muted': state.currentBatchId != message.batchId,
+                            }">
+                            <span t-if="message.mode" class="badge bg-secondary float-end"><t t-out="props.alternativesModes[message.mode]"/></span>
                             <t t-out="formatContent(message.text)"/>
                         </button>
                     </t>
                 </t>
-                <div t-if="state.messages.length &lt; props.numberOfAlternatives and !(state.messages.length and state.messages[state.messages.length - 1].isError)" class="d-flex mt-2 align">
-                    <img src="/web/static/img/spin.svg" alt="Loading..." class="me-2"
-                        style="filter:invert(1); opacity: 0.5; width: 30px; height: 30px;"/>
-                    <p class="m-0 text-muted align-self-center">
-                        <em>Generating alternatives...</em>
-                    </p>
-                </div>
             </div>
         </div>