diff --git a/frappe/public/js/frappe/form/controls/signature.js b/frappe/public/js/frappe/form/controls/signature.js
index b0b2a370ee..167695ac10 100644
--- a/frappe/public/js/frappe/form/controls/signature.js
+++ b/frappe/public/js/frappe/form/controls/signature.js
@@ -5,19 +5,26 @@ frappe.ui.form.ControlSignature = class ControlSignature extends frappe.ui.form.
 		this.loading = false;
 		super.make();
 
-		this.load_lib().then(() => {
-			// make jSignature field
-			this.body = $('<div class="signature-field"></div>').appendTo(me.wrapper);
+		if (this.df.label) {
+			$(this.wrapper).find("label").text(__(this.df.label));
+		}
 
-			if (this.body.is(":visible")) {
-				this.make_pad();
-			} else {
-				$(document).on("frappe.ui.Dialog:shown", () => {
-					this.make_pad();
-				});
-			}
+		frappe.require("/assets/frappe/js/lib/jSignature.min.js").then(() => {
+			// make jSignature field
+			me.body = $('<div class="signature-field"></div>').prependTo(me.$input_wrapper);
+
+			new ResizeObserver(() => me.make_pad()).observe(me.body[0]);
 		});
+
+		this.img_wrapper = $(`<div class="signature-display">
+			<div class="missing-image attach-missing-image">
+				${frappe.utils.icon("restriction", "md")}</i>
+			</div></div>`).prependTo(this.$input_wrapper);
+		this.img = $("<img class='img-responsive attach-image-display'>")
+			.appendTo(this.img_wrapper)
+			.toggle(false);
 	}
+
 	make_pad() {
 		let width = this.body.width();
 		if (width > 0 && !this.$pad) {
@@ -25,9 +32,10 @@ frappe.ui.form.ControlSignature = class ControlSignature extends frappe.ui.form.
 				.jSignature({
 					height: 200,
 					color: "var(--text-color)",
-					width: this.body.width(),
+					decorColor: "black",
+					width,
 					lineWidth: 2,
-					"background-color": "var(--control-bg)",
+					backgroundColor: "var(--control-bg)",
 				})
 				.on("change", this.on_save_sign.bind(this));
 			this.load_pad();
@@ -43,15 +51,8 @@ frappe.ui.form.ControlSignature = class ControlSignature extends frappe.ui.form.
 					this.on_reset_sign();
 					return false;
 				});
+			this.refresh_input();
 		}
-
-		this.img_wrapper = $(`<div class="signature-display">
-			<div class="missing-image attach-missing-image">
-				${frappe.utils.icon("restriction", "md")}</i>
-			</div></div>`).appendTo(this.wrapper);
-		this.img = $("<img class='img-responsive attach-image-display'>")
-			.appendTo(this.img_wrapper)
-			.toggle(false);
 	}
 	refresh_input() {
 		// signature dom is not ready
@@ -131,11 +132,4 @@ frappe.ui.form.ControlSignature = class ControlSignature extends frappe.ui.form.
 		this.set_my_value(base64_img);
 		this.set_image(this.get_value());
 	}
-
-	load_lib() {
-		if (!this.load_lib_promise) {
-			this.load_lib_promise = frappe.require("/assets/frappe/js/lib/jSignature.min.js");
-		}
-		return this.load_lib_promise;
-	}
 };
diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index 9685c66ed9..0f42f6af9d 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -423,12 +423,11 @@ textarea.form-control {
 	border: 1px solid var(--border-color);
 	border-radius: var(--border-radius);
 	position: relative;
-	margin-top: -10px;
 }
 
 .signature-display {
-	margin: 7px 0px;
 	background: var(--control-bg);
+	border-radius: var(--border-radius);
 	.attach-missing-image,
 	.attach-image-display {
 		cursor: pointer;