diff --git a/src/index.html b/src/index.html
index 156ea32..2af53fb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -205,7 +205,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                 <div class="btn btn-primary" onclick="activateTextTool()"><i class="fas fa-font"></i> Add Text</div>
                 <div class="btn btn-primary" onclick="activateNotaryCertificateTool()"><i class="fas fa-sticky-note"></i> Add Certificate</div>
                 <div class="btn btn-primary" onclick="addPage()"><i class="fas fa-plus"></i> Append Blank Page</div>
-                <div class="btn btn-primary" onclick="disableGuideBox()">Cancel</div>
+                <div class="btn btn-primary disabled" id="cancelDrawBtn" onclick="disableGuideBox()">Cancel</div>
             </div>
         </div>
         <div class="card d-inline-block">
diff --git a/src/js/drawtools.js b/src/js/drawtools.js
index 18f9160..dd35636 100644
--- a/src/js/drawtools.js
+++ b/src/js/drawtools.js
@@ -190,6 +190,7 @@ $("#page-canvas-container").on("click", ".page-canvas.active", function (evt) {
 
 
 function enableGuideBox(image, scalecorrectionfactor) {
+    $("#cancelDrawBtn").removeClass("disabled");
     if (typeof scalecorrectionfactor == "undefined") {
         scalecorrectionfactor = 1;
     }
@@ -214,6 +215,7 @@ function enableGuideBox(image, scalecorrectionfactor) {
 
 function disableGuideBox() {
     $("#placementguidebox").css("display", "none");
+    $("#cancelDrawBtn").addClass("disabled");
 
     var context = $("#placementguidebox")[0].getContext('2d');
     context.clearRect(0, 0, $("#placementguidebox")[0].width, $("#placementguidebox")[0].height);