diff --git a/src/css/ingame_hud/entity_debugger.scss b/src/css/ingame_hud/entity_debugger.scss
index 15f03848..6d0b4c52 100644
--- a/src/css/ingame_hud/entity_debugger.scss
+++ b/src/css/ingame_hud/entity_debugger.scss
@@ -1,43 +1,61 @@
 #ingame_HUD_EntityDebugger {
     position: absolute;
+    background: $ingameHudBg;
+    @include S(padding, 5px);
     @include S(right, 30px);
-    @include S(top, 200px);
 
-    font-size: 14px;
-    line-height: 16px;
-    color: #fff;
-    background: rgba(0, 10, 20, 0.7);
-    padding: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include SuperSmallText;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+
+    > label {
+        text-transform: uppercase;
+    }
+
+    .hint {
+        color: #aaa;
+    }
+
     &,
     * {
         pointer-events: all;
     }
 
-    .flag {
-        display: inline-block;
-        background: #333438;
-        @include S(padding, 2px);
-        @include S(margin-right, 2px);
+    .propertyTable,
+    .entityComponents,
+    .entityComponents .object > div {
+        @include S(margin-top, 5px);
 
-        u {
-            opacity: 0.5;
-        }
+        display: grid;
+        grid-template-columns: 1fr auto;
+        @include S(column-gap, 10px);
     }
 
-    .components {
-        @include S(margin-top, 4px);
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        @include S(grid-gap, 3px);
-        .component {
-            @include S(padding, 2px);
-            background: #333;
-            display: flex;
-            flex-direction: column;
+    .entityComponents {
+        grid-column: 1 / 3;
+        font-family: "Roboto Mono", "Fira Code", monospace;
+        font-size: 90%;
+        @include S(letter-spacing, -0.5px);
 
-            .data {
-                @include S(width, 150px);
-                @include S(height, 130px);
+        label,
+        span {
+            line-height: 140%;
+
+            &:not(span) {
+                opacity: 0.5;
+            }
+        }
+
+        .object {
+            grid-column: 1 / 3;
+            line-height: 140%;
+
+            > div {
+                @include S(margin-left, 4px);
             }
         }
     }
diff --git a/src/js/game/hud/hud.js b/src/js/game/hud/hud.js
index 3edc4e17..111f062a 100644
--- a/src/js/game/hud/hud.js
+++ b/src/js/game/hud/hud.js
@@ -108,7 +108,7 @@ export class GameHUD {
             this.parts.keybindingOverlay = new HUDKeybindingOverlay(this.root);
         }
 
-        if (G_IS_DEV && globalConfig.debug.enableEntityInspector) {
+        if (queryParamOptions.sandboxMode || (G_IS_DEV && globalConfig.debug.enableEntityInspector)) {
             this.parts.entityDebugger = new HUDEntityDebugger(this.root);
         }
 
diff --git a/src/js/game/hud/parts/entity_debugger.js b/src/js/game/hud/parts/entity_debugger.js
index 80f15eea..6f501d6b 100644
--- a/src/js/game/hud/parts/entity_debugger.js
+++ b/src/js/game/hud/parts/entity_debugger.js
@@ -1,6 +1,7 @@
 import { BaseHUDPart } from "../base_hud_part";
 import { makeDiv, removeAllChildren } from "../../../core/utils";
 import { globalConfig } from "../../../core/config";
+import { DynamicDomAttach } from "../dynamic_dom_attach";
 
 export class HUDEntityDebugger extends BaseHUDPart {
     createElements(parent) {
@@ -9,9 +10,14 @@ export class HUDEntityDebugger extends BaseHUDPart {
             "ingame_HUD_EntityDebugger",
             [],
             `
-            Tile below cursor: <span class="mousePos"></span><br>
-            Chunk below cursor: <span class="chunkPos"></span><br>
-            <div class="entityInfo"></div>
+            <label>Entity Debugger</label>
+            <span class="hint">Use F8 to toggle this overlay</span>
+
+            <div class="propertyTable">
+                <div>Tile below cursor</div> <span class="mousePos"></span>
+                <div>Chunk below cursor</div> <span class="chunkPos"></span>
+                <div class="entityComponents"></div>
+            </div>
         `
         );
 
@@ -19,11 +25,57 @@ export class HUDEntityDebugger extends BaseHUDPart {
         this.mousePosElem = this.element.querySelector(".mousePos");
         /** @type {HTMLElement} */
         this.chunkPosElem = this.element.querySelector(".chunkPos");
-        this.entityInfoElem = this.element.querySelector(".entityInfo");
+        this.componentsElem = this.element.querySelector(".entityComponents");
     }
 
     initialize() {
+        this.root.gameState.inputReciever.keydown.add(key => {
+            if (key.keyCode === 119) {
+                // F8
+                this.toggle();
+            }
+        });
+
         this.root.camera.downPreHandler.add(this.onMouseDown, this);
+
+        this.visible = !G_IS_DEV;
+        this.domAttach = new DynamicDomAttach(this.root, this.element);
+    }
+
+    toggle() {
+        this.visible = !this.visible;
+    }
+
+    propertyToHTML(name, val, indent = 0) {
+        if (val !== null && typeof val === "object") {
+            if (indent > 10) {
+                return "";
+            }
+
+            // Array is displayed like object, with indexes
+            const typeName = `(${val.constructor ? val.constructor.name : "unknown"})`;
+            const colorStyle = `color: hsl(${30 * indent}, 100%, 80%)`;
+
+            let html = `<details class="object" style="${colorStyle}">
+                            <summary>${name} ${typeName}</summary>
+                            <div>`;
+
+            for (const property in val) {
+                const isRoot = val[property] == this.root;
+
+                html += this.propertyToHTML(property, isRoot ? "<root>" : val[property], indent + 1);
+            }
+
+            html += "</div></details>";
+
+            return html;
+        }
+
+        const displayValue = (val + "")
+            .replaceAll("&", "&amp;")
+            .replaceAll("<", "&lt;")
+            .replaceAll(">", "&gt;");
+        return `<label>${name}</label> <span>${displayValue}</span>`;
     }
 
     update() {
@@ -40,33 +92,31 @@ export class HUDEntityDebugger extends BaseHUDPart {
 
         const entity = this.root.map.getTileContent(worldTile, this.root.currentLayer);
         if (entity) {
-            removeAllChildren(this.entityInfoElem);
-            let html = "Entity";
+            removeAllChildren(this.componentsElem);
+            let html = "";
 
-            const flag = (name, val) =>
-                `<span class='flag' data-value='${val ? "1" : "0"}'><u>${name}</u> ${val}</span>`;
+            const property = (strings, val) => `<label>${strings[0]}</label> <span>${val}</span>`;
 
-            html += "<div class='entityFlags'>";
-            html += flag("registered", entity.registered);
-            html += flag("uid", entity.uid);
-            html += flag("destroyed", entity.destroyed);
-            html += "</div>";
-
-            html += "<div class='components'>";
+            html += property`registered ${entity.registered}`;
+            html += property`uid ${entity.uid}`;
+            html += property`destroyed ${entity.destroyed}`;
 
             for (const componentId in entity.components) {
                 const data = entity.components[componentId];
-                html += "<div class='component'>";
-                html += "<strong class='name'>" + componentId + "</strong>";
-                html += "<textarea class='data'>" + JSON.stringify(data.serialize(), null, 2) + "</textarea>";
+                html += "<details class='object'>";
+                html += "<summary>" + componentId + "</summary><div>";
 
-                html += "</div>";
+                for (const property in data) {
+                    html += this.propertyToHTML(property, data[property]);
+                }
+
+                html += "</div></details>";
             }
 
-            html += "</div>";
-
-            this.entityInfoElem.innerHTML = html;
+            this.componentsElem.innerHTML = html;
         }
+
+        this.domAttach.update(this.visible);
     }
 
     onMouseDown() {}