diff --git a/static/koboldai.css b/static/koboldai.css
index 463fbebf..440044bf 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -2322,9 +2322,10 @@ body {
 }
 
 /* Substitutions */
-#Substitutions > .helpicon {
-	margin-left: 5px;
-	align-self: auto;
+#Substitutions > .help_text > .helpicon {
+	position: relative;
+	margin-left: 1px;
+	top: 2px;
 }
 
 #substitution-header {
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index 15087064..3bbb445c 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -311,9 +311,11 @@
 		</div>
 
 		<div class="setting_tile_area" id="Substitutions">
-			<div class="help_text">Automatically replaces phrases that you or the AI insert.</div>
+			<div class="help_text">
+				Automatically replaces phrases that you or the AI insert.
+				<span class="helpicon material-icons-outlined" tooltip="Can be used to help you insert special characters or automatically correct the AI. The pencil button toggles if a substitution is active or not.">help_icon</span>
+			</div>
 
-			<span class="helpicon material-icons-outlined" tooltip="Can be used to help you insert special characters or automatically correct the AI. The pencil button toggles if a substitution is active or not.">help_icon</span> 
 			<div id="substitution-header" class="noselect">
 				<b>Replace</b> <b>With</b>
 			</div>