diff --git a/package-lock.json b/package-lock.json
index 3a81578e6a..4dfe83582d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19162,6 +19162,11 @@
             "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
             "dev": true
         },
+        "signature_pad": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-4.2.0.tgz",
+            "integrity": "sha512-YLWysmaUBaC5wosAKkgbX7XI+LBv2w5L0QUcI6Jc4moHYzv9BUBJtAyNLpWzHjtjKTeWOH6bfP4a4pzf0UinfQ=="
+        },
         "simple-concat": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
diff --git a/package.json b/package.json
index 7908293012..ebadfb06be 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
         "papaparse": "^4.3.3",
         "select2": "4.0.13",
         "sheetjs": "^2.0.0",
+        "signature_pad": "^4.2.0",
         "tableexport.jquery.plugin": "1.28.0",
         "tether": "^1.4.0",
         "vue-resource": "^1.5.2",
diff --git a/resources/views/account/accept/create.blade.php b/resources/views/account/accept/create.blade.php
index c05bc3a892..eb9398604c 100644
--- a/resources/views/account/accept/create.blade.php
+++ b/resources/views/account/accept/create.blade.php
@@ -70,9 +70,10 @@
                                 <h3 style="padding-top: 20px">{{trans('general.sign_tos')}}</h3>
                                 <div id="signature-pad" class="m-signature-pad">
                                     <div class="m-signature-pad--body col-md-12 col-sm-12 col-lg-12 col-xs-12">
-                                        <canvas></canvas>
+                                        <canvas style="width:100%;"></canvas>
                                         <input type="hidden" name="signature_output" id="signature_output">
                                     </div>
+                                    <button id="lock_button">Lock</button>
                                     <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12 text-center">
                                         <button type="button" class="btn btn-sm btn-default clear" data-action="clear" id="clear_button">{{trans('general.clear_signature')}}</button>
                                     </div>
@@ -94,6 +95,25 @@
 @section('moar_scripts')
 
     <script nonce="{{ csrf_token() }}">
+
+        const rotate_btn = document.querySelector("#lock_button");
+        rotate_btn.addEventListener("click", () => {
+            log.textContent += `Lock pressed \n`;
+
+            const oppositeOrientation = screen.orientation.type.startsWith("portrait")
+                ? "landscape"
+                : "portrait";
+            screen.orientation
+                .lock(oppositeOrientation)
+                .then(() => {
+                    log.textContent = `Locked to ${oppositeOrientation}\n`;
+                })
+                .catch((error) => {
+                    log.textContent += `${error}\n`;
+
+                });
+        });
+
         var wrapper = document.getElementById("signature-pad"),
             clearButton = wrapper.querySelector("[data-action=clear]"),
             saveButton = wrapper.querySelector("[data-action=save]"),