diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css
index 72e2f47..000a29a 100644
--- a/assets/css/bootstrap-style.css
+++ b/assets/css/bootstrap-style.css
@@ -4519,7 +4519,7 @@ textarea.form-control-lg {
   border-top: 0;
 }
 
-.card-body {
+.card-body, .custom-card-body {
   flex: 1 1 auto;
   padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
   color: var(--bs-card-color);
@@ -7665,7 +7665,7 @@ textarea.form-control-lg {
   border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
 }
 
-.border-0, .custom-card, .custom-btn-secondary, .custom-btn-secondary-flex {
+.border-0, .custom-card-body, .custom-card, .custom-btn-secondary, .custom-btn-secondary-flex {
   border: 0 !important;
 }
 
@@ -9177,7 +9177,7 @@ textarea.form-control-lg {
   border-radius: var(--bs-border-radius-xl) !important;
 }
 
-.rounded-5, .custom-card {
+.rounded-5, .custom-card-body, .custom-card {
   border-radius: var(--bs-border-radius-xxl) !important;
 }
 
@@ -12250,18 +12250,4 @@ h6, .h6 {
   display: inline;
 }
 
-/* [data-bs-theme="charcoal"] {
-  --bs-body-color: #f5f5f5;
-  --bs-body-color-rgb: rgb(245, 245, 245);
-  --bs-body-bg: #1f1f1f;
-  --bs-body-bg-rgb: rgb(31, 31, 31);
-  --bs-secondary-color: #d6d6d6;
-  --bs-secondary-color-rgb: rgb(214, 214, 214);
-  --bs-secondary-bg: #e9ecef;
-  --bs-secondary-bg-rgb: 233, 236, 239;
-  /// --bs-tertiary-bg: #f8f9fa;
-  --bs-tertiary-bg-rgb: rgba(255,255,255,0.12);
-  --bs-link-color: rgb(102, 159, 194);
-} */
-
 /*# sourceMappingURL=bootstrap-style.css.map */
diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss
index 6b0c4bc..0e52dad 100644
--- a/assets/css/bootstrap-style.scss
+++ b/assets/css/bootstrap-style.scss
@@ -11,6 +11,7 @@ $aspect-ratios: (
   "9x16": calc(16 / 9 * 100%),
 );
 
+/// Define custom colors
 @import "./bootstrap/functions";
 @import "./bootstrap/variables";
 @import "./bootstrap/variables-dark";
@@ -29,6 +30,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 
 @import "./bootstrap/bootstrap";
 
+/// Custom classes to reduce boilerplate
 .custom-btn-secondary {
   @extend .btn;
   @extend .fw-bold;
@@ -49,28 +51,39 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   @extend .rounded-5;
 }
 
+.custom-card-body {
+  @extend .card-body;
+  @extend .border-0;
+  @extend .rounded-5;
+}
+
 /// Custom heading sizes (e.g., h1 gets h3 size, h2 gets h4 size, etc.)
 h1 {
   font-size: $h3-font-size;
   font-weight: $font-weight-bold;
 }
+
 h2 {
   font-size: $h4-font-size;
   font-weight: $font-weight-bold;
   margin-bottom: 1.5rem;
 }
+
 h3 {
   font-size: $h5-font-size;
   font-weight: $font-weight-bold;
   margin-bottom: 1rem;
 }
+
 h4 {
   font-size: $h6-font-size;
   font-weight: $font-weight-bold;
 }
+
 h5 {
   font-weight: $font-weight-bold;
 }
+
 h6 {
   font-weight: $font-weight-bold;
 }
@@ -95,17 +108,3 @@ h6 {
 .htmx-request.like-spinner {
   display: inline;
 }
-
-/* [data-bs-theme="charcoal"] {
-  --bs-body-color: #f5f5f5;
-  --bs-body-color-rgb: rgb(245, 245, 245);
-  --bs-body-bg: #1f1f1f;
-  --bs-body-bg-rgb: rgb(31, 31, 31);
-  --bs-secondary-color: #d6d6d6;
-  --bs-secondary-color-rgb: rgb(214, 214, 214);
-  --bs-secondary-bg: #e9ecef;
-  --bs-secondary-bg-rgb: 233, 236, 239;
-  /// --bs-tertiary-bg: #f8f9fa;
-  --bs-tertiary-bg-rgb: rgba(255,255,255,0.12);
-  --bs-link-color: rgb(102, 159, 194);
-} */
diff --git a/assets/views/rank.jet.html b/assets/views/rank.jet.html
index 253bc6a..86eb357 100644
--- a/assets/views/rank.jet.html
+++ b/assets/views/rank.jet.html
@@ -1,17 +1,16 @@
 {{- extends "layout/default" }}
-{{- import "blocks/switcher" }}
 {{- import "blocks/pagination" }}
+{{- import "blocks/underlinenav" }}
 {{- block body() }}
-<div class="row justify-content-center">
-  <h1 class="text-center mb-4">{{ .Title }}</h1>
+<div class="row justify-content-center g-4">
+  <h1 class="text-center">{{ .Title }}</h1>
   <div class="col-12">
     <div class="row g-3">
       <div class="col-12 col-lg-9">
-        <div class="card border-0">
-          <div class="card-body rounded-5 bg-body-tertiary p-4 mb-4">
+        <div class="custom-card">
+          <div class="custom-card-body bg-charcoal-surface1 p-4">
             <h2 class="mb-3">Ranking options</h2>
-            <p class="small text-muted">Select ranking modes and filters.</p>
-            <!-- TODO: add additional checks to these Switcher buttons to ensure only valid URLs can be generated
+            <!-- TODO: add additional checks to these UnderlineNav buttons to ensure only valid URLs can be generated
                        e.g. selecting the "Ugoira" button hides the buttons under
                             "Specialized rankings" as well as the "Monthly" and "Rookie"
                             options under "Time frame", but this doesn't occur vice versa
@@ -30,77 +29,72 @@
             <div class="row border-bottom border-2 mb-3">
               <div class="col-12">
                  <div class="row">
-                <div class="col-12">
-                <h3 class="mb-3">Content type</h3>
-                <div class="btn-group d-flex flex-wrap" role="group" aria-label="Content types">
-                  {{- path := slice("all", "illust", "manga", "ugoira") }}
-                  {{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
-                  {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Content)}}
-                </div>
-                <p class="small text-muted mb-3">Select the type of content you want to see in the rankings.</p>
-
-                </div>
-
-              </div>
+                   <div class="col-12">
+                     <h3>Content type</h3>
+                      <div class="btn-group d-flex flex-wrap" role="group" aria-label="Content types">
+                        {{- path := slice("all", "illust", "manga", "ugoira") }}
+                        {{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
+                        {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Content)}}
+                      </div>
+                      <p class="small text-muted mb-3">Select the type of content you want to see in the rankings.</p>
+                   </div>
+                 </div>
               </div>
             </div>
 
             <div class="row">
-              <div class="col-12 col-md-6">
-                <h3 class="mb-3">Time frame</h3>
+              <div class="col-12 col-md-7">
+                <h3>Time frame</h3>
                 {{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
                 {{- if Content != "ugoira" }}
-                <div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
-                  {{- path := slice("daily", "weekly", "monthly") }}
-                  {{- name := slice("Daily", "Weekly", "Monthly")}}
-                  {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
+                <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
+                  {{- path := slice("daily", "weekly", "monthly", "rookie") }}
+                  {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
+                  {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
                 </div>
-                <div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
-                  {{- path := slice("rookie") }}
-                  {{- name := slice("Rookie")}}
-                  {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
-                </div>
-                <div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
+                <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
                   {{- path := slice("daily_r18", "weekly_r18") }}
                   {{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
-                  {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
+                  {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
                 </div>
                 {{- else }}
-                <div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
+                <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
                   {{- path := slice("daily", "weekly") }}
                   {{- name := slice("Daily", "Weekly")}}
-                  {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
+                  {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
                 </div>
-                <div class="btn-group d-flex flex-wrap" role="group" aria-label="General ranking modes">
+                <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
                   {{- path := slice("daily_r18", "weekly_r18") }}
                   {{- name := slice("Daily (R-18)", "Weekly (R-18)")}}
-                  {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
+                  {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
                 </div>
                 {{- end }}
-                <p class="small text-muted mb-2">Choose the time frame for the rankings.</p>
-                <p class="small text-muted mb-md-0"><span class="fw-bold">Monthly</span> and <span class="fw-bold">Rookie</span> are unavailable when filtering for <span class="fw-bold">Ugoira</span>.</p>
+                <p class="small text-body-secondary mb-2">Choose the time frame for the rankings.</p>
+                <p class="small text-body-secondary mb-md-0">
+                  <span class="fw-bold">Monthly</span> and <span class="fw-bold">Rookie</span> are unavailable when filtering for <span class="fw-bold">Ugoira</span>.
+                </p>
               </div>
 
-              <div class="col-12 col-md-6">
+              <div class="col-12 col-md-5">
               {{- if Content == "all" }}
-              <h3 class="mb-3">Specialized rankings</h3>
+              <h3>Specialized rankings</h3>
               <div class="btn-group d-flex flex-wrap" role="group" aria-label="Specialized ranking modes">
                 {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
                 {{- path := slice("original") }}
                 {{- name := slice("Original")}}
-                {{- yield Switcher(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
               </div>
               <div class="btn-group d-flex flex-wrap" role="group" aria-label="Specialized ranking modes">
                 {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
                 {{- path := slice("male",) }}
                 {{- name := slice("Popular among males")}}
-                {{- yield Switcher(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
               </div>
               <div class="btn-group d-flex flex-wrap" role="group" aria-label="Specialized ranking modes">
                 {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
                 {{- path := slice("female") }}
                 {{- name := slice("Popular among females")}}
-                {{- yield Switcher(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
+                {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
               </div>
               <p class="small text-muted mb-2">Specialized ranking categories.</p>
               <p class="small text-muted mb-0">These options are only available when filtering for <span class="fw-bold">Overall</span>.</p>