diff --git a/src/css/main.css b/src/css/main.css
index f9493fd..9ea45c6 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -33,6 +33,24 @@ button::-moz-focus-inner {
     border: 0;
 }
 
+.whiteboard-edit-group.group-disabled {
+    background: repeating-linear-gradient(
+        45deg,
+        rgba(255, 166, 0, 0.366) ,
+        rgba(255, 166, 0, 0.366) 10px,
+        rgba(255, 166, 0, 0.666) 10px,
+        rgba(255, 166, 0, 0.666) 20px
+    );
+    
+}
+
+/*
+ * Deactivate all pointer events on all the children
+ * of a group when it's disabled.
+ */
+.whiteboard-edit-group.group-disabled > * {
+    pointer-events: none;
+}
 
 /* Clear floats (clearfix hack) */
 
@@ -60,8 +78,8 @@ button {
     position: relative;
 }
 
-.whiteboardTool.active {
-    background: #bfbfbf;
+.whiteboard-tool.active:not(:disabled) {
+    background: #dfdfdf;
 }
 
 #whiteboardThicknessSlider {
@@ -94,4 +112,4 @@ button {
     border: 0px;
     min-width: 50px;
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/index.html b/src/index.html
index 5ee8c33..5c6031f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,57 +14,60 @@
 	<!---Toolbar -!-->
 	<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
 		<div class="btn-group">
-			<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn whiteboardEditBtn">
+			<button id="whiteboardLockBtn" style="background-color: orange;" title="View and Write" type="button">
+				<i class="fa fa-lock"></i>
+			</button>
+			<button id="whiteboardUnlockBtn" title="View Only" type="button">
+				<i class="fa fa-lock-open"></i>
+			</button>
+		</div>
+
+		<div class="btn-group whiteboard-edit-group">
+			<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button">
 				<i class="fa fa-trash"></i>
 			</button>
 			<button style="position:absolute; left:0px; top:0px; width: 46px; display:none;"
-				id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button" class="whiteboardBtn whiteboardEditBtn">
+				id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button">
 				<i class="fa fa-check"></i>
 			</button>
-			<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn whiteboardEditBtn">
+			<button id="whiteboardUndoBtn" title="Undo your last step" type="button">
 				<i class="fa fa-undo"></i>
 			</button>
-			<button id="whiteboardRedoBtn" title="Redo your last undo" type="button" class="whiteboardBtn whiteboardEditBtn">
+			<button id="whiteboardRedoBtn" title="Redo your last undo" type="button">
 				<i class="fa fa-redo"></i>
 			</button>
 		</div>
 
-		<div class="btn-group">
-			<button id="whiteboardLockBtn" title="View and Write" type="button" class="whiteboardBtn">
-				<i class="fa fa-lock"></i>
-			</button>
-			<button id="whiteboardUnlockBtn" title="View Only" type="button" class="whiteboardBtn">
-				<i class="fa fa-lock-open"></i>
-			</button>
-			<button tool="mouse" title="Take the mouse" type="button" class="whiteboardTool">
+		<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;" tool="recSelect" title="Select an area" type="button"
-				class="whiteboardTool">
+				class="whiteboard-tool">
 				<img src="./images/dottedRec.png">
 			</button>
-			<button tool="pen" title="Take the pen" type="button" class="whiteboardTool active">
+			<button tool="pen" title="Take the pen" type="button" class="whiteboard-tool active">
 				<i class="fa fa-pencil-alt"></i>
 			</button>
 			<button style="padding-bottom: 8px; padding-top: 6px;" tool="line" title="draw a line" type="button"
-				class="whiteboardTool">
+				class="whiteboard-tool">
 				╱
 			</button>
-			<button tool="rect" title="draw a rectangle" type="button" class="whiteboardTool">
+			<button tool="rect" title="draw a rectangle" type="button" class="whiteboard-tool">
 				<i class="far fa-square"></i>
 			</button>
-			<button tool="circle" title="draw a circle" type="button" class="whiteboardTool">
+			<button tool="circle" title="draw a circle" type="button" class="whiteboard-tool">
 				<i class="far fa-circle"></i>
 			</button>
-			<button tool="text" title="write text" type="button" class="whiteboardTool">
+			<button tool="text" title="write text" type="button" class="whiteboard-tool">
 				<i class="fas fa-font"></i>
 			</button>
-			<button tool="eraser" title="take the eraser" type="button" class="whiteboardTool">
+			<button tool="eraser" title="take the eraser" type="button" class="whiteboard-tool">
 				<i class="fa fa-eraser"></i>
 			</button>
 		</div>
 
-		<div class="btn-group">
+		<div class="btn-group whiteboard-edit-group">
 			<button style="width: 190px; cursor:default;">
 				<div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i
 						class="fa fa-pencil-alt"></i></div>
@@ -80,42 +83,40 @@
 			</button>
 		</div>
 
+		<div class="btn-group whiteboard-edit-group">
+			<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button">
+				<i class="fas fa-image"></i>
+				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
+					class="fas fa-upload"></i>
+			</button>
+
+			<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button">
+				<i class="far fa-file-alt"></i>
+				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
+					class="fas fa-upload"></i>
+			</button>
+
+			<input style="display:none;" id="myFile" type="file" />
+		</div>
+
 		<div class="btn-group">
-			<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn">
+			<button id="saveAsImageBtn" title="Save whiteboard as image" type="button">
 				<i class="fas fa-image"></i>
 				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
 					class="fas fa-save"></i>
 			</button>
 			<button style="position: relative; display: none;" id="uploadWebDavBtn" title="Save whiteboard to webdav"
-				type="button" class="whiteboardBtn">
+				type="button">
 
 				<i class="fas fa-globe"></i>
 				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
 					class="fas fa-save"></i>
 			</button>
-			<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button"
-				class="whiteboardBtn">
+			<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button">
 				<i class="far fa-file-alt"></i>
 				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
 					class="fas fa-save"></i>
 			</button>
-		</div>
-
-		<div class="btn-group">
-			<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn whiteboardEditBtn">
-				<i class="fas fa-image"></i>
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
-					class="fas fa-upload"></i>
-			</button>
-
-			<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button"
-				class="whiteboardBtn whiteboardEditBtn">
-
-				<i class="far fa-file-alt"></i>
-				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
-					class="fas fa-upload"></i>
-			</button>
-			<input style="display:none;" id="myFile" type="file" />
 
 			<button id="shareWhiteboardBtn" title="share whiteboard" type="button">
 				<i class="fas fa-share-square"></i>
diff --git a/src/js/main.js b/src/js/main.js
index 86f5887..4e296fb 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -69,7 +69,7 @@ function main() {
 
     $(document).ready(function () {
         // start in readOnly mode
-        whiteboard.setViewOnly(true);
+        whiteboard.setReadOnly(true);
 
         if (getQueryVariable("webdav") == "true") {
             $("#uploadWebDavBtn").show();
@@ -80,7 +80,7 @@ function main() {
             whiteboardId: whiteboardId,
             username: btoa(myUsername),
             sendFunction: function (content) {
-                if (whiteboard.viewOnly) return;
+                if (whiteboard.readOnly) return;
                 if (content.t === 'cursor') {
                     if (whiteboard.drawFlag) return;
                 }
@@ -144,18 +144,18 @@ function main() {
             clearWhiteboard: function () { whiteboard.clearWhiteboard(); },
             undoStep: function () { whiteboard.undoWhiteboardClick(); },
             redoStep: function () { whiteboard.redoWhiteboardClick(); },
-            setTool_mouse: function () { $(".whiteboardTool[tool=mouse]").click(); },
-            setTool_recSelect: function () { $(".whiteboardTool[tool=recSelect]").click(); },
+            setTool_mouse: function () { $(".whiteboard-tool[tool=mouse]").click(); },
+            setTool_recSelect: function () { $(".whiteboard-tool[tool=recSelect]").click(); },
             setTool_pen: function () {
-                $(".whiteboardTool[tool=pen]").click();
+                $(".whiteboard-tool[tool=pen]").click();
                 whiteboard.redrawMouseCursor();
             },
-            setTool_line: function () { $(".whiteboardTool[tool=line]").click(); },
-            setTool_rect: function () { $(".whiteboardTool[tool=rect]").click(); },
-            setTool_circle: function () { $(".whiteboardTool[tool=circle]").click(); },
-            setTool_text: function () { $(".whiteboardTool[tool=text]").click(); },
+            setTool_line: function () { $(".whiteboard-tool[tool=line]").click(); },
+            setTool_rect: function () { $(".whiteboard-tool[tool=rect]").click(); },
+            setTool_circle: function () { $(".whiteboard-tool[tool=circle]").click(); },
+            setTool_text: function () { $(".whiteboard-tool[tool=text]").click(); },
             setTool_eraser: function () {
-                $(".whiteboardTool[tool=eraser]").click();
+                $(".whiteboard-tool[tool=eraser]").click();
                 whiteboard.redrawMouseCursor();
             },
             thickness_bigger: function () {
@@ -200,21 +200,21 @@ function main() {
             },
 
             toggleLineRecCircle: function () {
-                var activeTool = $(".whiteboardTool.active").attr("tool");
+                var activeTool = $(".whiteboard-tool.active").attr("tool");
                 if (activeTool == "line") {
-                    $(".whiteboardTool[tool=rect]").click();
+                    $(".whiteboard-tool[tool=rect]").click();
                 } else if (activeTool == "rect") {
-                    $(".whiteboardTool[tool=circle]").click();
+                    $(".whiteboard-tool[tool=circle]").click();
                 } else {
-                    $(".whiteboardTool[tool=line]").click();
+                    $(".whiteboard-tool[tool=line]").click();
                 }
             },
             togglePenEraser: function () {
-                var activeTool = $(".whiteboardTool.active").attr("tool");
+                var activeTool = $(".whiteboard-tool.active").attr("tool");
                 if (activeTool == "pen") {
-                    $(".whiteboardTool[tool=eraser]").click();
+                    $(".whiteboard-tool[tool=eraser]").click();
                 } else {
-                    $(".whiteboardTool[tool=pen]").click();
+                    $(".whiteboard-tool[tool=pen]").click();
                 }
             },
             toggleMainColors: function () {
@@ -300,17 +300,17 @@ function main() {
 
         // view only
         $("#whiteboardLockBtn").click(function () {
-            whiteboard.setViewOnly(false);
+            whiteboard.setReadOnly(false);
         });
         $("#whiteboardUnlockBtn").click(function () {
-            whiteboard.setViewOnly(true);
+            whiteboard.setReadOnly(true);
         });
         $("#whiteboardUnlockBtn").hide();
         $("#whiteboardLockBtn").show();
 
         // switch tool
-        $(".whiteboardTool").click(function () {
-            $(".whiteboardTool").removeClass("active");
+        $(".whiteboard-tool").click(function () {
+            $(".whiteboard-tool").removeClass("active");
             $(this).addClass("active");
             var activeTool = $(this).attr("tool");
             whiteboard.setTool(activeTool);
@@ -323,7 +323,7 @@ function main() {
 
         // upload image button
         $("#addImgToCanvasBtn").click(function () {
-            if (whiteboard.viewOnly) return;
+            if (whiteboard.readOnly) return;
             showBasicAlert("Please drag the image into the browser.");
         });
 
@@ -488,14 +488,14 @@ function main() {
 
         // On thickness slider change
         $("#whiteboardThicknessSlider").on("input", function () {
-            if (whiteboard.viewOnly) return;
+            if (whiteboard.readOnly) return;
             whiteboard.setStrokeThickness($(this).val());
         });
 
         // handle drag&drop
         var dragCounter = 0;
         $('#whiteboardContainer').on("dragenter", function (e) {
-            if (whiteboard.viewOnly) return;
+            if (whiteboard.readOnly) return;
             e.preventDefault();
             e.stopPropagation();
             dragCounter++;
@@ -503,7 +503,7 @@ function main() {
         });
 
         $('#whiteboardContainer').on("dragleave", function (e) {
-            if (whiteboard.viewOnly) return;
+            if (whiteboard.readOnly) return;
 
             e.preventDefault();
             e.stopPropagation();
@@ -514,7 +514,7 @@ function main() {
         });
 
         $('#whiteboardContainer').on('drop', function (e) { //Handle drop
-            if (whiteboard.viewOnly) return;
+            if (whiteboard.readOnly) return;
 
             if (e.originalEvent.dataTransfer) {
                 if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js
index 40c60e2..7e623fe 100644
--- a/src/js/whiteboard.js
+++ b/src/js/whiteboard.js
@@ -4,6 +4,7 @@ const whiteboard = {
     canvas: null,
     ctx: null,
     drawcolor: "black",
+    previousToolHtmlElem: null, // useful for handling read-only mode
     tool: "mouse",
     thickness: 4,
     prevX: null, //prev Mouse position
@@ -39,7 +40,7 @@ const whiteboard = {
         sendFunction: null,
         backgroundGridUrl: './images/KtEBa2.png'
     },
-    viewOnly: true,
+    readOnly: true,
     lastPointerSentTime: 0,
     lastPointerX: 0,
     lastPointerY: 0,
@@ -103,7 +104,7 @@ const whiteboard = {
             if (_this.imgDragActive || _this.drawFlag) {
                 return;
             }
-            if (_this.viewOnly) return;
+            if (_this.readOnly) return;
 
             _this.drawFlag = true;
             _this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1;
@@ -161,7 +162,7 @@ const whiteboard = {
             if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) {
                 return;
             }
-            if (_this.viewOnly) return;
+            if (_this.readOnly) return;
 
             var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
             var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
@@ -180,7 +181,7 @@ const whiteboard = {
 
         _this.mouseOverlay.on("mousemove touchmove", function (e) {
             e.preventDefault();
-            if (_this.viewOnly) return;
+            if (_this.readOnly) return;
             _this.triggerMouseMove(e);
         });
 
@@ -192,7 +193,7 @@ const whiteboard = {
             if (_this.imgDragActive) {
                 return;
             }
-            if (_this.viewOnly) return;
+            if (_this.readOnly) return;
             _this.drawFlag = false;
             _this.drawId++;
             _this.ctx.globalCompositeOperation = _this.oldGCO;
@@ -289,12 +290,12 @@ const whiteboard = {
         }
 
         _this.mouseOverlay.on("mouseout", function (e) {
-            if (_this.viewOnly) return;
+            if (_this.readOnly) return;
             _this.triggerMouseOut();
         });
 
         _this.mouseOverlay.on("mouseover", function (e) {
-            if (_this.viewOnly) return;
+            if (_this.readOnly) return;
             _this.triggerMouseOver();
         });
 
@@ -576,7 +577,7 @@ const whiteboard = {
     },
     clearWhiteboard: function () {
         var _this = this;
-        if (_this.viewOnly) return;
+        if (_this.readOnly) return;
         _this.canvas.height = _this.canvas.height;
         _this.imgContainer.empty();
         _this.textContainer.empty();
@@ -787,12 +788,12 @@ const whiteboard = {
         });
     },
     undoWhiteboardClick: function () {
-        if (this.viewOnly) return;
+        if (this.readOnly) return;
         this.sendFunction({ "t": "undo" });
         this.undoWhiteboard();
     },
     redoWhiteboardClick: function () {
-        if (this.viewOnly) return;
+        if (this.readOnly) return;
         this.sendFunction({ "t": "redo" });
         this.redoWhiteboard();
     },
@@ -825,22 +826,27 @@ const whiteboard = {
             this.backgroundGrid.append('<div style="position:absolute; left:' + (width + 5) + 'px; top:0px;">smallest screen participating</div>');
         }
     },
-    setViewOnly: function(what) {
+    setReadOnly: function(what) {
         var _this = this;
-        _this.viewOnly = what;
+        _this.readOnly = what;
 
         if (what === true){
-            $(".whiteboardTool[tool=mouse]").click(); // reset tool to prevent use of text
-            $(".whiteboardTool").prop("disabled", true);
-            $(".whiteboardEditBtn").prop("disabled", true);
+            _this.previousToolHtmlElem = $(".whiteboard-tool.active");
+            // switch to mouse tool to prevent the use of the 
+            // other tools
+            $(".whiteboard-tool[tool=mouse]").click();
+            $(".whiteboard-tool").prop("disabled", true);
+            $(".whiteboard-edit-group > button").prop("disabled", true);
+            $(".whiteboard-edit-group").addClass("group-disabled");
             $("#whiteboardUnlockBtn").hide();
             $("#whiteboardLockBtn").show();
-
         } else {
-            $(".whiteboardTool").prop("disabled", false);
-            $(".whiteboardEditBtn").prop("disabled", false);
+            $(".whiteboard-tool").prop("disabled", false);
+            $(".whiteboard-edit-group > button").prop("disabled", false);
+            $(".whiteboard-edit-group").removeClass("group-disabled");
             $("#whiteboardUnlockBtn").show();
             $("#whiteboardLockBtn").hide();
+            if (_this.previousToolHtmlElem) _this.previousToolHtmlElem.click();
         }
     },
     handleEventsAndData: function (content, isNewData, doneCallback) {