diff --git a/django_admin_keyboard_shortcuts/static/admin/css/admin-doc.css b/django_admin_keyboard_shortcuts/static/admin/css/admin-doc.css
new file mode 100644
index 0000000..be83a31
--- /dev/null
+++ b/django_admin_keyboard_shortcuts/static/admin/css/admin-doc.css
@@ -0,0 +1,7 @@
+#content-main {
+    float: none;
+}
+
+#keyboard-shortcuts-docs {
+   padding: 1.25em 0em;
+}
\ No newline at end of file
diff --git a/django_admin_keyboard_shortcuts/static/admin/css/shortcuts.css b/django_admin_keyboard_shortcuts/static/admin/css/shortcuts.css
index 74f77f8..973ba31 100644
--- a/django_admin_keyboard_shortcuts/static/admin/css/shortcuts.css
+++ b/django_admin_keyboard_shortcuts/static/admin/css/shortcuts.css
@@ -1,3 +1,15 @@
+
+html[data-theme="light"],
+:root {
+  /* In light mode, this is the same as --darker-bg */
+  --keyboard-shortcuts-bg: #f8f8f8; 
+} 
+
+html[data-theme="dark"] {
+  /* In dark mode, this is a bit lighter than --darker-bg */
+  --keyboard-shortcuts-bg: #292929;
+}
+
 kbd {
   background-color: var(--body-bg);
   border-radius: 3px;
@@ -14,13 +26,17 @@ kbd {
 }
 
 dialog {
-  background-color: var(--darkened-bg);
+  background-color: var(--keyboard-shortcuts-bg);
   color: var(--body-fg);
   min-width: 20em;
   padding: 1em;
-  height: 50vh;
+  height: 65vh;
   width: 40vw;
 
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+
   .dialog-heading {
     align-items: center;
     display: flex;
@@ -28,12 +44,13 @@ dialog {
 
     h2 {
       margin: 0;
+      color: var(--body-fg);
     }
   }
 
   h3 {
     background: var(--header-bg);
-    color: var(--header-color);
+    color: var(--header-link-color);
     margin: 0;
     padding: 0.5em 1em;
   }
@@ -58,8 +75,13 @@ dialog {
       column-gap: 1em;
       display: flex;
       justify-content: space-between;
-      border-top: 1px solid var(--border-color);
+      border-top: 0.5px solid var(--body-quiet-color);
       padding: 1em;
+      font-size: 1em;
+    }
+
+    li:first-child {
+      border-top: none;
     }
   }
 }
@@ -67,4 +89,4 @@ dialog {
 #model-list-dialog-search {
   margin: 0.5em 0em;
   width: 12vw;
-}
+}
\ No newline at end of file
diff --git a/django_admin_keyboard_shortcuts/static/admin/js/shortcuts.js b/django_admin_keyboard_shortcuts/static/admin/js/shortcuts.js
index 1889862..e18ff2a 100644
--- a/django_admin_keyboard_shortcuts/static/admin/js/shortcuts.js
+++ b/django_admin_keyboard_shortcuts/static/admin/js/shortcuts.js
@@ -56,10 +56,16 @@ function isFocusedTextField() {
     }
 
     function handleKeyDown(event) {
-        console.log("keydown")
-        if (isFocusedTextField()) { return; }
+        console.log("keydown", event.key);
+        if (isFocusedTextField()) {
+            return;
+        }
+
+        if (event.key === "?") {
+            showShortcutsDialog();
+            return;
+        }
         const shortcut = previousKey ? `${previousKey} ${event.key}` : event.key;
-        console.log(shorcutFunctions);
         if (shortcutFunctions.has(shortcut)) {
             console.log("has shortcut");
             shortcutFunctions.get(shortcut)();
diff --git a/django_admin_keyboard_shortcuts/templates/admin_doc/index.html b/django_admin_keyboard_shortcuts/templates/admin_doc/index.html
new file mode 100644
index 0000000..41e01ee
--- /dev/null
+++ b/django_admin_keyboard_shortcuts/templates/admin_doc/index.html
@@ -0,0 +1,21 @@
+{% extends "admin_doc/index.html" %}
+{% load static i18n %}
+
+{% block extrahead_shortcuts %}
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static "admin/css/admin-doc.css" %}">
+{% endblock extrahead_shortcuts %}
+
+{% block content %}
+  {{ block.super }}
+
+  <div id="keyboard-shortcuts-docs">
+    <h1>
+      Keyboard shortcuts
+    </h1>
+
+    <p> You can access keyboard shortcuts on any page by pressing the <kbd>?</kbd> key. </p>
+
+  </div>
+
+{% endblock content %}
\ No newline at end of file