--- a/devtools/client/shared/widgets/TableWidget.js
+++ b/devtools/client/shared/widgets/TableWidget.js
@@ -470,17 +470,17 @@ function Column(table, id, header) {
   this.tbody.appendChild(this.splitter);
 
   this.column = this.document.createElementNS(HTML_NS, "div");
   this.column.id = id;
   this.column.className = "table-widget-column";
   this.wrapper.appendChild(this.column);
 
   this.header = this.document.createElementNS(XUL_NS, "label");
-  this.header.className = "plain devtools-toolbar table-widget-column-header";
+  this.header.className = "devtools-toolbar table-widget-column-header";
   this.header.setAttribute("value", header);
   this.column.appendChild(this.header);
   if (table.headersContextMenu) {
     this.header.setAttribute("context", table.headersContextMenu);
   }
   this.toggleColumn = this.toggleColumn.bind(this);
   this.table.on(EVENTS.HEADER_CONTEXT_MENU, this.toggleColumn);
 

--- a/devtools/client/themes/images/sort-arrows.svg
+++ b/devtools/client/themes/images/sort-arrows.svg
@@ -1,9 +1,12 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="11">
-  <g fill="#edf0f1" fill-opacity="0.8">
-    <polygon points="3,5 5.5,8 8,5"/>
-    <polygon points="14,7 16.5,4 19,7"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="4" fill="#edf0f1" fill-opacity="0.8">
+  <style>
+    polygon:not(:target) {
+      display: none;
+    }
+  </style>
+  <polygon points="0,4 3.5,0 7,4" id="ascending"/>
+  <polygon points="0,0 3.5,4 7,0" id="descending"/>
 </svg>

--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -78,29 +78,24 @@
 #requests-menu-waterfall-image {
   display: -moz-box;
   height: 4px;
   margin-inline-end: 6px;
   -moz-box-ordinal-group: 2;
   width: 7px;
 }
 
-.requests-menu-header-button[sorted] > .button-box > .button-icon,
-.requests-menu-header-button[sorted] #requests-menu-waterfall-image {
-  list-style-image: url('chrome://devtools/skin/images/sort-arrows.svg');
-}
-
 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
-  -moz-image-region: rect(4px, 19px, 7px, 14px);
+  list-style-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
 }
 
 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
-  -moz-image-region: rect(5px, 8px, 8px, 3px);
+  list-style-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
 }
 
 .requests-menu-header-button > .button-box > .button-text,
 #requests-menu-waterfall-label-wrapper {
   -moz-box-flex: 1;
 }
 
 .requests-menu-header-button[sorted],

--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -1204,71 +1204,73 @@
 /* Column Headers */
 
 .table-widget-column-header,
 .table-widget-cell {
   -moz-border-end: 1px solid var(--table-splitter-color) !important;
 }
 
 /* Table widget column header colors are taken from netmonitor.inc.css to match
-   the look of both the tables. This needs to be updated along with netmonitor
-   header colors in bug 951714 */
+   the look of both the tables. */
 
 .table-widget-column-header {
-  background: rgba(0,0,0,0);
   position: sticky;
   top: 0;
   width: 100%;
+  margin: 0;
   padding: 5px 0 0 !important;
   color: inherit;
   text-align: center;
   font-weight: inherit !important;
-  transition: background-color 0.1s ease-in-out;
+  border-bottom-width: 0 !important;
+  border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+  background-repeat: no-repeat;
 }
 
-.table-widget-column-header:hover {
-  background-image: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10));
-}
-
-.table-widget-column-header:hover:active {
-  background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
+.table-widget-column-header:not([sorted]):hover {
+  background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
 }
 
-.table-widget-column-header:not(:active)[sorted] {
-  background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
+.table-widget-column-header[sorted] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+  box-shadow: -0.5px 0px 0px 0.5px var(--theme-splitter-color);
+  background-position: right 6px center;
 }
 
-.table-widget-column-header:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)),
-                    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
-  background-size: 100% 1px, auto;
-  background-repeat: no-repeat, repeat;
+.table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
+  background-position: 6px center;
 }
 
-.table-widget-column-header:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)),
-                    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
-  background-size: 100% 1px, auto;
-  background-repeat: no-repeat, repeat;
-  background-position: bottom;
+.table-widget-column-header[sorted=ascending] {
+  background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
+}
+
+.table-widget-column-header[sorted=descending] {
+  background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
 }
 
 /* Cells */
 
 .table-widget-cell {
   width: 100%;
   padding: 3px 4px;
   background-clip: padding-box;
   min-width: 100px;
   -moz-user-focus: normal;
   margin-bottom: -1px !important;
   border-bottom: 1px solid transparent;
   color: var(--theme-body-color);
 }
 
+.table-widget-column-header + .table-widget-cell {
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
 .table-widget-cell:last-child {
   border-bottom: 1px solid var(--table-splitter-color);
 }
 
 :root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
 .table-widget-cell:not(.theme-selected)[odd] {
   background: var(--table-zebra-background);
 }