diff --git a/src/DebugBar/Resources/widgets/mails/widget.js b/src/DebugBar/Resources/widgets/mails/widget.js
index dcc6cf5..208088b 100644
--- a/src/DebugBar/Resources/widgets/mails/widget.js
+++ b/src/DebugBar/Resources/widgets/mails/widget.js
@@ -14,30 +14,42 @@
 
         render: function() {
             this.$list = new  PhpDebugBar.Widgets.ListWidget({ itemRenderer: function(li, mail) {
-                $('<span />').addClass(csscls('subject')).text(mail.subject).appendTo(li);
-                $('<span />').addClass(csscls('to')).text(mail.to).appendTo(li);
-                if (mail.body) {
-                    li.click(function() {
-                        var popup = window.open('about:blank', 'Mail Preview', 'width=650,height=440,scrollbars=yes');
-                        var documentToWriteTo = popup.document;
-                        var headers = !mail.headers ? '' : $('<pre style="border: 1px solid #ddd; padding: 5px;" />')
-                            .append($('<code />').text(mail.headers)).prop('outerHTML');
-                        documentToWriteTo.open();
-                        documentToWriteTo.write(headers + mail.body);
-                        documentToWriteTo.close();
-                    });
-                } else if (mail.headers) {
-                    var headers = $('<pre />').addClass(csscls('headers')).appendTo(li);
-                    $('<code />').text(mail.headers).appendTo(headers);
-                    li.click(function() {
-                        if (headers.is(':visible')) {
-                            headers.hide();
-                        } else {
-                            headers.show();
-                        }
-                    });
-                }
-            }});
+                    $('<span />').addClass(csscls('subject')).text(mail.subject).appendTo(li);
+                    $('<span />').addClass(csscls('to')).text(mail.to).appendTo(li);
+                    if (mail.html || mail.html) {
+                        var header = $('<span />').addClass(csscls('filename')).text('');
+                        $('<a title="Mail Preview">View Mail</a>').on('click', function () {
+                            var popup = window.open('about:blank', 'Mail Preview', 'width=650,height=440,scrollbars=yes');
+                            var documentToWriteTo = popup.document;
+                            var headers = !mail.headers ? '' : $('<pre style="border: 1px solid #ddd; padding: 5px;" />')
+                                .append($('<code />').text(mail.headers));
+
+                            if (mail.html) {
+                                var body = $('<iframe width="100%" height="400px" sandbox="" referrerpolicy="no-referrer"/>').attr("srcdoc", mail.html)
+                            } else {
+                                var body = $('<pre style="border: 1px solid #ddd; padding: 5px;" />').text(mail.body)
+                            }
+
+                            documentToWriteTo.open();
+                            documentToWriteTo.write(headers.prop('outerHTML') + body.prop('outerHTML'));
+                            documentToWriteTo.close();
+                        }).addClass(csscls('editor-link')).appendTo(header);
+
+                        header.appendTo(li);
+                    }
+
+                    if (mail.headers) {
+                        var headers = $('<pre />').addClass(csscls('headers')).appendTo(li);
+                        $('<code />').text(mail.headers).appendTo(headers);
+                        li.click(function() {
+                            if (headers.is(':visible')) {
+                                headers.hide();
+                            } else {
+                                headers.show();
+                            }
+                        });
+                    }
+                }});
             this.$list.$el.appendTo(this.$el);
 
             this.bindAttr('data', function(data) {