diff --git a/devtools/client/jsonview/components/headers.js b/devtools/client/jsonview/components/headers.js
index a11558f..4ed2dba 100644
--- a/devtools/client/jsonview/components/headers.js
+++ b/devtools/client/jsonview/components/headers.js
@@ -87,9 +87,7 @@ define(function (require, exports, module) {
             td({className: "netInfoParamName"},
               span({title: header.name}, header.name)
             ),
-            td({className: "netInfoParamValue"},
-              code({}, header.value)
-            )
+            td({className: "netInfoParamValue"}, header.value)
           )
         );
       });
diff --git a/devtools/client/jsonview/converter-child.js b/devtools/client/jsonview/converter-child.js
index 1978e6c..15fd0bb 100644
--- a/devtools/client/jsonview/converter-child.js
+++ b/devtools/client/jsonview/converter-child.js
@@ -212,8 +212,18 @@ let Converter = Class({
     let themeVarsUrl = clientBaseUrl + "themes/variables.css";
     let commonUrl = clientBaseUrl + "themes/common.css";
 
+    let os;
+    let platform = Services.appinfo.OS;
+    if (platform.startsWith("WINNT")) {
+      os = "win";
+    } else if (platform.startsWith("Darwin")) {
+      os = "mac";
+    } else {
+      os = "linux";
+    }
+
     return "<!DOCTYPE html>\n" +
-      "<html class=\"" + themeClassName + "\">" +
+      "<html platform=\"" + os + "\" class=\"" + themeClassName + "\">" +
       "<head><title>" + this.htmlEncode(title) + "</title>" +
       "<base href=\"" + this.htmlEncode(baseUrl) + "\">" +
       "<link rel=\"stylesheet\" type=\"text/css\" href=\"" +
diff --git a/devtools/client/jsonview/css/general.css b/devtools/client/jsonview/css/general.css
index 388187c..b163f05 100644
--- a/devtools/client/jsonview/css/general.css
+++ b/devtools/client/jsonview/css/general.css
@@ -7,7 +7,8 @@
 /* General */
 
 body {
-  background-color: white;
+  color: var(--theme-body-color);
+  background-color: var(--theme-body-background);
   padding: 0;
   margin: 0;
   overflow: hidden;
@@ -24,6 +25,7 @@ body {
 pre {
   background-color: white;
   border: none;
+  font-family: var(--monospace-font-family);
 }
 
 #json,
diff --git a/devtools/client/jsonview/css/headers-panel.css b/devtools/client/jsonview/css/headers-panel.css
index 9ec48bb..89cec46 100644
--- a/devtools/client/jsonview/css/headers-panel.css
+++ b/devtools/client/jsonview/css/headers-panel.css
@@ -8,41 +8,37 @@
 
 .headersPanelBox {
   height: 100%;
-  font-family: Lucida Grande, Tahoma, sans-serif;
-  font-size: 11px;
 }
 
 .headersPanelBox .netInfoHeadersTable {
   overflow: auto;
   height: 100%;
-  line-height: 12px;
 }
 
 .headersPanelBox .netHeadersGroup {
   padding: 10px;
 }
 
+.headersPanelBox td {
+  vertical-align: bottom;
+}
+
 .headersPanelBox .netInfoHeadersGroup {
+  color: var(--theme-body-color-alt);
   margin-bottom: 10px;
-  border-bottom: 1px solid #D7D7D7;
+  border-bottom: 1px solid var(--theme-splitter-color);
   padding-top: 8px;
   padding-bottom: 4px;
-  font-family: Lucida Grande, Tahoma, sans-serif;
   font-weight: bold;
-  color: #565656;
   -moz-user-select: none;
 }
 
-.headersPanelBox .netInfoParamValue code {
-  display: block;
-  color: #18191A;
-  font-size: 11px;
+.headersPanelBox .netInfoParamValue {
   word-wrap: break-word;
 }
 
 .headersPanelBox .netInfoParamName {
   padding: 2px 10px 0 0;
-  font-family: Lucida Grande, Tahoma, sans-serif;
   font-weight: bold;
   vertical-align: top;
   text-align: right;
@@ -50,17 +46,33 @@
 }
 
 /******************************************************************************/
-/* Dark Theme */
+/* Theme colors have been generated/copied from Network Panel's header view */
 
+/* Light Theme */
+.theme-light .netInfoParamName {
+  color: var(--theme-highlight-red);
+}
 
-.theme-dark .headersPanelBox .netInfoParamName {
-  color: var(--theme-highlight-blue);
+.theme-light .netInfoParamValue {
+  color: var(--theme-highlight-purple);
 }
 
-.theme-dark .headersPanelBox .netInfoParamValue code {
-  color: var(--theme-highlight-orange);
+/* Dark Theme */
+.theme-dark .netInfoParamName {
+  color: var(--theme-highlight-purple);
 }
 
-.theme-dark .headersPanelBox .netInfoHeadersGroup {
-  color: var(--theme-body-color-alt);
+.theme-dark .netInfoParamValue {
+  color: var(--theme-highlight-gray);
+}
+
+/* Firebug Theme */
+.theme-firebug .netInfoHeadersTable {
+  font-family: Lucida Grande, Tahoma, sans-serif;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.theme-firebug .netInfoParamValue {
+  font-family: var(--monospace-font-family);
 }
diff --git a/devtools/client/jsonview/css/main.css b/devtools/client/jsonview/css/main.css
index 2e121f9..55f949b 100644
--- a/devtools/client/jsonview/css/main.css
+++ b/devtools/client/jsonview/css/main.css
@@ -14,20 +14,27 @@
 @import "text-panel.css";
 @import "headers-panel.css";
 
+.jsonPanelBox {
+  height: 100%;
+}
 
 /******************************************************************************/
 /* Panel Content */
 
 .panelContent {
   overflow-y: auto;
-  font-size: 11px;
-  font-family: var(--monospace-font-family);
   padding-right: 5px;
+  background-color: var(--theme-body-background);
 }
 
 /* The tree takes the entire horizontal space within the panel content. */
 .panelContent .treeTable {
   width: 100%;
+  font-family: var(--monospace-font-family);
+}
+
+:root[platform="linux"] .treeTable {
+  font-size: 80%; /* To handle big monospace font */
 }
 
 /* Make sure there is a little space between label and value columns. */
diff --git a/devtools/client/jsonview/css/search-box.css b/devtools/client/jsonview/css/search-box.css
index 0d57fe8..a56b991 100644
--- a/devtools/client/jsonview/css/search-box.css
+++ b/devtools/client/jsonview/css/search-box.css
@@ -7,7 +7,7 @@
 /* Search Box */
 
 .searchBox {
-  height: 18px;
+  height: 20px;
   font: message-box;
   background-color: var(--theme-body-background);
   background-image: url("chrome://devtools/skin/images/filter.svg");
diff --git a/devtools/client/jsonview/css/text-panel.css b/devtools/client/jsonview/css/text-panel.css
index 9dcb5c3..99b2385 100644
--- a/devtools/client/jsonview/css/text-panel.css
+++ b/devtools/client/jsonview/css/text-panel.css
@@ -11,19 +11,16 @@
 }
 
 .textPanelBox .data {
-  font-size: 11px;
-  font-family: monospace;
   overflow: auto;
   height: 100%;
 }
 
 .textPanelBox pre {
   margin: 0;
+  font-family: var(--monospace-font-family);
+  color: var(--theme-content-color1);
 }
 
-/******************************************************************************/
-/* Dark Theme */
-
-.theme-dark .textPanelBox {
-  color: var(--theme-content-color1);
-}
\ No newline at end of file
+:root[platform="linux"] .textPanelBox .data {
+  font-size: 80%; /* To handle big monospace font */
+}
diff --git a/devtools/client/jsonview/css/toolbar.css b/devtools/client/jsonview/css/toolbar.css
index 7d6ed60..3675f2d 100644
--- a/devtools/client/jsonview/css/toolbar.css
+++ b/devtools/client/jsonview/css/toolbar.css
@@ -8,7 +8,7 @@
 
 .toolbar {
   line-height: 20px;
-  height: 22px;
+  height: 24px;
   font: message-box;
   padding: 4px 0 3px 0;
 }
@@ -24,7 +24,8 @@
   vertical-align: middle;
   cursor: pointer;
   -moz-user-select: none;
-  padding: 0 2px 1px 2px;
+  padding: 0 2px 0px 2px;
+  border-radius: 2px;
 }
 
 .toolbar .btn::-moz-focus-inner {
@@ -71,13 +72,11 @@
 
 .theme-dark .toolbar .btn,
 .theme-light .toolbar .btn {
-  min-width: 78px;
   min-height: 18px;
   color: var(--theme-content-color1);
   text-shadow: none;
   margin: 1px 2px 1px 2px;
   border: none;
-  border-radius: 0;
   background-color: rgba(170, 170, 170, .2); /* --toolbar-tab-hover */
   transition: background 0.05s ease-in-out;
 }
diff --git a/devtools/client/shared/components/tabs/tabs.css b/devtools/client/shared/components/tabs/tabs.css
index 3091663..9e7a6a0 100644
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -50,9 +50,7 @@
 .theme-dark .tabs .tabs-navigation,
 .theme-light .tabs .tabs-navigation {
   border-bottom: 1px solid var(--theme-splitter-color);
-  font-size: 12px;
 }
-
 .theme-firebug .tabs .tabs-navigation {
   font-size: 11px;
 }
@@ -76,7 +74,7 @@
 .theme-dark .tabs .tabs-menu-item a,
 .theme-light .tabs .tabs-menu-item a:hover,
 .theme-light .tabs .tabs-menu-item a {
-  padding: 3px 15px;
+  padding: 0px 15px;
 }
 
 .theme-dark .tabs .tabs-menu-item:hover,
diff --git a/devtools/client/shared/components/tree/tree-view.css b/devtools/client/shared/components/tree/tree-view.css
index 3593f64..a1a76da 100644
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/devtools/client/shared/components/tree/tree-view.css
@@ -185,7 +185,8 @@
   color: var(--theme-highlight-pink);
 }
 
-.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
+.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover,
+.theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
   color: var(--theme-highlight-pink);
 }
 
