diff --git a/public/config.json b/public/config.json
index 84a8249..1212f4f 100644
--- a/public/config.json
+++ b/public/config.json
@@ -29,5 +29,11 @@
       "fileName": "data.csv",
       "chartColumn": "status"
     }
-  ]
+  ],
+  "colorMaps" : {
+    "status" : {
+      "complicated":"red",
+      "single":"green"
+    }
+  }
 }
diff --git a/src/Chart.tsx b/src/Chart.tsx
index 22db84f..181038e 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -4,7 +4,7 @@ import {
 import * as React from 'react';
 import * as _ from 'lodash';
 import { Container, Title } from 'bloomer';
-const randomColor = require('randomcolor');
+// const randomColor = require('randomcolor');
 import * as Papa from 'papaparse';
 
 
@@ -36,26 +36,30 @@ export class Chart extends React.Component<any, any> {
         value: countMap[k],
       }
     })
-    const RADIAN = Math.PI / 180;
-    const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }:any) => {
-     	const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-      const x  = cx + radius * Math.cos(-midAngle * RADIAN);
-      const y = cy  + radius * Math.sin(-midAngle * RADIAN);
-
-      return (
-        <text x={x} y={y} fill="white" textAnchor='middle' 	dominantBaseline="central">
-        	{chartData[index].name}
-        </text>
-      );
-    };
+    // const RADIAN = Math.PI / 180;
+    // const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }:any) => {
+    //  	const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    //   const x  = cx + radius * Math.cos(-midAngle * RADIAN);
+    //   const y = cy  + radius * Math.sin(-midAngle * RADIAN);
+    //
+    //   return (
+    //     <text x={x} y={y} fill="white" textAnchor='middle' 	dominantBaseline="central">
+    //     	{chartData[index].name}
+    //     </text>
+    //   );
+    // };
+    const colorMap = this.props.colorMap;
     return (
       <Container>
         <Title isSize={4}>Plotting {_.capitalize(this.props.chartColumn)}</Title>
         <ResponsiveContainer width="100%" height={200}>
           <PieChart>
-            <Pie data={chartData} dataKey='value' outerRadius={100} label={renderCustomizedLabel} labelLine={false}>
+            <Pie data={chartData} dataKey='value' outerRadius={100} label={true} labelLine={false}>
               {
-                chartData.map((_0, _1) => <Cell key={_1} fill={randomColor()} />)
+                chartData.map((_0, _1) => {
+                  const color = _.get(colorMap, _0.name, 'gray');
+                  return (<Cell key={_1} fill={color} />)
+                })
               }
             </Pie>
             <Tooltip />
diff --git a/src/ChartLoader.tsx b/src/ChartLoader.tsx
index edeb2c8..727c466 100644
--- a/src/ChartLoader.tsx
+++ b/src/ChartLoader.tsx
@@ -1,37 +1,21 @@
 import * as React from 'react';
-import * as _ from 'lodash';
 import { Columns, Column } from 'bloomer';
-import * as local from 'localforage';
 import { Chart } from './Chart';
 
 export default class ChartLoader extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      chartList: []
-    }
-    fetch('/config.json')
-      .then((response) => response.text())
-      .then((jsonStr) => {
-        const jsonObj = JSON.parse(jsonStr);
-        const chartList = _.get<any>(jsonObj, 'chartList', []);
-        this.setState({ chartList });
-        local.setItem('config', jsonObj).catch((err: any) => {
-          console.error('error occurred when saving config', err);
-        });
-      })
-      .catch((e) => {
-        console.error('error occurred when loading config', e);
-      });
-  }
-
   public render() {
+    const colorMaps = this.props.colorMaps;
     return (
       <Columns>
-        {this.state.chartList.map((o: any, i: number) =>
-          <Column key={i} isSize={3}>
-            <Chart csvFile={o.fileName} chartColumn={o.chartColumn} />
-          </Column>
+        {this.props.chartList.map((o: any, i: number) => {
+          const colorMap = colorMaps[o.chartColumn];
+          return (
+            <Column key={i} isSize={3}>
+              <Chart csvFile={o.fileName} chartColumn={o.chartColumn} colorMap={colorMap} />
+            </Column>
+          );
+        }
+
         )}
       </Columns>
     )
diff --git a/src/RouteMenu.tsx b/src/RouteMenu.tsx
index 49c3bef..acdcd5c 100644
--- a/src/RouteMenu.tsx
+++ b/src/RouteMenu.tsx
@@ -5,6 +5,7 @@ import {
   Link
 } from 'react-router-dom';
 import { Container, Navbar, NavbarItem, NavbarMenu, Section } from 'bloomer';
+import * as local from 'localforage';
 import 'bulma/css/bulma.css';
 import ServerTabLoader from './ServerTabLoader';
 import ChartLoader from './ChartLoader';
@@ -15,23 +16,50 @@ const navButton = (name: string, link: string) => (
 
 const RedirectCharts = () => (<Redirect to='/charts' />);
 
-const AppRoute = () => (
-  <Router>
-    <div>
-      <Container isFluid={true} isMarginless={true} isFullWidth={true}>
-        <Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
-          <NavbarMenu isActive={true}>
-            <NavbarItem >{navButton('Charts', '/charts')}</NavbarItem>
-            <NavbarItem>{navButton('Tables', '/tables')}</NavbarItem>
-          </NavbarMenu>
-        </Navbar>
-      </Container>
-      <Section isPaddingless={true}>
-        <Route exact={true} path="/" component={RedirectCharts} />
-        <Route path="/charts" component={ChartLoader} />
-        <Route path="/tables" component={ServerTabLoader} />
-      </Section>
-    </div>
-  </Router>
-)
+class AppRoute extends React.Component {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      tabList:[],
+      chartList: [],
+      colorMaps:{}
+    }
+    fetch('/config.json')
+      .then((response) => response.text())
+      .then((jsonStr) => {
+        const jsonObj = JSON.parse(jsonStr);
+        this.setState({ ...jsonObj });
+        local.setItem('config', jsonObj).catch((err: any) => {
+          console.error('error occurred when saving config', err);
+        });
+      })
+      .catch((e) => {
+        console.error('error occurred when loading config', e);
+      });
+  }
+
+  public render() {
+    const ConfiguredChart = () => (<ChartLoader {...this.state}/>);
+    const ConfiguredServerTab = () => (<ServerTabLoader {...this.state}/>);
+    return (
+      <Router>
+        <div>
+          <Container isFluid={true} isMarginless={true} isFullWidth={true}>
+            <Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
+              <NavbarMenu isActive={true}>
+                <NavbarItem >{navButton('Charts', '/charts')}</NavbarItem>
+                <NavbarItem>{navButton('Tables', '/tables')}</NavbarItem>
+              </NavbarMenu>
+            </Navbar>
+          </Container>
+          <Section isPaddingless={true}>
+            <Route exact={true} path="/" component={RedirectCharts} />
+            <Route path="/charts" component={ConfiguredChart} />
+            <Route path="/tables" component={ConfiguredServerTab} />
+          </Section>
+        </div>
+      </Router>
+    );
+  }
+}
 export default AppRoute
diff --git a/src/ServerTabLoader.tsx b/src/ServerTabLoader.tsx
index c0c4f65..b4baaf1 100644
--- a/src/ServerTabLoader.tsx
+++ b/src/ServerTabLoader.tsx
@@ -1,75 +1,29 @@
 import * as React from 'react';
-import * as _ from 'lodash';
 import ServerTable from './ServerTable';
 import { Tabs, TabList, TabPanel, Tab } from 'react-tabs';
 import { Hero, HeroBody } from 'bloomer';
-import * as local from 'localforage';
 import './Tabs.css';
 
 
 export default class ServerTabLoader extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      tabList: []
-    }
-    fetch('/config.json')
-      .then((response) => response.text())
-      .then((jsonStr) => {
-        const jsonObj = JSON.parse(jsonStr);
-        const tabList = _.get<any>(jsonObj, 'tabList', []);
-        this.setState({ tabList });
-        local.setItem('config', jsonObj).catch((err: any) => {
-          console.error('error occurred when saving config', err);
-        });
-      })
-      .catch((e) => {
-        console.error('error occurred when loading config', e);
-      });
-    // TODO: enable localstore to load config
-    // const onLocal = (config: any) => {
-    //   if (config) {
-    //     const tabList = _.get<any>(config, 'tabList', []);
-    //     this.setState({ tabList });
-    //   } else {
-    //     fetch('/config.json')
-    //       .then((response) => response.text())
-    //       .then((jsonStr) => {
-    //         const jsonObj = JSON.parse(jsonStr);
-    //         const tabList = _.get<any>(jsonObj, 'tabList', []);
-    //         this.setState({ tabList });
-    //         local.setItem('config', jsonObj).then((val: any) => {
-    //           console.log('saved to localstore ',val);
-    //         }).catch((err:any) => {
-    //           console.error('error occurred when saving config', err);
-    //         });
-    //       })
-    //       .catch((e) => {
-    //         this.setState({ message: e.stack, showMessage: true });
-    //       });
-    //   }
-    // };
-    // local.getItem('config').then(onLocal).catch((err: any) => {
-    //   // This code runs if there were any errors
-    //   console.error('error occurred when getting config from localstore', err);
-    // });
-  }
-
   public render() {
     return (
       <Hero isColor='light' isSize='large' isFullWidth={true} isFullHeight={true}>
         <HeroBody isPaddingless={true} isDisplay='block'>
           <Tabs forceRenderTabPanel={true}>
             <TabList>
-              {this.state.tabList.map((o: any, i: number) =>
+              {this.props.tabList.map((o: any, i: number) =>
                 (<Tab key={i}>{o.tabTitle}</Tab>)
               )}
             </TabList>
-            {this.state.tabList.map((o: any, i: number) =>
-              (<TabPanel key={i}>
-                <ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} colorMap={o.colorMap} />
-              </TabPanel>
-              )
+            {this.props.tabList.map((o: any, i: number) => {
+              const colorMap = this.props.colorMaps[o.colorColumn];
+              return (
+                <TabPanel key={i}>
+                  <ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} colorMap={colorMap} />
+                </TabPanel>
+              );
+            }
             )}
           </Tabs>
         </HeroBody>