diff --git a/templates/admin/categories/customize.html b/templates/admin/categories/customize.html
index 1625f92..f3637ae 100644
--- a/templates/admin/categories/customize.html
+++ b/templates/admin/categories/customize.html
@@ -44,25 +44,52 @@
 			<p class="form-text">Default: <b>#202020</b></p>
 		</div>
 		#}
-		<div class="form-check mb-3">
+		<div class="form-check form-switch mb-2">
 			<input
 			class="form-check-input"
 			type="checkbox"
 			name="_style.tintColors"
 			id="_style.tintColors"
 			value="{{ cfg.style.tintColors }}"
+			role="switch"
 			{% if cfg.style.tintColors == true %}checked{% endif %}>
 			<input type="hidden" id="style.tintColors" name="style.tintColors" value="{{ cfg.style.tintColors }}">
 			<label for="_style.tintColors" class="form-check-label">Tint all colors with accent color</label>
 		</div>
+		<div class="form-check form-switch mb-1">
+			<input
+			class="form-check-input nav-icons-checkbox"
+			type="checkbox"
+			name="_style.navIcons"
+			id="_style.navIcons"
+			value="{{ cfg.style.navIcons }}"
+			role="switch"
+			{% if cfg.style.navIcons == true %}checked{% endif %}>
+			<input type="hidden" id="style.navIcons" name="style.navIcons" value="{{ cfg.style.navIcons }}">
+			<label for="_style.navIcons" class="form-check-label">Include icons in nav links</label>
+		</div>
+		<p class="form-text mb-2"><b>Note:</b> on mobile screens text will always be hidden if this option is enabled</p>
+		<div class="form-check form-switch mb-4 ms-3">
+			<input
+			class="form-check-input nav-icons-only-checkbox"
+			type="checkbox"
+			name="_style.navIconsOnly"
+			id="_style.navIconsOnly"
+			value="{{ cfg.style.navIconsOnly }}"
+			role="switch"
+			{% if cfg.style.navIconsOnly == true %}checked{% endif %}>
+			<input type="hidden" id="style.navIconsOnly" name="style.navIconsOnly" value="{{ cfg.style.navIconsOnly }}">
+			<label for="_style.navIconsOnly" class="form-check-label">Include <b>only</b> icons in nav links</label>
+		</div>
 		{#
-		<div class="form-check mb-3">
+		<div class="form-check form-switch mb-3">
 			<input
 			class="form-check-input"
 			type="checkbox"
 			name="_style.tintBackground"
 			id="_style.tintBackground"
 			value="{{ cfg.style.tintBackground }}"
+			role="switch"
 			{% if cfg.style.tintBackground == true %}checked{% endif %}>
 			<input type="hidden" id="style.tintBackground" name="style.tintBackground" value="{{ cfg.style.tintBackground }}">
 			<label for="_style.tintBackground" class="form-check-label">Tint background with accent color</label>
@@ -117,6 +144,42 @@
 	</form>
 {% endblock %}
 {% block _scripts %}
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+
+		// fix handling checkboxes
+		document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
+			checkbox.addEventListener('change', function() {
+				checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
+			});
+		});
+        // Get the first checkbox and the second checkbox
+        const navIconsCheckbox = document.querySelector(".nav-icons-checkbox");
+        const navIconsOnlyCheckbox = document.querySelector(".nav-icons-only-checkbox");
+
+        // Define a function to update the second checkbox
+        function updateNavIconsOnlyCheckbox() {
+            if (!navIconsCheckbox.checked) {
+                // Disable the second checkbox and uncheck it
+                navIconsOnlyCheckbox.checked = false;
+                navIconsOnlyCheckbox.disabled = true;
+
+                // Update the hidden input for the second checkbox
+				navIconsOnlyCheckbox.nextElementSibling.value = "False";
+            } else {
+                // Enable the second checkbox
+                navIconsOnlyCheckbox.disabled = false;
+            }
+        }
+
+        // Perform the check on page load
+        updateNavIconsOnlyCheckbox();
+
+        // Add an event listener to the first checkbox to handle changes
+        navIconsCheckbox.addEventListener("change", updateNavIconsOnlyCheckbox);
+    });
+</script>
+
 <script src="{{ url_for('static', filename='js/coloris.min.js') }}"></script>
 <script>
 	Coloris({
@@ -138,12 +201,4 @@
 		    ],
 	});
 </script>
-<script>
-	// fix handling checkboxes
-	document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
-		checkbox.addEventListener('change', function() {
-			checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
-		});
-	});
-</script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}