diff --git a/files/templates/dropdowns/SearchSorts.html b/files/templates/dropdowns/SearchSorts.html
index dbe2db1ad1..886018729d 100644
--- a/files/templates/dropdowns/SearchSorts.html
+++ b/files/templates/dropdowns/SearchSorts.html
@@ -1,6 +1,6 @@
 <div class="flex items-center space-x-2">
 	<div class="dropdown">
-		<button class="block px-4 py-2 bg-gradient-to-t from-gray-800 to-gray-700 focus:from-gray-700 focus:to-gray-800 border border-gray-900 rounded-lg text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsutton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<button class="block px-4 py-2 bg-gradient-to-t from-gray-200 to-gray-100 focus:from-gray-100 focus:to-gray-200 border border-gray-300 rounded-md text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-700 focus:text-gray-900 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsutton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			{% if t=="hour" %}<i class="fas fa-clock text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
 			{% if t=="day" %}<i class="fas fa-calendar-day text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
 			{% if t=="week" %}<i class="fas fa-calendar-week text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
@@ -11,39 +11,39 @@
 		</button>
 		<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsButton" x-placement="bottom-start">
 			<li class="{% if t=='hour' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=hour">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=hour">
 					<i class="fas fa-clock fa-sm fa-fw mr-4"></i>Hour
 				</a>
 			</li>
 			<li class="{% if t=='day' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=day">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=day">
 					<i class="fas fa-calendar-day fa-sm fa-fw mr-4"></i>Day
 				</a>
 			</li>
 			<li class="{% if t=='week' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=week">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=week">
 					<i class="fas fa-calendar-week fa-sm fa-fw mr-4"></i>Week
 				</a>
 			</li>
 			<li class="{% if t=='month' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=month">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=month">
 					<i class="fas fa-calendar-alt fa-sm fa-fw mr-4"></i>Month
 				</a>
 			</li>
 			<li class="{% if t=='year' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=year">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=year">
 					<i class="fas fa-calendar fa-sm fa-fw mr-4"></i>Year
 				</a>
 			</li>
 			<li class="{% if t=='all' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=all">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=all">
 					<i class="fas fa-infinity fa-sm fa-fw mr-4"></i>All
 				</a>
 			</li>
 		</ul>
 	</div>
 	<div class="dropdown">
-		<button class="block px-4 py-2 bg-gradient-to-t from-gray-800 to-gray-700 focus:from-gray-700 focus:to-gray-800 border border-gray-900 rounded-lg text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsTypeButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<button class="block px-4 py-2 bg-gradient-to-t from-gray-200 to-gray-100 focus:from-gray-100 focus:to-gray-200 border border-gray-300 rounded-md text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-700 focus:text-gray-900 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsTypeButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			{% if sort=="hot" %}<i class="fas fa-fire text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
 			{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
 			{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
@@ -55,37 +55,37 @@
 		</button>
 		<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsTypeButton" x-placement="bottom-start">
 			<li class="{% if sort == 'top' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=top&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=top&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-arrow-alt-circle-up fa-sm fa-fw mr-4"></i>Top
 				</a>
 			</li>
 			<li class="{% if sort == 'bottom' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=bottom&q={{query | urlencode}}&t={{t}}}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=bottom&q={{query | urlencode}}&t={{t}}}">
 					<i class="fas fa-arrow-alt-circle-down fa-sm fa-fw mr-4"></i>Bottom
 				</a>
 			</li>
 			<li class="{% if sort == 'new' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=new&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=new&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-sparkles fa-sm fa-fw mr-4"></i>New
 				</a>
 			</li>
 			<li class="{% if sort == 'old' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=old&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=old&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-book fa-sm fa-fw mr-4"></i>Old
 				</a>
 			</li>
 			<li class="{% if sort == 'controversial' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=fiery&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=fiery&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-bullhorn fa-sm fa-fw mr-4"></i>Controversial
 				</a>
 			</li>
 			<li class="{% if sort == 'comments' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=comments&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=comments&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-comments fa-sm fa-fw mr-4"></i>Comments
 				</a>
 			</li>
 			<li class="{% if sort == 'random' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=random&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=random&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-question fa-sm fa-fw mr-4"></i>Random
 				</a>
 			</li>