diff --git a/main.go b/main.go
index 924707d..ba94018 100644
--- a/main.go
+++ b/main.go
@@ -95,6 +95,7 @@ func main() {
 	})
 
 	server.Use(func(c *fiber.Ctx) error {
+		// Pass in values that we want to be available to all pages here
 		token := session.GetPixivToken(c)
 		pageURL := c.BaseURL() + c.OriginalURL()
 
@@ -103,6 +104,7 @@ func main() {
 			"OriginalURL": c.OriginalURL(),
 			"PageURL":     pageURL,
 			"LoggedIn":    token != "",
+			"Queries": c.Queries(),
 		})
 		return c.Next()
 	})
diff --git a/pages/ranking.go b/pages/ranking.go
index b74a08d..20dcaf3 100644
--- a/pages/ranking.go
+++ b/pages/ranking.go
@@ -27,8 +27,6 @@ func RankingPage(c *fiber.Ctx) error {
 		"Title":     "Ranking",
 		"Page":      pageInt,
 		"PageLimit": 10, // hard-coded by pixiv
-		"Mode":      mode,
-		"Content":   content,
 		"Date":      date,
 		"Data":      works,
 	})
diff --git a/serve/template.go b/serve/template.go
index ead219f..3ec4b02 100644
--- a/serve/template.go
+++ b/serve/template.go
@@ -235,6 +235,15 @@ func GetNovelGenre(s string) string {
 	return fmt.Sprintf("(Unknown Genre %s)", s)
 }
 
+func SwitchButtonAttributes(baseURL, selection, currentSelection string) string {
+	var cur string = "false"
+	if selection == currentSelection {
+		cur = "true"
+	}
+
+	return fmt.Sprintf(`href=%s%s class=switch-button selected=%s`, baseURL, selection, cur)
+}
+
 func lowercaseFirstChar(s string) string {
 	return strings.ToLower(s[0:1]) + s[1:]
 }
@@ -342,5 +351,6 @@ func GetTemplateFunctions() template.FuncMap {
 			}
 			return url
 		},
+		"AttrGen": SwitchButtonAttributes,
 	}
 }
diff --git a/views/css/style.css b/views/css/style.css
index 66ce715..4f5ba40 100644
--- a/views/css/style.css
+++ b/views/css/style.css
@@ -302,6 +302,10 @@ input[type=submit][hidden] {
   display: none;
 }
 
+.switch-button[selected="1"] {
+  background: #fc365b;
+}
+
 .switch-seperator {
   display: inline-block;
   margin-left: 10px;
diff --git a/views/css/style.scss b/views/css/style.scss
index 6858085..9c08b21 100644
--- a/views/css/style.scss
+++ b/views/css/style.scss
@@ -344,6 +344,10 @@ input[type="submit"][hidden] {
   display: none;
 }
 
+.switch-button[selected="1"] {
+  background: $highlight;
+}
+
 .switch-seperator {
   display: inline-block;
   margin-left: 10px;
diff --git a/views/pages/components/switcher.jet.html b/views/pages/components/switcher.jet.html
new file mode 100644
index 0000000..ee584b7
--- /dev/null
+++ b/views/pages/components/switcher.jet.html
@@ -0,0 +1,7 @@
+{{block Switcher(baseURL, paths, names, currentPath)}}
+    {{ range i, k := paths }}
+        <a href="{{ baseURL }}{{k}}" class="switch-button" selected="{{ currentPath == k ? 1 : 0}}">
+        {{names[i]}}
+        </a>
+    {{ end }}
+{{ end }}
diff --git a/views/pages/rank.jet.html b/views/pages/rank.jet.html
index ae8be73..8fb10f5 100644
--- a/views/pages/rank.jet.html
+++ b/views/pages/rank.jet.html
@@ -1,3 +1,5 @@
+{{ import "components/switcher" }}
+
 <div class="container">
   <h1>{{ Title }}</h1>
 
@@ -10,33 +12,39 @@
     {{ url = "/ranking?mode=" + Mode + "&date=" + Data.CurrentDate +
     "&page=1&content=" }}
     {{ end }}
-    <div class="switch-title">Content (current: {{ Content }})</div>
-    <a href="{{ url }}all" class="switch-button">Overall</a>
-    <a href="{{ url }}illust" class="switch-button">Illustrations</a>
-    <a href="{{ url }}manga" class="switch-button">Mangas</a>
-    <a href="{{ url }}ugoira" class="switch-button">Ugoira</a>
+    <div class="switch-title">Content</div>
+    {{ path := slice("all",     "illust",        "manga",  "ugoira") }}
+    {{ name := slice("Overall", "Illustrations", "Mangas", "Ugoira")}}
+    {{ yield Switcher(baseURL=url, paths=path, names=name, currentPath=Queries.content)}}
   </div>
   <br />
 
   <div class="switcher">
     {{ url := "/ranking?content=" + Content +"&date=" + Data.CurrentDate
     + "&page=1&mode=" }}
-    <div class="switch-title">Modes (current: {{ Mode }})</div>
-    <a href="{{ url }}daily" class="switch-button">Daily</a>
-    <a href="{{ url }}weekly" class="switch-button">Weekly</a>
+    <div class="switch-title">Modes</div>
+
+    {{ path := slice("daily", "weekly") }}
+    {{ name := slice("Daily", "Weekly")}}
+    {{ yield Switcher(baseURL=url, paths=path, names=name, currentPath=Queries.mode)}}
+
     {{ if Content != "ugoira" }}
-    <a href="{{ url }}monthly" class="switch-button">Monthly</a>
-    <a href="{{ url }}rookie" class="switch-button">Rookie</a>
+
+    {{ path := slice("monthly", "rookie") }}
+    {{ name := slice("Monthly", "Rookie")}}
+    {{ yield Switcher(baseURL=url, paths=path, names=name, currentPath=Queries.mode)}}
+
     {{ end }}
 
     <span class="switch-seperator"></span>
-    <a href="{{ url }}daily_r18" class="switch-button">Daily (R-18)</a>
-    <a href="{{ url }}weekly_r18" class="switch-button">Weekly (R-18)</a>
+    {{ path := slice("daily_r18", "weekly_r18") }}
+    {{ name := slice("Daily (R-18)", "Weekly (R-18)")}}
+    {{ yield Switcher(baseURL=url, paths=path, names=name, currentPath=Queries.mode)}}
     <br />
     {{ if Content == "all" }}
-    <a href="{{ url }}original" class="switch-button">Original</a>
-    <a href="{{ url }}male" class="switch-button">Popular among males</a>
-    <a href="{{ url }}female" class="switch-button">Popular among females</a>
+    {{ path := slice("original", "male", "female") }}
+    {{ name := slice("Original", "Popular among males", "Popular among females")}}
+    {{ yield Switcher(baseURL=url, paths=path, names=name, currentPath=Queries.mode)}}
     {{ end }}
   </div>
   <br />