diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 869d6ed..4c38f74 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -31,6 +31,7 @@ There are only 5 simple rules!
 4. If the previous player manages to flip over their claimed number of black cards, you must choose a card from your stack to give up. Otherwise, the previous player must choose one of their cards to give up.
 
 5. If you give up all your cards, you lose! Last player remaining wins!
+
 `;
 
 function useForceUpdate(){
@@ -87,9 +88,9 @@ export default function Game() {
 	if (!loggedIn) {
 		return (
 			<>
-				<pre>
+				<div>
 					{rules}
-				</pre>
+				</div>
 				<LoginForm
 					socket={socket}
 					finish={(s) => {
@@ -135,9 +136,16 @@ export default function Game() {
 	if (gameState.phase === 0) {
 		return (
 			<>
-				<pre>
+				<button
+					onClick={() => {
+						document.getElementById('Rules')!.style.display = (document.getElementById('Rules')!.style.display === 'none' ? 'block' : 'none');
+					}}
+				>
+					Show/hide rules
+				</button>
+				<div id='Rules' style={{display: 'none'}}>
 					{rules}
-				</pre>
+				</div>
 				<ul>
 					{gameState.players.map(p => (
 						<li key={p.username}>
@@ -184,9 +192,16 @@ export default function Game() {
 	if (gameState.phase === 1) {
 		return (
 			<>
-				<pre>
+				<button
+					onClick={() => {
+						document.getElementById('Rules')!.style.display = (document.getElementById('Rules')!.style.display === 'none' ? 'block' : 'none');
+					}}
+				>
+					Show/hide rules
+				</button>
+				<div id='Rules' style={{display: 'none'}}>
 					{rules}
-				</pre>
+				</div>
 				<ul>
 					{gameState.players.map(p => (
 						<li key={p.username}>
@@ -230,9 +245,16 @@ export default function Game() {
 	if (gameState.phase === 2) {
 		return (
 			<>
-				<pre>
+				<button
+					onClick={() => {
+						document.getElementById('Rules')!.style.display = (document.getElementById('Rules')!.style.display === 'none' ? 'block' : 'none');
+					}}
+				>
+					Show/hide rules
+				</button>
+				<div id='Rules' style={{display: 'none'}}>
 					{rules}
-				</pre>
+				</div>
 				<ul>
 					{gameState.players.map(p => (
 						<li key={p.username}>
@@ -270,9 +292,16 @@ export default function Game() {
 	if (gameState.phase === 3) {
 		return (
 			<>
-				<pre>
+				<button
+					onClick={() => {
+						document.getElementById('Rules')!.style.display = (document.getElementById('Rules')!.style.display === 'none' ? 'block' : 'none');
+					}}
+				>
+					Show/hide rules
+				</button>
+				<div id='Rules' style={{display: 'none'}}>
 					{rules}
-				</pre>
+				</div>
 				<ul>
 					{gameState.players.map(p => (
 						<li key={p.username}>
diff --git a/front/styles/globals.css b/front/styles/globals.css
index e5e2dcc..23e8664 100644
--- a/front/styles/globals.css
+++ b/front/styles/globals.css
@@ -14,3 +14,7 @@ a {
 * {
   box-sizing: border-box;
 }
+
+div {
+  white-space: pre-line;
+}