diff --git a/scripts/server-frontend-dev.js b/scripts/server-frontend-dev.js
index f4b15af..e7dc5a1 100644
--- a/scripts/server-frontend-dev.js
+++ b/scripts/server-frontend-dev.js
@@ -3,7 +3,6 @@ import WebpackDevServer from "webpack-dev-server";
 import config from "../config/webpack.dev.js";
 
 const devServerConfig = {
-    hot: true,
     proxy: {
         // proxies for the backend
         "/api": "http://localhost:3000",
@@ -15,12 +14,14 @@ const devServerConfig = {
     },
 };
 
-export default function startFrontendDevServer(port, resolve) {
-    new WebpackDevServer(webpack(config), devServerConfig).start(port, (err) => {
+export default async function startFrontendDevServer(port, resolve) {
+    resolve(1);
+    await new WebpackDevServer(webpack(config), devServerConfig).start(port, (err) => {
         if (err) {
             console.log(err);
         }
-        console.log("Listening on port " + port);
     });
-    resolve(1);
+    console.log(
+        "\n\n-------Successfully started dev server on http://localhost:8080-----------\n\n"
+    );
 }
diff --git a/src/index.html b/src/index.html
index 0bf458b..9828e95 100644
--- a/src/index.html
+++ b/src/index.html
@@ -46,10 +46,7 @@
                 </button>
             </div>
 
-            <div class="btn-group whiteboard-edit-group">
-                <button tool="mouse" title="Take the mouse" type="button" class="whiteboard-tool">
-                    <i class="fa fa-mouse-pointer"></i>
-                </button>
+            <div class="btn-group">
                 <button
                     tool="hand"
                     title="pan the whiteboard"
@@ -58,6 +55,12 @@
                 >
                     <i class="fa fa-hand-paper" aria-hidden="true"></i>
                 </button>
+            </div>
+
+            <div class="btn-group whiteboard-edit-group">
+                <button tool="mouse" title="Take the mouse" type="button" class="whiteboard-tool">
+                    <i class="fa fa-mouse-pointer"></i>
+                </button>
 
                 <button
                     style="padding-bottom: 11px"
diff --git a/src/js/services/ReadOnlyService.js b/src/js/services/ReadOnlyService.js
index f2a2f66..efba4b9 100644
--- a/src/js/services/ReadOnlyService.js
+++ b/src/js/services/ReadOnlyService.js
@@ -32,6 +32,8 @@ class ReadOnlyService {
         // other tools
         $(".whiteboard-tool[tool=mouse]").click();
         $(".whiteboard-tool").prop("disabled", true);
+        $(".whiteboard-tool[tool='hand']").prop("disabled", false);
+
         $(".whiteboard-edit-group > button").prop("disabled", true);
         $(".whiteboard-edit-group").addClass("group-disabled");
         $("#whiteboardUnlockBtn").hide();
diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js
index e494dff..dd83477 100644
--- a/src/js/whiteboard.js
+++ b/src/js/whiteboard.js
@@ -137,7 +137,7 @@ const whiteboard = {
             if (_this.imgDragActive || _this.drawFlag) {
                 return;
             }
-            if (ReadOnlyService.readOnlyActive) return;
+            if (ReadOnlyService.readOnlyActive && _this.tool !== "hand") return;
 
             _this.drawFlag = true;
 
@@ -266,7 +266,7 @@ const whiteboard = {
             if (_this.imgDragActive) {
                 return;
             }
-            if (ReadOnlyService.readOnlyActive) return;
+            if (ReadOnlyService.readOnlyActive && _this.tool !== "hand") return;
             _this.drawFlag = false;
             _this.ctx.globalCompositeOperation = _this.oldGCO;