diff --git a/frappe/public/scss/desk.bundle.scss b/frappe/public/scss/desk.bundle.scss
index c0a876a5ec..7161853f4e 100644
--- a/frappe/public/scss/desk.bundle.scss
+++ b/frappe/public/scss/desk.bundle.scss
@@ -4,14 +4,6 @@
 @import "frappe/public/js/lib/leaflet/easy-button.css";
 @import "frappe/public/css/font-awesome.css";
 @import "frappe/public/css/octicons/octicons.css";
-// TODO: esbuild
-// @import "frappe/public/less/module.less";
-// @import "frappe/public/less/mobile.less";
-// @import "frappe/public/less/controls.less";
-
-// TODO: esbuild
-// chat has a separate bundle, so this shouldn't be needed
-// @import "frappe/public/less/chat.less";
 @import "frappe/public/css/fonts/inter/inter.css";
 @import "~frappe-charts/dist/frappe-charts.min";
 @import "~plyr/dist/plyr";
diff --git a/frappe/public/scss/desk/index.scss b/frappe/public/scss/desk/index.scss
index d0d968df63..c5b8271a36 100644
--- a/frappe/public/scss/desk/index.scss
+++ b/frappe/public/scss/desk/index.scss
@@ -8,6 +8,7 @@
 @import "../common/buttons";
 @import "../common/flex";
 @import "mobile";
+@import "module.scss";
 @import "form";
 @import "print_preview";
 @import "scrollbar";
diff --git a/frappe/public/less/module.less b/frappe/public/scss/desk/module.scss
similarity index 73%
rename from frappe/public/less/module.less
rename to frappe/public/scss/desk/module.scss
index f3215a95b7..1ff8b85874 100644
--- a/frappe/public/less/module.less
+++ b/frappe/public/scss/desk/module.scss
@@ -1,8 +1,6 @@
-@import "variables.less";
-
 .module-head {
 	padding: 15px 30px;
-	border-bottom: 1px solid @light-border-color;
+	border-bottom: 1px solid $border-color;
 }
 
 .module-head h1 {
@@ -20,7 +18,7 @@
 }
 
 .module-section {
-	border-bottom: 1px solid @light-border-color;
+	border-bottom: 1px solid $border-color;
 
 	.module-section-link {
 		line-height: 1.5em;
@@ -32,9 +30,9 @@
 	padding: 30px;
 }
 
-@media(min-width: @screen-xs) {
+@media(min-width: map-get($grid-breakpoints, "md")) {
 	.module-section:nth-child(even) {
-		background-color: @light-bg;
+		background-color: var(--bg-color);
 	}
 
 	.module-section:last-child {
@@ -42,31 +40,31 @@
 	}
 }
 
-@media(max-width: @screen-sm) {
+@media(max-width: map-get($grid-breakpoints, "lg")) {
 	.module-body {
 		margin-top: 15px;
-		border-top: 1px solid @border-color;
+		border-top: 1px solid $border-color;
 	}
 }
 
-@media(max-width: @screen-xs) {
+@media(max-width: map-get($grid-breakpoints, "md")) {
 	.module-body {
 		margin-top: 0;
 		border-top: 1px solid transparent;
 	}
 }
 
-@media(max-width: @screen-xs) {
+@media(max-width: map-get($grid-breakpoints, "md")) {
 	.module-section {
 		border: none;
 	}
 
 	.module-section-column {
-		border-bottom: 1px solid @light-border-color;
+		border-bottom: 1px solid $border-color;
 	}
 
 	.module-section-column:nth-child(even) {
-		background-color: @light-bg;
+		background-color: var(--bg-color);
 	}
 
 	.module-section:last-child .module-section-column:last-child {
@@ -79,7 +77,7 @@
 	margin: 0px;
 	padding: 7px;
 	font-weight: 400;
-	border-bottom: 1px solid @border-color;
+	border-bottom: 1px solid $border-color;
 	cursor: pointer;
 	transition: 0.2s;
 	-webkit-transition: 0.2s;
@@ -99,7 +97,7 @@
 }
 
 .module-item:hover, .module-item:focus {
-	background-color: @panel-bg;
+	background-color: var(--bg-color);
 }
 
 .module-item:last-child {
@@ -128,7 +126,7 @@
 	width: 0px;
 }
 
-@media(max-width: @screen-xs) {
+@media(max-width: map-get($grid-breakpoints, "md")) {
 
 	body[data-route^="Module"] {
 		.page-title {