diff --git a/dev/Styles/_End.less b/dev/Styles/_End.less
index 6e11aad1b..75875d0f0 100644
--- a/dev/Styles/_End.less
+++ b/dev/Styles/_End.less
@@ -33,6 +33,7 @@ input:-webkit-autofill:active {
 	transition: color 9999s ease-out, background-color 9999s ease-out;
 }
 
+.btn-rotate,
 [data-icon].rotate::before {
 	transform: rotate(-180deg);
 }
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
index 1c04a1a30..689530966 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
@@ -12,7 +12,7 @@
 			<i class="icon-check-mark-circle-two"></i>
 		</a>
 		<a class="btn fontastic" data-bind="visible: !canBeUndeleted(), command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
-		<a class="btn fontastic" data-bind="visible: canBeUndeleted, command: undeleteCommand" data-i18n="[title]GLOBAL/UNDELETE" style="transform:rotate(-180deg)">🗑</a>
+		<a class="btn fontastic" data-bind="visible: canBeUndeleted, command: undeleteCommand" data-i18n="[title]GLOBAL/UNDELETE"><div class=btn-rotate>🗑</div></a>
 	</div>
 	<div class="btn-group">
 		<a class="btn btn-thin buttonUp fontastic" data-bind="command: goUpCommand">❮</a>