diff --git a/app.js b/app.js
index 36f74cc..572c0a6 100644
--- a/app.js
+++ b/app.js
@@ -112,7 +112,7 @@ app.get("/browserFunctions.js", (request, response) => {
 });
 
 //all files in these folders can be accessed with a GET request of the filename
-let assetFolders = ["styles","pages","images","audio"];
+let assetFolders = ["styles","pages","images","audio","fonts"];
 assetFolders.forEach((folderName) => {
   let folderContents = fs.readdirSync(folderName);
   folderContents.forEach((fileName) => {
diff --git a/fonts/Twoson.eot b/fonts/Twoson.eot
new file mode 100644
index 0000000..89ce5eb
Binary files /dev/null and b/fonts/Twoson.eot differ
diff --git a/fonts/Twoson.ttf b/fonts/Twoson.ttf
new file mode 100644
index 0000000..9ee6b79
Binary files /dev/null and b/fonts/Twoson.ttf differ
diff --git a/fonts/Twoson.woff b/fonts/Twoson.woff
new file mode 100644
index 0000000..6768d70
Binary files /dev/null and b/fonts/Twoson.woff differ
diff --git a/fonts/Twoson.woff2 b/fonts/Twoson.woff2
new file mode 100644
index 0000000..f5e6b59
Binary files /dev/null and b/fonts/Twoson.woff2 differ
diff --git a/pages/home.html b/pages/home.html
index 1ffb8af..d1109d9 100644
--- a/pages/home.html
+++ b/pages/home.html
@@ -3,6 +3,7 @@
 	<head>
 		<title>The cooler buzzer website</title>
 		<link rel="stylesheet" href="styleMain.css">
+		<!-- <link rel="preload" href="Twoson.woff2" as="font" type="font/woff2" crossorigin> -->
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 		<!-- <script src="https:/socket.io/socket.io.js"></script> -->
 		<script>
@@ -41,7 +42,7 @@
 			<br>
 			Your name, please:
 			<br>
-			<input type="text" id="userName" placeholder="User name">
+			<input type="text" id="userName" placeholder="User name" style="margin-top: 10px; width: 240px;">
 			<br>
 			<br>
 			Then pick a team:
diff --git a/pages/host.html b/pages/host.html
index 90e8e53..3d504f1 100644
--- a/pages/host.html
+++ b/pages/host.html
@@ -3,6 +3,7 @@
 	<head>
 		<title>The cooler buzzer website</title>
 		<link rel="stylesheet" href="styleMain.css">
+		<!-- <link rel="preload" href="Twoson.woff2" as="font" type="font/woff2" crossorigin> -->
 		<script src="browserFunctions.js"></script>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 		<script src="http:/socket.io/socket.io.js"></script>
@@ -55,12 +56,12 @@
 			<p id="currentTeam"></p>
 			Progress:
 			<p id="currentScore"></p>			
-			<button id="plus0" type="button" style="width: 226px; height: 50px; margin: 5px;">+0 Points</button>
+			<button id="plus0" type="button" style="width: 230px; height: 50px; margin: 5px;">+0 Points</button>
 			<br>
 			<button id="plus1" type="button" style="width: 110px; height: 50px;">+1 Point</button>
 			<button id="plus2" type="button" style="width: 110px; height: 50px;">+2 Points</button>
-			<p style="font-size: 15px; margin: 5px;">(all points buttons clear buzzers)</p>
-			<br>
+			<p style="font-size: 11px; margin: 5px;">(all points buttons clear buzzers)</p>
+			<!-- <br> -->
 			<p id="firstBuzz"></p>
 			<br><br><br>
 			<button id="unregisterUsers" type="button" style="height: 30px;">Remove all players</button>
diff --git a/pages/play.html b/pages/play.html
index 182e7f9..4e0a61e 100644
--- a/pages/play.html
+++ b/pages/play.html
@@ -3,9 +3,11 @@
 	<head>
 		<title>The cooler buzzer website</title>
 		<link rel="stylesheet" href="styleMain.css">
+		<!-- <link rel="preload" href="Twoson.woff2" as="font" type="font/woff2" crossorigin> -->
 		<script src="browserFunctions.js"></script>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 		<script src="http:/socket.io/socket.io.js"></script>
+	
 		<script>
 			$(document).ready(function() {
 				var socket = io();
diff --git a/styles/styleMain.css b/styles/styleMain.css
index 975011e..be231e2 100644
--- a/styles/styleMain.css
+++ b/styles/styleMain.css
@@ -1,10 +1,21 @@
+
+
 body {
+    font-family: 'Twoson';
     color: rgb(255, 255, 255);
     background-color: rgb(23, 23, 23);
     font-size: 25px;
     padding: 20px 60px;
 }
 
+button {
+    font-family: 'Twoson';
+}
+
+input {
+    font-family: 'Twoson';
+}
+
 a, a:visited {
     color: rgb(199, 147, 255);
 }
@@ -22,13 +33,22 @@ a, a:visited {
 }
 
 #PlayersList {
+    /* font-family: "Lucida Console"; */
     position: absolute;
-    left: 200px;
+    left: 110px;
+    border: dashed;
+    width: 350px;
+    min-height: 130px;
+    padding-left: 5px;
 }
 
 #ChasersList {
     position: absolute;
-    left: 800px;
+    left: 724px;
+    border: dashed;
+    width: 350px;
+    min-height: 130px;
+    padding-left: 5px;
 }
 
 ul {
@@ -71,12 +91,26 @@ ul {
         top: 80px;
         width: 500px;
         margin-left: -250px;
-        font-size: 15px;
+        font-size: 11px;
     }
     #PlayersList {
-        left: 10px;
+        left: 0px;
+        width: 120px;
     }
     #ChasersList {
-        left: 350px;
+        left: 370px;
+        width: 120px;
     }
 }
+
+@font-face {
+    font-family: 'Twoson';
+    src: url('Twoson.eot');
+    src: url('Twoson.eot?#iefix') format('embedded-opentype'),
+        url('Twoson.woff2') format('woff2'),
+        url('Twoson.woff') format('woff'),
+        url('Twoson.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
\ No newline at end of file
