diff --git a/debug_toolbar/panels/settings.py b/debug_toolbar/panels/settings.py
index 4f91e39fa..ec3ba4212 100644
--- a/debug_toolbar/panels/settings.py
+++ b/debug_toolbar/panels/settings.py
@@ -1,8 +1,9 @@
+from pprint import pformat
+
 from django.utils.translation import gettext_lazy as _
 from django.views.debug import get_default_exception_reporter_filter
 
 from debug_toolbar.panels import Panel
-from debug_toolbar.sanitize import force_str
 
 get_safe_settings = get_default_exception_reporter_filter().get_safe_settings
 
@@ -27,7 +28,7 @@ def generate_stats(self, request, response):
         self.record_stats(
             {
                 "settings": {
-                    key: force_str(value)
+                    key: pformat(value)
                     for key, value in sorted(get_safe_settings().items())
                 }
             }
diff --git a/debug_toolbar/panels/sql/utils.py b/debug_toolbar/panels/sql/utils.py
index 305543aec..2e0382f0f 100644
--- a/debug_toolbar/panels/sql/utils.py
+++ b/debug_toolbar/panels/sql/utils.py
@@ -1,5 +1,6 @@
 from functools import cache, lru_cache
 from html import escape
+from itertools import cycle
 
 import sqlparse
 from django.dispatch import receiver
@@ -136,27 +137,15 @@ def contrasting_color_generator():
     and then vary subsequent bits systematically.
     """
 
-    def rgb_to_hex(rgb):
-        return "#{:02x}{:02x}{:02x}".format(*tuple(rgb))
-
-    triples = [
-        (1, 0, 0),
-        (0, 1, 0),
-        (0, 0, 1),
-        (1, 1, 0),
-        (0, 1, 1),
-        (1, 0, 1),
-        (1, 1, 1),
-    ]
-    n = 1 << 7
-    so_far = [[0, 0, 0]]
-    while True:
-        if n == 0:  # This happens after 2**24 colours; presumably, never
-            yield "#000000"  # black
-        copy_so_far = list(so_far)
-        for triple in triples:
-            for previous in copy_so_far:
-                rgb = [n * triple[i] + previous[i] for i in range(3)]
-                so_far.append(rgb)
-                yield rgb_to_hex(rgb)
-        n >>= 1
+    return cycle(
+        [
+            "#0C375A",
+            "#21A0A0",
+            "#FFC300",
+            "#FF5733",
+            "#C70039",
+            "#900C3F",
+            "#581845",
+            "#F1C40F",
+        ]
+    )
diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index 120b8958c..90144a0d5 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -21,38 +21,45 @@
     --djdt-panel-content-table-background-color: var(--djdt-background-color);
     --djdt-panel-title-background-color: #ffc;
     --djdt-djdt-panel-content-table-strip-background-color: #f5f5f5;
-    --djdt--highlighted-background-color: lightgrey;
+    --djdt-highlighted-background-color: #ffc;
     --djdt-toggle-template-background-color: #bbb;
 
     --djdt-sql-font-color: #333;
-    --djdt-pre-text-color: #555;
-    --djdt-path-and-locals: #777;
+    --djdt-pre-text-color: #666;
+    --djdt-path-and-locals: black;
+    --djdt-stack-color: #666;
     --djdt-stack-span-color: black;
     --djdt-template-highlight-color: #333;
 
-    --djdt-table-border-color: #ccc;
-    --djdt-button-border-color: var(--djdt-table-border-color);
+    --djdt-table-header-color: #666;
+    --djdt-table-header-background-color: #f8f8f8;
+    --djdt-table-border-color: #ddd;
+    --djdt-button-border-color: #ccc;
+    --djdt-button-hover-border-color: #666;
     --djdt-pre-border-color: var(--djdt-table-border-color);
     --djdt-raw-border-color: var(--djdt-table-border-color);
 }
 
 #djDebug[data-theme="dark"] {
     --djdt-font-color: #f8f8f2;
-    --djdt-background-color: #1e293bff;
-    --djdt-panel-content-background-color: #0f1729ff;
+    --djdt-background-color: #121212;
+    --djdt-panel-content-background-color: #121212;
     --djdt-panel-content-table-background-color: var(--djdt-background-color);
-    --djdt-panel-title-background-color: #242432;
-    --djdt-djdt-panel-content-table-strip-background-color: #324154ff;
-    --djdt--highlighted-background-color: #2c2a7dff;
+    --djdt-panel-title-background-color: #417690;
+    --djdt-djdt-panel-content-table-strip-background-color: #171717;
+    --djdt-highlighted-background-color: #00363a;
     --djdt-toggle-template-background-color: #282755;
 
     --djdt-sql-font-color: var(--djdt-font-color);
     --djdt-pre-text-color: var(--djdt-font-color);
     --djdt-path-and-locals: #65758cff;
-    --djdt-stack-span-color: #7c8fa4;
+    --djdt-stack-color: #888;
+    --djdt-stack-span-color: #ccc;
     --djdt-template-highlight-color: var(--djdt-stack-span-color);
 
-    --djdt-table-border-color: #324154ff;
+    --djdt-table-header-color: #f8f8f8;
+    --djdt-table-header-background-color: #212121;
+    --djdt-table-border-color: #353535;
     --djdt-button-border-color: var(--djdt-table-border-color);
     --djdt-pre-border-color: var(--djdt-table-border-color);
     --djdt-raw-border-color: var(--djdt-table-border-color);
@@ -146,34 +153,32 @@
     transition: none;
 }
 
-#djDebug button {
-    background-color: #eee;
-    background-image: linear-gradient(to bottom, #eee, #cccccc);
+#djDebug button,
+#djDebug .djButton {
+    background-color: var(--djdt-background-color);
     border: 1px solid var(--djdt-button-border-color);
-    border-bottom: 1px solid #bbb;
-    border-radius: 3px;
-    color: #333;
+    border-radius: 4px;
+    color: var(--djdt-font-color);
     line-height: 1;
-    padding: 0 8px;
+    padding: 4px 8px;
     text-align: center;
-    text-shadow: 0 1px 0 #eee;
+    text-decoration: none;
+}
+
+#djDebug[data-theme="light"] button,
+#djDebug[data-theme="light"] .djButton {
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
 }
 
-#djDebug button:hover {
-    background-color: #ddd;
-    background-image: linear-gradient(to bottom, #ddd, #bbb);
-    border-color: #bbb;
-    border-bottom-color: #999;
+#djDebug button:hover,
+#djDebug .djButton:hover {
+    border-color: var(--djdt-button-hover-border-color);
     cursor: pointer;
-    text-shadow: 0 1px 0 #ddd;
 }
 
-#djDebug button:active {
+#djDebug button:active,
+#djDebug .djButton:active {
     border: 1px solid #aaa;
-    border-bottom: 1px solid #888;
-    box-shadow:
-        inset 0 0 5px 2px #aaa,
-        0 1px 0 0 #eee;
 }
 
 #djDebug #djDebugToolbar {
@@ -318,11 +323,10 @@
 #djDebug pre {
     white-space: pre-wrap;
     color: var(--djdt-pre-text-color);
-    border: 1px solid var(--djdt-pre-border-color);
-    border-collapse: collapse;
-    background-color: var(--djdt-background-color);
-    padding: 2px 3px;
-    margin-bottom: 3px;
+}
+
+#djDebug pre span {
+    font-family: var(--djdt-font-family-monospace);
 }
 
 #djDebug .djdt-panelContent {
@@ -337,14 +341,11 @@
     z-index: 100000000;
 }
 
-#djDebug .djdt-panelContent > div {
-    border-bottom: 1px solid #ddd;
-}
-
 #djDebug .djDebugPanelTitle {
     position: absolute;
     background-color: var(--djdt-panel-title-background-color);
-    color: #666;
+    border-bottom: 1px solid var(--djdt-table-border-color);
+    color: #f5dd5d;
     padding-left: 20px;
     top: 0;
     right: 0;
@@ -364,7 +365,7 @@
     bottom: 0;
     left: 0;
     height: auto;
-    padding: 5px 0 0 20px;
+    padding: 5px 0 40px 20px;
 }
 
 #djDebug .djDebugPanelContent .djdt-loader {
@@ -390,7 +391,7 @@
     height: 100%;
     overflow: auto;
     display: block;
-    padding: 0 10px 0 0;
+    padding: 10px 10px 10px 0;
 }
 
 #djDebug h3 {
@@ -401,7 +402,7 @@
 
 #djDebug h4 {
     font-size: 20px;
-    font-weight: bold;
+    font-weight: 400;
     margin-top: 0.8em;
 }
 
@@ -417,44 +418,71 @@
 #djDebug .djdt-panelContent tbody > tr:nth-child(odd):not(.djdt-highlighted) {
     background-color: var(--djdt-panel-content-table-strip-background-color);
 }
-#djDebug .djdt-panelContent tbody td,
-#djDebug .djdt-panelContent tbody th {
+#djDebug .djdt-panelContent th {
+    border-top: 1px solid var(--djdt-table-border-color);
+}
+#djDebug .djdt-panelContent td,
+#djDebug .djdt-panelContent th {
     vertical-align: top;
-    padding: 2px 3px;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--djdt-table-border-color);
 }
 #djDebug .djdt-panelContent tbody td.djdt-time {
     text-align: center;
 }
 
 #djDebug .djdt-panelContent thead th {
-    padding: 1px 6px 1px 3px;
+    color: var(--djdt-table-header-color);
+    background-color: var(--djdt-table-header-background-color);
     text-align: left;
+    text-transform: uppercase;
     font-weight: bold;
-    font-size: 14px;
+    font-size: 11px;
     white-space: nowrap;
+    padding: 8px 10px;
 }
 #djDebug .djdt-panelContent tbody th {
     width: 12em;
     text-align: right;
-    color: #666;
-    padding-right: 0.5em;
+    color: #d0d0d0;
+    padding: 8px 10px;
 }
 
 #djDebug .djTemplateContext {
     background-color: var(--djdt-background-color);
 }
 
+#djDebug .djdt-badge {
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: var(--djdt-font-color);
+    background-color: var(--djdt-background-color);
+}
+
+#djDebug .djdt-badge.djdt-badge-error {
+    color: #fff;
+    background-color: #e7000b;
+}
+
+#djDebug .djdt-badge.djdt-badge-success {
+    color: #fff;
+    background-color: #05a53f;
+}
+
 #djDebug .djdt-panelContent .djDebugClose {
     position: absolute;
     top: 4px;
     right: 15px;
     line-height: 16px;
-    border: 6px solid #ddd;
+    border: 3px solid #ddd;
     border-radius: 50%;
-    background: #fff;
+    background: transparent;
+    box-shadow: none;
     color: #ddd;
-    font-weight: 900;
-    font-size: 20px;
+    font-weight: 400;
+    font-size: 26px;
     height: 36px;
     width: 36px;
     padding: 0 0 5px;
@@ -480,19 +508,6 @@
     margin-left: 10px;
 }
 
-#djDebug a.toggleTemplate {
-    padding: 4px;
-    background-color: var(--djdt-toggle-template-background-color);
-    border-radius: 3px;
-}
-
-#djDebug a.toggleTemplate:hover {
-    padding: 4px;
-    background-color: #444;
-    color: #ffe761;
-    border-radius: 3px;
-}
-
 #djDebug .djDebugCollapsed {
     color: var(--djdt-sql-font-color);
 }
@@ -533,6 +548,8 @@
 
 #djDebug .highlight {
     color: var(--djdt-font-color);
+    padding: 10px 13px;
+    border: 1px solid var(--djdt-table-border-color);
 }
 #djDebug .highlight .err {
     color: var(--djdt-font-color);
@@ -551,6 +568,9 @@ To regenerate:
     from pygments.formatters import HtmlFormatter
     print(HtmlFormatter(wrapcode=True).get_style_defs())
  */
+#djDebug[data-theme="light"] .highlight {
+    background: #fff;
+}
 #djDebug[data-theme="light"] .highlight pre {
     line-height: 125%;
 }
@@ -1073,6 +1093,12 @@ To regenerate:
     stroke: #94b24d;
 }
 
+#djDebug .djDetailsRow {
+    background-color: var(
+        --djdt-djdt-panel-content-table-strip-background-color
+    );
+}
+
 #djDebug .djDebugRowWarning .djdt-time {
     color: red;
 }
@@ -1081,20 +1107,21 @@ To regenerate:
     padding-top: 3px;
 }
 #djDebug .djdt-panelContent table .djdt-actions {
-    min-width: 70px;
+    min-width: 82px;
     white-space: nowrap;
 }
 #djDebug .djdt-color:after {
     content: "\00a0";
 }
+#djDebug .djToggleRow {
+    cursor: pointer;
+}
 #djDebug .djToggleSwitch {
     box-sizing: content-box;
-    padding: 0;
-    border: 1px solid #999;
-    border-radius: 0;
+    padding: 3px;
     width: 12px;
-    color: #777;
-    background: linear-gradient(to bottom, #fff, #dcdcdc);
+    color: var(--djdt-font-color);
+    background: var(--djdt-background-color);
 }
 #djDebug .djNoToggleSwitch {
     height: 14px;
@@ -1106,18 +1133,24 @@ To regenerate:
     margin-top: 0.8em;
 }
 
+#djDebug .djdt-stack {
+    color: var(--djdt-stack-color);
+}
+
 #djDebug .djdt-stack span {
     color: var(--djdt-stack-span-color);
-    font-weight: bold;
+    font-weight: 500;
 }
-#djDebug .djdt-stack span.djdt-path,
 #djDebug .djdt-stack pre.djdt-locals,
 #djDebug .djdt-stack pre.djdt-locals span {
     color: var(--djdt-path-and-locals);
     font-weight: normal;
 }
-#djDebug .djdt-stack span.djdt-code {
+#djDebug .djdt-stack .djdt-code {
+    font-size: 14px;
     font-weight: normal;
+    margin: 5px 0 10px;
+    color: var(--djdt-stack-color);
 }
 #djDebug .djdt-stack pre.djdt-locals {
     margin: 0 27px 27px 27px;
@@ -1143,7 +1176,7 @@ To regenerate:
     max-height: 100%;
 }
 #djDebug .djdt-highlighted {
-    background-color: var(--djdt--highlighted-background-color);
+    background-color: var(--djdt-highlighted-background-color);
 }
 #djDebug tr.djdt-highlighted.djdt-profile-row {
     background-color: #ffc;
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 609842209..4976b6133 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -109,6 +109,22 @@ const djdt = {
             });
         });
 
+        $$.on(djDebug, "click", ".djToggleRow", function () {
+            const id = this.dataset.toggleId;
+            const name = this.dataset.toggleName;
+            const container = document.getElementById(`${name}_${id}`);
+            const isSelected = container.classList.contains("djSelected");
+            container.classList.toggle("djSelected", !isSelected);
+            container.classList.toggle("djUnselected", isSelected);
+
+            for (const el of this.querySelectorAll(".djDebugCollapsed")) {
+                $$.toggle(el, !isSelected);
+            }
+            for (const el of this.querySelectorAll(".djDebugUncollapsed")) {
+                $$.toggle(el, isSelected);
+            }
+        });
+
         // Used by the cache, profiling and SQL panels
         $$.on(djDebug, "click", ".djToggleSwitch", function () {
             const id = this.dataset.toggleId;
diff --git a/debug_toolbar/templates/debug_toolbar/panels/cache.html b/debug_toolbar/templates/debug_toolbar/panels/cache.html
index 8ffef5917..8d2fbb40e 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/cache.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/cache.html
@@ -40,7 +40,7 @@ <h4>{% translate "Calls" %}</h4>
   <table>
     <thead>
       <tr>
-        <th colspan="2">{% translate "Time (ms)" %}</th>
+        <th>{% translate "Time (ms)" %}</th>
         <th>{% translate "Type" %}</th>
         <th>{% translate "Arguments" %}</th>
         <th>{% translate "Keyword arguments" %}</th>
@@ -49,19 +49,15 @@ <h4>{% translate "Calls" %}</h4>
     </thead>
     <tbody>
       {% for call in calls %}
-        <tr id="cacheMain_{{ forloop.counter }}">
-          <td class="djdt-toggle">
-            <button class="djToggleSwitch" data-toggle-name="cacheMain" data-toggle-id="{{ forloop.counter }}">+</button>
-          </td>
+        <tr class="djToggleRow" id="cacheMain_{{ forloop.counter }}" data-toggle-name="cacheDetails" data-toggle-id="{{ forloop.counter }}">
           <td>{{ call.time|floatformat:"4" }}</td>
           <td>{{ call.name|escape }}</td>
           <td>{{ call.args|escape }}</td>
           <td>{{ call.kwargs|escape }}</td>
           <td>{{ call.backend }}</td>
         </tr>
-        <tr class="djUnselected djToggleDetails_{{ forloop.counter }}" id="cacheDetails_{{ forloop.counter }}">
-          <td colspan="1"></td>
-          <td colspan="5"><pre class="djdt-stack">{{ call.trace|safe }}</pre></td>
+        <tr class="djDetailsRow djUnselected djToggleDetails_{{ forloop.counter }}" id="cacheDetails_{{ forloop.counter }}">
+          <td colspan="5"><div class="djdt-stack">{{ call.trace|safe }}</div></td>
         </tr>
       {% endfor %}
     </tbody>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/history_tr.html b/debug_toolbar/templates/debug_toolbar/panels/history_tr.html
index decce3836..45343ba6d 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/history_tr.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/history_tr.html
@@ -10,36 +10,15 @@
         <p>{{ history_context.history_stats.request_url|truncatechars:100|escape }}</p>
     </td>
     <td>
-        <button type="button" class="djToggleSwitch" data-toggle-name="historyMain" data-toggle-id="{{ request_id }}">+</button>
-        <div class="djUnselected djToggleDetails_{{ request_id }}">
-          <table>
-            <colgroup>
-              <col class="djdt-width-20">
-              <col>
-            </colgroup>
-            <thead>
-              <tr>
-                <th>{% translate "Variable" %}</th>
-                <th>{% translate "Value" %}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {% for key, value in history_context.history_stats.data.items %}
-                <tr>
-                  <td><code>{{ key|pprint }}</code></td>
-                  <td><code>{{ value|pprint }}</code></td>
-                </tr>
-              {% empty %}
-                <tr>
-                  <td colspan="2">No data</td>
-                </tr>
-              {% endfor %}
-            </tbody>
-          </table>
-        </div>
+      {% if history_context.history_stats.data %}{{ history_context.history_stats.data }}{% endif %}
     </td>
     <td>
-        <p>{{ history_context.history_stats.status_code|escape }}</p>
+        <p>
+          {% if history_context.history_stats.status_code >= 400 %}
+            <span class="djdt-badge djdt-badge-error">{{ history_context.history_stats.status_code|escape }}</span>
+          {% else %}
+            <span class="djdt-badge djdt-badge-success">{{ history_context.history_stats.status_code|escape }}</span>
+          {% endif %}
     </td>
     <td class="djdt-actions">
         <form method="get" action="{% url 'djdt:history_sidebar' %}">
diff --git a/debug_toolbar/templates/debug_toolbar/panels/settings.html b/debug_toolbar/templates/debug_toolbar/panels/settings.html
index 5214c1b42..67449d345 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/settings.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/settings.html
@@ -10,7 +10,7 @@
     {% for name, value in settings.items %}
       <tr>
         <td>{{ name }}</td>
-        <td><code>{{ value|pprint }}</code></td>
+        <td><code>{{ value }}</code></td>
       </tr>
     {% endfor %}
   </tbody>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html
index 63cf293c1..d99fce989 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html
@@ -31,7 +31,7 @@
     <thead>
       <tr>
         <th></th>
-        <th colspan="2">{% translate "Query" %}</th>
+        <th>{% translate "Query" %}</th>
         <th>{% translate "Timeline" %}</th>
         <th>{% translate "Time (ms)" %}</th>
         <th>{% translate "Action" %}</th>
@@ -39,11 +39,8 @@
     </thead>
     <tbody>
       {% for query in queries %}
-        <tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}">
+        <tr class="djToggleRow {% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}" data-toggle-name="sqlDetails" data-toggle-id="{{ forloop.counter }}">
           <td><span class="djdt-color" data-djdt-styles="backgroundColor:rgb({{ query.rgb_color|join:', ' }})"></span></td>
-          <td class="djdt-toggle">
-            <button type="button" class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}">+</button>
-          </td>
           <td>
             <div class="djDebugSql">{{ query.sql|safe }}</div>
             {% if query.similar_count %}
@@ -88,11 +85,11 @@
             {% endif %}
           </td>
         </tr>
-        <tr class="djUnselected {% if query.is_slow %} djDebugRowWarning{% endif %} djToggleDetails_{{ forloop.counter }}" id="sqlDetails_{{ forloop.counter }}">
-          <td colspan="2"></td>
-          <td colspan="4">
+        <tr class="djDetailsRow djUnselected {% if query.is_slow %} djDebugRowWarning{% endif %} djToggleDetails_{{ forloop.counter }}" id="sqlDetails_{{ forloop.counter }}">
+          <td colspan="1"></td>
+          <td colspan="5">
             <div class="djSQLDetailsDiv">
-              <p><strong>{% translate "Connection:" %}</strong> {{ query.alias }}</p>
+              <p style="margin-bottom: 10px;"><strong>{% translate "Connection:" %}</strong> {{ query.alias }}</p>
               {% if query.iso_level %}
                 <p><strong>{% translate "Isolation level:" %}</strong> {{ query.iso_level }}</p>
               {% endif %}
@@ -100,7 +97,7 @@
                 <p><strong>{% translate "Transaction status:" %}</strong> {{ query.trans_status }}</p>
               {% endif %}
               {% if query.stacktrace %}
-                <pre class="djdt-stack">{{ query.stacktrace }}</pre>
+                <div class="djdt-stack">{{ query.stacktrace }}</div>
               {% endif %}
               {% if query.template_info %}
                 <table>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/staticfiles.html b/debug_toolbar/templates/debug_toolbar/panels/staticfiles.html
index 4c32e0e41..e89d83506 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/staticfiles.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/staticfiles.html
@@ -24,12 +24,22 @@ <h4>{% blocktranslate count apps_count=staticfiles_apps|length %}Static file app
 
 <h4>{% blocktranslate count staticfiles_count=staticfiles|length %}Static file{% plural %}Static files{% endblocktranslate %}</h4>
 {% if staticfiles %}
-  <dl>
-    {% for path, url, real_path in staticfiles %}
-      <dt><strong><a class="toggleTemplate" href="{{ url }}" target="_blank" rel="noopener">{{ path }}</a></strong></dt>
-      <dd><samp>{{ real_path }}</samp></dd>
-    {% endfor %}
-  </dl>
+  <table>
+    <thead>
+      <tr>
+        <th>{% translate 'Path' %}</th>
+        <th>{% translate 'Location' %}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for path, url, real_path in staticfiles %}
+        <tr>
+          <td><strong><a class="toggleTemplate" href="{{ url }}" target="_blank" rel="noopener">{{ path }}</a></strong></td>
+          <td><samp>{{ real_path }}</samp></td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
 {% else %}
   <p>{% translate "None" %}</p>
 {% endif %}
diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html
index 4ceae12e7..f85b43855 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/templates.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html
@@ -12,20 +12,36 @@ <h4>{% blocktranslate count template_count=template_dirs|length %}Template path{
 
 <h4>{% blocktranslate count template_count=templates|length %}Template{% plural %}Templates{% endblocktranslate %}</h4>
 {% if templates %}
-  <dl>
-    {% for template in templates %}
-      <dt><strong><a class="remoteCall toggleTemplate" href="{% url 'djdt:template_source' %}?template={{ template.template.name }}&amp;template_origin={{ template.template.origin_hash }}">{{ template.template.name|addslashes }}</a></strong></dt>
-      <dd><samp>{{ template.template.origin_name|addslashes }}</samp></dd>
-      {% if template.context %}
-        <dd>
-          <details>
-            <summary>{% translate "Toggle context" %}</summary>
-            <code class="djTemplateContext">{{ template.context }}</code>
-          </details>
-        </dd>
-      {% endif %}
-    {% endfor %}
-  </dl>
+  <table>
+    <thead>
+      <tr>
+        <th>{% translate "Template" %}</th>
+        <th>{% translate "Action" %}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for template in templates %}
+    <tr>
+        <td class="djToggleRow" data-toggle-name="templateDetails" data-toggle-id="{{ template.template.name }}">
+          <strong><a class="remoteCall" href="{% url 'djdt:template_source' %}?template={{ template.template.name }}&amp;template_origin={{ template.template.origin_hash }}">{{ template.template.name|addslashes }}</a></strong>
+          <br>
+          <samp style="color: var(--djdt-stack-span-color);">{{ template.template.origin_name|addslashes }}</samp>
+        </td>
+        <td>
+          <a class="djButton remoteCall toggleTemplate" href="{% url 'djdt:template_source' %}?template={{ template.template.name }}&amp;template_origin={{ template.template.origin_hash }}">{% translate "Source" %}</a>
+        </td>
+      </tr>
+        {% if template.context %}
+          <tr class="djDetailsRow djUnselected" id="templateDetails_{{ template.template.name }}">
+            <td colspan="2">
+              <code class="djTemplateContext">{{ template.context }}</code>
+            </td>
+          </td>
+          </tr>
+        {% endif %}
+      {% endfor %}
+    </tr>
+  </table>
 {% else %}
   <p>{% translate "None" %}</p>
 {% endif %}
diff --git a/debug_toolbar/utils.py b/debug_toolbar/utils.py
index f4b3eac38..3340ab8a4 100644
--- a/debug_toolbar/utils.py
+++ b/debug_toolbar/utils.py
@@ -76,23 +76,21 @@ def render_stacktrace(trace: stubs.TidyStackTrace) -> SafeString:
         if os.path.sep in abspath:
             directory, filename = abspath.rsplit(os.path.sep, 1)
             # We want the separator to appear in the UI so add it back.
-            directory += os.path.sep
         else:
             # abspath could be something like "<frozen importlib._bootstrap>"
             directory = ""
             filename = abspath
         html += format_html(
             (
-                '<span class="djdt-path">{}</span>'
-                + '<span class="djdt-file">{}</span> in'
-                + ' <span class="djdt-func">{}</span>'
-                + '(<span class="djdt-lineno">{}</span>)\n'
-                + '  <span class="djdt-code">{}</span>\n'
+                'File <span class="djdt-path">{}{}</span>,'
+                + ' line <span class="djdt-lineno">{}</span>,'
+                + ' in <span class="djdt-func">{}</span><br>'
+                + '  <pre class="djdt-code">   {}</pre>'
             ),
             directory,
             filename,
-            func,
             lineno,
+            func,
             code,
         )
         if show_locals: