diff --git a/files/templates/comments.html b/files/templates/comments.html
index b3c08f92b2..6becccb6a7 100644
--- a/files/templates/comments.html
+++ b/files/templates/comments.html
@@ -212,7 +212,7 @@
 						<div class="profile-pic-30-wrapper">
 							<img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-30 mr-2">
 							{% if c.author.hat_active -%}
-								<img class="profile-pic-30-hat" loading="lazy" src="/i/hats/{{c.author.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.hat_tooltip}}">
+								<img class="profile-pic-30-hat hat" loading="lazy" src="/i/hats/{{c.author.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.hat_tooltip}}">
 							{%- endif %}
 						</div>
 						<span {% if c.author.patron and not c.distinguish_level %}class="patron" style="background-color:#{{c.author.name_color}};"{% elif c.distinguish_level %}class="mod"{% endif %}>{{c.author_name}}</span>
diff --git a/files/templates/header.html b/files/templates/header.html
index 54fa873fcd..ded1d93d21 100644
--- a/files/templates/header.html
+++ b/files/templates/header.html
@@ -207,7 +207,7 @@
 							<div class="profile-pic-35-wrapper">
 								<img loading="lazy" src="{{v.profile_url}}" class="profile-pic-35">
 								{% if v.hat_active -%}
-									<img class="profile-pic-35-hat" loading="lazy" src="/i/hats/{{v.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{v.hat_tooltip}}">
+									<img class="profile-pic-35-hat hat" loading="lazy" src="/i/hats/{{v.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{v.hat_tooltip}}">
 								{%- endif %}
 							</div>
 							<div class="text-left pl-2">
diff --git a/files/templates/submission.html b/files/templates/submission.html
index 7376c9da4c..9df272d752 100644
--- a/files/templates/submission.html
+++ b/files/templates/submission.html
@@ -677,7 +677,7 @@
 								<div class="profile-pic-30-wrapper">
 									<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
 									{% if p.author.hat_active -%}
-										<img class="profile-pic-30-hat" loading="lazy" src="/i/hats/{{p.author.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.hat_tooltip}}">
+										<img class="profile-pic-30-hat hat" loading="lazy" src="/i/hats/{{p.author.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.hat_tooltip}}">
 									{%- endif %}
 								</div>
 								<span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.name_color}};"{% elif p.distinguish_level %}class="mod"{% endif %}>{{p.author_name}}</span>
diff --git a/files/templates/submission_listing.html b/files/templates/submission_listing.html
index b774957c4d..4638e8807c 100644
--- a/files/templates/submission_listing.html
+++ b/files/templates/submission_listing.html
@@ -213,7 +213,7 @@
 						<div class="profile-pic-30-wrapper">
 							<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
 							{% if p.author.hat_active -%}
-								<img class="profile-pic-30-hat" loading="lazy" src="/i/hats/{{p.author.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.hat_tooltip}}">
+								<img class="profile-pic-30-hat hat" loading="lazy" src="/i/hats/{{p.author.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.hat_tooltip}}">
 							{%- endif %}
 						</div>
 						<span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.name_color}};"{% elif p.distinguish_level %}class="mod"{% endif %}>{{p.author_name}}</span>
diff --git a/files/templates/userpage.html b/files/templates/userpage.html
index 769ddbaa9e..9db8149df9 100644
--- a/files/templates/userpage.html
+++ b/files/templates/userpage.html
@@ -38,11 +38,11 @@
 			<div class="w-100 my-3">
 				<div class="container-fluid nobackground">
 					<div class="d-md-flex text-center text-md-left">
-						<div id="profile--pfp" {% if u.hat_active %}class="profile--pfp--hat"{% endif %}>
+						<div id="profile--pfp" {% if u.hat_active %}class="profile--pfp--hat hat"{% endif %}>
 							<a rel="nofollow noopener noreferrer" href="{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}" class="profile-pic-100-wrapper">
 								<img onclick="expandDesktopImage('{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}')" loading="lazy" src="{{u.profile_url}}" class="profile-pic profile-pic-100 mb-5">
 								{% if u.hat_active -%}
-									<img onclick="expandDesktopImage('{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}')" class="profile-pic-100-hat" loading="lazy" src="/i/hats/{{u.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{u.hat_tooltip}}">
+									<img onclick="expandDesktopImage('{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}')" class="profile-pic-100-hat hat" loading="lazy" src="/i/hats/{{u.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{u.hat_tooltip}}">
 								{%- endif %}
 							</a>
 						</div>
@@ -407,7 +407,7 @@
 				<a rel="nofollow noopener noreferrer" href="{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}" class="profile-pic-65-wrapper">
 					<img onclick="expandDesktopImage('{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}')" loading="lazy" src="{{u.profile_url}}" class="profile-pic-65 bg-white border-2 border-white mb-2">
 					{% if u.hat_active -%}
-						<img onclick="expandDesktopImage('{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}')" class="profile-pic-65-hat" loading="lazy" src="/i/hats/{{u.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{u.hat_tooltip}}">
+						<img onclick="expandDesktopImage('{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}')" class="profile-pic-65-hat hat" loading="lazy" src="/i/hats/{{u.hat_active}}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{u.hat_tooltip}}">
 					{%- endif %}
 				</a>
 			</div>