diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e8c807..7a21bc7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - The navigation bar first appears when you enter the page, as you scroll down it will disappear, and when you scroll up it will appear again (that way it won't take up space when you're reading, so you can focus on the content)
 
+- New style for article headers
+
   - New date format for articles (with the hour and minute)
 
 - **Depricate the `description` field for articles**
diff --git a/src/layouts/ArticleHead.vue b/src/layouts/ArticleHead.vue
index c5a6d12..8ba840d 100644
--- a/src/layouts/ArticleHead.vue
+++ b/src/layouts/ArticleHead.vue
@@ -8,7 +8,7 @@
         alt="Banner"
       />
     </div>
-    <div :id="frontmatter.banner ? 'banner-margin' : ''">
+    <div :id="frontmatter.banner ? 'banner-margin' : ''" class="main-head">
       <small v-if="frontmatter.update">
         Last updated on
         {{
@@ -24,7 +24,6 @@
           )
         }}
       </small>
-      <h1>{{ frontmatter.title }}</h1>
       <small>
         {{
           new Date(frontmatter.date).toLocaleDateString(
@@ -36,6 +35,9 @@
             },
           )
         }}
+      </small>
+      <h1>{{ frontmatter.title }}</h1>
+      <small>
         <span v-if="!theme.articles.authors === false && frontmatter.author">
           &middot; {{ frontmatter.author.length > 1 ? "Authors:" : "Author:" }}
           <template v-for="(author, index) in frontmatter.author" :key="index">
@@ -43,7 +45,7 @@
             }}<span v-if="index !== frontmatter.author.length - 1">, </span>
           </template>
         </span>
-        <span> &middot; {{ readingTime }} minutes to read </span>
+        <span> {{ readingTime }} minutes to read </span>
         <span class="tags">
           &middot;
           <span v-for="(tag, index) in frontmatter.tags" :key="index">{{
@@ -77,8 +79,17 @@ onMounted(() => {
 
 <style lang="scss">
 #article-head {
+  text-align: center;
   padding-top: 2.0938rem;
 
+  .main-head {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   #banner-container {
     $mask: linear-gradient(black, transparent);
     -webkit-mask-image: $mask;
@@ -108,8 +119,21 @@ onMounted(() => {
   }
 
   h1 {
-    margin-top: 0;
-    margin-bottom: 0;
+    font-weight: 800;
+    line-height: 1.05em;
+    background-image: radial-gradient(
+      circle,
+      var(--color-accent) 0%,
+      var(--color-accent-alpha) 100%
+    );
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    margin-top: -0.5rem !important;
+    margin-bottom: 0 !important;
   }
 
   .tags {