diff --git a/resources/frontend_client/app/components/mb_data_table/mb_data_table.css b/resources/frontend_client/app/components/mb_data_table/mb_data_table.css
new file mode 100644
index 0000000000000000000000000000000000000000..620a00403e66fcb064ba6950e76d4ff1265ea13b
--- /dev/null
+++ b/resources/frontend_client/app/components/mb_data_table/mb_data_table.css
@@ -0,0 +1,18 @@
+.MB-DataTable-header {
+    background-color: #fff;
+    background-image: none;
+}
+
+
+.MB-DataTable-header .Icon-chevrondown       { opacity: 0; }
+.MB-DataTable-header:hover .Icon-chevrondown { opacity: 1; }
+
+/* what follows is a war crime but such is the state of FE development */
+.Visualization .public_fixedDataTable_main {
+    border-color: red;
+}
+
+.Visualization .public_fixedDataTableRow_highlighted,
+.Visualization .public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main {
+    background-color: #fff;
+}
diff --git a/resources/frontend_client/app/query_builder/visualization_table.react.js b/resources/frontend_client/app/query_builder/visualization_table.react.js
index 571d687062e153b636bf06a0b1a86c778673dd9c..b1dd60d6e604f1a92aa30ac14d832a97f8a4af76 100644
--- a/resources/frontend_client/app/query_builder/visualization_table.react.js
+++ b/resources/frontend_client/app/query_builder/visualization_table.react.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import FixedDataTable from 'fixed-data-table';
+import Icon from './icon.react';
 
 var Table = FixedDataTable.Table;
 var Column = FixedDataTable.Column;
@@ -78,12 +79,18 @@ export default React.createClass({
 
     tableHeaderRenderer: function(columnIndex) {
         var column = this.props.data.cols[columnIndex],
-            colVal = (column !== null) ? column.name.toString() : null;
+            colVal = (column !== null) ? column.name.toString() : null,
+            headerClasses = 'MB-DataTable-header flex align-center';
 
         if (this.isSortable()) {
-            return (<div onClick={this.setSort.bind(null, column.id)}>{colVal}</div>);
+            return (
+                <div className={headerClasses} onClick={this.setSort.bind(null, column.id)}>
+                    {colVal}
+                    <Icon className="flex-align-right" name="chevrondown" width="12px" height="12px"></Icon>
+                </div>
+            );
         } else {
-            return (<div>{colVal}</div>);
+            return (<div className={headerClasses}>{colVal}</div>);
         }
     },
 
@@ -113,6 +120,7 @@ export default React.createClass({
 
             return (
                 <Column
+                    className="MB-DataTable-column"
                     width={colWidth}
                     isResizable={true}
                     headerRenderer={component.tableHeaderRenderer.bind(null, idx)}
@@ -125,6 +133,7 @@ export default React.createClass({
 
         return (
             <Table
+                className="MB-DataTable"
                 rowHeight={35}
                 rowGetter={this.rowGetter}
                 rowsCount={rowCount}