diff --git a/index.html b/index.html
index 06e7d13a22592df38290893280f543ffa636fb33..22b855d293412a09167441068cc366dede6999fb 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,26 @@
     <head>
         <title>ProgGIS</title>
         <style>
+            .box {
+                font-family: monospace;
+                background-color: orange;
+                color: white;
+                border-color: orangered;
+                border-style: solid;
+                border-width: 0px;
+                border-radius: 20px;
+                width: 0;
+                height: 0;
+                margin-top: 15vh;
+                margin-left: 30vw;
+                position: fixed;
+                z-index: 999;
+                overflow-x: hidden;
+                text-align: center;
+            }
             .box1 {
                 display: flex;
-                flex-grow: 6;
+                flex-grow: 5;
                 flex-direction: row;
             }
             .box2 {
@@ -13,6 +30,11 @@
                 flex-grow: 3;
                 flex-direction: row;
             }
+            .box3 {
+                display: flex;
+                flex-grow: 2;
+                flex-direction: row;
+            }
             .button {
                 font-family: monospace;
                 font-weight: bolder;
@@ -55,11 +77,10 @@
                 <h1 style="margin: 0; padding: 0; text-align: center; font-size: 12vh;">ProgGIS</h1>
                 <div class="box1">
                     <p style="width: 17vw;"></p>
-                    <button class="button">Buffer</button>
-                    <button class="button">Intersection</button>
-                    <button class="button">Union</button>
-                    <button class="button">Difference</button>
-                    <p></p>
+                    <button class="button" onclick="openBox('bufferBox')">Buffer</button>
+                    <button class="button" onclick="openBox('intersectionBox')">Intersection</button>
+                    <button class="button" onclick="openBox('unionBox')">Union</button>
+                    <button class="button" onclick="openBox('differenceBox')">Difference</button>
                 </div>
             </div>
             <div style="padding-right: 2vh; padding-top: 2vh;">
@@ -69,7 +90,7 @@
                 </svg>
             </div>
         </div>
-        <div id="sidebar1" class="sidebar">
+        <div id="dataLayers" class="sidebar">
             <div style="display: flex; flex-grow: 2; flex-direction: row;">
                 <div style="width: 20vw; padding-left: 10px;">
                     <h1 style="font-size: 2vw;">Data layers</h1>
@@ -82,7 +103,57 @@
         </div>
         <div id="map" style="position: relative; z-index: 1; height: 80vh;">
             <div style="display: flex; flex-grow: 2; flex-direction: column;">
-                <div style="height: 72vh;"></div>
+                <div style="height: 72vh;">
+                    <div id="bufferBox" class="box">
+                        <div class="box3">
+                            <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Buffer</h1>
+                            <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('bufferBox')"
+                            xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div id="intersectionBox" class="box">
+                        <div class="box3">
+                            <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Intersection</h1>
+                            <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('intersectionBox')"
+                            xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div id="unionBox" class="box">
+                        <div class="box3">
+                            <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Union</h1>
+                            <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('unionBox')"
+                            xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div id="differenceBox" class="box">
+                        <div class="box3">
+                            <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Difference</h1>
+                            <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('differenceBox')"
+                            xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div id="tutorialBox" class="box">
+                        <div class="box3">
+                            <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Tutorial</h1>
+                            <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('tutorialBox')"
+                            xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                            </svg>
+                        </div>
+                        <textarea style="margin: 2vw; padding: 5px; background-color: white; border-color: black;
+                        border-width: 2px; color: black; height: 18vh; width: 35vw; text-align: left;">
+Legg til piler på hver side av 'Tutorial' for å navigere rundt blant de ulike tutorialene.
+                        </textarea>
+                    </div>
+                </div>
                 <div style="display: flex; flex-grow: 3; flex-direction: row;">
                     <div style="padding-left: 2vw;">
                         <svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
@@ -92,7 +163,7 @@
                     </div>
                     <div style="width: 95vw;"></div>
                     <div style="padding-right: 2vw;">
-                        <svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;"
+                        <svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;" onclick="openBox('tutorialBox')"
                         xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
                             <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
                         </svg>
@@ -105,6 +176,10 @@
 
 <script type="text/javascript">
     
+    var boolskNav = false; /* boolsk verdi som forteller om en sidebar er åpen foran kartet */
+    var boolskBox = false; /* boolsk verdi som forteller om en boks er åpen foran kartet */
+    var box = null; /* Streng som forteller hvilken boks-id som er åpen */
+
     // Bestemme URL til basiskartet:
     var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
@@ -115,26 +190,65 @@
         layers: [osm_map], // Default basiskart
         maxZoom: 18, // Justerer zoom-nivået
         minZoom: 6,
-        zoomControl: false // Fjerner default zoom-knapper
+        zoomControl: false, // Fjerner default zoom-knapper
     }).setView([63.418529, 10.40284], 13)
 
     // Legger til zoom-knapper på egnet sted
     L.control.zoom({
         position:'topright'
     }).addTo(map);
-    
+
+    /* Activate and deactivate interactions in the leaflet map*/
+
+    function deactivateMap() {
+        map._handlers.forEach(function(handler) {
+            handler.disable();
+        });
+    }
+
+    function activateMap() {
+        map._handlers.forEach(function(handler) {
+            handler.enable();
+        });
+    }
+
     /* Set the width of the sidebar to 25vw */
     function openNav() {
-        document.getElementById("sidebar1").style.width = "25vw";
-        boolsk = true;
+        if (boolskBox) {
+            closeBox(box);
+        }
+        document.getElementById("dataLayers").style.width = "25vw";
+        boolskNav = true;
     }
 
     /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
     function closeNav() {
-        document.getElementById("sidebar1").style.width = "0vw";
-        Reset()
-        boolsk = false;
+        document.getElementById("dataLayers").style.width = "0vw";
+        boolskNav = false;
     }
 
+    function openBox(id) {
+        if (boolskBox) {
+            closeBox(box)
+        }
+        if (boolskNav) {
+            closeNav();
+        }
+        document.getElementById(String(id)).style.width = "40vw";
+        document.getElementById(String(id)).style.height = "40vh";
+        document.getElementById(String(id)).style.borderWidth = "20px";
+        boolskBox = true;
+        box = id;
+        deactivateMap();
+    }
+
+    function closeBox(id) {
+        document.getElementById(String(id)).style.width = "0vw";
+        document.getElementById(String(id)).style.height = "0vh";
+        document.getElementById(String(id)).style.borderWidth = "0px";
+        boolskBox = false;
+        box = null;
+        activateMap();
+    }
 
 </script>
\ No newline at end of file