diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index 4a40e8e..7326238 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -2,7 +2,7 @@
 	"css/erpnext.css": [
 		"public/less/erpnext.less",
 		"public/less/hub.less",
-		"public/less/call_popup.less",
+		"public/scss/call_popup.scss",
 		"public/scss/point-of-sale.scss"
 	],
 	"css/marketplace.css": [
diff --git a/erpnext/public/less/call_popup.less b/erpnext/public/less/call_popup.less
deleted file mode 100644
index 32e85ce..0000000
--- a/erpnext/public/less/call_popup.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.call-popup {
-	a:hover {
-		text-decoration: underline;
-	}
-	.for-description {
-		max-height: 250px;
-		overflow: scroll;
-	}
-}
\ No newline at end of file
diff --git a/erpnext/public/scss/call_popup.scss b/erpnext/public/scss/call_popup.scss
new file mode 100644
index 0000000..95e3182
--- /dev/null
+++ b/erpnext/public/scss/call_popup.scss
@@ -0,0 +1,21 @@
+.call-popup {
+	a:hover {
+		text-decoration: underline;
+	}
+	.for-description {
+		max-height: 250px;
+		overflow: scroll;
+	}
+}
+
+audio {
+	height: 40px;
+	width: 100%;
+	max-width: 500px;
+	background-color: var(--control-bg);
+	border-radius: var(--border-radius-sm);
+	&-webkit-media-controls-panel {
+		background: var(--control-bg);
+	}
+	outline: none;
+}