diff --git a/config.example.toml b/config.example.toml
index 08df3d7..f026915 100644
--- a/config.example.toml
+++ b/config.example.toml
@@ -41,50 +41,45 @@ anchors = "on"
 
 [extra]
 
-name = "xxxx"                         # Your name
-id = "xxxx"                           # Your id / username / handle
-bio = "xxxx"                          # Your bio
-avatar = "img/avatar.webp"            # Your avatar
-links = [                             # Your links
-    { name = "GitHub", icon = "github", url = "https://github.com/<your-username>" },
-    { name = "Twitter", icon = "twitter", url = "https://twitter.com/<your-username>" },
-    { name = "Email", icon = "email", url = "mailto:<your-email-address>" },
-]
+name = "xxxx"
+id = "xxxx"
+bio = "xxxx"
+avatar = "img/avatar.webp"
 
-homepage_layout = "about"             # "about" | "list" | "recent"
-force_theme = false                   # false | "light" | "dark"
+display_id = true
+display_bio = true
+display_avatar = true
 
-recent_max = 15
-recent_more = true
+recent = false
+recent_max = 5
 recent_more_text = "more »"
 
 sections = [
-    { name = "blog", path = "/blog", is_external = false },
+    { name = "posts", path = "/posts", is_external = false },
     { name = "projects", path = "/projects", is_external = false },
     # { name = "about", path = "/about", is_external = false },
     # { name = "github", path = "https://github.com/<your-username>", is_external = true },
 ]
-blog_section_path = "/blog"
+blog_section_path = "/posts"
 
-nav_separator = "::"
-nav_wrapper_left = "{"
-nav_wrapper_right = "} ;"
-nav_wrapper_separator = ","
+links = [
+    { name = "GitHub", icon = "github", url = "https://github.com/<your-username>" },
+    { name = "Twitter", icon = "twitter", url = "https://twitter.com/<your-username>" },
+    { name = "Email", icon = "email", url = "mailto:<your-email-address>" },
+]
 
-display_id = true                     # Whether to display your id on homepage
+force_theme = false                   # false | "light" | "dark"
 blog_categorized = true               # Whether to categorize blog posts
-blur_effect = true                    # Whether to turn on blur effect on navigation bar
+blur_effect = false                   # Whether to turn on blur effect on navigation bar
 back_to_top = true                    # Whether to show back-to-top button on post pages
-
-toc = true                            # Whether to show Table-Of-Contents by default
+toc = true                            # Whether to show Table-of-Contents by default
 copy = true                           # Whether to add a copy button on code blocks by default
 display_tags = true                   # Whether to display tags on post pages by default
 truncate_summary = false              # Whether to truncate the summary of a post by default
-
 comment = false                       # Whether to show giscus comment section by default, see https://giscus.app for more info
 
-reaction = false                      # Whether to show reaction (Note: You need to set up a working api endpoint to enable reaction)
-reaction_align = "right"           # "left" | "center" | "right"
+reaction = false                      # Whether to show anonymous reactions (Note: You need to set up a working api endpoint to enable anonymous reaction)
+reaction_align = "right"              # "left" | "center" | "right"
 reaction_endpoint = "https://example.com/api/reaction"
 
 outdate_alert = false                 # Whether to show outdate alert by default
@@ -92,6 +87,11 @@ outdate_alert_days = 120              # How many days will a post be outdated by
 outdate_alert_text_before = "This article was last updated "
 outdate_alert_text_after = " days ago and may be out of date."
 
+nav_separator = ": :"
+nav_wrapper_left = "{"
+nav_wrapper_right = "} ;"
+nav_wrapper_separator = ","
+
 footer_copyright = "© 2023 <your-name>"
 footer_credits = true                 # Whether to show "powered by zola and serene" in footer
 
diff --git a/sass/main.scss b/sass/main.scss
index c11ddf8..4c0e636 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -28,23 +28,29 @@ a:focus-visible {
   color: var(--bg-color);
 }
 
-body::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
 ::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
 }
 ::-webkit-scrollbar-track {
-  background: #0000;
+  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: #aeb7caa1;
-  border-radius: 0px;
+  background: var(--text-pale-color);
+  background-clip: padding-box;
+  border-radius: 4px;
+  border: 2px solid transparent;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #8a90a1a1;
+  background: var(--text-color);
+  background-clip: padding-box;
+}
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--text-pale-color) transparent;
+  }
 }
 
 /* prose
@@ -52,20 +58,20 @@ body::-webkit-scrollbar {
 
 .prose {
   h1 {
-    font-size: 1.5em;
+    font-size: 1.35em;
     font-weight: bolder;
     margin: 1em 0 0.5em 0;
   }
 
   h2 {
-    font-size: 1.3em;
-    padding-top: 80px;
+    font-size: 1.25em;
+    padding-top: 60px;
     margin-top: -45px;
   }
 
   h3 {
     font-size: 1.1em;
-    padding-top: 65px;
+    padding-top: 50px;
     margin-top: -45px;
   }
 
@@ -129,7 +135,7 @@ body::-webkit-scrollbar {
     border-left: 2px var(--text-pale-color) solid;
     padding-left: 16px;
     margin: 1em 0;
-    color: var(--text-pale-color);
+    color: var(--blockquote-color);
   }
 
   ol,
@@ -147,15 +153,16 @@ body::-webkit-scrollbar {
 
   hr {
     border: none;
-    background-color: var(--primary-pale-color);
+    background-color: var(--text-pale-color);
+    opacity: 0.3;
     height: 3px;
-    margin: 36px 0;
+    margin: 2.5em 0;
   }
 
   table {
     width: 100%;
     border-spacing: 0;
-    border: 1px solid var(--primary-pale-color);
+    border: 1px solid var(--primary-color);
   }
 
   thead {
@@ -166,7 +173,7 @@ body::-webkit-scrollbar {
   td {
     line-height: 2;
     text-align: center;
-    border: 1px solid var(--primary-pale-color);
+    border: 0.5px solid var(--primary-color);
     padding: 1px 10px;
   }
 
@@ -304,7 +311,7 @@ body::-webkit-scrollbar {
       top: calc(1.2em + 24px + 1em + 1.5px);
       padding: 12px 16px;
       line-height: 1.2;
-      color: var(--text-pale-color);
+      color: var(--blockquote-color);
       border-bottom: 1.5px solid var(--primary-pale-color);
       pointer-events: none;
     }
@@ -348,11 +355,15 @@ body::-webkit-scrollbar {
   .callout {
     line-height: inherit;
     margin: 1.25em 0;
-    border: 1.5px solid var(--primary-color);
-    border-radius: var(--callout-border-radius);
-    padding: 6px 12px;
+    padding: 0px 12px;
     display: flex;
-    gap: 12px;
+    gap: 8px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      gap:12px;
+    }
 
     .icon {
       height: 1.75em;
@@ -407,6 +418,7 @@ body::-webkit-scrollbar {
     position: relative;
     margin: 2em 0;
     padding: 1.5em 0 0 1.25em;
+    color: var(--blockquote-color);
 
     .icon {
       display: block !important;
@@ -570,11 +582,11 @@ body.homepage {
   main {
     width: 100%;
     max-width: var(--homepage-max-width);
-    min-height: 75vh;
+    min-height: 80vh;
     padding: 4em 0;
     @media screen and (max-width: 425px) {
       & {
-        padding: 2em 0;
+        padding-top: 2em;
       }
     }
   }
@@ -595,6 +607,7 @@ body.homepage {
       flex-direction: column;
       justify-content: space-around;
       line-height: 1.5;
+      gap: 0.5em;
     }
 
     #name, #id {
@@ -607,18 +620,19 @@ body.homepage {
     }
 
     #bio {
-      font-size: 1em;
+      color: var(--text-pale-color);
+      font-weight: 300;
     }
   }
 
   #links {
     padding: 0 15px;
-    margin: 1em 0 1.75em;
+    margin: 1.75em 0 1.75em;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
-    gap: 0.5em 1em;
+    gap: 1em;
     font-size: 1.1em;
 
     a,
@@ -647,13 +661,6 @@ body.homepage {
     #right {
       display: flex;
       gap: 0.5em;
-      margin-left: auto;
-
-      a,
-      button {
-        width: var(--icon-size);
-        height: var(--icon-size);
-      }
 
       button {
         padding: 0;
@@ -671,14 +678,9 @@ body.homepage {
   }
 
   #brief {
-    padding: 0 15px 3em;
+    padding: 0 15px;
     font-size: 1em;
     line-height: var(--homepage-line-height);
-    @media (max-width: 425px) {
-      & {
-        padding-bottom: 1.5em;
-      }
-    }
   }
 }
 
@@ -694,7 +696,6 @@ header {
   background-color: var(--bg-color);
   border-bottom: 1.5px solid var(--primary-color);
 
-
   @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
     &.blur {
       background-color: initial;
@@ -703,7 +704,6 @@ header {
     }
 
     #rss-mask {
-      // background-color: initial;
       -webkit-backdrop-filter: blur(32px);
       backdrop-filter: blur(32px);
     }
@@ -735,6 +735,8 @@ header {
     }
 
     .separator {
+      font-size: 0.9em;
+      font-weight: 600;
       width: 24px;
       text-align: center;
       line-height: 1;
@@ -742,16 +744,16 @@ header {
       border: none;
       padding: 0;
       background: transparent;
-      margin: 0 0.1em;
+      margin: 0 0.3em;
       color: var(--text-color);
       -webkit-tap-highlight-color: transparent;
     }
     .wrap {
       &.left {
-        margin: 0 0.3em 0 -0.1em;
+        margin: 0 0.4em 0 -0.1em;
       }
       &.right {
-        margin: 0 0 0 0.3em;
+        margin: 0 0 0 0.4em;
       }
     }
     .wrap-separator {
@@ -770,12 +772,10 @@ header {
     display: flex;
     gap: 1em;
     align-items: center;
-    padding-top: 1.5px;
+    padding-top: 3px;
 
     a,
     button {
-      width: var(--icon-size);
-      height: var(--icon-size);
       border: none;
       background-color: transparent;
       padding: 0;
@@ -841,8 +841,6 @@ dialog#rss-mask {
   }
 
   button {
-    width: var(--icon-size);
-    height: var(--icon-size);
     background: transparent;
     border: none;
     color: var(--text-pale-color);
@@ -858,7 +856,7 @@ dialog#rss-mask {
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 footer {
-  font-size: 0.95em;
+  font-size: 0.9em;
   padding: 15px;
   display: flex;
   justify-content: center;
@@ -873,10 +871,16 @@ footer {
 
   .credits {
     margin-left: auto;
+    font-style: italic;
   }
 
   a {
     color: var(--text-pale-color);
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
   }
 
   @media (max-width: 374px) {
@@ -953,6 +957,7 @@ body.post {
 
     #date {
       color: var(--text-pale-color);
+      font-style: italic;
       margin-bottom: 1em;
 
       #publish,
@@ -984,8 +989,11 @@ body.post {
       }
     }
 
-    #outdate_alert.hidden {
-      display: none;
+    #outdate_alert {
+      font-style: italic;
+      &.hidden {
+        display: none;
+      }
     }
   }
 
@@ -1226,38 +1234,90 @@ body.projects {
 
   main {
     width: 100%;
-    margin: 75px auto 0px;
+    margin: 95px auto 0px;
   }
 
   .proj {
-    margin: 0px 15px 45px;
+    margin: 0px 15px 1.5em;
 
-    .content {
+    .meta {
       display: flex;
-      justify-content: space-between;
-      gap: 1em;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 1.5em;
+      margin-bottom: 0.25em;
+    }
 
-      img {
-        max-height: 125px;
-        margin-bottom: 1em;
+    .name {
+      white-space: nowrap;
+      color: var(--primary-color);
+    }
 
-        @media screen and (max-width: 425px) {
-          & {
-            max-height: 100px;
-          }
+    .links {
+      flex-grow: 1;
+      font-size: 0.9em;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      justify-content: end;
+      gap: 0.5em 1em;
+      color: var(--text-pale-color);
+
+      a {
+        text-decoration: none;
+        color: inherit;
+        &:visited {
+          color: inherit;
+        }
+        span,
+        &:hover {
+          color: var(--primary-color);
         }
       }
     }
 
-    .name {
-      font-size: 1.2em;
-      margin: 0 0 15px 0;
-      color: var(--primary-color);
+    .tags,
+    .tags-narrow {
+      font-size: 0.9em;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.5em 0.75em;
+      color: var(--text-pale-color);
+
+      div {
+        span {
+          font-size: 0.9em;
+          margin-right: 2px;
+        }
+      }
+    }
+    .tags-narrow {
+      display: none;
+    }
+
+    @media screen and (max-width: 425px) {
+      .tags {
+        display: none;
+      }
+      .tags-narrow {
+        display: flex;
+      }
+    }
+
+    .content {
+      display: flex;
+      justify-content: space-between;
+      gap: 1em;
+      margin-top: 0.25em;
     }
 
     .desc {
       line-height: 1.5;
       margin: 0 0 10px 0;
+      p {
+        margin: 0.25em 0;
+      }
 
       a {
         border-bottom: 1.5px solid var(--primary-color);
@@ -1275,52 +1335,16 @@ body.projects {
       }
     }
 
-    .more {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 1em;
-
-      .tags {
-        display: flex;
-        gap: 0.5em 1em;
-        flex-wrap: wrap;
-
-        div {
-          color: var(--text-pale-color);
-          span {
-            font-size: 0.9em;
-            margin-right: 1.5px;
-          }
-        }
-      }
-
-      .links {
-        margin-left: auto;
-        display: flex;
-        justify-content: end;
-        gap: 0.5em 1em;
-
-        a {
-          text-decoration: none;
-          border-bottom: 1.5px solid var(--primary-color);
-          padding: 0 2px;
-          cursor: pointer;
-          color: inherit;
-          line-height: 1.5;
-
-          &:visited {
-            color: inherit;
-          }
+    img {
+      max-height: 125px;
+      margin-top: 0.5em;
 
-          &:hover {
-            color: var(--primary-color);
-          }
+      @media screen and (max-width: 425px) {
+        & {
+          max-height: 100px;
         }
       }
     }
-
   }
 }
 
@@ -1338,14 +1362,16 @@ body.not-found {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 3em;
+    gap: 2em;
+    margin-bottom: 5em;
   }
 
   .error {
+    margin: 0;
     display: flex;
     align-items: center;
     gap: 1em;
-    font-size: 1.5em;
+    font-size: 1.1em;
     color: var(--text-pale-color);
   }
 
diff --git a/templates/_custom_css.html b/templates/_custom_css.html
index 353443f..08c8fde 100644
--- a/templates/_custom_css.html
+++ b/templates/_custom_css.html
@@ -5,9 +5,10 @@
     --primary-color: #5871a2;
     --primary-pale-color: #5871a210;
     --text-color: #3C4043;
-    --text-pale-color: #94969f;
+    --text-pale-color: #a3a5a9;
     --bg-color: #ffffff;
     --highlight-mark-color: #5f75b035;
+    --blockquote-color: #8e8d91;
 
     --callout-note-color: #5871a2;
     --callout-important-color: #8062b0;
@@ -22,9 +23,10 @@
     --primary-color: #5d77ac;
     --primary-pale-color: #5d77ac20;
     --text-color: #9197a5;
-    --text-pale-color: #747983;
-    --bg-color: #202124;
+    --text-pale-color: #50555f;
+    --bg-color: #18191b;
     --highlight-mark-color: #5f75b035;
+    --blockquote-color: #747983;
 
     --callout-note-color: #5d77ac;
     --callout-important-color: #8062b0;
@@ -41,14 +43,12 @@
     --homepage-max-width: 768px;
     --main-max-width: 768px;
     --avatar-size: 56px;
-    --icon-size: 20px;
     --homepage-font-size: 16px;
     --homepage-line-height: 1.75;
     --paragraph-font-size: 16px;
     --paragraph-line-height: 1.75;
     --aside-font-size: 15px;
     --img-border-radius: 0px;
-    --callout-border-radius: 0px;
     --detail-border-radius: 0px;
     --dark-mode-img-brightness: 0.75;
     --dark-mode-chart-brightness: 0.75;
diff --git a/templates/home.html b/templates/home.html
index 7299a0b..7f606fc 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -9,7 +9,7 @@
 {% endblock desc %}
 
 {% block head %}
-{% if config.extra.homepage_layout == "about" and config.markdown.highlight_theme == "css" %}
+{% if config.markdown.highlight_theme == "css" %}
 <link id="hl" rel="stylesheet" type="text/css" href="/hl-{% if config.extra.force_theme == "dark" %}dark{% else %}light{% endif %}.css" />
 {% endif %}
 {% if section.extra.math %}
@@ -21,15 +21,19 @@
 <div id="wrapper">
   <main>
     <section id="info">
+      {% if config.extra.display_avatar %}
       <img src="{{ config.extra.avatar }}" alt="avatar">
+      {% endif %}
       <div id="text">
         <div>
           <span id="name">{{ config.extra.name }}</span>
-          {% if config.extra.display_id -%}
+          {% if config.extra.display_id %}
           <span id="id">@{{ config.extra.id }}</span>
-          {% endif -%}
+          {% endif %}
         </div>
+        {% if config.extra.display_bio %}
         <div id="bio"> {{ config.extra.bio }} </div>
+        {% endif %}
       </div>
     </section>
     <section id="links">
@@ -55,44 +59,10 @@
 		    {% endif %}
       </div>
     </section>
-    {% if config.extra.homepage_layout == 'about' %}
       <section id="brief" class="prose">
         {{ section.content | trim | safe }}
       </section>
-    {% elif config.extra.homepage_layout == 'list' %}
-      {% set blog_section_path = config.extra.blog_section_path | trim_start_matches(pat="/") %}
-      {% set section_md_path = blog_section_path ~ "/_index.md" %}
-      {% set blog_section = get_section(path=section_md_path) %}
-      <section class="layout-list">
-        {% if config.extra.blog_categorized %}
-        {% for category,posts in blog_section.pages | sort(attribute="taxonomies.categories.0") | group_by(attribute="taxonomies.categories.0") %}
-        {% set category_name = category %}
-        {% if category is matching("^__[0-9]{2}__") %}
-          {% set category_name = category | split(pat="") | slice(start=7) | join(sep="") %}
-        {% endif %}
-        <div class="category">{{ category_name }}</div>
-        <div class="post-list categorized">
-          {% for post in posts %}
-          <a class="post instant {% if post.extra.featured %}featured{% endif %}" href="{{ post.permalink }}">
-            <span>{{ post.title }}</span>
-            <span class="date">{{ post.date | date}}</span>
-          </a>
-          {% endfor %}
-        </div>
-        {% endfor %}
-        {% else %}
-        <div class="post-list">
-          {% for post in blog_section.pages %}
-          <a class="post instant {% if post.extra.featured %}featured{% endif %}" href="{{ post.permalink }}">
-            <span>{{ post.title }}</span>
-            <span class="line"></span>
-            <span class="date">{{ post.date | date}}</span>
-          </a>
-          {% endfor %}
-        </div>
-        {% endif %}
-      </section>
-    {% elif config.extra.homepage_layout == 'recent' %}
+    {% if config.extra.recent %}
       {% set blog_section_path = config.extra.blog_section_path | trim_start_matches(pat="/") %}
       {% set section_md_path = blog_section_path ~ "/_index.md" %}
       {% set blog_section = get_section(path=section_md_path) %}
@@ -106,11 +76,9 @@
           </a>
           {% endfor %}
         </div>
-        {% if config.extra.recent_more %}
         <div class="read-more">
           <a class="instant" href="{{ config.extra.blog_section_path }}">{{ config.extra.recent_more_text }}</a>
         </div>
-        {% endif %}
       </section>
     {% endif %}
   </main>
diff --git a/templates/post.html b/templates/post.html
index 8278c70..b71dad6 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -100,10 +100,6 @@ <h1>{{ page.title }}</h1>
         <blockquote id="outdate_alert" class="callout alert hidden" data-days="{{ outdate_alert_days }}"
           data-alert-text-before="{{ config.extra.outdate_alert_text_before }}"
           data-alert-text-after="{{ config.extra.outdate_alert_text_after }}">
-          {% set icon = load_data(path="static/icon/alert.svg") %}
-          <div class="icon">
-            {{ icon | safe }}
-          </div>
           <div class="content"></div>
         </blockquote>
         {% endif %}
diff --git a/templates/projects.html b/templates/projects.html
index 8a6bb27..96d4acb 100644
--- a/templates/projects.html
+++ b/templates/projects.html
@@ -14,16 +14,8 @@
     {% set data = load_data(path="content" ~ section.path ~ "data.toml", format="toml") %}
     {% for proj in data.project %}
     <div class="proj">
-      <div class="content">
-        <div>
-          <p class="name">{{ proj.name }}</p>
-          <div class="desc">{{ proj.desc | trim | markdown | safe }}</div>
-        </div>
-        {% if proj.img %}
-        <img src="{{ proj.img }}" alt="{{ proj.name }}" />
-        {% endif %}
-      </div>
-      <div class="more">
+      <div class="meta">
+        <div class="name">{{ proj.name }}</div>
         <div class="tags">
           {% for tag in proj.tags %}
           <div><span>#</span>{{ tag }}</div>
@@ -31,10 +23,23 @@
         </div>
         <div class="links">
           {% for link in proj.links -%}
-          <a href="{{ link.url }}" target="_blank" rel='noreferrer noopener'>{{ link.name }}</a>
+          <a href="{{ link.url }}" target="_blank" rel='noreferrer noopener'>
+            <span>[</span>{{ link.name }}<span>]</span>
+          </a>
           {% endfor %}
         </div>
-      </div>  
+      </div>
+      <div class="tags-narrow">
+        {% for tag in proj.tags %}
+        <div><span>#</span>{{ tag }}</div>
+        {% endfor %}
+      </div>
+      <div class="content">
+        <div class="desc">{{ proj.desc | trim | markdown | safe }}</div>
+        {% if proj.img %}
+        <img src="{{ proj.img }}" alt="{{ proj.name }}" />
+        {% endif %}
+      </div>
     </div>
     {% endfor %}
   </main>