diff --git a/html/assets/css/base.css b/html/assets/css/base.css
index 09a6fee..0b3712a 100644
--- a/html/assets/css/base.css
+++ b/html/assets/css/base.css
@@ -22,6 +22,10 @@ h1 {
     display: flex;
     flex-direction: column;
 }
+#console {
+    overflow-y: scroll;
+    max-height: 300px;
+}
 #note-render {
     display: inline-block;
     margin: 0 auto;
diff --git a/html/assets/img/favicon.ico b/html/assets/img/favicon.ico
index 5272c72..bcb4724 100644
Binary files a/html/assets/img/favicon.ico and b/html/assets/img/favicon.ico differ
diff --git a/html/assets/scripts/midi.js b/html/assets/scripts/midi.js
index 63d2097..6a706be 100644
--- a/html/assets/scripts/midi.js
+++ b/html/assets/scripts/midi.js
@@ -1,7 +1,8 @@
 // prepare svg object for later use
 var keyboard = document.getElementById("piano");
 var svgDoc; // loaded keyboard svg
-const keysB = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86]
+var midiAccess = null;
+const black_keys = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86] 
 
 window.addEventListener("load", function() {
     svgDoc = keyboard.contentDocument;
@@ -12,39 +13,72 @@ function setKeyState(note, state) {
     let key = svgDoc.getElementById(String(note));
     if (state) {
         key.style.fill = "red";
-    } else if (keysB.includes(note)) {
+    } else if (black_keys.includes(note)) {
         key.style.fill = "black";
     } else {
         key.style.fill = "white";
     }
 }
 
-// Check if browser supports MIDI
-if (!navigator.requestMIDIAccess) {
-    console.log('WebMIDI is not supported in this browser. Or Site was not opened via HTTPS');
-}
-
-// Attempt to establish a connection to the MIDI device
-navigator.requestMIDIAccess()
-    .then(onMIDISuccess, onMIDIFailure);
-
-function onMIDISuccess(midiAccess) {
-    console.log(midiAccess);
-
-    for (var input of midiAccess.inputs.values()) {
-        input.onmidimessage = getMIDIMessage;
+/**
+ * Establishes MIDI connection
+ */
+function midiSetup() {
+    // Check if MIDI connection is possible at all
+    if (!navigator.requestMIDIAccess) {
+        alert('WebMIDI is not supported in this browser. Or Site was not accessed via HTTPS');
+        return
     }
+    // Attempt to establish a MIDI connection. Handle success or failure
+    console.log("1231234");
+    window.navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
+    console.log("4321321");
 }
 
+/**
+ * Handle successful MIDI connection
+ * @param {*} midiAccess 
+ */
+function onMIDISuccess(access) {
+    midiAccess = access;
+    console.log("access successful");
+
+    var input_list = [];
+
+    var iter = midiAccess.inputs.values();
+    for (let obj = iter.next(); !obj.done; obj = iter.next()) {
+        input_list.push(obj.value);
+    }
+
+    // Add event listener do all devices
+    for (var i = 0; i < input_list.length; i++) {
+        input_list[i].onmidimessage = getMIDIMessage;
+        console.log("amogus");
+    }
+
+}
+
+/**
+ * Handle MIDI failure
+ */
 function onMIDIFailure() {
-    console.log('Could not access your MIDI devices.');
+    let message = "Failed to access your MIDI device";
+    console.log(message);
+    alert(message);
 }
 
+/**
+ * Handle incoming MIDI Messages
+ * @param {*} midiMessage 
+ */
 function getMIDIMessage(midiMessage) {
+    console.log("sugoma");
     var command  = midiMessage.data[0];
     var note     = midiMessage.data[1] - 20; // sorry midi standard
     var velocity = (midiMessage.data.length > 2) ? midiMessage.data[2] : 0;
-    
+
+    console.log(`MIDI{ command : ${command}, note : ${note}, velocity : ${velocity}}`);
+
     if (command == 144){
         console.log(note);
         if (velocity == 0) {
@@ -55,4 +89,7 @@ function getMIDIMessage(midiMessage) {
             task.changeKeyState(note,true);
         }
     }
-}
\ No newline at end of file
+}
+
+// code executed on include
+window.onload = (x) => { midiSetup(); }
diff --git a/html/debug.html b/html/debug.html
new file mode 100644
index 0000000..a542477
--- /dev/null
+++ b/html/debug.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<head>
+    <title>MidiTrainer - DEBUG</title>
+    <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
+    <link rel="stylesheet" href="assets/css/reset.css">
+    <link rel="stylesheet" href="assets/css/base.css">
+</head>
+<body>
+    <div class="container">
+        <div id="note-render"></div>
+        <div class="checkboxes">
+            <input type="checkbox" id="naturals" checked><label for="naturals">Natural</label>
+            <input type="checkbox" id="sharps"><label for="sharps">Sharps</label>
+            <input type="checkbox" id="flats"><label for="flats">Flats</label>
+            <input type="checkbox" id="extended"><label for="extended">Extended</label>
+        </div>
+        <object id="piano" data="assets/img/piano-keyboard.svg" type="image/svg+xml" width="100%" type="image/svg+xml"></object>
+    </div>
+    <div class="container" id="console">
+
+    </div>
+    <script>
+        (function () {
+            var old = console.log;
+            var logger = document.getElementById('console');
+            console.log = function (message) {
+                if (typeof message == 'object') {
+                    logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
+                } else {
+                    logger.innerHTML += message + '<br />';
+                }
+            }
+        })();
+        console.log("Debug console started...");
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script>
+    <script src="assets/scripts/map.js"></script>
+    <script src="assets/scripts/render.js"></script>
+    <script src="assets/scripts/midi.js"></script>
+    <script src="assets/scripts/practice.js"></script>
+</body>
\ No newline at end of file