diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 1b65f33de3..4668eae90e 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -18,6 +18,7 @@ import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
+import "../panels/developer-tools/ha-panel-developer-tools";
 
 const NON_SWIPABLE_PANELS = ["map"];
 
@@ -98,6 +99,17 @@ export class HomeAssistantMain extends LitElement {
           ></ha-sidebar>
         </app-drawer>
 
+        <app-drawer
+          id="drawer"
+          align="end"
+          slot="drawer"
+          .disableSwipe=${true}
+          .swipeOpen=${false}
+          .persistent=${false}
+        >
+          <div>test</div>
+        </app-drawer>
+
         <partial-panel-resolver
           .narrow=${this.narrow}
           .hass=${hass}
@@ -176,6 +188,12 @@ export class HomeAssistantMain extends LitElement {
       this.narrow || this.hass.dockedSidebar !== "auto"
     );
 
+    // if (localStorage["showDeveloperTools"] === "true") {
+    //   this.drawer.open();
+    // } else {
+    //   this.drawer.close();
+    // }
+
     if (changedProps.has("route") && this._sidebarNarrow) {
       this.drawer.close();
     }
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts
index 7142419b8f..cd7c38e558 100644
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -5,7 +5,7 @@ import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
 import { HassElement } from "../state/hass-element";
-import QuickBarMixin from "../state/quick-bar-mixin";
+import ShortcutsMixin from "../state/shortcuts-mixin";
 import { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import {
@@ -29,7 +29,7 @@ const panelUrl = (path: string) => {
 };
 
 @customElement("home-assistant")
-export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
+export class HomeAssistantAppEl extends ShortcutsMixin(HassElement) {
   @state() private _route: Route;
 
   private _panelUrl: string;
diff --git a/src/state/quick-bar-mixin.ts b/src/state/shortcuts-mixin.ts
similarity index 89%
rename from src/state/quick-bar-mixin.ts
rename to src/state/shortcuts-mixin.ts
index a0e98b327c..2fb53ec869 100644
--- a/src/state/quick-bar-mixin.ts
+++ b/src/state/shortcuts-mixin.ts
@@ -32,6 +32,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       tinykeys(window, {
         e: (ev) => this._showQuickBar(ev),
         c: (ev) => this._showQuickBar(ev, true),
+        d: () => this._toggleDeveloperToolsSidebar(),
       });
     }
 
@@ -51,6 +52,12 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       );
     }
 
+    private _toggleDeveloperToolsSidebar(): void {
+      localStorage.showDeveloperTools =
+        localStorage.showDeveloperTools !== "true";
+      this.requestUpdate();
+    }
+
     private _canOverrideAlphanumericInput(e: KeyboardEvent) {
       const el = e.composedPath()[0] as any;