diff --git a/src/index.html b/src/index.html
index 03dc6b10..e8f8d4e7 100755
--- a/src/index.html
+++ b/src/index.html
@@ -26,6 +26,20 @@
         z-index: 10000;
         padding: 5px;
       }
+      .speed-btn {
+        cursor: pointer;
+        border: 1px solid #ccc;
+        background-color: #f0f0f0;
+        border-radius: 3px;
+      }
+      .speed-btn:hover {
+        background-color: #e0e0e0;
+      }
+      .speed-btn-active {
+        background-color: #4CAF50;
+        color: white;
+        border-color: #4CAF50;
+      }
     </style>
     <script>
       function getTheme() {
@@ -106,15 +120,18 @@
         </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>
+        <span>Speed:</span>
+        <button id="speed-1x" class="speed-btn speed-btn-active" data-speed="300" style="padding: 5px 10px; margin-left: 5px;">1x</button>
+        <button id="speed-2x" class="speed-btn" data-speed="150" style="padding: 5px 10px; margin-left: 5px;">2x</button>
+        <button id="speed-3x" class="speed-btn" data-speed="100" style="padding: 5px 10px; margin-left: 5px;">3x</button>
+        <button id="speed-5x" class="speed-btn" data-speed="60" style="padding: 5px 10px; margin-left: 5px;">5x</button>
       </div>
+      <select id="selectMode" style="display: none;">
+        <option value="300" selected>1x</option>
+        <option value="150">2x</option>
+        <option value="100">3x</option>
+        <option value="60">5x</option>
+      </select>
       <button id="go_full_screen">Full Screen</button>
       <br />
     </div>
@@ -146,6 +163,20 @@
       }
 
       document.getElementById('go_full_screen').addEventListener('click', go_full_screen);
+
+      document.querySelectorAll('.speed-btn').forEach(function(btn) {
+        btn.addEventListener('click', function() {
+          document.querySelectorAll('.speed-btn').forEach(function(b) {
+            b.classList.remove('speed-btn-active');
+          });
+          btn.classList.add('speed-btn-active');
+          var speed = parseInt(btn.getAttribute('data-speed'));
+          var selectDropDown = document.getElementById('selectMode');
+          selectDropDown.value = speed;
+          var event = new Event('change');
+          selectDropDown.dispatchEvent(event);
+        });
+      });
     </script>
   </body>
 </html>
diff --git a/src/js/snake.js b/src/js/snake.js
index 6232e8d9..09b5cc77 100644
--- a/src/js/snake.js
+++ b/src/js/snake.js
@@ -29,7 +29,7 @@ const MOVE_RIGHT = 1;
 const MIN_SNAKE_SPEED = 25;
 const RUSH_INCR = 5;
 
-const DEFAULT_SNAKE_SPEED = 80;
+const DEFAULT_SNAKE_SPEED = 300;
 
 const BOARD_NOT_READY = 0;
 const BOARD_READY = 1;
@@ -146,7 +146,7 @@ SNAKE.Snake =
 
       const me = this;
       const playingBoard = config.playingBoard;
-      const growthIncr = 5;
+      const growthIncr = 1;
       const columnShift = [0, 1, 0, -1];
       const rowShift = [-1, 0, 1, 0];
       let prevNode;
@@ -381,6 +381,20 @@ SNAKE.Snake =
         newHead.col = oldHead.col + columnShift[lastMove];
         newHead.row = oldHead.row + rowShift[lastMove];
 
+        const maxRow = grid.length - 1;
+        const maxCol = grid[0].length - 1;
+
+        if (newHead.col <= 0) {
+          newHead.col = maxCol - 1;
+        } else if (newHead.col >= maxCol) {
+          newHead.col = 1;
+        }
+        if (newHead.row <= 0) {
+          newHead.row = maxRow - 1;
+        } else if (newHead.row >= maxRow) {
+          newHead.row = 1;
+        }
+
         if (!newHead.elmStyle) {
           newHead.elmStyle = newHead.elm.style;
         }