diff --git a/shared/html/devtools-panel.html b/shared/html/devtools-panel.html
index c78b7cd86..7a6f01ba7 100644
--- a/shared/html/devtools-panel.html
+++ b/shared/html/devtools-panel.html
@@ -1,65 +1,97 @@
+<!--
+   Copyright (C) 2021 DuckDuckGo, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+-->
+
 <!DOCTYPE html>
 <html>
 
 <head>
   <meta charset="utf-8">
   <title>DuckDuckGo Privacy Essentials Debugger</title>
+  
+  <link rel="stylesheet" href="../public/css/base.css">
+
   <style type="text/css">
-    @font-face {
-      font-family: 'DDG_ProximaNova';
-      src: url('../public/font/ProximaNova-Reg-webfont.woff') format('woff');
-      font-weight: normal;
-      font-style: normal;
+    h1 {
+      font-size: 2em;
     }
-
-    @font-face {
-      font-family: 'DDG_ProximaNova';
-      src: url('../public/font/ProximaNova-Sbold-webfont.woff') format('woff');
-      font-weight: 600;
-      font-style: bold;
+    .page-container {
+      margin: 1em;
     }
-
-    body {
-      font-family: 'DDG_ProximaNova';
-      color: #000
+    
+    .frm__input {
+      line-height: inherit;
+      width: auto;
     }
-
+    
+    #table-filter > label [type="checkbox"] {
+      margin: 0 4px;
+    }
+    
+    #table-filter {
+      line-height: 2;
+    }
+    
+    details > summary {
+      display: inline list-item !important;
+    }
+  
     .header {
-      padding: 10px;
+      margin-top: 16px;
     }
 
     #settings-panel {
       position: sticky;
       top: 0;
-      background-color: aliceblue;
+      background-color: white;
     }
 
     #protections {
       padding-top: 0px;
     }
 
-    #protections > button {
+    #protections > button, #table-filter > label {
+      border-radius: 4px;
+      padding: 2px 4px;
       margin: 2px;
     }
 
     .protection-button-on {
       background-color: #A0F2A8;
+      color: #333;
     }
 
     .protection-button-on:hover {
-      background-color: #ADFFAD
+      background-color: #ADFFAD;
+      color: #333;
     }
 
     .protection-button-off {
       background-color: #FBBEBF;
+      color: #333;
     }
 
     .protection-button-off:hover {
       background-color: #FFCBCC;
+      color: #333;
     }
 
     .block {
       background-color: #FBBEBF;
+      display: revert; /* To avoid clashing with .block in base.css */
     }
 
     .redirect {
@@ -87,7 +119,6 @@
 
     thead {
       position: sticky;
-      background-color: antiquewhite;
     }
 
     thead th:nth-child(1) {
@@ -138,11 +169,6 @@
     #tab-picker {
       width: 300px;
     }
-
-    #table-filter > label {
-      margin-left: 5px;
-      padding: 1px;
-    }
   </style>
 </head>
 
@@ -167,73 +193,88 @@
     </tr>
   </template>
 
-  <div id="settings-panel">
-  <div class="header">
-    <a href="./list-editor.html" target="_blank">🗒</a>
-    <select id="tab-picker">
-      <option value="">--Select Tab--</option>
-    </select>
-    <button id="clear">Clear</button>
-    <button id="refresh">Reload page</button>
-    <span>|</span>
-    <button id="protection">Protection: ??</button>
-    <label for="tds">Blocklist: </label>
-    <select name="tds" id="tds">
-      <option value="live">Live</option>
-      <option value="next">Next</option>
-      <option value="beta">Beta</option>
-    </select>
-  </div>
-  <div class="header" id="protections">
-  </div>
-  <div id="table-filter">
-    Display options:
-    <label class="block">
-      <input data-filter-toggle="blocked" type="checkbox" checked><span>Blocked</span>
-    </label>
-    <label class="ignore">
-      <input data-filter-toggle="ignored" type="checkbox" checked><span>Ignored</span>
-    </label>
-    <label class="ignore">
-      <input data-filter-toggle="ignoredFirstParty" type="checkbox" checked><span>Ignored (1P)</span>
-    </label>
-    <label class="redirect">
-      <input data-filter-toggle="redirected" type="checkbox" checked><span>Redirected</span>
-    </label>
-    <label class="cookie-tracker">
-      <input data-filter-toggle="cookieHTTP" type="checkbox" checked><span>HTTP Cookies</span>
-    </label>
-    <label class="jsException">
-      <input data-filter-toggle="jsException" type="checkbox" checked><span>JS Exceptions</span>
-    <label class="jscookie">
-      <input data-filter-toggle="cookieJS" type="checkbox" checked><span>JS Cookies</span>
-    </label>
-    <label class="runtimeChecks">
-      <input data-filter-toggle="runtimeChecks" type="checkbox" checked><span>Runtime Checks</span>
-    <label class="proxyCalls">
-        <input data-filter-toggle="proxyCalls" type="checkbox"><span>Proxy calls</span>
-    <label class="none">
-      <input data-filter-toggle="noneRequest" type="checkbox" checked><span>none</span>
-    </label>
-    <label class="ignore-user">
-      <input data-filter-toggle="ignoreUser" type="checkbox" checked><span>ignore-user</span>
-    </label>
-    <label for="search-box">Filter: </label>
-    <input type="text" name="search-box" id="search-box" />
-  </div>
+  <div class="page-container">
+
+    <h1>DuckDuckGo Privacy Essentials Debugger</h1>
+    
+    <div id="settings-panel">
+      <div class="header">
+        <a href="./list-editor.html" target="_blank">🗒</a>
+        <select id="tab-picker">
+          <option value="">--Select Tab--</option>
+        </select>
+        <button id="clear" class="btn">Clear</button>
+        <button id="refresh" class="btn">Reload page</button>
+        <span>|</span>
+        <button id="protection" class="btn">Protection: ??</button>
+        <label for="tds">Blocklist: </label>
+        <select name="tds" id="tds">
+          <option value="live">Live</option>
+          <option value="next">Next</option>
+          <option value="beta">Beta</option>
+        </select>
+      </div>
+      
+      <div class="header" id="protections">
+      </div>
+      
+      <details class="header">
+        <summary class="btn">Display/hide options</summary>
+        <div id="table-filter" class="header">
+          <label class="block">
+            <input data-filter-toggle="blocked" type="checkbox" checked><span>Blocked</span>
+          </label>
+          <label class="ignore">
+            <input data-filter-toggle="ignored" type="checkbox" checked><span>Ignored</span>
+          </label>
+          <label class="ignore">
+            <input data-filter-toggle="ignoredFirstParty" type="checkbox" checked><span>Ignored (1P)</span>
+          </label>
+          <label class="redirect">
+            <input data-filter-toggle="redirected" type="checkbox" checked><span>Redirected</span>
+          </label>
+          <label class="cookie-tracker">
+            <input data-filter-toggle="cookieHTTP" type="checkbox" checked><span>HTTP Cookies</span>
+          </label>
+          <label class="jsException">
+            <input data-filter-toggle="jsException" type="checkbox" checked><span>JS Exceptions</span>
+          </label>
+          <label class="jscookie">
+            <input data-filter-toggle="cookieJS" type="checkbox" checked><span>JS Cookies</span>
+          </label>
+          <label class="runtimeChecks">
+            <input data-filter-toggle="runtimeChecks" type="checkbox" checked><span>Runtime Checks</span>
+          </label>
+          <label class="proxyCalls">
+            <input data-filter-toggle="proxyCalls" type="checkbox"><span>Proxy calls</span>
+          </label>
+          <label class="none">
+            <input data-filter-toggle="noneRequest" type="checkbox" checked><span>none</span>
+          </label>
+          <label class="ignore-user">
+            <input data-filter-toggle="ignoreUser" type="checkbox" checked><span>ignore-user</span>
+          </label>
+          <div>
+            <label for="search-box">Filter: </label>
+            <input type="text" name="search-box" id="search-box" class="frm__input">
+          </div>
+        </div>
+      </details>
+    </div>
+    
+    <table class="header">
+      <thead class="silver-bg">
+        <tr>
+          <th></th>
+          <th>URL</th>
+          <th>Action</th>
+          <th>Domain</th>
+          <th>Type</th>
+        </tr>
+      </thead>
+      <tbody id="request-table"></tbody>
+    </table>
   </div>
-  <table>
-    <thead>
-      <tr>
-        <th></th>
-        <th>URL</th>
-        <th>Action</th>
-        <th>Domain</th>
-        <th>Type</th>
-      </tr>
-    </thead>
-    <tbody id="request-table"></tbody>
-  </table>
 
   <script src="/public/js/devtools-panel.js"></script>
 </body>
diff --git a/shared/js/devtools/panel.js b/shared/js/devtools/panel.js
index 829a7bcd5..e5e6956ae 100644
--- a/shared/js/devtools/panel.js
+++ b/shared/js/devtools/panel.js
@@ -76,6 +76,7 @@ const loadConfigurableFeatures = new Promise((resolve) => {
                     action: `toggle${feature}`,
                     tabId
                 })
+                reloadPage()
             })
         })
         resolve(features)
@@ -377,21 +378,24 @@ function clear () {
     panelConfig.currentCounter = undefined
 }
 
-// listeners for buttons and toggles
-clearButton.addEventListener('click', clear)
-refreshButton.addEventListener('click', () => {
+function reloadPage () {
     clear()
     if (chrome.devtools) {
         chrome.devtools.inspectedWindow.eval('window.location.reload();')
     } else {
         chrome.tabs.reload(tabId)
     }
-})
+}
+
+// listeners for buttons and toggles
+clearButton.addEventListener('click', clear)
+refreshButton.addEventListener('click', reloadPage)
 protectionButton.addEventListener('click', () => {
     port.postMessage({
         action: 'toggleProtection',
         tabId
     })
+    reloadPage()
 })
 
 sendMessage('getSetting', { name: 'tds-channel' }, (result) => {
