diff --git a/files/templates/settings_security.html b/files/templates/settings_security.html
index 454ae5b33..db3c5d89f 100644
--- a/files/templates/settings_security.html
+++ b/files/templates/settings_security.html
@@ -11,7 +11,7 @@
 
 			<h2 class="h5">Email</h2>
 
-			<p class="text-small text-muted">Change the email address used to sign in to your account.</p>
+			<p class="text-sm text-gray-500">Change the email address used to sign in to your account.</p>
 			<div class="settings-section rounded">
 				<form	action="/settings/security" method="post">
 					<input type="hidden" name="formkey" value="{{v.formkey}}">
@@ -22,9 +22,9 @@
 								<input class="form-input" id="new_email" {% if v.email %}placeholder="{{v.email}}"{% else %}placeholder="Your email"{% endif %}
 								aria-describedby="new_email" type="email" name="new_email" required>
 								{% if v.email and not v.is_activated %}
-								<div class="text-danger text-small-extra mt-1" id="email-verify-text">Email not verified. You will not be able to recover your account with this email until you verify it. <u><a href="javascript:void(0)" onclick="post_toast('/verify_email');emailVerifyText();" class="text-danger">Verify now.</a></u></div>
+								<div class="text-danger text-xs mt-1" id="email-verify-text">Email not verified. You will not be able to recover your account with this email until you verify it. <u><a href="javascript:void(0)" onclick="post_toast('/verify_email');emailVerifyText();" class="text-danger">Verify now.</a></u></div>
 								{% elif not v.email %}
-								<div class="text-danger text-small-extra mt-1" id="email-verify-text">Add an email to secure your account in case you forget your password.</div>
+								<div class="text-danger text-xs mt-1" id="email-verify-text">Add an email to secure your account in case you forget your password.</div>
 								{% endif %}
 							</div>
 						</div>
@@ -32,23 +32,23 @@
 							<label for="email-password" class="w-lg-25 hidden" id="email-password-label">Password</label>
 							<div class="w-lg-100">
 								<input autocomplete="new-password" type="password" class="form-input mb-2 hidden" id="email-password" name="password" autocomplete="off" required>
-								<small id="emailpasswordRequired" class="form-text font-weight-bold text-danger hidden mt-1">Password required to update your email.</small>
+								<small id="emailpasswordRequired" class="form-text font-bold text-danger hidden mt-1">Password required to update your email.</small>
 							</div>
 						</div>
-						<small id="emailpasswordRequired" class="form-text font-weight-bold text-danger hidden mt-1">Password required to update your email.</small>
+						<small id="emailpasswordRequired" class="form-text font-bold text-danger hidden mt-1">Password required to update your email.</small>
 					</div>
 					<div class="footer">
-						<div class="d-flex">
-							<a class="btn btn-success" href="javascript:void(0)" onclick="post_toast('/settings/gumroad')">Claim paypig rewards</a>
+						<div class="flex">
+							<a class="btn btn-gray" href="javascript:void(0)" onclick="post_toast('/settings/gumroad')">Claim paypig rewards</a>
 							{% if v.email %}
-							<input class="btn btn-primary ml-auto"
+							<input class="btn btn-green ml-auto"
 							type="submit" value="Update email">
 							{% else %}
-							<input class="btn btn-primary ml-auto"
+							<input class="btn btn-green ml-auto"
 							type="submit" value="Add email">
 							{% endif %}
 						</div>
-						<span class="text-small-extra text-muted pl-1">Must be same email as gumroad</span>
+						<span class="text-xs text-gray-500 pl-1">Must be same email as gumroad</span>
 					</div>
 				</form>
 			</div>
@@ -57,7 +57,7 @@
 
 			<h2 class="h5">Password</h2>
 
-			<p class="text-small text-muted">Change your account password.</p>
+			<p class="text-sm text-gray-500">Change your account password.</p>
 
 			<div class="settings-section rounded">
 
@@ -73,11 +73,11 @@
 							aria-describedby="new_password" type="password" name="new_password" autocomplete="off"
 							required>
 							<small id="passwordHelpChange"
-							class="form-text font-weight-bold text-muted hidden mt-1 w-lg-100">Minimum of 8
+							class="form-text font-bold text-gray-500 hidden mt-1 w-lg-100">Minimum of 8
 							characters
 						required.</small>
 						<small id="passwordHelpChangeSuccess"
-						class="form-text font-weight-bold text-success hidden mt-1 w-lg-100">Your password
+						class="form-text font-bold text-success hidden mt-1 w-lg-100">Your password
 						meets the
 						requirements.
 					</small>
@@ -93,10 +93,10 @@
 					required>
 
 					<small id="passwordHelpCnf"
-					class="form-text font-weight-bold text-muted hidden mt-1 w-lg-100">Passwords do not
+					class="form-text font-bold text-gray-500 hidden mt-1 w-lg-100">Passwords do not
 				match.</small>
 				<small id="passwordHelpCnfSuccess"
-				class="form-text font-weight-bold text-success hidden mt-1 w-lg-100">Passwords match.
+				class="form-text font-bold text-success hidden mt-1 w-lg-100">Passwords match.
 			</small>
 
 		</div>
@@ -118,9 +118,9 @@
 		<input type="hidden" name="formkey" value="{{v.formkey}}">
 		<input type="hidden" name="now" value="1563891643">
 
-		<div class="d-flex">
+		<div class="flex">
 
-			<input class="btn btn-primary ml-auto"
+			<input class="btn btn-green ml-auto"
 			type="submit" value="Change Password">
 
 		</div>
@@ -134,7 +134,7 @@
 
 <h2 class="h5">Two-Factor Authentication</h2>
 
-<p class="text-small text-muted">Change the two-factor settings for your account.</p>
+<p class="text-sm text-gray-500">Change the two-factor settings for your account.</p>
 
 <div class="settings-section rounded">
 
@@ -151,7 +151,7 @@
 				<label class="custom-control-label" for="2faToggle"></label>
 			</div>
 
-			<span class="text-small-extra text-muted">This requires entering a randomly-generated, 6-digit code and your password to login. See <a href="javascript:void(0)">Google Authenticator</a> or <a href="javascript:void(0)">Authy</a> for more details.</span>
+			<span class="text-xs text-gray-500">This requires entering a randomly-generated, 6-digit code and your password to login. See <a href="javascript:void(0)">Google Authenticator</a> or <a href="javascript:void(0)">Authy</a> for more details.</span>
 
 		</div>
 
@@ -161,7 +161,7 @@
 
 <h2 class="h5">Log Out Everywhere</h2>
 
-<p class="text-small text-muted">Log all other devices out of your {{'SITE_NAME' | app_config}} account.</p>
+<p class="text-sm text-gray-500">Log all other devices out of your {{'SITE_NAME' | app_config}} account.</p>
 
 <div class="settings-section rounded">
 
@@ -188,9 +188,9 @@
 
 		<div class="footer">
 
-			<div class="d-flex">
+			<div class="flex">
 
-				<input class="btn btn-primary ml-auto"
+				<input class="btn btn-green ml-auto"
 				type="submit" value="Log out everywhere">
 
 			</div>