diff --git a/erpnext/public/css/email.css b/erpnext/public/css/email.css
new file mode 100644
index 00000000000..8cf1a31ad6d
--- /dev/null
+++ b/erpnext/public/css/email.css
@@ -0,0 +1,29 @@
+.panel-header {
+  background-color: #fafbfc;
+  border: 1px solid #d1d8dd;
+  border-radius: 3px 3px 0 0;
+}
+.panel-body {
+  background-color: #fff;
+  border: 1px solid #d1d8dd;
+  border-top: none;
+  border-radius: 0 0 3px 3px;
+  overflow-wrap: break-word;
+}
+.sender-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+.sender-avatar-placeholder {
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  vertical-align: middle;
+  line-height: 24px;
+  text-align: center;
+  color: #d1d8dd;
+  border: 1px solid #d1d8dd;
+  background-color: #fff;
+}
diff --git a/erpnext/public/less/email.less b/erpnext/public/less/email.less
new file mode 100644
index 00000000000..4077c4940d1
--- /dev/null
+++ b/erpnext/public/less/email.less
@@ -0,0 +1,32 @@
+@import "../../../../frappe/frappe/public/less/variables.less";
+
+.panel-header {
+	background-color: @light-bg;
+	border: 1px solid @border-color;
+	border-radius: 3px 3px 0 0;
+}
+
+.panel-body {
+	background-color: #fff;
+	border: 1px solid @border-color;
+	border-top: none;
+	border-radius: 0 0 3px 3px;
+	overflow-wrap: break-word;
+}
+
+.sender-avatar {
+	width: 24px;
+	height: 24px;
+	border-radius: 3px;
+	vertical-align: middle;
+}
+
+.sender-avatar-placeholder {
+	.sender-avatar;
+
+	line-height: 24px;
+	text-align: center;
+	color: @border-color;
+	border: 1px solid @border-color;
+	background-color: #fff;
+}
\ No newline at end of file
diff --git a/erpnext/templates/emails/daily_work_summary.html b/erpnext/templates/emails/daily_work_summary.html
index 726de3b8906..a22e09cb8de 100644
--- a/erpnext/templates/emails/daily_work_summary.html
+++ b/erpnext/templates/emails/daily_work_summary.html
@@ -1,28 +1,25 @@
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 	<tr>
-		<div style="color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; overflow-wrap: break-word;">
-			<h3>{{ title }}</h3>
-		</div>
+		<h3>{{ title }}</h3>
 	</tr>
 </table>
 {% for reply in replies %}
-<table border="0" cellpadding="0" cellspacing="0" width="100%"
-	style="background-color: #fafbfc; border: 1px solid #d1d8dd; border-radius: 3px 3px 0 0">
+<table class="panel-header" border="0" cellpadding="0" cellspacing="0" width="100%">
 	<tr height="10"></tr>
 	<tr>
 		<td width="15"></td>
 		<td valign="top" width="24">
 			{% if reply.image %}
-			<img width="24" height="24" embed="{{ reply.image }}" style="border-radius: 3px; vertical-align: middle;" />
+			<img class="sender-avatar" width="24" height="24" embed="{{ reply.image }}"/>
 			{% else %}
-			<div style="width: 24px; height: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;background: #fff; border-radius: 3px; border: 1px solid #d1d8dd; text-align: center; line-height: 24px; color: #d1d8dd;">
+			<div class="sender-avatar-placeholder">
 				{{ reply.sender_name[0] }}
 			</div>
 			{% endif %}
 		</td>
 		<td width="10"></td>
 		<td>
-			<div style="font-size: 12px; color: #8D99A6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;">
+			<div class="text-medium text-muted">
 				<span>{{ reply.sender_name }}</span>
 			</div>
 		</td>
@@ -30,13 +27,12 @@
 	</tr>
 	<tr height="10"></tr>
 </table>
-<table border="0" cellpadding="0" cellspacing="0" width="100%"
-	style="background-color: #fff; border: 1px solid #d1d8dd; border-top: none; border-radius: 0 0 3px 3px">
+<table class="panel-body" border="0" cellpadding="0" cellspacing="0" width="100%">
 	<tr height="10"></tr>
 	<tr>
 		<td width="15"></td>
 		<td>
-			<div style="font-size: 14px; color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;">
+			<div>
 				{{ reply.content }}
 			</div>
 		</td>
@@ -51,7 +47,7 @@
 {% if did_not_reply %}
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 	<tr>
-		<div style="font-size: 14px; color: #8D99A6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; word-wrap: break-word; line-height: 22px; overflow-wrap: break-word; text-decoration: none;">
+		<div class="text-muted">
 			<p>{{ did_not_reply_title }}: {{ did_not_reply }}</p>
 		</div>
 	</tr>