diff --git a/innovedus_cms/home/models.py b/innovedus_cms/home/models.py
index d88b933..96d7320 100644
--- a/innovedus_cms/home/models.py
+++ b/innovedus_cms/home/models.py
@@ -204,9 +204,9 @@ class LatestPage(Page, CategoryMixin, BreadcrumbMixin):
     def get_context(self, request):
         context = super().get_context(request)
         context["category_sections"] = [self.get_latest_articles(request)]
-        breadcrumbs, site_root = self.build_breadcrumbs()
-        context["breadcrumbs"] = breadcrumbs
-        context["breadcrumb_root"] = site_root
+        # breadcrumbs, site_root = self.build_breadcrumbs()
+        # context["breadcrumbs"] = breadcrumbs
+        # context["breadcrumb_root"] = site_root
         return context
 
 
@@ -216,9 +216,9 @@ class TrendingPage(Page, CategoryMixin, BreadcrumbMixin):
     def get_context(self, request):
         context = super().get_context(request)
         context["category_sections"] = [self.get_trending_articles(request)]
-        breadcrumbs, site_root = self.build_breadcrumbs()
-        context["breadcrumbs"] = breadcrumbs
-        context["breadcrumb_root"] = site_root
+        # breadcrumbs, site_root = self.build_breadcrumbs()
+        # context["breadcrumbs"] = breadcrumbs
+        # context["breadcrumb_root"] = site_root
         return context
 
 
@@ -311,8 +311,8 @@ class ArticlePage(Page, BreadcrumbMixin):
         context = super().get_context(request)
 
         breadcrumbs, site_root = self.build_breadcrumbs()
-        context["breadcrumbs"] = breadcrumbs
-        context["breadcrumb_root"] = site_root
+        # context["breadcrumbs"] = breadcrumbs
+        # context["breadcrumb_root"] = site_root
         category_crumbs = [
             crumb
             for crumb in breadcrumbs
diff --git a/innovedus_cms/home/static/css/article_list.css b/innovedus_cms/home/static/css/article_list.css
index fe92252..5a54ab3 100644
--- a/innovedus_cms/home/static/css/article_list.css
+++ b/innovedus_cms/home/static/css/article_list.css
@@ -1,6 +1,6 @@
-.page-article-list{
+/* .page-article-list{
   padding-bottom: 40px;
-}
+} */
 
 .first-article {
   display: grid;
@@ -42,7 +42,7 @@
 }
 
 .first-article .first-article-title {
-  font-size: 40px;
+  font-size: 36px;
   font-weight: 400;
   color: #f4a41c;
   margin: 0;
@@ -123,7 +123,7 @@
 }
 
 .article-title {
-  font-size: 40px;
+  font-size: 30px;
   font-weight: 400;
   margin: 0;
   display: -webkit-box;
@@ -199,6 +199,10 @@
     grid-template-columns: 318px 1fr;
   } 
 
+  .first-article .first-article-title {
+    font-size: 30px;
+  }
+
   .first-article .first-article-image {
     width: 318px;
   }   
@@ -208,6 +212,14 @@
     height: 290px;
   }
 
+  .first-article .first-article-intro {
+    font-size: 16px;
+  }
+
+  .first-article .first-article-body {
+    font-size: 12px;
+  }
+
   .article-list-item {
     grid-template-columns: 318px 1fr;
   }
@@ -219,6 +231,10 @@
   .article-thumb img{
     width: 318px;
   }
+
+  .article-title {
+    font-size: 26px;
+  }
 }
 
 @media (max-width: 767px) {
@@ -235,10 +251,18 @@
       "image"
       "content";
   }
+
+  .article-title {
+    font-size: 20px;
+  }
 }
 
 @media (min-width: 575px) and (max-width: 767px) {
-  .first-article .first-article-image {
+   .first-article .first-article-title {
+    font-size: 24px;
+  }
+
+ .first-article .first-article-image {
     width: 426px;
   }   
 
@@ -247,6 +271,14 @@
     height: 260px;
   }
 
+  .first-article .first-article-intro {
+    font-size: 16px;
+  }
+
+  .first-article .first-article-body {
+    font-size: 12px;
+  }
+
   .article-thumb {
     width: 426px;
   }
@@ -258,6 +290,10 @@
 }
 
 @media (max-width: 574px) {
+  .first-article .first-article-title {
+    font-size: 20px;
+  }
+  
   .first-article .first-article-image {
     width: 300px;
   }   
@@ -267,6 +303,18 @@
     height: 218px;
   }
 
+  .first-article .first-article-date {
+    font-size: 11px;
+  }
+
+  .first-article .first-article-intro {
+    font-size: 14px;
+  }
+
+  .first-article .first-article-body {
+    font-size: 11px;
+  }
+
   .article-thumb {
     width: 300px;
   }
@@ -275,4 +323,8 @@
     width: 300px;
     height: 218px;
   }
+
+  .article-date {
+    font-size: 11px;
+  }
 }
diff --git a/innovedus_cms/home/static/css/article_page.css b/innovedus_cms/home/static/css/article_page.css
index 4c50733..9f263ca 100644
--- a/innovedus_cms/home/static/css/article_page.css
+++ b/innovedus_cms/home/static/css/article_page.css
@@ -58,6 +58,7 @@
 
 .article-content p {
   font-size: 14px;
+  line-height: 1.75;
 }
 
 .article-content .intro {
@@ -319,6 +320,10 @@
     font-size: 20px;
   }
 
+  .article-content h2 {
+    font-size: 24px;
+  }
+
   .back-to-top {
     bottom: 20px;
   }
@@ -337,6 +342,10 @@
     font-size: 24px;
   }
 
+  .article-content h2 {
+    font-size: 20px;
+  }
+
   .article-content .intro {
     font-size: 18px;
   }
diff --git a/innovedus_cms/home/static/css/block_list.css b/innovedus_cms/home/static/css/block_list.css
index 37ebcf1..cf743cf 100644
--- a/innovedus_cms/home/static/css/block_list.css
+++ b/innovedus_cms/home/static/css/block_list.css
@@ -9,6 +9,7 @@
     "image content";
   gap: 16px 40px;
   align-items: start;
+  padding-bottom: 20px;
 }
 
 .block-first-article .first-article-image {
@@ -41,9 +42,10 @@
 }
 
 .block-first-article .first-article-title {
-  font-size: 40px;
+  font-size: 36px;
+  line-height: 1.25;
   font-weight: 400;
-  color: #000000;
+  color: #0e1b42;
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -97,8 +99,16 @@
   }
 
   .block-first-article .first-article-title {
-    font-size: 36px;
-  }  
+    font-size: 30px;
+  }
+  
+  .block-first-article .first-article-intro {
+    font-size: 16px;
+  }
+
+  .block-first-article .first-article-body {
+    font-size: 12px;
+  }
 }
 
 @media (max-width: 767px) {
@@ -121,9 +131,20 @@
   }
 
   .block-first-article .first-article-title {
-    font-size: 36px;
+    font-size: 24px;
   }
 
+  .block-first-article .first-article-date {
+    font-size: 12px;
+  }
+
+  .block-first-article .first-article-intro {
+    font-size: 16px;
+  }
+  
+  .block-first-article .first-article-body {
+    font-size: 12px;
+  }
 }
 
 @media (max-width: 574px) {
@@ -137,10 +158,18 @@
   }
 
   .block-first-article .first-article-title {
-    font-size: 24px;
+    font-size: 20px;
+  }
+
+  .block-first-article .first-article-date {
+    font-size: 11px;
   }
 
   .block-first-article .first-article-intro {
     font-size: 16px;
   }
+
+  .block-first-article .first-article-body {
+    font-size: 11px;
+  }
 }
diff --git a/innovedus_cms/home/static/css/block_list_lower.css b/innovedus_cms/home/static/css/block_list_lower.css
index d4337fb..c6db9eb 100644
--- a/innovedus_cms/home/static/css/block_list_lower.css
+++ b/innovedus_cms/home/static/css/block_list_lower.css
@@ -42,6 +42,7 @@
 
 .block-list-items .article-title {
   font-size: 20px;
+  line-height: 1.25;
 }
 
 .block-list-items .article-date {
@@ -58,6 +59,7 @@
   align-self: stretch;
   margin-left: auto;
   text-align: center;
+  padding: 24px 0;
 }
 
 .block-list-more-article a {
@@ -119,6 +121,10 @@
     min-width: 0;
   }
 
+  .block-list-items .article-date {
+    font-size: 12px;
+  }
+
   .block-list-more-article {
     max-width: 100%;
   }
@@ -143,7 +149,7 @@
   }
 
   .block-list-items .article-date {
-    font-size: 12px;
+    font-size: 11px;
   }
 
   .block-list-more-article span {
diff --git a/innovedus_cms/home/static/css/home.css b/innovedus_cms/home/static/css/home.css
index 81a1f45..ea213ee 100644
--- a/innovedus_cms/home/static/css/home.css
+++ b/innovedus_cms/home/static/css/home.css
@@ -11,6 +11,7 @@
 .list-title {
   align-items: center;
   margin: 10px 0;
+  padding: 40px 0;
 }
 
 .block-title-divider {
diff --git a/innovedus_cms/home/static/css/horizontal_list.css b/innovedus_cms/home/static/css/horizontal_list.css
index 453afce..eff4baf 100644
--- a/innovedus_cms/home/static/css/horizontal_list.css
+++ b/innovedus_cms/home/static/css/horizontal_list.css
@@ -90,7 +90,7 @@
   pointer-events: none;
 }
 
-.section-b .horizontal-list-thumb::after {
+/* .section-b .horizontal-list-thumb::after {
   background: url("../img/picfrm_b194.png") no-repeat left bottom / cover;
   background-size: 194px 25px;
 }
@@ -98,7 +98,7 @@
 .section-o .horizontal-list-thumb::after {
   background: url("../img/picfrm_o194.png") no-repeat left bottom / cover;
   background-size: 194px 25px;
-}
+} */
 
 .horizontal-list li img {
   display: block;
@@ -124,6 +124,7 @@
 }
 
 .horizontal-list .article-intro {
+  min-height: 45px;
 }
 
 .horizontal-list .article-date {
diff --git a/innovedus_cms/home/static/css/news_list.css b/innovedus_cms/home/static/css/news_list.css
index 91d4d3b..23908da 100644
--- a/innovedus_cms/home/static/css/news_list.css
+++ b/innovedus_cms/home/static/css/news_list.css
@@ -3,14 +3,16 @@
   grid-template-columns: 480px 1fr;
   grid-template-areas:
     "header header"
+    "head head"
     "image content";
+  padding: 40px 0;
   gap: 16px 40px;
   align-items: start;
 }
 
 .news-hero .news-hero-header {
   grid-area: header;
-  display: flex;
+  /* display: flex; */
   align-items: center;
   gap: 12px;
 }
@@ -24,13 +26,13 @@
 
 .news-hero .fist-news-title {
   grid-area: head;
-  max-width: 580px;
-  font-size: 40px;
+  /* max-width: 580px; */
+  font-size: 36px;
   font-weight: 400;
   color: #eb9f13;
   margin: 0;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -43,7 +45,7 @@
   width: 480px;
 }
 
-.news-hero .first-news-image::after {
+/* .news-hero .first-news-image::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -53,7 +55,7 @@
   background: url("../img/picfrm_b480.png") no-repeat left bottom / cover;
   background-size: 480px 25px;
   pointer-events: none;
-}
+} */
 
 .news-hero .first-news-image img {
   display: block;
@@ -64,14 +66,17 @@
 }
 
 .news-hero .first-news-content {
+  grid-area: content;
+  height: 293px;
   max-height: 293px;  
+  overflow: hidden;
 }
 
 .news-hero .first-news-content a {
-  grid-area: content;
   display: flex;
   flex-direction: column;
   gap: 16px;
+  height: 100%;
 }
 
 .news-hero .fist-news-date,
@@ -94,6 +99,7 @@
 .news-hero .first-news-body {
   font-size: 13px;
   flex: 1 1 auto;
+  min-height: 0;
   overflow: hidden;
   position: relative;
 }
@@ -136,7 +142,7 @@
   overflow: hidden;
 }
 
-.news-list-thumb::after {
+/* .news-list-thumb::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -146,7 +152,7 @@
   background: url("../img/picfrm_o194.png") no-repeat left bottom / cover;
   background-size: 194px 25px;
   pointer-events: none;
-}
+} */
 
 .news-list-thumb img {
   display: block;
@@ -166,6 +172,10 @@
   font-size: 20px;
 }
 
+.news-list-items .article-intro {
+  min-height: 45px;
+}
+
 .news-list-items .article-date {
   color: rgba(255, 255, 255, 0.4);
 }
@@ -191,17 +201,17 @@
     grid-template-columns: 318px 1fr;
   }
 
-  .news-hero .fist-news-title {
+  /* .news-hero .fist-news-title {
     max-width: 320px;
-  }
+  } */
 
   .news-hero .first-news-image {
     width: 318px;
   }
 
-  .news-hero .first-news-image::after {
+  /* .news-hero .first-news-image::after {
     background-size: 318px 25px;
-  }
+  } */
 
   .news-hero .first-news-image img {
     width: 318px;
@@ -219,7 +229,7 @@
 
 @media (min-width: 575px) and (max-width: 1023px) {
   .news-hero .fist-news-title {
-    font-size: 36px;
+    font-size: 32px;
   }
 
   .more-news {
@@ -302,6 +312,11 @@
     height:260px;
   }
 
+  .news-hero .first-news-content {
+    height: 260px;
+    max-height: 260px;
+  }
+
   .news-list-items a > div:nth-of-type(1) {
     grid-row: 1 / span 3;
   }
@@ -364,6 +379,21 @@
     height: 220px;
   }
 
+  .news-hero .first-news-content {
+    height: 220px;
+    max-height: 220px;
+  }
+
+  .news-hero .first-news-body::after {
+    height: 90px;
+    background: linear-gradient(
+      to bottom,
+      rgba(14, 27, 66, 0) 0%,
+      rgba(14, 27, 66, 0.42) 62%,
+      #0e1b42 92%
+    );
+  }
+
 
   .news-hero .fist-news-title {
     font-size: 24px;
@@ -386,10 +416,10 @@
     height: 110px;
   }
 
-  .news-list-thumb::after {
+  /* .news-list-thumb::after {
     background: url("../img/picfrm_o139.png") no-repeat left bottom / cover;
     background-size: 139px 25px;
-  }
+  } */
 
   .news-list-items a > div:nth-of-type(3) {
     display: none;
diff --git a/innovedus_cms/home/templates/home/hashtag_page.html b/innovedus_cms/home/templates/home/hashtag_page.html
index 6269d93..6acc84f 100644
--- a/innovedus_cms/home/templates/home/hashtag_page.html
+++ b/innovedus_cms/home/templates/home/hashtag_page.html
@@ -1,19 +1,14 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
-{% block content %}
-  <nav class="breadcrumbs" aria-label="breadcrumb">
-    <ol>
-      <li>
-        {% if site_root %}
-          <a href="{{ site_root.url }}">首頁</a>
-        {% else %}
-          <a href="/">首頁</a>
-        {% endif %}
-      </li>
-      <li><span>標籤</span></li>
-      <li><span>#{{ tag.name }}</span></li>
-    </ol>
-  </nav>
-
-  {% include "home/includes/page-article-list.html" with category=category_sections.0 %}
+{% load wagtailcore_tags static %}
+{% block extra_css %}
+  <link rel="stylesheet" type="text/css" href="{% static 'css/category.css' %}">
+{% endblock %}
+{% block content %}
+  <div class="site-hero-band full-bleed">
+    <div class="site-container">
+      <div class="block-title category-title"><span>#{{ tag.name }}</span></div>
+    </div>
+  </div>
+
+  {% include "home/includes/page-article-list.html" with category=category_sections.0 show_hero=False empty_message="沒有符合條件的文章" %}
 {% endblock %}
diff --git a/innovedus_cms/home/templates/home/home_page.html b/innovedus_cms/home/templates/home/home_page.html
index 76f64b5..832b55e 100644
--- a/innovedus_cms/home/templates/home/home_page.html
+++ b/innovedus_cms/home/templates/home/home_page.html
@@ -9,9 +9,10 @@
 {% endblock %}
 {% block content %}
   <div class="site-hero-band full-bleed">
+    {% include "base/includes/home_banner.html" %}
+
     <div class="site-container">
       <div class="home-hero">
-        {% include "base/includes/home_banner.html" %}
         {% with top_section=sections.top_section %}
           {% for section in top_section %}
             {% include "home/includes/news_list.html" with section=section %}
diff --git a/innovedus_cms/home/templates/home/includes/article_list.html b/innovedus_cms/home/templates/home/includes/article_list.html
index 7cc3d18..e907e9a 100644
--- a/innovedus_cms/home/templates/home/includes/article_list.html
+++ b/innovedus_cms/home/templates/home/includes/article_list.html
@@ -1,49 +1,77 @@
 {% load wagtailimages_tags static home_tags %}
 
-<div class="site-hero-band full-bleed">
-  <div class="site-container">
-    {% with first_article=items|first %}
-      {% if first_article %}
-        <div class="first-article">
-          <div class="first-article-image">
-            <a href="{{ first_article.url }}">
-              {% if first_article.cover_image %}
-                {% image first_article.cover_image max-410x293 as cover %}
-                <img src="{{ cover.url }}" alt="{{ first_article.title }}"/>
+{% if show_hero != False %}
+  <div class="site-hero-band full-bleed">
+    <div class="site-container">
+      {% with first_article=items|first %}
+        {% if first_article %}
+          <div class="first-article">
+            <div class="first-article-image">
+              <a href="{{ first_article.url }}">
+                {% if first_article.cover_image %}
+                  {% image first_article.cover_image max-410x293 as cover %}
+                  <img src="{{ cover.url }}" alt="{{ first_article.title }}"/>
+                {% else %}
+                  {% random_default_cover as default_cover %}
+                  <img src="{{ default_cover }}" alt="{{ first_article.title }}"/>
+                {% endif %}
+              </a>
+            </div>
+            <div class="first-article-content">
+              <a href="{{ first_article.url }}">
+                <div class="first-article-title">
+                  <span>{{ first_article.title }}</span>
+                </div>
+                <div class="first-article-date">
+                  <span>{{ first_article.date|date:"Y.m.d" }}</span>
+                </div>
+                {% if first_article.intro %}
+                  <div class="first-article-intro">
+                    <span>{{ first_article.intro }}</span>
+                  </div>
+                {% endif %}
+                <div class="first-article-body">
+                  <span>{{ first_article.body_search_text|truncatechars:200 }}</span>
+                </div>
+              </a>
+            </div>
+          </div>
+        {% else %}
+          <span class="empty">{{ empty_message|default:"目前沒有文章" }}</span>
+        {% endif %}
+      {% endwith %}
+    </div>
+  </div>
+{% endif %}
+
+{% if show_hero != False %}
+  {% if items|length > 2 %}
+    <div class="article-list-lower">
+      {% for article in items|slice:"1:" %}
+        <a href="{{ article.url }}">
+          <div class="article-list-item">
+            <div class="article-thumb">
+              {% if article.cover_image %}
+                {% image article.cover_image max-410x218 as cover %}
+                <img src="{{ cover.url }}" alt="{{ article.title }}"/>
               {% else %}
                 {% random_default_cover as default_cover %}
-                <img src="{{ default_cover }}" alt="{{ first_article.title }}"/>
+                <img src="{{ default_cover }}" alt="{{ article.title }}"/>
               {% endif %}
-            </a>
+            </div>
+            <div class="article-content">
+              <div><span class="article-title">{{ article.title }}</span></div>
+              <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
+            </div>
           </div>
-          <div class="first-article-content">
-            <a href="{{ first_article.url }}">
-              <div class="first-article-title">
-                <span>{{ first_article.title }}</span>
-              </div>
-              <div class="first-article-date">
-                <span>{{ first_article.date|date:"Y.m.d" }}</span>
-              </div>
-              {% if first_article.intro %}
-                <div class="first-article-intro">
-                  <span>{{ first_article.intro }}</span>
-                </div>
-              {% endif %}
-              <div class="first-article-body">
-                <span>{{ first_article.body_search_text|truncatechars:200 }}</span>
-              </div>
-            </a>
-          </div>
-        </div>
-      {% else %}
-        <span class="empty">目前沒有文章</span>
-      {% endif %}
-    {% endwith %}
-  </div>
-</div>
-<div class="article-list-lower">
-  {% if items|length >= 2 %}
-    {% for article in items|slice:"1:" %}
+        </a>
+      {% endfor %}
+    </div>
+  {% endif %}
+{% else %}
+  {% if items|length %}
+  <div class="article-list-lower">
+    {% for article in items %}
       <a href="{{ article.url }}">
         <div class="article-list-item">
           <div class="article-thumb">
@@ -62,5 +90,8 @@
         </div>
       </a>
     {% endfor %}
+  </div>
+  {% else %}
+    <span class="empty">{{ empty_message|default:"沒有符合條件的文章" }}</span>
   {% endif %}
-</div>
+{% endif %}
diff --git a/innovedus_cms/home/templates/home/includes/news_list.html b/innovedus_cms/home/templates/home/includes/news_list.html
index 44de2b2..afe2987 100644
--- a/innovedus_cms/home/templates/home/includes/news_list.html
+++ b/innovedus_cms/home/templates/home/includes/news_list.html
@@ -12,18 +12,14 @@
           </span>
           <a href="{{ section.url }}"><span class="more-link">查看全部</span></a>
         </div>
-        {% with first_article=section.items|first %}
-          {% if first_article %}
-            <div class="fist-news-title">
-              <a href="{{ first_article.url }}">
-                <span>{{ first_article.title }}</span>
-              </a>
-            </div>
-          {% endif %}
-        {% endwith %}
       </div>
       {% with first_article=section.items|first %}
         {% if first_article %}
+          <div class="fist-news-title">
+            <a href="{{ first_article.url }}">
+              <span>{{ first_article.title }}</span>
+            </a>
+          </div>
           <div class="first-news-image">
             <a href="{{ first_article.url }}">
               {% if first_article.cover_image %}
diff --git a/innovedus_cms/home/templates/home/includes/page-article-list.html b/innovedus_cms/home/templates/home/includes/page-article-list.html
index 0c94744..564061e 100644
--- a/innovedus_cms/home/templates/home/includes/page-article-list.html
+++ b/innovedus_cms/home/templates/home/includes/page-article-list.html
@@ -4,7 +4,7 @@
 {% endblock %}
 
 <div class="page-article-list">
-  {% include "home/includes/article_list.html" with items=category.items %}
+  {% include "home/includes/article_list.html" with items=category.items show_hero=show_hero empty_message=empty_message %}
 
   {% if category.items.paginator.num_pages > 1 %}
     <div class="pagination">
@@ -17,6 +17,13 @@
           </button>
           <span>BACK</span>
         </a>
+      {% else %}
+          <button class="left-arrow" type="button" data-dir="left" aria-label="更多文章">
+            <svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
+              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
+            </svg>
+          </button>
+          <span>BACK</span>
       {% endif %}
       <div class="pagination-pages">
         {% for page_num in category.page_range %}
diff --git a/innovedus_cms/home/views.py b/innovedus_cms/home/views.py
index 81e966d..a6319a7 100644
--- a/innovedus_cms/home/views.py
+++ b/innovedus_cms/home/views.py
@@ -4,7 +4,7 @@ from django.shortcuts import get_object_or_404, render
 from taggit.models import Tag
 from wagtail.models import Site
 
-from .models import ArticlePage, PAGE_SIZE
+from .models import ArticlePage, CATEGORY_HOT_SIZE, PAGE_SIZE
 
 
 def hashtag_search(request, slug):
@@ -12,7 +12,7 @@ def hashtag_search(request, slug):
     articles = (
         ArticlePage.objects.live()
         .filter(tags__slug=slug)
-        .order_by("-date")
+        .order_by("-date", "-id")
     )
 
     paginator = Paginator(articles, PAGE_SIZE)
@@ -37,7 +37,12 @@ def hashtag_search(request, slug):
                 "url": request.path,
                 "page_range": paginator.get_elided_page_range(page_obj.number),
             }
-        ],
+        ],        
+        "category_trending": (
+            ArticlePage.objects.live()
+            .filter(tags__slug=slug, trending=True)
+            .order_by("-date", "-id")[:CATEGORY_HOT_SIZE]
+        ),
         "site_root": site_root,
         "page": site_root.specific if site_root else None,
     }
diff --git a/innovedus_cms/mysite/static/css/contact_form.css b/innovedus_cms/mysite/static/css/contact_form.css
index cf3de31..efc55e8 100644
--- a/innovedus_cms/mysite/static/css/contact_form.css
+++ b/innovedus_cms/mysite/static/css/contact_form.css
@@ -13,7 +13,6 @@
 .contact-form-modal__backdrop {
   position: absolute;
   inset: 0;
-  background: #0e1b42cc;
 }
 
 .contact-form-modal__dialog {
@@ -26,6 +25,7 @@
   background: #0e1b42e6;
   color: #ffffff;
   overflow-y: auto;
+  backdrop-filter: blur(12px);
 }
 
 .contact-form-modal__close {
diff --git a/innovedus_cms/mysite/static/css/subscribe_fab.css b/innovedus_cms/mysite/static/css/subscribe_fab.css
index 7513f24..10a9b10 100644
--- a/innovedus_cms/mysite/static/css/subscribe_fab.css
+++ b/innovedus_cms/mysite/static/css/subscribe_fab.css
@@ -47,24 +47,25 @@
   height: 59px;
   padding: 0 10px 0 0;
   border-radius: 36px;
-  background: #323232;
+  background: #ffffff1a;
   border: 1px solid #ffffff80;
   transform: translateX(calc(100% - var(--fab-toggle-width)));
   transition: transform 0.25s ease, background-color 0.2s ease;
+  backdrop-filter: blur(12px);
 }
 
 .subscribe-fab:hover .subscribe-fab__panel {
-  background: #767676;
+  background: #ffffff66;
 }
 
 .subscribe-fab.is-open .subscribe-fab__panel {
-  background: #767676;
+  background: #ffffff66;
   transform: translateX(44px);
 }
 
 .subscribe-fab:hover .subscribe-fab__toggle,
 .subscribe-fab.is-open .subscribe-fab__toggle {
-  color: #0e1b42;;
+  color: #0e1b42;
 }
 
 .subscribe-fab__form {
diff --git a/innovedus_cms/search/templates/search/search.html b/innovedus_cms/search/templates/search/search.html
index 6d06863..6b84773 100644
--- a/innovedus_cms/search/templates/search/search.html
+++ b/innovedus_cms/search/templates/search/search.html
@@ -1,33 +1,29 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags static %}
 
 {% block body_class %}template-searchresults{% endblock %}
 
+{% block extra_css %}
+  <link rel="stylesheet" type="text/css" href="{% static 'css/category.css' %}">
+{% endblock %}
+
 {% block title %}
   {% if search_query %}搜尋：{{ search_query }}{% else %}搜尋{% endif %}
 {% endblock %}
 
 {% block content %}
-  <nav class="breadcrumbs" aria-label="breadcrumb">
-    <ol>
-      <li>
-        {% if site_root %}
-          <a href="{{ site_root.url }}">首頁</a>
-        {% else %}
-          <a href="/">首頁</a>
-        {% endif %}
-      </li>
-      <li><span>搜尋</span></li>
-      {% if search_query %}
-        <li><span>{{ search_query }}</span></li>
-      {% endif %}
-    </ol>
-  </nav>
+  {% if search_query %}
+    <div class="site-hero-band full-bleed">
+      <div class="site-container">
+        <div class="block-title category-title"><span>{{ search_query }}</span></div>
+      </div>
+    </div>
+  {% endif %}
 
   <section class="search-results">
     {% if search_query %}
       {% if results_count %}
-        {% include "home/includes/page-article-list.html" %}
+        {% include "home/includes/page-article-list.html" with category=category_sections.0 show_hero=False empty_message="沒有符合條件的文章" %}
       {% else %}
         <p>找不到與「{{ search_query }}」相關的文章。</p>
       {% endif %}