diff --git a/scripts/game.mjs b/scripts/game.mjs
index ba36f18..5b63f3c 100644
--- a/scripts/game.mjs
+++ b/scripts/game.mjs
@@ -10,9 +10,8 @@ export class Game {
     this.world = new World(options)
   }
 
-  addPlayer(id, name) {
+  addPlayer(id, name, color) {
     if (this.getAllNames().includes(name)) return false
-    var color = 1
     const player = new Player(id, name, color);
     this.players.push(player);
     return player
diff --git a/scripts/roomManager.mjs b/scripts/roomManager.mjs
index 112cd24..6ac18de 100644
--- a/scripts/roomManager.mjs
+++ b/scripts/roomManager.mjs
@@ -62,14 +62,14 @@ class RoomManager {
     return [game, player]
   }
 
-  playerCreateGame(options, playerName, playerID) {
+  playerCreateGame(options, playerName, playerColor, playerID) {
     if (this.getAllPlayerIDs().includes(playerID)) {
       return new IllegalAction(id, 22)
     }
     console.log(options)
     const id = util.createCode()
     const game = this.addGame(id, options)
-    const player = game.addPlayer(playerID, playerName);
+    const player = game.addPlayer(playerID, playerName, playerColor);
     return [game, player]
 
   }
diff --git a/scripts/server/netcode.mjs b/scripts/server/netcode.mjs
index 6e17c49..b4ab6e0 100644
--- a/scripts/server/netcode.mjs
+++ b/scripts/server/netcode.mjs
@@ -48,7 +48,7 @@ function connected(client) {
     })
 
     client.on('createGame', function(data){
-        const info = roomManager.playerCreateGame(data.options, data.name, client.id)
+        const info = roomManager.playerCreateGame(data.options, data.name, data.color, client.id)
         client.join(info[0].id)
         client.game = info[0];
         client.player = info[1]
diff --git a/www/game.html b/www/game.html
index a2e5ab0..8250d6f 100644
--- a/www/game.html
+++ b/www/game.html
@@ -36,7 +36,7 @@
         <input type="text" id="joinGameUsername" value="bob">
         <button type="button" id="joinGameButton">Join</button>
       </div>
-      <div id="createGame" >
+      <div id="createGame" style="display: none;">
           <h2>Create Room</h2>
           <hr>
           <div class="leftRight">
@@ -54,6 +54,7 @@
           <span class="centerBar"></span>
           <div class="right">
             <h3>Game Settings</h3>
+            
               <div class="row">
               <span>Percentage mines</span>
               <div class="sliderContainer">
diff --git a/www/scripts/interface/mainmenu/create.js b/www/scripts/interface/mainmenu/create.js
index 56b732c..d7a27a7 100644
--- a/www/scripts/interface/mainmenu/create.js
+++ b/www/scripts/interface/mainmenu/create.js
@@ -7,23 +7,12 @@ import * as status from "/scripts/net/status.js"
 
 var menuPicker, colorPicker;
 
-
-
-
 export function init(){
   colorPicker = new Picker("createGameSelectColorBar", tileArray, [8, 16], null, 0, null)
   menuPicker = new Picker ("createGameSelectModeBar", menuArray, [0,4], "wide", 0, updateMenu)
   changeMode()
 }
 
-
-
-
-
-
-
-
-
 ID("createRoomButton").addEventListener("click", e => {
 	create(e)
 	// picker.destroy("createGameSelectColorBar")
@@ -48,14 +37,18 @@ menuPicker.select(3)
 
 heightBox.addEventListener("change", function(){
 	updateCount(2)
+  widthBox.value = Math.abs(Math.round(heightBox.value))
 	menuPicker.select(3)
 })
 
 widthBox.addEventListener("change", function(){
   updateCount(2)
+  widthBox.value = Math.abs(Math.round(widthBox.value))
 	menuPicker.select(3)
 })
 
+
+
 var mines = 5;
 var mode = 0;
 
@@ -97,29 +90,31 @@ function updateCount(mode) {
 
 	const max = maxMines(width, height)
 	const min = minMines(width, height)
+  console.log(max, min)
 	if (mode === 0) {
-			mines = Math.ceil((mineSlider.value/10) * (width*height) /100)
-			updateCount(2)
-		}
-	 else if (mode === 1) {
-			mineBox.value = Math.abs(Math.round(mineBox.value))
-			mines = mineBox.value;
+			mines = Math.round((mineSlider.value/10) * (width*height) /100)
+      console.log(mines, mineBox.value)
 			updateCount(2)
 		}
+   else if (mode === 1) {
+		mineBox.value = Math.abs(Math.round(mineBox.value))
+		mines = mineBox.value;
 
-		else if (mode === 2) {
+		updateCount(2)
+   }
 
-			if (mines > max) {
-				mines = max
-			}
-			if (mines < min) {
-				mines = min
-			}
-			percentage = Math.floor((mines / (width * height)) * 1000)/ 10
-			mineBox.value = mines;
-			mineSlider.value = percentage * 10
-			updatePercentageLabel(percentage)
-		}
+    else if (mode === 2) {
+    	if (mines > max) {
+    		mines = max
+    	}
+    	if (mines < min) {
+    		mines = min
+    	}
+    	percentage = Math.floor((mines / (width * height)) * 1000)/ 10
+    	mineBox.value = mines;
+    	mineSlider.value = percentage * 10
+    	updatePercentageLabel(percentage)
+}
 
 
 }
@@ -130,7 +125,7 @@ function maxMines(width, height) {
 }
 
 function minMines(width, height) {
-	return (width * height) / 10
+	return Math.floor((width * height) / 10)
 }
 
 function updatePercentageLabel(percentage) {
@@ -143,6 +138,7 @@ function create(event) {
 	const mines = ID("createGameOptionsMines").value
 	const width = widthBox.value;
 	const height = heightBox.value;
+  const color = colorPicker.selected
 	if (name == '' || mines == '' || width == '' || height == '' || status.get() == 'disconnected') return
 	const options = {
 		mines: mines,
@@ -152,6 +148,7 @@ function create(event) {
 	const data =
 	{
 		name: name,
+    color: color,
 		options: options
 	}
 	console.log(data)
diff --git a/www/style.css b/www/style.css
index 065d195..406c7b3 100644
--- a/www/style.css
+++ b/www/style.css
@@ -1,5 +1,12 @@
+@font-face {
+  /* font-weight: 500; */
+  font-family: "moderndos";
+  src: url('fonts/moderndos.woff2') format('woff2'),
+       url('fonts/moderndos.ttf') format('truetype');
+}
+
 * {
-  font-family: pixserif;
+  font-family: moderndos;
 }
 
 h1, h2 {
@@ -59,7 +66,7 @@ hr {
 .right {
   display: inline;
   margin: 40px;
-  /* background: red; */
+  /* background: orange; */
 
 }
 
@@ -75,9 +82,9 @@ hr {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-    color: black;
-    font-size: 1.7em;
-    pointer-events: none;
+  color: black;
+  font-size: 1.7em;
+  pointer-events: none;
 }
 
 .sliderContainer {
@@ -111,7 +118,7 @@ hr {
 }
 
 input[type=button], button, .buttonLink {
-  width: 100%;
+  width: 50%;
   background-color: #4CAF50;
   color: white;
   padding: 14px 20px;
@@ -130,12 +137,7 @@ input[type=button], button, .buttonLink {
     background-color: lightgray; }
 
 
-@font-face {
-  /* font-weight: 500; */
-  font-family: "pixserif";
-  src: url('fonts/moderndos.woff2') format('woff2'),
-       url('fonts/moderndos.ttf') format('truetype');
-}
+
 span.button > img {
   pointer-events: none;
   image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
@@ -169,10 +171,7 @@ span.button {
   width:90px;
   height:90px;
   margin: 5px 5px 5px 5px;
-  vertical-align: middle;
-  border-radius: 3px;
-  white-space: normal;
-  align-items: center;
+  border-radius: 1px;
   cursor: pointer;
 
 }
@@ -197,24 +196,6 @@ span.button:hover {
 
 }
 
-#wrapper {
-
-  /* display: flex; */
-  /* justify-content: right; */
-  /* left: 50%; */
-  /* transform: translate(-50%, 0); */
-  /* position: absolute; */
-  background: khaki;
-  width: 750px;
-  height: 750px;
-}
-
-#wrapwrap {
-  display: block;
-  margin: 0 auto;
-  margin-left: auto;
-  margin-right: auto;
-}
 
 main {