diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index d22455b..85b59e3 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -27,16 +27,17 @@ p {
 
 button {
     cursor: pointer;
-    font-size: 15px;
+    font-size: 16px;
     font-weight: 500;
     color: #ffffff;
     background-color: #5e77aa;
-    padding: 8px 15px;
+    padding: 0 15px;
+    height: 35px;
     border: none;
     border-radius: 3px;
 }
 
-button:hover, button:focus {
+button:enabled:hover, button:enabled:focus {
     background-color: #29457f;
     outline: none;
 }
@@ -44,10 +45,34 @@ button:hover, button:focus {
 button:disabled {
     cursor: no-drop;
     color: #dddddd;
-    background-color: #808080;
     opacity: 0.7;
 }
 
+button.block {
+    padding: 0;
+    width: 100%;
+}
+
+button.gray {
+    background-color: #808080;
+}
+
+button.gray:hover, button.gray:focus {
+    background-color: #555555;
+}
+
+div.buttonContainer {
+    height: 35px;
+}
+
+div.buttonContainer.top {
+    margin-bottom: 5px;
+}
+
+div.buttonContainer.bottom {
+    margin-top: 5px;
+}
+
 #loading {
     position: absolute;
     width: 40px;
@@ -56,8 +81,7 @@ button:disabled {
     left: 50%;
     margin-top: -20px;
     margin-left: -20px;
-    z-index: 2;
-    visibility: visible;
+    z-index: 3;
 }
 
 #panorama {
@@ -68,57 +92,18 @@ button:disabled {
 
 #guess {
     position: absolute;
-    right: 20px;
     bottom: 20px;
-    width: 250px;
-    height: 150px;
-    opacity: 0.5;
+    right: 20px;
     z-index: 2;
-    visibility: visible;
-    transition-property: width, height, opacity;
-    transition-duration: 0.1s;
-    transition-delay: 0.8s;
 }
 
-#guess:hover {
-    width: 500px;
-    height: 350px;
-    opacity: 0.95;
-    transition-delay: 0s;
-}
-
-#guess > #guessMap {
-    height: 115px;
+#guessMap {
     width: 100%;
-    transition-property: height;
-    transition-duration: 0.1s;
-    transition-delay: 0.8s;
     border-radius: 3px;
 }
 
-#guess:hover > #guessMap {
-    height: 315px;
-    transition-delay: 0s;
-}
-
-#guessButtonContainer {
-    margin-top: 5px;
-    height: 30px;
-}
-
-#guessButton {
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-}
-
 #result {
     position: absolute;
-    top: 50px;
-    left: 50px;
-    right: 50px;
-    bottom: 50px;
     opacity: 0.95;
     z-index: 2;
     visibility: hidden;
@@ -152,16 +137,93 @@ button:disabled {
 }
 
 #scoreBarBase {
-    height: 20px;
-    width: 60%;
+    height: 24px;
     margin: 0 auto;
     background-color: #eeeeee;
-    border-radius: 3px;
 }
 
 #scoreBar {
     height: 100%;
     width: 0;
+    border-radius: 3px;
     transition-property: width;
     transition-duration: 2.0s;
 }
+
+@media screen and (max-width: 599px) {
+    button {
+        padding: 0;
+        width: 100%;
+    }
+
+    #showGuessButtonContainer {
+        position: absolute;
+        left: 20px;
+        bottom: 20px;
+        right: 20px;
+        z-index: 2;
+    }
+
+    #guess {
+        left: 20px;
+        top: 20px;
+        opacity: 0.95;
+        visibility: hidden;
+    }
+
+    #guessMap {
+        height: calc(100% - 80px);
+    }
+
+    #result {
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        bottom: 20px;
+    }
+
+    #scoreBarBase {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 600px) {
+    #showGuessButtonContainer {
+        visibility: hidden;
+    }
+
+    #guess {
+        width: 250px;
+        height: 150px;
+        opacity: 0.5;
+        transition-property: width, height, opacity;
+        transition-duration: 0.1s;
+        transition-delay: 0.8s;
+    }
+
+    #guess:hover {
+        width: 500px;
+        height: 350px;
+        opacity: 0.95;
+        transition-delay: 0s;
+    }
+
+    #closeGuessButtonContainer {
+        display: none;
+    }
+
+    #guessMap {
+        height: calc(100% - 40px);
+    }
+
+    #result {
+        top: 50px;
+        left: 50px;
+        right: 50px;
+        bottom: 50px;
+    }
+
+    #scoreBarBase {
+        width: 60%;
+    }
+}
diff --git a/views/game.php b/views/game.php
index 1aa5b7a..80ced1c 100644
--- a/views/game.php
+++ b/views/game.php
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>MapGuesser</title>
     <link href="static/css/mapguesser.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
@@ -11,10 +12,16 @@
         <img src="static/img/loading.gif">
     </div>
     <div id="panorama"></div>
+    <div id="showGuessButtonContainer">
+        <button id="showGuessButton" class="block">Show guess map</button>
+    </div>
     <div id="guess">
+        <div id="closeGuessButtonContainer" class="buttonContainer top">
+            <button id="closeGuessButton" class="block gray">Close</button>
+        </div>
         <div id="guessMap"></div>
-        <div id="guessButtonContainer">
-            <button id="guessButton" disabled>Guess</button>
+        <div class="buttonContainer bottom">
+            <button id="guessButton" class="block" disabled>Guess</button>
         </div>
     </div>
     <div id="result">