diff --git a/.gitignore b/.gitignore
index d0c9565..0a672e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 /node_modules
 /dist
-package-lock.json
\ No newline at end of file
+package-lock.json
+*.nosync
diff --git a/package.json b/package.json
index cbb4709..ebba915 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "22.1.0",
+  "version": "23.0.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -38,7 +38,7 @@
   },
   "homepage": "http://www.ag-grid.com/",
   "devDependencies": {
-    "@ag-grid-community/core": "~22.1.0",
+    "@ag-grid-community/core": "~23.0.0",
     "@babel/core": "7.4.4",
     "@babel/plugin-proposal-class-properties": "7.4.4",
     "@babel/plugin-proposal-function-bind": "7.2.0",
@@ -62,9 +62,9 @@
     "webpack-dev-server": "3.4.1"
   },
   "dependencies": {
-    "@ag-grid-enterprise/all-modules": "~22.1.0",
-    "@ag-grid-community/react": "~22.1.0",
-    "bootstrap": "4.3.1",
+    "@ag-grid-enterprise/all-modules": "~23.0.0",
+    "@ag-grid-community/react": "~23.0.0",
+    "bootstrap": "4.4.1",
     "d3": "4.9.1",
     "lodash": "4.17.11",
     "react": "16.8.6",
diff --git a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
index 369f89f..a40b133 100644
--- a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
+++ b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
@@ -1,5 +1,5 @@
-import React, {Component} from "react";
-import {AgGridColumn, AgGridReact} from "@ag-grid-community/react";
+import React, { Component } from "react";
+import { AgGridColumn, AgGridReact } from "@ag-grid-community/react";
 import RowDataFactory from "./RowDataFactory";
 import DateComponent from "./DateComponent.jsx";
 import SkillsCellRenderer from './SkillsCellRenderer.jsx';
@@ -17,7 +17,7 @@ import "./RichGridDeclarativeExample.css";
 // import {AllCommunityModules} from "@ag-grid-community/all-modules";
 
 // for enterprise features
-import {AllModules} from "@ag-grid-enterprise/all-modules";
+import { AllModules } from "@ag-grid-enterprise/all-modules";
 
 export default class RichGridDeclarativeExample extends Component {
     constructor(props) {
@@ -57,7 +57,7 @@ export default class RichGridDeclarativeExample extends Component {
 
     /* Demo related methods */
     onToggleSidebar = (event) => {
-        this.setState({sideBar: event.target.checked});
+        this.setState({ sideBar: event.target.checked });
     };
 
     deselectAll() {
@@ -65,7 +65,7 @@ export default class RichGridDeclarativeExample extends Component {
     }
 
     onQuickFilterText = (event) => {
-        this.setState({quickFilterText: event.target.value});
+        this.setState({ quickFilterText: event.target.value });
     };
 
     onRefreshData = () => {
@@ -128,58 +128,58 @@ export default class RichGridDeclarativeExample extends Component {
 
     render() {
         return (
-            <div style={{width: '900px'}}>
+            <div style={{ width: '900px' }}>
                 <h1>Rich Grid with Declarative Markup Example</h1>
-                <div style={{display: "inline-block", width: "100%"}}>
-                    <div style={{float: "left"}}>
-                        <b>Employees Skills and Contact Details: </b>{ this.state.rowCount }
+                <div style={{ display: "inline-block", width: "100%" }}>
+                    <div style={{ float: "left" }}>
+                        <b>Employees Skills and Contact Details: </b>{this.state.rowCount}
                     </div>
                 </div>
-                <div style={{marginTop: 10}}>
+                <div style={{ marginTop: 10 }}>
                     <div>
                         <span>
                             Grid API:
                             <button onClick={() => {
-                                this.api.selectAll()
+                                this.api.selectAll();
                             }} className="btn btn-primary">Select All</button>
                             <button onClick={() => {
-                                this.api.deselectAll()
+                                this.api.deselectAll();
                             }} className="btn btn-primary">Clear Selection</button>
                         </span>
-                        <span style={{float: "right"}}>
+                        <span style={{ float: "right" }}>
                             Column API:
                             <button onClick={() => {
-                                this.columnApi.setColumnVisible('country', false)
+                                this.columnApi.setColumnVisible('country', false);
                             }} className="btn btn-primary">Hide Country Column</button>
                             <button onClick={() => {
-                                this.columnApi.setColumnVisible('country', true)
+                                this.columnApi.setColumnVisible('country', true);
                             }} className="btn btn-primary">Show Country Column</button>
                         </span>
                     </div>
-                    <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
-                        <div style={{float: "left"}}>
+                    <div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
+                        <div style={{ float: "left" }}>
                             <button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
                         </div>
-                        <div style={{float: "right"}}>
+                        <div style={{ float: "right" }}>
                             Filter API:
                             <button onClick={this.invokeSkillsFilterMethod}
-                                    className="btn btn-primary">Invoke Skills Filter Method
+                                className="btn btn-primary">Invoke Skills Filter Method
                             </button>
                             <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000
                             </button>
                         </div>
                     </div>
-                    <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
-                        <div style={{float: "left"}}>
+                    <div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
+                        <div style={{ float: "left" }}>
                             <label htmlFor="sideBarToggle">Show Side Bar&nbsp;</label>
-                            <input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
+                            <input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{ marginRight: 5 }} />
                         </div>
-                        <div style={{float: "right", marginLeft: 20}}>
+                        <div style={{ float: "right", marginLeft: 20 }}>
                             <label htmlFor="quickFilter">Quick Filter:&nbsp;</label>
-                            <input type="text" id="quickFilter" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
+                            <input type="text" id="quickFilter" onChange={this.onQuickFilterText} placeholder="Type text to filter..." />
                         </div>
                     </div>
-                    <div style={{height: 400, width: 900}} className="ag-theme-balham">
+                    <div style={{ height: 400, width: 900 }} className="ag-theme-balham">
                         <AgGridReact
                             // listening for events
                             onGridReady={this.onGridReady}
@@ -220,35 +220,35 @@ export default class RichGridDeclarativeExample extends Component {
                                 }
                             }}>
                             <AgGridColumn headerName="#" width={30}
-                                          checkboxSelection sortable={false} suppressMenu filter={false} pinned>
+                                checkboxSelection sortable={false} suppressMenu filter={false} pinned>
                             </AgGridColumn>
                             <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
                                 <AgGridColumn field="name" width={150}
-                                              cellEditorFramework={NameCellEditor}
-                                              enableRowGroup enablePivot pinned editable/>
+                                    cellEditorFramework={NameCellEditor}
+                                    enableRowGroup enablePivot pinned editable />
                                 <AgGridColumn field="country" width={150}
-                                              cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
-                                              filterParams={{
-                                                  cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
-                                                  cellHeight: 20
-                                              }}
-                                              enableRowGroup enablePivot pinned editable/>
+                                    cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
+                                    filterParams={{
+                                        cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
+                                        cellHeight: 20
+                                    }}
+                                    enableRowGroup enablePivot pinned editable />
                                 <AgGridColumn field="dob" width={175} headerName="DOB" filter="agDateColumnFilter"
-                                              pinned columnGroupShow="open"
-                                              cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
+                                    pinned columnGroupShow="open"
+                                    cellRenderer={RichGridDeclarativeExample.dateCellRenderer} />
                             </AgGridColumn>
                             <AgGridColumn headerName="IT Skills">
                                 <AgGridColumn field="skills" width={120} enableRowGroup enablePivot sortable={false}
-                                              cellRendererFramework={SkillsCellRenderer}
-                                              filterFramework={SkillsFilter}/>
+                                    cellRendererFramework={SkillsCellRenderer}
+                                    filterFramework={SkillsFilter} />
                                 <AgGridColumn field="proficiency" width={160} enableValue
-                                              cellRendererFramework={ProficiencyCellRenderer}
-                                              filterFramework={ProficiencyFilter}/>
+                                    cellRendererFramework={ProficiencyCellRenderer}
+                                    filterFramework={ProficiencyFilter} />
                             </AgGridColumn>
                             <AgGridColumn headerName="Contact">
-                                <AgGridColumn field="mobile" width={150} filter="text"/>
-                                <AgGridColumn field="landline" width={150} filter="text"/>
-                                <AgGridColumn field="address" width={500} filter="text"/>
+                                <AgGridColumn field="mobile" width={150} filter="text" />
+                                <AgGridColumn field="landline" width={150} filter="text" />
+                                <AgGridColumn field="address" width={500} filter="text" />
                             </AgGridColumn>
                         </AgGridReact>
                     </div>
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;