diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index fc0695dc6..99e5a9dd3 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -3397,6 +3397,7 @@ small, .small {
 .profile-pic-20-wrapper,
 .profile-pic-30-wrapper,
 .profile-pic-35-wrapper,
+.profile-pic-50-wrapper,
 .profile-pic-65-wrapper,
 .profile-pic-72-wrapper,
 .profile-pic-100-wrapper {
@@ -3408,6 +3409,7 @@ small, .small {
 .profile-pic-20-hat,
 .profile-pic-30-hat,
 .profile-pic-35-hat,
+.profile-pic-50-hat,
 .profile-pic-65-hat,
 .profile-pic-72-hat,
 .profile-pic-100-hat {
@@ -3419,12 +3421,14 @@ small, .small {
 .profile-pic-20-wrapper  { width:  20px; height:  20px; }
 .profile-pic-30-wrapper  { width:  30px; height:  30px; }
 .profile-pic-35-wrapper  { width:  35px; height:  35px; }
+.profile-pic-50-wrapper  { width:  50px; height:  50px; }
 .profile-pic-65-wrapper  { width:  65px; height:  65px; }
 .profile-pic-72-wrapper  { width:  72px; height:  72px; }
 .profile-pic-100-wrapper { width: 100px; height: 100px; }
 .profile-pic-20-hat  { width:  20px; }
 .profile-pic-30-hat  { width:  30px; }
 .profile-pic-35-hat  { width:  35px; }
+.profile-pic-50-hat  { width:  50px; }
 .profile-pic-65-hat  { width:  65px; }
 .profile-pic-72-hat  { width:  72px; }
 .profile-pic-100-hat { width: 100px; }
diff --git a/files/templates/log.html b/files/templates/log.html
index 36cccf17c..5ced86fa2 100644
--- a/files/templates/log.html
+++ b/files/templates/log.html
@@ -100,8 +100,13 @@
 					<div class="d-flex align-items-center justify-content-center {{ma.color}} mr-3 rounded-lg flex-shrink-0" style="width: 32px;height: 32px;"><i class="far text-center {{ma.icon}} text-lg text-white fa-fw"></i></div>
 					<div class="d-flex align-items-center">
 						<span class="rounded">
-						<img loading="lazy" src="{{ma.user.profile_url}}" alt="avatar" class="profile-pic-35">
-					</span>
+							<div class="profile-pic-35-wrapper">
+								<img loading="lazy" src="{{ma.user.profile_url}}" alt="avatar" class="profile-pic-35">
+								{% if ma.user.hat_active -%}
+									<img id="profile-pic-35-hat" class="profile-pic-35-hat hat" loading="lazy" src="{{ma.user.hat_active}}?v=3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ma.user.hat_tooltip(v)}}">
+								{%- endif %}
+							</div>
+						</span>
 						<div class="text-muted pl-3">
 							<div>
 								<a href="{{ma.user.url}}" class="font-weight-bold text-black" target="_self">@{{ma.user.username}}</a>
diff --git a/files/templates/notifications.html b/files/templates/notifications.html
index 30f735c7f..7acea9b4f 100644
--- a/files/templates/notifications.html
+++ b/files/templates/notifications.html
@@ -75,8 +75,13 @@
 					<div class="d-flex align-items-center justify-content-center {{ma.color}} mr-3 rounded-lg flex-shrink-0" style="width: 32px;height: 32px;"><i class="far text-center {{ma.icon}} text-lg text-white fa-fw"></i></div>
 					<div class="d-flex align-items-center">
 						<span class="rounded">
-						<img loading="lazy" src="{{ma.user.profile_url}}" alt="avatar" class="profile-pic-35">
-					</span>
+							<div class="profile-pic-35-wrapper">
+								<img loading="lazy" src="{{ma.user.profile_url}}" alt="avatar" class="profile-pic-35">
+								{% if ma.user.hat_active -%}
+									<img id="profile-pic-35-hat" class="profile-pic-35-hat hat" loading="lazy" src="{{ma.user.hat_active}}?v=3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ma.user.hat_tooltip(v)}}">
+								{%- endif %}
+							</div>
+						</span>
 						<div class="text-muted pl-3">
 							<div>
 								<a href="{{ma.user.url}}" class="font-weight-bold text-black" target="_self">@{{ma.user.username}}</a>
@@ -97,7 +102,7 @@
 
 
 			{% else %}
-				<div>There's nothing here right now.</div>
+				<div class="p-3">There's nothing here right now.</div>
 			{% endfor %}
 		</div>
 		<div class="toast clipboard" id="toast-success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
diff --git a/files/templates/user_listing.html b/files/templates/user_listing.html
index 884857fd2..6d8d99daa 100644
--- a/files/templates/user_listing.html
+++ b/files/templates/user_listing.html
@@ -1,11 +1,16 @@
 
 {% for u in users %}
-
-<div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-4">
-	<div id="user-{{u.id}}" class="card h-100">
-		<div style="position: relative;"><img loading="lazy" src="{{u.banner_url}}" class="card-img-top" alt="@{{u.username}} user banner" height=175 style="object-fit: cover">
-
-			<img loading="lazy" src="{{u.profile_url}}" class="profile-pic-50 border-3 border-white" style="position: absolute; left: 15px; bottom: 15px; box-sizing: content-box;"></div>
+	<div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-4">
+		<div id="user-{{u.id}}" class="card h-100">
+			<div style="position: relative;">
+				<img loading="lazy" src="{{u.banner_url}}" class="card-img-top" alt="@{{u.username}} user banner" height=175 style="object-fit: cover">
+				<div class="profile-pic-50-wrapper" style="position: absolute; left: 15px; bottom: 15px; box-sizing: content-box;">
+					<img loading="lazy" src="{{u.profile_url}}" class="profile-pic-50 border-3 border-white">
+					{% if u.hat_active -%}
+						<img id="profile-pic-50-hat" class="profile-pic-50-hat hat" loading="lazy" src="{{u.hat_active}}?v=3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{u.hat_tooltip(v)}}">
+					{%- endif %}
+				</div>
+			</div>
 			<div class="card-body" style="word-wrap: break-word;">
 				<div class="d-flex flex-wrap justify-content-between align-items-center mb-1">
 
@@ -18,11 +23,10 @@
 						<div id="button-unsub-{{u.id}}" style="z-index: 2" class="{% if not u.has_follower(v) %} d-none{% endif %}"><a class="btn btn-secondary" role="button" onclick="post_toast(this,'/unfollow/{{u.username}}','button-sub-{{u.id}}','button-unsub-{{u.id}}','d-none')">Unfollow</a></div>
 						{% endif %}
 					{% else %}
-					<div id="button-sub-{{u.id}}" style="z-index: 2"><a class="btn btn-primary" href="/signup">Follow</a></div>
+						<div id="button-sub-{{u.id}}" style="z-index: 2"><a class="btn btn-primary" href="/signup">Follow</a></div>
 					{% endif %}
 				</div>
 
-
 				<span id="profile--joined">joined <span id="profile--joined--time" data-bs-toggle="tooltip" data-bs-placement="bottom" onmouseover="timestamp('profile--joined--time','{{u.created_utc}}')">{{u.created_date}}</span></span>
 
 				{% if v.admin_level >= 2 -%}
@@ -35,4 +39,4 @@
 			</div>
 		</div>
 	</div>
-	{% endfor %}
+{% endfor %}
\ No newline at end of file
diff --git a/files/templates/util/assetcache.html b/files/templates/util/assetcache.html
index 05024b73c..c59c318ab 100644
--- a/files/templates/util/assetcache.html
+++ b/files/templates/util/assetcache.html
@@ -1,6 +1,6 @@
 {%-
 set CACHE_VER = {
-	'css/main.css': 4003,
+	'css/main.css': 4004,
 	'css/catalog.css': 4000,
 	'css/4chan.css': 4000,
 	'css/classic.css': 4000,