diff --git a/assets/images/utils/calendar.svg b/assets/images/utils/calendar.svg
index ae1c796b74..5aaf469ff4 100644
--- a/assets/images/utils/calendar.svg
+++ b/assets/images/utils/calendar.svg
@@ -1,3 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+	<path
+		d="M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z"
+		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/check.svg b/assets/images/utils/check.svg
new file mode 100644
index 0000000000..0b9983b5f0
--- /dev/null
+++ b/assets/images/utils/check.svg
@@ -0,0 +1,4 @@
+<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+	viewBox="0 0 24 24">
+	<path d="M20 6L9 17l-5-5" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/client.svg b/assets/images/utils/client.svg
index 1ae3485fae..21d59db70a 100644
--- a/assets/images/utils/client.svg
+++ b/assets/images/utils/client.svg
@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-</svg>
+<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/download.svg b/assets/images/utils/download.svg
index b316f6b754..1ebfa96ef9 100644
--- a/assets/images/utils/download.svg
+++ b/assets/images/utils/download.svg
@@ -1,3 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 16L4 17C4 18.6569 5.34315 20 7 20L17 20C18.6569 20 20 18.6569 20 17L20 16M16 12L12 16M12 16L8 12M12 16L12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+	<path
+		d="M4 16L4 17C4 18.6569 5.34315 20 7 20L17 20C18.6569 20 20 18.6569 20 17L20 16M16 12L12 16M12 16L8 12M12 16L12 4"
+		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/dropdown.svg b/assets/images/utils/dropdown.svg
index 90ea587d19..3102ecded1 100644
--- a/assets/images/utils/dropdown.svg
+++ b/assets/images/utils/dropdown.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+	<path d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/edit.svg b/assets/images/utils/edit.svg
index b97624f463..4498fb4884 100644
--- a/assets/images/utils/edit.svg
+++ b/assets/images/utils/edit.svg
@@ -1,3 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 5H6C4.89543 5 4 5.89543 4 7V18C4 19.1046 4.89543 20 6 20H17C18.1046 20 19 19.1046 19 18V13M17.5858 3.58579C18.3668 2.80474 19.6332 2.80474 20.4142 3.58579C21.1953 4.36683 21.1953 5.63316 20.4142 6.41421L11.8284 15H9L9 12.1716L17.5858 3.58579Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+	<path
+		d="M11 5H6C4.89543 5 4 5.89543 4 7V18C4 19.1046 4.89543 20 6 20H17C18.1046 20 19 19.1046 19 18V13M17.5858 3.58579C18.3668 2.80474 19.6332 2.80474 20.4142 3.58579C21.1953 4.36683 21.1953 5.63316 20.4142 6.41421L11.8284 15H9L9 12.1716L17.5858 3.58579Z"
+		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/file-text.svg b/assets/images/utils/file-text.svg
index 4197ddd404..13ca692839 100644
--- a/assets/images/utils/file-text.svg
+++ b/assets/images/utils/file-text.svg
@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+	stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
+	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+	<polyline points="14 2 14 8 20 8"></polyline>
+	<line x1="16" y1="13" x2="8" y2="13"></line>
+	<line x1="16" y1="17" x2="8" y2="17"></line>
+	<polyline points="10 9 9 9 8 9"></polyline>
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/gap.svg b/assets/images/utils/gap.svg
index c1a91eff1d..c7bc45aafb 100644
--- a/assets/images/utils/gap.svg
+++ b/assets/images/utils/gap.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="2" viewBox="0 0 14 2"><path d="M18,12H6" transform="translate(-5 -11)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
\ No newline at end of file
+<svg width="14" height="2" viewBox="0 0 14 2">
+	<path d="M18,12H6" transform="translate(-5 -11)" fill="none" stroke="currentColor" stroke-linecap="round"
+		stroke-linejoin="round" stroke-width="2" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/github.svg b/assets/images/utils/github.svg
index c19cbdf671..d1cd53bb58 100644
--- a/assets/images/utils/github.svg
+++ b/assets/images/utils/github.svg
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-<path fill="currentColor" class="st0" d="m12 1c-6.3 0-11.3 5-11.3 11.3 0 5 3.2 9.2 7.7 10.7 0.6 0.1 0.8-0.2 0.8-0.5v-1.9c-3.2 0.6-3.8-1.6-3.8-1.6-0.5-1.3-1.3-1.7-1.3-1.7-1-0.7 0.1-0.7 0.1-0.7 1.1 0.1 1.7 1.2 1.7 1.2 1 1.7 2.7 1.2 3.3 0.9 0.1-0.7 0.4-1.2 0.7-1.5-2.5-0.2-5.1-1.2-5.1-5.5 0-1.2 0.4-2.2 1.2-3-0.1-0.3-0.5-1.4 0.1-3 0 0 1-0.3 3.1 1.2 0.9-0.3 1.8-0.5 2.8-0.5s1.9 0.1 2.8 0.4c2.2-1.5 3.1-1.2 3.1-1.2 0.6 1.6 0.2 2.7 0.1 3 0.7 0.8 1.2 1.8 1.2 3 0 4.4-2.6 5.3-5.2 5.6 0.4 0.3 0.8 1 0.8 2.1v3.1c0 0.3 0.2 0.7 0.8 0.5 4.5-1.5 7.7-5.7 7.7-10.7 0-6.2-5-11.2-11.3-11.2z"/>
-</svg>
+<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xml:space="preserve">
+	<path fill="currentColor" class="st0"
+		d="m12 1c-6.3 0-11.3 5-11.3 11.3 0 5 3.2 9.2 7.7 10.7 0.6 0.1 0.8-0.2 0.8-0.5v-1.9c-3.2 0.6-3.8-1.6-3.8-1.6-0.5-1.3-1.3-1.7-1.3-1.7-1-0.7 0.1-0.7 0.1-0.7 1.1 0.1 1.7 1.2 1.7 1.2 1 1.7 2.7 1.2 3.3 0.9 0.1-0.7 0.4-1.2 0.7-1.5-2.5-0.2-5.1-1.2-5.1-5.5 0-1.2 0.4-2.2 1.2-3-0.1-0.3-0.5-1.4 0.1-3 0 0 1-0.3 3.1 1.2 0.9-0.3 1.8-0.5 2.8-0.5s1.9 0.1 2.8 0.4c2.2-1.5 3.1-1.2 3.1-1.2 0.6 1.6 0.2 2.7 0.1 3 0.7 0.8 1.2 1.8 1.2 3 0 4.4-2.6 5.3-5.2 5.6 0.4 0.3 0.8 1 0.8 2.1v3.1c0 0.3 0.2 0.7 0.8 0.5 4.5-1.5 7.7-5.7 7.7-10.7 0-6.2-5-11.2-11.3-11.2z" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/hamburger.svg b/assets/images/utils/hamburger.svg
index 2813d4704d..9ca75a2235 100644
--- a/assets/images/utils/hamburger.svg
+++ b/assets/images/utils/hamburger.svg
@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+    stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
     <line x1="3" y1="12" x2="21" y2="12" />
     <line x1="3" y1="6" x2="21" y2="6" />
     <line x1="3" y1="18" x2="21" y2="18" />
diff --git a/assets/images/utils/left-arrow.svg b/assets/images/utils/left-arrow.svg
index b41bee4457..dd1c44b35c 100644
--- a/assets/images/utils/left-arrow.svg
+++ b/assets/images/utils/left-arrow.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14.414" height="12.162" viewBox="0 0 14.414 12.162"><path d="M7.667,14.333,3,9.667m0,0L7.667,5M3,9.667H15" transform="translate(-1.586 -3.586)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
\ No newline at end of file
+<svg width="14.414" height="12.162" viewBox="0 0 14.414 12.162">
+	<path d="M7.667,14.333,3,9.667m0,0L7.667,5M3,9.667H15" transform="translate(-1.586 -3.586)" fill="none"
+		stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/moon.svg b/assets/images/utils/moon.svg
index fe2cbbcaaf..2d67a80079 100644
--- a/assets/images/utils/moon.svg
+++ b/assets/images/utils/moon.svg
@@ -1,4 +1,4 @@
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-    stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+    stroke-linejoin="round">
     <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
 </svg>
\ No newline at end of file
diff --git a/assets/images/utils/report.svg b/assets/images/utils/report.svg
index ed40ec04c1..fb9bfbe004 100644
--- a/assets/images/utils/report.svg
+++ b/assets/images/utils/report.svg
@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
-</svg>
+<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/right-arrow.svg b/assets/images/utils/right-arrow.svg
index 72f3bcbf9b..19d9c17302 100644
--- a/assets/images/utils/right-arrow.svg
+++ b/assets/images/utils/right-arrow.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14.414" height="12.162" viewBox="0 0 14.414 12.162"><path d="M7.667,14.333,3,9.667m0,0L7.667,5M3,9.667H15" transform="translate(16 15.748) rotate(180)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
\ No newline at end of file
+<svg width="14.414" height="12.162" viewBox="0 0 14.414 12.162">
+	<path d="M7.667,14.333,3,9.667m0,0L7.667,5M3,9.667H15" transform="translate(16 15.748) rotate(180)" fill="none"
+		stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/search.svg b/assets/images/utils/search.svg
index fbb9eabb98..17bc2a290a 100644
--- a/assets/images/utils/search.svg
+++ b/assets/images/utils/search.svg
@@ -1,3 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+	<path
+		d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/shield.svg b/assets/images/utils/shield.svg
index c7c4841370..1ff9c030d8 100644
--- a/assets/images/utils/shield.svg
+++ b/assets/images/utils/shield.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+	stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield">
+	<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/sun.svg b/assets/images/utils/sun.svg
index 489ff88d3b..0a09c2dadc 100644
--- a/assets/images/utils/sun.svg
+++ b/assets/images/utils/sun.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-    stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+    stroke-linejoin="round">
     <circle cx="12" cy="12" r="5"></circle>
     <line x1="12" y1="1" x2="12" y2="3"></line>
     <line x1="12" y1="21" x2="12" y2="23"></line>
diff --git a/assets/images/utils/tag.svg b/assets/images/utils/tag.svg
index 3850514cab..18de83b6f4 100644
--- a/assets/images/utils/tag.svg
+++ b/assets/images/utils/tag.svg
@@ -1,3 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 7H7.01M7 3H12C12.5119 2.99999 13.0237 3.19525 13.4142 3.58579L20.4143 10.5858C21.1953 11.3668 21.1953 12.6332 20.4143 13.4142L13.4142 20.4142C12.6332 21.1953 11.3668 21.1953 10.5858 20.4142L3.58579 13.4142C3.19526 13.0237 3 12.5118 3 12V7C3 4.79086 4.79086 3 7 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+	<path
+		d="M7 7H7.01M7 3H12C12.5119 2.99999 13.0237 3.19525 13.4142 3.58579L20.4143 10.5858C21.1953 11.3668 21.1953 12.6332 20.4143 13.4142L13.4142 20.4142C12.6332 21.1953 11.3668 21.1953 10.5858 20.4142L3.58579 13.4142C3.19526 13.0237 3 12.5118 3 12V7C3 4.79086 4.79086 3 7 3Z"
+		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/assets/images/utils/x.svg b/assets/images/utils/x.svg
index a7acf4abe3..6546b021a5 100644
--- a/assets/images/utils/x.svg
+++ b/assets/images/utils/x.svg
@@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+<svg viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd"
+    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+    clip-rule="evenodd" />
 </svg>
\ No newline at end of file
diff --git a/components/ui/Checkbox.vue b/components/ui/Checkbox.vue
new file mode 100644
index 0000000000..86aa67369c
--- /dev/null
+++ b/components/ui/Checkbox.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="checkbox-outer" :class="{ disabled }" @click="toggle">
+    <button class="checkbox" :disabled="disabled" :class="{ border }">
+      <CheckIcon v-if="checked" />
+    </button>
+    <p>{{ label }}</p>
+  </div>
+</template>
+
+<script>
+import CheckIcon from '~/assets/images/utils/check.svg?inline'
+
+export default {
+  name: 'SearchCheckbox',
+  components: {
+    CheckIcon,
+  },
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      checked: false,
+    }
+  },
+  methods: {
+    toggle() {
+      if (!this.disabled) {
+        this.checked = !this.checked
+        this.$emit('input', this.checked)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.checkbox-outer {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    button {
+      cursor: not-allowed;
+
+      &:active,
+      &:hover,
+      &:focus {
+        background-color: var(--color-button-bg);
+      }
+    }
+  }
+}
+
+p {
+  padding: 0.2rem 0rem;
+  margin: 0 0 0 0.5rem;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  width: 1.5rem;
+  height: 1.5rem;
+
+  padding: 0;
+  margin: 0;
+
+  svg {
+    color: var(--color-brand-light);
+    stroke-width: 0.2rem;
+    height: 1.2rem;
+    width: 1.2rem;
+    flex-shrink: 0;
+  }
+
+  &.border {
+    width: 1.2rem;
+    height: 1.2rem;
+
+    border: 0.15rem solid var(--color-text);
+
+    svg {
+      height: 0.9rem;
+      width: 0.9rem;
+    }
+  }
+}
+</style>
diff --git a/pages/mod/_id/settings.vue b/pages/mod/_id/settings.vue
index 6900e8e31d..3ce9e92743 100644
--- a/pages/mod/_id/settings.vue
+++ b/pages/mod/_id/settings.vue
@@ -104,115 +104,85 @@
         </div>
         <h3>Permissions</h3>
         <div class="permissions">
-          <label>
-            <input
-              type="checkbox"
-              :checked="
-                (member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION
-              "
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & UPLOAD_VERSION) !== UPLOAD_VERSION
-              "
-              @change="members[index].permissions ^= UPLOAD_VERSION"
-            />
-            Upload Version
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="
-                (member.permissions & DELETE_VERSION) === DELETE_VERSION
-              "
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & DELETE_VERSION) !== DELETE_VERSION
-              "
-              @change="members[index].permissions ^= DELETE_VERSION"
-            />
-            Delete Version
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & EDIT_DETAILS) === EDIT_DETAILS"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
-              "
-              @change="members[index].permissions ^= EDIT_DETAILS"
-            />
-            Edit Details
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & EDIT_BODY) === EDIT_BODY"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & EDIT_BODY) !== EDIT_BODY
-              "
-              @change="members[index].permissions ^= EDIT_BODY"
-            />
-            Edit Body
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="
-                (member.permissions & MANAGE_INVITES) === MANAGE_INVITES
-              "
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & MANAGE_INVITES) !== MANAGE_INVITES
-              "
-              @change="members[index].permissions ^= MANAGE_INVITES"
-            />
-            Manage Invites
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & REMOVE_MEMBER) !== REMOVE_MEMBER
-              "
-              @change="members[index].permissions ^= REMOVE_MEMBER"
-            />
-            Remove Member
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & EDIT_MEMBER) === EDIT_MEMBER"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
-              "
-              @change="members[index].permissions ^= EDIT_MEMBER"
-            />
-            Edit Member
-          </label>
-          <label>
-            <input
-              type="checkbox"
-              :checked="(member.permissions & DELETE_MOD) === DELETE_MOD"
-              :disabled="
-                member.role === 'Owner' ||
-                (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-                (currentMember.permissions & DELETE_MOD) !== DELETE_MOD
-              "
-              @change="members[index].permissions ^= DELETE_MOD"
-            />
-            Delete Mod
-          </label>
+          <Checkbox
+            :checked="(member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & UPLOAD_VERSION) !== UPLOAD_VERSION
+            "
+            label="Upload Version"
+            @input="members[index].permissions ^= UPLOAD_VERSION"
+          />
+          <Checkbox
+            :checked="(member.permissions & DELETE_VERSION) === DELETE_VERSION"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & DELETE_VERSION) !== DELETE_VERSION
+            "
+            label="Delete Version"
+            @input="members[index].permissions ^= DELETE_VERSION"
+          />
+          <Checkbox
+            :checked="(member.permissions & EDIT_DETAILS) === EDIT_DETAILS"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS
+            "
+            label="Edit Details"
+            @input="members[index].permissions ^= EDIT_DETAILS"
+          />
+          <Checkbox
+            :checked="(member.permissions & EDIT_BODY) === EDIT_BODY"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & EDIT_BODY) !== EDIT_BODY
+            "
+            label="Edit Body"
+            @input="members[index].permissions ^= EDIT_BODY"
+          />
+          <Checkbox
+            :checked="(member.permissions & MANAGE_INVITES) === MANAGE_INVITES"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & MANAGE_INVITES) !== MANAGE_INVITES
+            "
+            label="Manage Invites"
+            @input="members[index].permissions ^= MANAGE_INVITES"
+          />
+          <Checkbox
+            :checked="(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & REMOVE_MEMBER) !== REMOVE_MEMBER
+            "
+            label="Remove Member"
+            @input="members[index].permissions ^= REMOVE_MEMBER"
+          />
+          <Checkbox
+            :checked="(member.permissions & EDIT_MEMBER) === EDIT_MEMBER"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
+            "
+            label="Edit Member"
+            @input="members[index].permissions ^= EDIT_MEMBER"
+          />
+          <Checkbox
+            :checked="(member.permissions & DELETE_MOD) === DELETE_MOD"
+            :disabled="
+              member.role === 'Owner' ||
+              (currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+              (currentMember.permissions & DELETE_MOD) !== DELETE_MOD
+            "
+            label="Delete Mod"
+            @input="members[index].permissions ^= DELETE_MOD"
+          />
         </div>
         <div class="actions">
           <button
@@ -243,11 +213,12 @@
 import axios from 'axios'
 
 import ConfirmPopup from '~/components/ui/ConfirmPopup'
+import Checkbox from '~/components/ui/Checkbox'
 
 import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 
 export default {
-  components: { DropdownIcon, ConfirmPopup },
+  components: { DropdownIcon, ConfirmPopup, Checkbox },
   props: {
     mod: {
       type: Object,
diff --git a/pages/mods.vue b/pages/mods.vue
index 5faf734f4c..b62dbba142 100644
--- a/pages/mods.vue
+++ b/pages/mods.vue
@@ -267,12 +267,12 @@
               <ServerSide />
             </SearchFilter>
             <h3>Minecraft Versions</h3>
-            <SearchFilter
-              :active-filters="showVersions"
-              display-name="Include snapshots"
-              facet-name="snapshots"
-              style="margin-bottom: 10px"
-              @toggle="fillInitialVersions"
+            <Checkbox
+              v-model="showSnapshots"
+              label="Include snapshots"
+              style="margin-bottom: 0.5rem"
+              :border="false"
+              @input="reloadVersions"
             />
           </section>
           <multiselect
@@ -318,6 +318,7 @@ import axios from 'axios'
 import SearchResult from '~/components/ui/ProjectCard'
 import Pagination from '~/components/ui/Pagination'
 import SearchFilter from '~/components/ui/search/SearchFilter'
+import Checkbox from '~/components/ui/Checkbox'
 
 import MFooter from '~/components/layout/MFooter'
 import TechCategory from '~/assets/images/categories/tech.svg?inline'
@@ -353,6 +354,7 @@ export default {
     Pagination,
     Multiselect,
     SearchFilter,
+    Checkbox,
     TechCategory,
     AdventureCategory,
     CursedCategory,
@@ -381,6 +383,7 @@ export default {
     }
     if (this.$route.query.v)
       this.selectedVersions = this.$route.query.v.split(',')
+    if (this.$route.query.h) this.showSnapshots = this.$route.query.h === 'true'
     if (this.$route.query.e)
       this.selectedEnvironments = this.$route.query.e.split(',')
     if (this.$route.query.s) {
@@ -411,7 +414,7 @@ export default {
       this.currentPage = Math.ceil(this.$route.query.o / this.maxResults) + 1
 
     await Promise.all([
-      this.fillInitialVersions(),
+      this.fillVersions(),
       this.fillInitialLicenses(),
       this.onSearchChange(this.currentPage),
     ])
@@ -424,7 +427,7 @@ export default {
       selectedLicense: '',
       licenses: [],
 
-      showVersions: [],
+      showSnapshots: false,
       selectedVersions: [],
       versions: [],
 
@@ -445,34 +448,27 @@ export default {
       sortType: { display: 'Relevance', name: 'relevance' },
 
       maxResults: 20,
-      firstRun: true,
     }
   },
   methods: {
-    async fillInitialVersions(x) {
+    async fillVersions() {
       try {
-        let url =
-          'https://api.modrinth.com/api/v1/tag/game_version?type=release'
-
-        if (x !== null) {
-          if (!this.showVersions.length > 0 && !this.firstRun) {
-            this.showVersions.push('snapshots')
-
-            url = 'https://api.modrinth.com/api/v1/tag/game_version'
-          } else {
-            this.showVersions = []
-          }
-        }
+        const url = this.showSnapshots
+          ? 'https://api.modrinth.com/api/v1/tag/game_version'
+          : 'https://api.modrinth.com/api/v1/tag/game_version?type=release'
 
         const res = await axios.get(url)
 
         this.versions = res.data
-        this.firstRun = false
       } catch (err) {
         // eslint-disable-next-line no-console
         console.error(err)
       }
     },
+    async reloadVersions() {
+      this.fillVersions()
+      await this.onSearchChange(1)
+    },
     async fillInitialLicenses() {
       const licences = (
         await axios.get('https://api.modrinth.com/api/v1/tag/license')
@@ -648,6 +644,7 @@ export default {
             url += `&f=${encodeURIComponent(this.facets)}`
           if (this.selectedVersions.length > 0)
             url += `&v=${encodeURIComponent(this.selectedVersions)}`
+          if (this.showSnapshots) url += `&h=true`
           if (this.selectedEnvironments.length > 0)
             url += `&e=${encodeURIComponent(this.selectedEnvironments)}`
           if (this.sortType.name !== 'relevance')