diff --git a/DiscordChatExporter.Core/Discord/Data/Embeds/EmbedKind.cs b/DiscordChatExporter.Core/Discord/Data/Embeds/EmbedKind.cs
index 19ebd55..54ed848 100644
--- a/DiscordChatExporter.Core/Discord/Data/Embeds/EmbedKind.cs
+++ b/DiscordChatExporter.Core/Discord/Data/Embeds/EmbedKind.cs
@@ -7,6 +7,5 @@ public enum EmbedKind
     Image,
     Video,
     Gifv,
-    Article,
     Link
 }
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Discord/Data/MessageKind.cs b/DiscordChatExporter.Core/Discord/Data/MessageKind.cs
index 472cc8d..d605bc9 100644
--- a/DiscordChatExporter.Core/Discord/Data/MessageKind.cs
+++ b/DiscordChatExporter.Core/Discord/Data/MessageKind.cs
@@ -17,6 +17,5 @@ public enum MessageKind
 
 public static class MessageKindExtensions
 {
-    public static bool IsSystemNotification(this MessageKind c) =>
-        c is not MessageKind.Default and not MessageKind.Reply;
+    public static bool IsSystemNotification(this MessageKind c) => (int)c is >= 1 and <= 18;
 }
\ No newline at end of file
diff --git a/DiscordChatExporter.Core/Exporting/ExportContext.cs b/DiscordChatExporter.Core/Exporting/ExportContext.cs
index 70ede4e..44719d3 100644
--- a/DiscordChatExporter.Core/Exporting/ExportContext.cs
+++ b/DiscordChatExporter.Core/Exporting/ExportContext.cs
@@ -42,7 +42,7 @@ internal class ExportContext
     {
         "unix" => date.ToUnixTimeSeconds().ToString(),
         "unixms" => date.ToUnixTimeMilliseconds().ToString(),
-        var dateFormat => date.ToLocalString(dateFormat)
+        var format => date.ToLocalString(format)
     };
 
     public Member? TryGetMember(Snowflake id) => Members.FirstOrDefault(m => m.Id == id);
diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
index 530511a..4df865f 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/MessageGroupTemplate.cshtml
@@ -10,8 +10,6 @@
 @inherits MiniRazor.TemplateBase<MessageGroupTemplateContext>
 
 @{
-    var firstMessage = Model.Messages.First();
-
     ValueTask<string> ResolveUrlAsync(string url) => Model.ExportContext.ResolveMediaUrlAsync(url);
 
     string FormatDate(DateTimeOffset date) => Model.ExportContext.FormatDate(date);
@@ -20,6 +18,8 @@
 
     string FormatEmbedMarkdown(string markdown) => Model.FormatMarkdown(markdown, false);
 
+    var firstMessage = Model.Messages.First();
+
     var userMember = Model.ExportContext.TryGetMember(firstMessage.Author.Id);
 
     var userColor = Model.ExportContext.TryGetUserColor(firstMessage.Author.Id);
@@ -62,29 +62,31 @@
                     : userMember?.Nick ?? message.Author.Name;
 
                 <div class="chatlog__message-aside">
-                    <svg class=chatlog__system-notification-icon><use href="#@message.Kind.ToString().ToDashCase().ToLowerInvariant()-icon"></use></svg>
+                    <svg class="chatlog__system-notification-icon"><use href="#@message.Kind.ToString().ToDashCase().ToLowerInvariant()-icon"></use></svg>
                 </div>
 
                 <div class="chatlog__message-primary">
-                    <div class="chatlog__header">
-                        @{/* Author name */}
-                        <span class="chatlog__author" style="@(userColor is not null ? $"color: rgb({userColor.Value.R}, {userColor.Value.G}, {userColor.Value.B})" : null)" title="@message.Author.FullName" data-user-id="@message.Author.Id">@userNick</span>
+                    @{/* Author name */}
+                    <span class="chatlog__system-notification-author" style="@(userColor is not null ? $"color: rgb({userColor.Value.R}, {userColor.Value.G}, {userColor.Value.B})" : null)" title="@message.Author.FullName" data-user-id="@message.Author.Id">@userNick</span>
 
-                        @{/* System notification content */}
-                        @if (message.Kind == MessageKind.ChannelPinnedMessage)
+                    @{/* System notification content */}
+                    <span class="chatlog__system-notification-content">
+                        @if (message.Kind == MessageKind.ChannelPinnedMessage && message.Reference is not null)
                         {
-                            <span class="chatlog__system-notification"> pinned</span>
-                            <span class="chatlog__system-notification-reference-link chatlog__reference-link" onclick="scrollToMessage(event, '@message.Reference?.MessageId')"> a message</span>
-                            <span class="chatlog__system-notification"> to this channel.</span>
+                            <span> pinned</span>
+                            <a class="chatlog__system-notification-link" href="#chatlog__message-container-@message.Reference.MessageId"> a message</a>
+                            <span> to this channel.</span>
                         }
-                        else if (!string.IsNullOrWhiteSpace(message.Content))
+                        else
                         {
-                            <span class="chatlog__system-notification">@(char.ToLowerInvariant(message.Content[0]) + message.Content[1..])</span>
+                            <span>@message.Content.ToLowerInvariant()</span>
                         }
+                    </span>
 
-                        @{/* Timestamp */}
-                        <span class="chatlog__timestamp"><a href="#chatlog__message-container-@message.Id">@FormatDate(message.Timestamp)</a></span>
-                    </div>
+                    @{/* Timestamp */}
+                    <span class="chatlog__system-notification-timestamp">
+                        <a href="#chatlog__message-container-@message.Id">@FormatDate(message.Timestamp)</a>
+                    </span>
                 </div>
             }
             // Regular message
@@ -168,11 +170,11 @@
                     }
 
                     @{/* Content */}
-                    @if (!string.IsNullOrWhiteSpace(message.Content) || message.EditedTimestamp is not null)
+                    @if ((!string.IsNullOrWhiteSpace(message.Content) && !message.IsContentHidden()) || message.EditedTimestamp is not null)
                     {
                         <div class="chatlog__content chatlog__markdown">
                             @{/* Text */}
-                            @if (!message.IsContentHidden())
+                            @if (!string.IsNullOrWhiteSpace(message.Content) && !message.IsContentHidden())
                             {
                                 <span class="chatlog__markdown-preserve"><!--wmm:ignore-->@Raw(FormatMarkdown(message.Content))<!--/wmm:ignore--></span>
                             }
diff --git a/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml b/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
index 3173306..16fd0b5 100644
--- a/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
+++ b/DiscordChatExporter.Core/Exporting/Writers/Html/PreambleTemplate.cshtml
@@ -69,6 +69,7 @@
             font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
             font-size: 17px;
             font-weight: @Themed("400", "500");
+            scroll-behavior: smooth;
         }
 
         a {
@@ -254,18 +255,36 @@
             unicode-bidi: bidi-override;
         }
 
-        .chatlog__system-notification {
+        .chatlog__system-notification-icon {
+            width: 18px;
+            height: 18px;
+        }
+
+        .chatlog__system-notification-author {
+            font-weight: @Themed("500", "600");
+            color: @Themed("#ffffff", "#2f3136");
+        }
+
+        .chatlog__system-notification-content {
             color: @Themed("#96989d", "#5e6772")
         }
 
-        .chatlog__system-notification-reference-link {
+        .chatlog__system-notification-link {
             font-weight: 500;
             color: @Themed("#ffffff", "#2f3136");
         }
 
-        .chatlog__system-notification-icon {
-            width: 18px;
-            height: 18px;
+        .chatlog__system-notification-timestamp {
+            margin-left: 0.3rem;
+            color: @Themed("#a3a6aa", "#5e6772");
+            font-size: 0.75rem;
+            font-weight: 500;
+            direction: ltr;
+            unicode-bidi: bidi-override;
+        }
+
+        .chatlog__system-notification-timestamp a {
+            color: inherit;
         }
 
         .chatlog__header {
@@ -300,7 +319,7 @@
         }
 
         .chatlog__timestamp a {
-            color: @Themed("#a3a6aa", "#5e6772");
+            color: inherit;
         }
 
         .chatlog__content {