diff --git a/system/pages/experiencestages.php b/system/pages/experiencestages.php
index efa6c185..c5a14ef7 100644
--- a/system/pages/experiencestages.php
+++ b/system/pages/experiencestages.php
@@ -22,6 +22,7 @@ if(!isset($config['lua']['experienceStages']) || !getBoolean($config['lua']['exp
 
 	if(isset($stages)) {
 		foreach($stages->getElementsByTagName('config') as $node) {
+			/** @var DOMElement $node */
 			if($node->getAttribute('enabled'))
 				$enabled = true;
 		}
@@ -47,23 +48,15 @@ if(!$stages)
 	return;
 }
 
-echo '<div style="text-align:center"><h3>Experience stages</h3></div>
-<table bgcolor="'.$config['darkborder'].'" border="0" cellpadding="4" cellspacing="1" width="100%"><tbody>
-	<tr bgcolor="'.$config['vdarkborder'].'">
-		<td class="white" colspan="5"><b>Stages table</b></td>
-	</tr>
-	<tr><td>
-		<table border="0" cellpadding="2" cellspacing="1" width="100%"><tbody>
-			<tr bgcolor="'.$config['lightborder'].'"><td><b>Level</b></td><td><b>Stage</b></td></tr>';
-	foreach($stages->getElementsByTagName('stage') as $stage)
-	{
-		$maxlevel = $stage->getAttribute('maxlevel');
-	echo '<tr bgcolor="'.$config['lightborder'].'">
-	<td>'.$stage->getAttribute('minlevel') . '-'. (isset($maxlevel[0]) ? $maxlevel : '*') . '</td><td>x'.$stage->getAttribute('multiplier').'</td>
-</tr>';
+$stagesArray = [];
+foreach($stages->getElementsByTagName('stage') as $stage)
+{
+	/** @var DOMElement $stage */
+	$maxLevel = $stage->getAttribute('maxlevel');
+	$stagesArray[] = [
+		'levels' => $stage->getAttribute('minlevel') . (isset($maxLevel[0]) ? '-' . $maxLevel : '+'),
+		'multiplier' => $stage->getAttribute('multiplier')
+	];
 }
-	echo '
-		</tbody></table>
-	</td></tr>
-</tbody></table>';
-?>
+
+$twig->display('experience_stages.html.twig', ['stages' => $stagesArray]);
diff --git a/system/templates/experience_stages.html.twig b/system/templates/experience_stages.html.twig
new file mode 100644
index 00000000..a4f81d9b
--- /dev/null
+++ b/system/templates/experience_stages.html.twig
@@ -0,0 +1,30 @@
+<div style="text-align:center">
+	<h3>Experience stages</h3>
+</div>
+<table style="border: 0; background-color: {{ config.darkborder }}; width: 100%" cellpadding="4" cellspacing="1">
+	<tbody>
+		<tr style="background-color: {{ config.vdarkborder }}">
+			<td class="white" colspan="5"><b>Stages table</b></td>
+		</tr>
+		<tr>
+			<td>
+				<table style="border: 0; width: 100%" cellpadding="2" cellspacing="1"><tbody>
+					<tr style="background-color: {{ config.lightborder }}">
+						<td>
+							<b>Level</b>
+						</td>
+						<td>
+							<b>Stage</b>
+						</td>
+					</tr>
+					{% for stage in stages %}
+						<tr style="background-color: {{ config.lightborder }}">
+							<td>{{ stage.levels }}</td><td>x{{ stage.multiplier}}</td>
+						</tr>
+					{% endfor %}
+					</tbody>
+				</table>
+			</td>
+		</tr>
+	</tbody>
+</table>
\ No newline at end of file