diff --git a/templates/runs/view.twig b/templates/runs/view.twig
index 2344c0c9e..dd96aa15e 100644
--- a/templates/runs/view.twig
+++ b/templates/runs/view.twig
@@ -25,8 +25,12 @@
             <li class="nav-header">GET</li>
             <li>{{ helpers.property_list('GET', result.meta('get')) }}</li>
 
-            <li class="nav-header">SERVER</li>
-            <li>{{ helpers.property_list('SERVER', result.meta('SERVER')) }}
+            <li class="nav-header">
+                <details>
+                    <summary>SERVER</summary>
+                    {{ helpers.property_list('SERVER', result.meta('SERVER')) }}
+                </details>
+            </li>
 
             <li class="nav-header">Waterfall</li>
             <li><strong>By IP</strong> <a href="{{ url('waterfall.list', {'remote_addr': result.meta.SERVER.REMOTE_ADDR, 'request_start': result.meta.SERVER.REQUEST_TIME - 5, 'request_end': result.meta.SERVER.REQUEST_TIME + 15}) }}">{{ result.meta.SERVER.REMOTE_ADDR }}</a></li>
diff --git a/webroot/css/xhgui.css b/webroot/css/xhgui.css
index 09215caac..0072d98b5 100644
--- a/webroot/css/xhgui.css
+++ b/webroot/css/xhgui.css
@@ -54,6 +54,27 @@ h1, h2, h3, h4, h5, h6,
 /**
  * Top Navbar
  */
+.nav-header details > summary {
+    cursor: pointer;
+}
+.nav-header details dl {
+    padding-top: 3px;
+    color: #333;
+    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+    transform: translateY(-10px);
+    transition: all .3s ease;
+    opacity: 0;
+}
+.nav-header details[open] dl {
+    opacity: 1;
+    transform: translateY(0);
+}
+.nav-header details dd {
+    text-transform: none;
+    text-shadow: none;
+    font-weight: normal;
+    -webkit-font-smoothing: auto;
+}
 .navbar-inner {
     background: -webkit-linear-gradient(rgb(247, 247, 247), rgb(240, 240, 240));
     background: -moz-linear-gradient(rgb(247, 247, 247), rgb(240, 240, 240));