diff --git a/CHANGELOG.md b/CHANGELOG.md
index f021f65ac..fa9b9a849 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
  - Direct AJAX calls not getting upgraded to https [#530](https://github.com/zaproxy/zap-hud/issues/530)
  - Fail to handle ws calls from an upgraded http domain [#525](https://github.com/zaproxy/zap-hud/issues/525) 
+ - HTTP & Websocket History tool scrolling issue [#548](https://github.com/zaproxy/zap-hud/pull/548)
 
 ## [0.4.0] - 2019-06-07
 
diff --git a/src/main/zapHomeFiles/hud/drawer.html b/src/main/zapHomeFiles/hud/drawer.html
index 5ce28ae8d..9442a3ebe 100644
--- a/src/main/zapHomeFiles/hud/drawer.html
+++ b/src/main/zapHomeFiles/hud/drawer.html
@@ -110,7 +110,7 @@
             </table>
             <table id="websockets-messages" class="table table-striped table-hover table-scroll table-history drawer-messages" style="min-width: fit-content;">
                 <tbody>
-                    <tr v-for="message in filteredMessages" @click="messageSelected(message.channelId, message.messageId)" :id="'message-tr-'+message.messageId" class="message-tr">
+                    <tr v-for="message in filteredMessages" @click="messageSelected(message.channelId, message.messageId)" :id="'ws-message-tr-' + message.uniqId" class="message-tr">
                         <td class="field time"> {{ message.time }} </td>
                         <td class="field direction"> {{ $t('message.websockets_direction_' + message.direction.toLowerCase()) }} </td>
                         <td class="field opcode"> {{ message.opCode }} </td>
diff --git a/src/main/zapHomeFiles/hud/drawer.js b/src/main/zapHomeFiles/hud/drawer.js
index 86d09ce62..67128ab91 100644
--- a/src/main/zapHomeFiles/hud/drawer.js
+++ b/src/main/zapHomeFiles/hud/drawer.js
@@ -63,6 +63,23 @@ Vue.component('history', {
         },
         historyItemsFiltered() {
             this.historyItemsFilteredMessage = I18n.t("common_items_filtered", [this.hiddenMessageCount, this.messageCount]);
+        },
+        scrollToBottom() {
+            if (this.messages.length > 0) {
+                let lastMessage = this.messages[this.messages.length - 1]
+                let lastid = 'message-tr-' + lastMessage.id
+                let lastIdElem = document.getElementById(lastid);
+    
+                if(lastIdElem) {
+                    lastIdElem.scrollIntoView(false)
+                }
+    
+                //move horizontal scroll bar to the left
+                let tabsDetailsElems = document.querySelectorAll('tabs-details');
+                if (tabsDetailsElems.length > 0){
+                    tabsDetails[0].scrollTo(0, tabsDetails.scrollHeight);
+                }
+            }
         }
     },
     watch: {
@@ -97,21 +114,9 @@ Vue.component('history', {
 
     },
     updated() {
-        if (this.messages.length > 0) {
-            let lastMessage = this.messages[this.messages.length - 1]
-            let lastid = 'message-tr-' + lastMessage.id
-            let lastIdElem = document.getElementById(lastid);
-
-            if(lastIdElem) {
-                lastIdElem.scrollIntoView({block:'end', behavior:'smooth'});
-            }
-
-            //move horizontal scroll bar to the left
-            let tabsDetailsElems = document.querySelectorAll('tabs-details');
-            if (tabsDetailsElems.length > 0){
-                tabsDetails[0].scrollTo(0, tabsDetails.scrollHeight);
-            }
-        }
+        this.$nextTick(function () {
+            this.scrollToBottom()
+        })
     },
     beforeDestroy () {
         eventBus.$off('setMessages')
@@ -174,6 +179,23 @@ Vue.component('websockets', {
         },
         websocketsItemsFiltered() {
             this.websocketsItemsFilteredMessage = I18n.t("common_items_filtered", [this.hiddenMessageCount, this.messageCount]);
+        },
+        scrollToBottom() {
+            if (this.messages.length > 0) {
+                let lastMessage = this.messages[this.messages.length - 1]
+                let lastid = 'ws-message-tr-' + lastMessage.uniqId
+                let lastIdElem = document.getElementById(lastid);
+    
+                if(lastIdElem) {
+                    lastIdElem.scrollIntoView(false)
+                }
+    
+                //move horizontal scroll bar to the left
+                let tabsDetailsElems = document.querySelectorAll('tabs-details');
+                if (tabsDetailsElems.length > 0){
+                    tabsDetails[0].scrollTo(0, tabsDetails.scrollHeight);
+                }
+            }
         }
     },
     watch: {
@@ -207,20 +229,9 @@ Vue.component('websockets', {
         });
     },
     updated() {
-        if (this.messages.length > 0) {
-            let lastMessage = this.messages[this.messages.length - 1]
-            let lastid = 'message-tr-' + lastMessage.messageId
-            let lastIdElem = document.querySelector(lastid);
-            if(lastIdElem){
-                lastIdElem.scrollIntoView({block:'end', behavior:'smooth'});
-            }
-
-            //move horizontal scroll bar to the left
-            let tabsDetailsElems = document.querySelectorAll('tabs-details');
-            if (tabsDetailsElems.length > 0){
-                tabsDetails[0].scrollTo(0, tabsDetails.scrollHeight);
-            }
-        }
+        this.$nextTick(function () {
+            this.scrollToBottom()
+        });
     },
 });
 
diff --git a/src/main/zapHomeFiles/hud/tools/websockets.js b/src/main/zapHomeFiles/hud/tools/websockets.js
index 74a7c7ce1..c611da11f 100644
--- a/src/main/zapHomeFiles/hud/tools/websockets.js
+++ b/src/main/zapHomeFiles/hud/tools/websockets.js
@@ -84,6 +84,7 @@ var WebSockets = (function() {
 			message.opCode = event.detail.opCode + '=' + event.detail.opCodeString;
 			message.channelId = event.detail.channelId;
 			message.messageId = event.detail.messageId;
+			message.uniqId = '' + message.channelId + message.messageId
 	
 			utils.messageAllTabs('drawer', {action: 'updateWebSockets', messages: [message]})
 				.catch(utils.errorHandler);