diff --git a/templates/mail/notify/workflow_run.tmpl b/templates/mail/notify/workflow_run.tmpl
index a1c1c24546..70ba74937a 100644
--- a/templates/mail/notify/workflow_run.tmpl
+++ b/templates/mail/notify/workflow_run.tmpl
@@ -4,11 +4,73 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
 	<title>{{.Subject}}</title>
+	<style>
+		body {
+			background-color: #f5f7fa;
+			margin: 20px;
+		}
+
+		h2, h3 {
+			color: #2c3e50;
+			margin-bottom: 20px;
+		}
+
+		ul {
+			list-style: none;
+			padding: 0;
+			margin: 0 0 30px 0;
+		}
+
+		li {
+			background-color: #ffffff;
+			border: 1px solid #ddd;
+			border-radius: 6px;
+			padding: 12px 16px;
+			margin-bottom: 10px;
+			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+			transition: box-shadow 0.2s ease;
+		}
+
+		li:hover {
+			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+		}
+
+		a {
+			color: #0073e6;
+			text-decoration: none;
+			font-weight: bold;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+
+		.button-container {
+			text-align: center;
+			margin-top: 30px;
+		}
+
+		.button-link {
+			display: inline-block;
+			background-color: #28a745;
+			color: #ffffff !important;
+			text-decoration: none;
+			padding: 10px 20px;
+			border-radius: 5px;
+			font-weight: bold;
+			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+			transition: background-color 0.3s ease;
+		}
+
+		.button-link:hover {
+			background-color: #218838;
+		}
+	</style>
 </head>
 <body>
-	<h4>
+	<h2>
 	{{.Repo.FullName}} {{.Run.WorkflowID}}: {{.RunStatusText}}
-	</h4>
+	</h2>
 	<ul>
 	{{range $job := .Jobs}}
 		<li>
@@ -18,9 +80,11 @@
 		</li>
 	{{end}}
 	</ul>
-	<p>
-		<br>
-		<a href="{{.Run.HTMLURL}}">{{.locale.Tr "mail.view_it_on" AppName}}</a>.
-	</p>
+	<br/>
+	<div class="button-container">
+		<a class="button-link" href="{{.Run.HTMLURL}}">
+			{{.locale.Tr "mail.view_it_on" AppName}}
+		</a>
+	</div>
 </body>
 </html>
