diff --git a/index.html b/index.html
index 6cb825fdffa692b84b3dae53337b81920b60bc44..7a217f002ca4ee834683d37d9df0002568a8eb61 100644
--- a/index.html
+++ b/index.html
@@ -45,8 +45,11 @@
                 </svg>
             </div>
 
-            <div style="margin-left: 10px; font-size: 18px;">
-                <p>Hei<br>på<br>deg!<br><br>Hu<br>og<br>Hei :)</p>
+            <div style="margin-left: 10px; font-size: 18px; height: 60vh;">
+                <p id="layers"></p>
+            </div>
+            <div class="dropBox" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
+                <p>Drop files here 8)</p>
             </div>
         </div>
         
diff --git a/javascript/dropFiles.js b/javascript/dropFiles.js
index 85a1461baf1ef04cb200d16f5077c70120a78a21..0e8258c39bdf72f0847cda637c305a36c16606a2 100644
--- a/javascript/dropFiles.js
+++ b/javascript/dropFiles.js
@@ -1,29 +1,29 @@
 function dropHandler(event) {
-    console.log("File(s) dropped");
-
-    // Unngå at filene åpnes som default:
     event.preventDefault();
+    event.stopPropagation();
 
     if (event.dataTransfer.items) {
-        // Bruker DataTransferItemList grensesnittet for å aksessere filen(e):
+        // Use DataTransferItemList interface to access the file(s)
         [...event.dataTransfer.items].forEach((item, i) => {
-            // Hvis droppet element ikke er en fil, avvis den:
-            if (item.kind === "file") {
-                const file = item.getAsFile();
-                console.log('... file[${i}].name =${file.name}');
-            }
+          // If dropped items aren't files, reject them
+          if (item.kind === "file") {
+            const file = item.getAsFile();
+            let layer = file.name;
+            document.getElementById("layers").innerHTML = layer;
+            console.log(`… file[${i}].name = ${file.name}`);
+          }
         });
     } else {
-        // Bruk DataTransfer grensesnittet for å aksessere filen(e):
+        // Use DataTransfer interface to access the file(s)
         [...event.dataTransfer.files].forEach((file, i) => {
-            console.log('... file[${i}].name = ${file.name}');
+            let layer = file.name;
+            document.getElementById("layers").innerHTML = layer;
+            console.log(`… file[${i}].name = ${file.name}`);
         });
     }
 }
 
 function dragOverHandler(event) {
-    console.log("File(s) in drop zone");
-
-    // Unngå at filene åpnes som default:
     event.preventDefault();
+    event.stopPropagation();
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 97d753a79b4a614fb3b6b58ccab975b4bcb97b8a..b1d3433bc4e9561975b319e15618caebc6eab4b8 100644
--- a/style.css
+++ b/style.css
@@ -41,6 +41,19 @@
     flex-direction: row;
 }
 
+.dropBox {
+    font-family: monospace;
+    font-size: larger;
+    width: 20vw;
+    text-align: center;
+    border-color: white;
+    border-style: dotted;
+    border-width: 5px;
+    border-radius: 10px;
+    margin-left: 2vw;
+    margin-right: 2vw;
+}
+
 .button {
     font-family: monospace;
     font-weight: bolder;