diff --git a/assets/sounds/menu_click.wav b/assets/sounds/menu_click.wav
new file mode 100644
index 0000000..64df55d
Binary files /dev/null and b/assets/sounds/menu_click.wav differ
diff --git a/assets/textures/button_off.png b/assets/textures/button_off.png
new file mode 100644
index 0000000..119d507
Binary files /dev/null and b/assets/textures/button_off.png differ
diff --git a/assets/textures/button_on.png b/assets/textures/button_on.png
new file mode 100644
index 0000000..d1d8d77
Binary files /dev/null and b/assets/textures/button_on.png differ
diff --git a/assets/textures/options.png b/assets/textures/options.png
new file mode 100644
index 0000000..f065e3c
Binary files /dev/null and b/assets/textures/options.png differ
diff --git a/cards.css b/cards.css
index c7bfa27..c65da2e 100644
--- a/cards.css
+++ b/cards.css
@@ -12,7 +12,14 @@
 * {
     transition: .3s;
 }
-
+.noSelect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
 .card {
     cursor: pointer;
     padding-bottom: 85%;
@@ -75,6 +82,7 @@ body {
     top: 0px;
     right: 0px;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     color: #fff;
@@ -85,7 +93,33 @@ body {
     text-shadow: -5px 14px 20px rgb(0, 0, 0);
     cursor: pointer;
 }
-
+#options-window {
+    position: absolute;
+    background-color: #000000d4;
+    height: 100%;
+    width: 100%;
+    z-index: 99999;
+    top: 0px;
+    right: 0px;
+    /* display: flex; */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    /* font-weight: 900; */
+    font-size: 1vw;
+    font-family: "8-bit-pusab";
+    /* -webkit-text-stroke: 1px rgb(10, 10, 10); */
+    text-shadow: -3px 5px 20px rgb(0, 0, 0);
+    cursor: pointer;
+    display: none;
+}
+.shownumbers-button{
+    display: flex;
+}
+#button-text-01{
+    width: 21vw;
+}
 .printid:after {
     content: attr(id);
     position: absolute;
@@ -96,7 +130,7 @@ body {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
-    font-size: 18px;
+    font-size: 100%;
     color: #fff;
     font-family: "8-bit-pusab";
 }
@@ -108,5 +142,79 @@ body {
 }
 
 #health {
-    min-width: 170px;
+    /* min-width: 170px; */
+    min-width: 33%;
+}
+.settings{
+    font-size: 50%;
+}
+.cardspeed{
+
+    display: flex;
+    align-items: center;
+    width: fit-content;
+}
+#range-value{
+    margin: 0 7px;
+}
+#start-the-game *:hover::before {
+    content:'> ';
+}
+#options-window div{
+    margin: 1vh 0;
+}
+/* Menu button */
+.menu-nav-button{
+    font-family: "8-bit-pusab";
+    background-color: #ff0000;
+    border: none;
+    color: white;
+    padding: 5px 19px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 11px;
+}
+/* Slider style */
+.slider {
+    -webkit-appearance: none;
+    width: 25%;
+    height: 15px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+    margin: 6;
+}
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    background: #ff0000;
+    cursor: pointer;
+  }
+ .slider::-moz-range-thumb {  /* Same thing in firefox as above */
+    width: 15px;
+    height: 15px;
+    background: #ff0000;
+    cursor: pointer;
+    border-radius: 0px;
+    border: 0px solid
+    transparent;
+  }
+
+  /* slider ends */
+@media screen and (max-width: 513px) {
+    .stats {
+        font-size: 64%;
+    }
+    #health{
+            width: 118px;
+            min-width: unset;
+    }
+    #health img {
+        width: 20%;
+    }
 }
\ No newline at end of file
diff --git a/index.php b/index.php
index 45a25c0..f6ae372 100644
--- a/index.php
+++ b/index.php
@@ -5,7 +5,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <!-- <link rel="stylesheet" href="style.css"> -->
     <link rel="stylesheet" href="cards.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
+    
 </head>
 <style>
     #particles-js {
@@ -22,6 +23,11 @@
 <div id="particles-js"></div>
 
 <body>
+<div class="sound_player">
+    <audio id="menu_click">
+        <source src="assets/sounds/menu_click.wav">
+    </audio>
+    </div>
     <div id="title-bar">
         <div id="title">
             Blocks
@@ -50,11 +56,36 @@
     <!-- <button type="button">Start</button>
             <button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button> -->
     <div id="alerted"></div>
-    <div id="start-the-game" onclick="initiate()">
-        Start
+    <div id="start-the-game">
+        <div onmouseover="menu_clicks();" onclick="initiate()">Start</div>
+        <div onmouseover="menu_clicks();" onclick="when_clicked()" class="settings">Options</div>
     </div>
-    <script src="scripts/gameboard.js"></script>
+    <div id="options-window">
+    <div class="cardspeed">
+        <div>Card speed:</div>
+        <div id="range-value">500</div>
+        <input type="range" class="slider" onchange="cardspeed()" id="card-speed-number-value" min="10" max="2000">
+    </div>
+     <div class="shownumbers-button">
+            <div class="button-icon">
+                <img src="assets/textures/button_off.png" onclick="menu_clicks();check();document.getElementById('btn-off').style.display = 'none';document.getElementById('btn-on').style.display = 'block';" id="btn-off" alt="off">
+                <img src="assets/textures/button_on.png" onclick="menu_clicks();uncheck();document.getElementById('btn-on').style.display = 'none';document.getElementById('btn-off').style.display = 'block';" style="display: none;" id="btn-on" alt="off">
+            </div>
+            <div id="button-text-01">
+                Turn on card numbers
+            </div>
+     </div>
+     <button onclick="menu_clicks();when_clicked_back();" class="menu-nav-button">Back</button>
+    </div>
+    <div class="overlay">
+        <div class="narrator">
 
+        </div>
+    </div>
+    
+    <script src="scripts/gameboard.js"></script>
+    <script src="scripts/sound.js"></script>
+    <script src="scripts/options.js"></script>
     <!-- particles.js library -->
     <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="scripts/particles.js"></script>
diff --git a/scripts/blockamount.js b/scripts/blockamount.js
deleted file mode 100644
index 9f51821..0000000
--- a/scripts/blockamount.js
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-$("<h1>Include this using jquery</h1>").appendTo("body");
-console.log($("body").html());
\ No newline at end of file
diff --git a/scripts/gameboard.js b/scripts/gameboard.js
index 69ddf5e..f75f478 100644
--- a/scripts/gameboard.js
+++ b/scripts/gameboard.js
@@ -7,7 +7,7 @@ var level = newPlayground * newPlayground;
 var difficulty = -1;
 var showcontent = false; // show numbers inside the cards
 // Game settings end
-var allow_click = 0;
+var allow_click = 0; 
 var play_array = [];
 var anim = 0;
 var y = 1;
@@ -51,7 +51,7 @@ function round_value() {
     document.getElementById("round").innerHTML = round_values;
 }
 
-function animation() { //Animations, shows what cards you click on
+function animation() { //Animations, shows what cards you click on. Works like a loop. SetTimout cant be used in normal loop
     setTimeout(function () {
         $("#" + play_array[anim]).addClass('animations')
         anim++;
@@ -104,7 +104,7 @@ function calc_difficulty() {
     } else {
         level = level + 1;
     }
-    difficulty = (35 / 100) * level + difficulty; //calc the difficulty to scale with the level
+    difficulty = (20 / 100) * level + difficulty; //calc the difficulty to scale with the level
     difficulty = Math.round(difficulty) // Makes the difficulty value a integer
 }
 
@@ -120,7 +120,7 @@ function make_playground() {
         for (i = 0; i < newPlayground; i++) { //Creates a new div for each loop wth the attributes and content set below.
             card_ids++;
             var div = document.createElement('div');
-            div.setAttribute('class', 'card');
+            div.setAttribute('class', 'card noSelect');
             div.setAttribute('id', card_ids);
             div.setAttribute('onClick', 'reply_click(this.id)'); // add an onClick event to the div that sends the id of it to the funcition reply_click()
             document.getElementById('card-row' + y).appendChild(div);
@@ -134,7 +134,7 @@ function make_playground() {
 function clear_playground() { //When called, makes the playground empty
     document.getElementById("test-group").innerHTML = "";
     clear_values();
-} //hello
+}
 
 function randomized() { // Fills the array with random numbers. Max number determines by level
     while (play_array.length < difficulty) {
@@ -167,7 +167,7 @@ function reply_click(clicked_id) { // Grabs the value from the id on the div/car
                     } else {
                         document.getElementById("score").innerHTML = parseInt(x) * 2 + 30;
                     }
-                    alert("You survived this round!");
+                    // alert("You survived this round!");
                     nextRound();
                 }
             }
diff --git a/scripts/options.js b/scripts/options.js
new file mode 100644
index 0000000..12bd72f
--- /dev/null
+++ b/scripts/options.js
@@ -0,0 +1,26 @@
+// gameboard.js required
+
+
+function when_clicked(){
+    document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/options.png)";
+    document.getElementById("start-the-game").style.display = "none";
+    document.getElementById("options-window").style.display = "flex";
+}
+function when_clicked_back(){
+    document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/bg.png)";
+    document.getElementById("start-the-game").style.display = "flex";
+    document.getElementById("options-window").style.display = "none";
+}
+function check() {
+    showcontent = true;
+    document.getElementById("button-text-01").innerHTML = "Turn off card numbers";
+  }
+function uncheck() {
+    showcontent = false;
+    document.getElementById("button-text-01").innerHTML = "Turn on card numbers";
+}
+function cardspeed(){
+       viewspeed = document.getElementById("card-speed-number-value").value;
+       document.getElementById("range-value").innerText = document.getElementById("card-speed-number-value").value;
+       menu_clicks();
+}
\ No newline at end of file
diff --git a/scripts/sound.js b/scripts/sound.js
new file mode 100644
index 0000000..adac2e5
--- /dev/null
+++ b/scripts/sound.js
@@ -0,0 +1,4 @@
+function menu_clicks(){
+var audio = document.getElementsByTagName("audio")[0];
+audio.play();
+}
\ No newline at end of file