diff --git a/src-large-data/index.js b/src-large-data/index.js
index e96ebe7..db2deae 100644
--- a/src-large-data/index.js
+++ b/src-large-data/index.js
@@ -5,7 +5,7 @@ import React from 'react';
 import LargeGrid from './largeGrid.jsx';
 
 import '@ag-grid-community/core/dist/styles/ag-grid.css';
-import '@ag-grid-community/core/dist/styles/ag-theme-fresh.css';
+import '@ag-grid-community/core/dist/styles/ag-theme-balham.css';
 
 // waiting for dom to load before booting react. we could alternatively
 // put the index.js reference at the end fo the index.html, but i prefer this way.
diff --git a/src-large-data/largeGrid.jsx b/src-large-data/largeGrid.jsx
index 75dd0ed..39b42f3 100644
--- a/src-large-data/largeGrid.jsx
+++ b/src-large-data/largeGrid.jsx
@@ -63,7 +63,7 @@ export default class MyApp extends Component {
 
     render() {
         return (
-            <div style={{height: '100%'}} className="ag-theme-fresh">
+            <div style={{height: '100%'}} className="ag-theme-balham">
                 <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} modules={AllModules}/>
             </div>
         );
diff --git a/src-trader-dashboard/components/FxQuoteMatrix.jsx b/src-trader-dashboard/components/FxQuoteMatrix.jsx
index 925b8c4..dad7ea3 100644
--- a/src-trader-dashboard/components/FxQuoteMatrix.jsx
+++ b/src-trader-dashboard/components/FxQuoteMatrix.jsx
@@ -61,7 +61,7 @@ class FxQuoteMatrix extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-theme-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
diff --git a/src-trader-dashboard/components/PriceChangesGrid.jsx b/src-trader-dashboard/components/PriceChangesGrid.jsx
index 1832441..9d1e120 100644
--- a/src-trader-dashboard/components/PriceChangesGrid.jsx
+++ b/src-trader-dashboard/components/PriceChangesGrid.jsx
@@ -152,7 +152,7 @@ export default class extends Component {
     render() {
         return (
             <div style={{height: 410, width: 800}}
-                 className="ag-theme-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
diff --git a/src-trader-dashboard/components/TopMoversGrid.jsx b/src-trader-dashboard/components/TopMoversGrid.jsx
index a4faacf..fded8a2 100644
--- a/src-trader-dashboard/components/TopMoversGrid.jsx
+++ b/src-trader-dashboard/components/TopMoversGrid.jsx
@@ -63,7 +63,7 @@ class TopMoversGrid extends Component {
     render() {
         return (
             <div style={{height: 410, width: 400}}
-                 className="ag-theme-fresh">
+                 className="ag-theme-balham">
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
diff --git a/src-trader-dashboard/index.js b/src-trader-dashboard/index.js
index 91d921f..c559dca 100644
--- a/src-trader-dashboard/index.js
+++ b/src-trader-dashboard/index.js
@@ -9,7 +9,7 @@ import StoreService from './services/StoreService';
 import TraderDashboard from "./components/TraderDashboard.jsx";
 
 import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css";
-import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-fresh.css";
+import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css";
 
 let store = StoreService.STORE;