diff --git a/main.py b/main.py
index 230072a..f9c392e 100644
--- a/main.py
+++ b/main.py
@@ -22,6 +22,12 @@ def home():
 def background():
     #return the background image
     return app.send_static_file('azul.webp')
+
+@app.route('/socket.io.js')
+def socketio_js():
+    #return the background image
+    return app.send_static_file('socket.io.js')
+
 @app.route('/azul-flake.png')
 def logo():
     #return the background image
diff --git a/templates/create.html b/templates/create.html
index 646a69f..4f3fb6d 100644
--- a/templates/create.html
+++ b/templates/create.html
@@ -10,40 +10,49 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            margin-left: 20vw;
-            width: 60vw;
-            /* removed due to low visibility */
-            /* background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; 
-            -webkit-background-size: cover;
-            -moz-background-size: cover;
-            -o-background-size: cover;
-            background-size: cover; */
+            margin-left: 10vw;
+            width: 80vw;
+            background-color: #000;
+            color: #fff;
+            color-scheme: dark;
+        }
+
+        div {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
+            width: 100%;
         }
 
         form {
-            margin-top: 20px;
-            width: 300px;
+            margin-top: 20vh;
+            max-width: 40em;
+            min-width: 300px;
             margin: 0 auto;
         }
 
         input[type="text"] {
-            padding: 10px;
-            margin-top: 10px;
+            padding: 1em;
+            margin-top: 1em;
             width: 100%;
             box-sizing: border-box;
-            border: 2px solid #000;
-            border-radius: 4px;
+            border: 0.5em solid #000;
+            border-radius: 1em;
         }
 
         input[type="submit"] {
-            padding: 10px;
-            margin-top: 10px;
+            padding: 1em;
+            margin-top: 3em;
             width: 100%;
             background-color: #0000FF;
             color: #fff;
             border: none;
-            border-radius: 4px;
+            border-radius: 1em;
             cursor: pointer;
+            box-shadow: 0px 0.1em 0.5em rgba(255, 255, 255, 0.333); /* Add some shadow for depth */
+            transition: background-color 0.3s ease;
         }
 
         input[type="submit"]:hover {
@@ -51,12 +60,12 @@
         }
 
         button {
-            padding: 10px;
-            margin-top: 10px;
+            padding: 1em;
+            margin-top: 1em;
             background-color: #0000FF;
             color: #fff;
             border: none;
-            border-radius: 4px;
+            border-radius: 0.5em;
             cursor: pointer;
         }
 
@@ -67,13 +76,16 @@
 </head>
 <body>
     {% if not game_id %}
+    <div>
+        <h1>Create Game</h1>
+        <h2>Fill in playernames for wanted players</h2>
+        <h3>Leave empty for no player ...</h3>
+    </div>
     <form method="POST" action="/create">
-        <div>Fill inn playernames for wanted players ...</div>
-        <div>Leave empty for no player ...</div>
         <input type="text" name="player1" placeholder="Player 1" required>
         <input type="text" name="player2" placeholder="Player 2" required>
-        <input type="text" name="player3" placeholder="Player 3" style="background-color: #D3D3D3;">
-        <input type="text" name="player4" placeholder="Player 4" style="background-color: #D3D3D3;">
+        <input type="text" name="player3" placeholder="Player 3" style="background-color: #2a2929;">
+        <input type="text" name="player4" placeholder="Player 4" style="background-color: #2a2929;">
         <!-- Add more input fields for more players -->
         <input type="submit" value="Create Game">
     </form>
diff --git a/templates/game.html b/templates/game.html
index 949979b..0856401 100644
--- a/templates/game.html
+++ b/templates/game.html
@@ -5,30 +5,74 @@
     <title>Ozai:game</title>
     <link rel="icon" type="image/png" href="/azul-flake.png">
     <style>
+        * {
+            --border-color: rgb(172, 172, 172);
+            --bg-transparency: 0.5;
+            --tile-size: 2em;
+        }
+
+        body {
+            background-color: #383737;
+            color: white;
+            color-scheme: dark;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+
         a {
+            padding: 1em;
             display: inline-block;
             text-decoration: none;
-            color: black;
-            background-color: #c3bfbf;
-            border-radius: 5px;
+            color: #aba4f6;
+            background-color: #1919a7;
+            border-radius: 1em;
             font-weight: bold;
             font-size: 1.5em; /* increase font size */
             
         }
         a:hover {
-            background-color: #868787;
+            background-color: #204ac8;
         }
+        input[type="submit"] {
+            border: none;
+            border-radius: 1em;
+            background-color: #3232d1;
+            padding: 1em;
+        }
+        input[type="submit"]:hover {
+            background-color: #3f3ff2;
+        }
+        select {
+            font-size: 1.5em;
+        }
+
+        .move_select {
+            display: flex;
+            justify-content: space-around;
+            flex-direction: row;
+            align-items: baseline;
+        }
+
         /* flexbox class */
         .flex-row {
             display: flex;
             justify-content: left;
             flex-direction: row;
             flex-wrap: wrap;
-            align-items:baseline;
+            align-items: baseline;
+        }
 
+        @media (max-width: 400px) {
+            .flex-row {
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
         }
         .flex-row > * {
-            margin-right: 5px;
+            margin-right: 1em;
         }
         .flex-col {
             display: flex;
@@ -38,7 +82,7 @@
 
         .factory {
             overflow: hidden;
-            border: 2px solid black;
+            border: 2px solid var(--border-color);
             border-radius: 30%;
             display: flex;
             justify-content: center;
@@ -47,13 +91,13 @@
             flex-direction: row;
             flex-wrap: wrap;
             
-            height: 5em;
-            width: 5em;
+            height: calc(var(--tile-size) * 3);
+            width: calc(var(--tile-size) * 3);
             
         }
         #market {
-            height: 10em;
-            width: 10em;
+            height: calc(var(--tile-size) * 6);
+            width: calc(var(--tile-size) * 6);
         }
         /* put the first element in the corner of the factory  */
         .factory-name {
@@ -63,7 +107,7 @@
             position: relative;
             top: 0;
             left: 0;
-            border: 2px solid black;
+            border: 2px solid var(--border-color);
             text-align: center;
             margin: 0.1em;
             width: 1.5em;
@@ -75,16 +119,23 @@
 
         .factory > * {
             border-radius: 10%;
-            border: 1px solid black;
+            border: 1px solid var(--border-color);
             text-align: center;
             margin: 0.1em;
-            width: 1.5em;
-            height: 1.5em;
+            width: var(--tile-size);
+            height: var(--tile-size);
             overflow: hidden;
             text-align: center;
             vertical-align: middle;
         }
 
+        .player_area {
+            border: 2px solid var(--border-color);
+            border-radius: 20px;
+            padding: 10px;
+            margin: 10px;
+        }
+
         .wall {
             /* 5*5 grid */
             display: grid;
@@ -93,9 +144,9 @@
             gap: 0.1em;
         }
         .wall > * {
-            border: 1px solid black;
-            width: 1.5em;
-            height: 1.5em;
+            border: 1px solid var(--border-color);
+            width: var(--tile-size);
+            height: var(--tile-size);
             text-align: center;
             margin-top: 0.1em;
         }
@@ -112,69 +163,85 @@
             align-items:baseline;
         }
         .pattern_line > * {
-            border: 1px solid black;
+            border: 1px solid var(--border-color);
             text-align: center;
             margin: 0.1em;
-            width: 1.5em;
-            height: 1.5em;
+            width: var(--tile-size);
+            height: var(--tile-size);
             overflow: hidden;
             text-align: center;
             vertical-align: middle;
         }
-        .floor {
+        .floor_container {
             display: flex;
             justify-content: left;
             flex-direction: row;
             align-items:baseline;
         }
-        .floor > * {
-            border: 1px solid black;
+        .floor {
+            border: 1px solid var(--border-color);
             text-align: center;
-            width: 1.5em;
-            height: 1.5em;
+            width: var(--tile-size);
+            height: var(--tile-size);
         }
+        .floor_value {
+            text-align: center;
+            width: var(--tile-size);
+        }
+
+        
 
         .blue_bg {
-            background-color: rgb(49, 157, 245, 0.5);
+            background-color: rgb(49, 157, 245, var(--bg-transparency));
         }
         .yellow_bg {
-            background-color: rgb(245, 245, 10, 0.5);
+            background-color: rgb(247, 148, 62, var(--bg-transparency));
         }
         .red_bg {
-            background-color: rgb(255, 0, 0, 0.5);
+            background-color: rgb(200, 50, 50, var(--bg-transparency));
         }
         .black_bg {
-            background-color: rgb(93, 93, 93, 0.5);
+            background-color: rgb(30, 30, 30, var(--bg-transparency));
         }
         .white_bg {
-            background-color:rgb(208, 202, 195, 0.5);
+            background-color:rgb(130, 130, 130, var(--bg-transparency));
         }
 
+
         .blue {
+            border-radius: calc(var(--tile-size) * 0.2);
             background-color: rgb(49, 157, 245);
         }
         .yellow {
-            background-color: yellow;
+            border-radius: calc(var(--tile-size) * 0.2);
+            background-color: rgb(247, 148, 62);
         }
         .red {
-            background-color: red;
+            border-radius: calc(var(--tile-size) * 0.2);
+            background-color: rgb(200, 50, 50);
         }
         .black {
-            background-color: rgb(93, 93, 93);
+            border-radius: calc(var(--tile-size) * 0.2);
+            background-color: rgb(30, 30, 30);
         }
         .white {
-            background-color:rgb(208, 202, 195);
+            border-radius: calc(var(--tile-size) * 0.2);
+            background-color:rgb(130, 130, 130);
         }
         .start {
-            background-color: rgb(255, 1, 238);
+            border-radius: calc(var(--tile-size) * 0.2);
+            background-color: rgb(165, 1, 155);
         }
 
+
+
     </style>
 </head>
 <body>
     <div class="flex-row">
         <p>Number of Players: {{ gamestate.n_players }}</p>
         <p>Current Player: {{ gamestate.current_player }}</p>
+        <p>Playing as: {{ player_name }}</p>
         <p>Game Status: {% if gamestate.game_end %}Ended{% else %}Active{% endif %}</p>
         <p>Rounds: {{ gamestate.rounds }}</p>
         <p>Days: {{ gamestate.days }}</p>
@@ -210,19 +277,20 @@
             </div>
         {% endfor %}
     </div>
-    
 
     <div class="flex-row">
     {% for name, player_data in gamestate.players.items() %}
-        <div class="flex-col">
+        <div class="flex-col player_area">
             <div class="flex-row">
-                {% if player_name == name %}
-                <h2>{{ player_name }} (You)</h2>
-                {% else %}
-                <h2>{{ name }}</h2>
-                {% endif %}
                 {% if  gamestate.current_player == name %}
-                    <p>(current)</p>
+                    <p>◉</p>
+                {% else %}
+                    <p>○</p>
+                {% endif %}
+                {% if player_name == name %}
+                <div><strong>{{ name }}</strong></div>
+                {% else %}
+                <div>{{ name }}</div>
                 {% endif %}
                 {% if  player_data.ready %}
                 <p>Ready</p>
@@ -261,32 +329,75 @@
                 </div>
                 </div>
 
-            <div class="flex-row">
-                <div style="width: 0.7em;">1</div>
-                <div style="width: 0.7em;">1</div>
-                <div style="width: 0.7em;">2</div>
-                <div style="width: 0.7em;">2</div>
-                <div style="width: 0.7em;">2</div>
-                <div style="width: 0.7em;">3</div>
-                <div style="width: 0.7em;">3</div>
-            </div>
-            <div class="floor" onclick="selectPatternLine(this)" value="floor">
+            <div class="floor_container" onclick="selectPatternLine(this)" value="floor">
                 {% set floor_count = 0 %}
+                {% set floor_negative_values = [1,1,2,2,2,3,3] %}
                 {% for color, number in player_data.floor.items() %}
                     {% if number > 0 %}
                         {% set floor_count = floor_count + number %}
                         {% for i in range(0, number) %}
-                            <div class="{{ color }}">{{ color[:1] }}</div>
+                            <!-- get index of item and set value to te value of floor_neg.. -->
+                            <div class="flex-col">
+                                <div class="floor_value">-{{ floor_negative_values[i] }}</div>
+                                <div class="{{ color }} floor">{{ color[:1] }}</div>
+                            </div>
                         {% endfor %}
                     {% endif %}
                 {% endfor %}    
                 {% if floor_count < 7 %}
                     {% set floor_blank_tiles = 7 - floor_count %}
                     {% for i in range(0, floor_blank_tiles) %}
-                        <div>_</div>
+                        <div class="flex-col">
+                            <div class="floor_value">-{{ floor_negative_values[i] }}</div>
+                            <div class="floor">_</div>
+                        </div>
                     {% endfor %}
                 {% endif %}
             </div>
+
+            {% if player_name == name %}
+            <form id='moveForm'</form>>
+                <div class="flex-col">
+                    <div class="flex-row move_select">
+                    <div>
+                        <label for="source">from:</label>
+                        <select id="source" name="source">
+                            <option value="market">Market</option>
+                                {% for factory in gamestate.factories %}
+                                <option value="{{ loop.index }}">Factory {{ loop.index }}</option>
+                                {% endfor %}
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label for="color">Color:</label>
+                        <select id="color" name="color">
+                            <option value="red">Red</option>
+                            <option value="blue">Blue</option>
+                            <option value="yellow">Yellow</option>
+                            <option value="black">Black</option>
+                            <option value="white">White</option>
+                        </select>
+                    </div>
+                    
+                    <div>
+                        <label for="destination">to:</label>
+                        <select id="destination" name="destination">
+                            <option value="1">Line 1</option>
+                            <option value="2">Line 2</option>
+                            <option value="3">Line 3</option>
+                            <option value="4">Line 4</option>
+                            <option value="5">Line 5</option>
+                            <option value="floor">Floor</option>
+                        </select>
+                    </div>
+                    </div>
+
+                    <input type="submit" value="Submit Move" style="margin-top: 1em;">
+                </div>
+            </form>
+            {% endif %}
+
         </div>
     {% endfor %}
     </div>
@@ -296,39 +407,8 @@
 
         
     {% if player_name %}
-        <h1>Play area</h1>
-        <p>Playing as: {{ player_name }}</p>
         <!-- form for submitting a move, a move is a selection of marcet or factory, what color, and what patternline or floor it goes to.  -->
-        <form id='moveForm'</form>>
-            <label for="source">Source:</label>
-            <select id="source" name="source">
-                <option value="market">Market</option>
-                {% for factory in gamestate.factories %}
-                <option value="{{ loop.index }}">Factory {{ loop.index }}</option>
-                {% endfor %}
-            </select>
-
-            <label for="color">Color:</label>
-            <select id="color" name="color">
-                <option value="red">Red</option>
-                <option value="blue">Blue</option>
-                <option value="yellow">Yellow</option>
-                <option value="black">Black</option>
-                <option value="white">White</option>
-            </select>
-
-            <label for="destination">Destination:</label>
-            <select id="destination" name="destination">
-                <option value="1">Pattern Line 1</option>
-                <option value="2">Pattern Line 2</option>
-                <option value="3">Pattern Line 3</option>
-                <option value="4">Pattern Line 4</option>
-                <option value="5">Pattern Line 5</option>
-                <option value="floor">Floor</option>
-            </select>
-
-            <input type="submit" value="Submit Move">
-        </form>
+        
         <!-- button to go to next player -->
         {% set current_index = gamestate.player_names.index(player_name) %}
         {% set next_index = current_index + 1 if current_index + 1 < gamestate.player_names|length else 0 %}
@@ -339,7 +419,7 @@
 
 
     
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"></script>
+    <script src="/socket.io.js"></script>
     <script>
         console.log('Game ID: {{ game_id }}');
         console.log('Player Name: {{ player_name }}');
diff --git a/templates/home.html b/templates/home.html
index 7bfd74d..1880379 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -5,38 +5,50 @@
     <link rel="icon" type="image/png" href="/azul-flake.png">
     <style>
         body {
+            background-color: black;
+        }
+        div {
             display: flex;
+            flex-direction: row;
             justify-content: center;
             align-items: center;
-            height: 100vh;
-            padding: 10px;
-            background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; 
-            -webkit-background-size: cover;
-            -moz-background-size: cover;
-            -o-background-size: cover;
-            background-size: cover;
+            flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
+            width: 90%;
+            position: relative;
+            left: 5%;
+        }
+
+        img {
+            position: relative;
+            left: 40%;
+            width: 20%;
         }
 
         a {
             display: inline-block;
-            margin-right: 10vh;
-            margin-left: 10vh;
-            padding: 10vh 20vh; /* increase padding to make buttons larger */
+            margin: 5%;
+            padding: 5vh 5vw; /* increase padding to make buttons larger */
             text-decoration: none;
             color: white;
-            background-color: rgba(0, 123, 255, 0.7); /* Semi-transparent blue color to mimic the tiles */
-            border-radius: 5px;
+            background-color: rgb(0, 120, 247); /* Semi-transparent blue color to mimic the tiles */
+            border-radius: 1em;
             font-weight: bold;
             font-size: 3em; /* increase font size */
-            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add some shadow for depth */
+            box-shadow: 0px 0.5em 1em rgba(255, 255, 255, 0.333); /* Add some shadow for depth */
+            transition: background-color 0.3s ease; /* Smooth transition for hover and focus */
         }
-        a:hover {
-            background-color: rgba(0, 86, 179, 0.7); /* Darker blue on hover */
+
+        a:hover, a:focus {
+            background-color: rgba(0, 120, 247, 0.7); /* Darker blue on hover and focus */
+            outline: none; /* Remove default focus outline */
         }
     </style>
 </head>
 <body>
-    <a href="/create">Create Game</a>
-    <a href="/join">Join Game</a>
+    <img src="azul-flake.png" alt="">
+    <div>
+        <a href="/create">Create Game</a>
+        <a href="/join">Join Game</a>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/join.html b/templates/join.html
index af57aec..cc4e4d3 100644
--- a/templates/join.html
+++ b/templates/join.html
@@ -7,26 +7,62 @@
     <style>
         body {
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
-            height: 100vh;
-            padding: 10px;
-            background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; 
-            -webkit-background-size: cover;
-            -moz-background-size: cover;
-            -o-background-size: cover;
-            background-size: cover;
+            background-color: black;
+            color: white;
+            color-scheme: dark;
+        }
+
+
+        form {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-top: 5vh;
+            width: 80%;
+            max-width: 500px;
+        }
+
+        button, input[type="submit"] {
+            background-color: #0000FF;
+            cursor: pointer;
+            box-shadow: 0px 0.1em 0.5em rgba(255, 255, 255, 0.333);
+            margin-top: 2em;
+        }
+        
+        button, input[type="submit"], input[type="text"] {
+            margin-top: 5vh;
+            padding: 1em;
+            margin-top: 1em;
+            
+            color: #fff;
+            border: none;
+            border-radius: 1em;
+            width: 100%;
+        }
+
+
+        @media (max-width: 768px) {
+            input[type="text"], input[type="submit"], button {
+                font-size: 1.5em;
+            }
         }
     </style>
 </head>
 <body>
+    <img src="azul-flake.png" alt="">
     <!-- a field to add a game id  -->
     <form id="joinGameForm" method="POST" action="/join" onsubmit="submitForm(event)">
         <input type="text" name="game_id" placeholder="Game ID" required value="{{ game_id }}"> 
         <input type="submit" value="Join Game">
+        <button onclick="window.history.back();">Back</button>
     </form>
-    <button onclick="window.history.back();">Back</button>
-    <!-- script to get from localstorage and prefill join game -->
+
+    
+</body>
     <script>
         function submitForm(e) {
             e.preventDefault();
@@ -48,15 +84,5 @@
             //redirect to join game
             window.location.href = '/join_game/' + game_id;
         </script>
-        <noscript>
-            <p>manual redirect</p>
-            <a href="/join_game/+{{ game_id }}">Go to player selection</a>
-        </noscript>
     {% endif %}
-
-
-    <noscript>
-        <p>JavaScript is not enabled. Some convenience migth not work.</p>
-    </noscript>
-</body>
 </html>
\ No newline at end of file
diff --git a/templates/join_game.html b/templates/join_game.html
index acd1135..015c71f 100644
--- a/templates/join_game.html
+++ b/templates/join_game.html
@@ -4,10 +4,6 @@
 <head>
     <title>Ozai webui:Join Game</title>
     <style>
-        * {
-            box-sizing: border-box;
-            margin-left: 3em;
-        }
         body {
             font-family: Arial, sans-serif;
             margin: 0;
@@ -16,36 +12,61 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
+            background-color: black;
+            color: white;
+            color-scheme: dark;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
         }
-        
+        div{
+            margin-top: 20vh;
+        }
+        div,form {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
+            width: 90vw;
+        }
+
         ul {
             list-style-type: none;
             padding: 0;
         }
-        
         li {
-            margin-bottom: 10px;
-        }
-
-        form {
-            margin-top: 20px;
+            margin-bottom: 1em;
         }
 
         select, input[type="submit"] {
-            padding: 10px;
-            margin-top: 10px;
+            padding: 1em;
+            margin-top: 1em;
+            width: 40%;
+            min-width: 30em;
+            max-width: 50em;
+            height: 8vh;
         }
-
+        
         input[type="submit"] {
             background-color: #3779fd;
             border: none;
+            border-radius: 1em;
             text-decoration: none;
-            margin: 4px 2px;
+            margin: 6em 1em;
             cursor: pointer;
         }
+
+
+        
     </style>
 </head>
 <body>
+    <div>
+        
     {% if game_id %}
     <p>Selected game to join is: <strong>{{ game_id }}</strong></p>
     {% endif %}
@@ -67,25 +88,26 @@
         </select>
         <input type="submit" value="Join Game">
     </form>
+
     {% else %}
     <p>No players found in game, please recreate the game.</p>
     {% endif %}
 
+
     {% if player_name %}
-    <p>Selected player to join as: {{ player_name }}</p>
+    <noscript>
+        <p>Selected player to join as: {{ player_name }}</p>
+        <p>manual redirect</p>
+        <a href="/game/{{ game_id }}/player/{{ player_name }}">Go to game</a>
+    </noscript>
     <script>
         // Save player name in browser session for auto fill in game page
         sessionStorage.setItem('player_name', '{{ player_name }}');
         //redirect to game
         window.location.href = '/game/{{ game_id }}/player/{{ player_name }}';
     </script>
-    <noscript>
-        <p>manual redirect</p>
-        <a href="/game/{{ game_id }}/player/{{ player_name }}">Go to game</a>
-    </noscript>
     {% endif %}
 
-
-    
+    </div>
 </body>
 </html>
\ No newline at end of file
