diff --git a/templates/debug/template.css b/templates/debug/template.css
index fb2706a..2fa49a9 100644
--- a/templates/debug/template.css
+++ b/templates/debug/template.css
@@ -6,27 +6,28 @@ ul, li {
 
 li {
     display: inline-block;
-    min-width: 50px;
-    padding: 3px;
+    min-width: 40px;
+    padding: 5px;
     margin: 0 5px 5px 0;
     background: #333333;
     line-height: 1;
 }
 li.medium {
-    min-width: 100px;
+    min-width: 95px;
 }
 li.large {
-    min-width: 200px;
+    min-width: 205px;
+}
+li.extra-large {
+    min-width: 425px;
 }
 
-label {
-    width: 20px;
+.label {
     font-size: 0.8em;
     color: #aaaaaa;
 }
 
-value {
-    display: block;
+.value {
     text-align: right;
     margin-top: 3px;
     overflow: hidden;
diff --git a/templates/debug/template.html b/templates/debug/template.html
index f47e57d..400eec4 100644
--- a/templates/debug/template.html
+++ b/templates/debug/template.html
@@ -2,16 +2,31 @@
 <script async src="templates/debug/template.js"></script>
 <div class="info">
     <ul>
-        <li id="info-timestamp" class="large"><label>TIMESTAMP</label>
-            <value></value>
-        </li>
-        <li id="info-index"><label>INDEX</label>
-            <value></value>
-        </li>
-        <li id="info-mapping" class="medium"><label>MAPPING</label>
-            <value></value>
+        <li id="info-id" class="extra-large">
+            <div class="label">ID</div>
+            <div class="value"></div>
         </li>
     </ul>
 </div>
-<div class="axes"><ul></ul></div>
-<div class="buttons"><ul></ul></div>
+<div class="info">
+    <ul>
+        <li id="info-timestamp" class="large">
+            <div class="label">TIMESTAMP</div>
+            <div class="value"></div>
+        </li>
+        <li id="info-index" class="medium">
+            <div class="label">INDEX</div>
+            <div class="value"></div>
+        </li>
+        <li id="info-mapping" class="medium">
+            <div class="label">MAPPING</div>
+            <div class="value"></div>
+        </li>
+    </ul>
+</div>
+<div class="axes">
+    <ul></ul>
+</div>
+<div class="buttons">
+    <ul></ul>
+</div>
diff --git a/templates/debug/template.js b/templates/debug/template.js
index 9841702..4417874 100644
--- a/templates/debug/template.js
+++ b/templates/debug/template.js
@@ -1,52 +1,61 @@
-var $timestamp = $('#info-timestamp value'),
-    $index = $('#info-index value'),
-    $mapping = $('#info-mapping value'),
-    $axes = $('.axes ul'),
+(() => {
+    $id = $('#info-id .value');
+    $timestamp = $('#info-timestamp .value');
+    $index = $('#info-index .value');
+    $mapping = $('#info-mapping .value');
+    $axes = $('.axes ul');
     $buttons = $('.buttons ul');
 
-var gamepad = gamepads[activeGamepadIndex];
+    gamepad = window.gamepad;
+    activeGamepad = gamepad.getActiveGamepad();
 
-$timestamp.html(gamepad.timestamp);
-$index.html(gamepad.index);
-$mapping.html(gamepad.mapping);
+    if (!activeGamepad) {
+        return;
+    }
 
-for (var axisIndex = 0; axisIndex < gamepad.axes.length; axisIndex++) {
-    $axes.append(
-        '<li class="medium">' +
-        '    <label>AXIS ' + axisIndex + '</label>' +
-        '    <value data-axis="' + axisIndex + '">0</value>' +
-        '</li>'
-    );
-}
+    $id.html(activeGamepad.id);
+    $timestamp.html(activeGamepad.timestamp);
+    $index.html(activeGamepad.index);
+    $mapping.html(activeGamepad.mapping);
 
-for (var buttonIndex = 0; buttonIndex < gamepad.buttons.length; buttonIndex++) {
-    $buttons.append(
-        '<li>' +
-        '    <label>B' + buttonIndex + '</label>' +
-        '    <value data-button="' + buttonIndex + '">0</value>' +
-        '</li>'
-    );
-}
+    for (let axisIndex = 0; axisIndex < activeGamepad.axes.length; axisIndex++) {
+        $axes.append(
+            '<li class="medium">' +
+            '    <div class="label">AXIS ' + axisIndex + '</div>' +
+            '    <div class="value" data-axis="' + axisIndex + '">0</div>' +
+            '</li>'
+        );
+    }
 
-function updateButton($button) {
-    updateElem($button);
-}
+    for (let buttonIndex = 0; buttonIndex < activeGamepad.buttons.length; buttonIndex++) {
+        $buttons.append(
+            '<li>' +
+            '    <div class="label">B' + buttonIndex + '</div>' +
+            '    <div class="value" data-button="' + buttonIndex + '">0</div>' +
+            '</li>'
+        );
+    }
 
-function updateAxis($axis) {
-    updateElem($axis, 6);
-}
+    gamepad.updateButton = function($button) {
+        updateElem($button);
+    }
 
-function updateElem($elem, precision = 2) {
-    updateTimestamp();
+    gamepad.updateAxis = function($axis) {
+        updateElem($axis, 6);
+    }
 
-    var value = parseFloat($elem.attr('data-value'), 10).toFixed(precision);
-    $elem.html(value);
-    var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value));
-    $elem.css({
-        'color': 'rgb(' + color + ', ' + color + ', ' + color + ')'
-    });
-}
+    function updateElem($elem, precision = 2) {
+        updateTimestamp();
 
-function updateTimestamp() {
-    $timestamp.html(gamepad.timestamp);
-}
+        var value = parseFloat($elem.attr('data-value'), 10).toFixed(precision);
+        $elem.html(value);
+        var color = Math.floor(255 * 0.3 + 255 * 0.7 * Math.abs(value));
+        $elem.css({
+            'color': 'rgb(' + color + ', ' + color + ', ' + color + ')'
+        });
+    }
+
+    function updateTimestamp() {
+        $timestamp.html(activeGamepad.timestamp);
+    }
+})();