diff --git a/assets/views/blocks/switcher.jet.html b/assets/views/blocks/switcher.jet.html
index 18d59b8..fca44ea 100644
--- a/assets/views/blocks/switcher.jet.html
+++ b/assets/views/blocks/switcher.jet.html
@@ -8,21 +8,25 @@
 
     The template loops through the paths, creating a button for each one.
     Each button is styled using Bootstrap 5 classes, including:
-    - btn-outline-secondary for the button style (or btn-outline-danger for r18 paths)
+    - btn-secondary for the button style (or btn-danger for r18 paths)
     - rounded-pill for pill-shaped edges
     - fw-bold for bold text
 
     The template also handles the active state:
     - Adds 'active' class to the button if its path matches the activeState
     - Sets aria-pressed attribute for accessibility
+    - Adds an icon (bi-circle-fill) for the active state
 
     This switcher can be used for tabbed navigation or toggling between different views.
 *}
 
 {{- block Switcher(baseURL, paths, names, activeState) }}
     {{- range i, k := paths }}
-        <a href="{{ baseURL }}{{k}}" class="btn {{ len(k) >= 3 && k[len(k) - 3:] == "r18" ? "btn-outline-danger" : "btn-outline-secondary" }} text-body fw-bold border-2 rounded-pill me-2 mb-2 {{ activeState == k ? " active" : "" }}" role="button" aria-pressed="{{ activeState == k ? "true" : "false" }}">
-        {{- names[i] }}
+        <a href="{{ baseURL }}{{k}}" class="btn {{ len(k) >= 3 && k[len(k) - 3:] == "r18" ? "btn-danger" : "btn-secondary" }} fw-bold rounded-pill flex-fill py-2 me-3 mb-2 d-flex align-items-center justify-content-center position-relative {{ activeState == k ? "active" : "" }}" aria-pressed="{{ activeState == k ? "true" : "false" }}" role="button">
+            {{- if activeState == k }}
+                <i class="bi bi-circle-fill start-icon position-absolute start-0 ms-3"></i>
+            {{- end }}
+            <span>{{ names[i] }}</span>
         </a>
     {{- end }}
 {{- end }}
diff --git a/assets/views/discovery.jet.html b/assets/views/discovery.jet.html
index 6591c2f..5d93d7d 100644
--- a/assets/views/discovery.jet.html
+++ b/assets/views/discovery.jet.html
@@ -1,14 +1,18 @@
 {{- extends "layout/default" }}
+{{- import "blocks/switcher" }}
 {{- block body() }}
 <div class="row justify-content-center">
   <h1 class="h3 fw-bold text-center mb-4">Discover artworks</h1>
 
   <div class="col-12 col-lg-6">
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
-      <h2 class="h4 fw-bold mb-3">Type</h2>
+      <h2 class="h4 fw-bold mb-3"><i class="bi bi-list"></i> Type</h2>
       <p class="text-muted">Choose between discovering artworks or novels from users on Pixiv.</p>
       <div class="d-flex" aria-label="Artwork type">
-        <a href="/discovery" class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3">Artworks</a>
+        <a href="/discovery" class="btn btn-secondary fw-bold rounded-pill flex-fill active py-2 me-3 d-flex align-items-center justify-content-center position-relative" aria-pressed="true">
+          <i class="bi bi-circle-fill start-icon position-absolute start-0 ms-3"></i>
+          <span>Artworks</span>
+        </a>
         <a href="/discovery/novel" class="btn btn-secondary fw-bold rounded-pill py-2 flex-fill">Novels</a>
       </div>
     </div>
@@ -16,12 +20,14 @@
 
   <div class="col-12 col-lg-6">
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
-      <h2 class="h4 fw-bold mb-3">Filter</h2>
+      <h2 class="h4 fw-bold mb-3"><i class="bi bi-funnel-fill"></i> Filter</h2>
       <p class="text-muted">Filter by content rating to customize your discovery experience.</p>
       <div class="d-flex" aria-label="Filter options">
-        <a href='{{replaceQuery(.Queries, "mode", "all")}}' class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3">All</a>
-        <a href='{{replaceQuery(.Queries, "mode", "safe")}}' class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3">Safe</a>
-        <a href='{{replaceQuery(.Queries, "mode", "r18")}}' class="btn btn-danger fw-bold rounded-pill flex-fill py-2">R-18</a>
+        {{- Mode := isset(Queries.mode) ? Queries.mode : "all" }}
+        {{- url := replaceQuery(.Queries, "mode", "") }}
+        {{- path := slice("all", "safe", "r18") }}
+        {{- name := slice("All", "Safe", "R-18")}}
+        {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
       </div>
     </div>
   </div>
diff --git a/assets/views/rank.jet.html b/assets/views/rank.jet.html
index 6207509..338ba26 100644
--- a/assets/views/rank.jet.html
+++ b/assets/views/rank.jet.html
@@ -8,6 +8,7 @@
   <div class="col-12 col-lg-6">
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
       <h2 class="h4 fw-bold mb-3">Content</h2>
+      <p class="text-muted">Select the type of content you want to see in the rankings.</p>
       {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
       {{- Content := isset(Queries.content) ? Queries.content : "all" }} {{- url := "" }}
       {{- if Mode == "original" || Mode == "male" || Mode == "female" || Mode == ""}}
@@ -24,6 +25,7 @@
   <div class="col-12 col-lg-6">
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
       <h2 class="h4 fw-bold mb-3">Modes</h2>
+      <p class="text-muted">Choose the time frame or category for the rankings.</p>
       {{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
       <div class="d-flex flex-wrap mb-3">
         {{- path := slice("daily", "weekly") }}
@@ -50,16 +52,19 @@
 
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
       <h2 class="h4 fw-bold mb-3">Date (current: {{ .Data.CurrentDate }})</h2>
+      <p class="text-muted">Navigate through different dates or view the latest rankings.</p>
       {{ url := "/ranking?content=" + Content + "&mode=" + Mode + "&page=1" }}
+      <div class="d-flex flex-wrap">
+        <a href="{{ url }}" class="btn btn-outline-secondary text-body fw-bold border-2 rounded-pill me-2 mb-2">Latest</a>
+        <a href="/rankingCalendar" class="btn btn-outline-secondary text-body fw-bold border-2 rounded-pill me-2 mb-2">Ranking calendar</a>
+      </div>
       <div class="d-flex flex-wrap">
         {{- if .Data.PrevDate != "false" }}
-        <a href="{{ url }}&date={{.Data.PrevDate}}" class="btn btn-secondary fw-bold rounded-pill me-2 mb-2">Yesterday</a>
+        <a href="{{ url }}&date={{.Data.PrevDate}}" class="btn btn-outline-secondary text-body flex-fill fw-bold border-2 rounded-pill me-2 mb-2">Previous day</a>
         {{- end }}
         {{ if .Data.NextDate != "false" }}
-        <a href="{{ url }}&date={{.Data.NextDate}}" class="btn btn-secondary fw-bold rounded-pill me-2 mb-2">Next day</a>
+        <a href="{{ url }}&date={{.Data.NextDate}}" class="btn btn-outline-secondary text-body flex-fill fw-bold border-2 rounded-pill me-2 mb-2">Next day</a>
         {{- end }}
-        <a href="{{ url }}" class="btn btn-secondary fw-bold rounded-pill me-2 mb-2">Latest</a>
-        <a href="/rankingCalendar" class="btn btn-secondary fw-bold rounded-pill mb-2">Ranking calendar</a>
       </div>
     </div>