diff --git a/files/templates/settings_profile.html b/files/templates/settings_profile.html
index 61af3e913..c0a430627 100644
--- a/files/templates/settings_profile.html
+++ b/files/templates/settings_profile.html
@@ -8,7 +8,7 @@
 			<!-- Avatar section -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Avatar</h2>
+					<h2 class="label">Avatar</h2>
 					<div class="flex flex-col md:flex-row gap-3">
 						<!-- Avatar -->
 						<img loading="lazy" src="{{v.profile_url}}" class="flex-shrink-0 w-14 h-14 rounded object-cover">
@@ -44,7 +44,7 @@
 				</div>
 				<!-- Banner section -->
 				<div class="px-4 py-4 shadow-inset-t-white-10">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Banner</h2>
+					<h2 class="label">Banner</h2>
 					<div class="flex flex-col md:flex-row gap-3">
 						<!-- Avatar -->
 						<img loading="lazy" src="{{v.profile_url}}" class="flex-shrink-0 w-48 h-20 rounded object-cover">
@@ -123,7 +123,7 @@
 			</div> -->
 
 			<div class="rounded-lg bg-gray-100 border border-gray-300 shadow-inset-t-white-10 p-4">
-				<h2 class="font-bold text-lg font-heading leading-normal mb-2">Linked accounts</h2>
+				<h2 class="label">Linked accounts</h2>
 				<div class="flex flex-col space-y-2 divide-y divide-y-800">
 					<div>
 						{% if v.discord_id %}
@@ -150,7 +150,7 @@
 			<!-- Referral & RSS -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Referral code</h2>
+					<h2 class="label">Referral code</h2>
 					<input type="text" onclick="this.select()" value="{{request.host_url}}signup?ref={{v.username}}" class="p-0.5 bg-gray-900 border border-gray-900 text-xs text-gray-300 rounded-sm w-72">
 					<small class="block mt-1 text-gray-400">
 						You have referred <strong>{{v.referral_count}}</strong> members.
@@ -158,7 +158,7 @@
 					</small>
 				</div>
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">RSS Feed</h2>
+					<h2 class="label">RSS Feed</h2>
 					<input type="text" onclick="this.select()" value="{{('/rss/hot/all') | full_link}}" class="p-0.5 bg-gray-900 border border-gray-900 text-xs text-gray-300 rounded-sm w-44">
 					<small class="block mt-1 text-gray-400">
 						You can change the feed by replacing <strong>hot</strong> with whatever sorting you want and <strong>all</strong> with whatever time filter you want.
@@ -169,7 +169,7 @@
 			<!-- Profile Username -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Username</h2>
+					<h2 class="label">Username</h2>
 					<form action="/settings/name_change" method="post">
 						<input type="hidden" name="formkey" value="{{v.formkey}}">
 						<input type="text" name="name" class="block rounded shadow-inner px-2 py-1.5 text-gray-500 bg-gray-900 border border-gray-900 focus:bg-white focus:text-gray-900" value="{{v.username}}">
@@ -187,7 +187,7 @@
 			<!-- Profile Anthem -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Profile Anthem</h2>
+					<h2 class="label">Profile Anthem</h2>
 					<form action="/settings/song_change" method="post">
 						<input type="hidden" name="formkey" value="{{v.formkey}}">
 						<div class="w-full md:w-80">
@@ -204,7 +204,7 @@
 			<!-- Username Color -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Username Color</h2>
+					<h2 class="label">Username Color</h2>
 					<form action="/settings/namecolor" id="color-code-form" method="post">
 						<input type="hidden" name="formkey" value="{{v.formkey}}">
 						<div class="w-full md:w-44">
@@ -221,7 +221,7 @@
 			<!-- Flair -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Flair</h2>
+					<h2 class="label">Flair</h2>
 					<form id="profile-settings" action="/settings/title_change" method="post">
 						<input type="hidden" name="formkey" value="{{v.formkey}}">
 						<input id="customtitlebody" type="text" name="title" class="rounded shadow-inner px-2 py-1.5 text-gray-500 bg-gray-900 border border-gray-900 focus:bg-white focus:text-gray-900" placeholder='Enter a flair here' value="{% if v.customtitleplain %}{{v.customtitleplain}}{% endif %}">
@@ -240,7 +240,7 @@
 			<!-- Title Color -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Flair Color</h2>
+					<h2 class="label">Flair Color</h2>
 					<form action="/settings/titlecolor" id="color-code-form" method="post">
 						<input type="hidden" name="formkey" value="{{v.formkey}}">
 						<input class="block rounded shadow-inner px-2 py-1.5 text-gray-500 bg-gray-900 border border-gray-900 focus:bg-white focus:text-gray-900" type="text" name="color" id="color-code" maxlength="6" value="{% if v.titlecolor %}{{v.titlecolor}}{% endif %}">
@@ -255,7 +255,7 @@
 			<!-- Bluecheck Color -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Bluecheck Color</h2>
+					<h2 class="label">Bluecheck Color</h2>
 					<form action="/settings/titlecolor" id="color-code-form" method="post">
 						<input type="hidden" name="formkey" value="{{v.formkey}}">
 						<input class="block rounded shadow-inner px-2 py-1.5 text-gray-500 bg-gray-900 border border-gray-900 focus:bg-white focus:text-gray-900" type="text" name="color" id="color-code" maxlength="6" value="{% if v.titlecolor %}{{v.titlecolor}}{% endif %}">
@@ -269,7 +269,7 @@
 
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Bio</h2>
+					<h2 class="label">Bio</h2>
 					<form id="profile-bio" action="/settings/profile" method="post" enctype="multipart/form-data">
 						<input type="hidden" name="formkey" value="{{v.formkey}}">
 						<div class="input-group mb-2">
@@ -329,7 +329,7 @@
 			<!-- Privacy -->
 			<div class="rounded-lg divide-y divide-gray-300 bg-gray-100 border border-gray-300 shadow-inset-t-white-10">
 				<div class="px-4 py-4">
-					<h2 class="font-bold text-lg font-heading leading-normal mb-2">Privacy</h2>
+					<h2 class="label">Privacy</h2>
 					<div class="mb-4">
 						<input type="checkbox" id="privateswitch" name="private"{% if v.is_private%} checked{% endif %} onchange="post_toast('/settings/profile?private='+document.getElementById('privateswitch').checked)">
 						<label for="privateswitch" class="inline-block pl-2 text-gray-400">Hide my posts and comments from others and search engines.</label>