diff --git a/public/scss/generics.scss b/public/scss/generics.scss
index f2c50ee44e..e76b8d0989 100644
--- a/public/scss/generics.scss
+++ b/public/scss/generics.scss
@@ -13,6 +13,7 @@
 .text-md { font-size: 1.125rem!important; } // 18px on harmony
 .text-sm { font-size: 0.875rem!important; } // 14px on harmony
 .text-xs { font-size: 0.75rem!important; } // 12px on harmony
+.text-tabular { font-variant-numeric: tabular-nums!important; }
 
 .overscroll-behavior-contain {
 	overscroll-behavior: contain;
diff --git a/public/src/admin/advanced/cache.js b/public/src/admin/advanced/cache.js
index ce11ea6581..d8463da487 100644
--- a/public/src/admin/advanced/cache.js
+++ b/public/src/admin/advanced/cache.js
@@ -36,8 +36,8 @@ define('admin/advanced/cache', ['alerts'], function (alerts) {
 			const rows = tbody.find('tr').toArray();
 
 			// Toggle sort direction
-			const ascending = !!$(this).data('asc');
-			$(this).data('asc', !ascending);
+			const ascending = $(this).data('sort') === 'asc';
+			$(this).data('sort', !ascending ? 'asc' : 'desc');
 
 			// Remove sort indicators from all headers
 			table.find('th i').addClass('invisible');
diff --git a/src/views/admin/advanced/cache.tpl b/src/views/admin/advanced/cache.tpl
index 17e226665e..a0efd3ff3e 100644
--- a/src/views/admin/advanced/cache.tpl
+++ b/src/views/admin/advanced/cache.tpl
@@ -14,19 +14,19 @@
 				<table id="cache-table" class="table table-sm text-sm">
 					<thead>
 						<tr>
-							<th><a href="#" class="text-reset">name</a> <i class="fa-solid invisible fa-sort-down"></i></th>
-							<th class="text-end"><a href="#" class="text-reset">capacity</a> <i class="fa-solid invisible fa-sort-down"></i></th>
-							<th class="text-end"><a href="#" class="text-reset">count</a> <i class="fa-solid invisible fa-sort-down"></i></th>
-							<th class="text-end"><a href="#" class="text-reset">size</a> <i class="fa-solid invisible fa-sort-down"></i></th>
-							<th class="text-end"><a href="#" class="text-reset">hits</a> <i class="fa-solid fa-sort-down"></i></th>
-							<th class="text-end"><a href="#" class="text-reset">misses</a> <i class="fa-solid invisible fa-sort-down"></i></th>
-							<th class="text-end"><a href="#" class="text-reset">hit ratio</a> <i class="fa-solid invisible fa-sort-down"></i></th>
-							<th class="text-end"><a href="#" class="text-reset">hits/sec</a> <i class="fa-solid invisible fa-sort-down"></i></th>
-							<th class="text-end"><a href="#" class="text-reset">ttl</a> <i class="fa-solid invisible fa-sort-down"></i></th>
+							<th><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">name</a></th>
+							<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">capacity</a></th>
+							<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">count</a></th>
+							<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">size</a></th>
+							<th class="text-end" data-sort="asc"><i class="fa-solid fa-sort-down"></i> <a href="#" class="text-reset">hits</a></th>
+							<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">misses</a></th>
+							<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">hit ratio</a></th>
+							<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">hits/sec</a></th>
+							<th class="text-end"><i class="fa-solid invisible fa-sort-down"></i> <a href="#" class="text-reset">ttl</a></th>
 							<th></td>
 						</tr>
 					</thead>
-					<tbody class="text-xs">
+					<tbody class="text-xs text-tabular">
 					{{{ each caches }}}
 					<tr class="align-middle">
 						<td data-sort-value="{./name}">