diff --git a/.gitignore b/.gitignore
index f78ec928..8514f353 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
 .parcel-cache
+/dist
+/node_modules
diff --git a/package-lock.json b/package-lock.json
index d7f43490..ff91a369 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -372,6 +372,7 @@
       "integrity": "sha512-SRZFtqGiaKHlZ2YAvf+NHvBFWS3GnkBvJMfOJM7kxJRK3M1bhbwJa/GgSdzqro5UVf9Bfj6E+pkdrRQIOZ7jMQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@mischnic/json-sourcemap": "^0.1.0",
         "@parcel/cache": "2.13.3",
@@ -2024,6 +2025,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -2048,9 +2050,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001696",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz",
-      "integrity": "sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==",
+      "version": "1.0.30001764",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
+      "integrity": "sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g==",
       "dev": true,
       "funding": [
         {
@@ -3256,21 +3258,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/srcset": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/srcset/-/srcset-5.0.1.tgz",
-      "integrity": "sha512-/P1UYbGfJVlxZag7aABNRrulEXAwCSDo7fklafOQrantuPTDmYgijJMks2zusPCVzgW9+4P69mq7w6pYuZpgxw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/src/css/Senura-snake.css b/src/css/Senura-snake.css
index 2102a783..cc950c49 100644
--- a/src/css/Senura-snake.css
+++ b/src/css/Senura-snake.css
@@ -43,16 +43,16 @@ a.snake-link:hover {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
-  background-color: #ffffff;
-  color: #938996;
+  background-color: black;
+  color: white;
 }
 
 .snake-panel-component {
@@ -78,6 +78,7 @@ a.snake-link:hover {
 .snake-snakebody-alive {
   background-image: url("src/css/images/dark-snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("src/css/images/dead-dark-snakeblock.png");
 }
@@ -143,4 +144,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/css/black-snake.css b/src/css/black-snake.css
index a92710b5..299d5fe2 100644
--- a/src/css/black-snake.css
+++ b/src/css/black-snake.css
@@ -39,13 +39,13 @@ a.snake-link:hover {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
   background-color: black;
   color: white;
@@ -74,6 +74,7 @@ a.snake-link:hover {
   background-image: url("src/cssss/images/snakeblock.png"),
     url("src/css/images/snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("src/cssss/images/deadblock.png"),
     url("src/css/images/deadblock.png");
@@ -139,4 +140,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/css/dark-snake.css b/src/css/dark-snake.css
index 16388e41..ec475ce8 100644
--- a/src/css/dark-snake.css
+++ b/src/css/dark-snake.css
@@ -43,16 +43,16 @@ a.snake-link:hover {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
-  background-color: #3e2e44;
-  color: #938996;
+  background-color: black;
+  color: white;
 }
 
 .snake-panel-component {
@@ -78,6 +78,7 @@ a.snake-link:hover {
 .snake-snakebody-alive {
   background-image: url("src/css/images/dark-snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("src/css/images/dead-dark-snakeblock.png");
 }
@@ -143,4 +144,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/css/green-snake.css b/src/css/green-snake.css
index 9cd114c5..52520e11 100644
--- a/src/css/green-snake.css
+++ b/src/css/green-snake.css
@@ -44,13 +44,13 @@ a.snake-link:hover {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
   background-color: black;
   color: white;
@@ -79,6 +79,7 @@ a.snake-link:hover {
 .snake-snakebody-alive {
   background-image: url("src/css/images/snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("src/css/images/deadblock.png");
 }
@@ -144,4 +145,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/css/head-snake.css b/src/css/head-snake.css
index 0e7daf95..e5a00a55 100644
--- a/src/css/head-snake.css
+++ b/src/css/head-snake.css
@@ -33,13 +33,13 @@ a.snake-link:hover {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
   background-color: black;
   color: white;
@@ -79,6 +79,7 @@ a.snake-link:hover {
   background-image: url("src/css/images/green-body-snakeblock.png"),
     url("src/css/images/green-body-snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("src/css/images/deadblock.png"),
     url("src/css/images/deadblock.png");
@@ -145,4 +146,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/css/light-snake.css b/src/css/light-snake.css
index db0be890..d57d3e0a 100644
--- a/src/css/light-snake.css
+++ b/src/css/light-snake.css
@@ -9,6 +9,7 @@ body {
   padding: 0px;
   background-color: #f73378;
 }
+
 #game-area {
   margin: 10px;
   padding: 0px;
@@ -19,32 +20,37 @@ body {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
 }
+
 #game-area:focus {
   outline: none;
 }
+
 a.snake-link,
 a.snake-link:link,
 a.snake-link:visited {
   color: #fcfc54;
 }
+
 a.snake-link:hover {
   color: #ffff54;
 }
+
 .snake-pause-screen {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
   background-color: black;
   color: white;
 }
+
 .snake-panel-component {
   position: absolute;
   font-family: Verdana, arial, helvetica, sans-serif;
@@ -54,6 +60,7 @@ a.snake-link:hover {
   padding: 8px;
   margin: 0px;
 }
+
 .snake-snakebody-block {
   margin: 0px;
   padding: 0px;
@@ -62,12 +69,15 @@ a.snake-link:hover {
   border: 0px solid #000080;
   background-repeat: no-repeat;
 }
+
 .snake-snakebody-alive {
   background-image: url("src/css/images/snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("src/css/images/deadblock.png");
 }
+
 .snake-food-block {
   margin: 0px;
   padding: 0px;
@@ -75,6 +85,7 @@ a.snake-link:hover {
   border: 0px solid #000080;
   position: absolute;
 }
+
 .snake-playing-field {
   margin: 0px;
   padding: 0px;
@@ -82,6 +93,7 @@ a.snake-link:hover {
   background-color: #ab003c;
   border: 0px solid #ab003c;
 }
+
 .snake-game-container {
   margin: 0px;
   padding: 0px;
@@ -90,6 +102,7 @@ a.snake-link:hover {
   zoom: 1;
   position: relative;
 }
+
 .snake-welcome-dialog {
   padding: 8px;
   margin: 0px;
@@ -107,6 +120,7 @@ a.snake-link:hover {
   text-align: center;
   display: block;
 }
+
 .snake-try-again-dialog,
 .snake-win-dialog {
   padding: 8px;
@@ -124,4 +138,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/css/main-snake.css b/src/css/main-snake.css
index 7938bf34..55a77bea 100755
--- a/src/css/main-snake.css
+++ b/src/css/main-snake.css
@@ -38,13 +38,13 @@ a.snake-link:hover {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
   background-color: black;
   color: white;
@@ -73,6 +73,7 @@ a.snake-link:hover {
   background-image: url("./images/snakeblock.png"),
     url("./images/snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("./images/deadblock.png"), url("./images/deadblock.png");
 }
@@ -137,4 +138,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/css/matrix-snake.css b/src/css/matrix-snake.css
index 643d6960..87d8fd45 100644
--- a/src/css/matrix-snake.css
+++ b/src/css/matrix-snake.css
@@ -1,134 +1,140 @@
 body {
-margin:0px;
-padding:0px;
-background-color: #00ff11;
+    margin: 0px;
+    padding: 0px;
+    background-color: #00ff11;
 }
 
 #game-area {
-margin:10px;
-padding:0px;
-background-color: #00ff11;
+    margin: 10px;
+    padding: 0px;
+    background-color: #00ff11;
 }
 
 #mode-wrapper {
-color: #000000;
-font-family: Verdana, arial, helvetica, sans-serif;
-font-size: 14px;
+    color: #000000;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
 
 }
 
-#game-area:focus { outline: none; }
+#game-area:focus {
+    outline: none;
+}
 
-a.snake-link, a.snake-link:link, a.snake-link:visited {
-color: #FCFC54;
+a.snake-link,
+a.snake-link:link,
+a.snake-link:visited {
+    color: #FCFC54;
 }
 
 a.snake-link:hover {
-color: #FfFf54;
+    color: #FfFf54;
 }
 
 .snake-pause-screen {
-font-family: Verdana, arial, helvetica, sans-serif;
-font-size: 14px;
-position:absolute;
-width:300px;
-height:80px;
-text-align:center;
-top:50%;
-left:50%;
-margin-top:-40px;
-margin-left:-150px;
-display:none;
-background-color:black;
-color:white;
+  font-family: Verdana, arial, helvetica, sans-serif;
+  font-size: 14px;
+  position: absolute;
+  width: 350px;
+  height: 130px;
+  text-align: center;
+  top: 50%;
+  left: 50%;
+  margin-top: -100px;
+  margin-left: -190px;
+  display: none;
+  background-color: black;
+  color: white;
 }
 
 .snake-panel-component {
-position: absolute;
-font-family: Verdana, arial, helvetica, sans-serif;
-font-size: 14px;
-color: #000000;
-text-align: center;
-background-color: #00ff11;
-padding: 8px;
-margin: 0px;
+    position: absolute;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    color: #000000;
+    text-align: center;
+    background-color: #00ff11;
+    padding: 8px;
+    margin: 0px;
 }
 
 .snake-snakebody-block {
-margin: 0px;
-padding: 0px;
-background-color: #FF0000;
-position: absolute;
-border: 0px solid #000080;
-background-repeat: no-repeat;
+    margin: 0px;
+    padding: 0px;
+    background-color: #FF0000;
+    position: absolute;
+    border: 0px solid #000080;
+    background-repeat: no-repeat;
 }
 
 .snake-snakebody-alive {
-background-image: url('src/css/images/matrix-snake-block.png');
+    background-image: url('src/css/images/matrix-snake-block.png');
 }
+
 .snake-snakebody-dead {
-background-image: url('src/css/images/deadblock.png');
+    background-image: url('src/css/images/deadblock.png');
 }
 
 .snake-food-block {
-margin: 0px;
-padding: 0px;
-background-color: #FF0000;
-border: 0px solid #000080;
-position: absolute;
-background-image: url("src/css/images/matrix-food-block.png")
+    margin: 0px;
+    padding: 0px;
+    background-color: #FF0000;
+    border: 0px solid #000080;
+    position: absolute;
+    background-image: url("src/css/images/matrix-food-block.png")
 }
 
 .snake-playing-field {
-margin: 0px;
-padding: 0px;
-position: absolute;
-background-color: #000000;
-border: 0px solid #000000;
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+    background-color: #000000;
+    border: 0px solid #000000;
 }
 
 .snake-game-container {
-margin: 0px;
-padding: 0px;
-border-width: 0px;
-border-style: none;
-zoom: 1;
-background-color: #00ff11;
-position: relative;
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: none;
+    zoom: 1;
+    background-color: #00ff11;
+    position: relative;
 }
 
 .snake-welcome-dialog {
-padding: 8px;
-margin: 0px;
-background-color: #000000;
-color: #00ff11;
-font-family: Verdana, arial, helvetica, sans-serif;
-font-size: 14px;
-position: absolute;
-top: 50%;
-left: 50%;
-width: 300px;
-/height: 150px;/
-margin-top: -100px;
-margin-left: -158px;
-text-align: center;
-display: block;
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #00ff11;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 150px;
+    margin-top: -100px;
+    margin-left: -158px;
+    text-align: center;
+    display: block;
 }
 
-.snake-try-again-dialog, .snake-win-dialog {
-padding: 8px;
-margin: 0px;
-background-color: #000000;
-color: #ff0000;
-font-family: Verdana, arial, helvetica, sans-serif;
-font-size: 14px;
-position: absolute;
-top: 50%;
-left: 50%;
-width: 300px;
-height: 100px;
-margin-top: -75px;
-margin-left: -158px;
-text-align: center;
-display: none;
-}
+.snake-try-again-dialog,
+.snake-win-dialog {
+    padding: 8px;
+    margin: 0px;
+    background-color: #000000;
+    color: #ff0000;
+    font-family: Verdana, arial, helvetica, sans-serif;
+    font-size: 14px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 100px;
+    margin-top: -75px;
+    margin-left: -158px;
+    text-align: center;
+    display: none;
+}
\ No newline at end of file
diff --git a/src/css/neon-snake.css b/src/css/neon-snake.css
index 49591510..128ab771 100644
--- a/src/css/neon-snake.css
+++ b/src/css/neon-snake.css
@@ -42,16 +42,16 @@ a.snake-link:hover {
   font-family: Verdana, arial, helvetica, sans-serif;
   font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
-  background-color: #0fff00;
-  color: #000000;
+  background-color: black;
+  color: white;
 }
 
 .snake-panel-component {
@@ -77,6 +77,7 @@ a.snake-link:hover {
   background-image: url("src/css/images/neon-body-snakeblock.png"),
     url("src/cssss/images/neon-body-snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("src/css/images/neon-dead-snakeblock.png"),
     url("src/cssss/images/neon-dead-snakeblock.png");
@@ -142,4 +143,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/css/teal-snake.css b/src/css/teal-snake.css
index ac06471a..c4089675 100644
--- a/src/css/teal-snake.css
+++ b/src/css/teal-snake.css
@@ -42,19 +42,19 @@ a.snake-link:hover {
 }
 
 .snake-pause-screen {
-  font-family: Electrolize;
-  font-size: 16px;
+  font-family: Verdana, arial, helvetica, sans-serif;
+  font-size: 14px;
   position: absolute;
-  width: 300px;
-  height: 80px;
+  width: 350px;
+  height: 130px;
   text-align: center;
   top: 50%;
   left: 50%;
-  margin-top: -40px;
-  margin-left: -150px;
+  margin-top: -100px;
+  margin-left: -190px;
   display: none;
-  background-color: #3e2e44;
-  color: whitesmoke;
+  background-color: black;
+  color: white;
 }
 
 .snake-panel-component {
@@ -80,6 +80,7 @@ a.snake-link:hover {
 .snake-snakebody-alive {
   background-image: url("src/css/images/snakeblock.png");
 }
+
 .snake-snakebody-dead {
   background-image: url("src/css/images/dead-dark-snakeblock.png");
 }
@@ -145,4 +146,4 @@ a.snake-link:hover {
   margin-left: -158px;
   text-align: center;
   display: none;
-}
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 03dc6b10..43fcff94 100755
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,8 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <!--
+
+<head>
+  <!--
 
   JavaScript Snake
   https://patorjk.com/games/snake
@@ -9,77 +10,72 @@
   Source code is available here: https://github.com/patorjk/JavaScript-Snake
 
   -->
-    <meta charset="utf-8" />
-    <title>JavaScript Snake</title>
-    <link
-      rel="stylesheet"
-      id="style"
-      type="text/css"
-      href="css/main-snake.css"
-    />
-    <link rel="shortcut icon" href="css/images/favicon.png" />
-    <style>
-      .snake-toolbar {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 10000;
-        padding: 5px;
-      }
-    </style>
-    <script>
-      function getTheme() {
-        function changeTheme(themeUrl) {
-          const elm = document.getElementById("style");
-          elm && elm.remove();
+  <meta charset="utf-8" />
+  <title>JavaScript Snake</title>
+  <link rel="stylesheet" id="style" type="text/css" href="css/main-snake.css" />
+  <link rel="shortcut icon" href="css/images/favicon.png" />
+  <style>
+    .snake-toolbar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 10000;
+      padding: 5px;
+    }
+  </style>
+  <script>
+    function getTheme() {
+      function changeTheme(themeUrl) {
+        const elm = document.getElementById("style");
+        elm && elm.remove();
 
-          const newCss = document.createElement("link");
-          newCss.id = "style";
-          newCss.rel = "stylesheet";
-          newCss.type = "text/css";
-          newCss.href = themeUrl;
-          document.head.appendChild(newCss);
-        }
+        const newCss = document.createElement("link");
+        newCss.id = "style";
+        newCss.rel = "stylesheet";
+        newCss.type = "text/css";
+        newCss.href = themeUrl;
+        document.head.appendChild(newCss);
+      }
 
-        const index = document.getElementById("select").selectedIndex;
-        switch (index) {
-          case 0:
-            changeTheme("./css/light-snake.css?" + Math.random());
-            break;
-          case 1:
-            changeTheme("./css/main-snake.css?" + Math.random());
-            break;
-          case 2:
-            changeTheme("css/dark-snake.css?" + Math.random());
-            break;
-          case 3:
-            changeTheme("css/green-snake.css?" + Math.random());
-            break;
-          case 4:
-            changeTheme("css/matrix-snake.css?" + Math.random());
-            break;
-          case 5:
-            changeTheme("css/Senura-snake.css?" + Math.random());
-            break;
-          case 6:
-            changeTheme("css/head-snake.css?" + Math.random());
-            break;
-          case 7:
-            changeTheme("css/black-snake.css?" + Math.random());
-            break;
-          case 8:
-            changeTheme("css/neon-snake.css?" + Math.random());
-            break;
-          default:
-            changeTheme("css/main-snake.css?" + Math.random());
-            break;
-        }
-        setTimeout(function () {
-          document.getElementById("game-area").focus();
-        }, 10);
+      const index = document.getElementById("select").selectedIndex;
+      switch (index) {
+        case 0:
+          changeTheme("./css/light-snake.css?" + Math.random());
+          break;
+        case 1:
+          changeTheme("./css/main-snake.css?" + Math.random());
+          break;
+        case 2:
+          changeTheme("css/dark-snake.css?" + Math.random());
+          break;
+        case 3:
+          changeTheme("css/green-snake.css?" + Math.random());
+          break;
+        case 4:
+          changeTheme("css/matrix-snake.css?" + Math.random());
+          break;
+        case 5:
+          changeTheme("css/Senura-snake.css?" + Math.random());
+          break;
+        case 6:
+          changeTheme("css/head-snake.css?" + Math.random());
+          break;
+        case 7:
+          changeTheme("css/black-snake.css?" + Math.random());
+          break;
+        case 8:
+          changeTheme("css/neon-snake.css?" + Math.random());
+          break;
+        default:
+          changeTheme("css/main-snake.css?" + Math.random());
+          break;
       }
-    </script>
-    <!--
+      setTimeout(function () {
+        document.getElementById("game-area").focus();
+      }, 10);
+    }
+  </script>
+  <!--
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-352HTB3H82"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
@@ -88,64 +84,70 @@
 
     gtag('config', 'G-352HTB3H82');
   </script>
-  --></head>
-  <body>
-    <div class="snake-toolbar">
-      <div style="display: inline-block; margin-right: 10px">
-        <span>Theme:</span>
-        <select autocomplete="off" id="select">
-          <option>Light Theme by yokesharun</option>
-          <option selected>Main Theme by patorjk</option>
-          <option>Dark Theme by KenyStev</option>
-          <option>Green Theme by CoffeeCatDE</option>
-          <option>Matrix Theme by Geahad Haymor</option>
-          <option>Theme by Senura Ratnayake</option>
-          <option>Snake Head Theme by Rb64</option>
-          <option>Black and purple Theme by LucassSantoss</option>
-          <option>Neon Theme by Daisy21000</option>
-        </select>
-      </div>
-      <div style="display: inline-block; margin-right: 10px">
-        <span>Mode:</span>
-        <select id="selectMode">
-          <option value="100">Easy</option>
-          <option value="75" selected>Medium</option>
-          <option value="50">Hard</option>
-          <option value="25">Impossible</option>
-          <option value="110">Rush</option>
-        </select>
-      </div>
+  -->
+</head>
+
+<body>
+  <div class="snake-toolbar">
+    <div style="display: inline-block; margin-right: 10px">
+      <span>Theme:</span>
+      <select autocomplete="off" id="select">
+        <option>Light Theme by yokesharun</option>
+        <option selected>Main Theme by patorjk</option>
+        <option>Dark Theme by KenyStev</option>
+        <option>Green Theme by CoffeeCatDE</option>
+        <option>Matrix Theme by Geahad Haymor</option>
+        <option>Theme by Senura Ratnayake</option>
+        <option>Snake Head Theme by Rb64</option>
+        <option>Black and purple Theme by LucassSantoss</option>
+        <option>Neon Theme by Daisy21000</option>
+      </select>
+    </div>
+    <div style="display: inline-block; margin-right: 10px">
+      <span>Mode:</span>
+      <select id="selectMode">
+        <option value="100">Easy</option>
+        <option value="75" selected>Medium</option>
+        <option value="50">Hard</option>
+        <option value="25">Impossible</option>
+        <option value="110">Rush</option>
+      </select>
+    </div>
+    <div style="display: inline-block; margin-right: 10px">
       <button id="go_full_screen">Full Screen</button>
-      <br />
     </div>
+    <button id="instruction_btn">Instructions</button>
 
-    <div id="mode-wrapper" style="display: inline; width: auto"></div>
+  </div>
 
-    <div id="game-area" tabindex="0"></div>
-    <script type="text/javascript" src="js/snake.js"></script>
-    <script type="text/javascript" src="js/init.js"></script>
-    <script type="text/javascript">
-      document.getElementById('select').addEventListener('change', getTheme);
+  <div id="mode-wrapper" style="display: inline; width: auto"></div>
 
-      function go_full_screen() {
-        const elem = document.documentElement;
-        try {
-          if (elem.requestFullscreen) {
-            elem.requestFullscreen();
-          } else if (elem.msRequestFullscreen) {
-            elem.msRequestFullscreen();
-          } else if (elem.mozRequestFullScreen) {
-            elem.mozRequestFullScreen();
-          } else if (elem.webkitRequestFullscreen) {
-            elem.webkitRequestFullscreen();
-          }
-        } catch (err) {
-          console.error(err);
-          alert("Sorry, fullscreen won't work in this setup.");
+  <div id="game-area" tabindex="0"></div>
+  <script type="text/javascript" src="js/snake.js"></script>
+  <script type="text/javascript" src="js/init.js"></script>
+  <script type="text/javascript">
+    document.getElementById('select').addEventListener('change', getTheme);
+
+    function go_full_screen() {
+      const elem = document.documentElement;
+      try {
+        if (elem.requestFullscreen) {
+          elem.requestFullscreen();
+        } else if (elem.msRequestFullscreen) {
+          elem.msRequestFullscreen();
+        } else if (elem.mozRequestFullScreen) {
+          elem.mozRequestFullScreen();
+        } else if (elem.webkitRequestFullscreen) {
+          elem.webkitRequestFullscreen();
         }
+      } catch (err) {
+        console.error(err);
+        alert("Sorry, fullscreen won't work in this setup.");
       }
+    }
+
+    document.getElementById('go_full_screen').addEventListener('click', go_full_screen);
+  </script>
+</body>
 
-      document.getElementById('go_full_screen').addEventListener('click', go_full_screen);
-    </script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/js/snake.js b/src/js/snake.js
index 6232e8d9..b55338d3 100644
--- a/src/js/snake.js
+++ b/src/js/snake.js
@@ -249,8 +249,8 @@ SNAKE.Snake =
         if (me.snakeLength > highScore) {
           alert(
             "Congratulations! You have beaten your previous high score, which was " +
-              highScore +
-              ".",
+            highScore +
+            ".",
           );
           localStorage.setItem(HIGH_SCORE_KEY, me.snakeLength);
         }
@@ -310,7 +310,7 @@ SNAKE.Snake =
         if (isDead || (isPaused && !config.premoveOnPause)) {
           return;
         }
-
+        // mark line here
         let directionFound = MOVE_NONE;
 
         switch (keyNum) {
@@ -338,6 +338,7 @@ SNAKE.Snake =
        * This method is executed for each move of the snake. It determines where the snake will go and what will happen to it. This method needs to run quickly.
        * @method go
        */
+      // here
       me.go = function () {
         const oldHead = me.snakeHead,
           newHead = me.snakeTail,
@@ -760,17 +761,17 @@ SNAKE.Board =
 
       // defaults
       if (!config.onLengthUpdate) {
-        config.onLengthUpdate = () => {};
+        config.onLengthUpdate = () => { };
       }
 
       if (!config.onPauseToggle) {
-        config.onPauseToggle = () => {};
+        config.onPauseToggle = () => { };
       }
       if (!config.onWin) {
-        config.onWin = () => {};
+        config.onWin = () => { };
       }
       if (!config.onDeath) {
-        config.onDeath = () => {};
+        config.onDeath = () => { };
       }
 
       let myFood,
@@ -823,7 +824,7 @@ SNAKE.Board =
         elmPauseScreen = document.createElement("div");
         elmPauseScreen.className = "snake-pause-screen";
         elmPauseScreen.innerHTML =
-          "<div style='padding:10px;'>[Paused]<p/>Press [space] to unpause.</div>";
+          "<div style='padding:4px;'>[Paused]<p/>Press [space] to unpause/pause. <p/> Click before moving or you will select buttons.<p/> Use wasd or arrow keys to move. </div>";
 
         elmAboutPanel = document.createElement("div");
         elmAboutPanel.className = "snake-panel-component";
@@ -1409,3 +1410,12 @@ SNAKE.Board =
       }
     }; // end return function
   })();
+
+let InstructionBtn = document.getElementById("instruction_btn");
+function instructions() {
+  if (typeof mySnakeBoard !== "undefined" && mySnakeBoard.getBoardState() !== BOARD_NOT_READY) {
+    mySnakeBoard.setPaused(!mySnakeBoard.getPaused());
+  }
+}
+InstructionBtn.addEventListener("click", instructions);
+// The pause screen text is set at snake.js:827. You can change it there to update what's displayed when paused. For example:
\ No newline at end of file