diff --git a/templates/debug/template.css b/templates/debug/template.css
index 2fa49a9..dc915b6 100644
--- a/templates/debug/template.css
+++ b/templates/debug/template.css
@@ -1,29 +1,42 @@
-ul, li {
+.container {
     margin: 0;
     padding: 0;
     list-style: none;
+    display: flex;
+    flex-flow: row wrap; 
+    max-width: 600px;
 }
 
-li {
-    display: inline-block;
-    min-width: 40px;
-    padding: 5px;
-    margin: 0 5px 5px 0;
-    background: #333333;
+.box {
+    padding: 2px;
     line-height: 1;
+    box-sizing: border-box;
 }
-li.medium {
-    min-width: 95px;
+.box.small {
+    width: 12.5%;
+    min-width: 50px;
 }
-li.large {
-    min-width: 205px;
+.box.medium {
+    width: 25%;
+    min-width: 100px;
 }
-li.extra-large {
-    min-width: 425px;
+.box.large {
+    width: 50%;
+    min-width: 200px;
+}
+.box.extra-large {
+    width: 100%;
+    min-width: 400px;
+}
+
+.box .content {
+    background: #333333;
+    padding: 5px;
 }
 
 .label {
     font-size: 0.8em;
+    font-weight: 600;
     color: #aaaaaa;
 }
 
diff --git a/templates/debug/template.html b/templates/debug/template.html
index 400eec4..ef4c8a1 100644
--- a/templates/debug/template.html
+++ b/templates/debug/template.html
@@ -1,32 +1,40 @@
 <link rel="stylesheet" href="templates/debug/template.css">
 <script async src="templates/debug/template.js"></script>
 <div class="info">
-    <ul>
-        <li id="info-id" class="extra-large">
-            <div class="label">ID</div>
-            <div class="value"></div>
-        </li>
-    </ul>
+    <div class="container">
+        <div id="info-id" class="box extra-large">
+            <div class="content">
+                <div class="label">ID</div>
+                <div class="value"></div>
+            </div>
+        </div>
+    </div>
 </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 class="container">
+        <div id="info-timestamp" class="box large">
+            <div class="content">
+                <div class="label">TIMESTAMP</div>
+                <div class="value"></div>
+            </div>
+        </div>
+        <div id="info-index" class="box medium">
+            <div class="content">
+                <div class="label">INDEX</div>
+                <div class="value"></div>
+            </div>
+        </div>
+        <div id="info-mapping" class="box medium">
+            <div class="content">
+                <div class="label">MAPPING</div>
+                <div class="value"></div>
+            </div>
+        </div>
+    </div>
 </div>
 <div class="axes">
-    <ul></ul>
+    <div class="container"></div>
 </div>
 <div class="buttons">
-    <ul></ul>
+    <div class="container"></div>
 </div>
diff --git a/templates/debug/template.js b/templates/debug/template.js
index 4417874..f551d88 100644
--- a/templates/debug/template.js
+++ b/templates/debug/template.js
@@ -3,8 +3,8 @@
     $timestamp = $('#info-timestamp .value');
     $index = $('#info-index .value');
     $mapping = $('#info-mapping .value');
-    $axes = $('.axes ul');
-    $buttons = $('.buttons ul');
+    $axes = $('.axes .container');
+    $buttons = $('.buttons .container');
 
     gamepad = window.gamepad;
     activeGamepad = gamepad.getActiveGamepad();
@@ -20,19 +20,23 @@
 
     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>'
+            '<div class="box medium">' +
+            '   <div class="content">' +
+            '       <div class="label">AXIS ' + axisIndex + '</div>' +
+            '       <div class="value" data-axis="' + axisIndex + '">0</div>' +
+            '   </div>' +
+            '</div>'
         );
     }
 
     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>'
+            '<div class="box small">' +
+            '   <div class="content">' +
+            '       <div class="label">B' + buttonIndex + '</div>' +
+            '       <div class="value" data-button="' + buttonIndex + '">0</div>' +
+            '   </div>' +
+            '</div>'
         );
     }