diff --git a/Layout/default/HistoricTicket/Index.php b/Layout/default/HistoricTicket/Index.php
index c7c3d19a7..1c0f6e188 100644
--- a/Layout/default/HistoricTicket/Index.php
+++ b/Layout/default/HistoricTicket/Index.php
@@ -56,9 +56,9 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
 
 
     <!-- Bootstrap Modal to show global search results -->
-    <div class="modal show d-block" tabindex="-1" role="dialog" style="background: rgba(0, 0, 0, 0.5);"
+    <div class="modal show d-block" tabindex="0" role="dialog" style="background: rgba(0, 0, 0, 0.5);" @click="globalSearchModal = false" @keydown.esc="globalSearchModal = false" ref="globalSearchModal"
          v-if="globalSearchModal">
-        <div class="modal-dialog" role="document"
+        <div class="modal-dialog" role="document" @click.stop
              style="width:fit-content;max-width: 80vw ; max-height: 80vh; overflow-y: auto;">
             <div class="modal-content">
                 <div class="modal-header">
@@ -85,9 +85,9 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
     </div>
 
     <!-- Bootstrap Modal to show ticket messages -->
-    <div class="modal show d-block" tabindex="-1" role="dialog" style="background: rgba(0, 0, 0, 0.5);"
+    <div class="modal show d-block" tabindex="0" role="dialog" style="background: rgba(0, 0, 0, 0.5);" @click="selectedTicketNumber = null" @keydown.esc="selectedTicketNumber = null" ref="selectedTicketModal"
          v-if="selectedTicketNumber">
-        <div class="modal-dialog" role="document"
+        <div class="modal-dialog" role="document" @click.stop
              style="width:fit-content;max-width: 80vw ; max-height: 80vh; overflow-y: auto;">
             <div class="modal-content">
                 <div class="modal-header">
@@ -102,7 +102,7 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
                         <p>{{ selectedTicketData.ticket.message }}</p>
                         <div v-for="message in selectedTicketData.messages">
                             <hr>
-                            <p style="word-break: break-all;">{{ message.content }}</p>
+                            <p style="word-break: break-all;" v-html="message.content.replaceAll('\n', '<br>')"></p>
                         </div>
                     </div>
                     <div v-else class="spinner-border text-primary" role="status">
@@ -148,8 +148,11 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
         },
         methods: {
             async doGlobalSearch() {
-                if (this.globalSearch.length > 3) {
+                if (this.globalSearch.length > 0) {
                     this.globalSearchModal = true;
+                    this.$nextTick(() => {
+                        this.$refs.globalSearchModal.focus();
+                    });
                 }
             },
             async clickTicketNumber(ticketNumber) {
@@ -159,6 +162,9 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
                 this.selectedTicketNumber = ticketNumber;
                 const response = await axios.post(`${window['TT_CONFIG']['HISTORIC_TICKET_API_URL']}?do=getHistoricTicketMessages`, {ticketNumber});
                 this.selectedTicketData = response.data;
+                this.$nextTick(() => {
+                    this.$refs.selectedTicketModal.focus();
+                });
             }
         }
     })