diff --git a/example/index.js b/example/index.js
index 05d9ab002..f93f5738d 100644
--- a/example/index.js
+++ b/example/index.js
@@ -79,7 +79,7 @@ class Example extends React.Component {
             
             cell: {
               root: {
-                },
+              },
               sortLabel: {
               },
             }
@@ -87,11 +87,18 @@ class Example extends React.Component {
           },
           body: {
 
-            row: {
+            main: {
+
+            },
 
+            row: {
+              root: {
+                color: "#FF0000"
+              }
             },
             cell: {
               root: {
+                color: "#000"
               }
             }
 
@@ -114,16 +121,10 @@ class Example extends React.Component {
           },
           iconActive: {
           },
-          search: {
-          },
           searchIcon: {
           },
-          searchText: {
-          },
-          clearIcon: {
-            color: "#000",
-            border: "solid 1px #000"
-          },
+        },
+        filterView: {
         },
         filterList: {
           root: {
@@ -134,7 +135,22 @@ class Example extends React.Component {
           },
         },
         pagination: {
+          root: {
+            border: "solid 1px #000"
+          }
+        },
+        viewColumns: {
 
+        },
+        search: {
+          main: {
+          },
+          searchIcon: {
+          },
+          searchText: {
+          },
+          clearIcon: {
+          },          
         }
       }
     };
diff --git a/package.json b/package.json
index 566390a3a..8100b2920 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,8 @@
     "material-ui": "^1.0.0-beta.22",
     "material-ui-icons": "^1.0.0-beta.17",
     "prop-types": "^15.6.0",
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "react-popper": "^0.7.4"
   },
   "side-effects": false,
   "nyc": {
diff --git a/src/DataStyles.js b/src/DataStyles.js
new file mode 100644
index 000000000..49d912730
--- /dev/null
+++ b/src/DataStyles.js
@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import merge from "lodash.merge";
+import get from "lodash.get";
+import { withStyles } from "material-ui/styles";
+
+const getStyle = (obj, name) => {
+  return get(obj, "styles." + name, null);
+};
+
+const stylePass = (displayName, setFn) => {
+  const result = class StylePass extends React.Component {
+    componentWillMount() {
+      setFn(this.props.classes);
+    }
+
+    componentWillReceieveProps(nextProps) {
+      if (this.props.classes !== nextprops.classes) setFn(nextProps.classes);
+    }
+
+    render() {
+      return this.props.children;
+    }
+  };
+  result.displayName = displayName;
+  return result;
+};
+
+class DataStyles extends React.Component {
+  state = {
+    data: null,
+  };
+
+  setStyleClass = data => {
+    this.setState(() => ({
+      styleData: data,
+    }));
+  };
+
+  constructor(props) {
+    super(props);
+    this.buildComponent(props);
+  }
+
+  componentWillReceieveProps(nextProps) {
+    if (nextProps.styles !== this.props.styles) this.buildComponent(nextProps);
+  }
+
+  buildComponent(props) {
+    const defaultStyles = props.defaultStyles ? props.defaultStyles : {};
+    const finalStyles = merge(defaultStyles, props.styles);
+
+    // just a pass-through
+    this.component = withStyles(finalStyles)(stylePass(props.name, this.setStyleClass));
+  }
+
+  render() {
+    const { children, defaultStyles } = this.props;
+    const WrappedComponent = this.component;
+
+    return <WrappedComponent>{this.state.styleData ? children(this.state.styleData) : false}</WrappedComponent>;
+  }
+}
+
+export { DataStyles, getStyle };
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 5329a5096..675a89898 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -9,13 +9,12 @@ import MUIDataTableBody from "./MUIDataTableBody";
 import MUIDataTableHead from "./MUIDataTableHead";
 import MUIDataTablePagination from "./MUIDataTablePagination";
 import debounce from "lodash.debounce";
-import { getStyle, withDataStyles } from "./withDataStyles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const styles = theme => ({
-  table: {
-    fontFamily: "Roboto",
-  },
-});
+const defaultTableStyles = {
+  main: {
+  }
+};
 
 class MUIDataTable extends React.Component {
   static propTypes = {
@@ -38,8 +37,6 @@ class MUIDataTable extends React.Component {
     }),
     /** Pass and use className to style MUIDataTable as desired */
     className: PropTypes.string,
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
   };
 
   state = {
@@ -325,7 +322,6 @@ class MUIDataTable extends React.Component {
         <MUIDataTableToolbar
           data={data}
           columns={columns}
-          classes={getStyle(this.options, "toolbar")}
           options={this.options}
           tableRef={() => this.tableRef}
           filterUpdate={this.filterUpdate}
@@ -335,45 +331,45 @@ class MUIDataTable extends React.Component {
           searchTextUpdate={this.searchTextUpdate}
           toggleViewColumn={this.toggleViewColumn}
         />
-        <MUIDataTableFilterList
-          classes={getStyle(this.options, "filterList")}
-          filterList={filterList}
-          filterUpdate={this.filterUpdate}
-        />
-        <Table ref={el => (this.tableRef = el)} className={classes.table}>
-          <MUIDataTableHead
-            columns={columns}
-            classes={getStyle(this.options, "table.head")}
-            toggleSort={this.toggleSortColumn}
-            options={this.options}
-          />
-          <MUIDataTableBody
-            data={this.state.displayData}
-            columns={columns}
-            classes={getStyle(this.options, "table.body")}
-            page={page}
-            rowsPerPage={rowsPerPage}
-            options={this.options}
-            searchText={searchText}
-            filterList={filterList}
-          />
-          {this.options.pagination ? (
-            <MUIDataTablePagination
-              count={displayData.length}
-              classes={getStyle(this.options, "pagination")}
-              page={page}
-              rowsPerPage={rowsPerPage}
-              changeRowsPerPage={this.changeRowsPerPage}
-              changePage={this.changePage}
-              options={this.options}
-            />
-          ) : (
-            false
+        <MUIDataTableFilterList options={this.options} filterList={filterList} filterUpdate={this.filterUpdate} />
+        <DataStyles
+          defaultStyles={defaultTableStyles}
+          name="MUIDataTable"
+          styles={getStyle(this.options, "table.main")}>
+          {tableStyles => (
+            <Table ref={el => (this.tableRef = el)} className={tableStyles.main}>
+              <MUIDataTableHead
+                columns={columns}
+                toggleSort={this.toggleSortColumn}
+                options={this.options}
+              />
+              <MUIDataTableBody
+                data={this.state.displayData}
+                columns={columns}
+                page={page}
+                rowsPerPage={rowsPerPage}
+                options={this.options}
+                searchText={searchText}
+                filterList={filterList}
+              />
+              {this.options.pagination ? (
+                <MUIDataTablePagination
+                  count={displayData.length}
+                  page={page}
+                  rowsPerPage={rowsPerPage}
+                  changeRowsPerPage={this.changeRowsPerPage}
+                  changePage={this.changePage}
+                  options={this.options}
+                />
+              ) : (
+                false
+              )}
+            </Table>
           )}
-        </Table>
+          </DataStyles>
       </Paper>
     );
   }
 }
 
-export default withDataStyles(styles)(MUIDataTable);
+export default MUIDataTable;
diff --git a/src/MUIDataTableBody.js b/src/MUIDataTableBody.js
index 3438d0ef8..6c9b3b485 100644
--- a/src/MUIDataTableBody.js
+++ b/src/MUIDataTableBody.js
@@ -4,16 +4,26 @@ import Table from "material-ui/Table";
 import Typography from "material-ui/Typography";
 import { TableBody, TableRow } from "material-ui/Table";
 import MUIDataTableBodyCell from "./MUIDataTableBodyCell";
-import { getStyle, withDataStyles } from "./withDataStyles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const bodyStyles = theme => ({
+const defaultBodyStyles = {
   root: {
     borderBottom: "solid 1px #bdbdbd",
   },
   emptyTitle: {
     textAlign: "center",
   },
-});
+};
+
+const defaultBodyRowStyles = {
+  root: {},
+};
+
+const defaultBodyCellStyles = {
+  root: {
+    border: "solid 1px #FF0000",
+  },
+};
 
 class MUIDataTableBody extends React.Component {
   static propTypes = {
@@ -32,52 +42,73 @@ class MUIDataTableBody extends React.Component {
   };
 
   buildRows() {
-    const { data, columns, options, page, rowsPerPage } = this.props;
+    const { data, page, rowsPerPage } = this.props;
 
-    const newRows = [];
+    let rows = [];
     const fromIndex = page === 0 ? 0 : page * rowsPerPage;
     const toIndex = Math.min(data.length, (page + 1) * rowsPerPage);
 
     for (let rowIndex = fromIndex; rowIndex < data.length && rowIndex < toIndex; rowIndex++) {
-      newRows.push(
-        <TableRow hover={options.rowHover ? true : false} key={rowIndex}>
-          {data[rowIndex].map(
-            (column, index) =>
-              columns[index].display ? (
-                <MUIDataTableBodyCell classes={getStyle(options, "table.body.cell")} key={index}>
-                  {column}
-                </MUIDataTableBodyCell>
-              ) : (
-                false
-              ),
-          )}
-        </TableRow>,
-      );
+      rows.push(data[rowIndex]);
     }
 
-    return newRows;
+    return rows.length ? rows : null;
   }
 
   render() {
-    const { columns, classes, options } = this.props;
+    const { columns, options } = this.props;
     const tableRows = this.buildRows();
 
     return (
-      <TableBody>
-        {tableRows.length ? (
-          tableRows
-        ) : (
-          <TableRow>
-            <MUIDataTableBodyCell classes={getStyle(options, "table.body.cell")} colSpan={columns.length}>
-              <Typography type="subheading" className={classes.emptyTitle}>
-                Sorry, no matching records found
-              </Typography>
-            </MUIDataTableBodyCell>
-          </TableRow>
+      <DataStyles
+        defaultStyles={defaultBodyStyles}
+        name="MUIDataTableBody"
+        styles={getStyle(options, "table.body.main")}>
+        {bodyStyles => (
+          <TableBody>
+            <DataStyles
+              defaultStyles={defaultBodyCellStyles}
+              name="MUIDataTableBodyRow"
+              styles={getStyle(options, "table.body.row")}>
+              {rowStyles => (
+                <DataStyles
+                  defaultStyles={defaultBodyCellStyles}
+                  name="MUIDataTableBodyCell"
+                  styles={getStyle(options, "table.body.cell")}>
+                  {cellStyles => {
+                    return tableRows ? (
+                      tableRows.map((row, rowIndex) => (
+                        <TableRow hover={options.rowHover ? true : false} className={rowStyles.root} key={rowIndex}>
+                          {row.map(
+                            (column, index) =>
+                              columns[index].display ? (
+                                <MUIDataTableBodyCell className={cellStyles.root} key={index}>
+                                  {column}
+                                </MUIDataTableBodyCell>
+                              ) : (
+                                false
+                              ),
+                          )}
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <MUIDataTableBodyCell className={cellStyles.root} colSpan={columns.length}>
+                          <Typography type="subheading" className={bodyStyles.emptyTitle}>
+                            Sorry, no matching records found
+                          </Typography>
+                        </MUIDataTableBodyCell>
+                      </TableRow>
+                    );
+                  }}
+                </DataStyles>
+              )}
+            </DataStyles>
+          </TableBody>
         )}
-      </TableBody>
+      </DataStyles>
     );
   }
 }
 
-export default withDataStyles(bodyStyles)(MUIDataTableBody);
+export default MUIDataTableBody;
diff --git a/src/MUIDataTableBodyCell.js b/src/MUIDataTableBodyCell.js
index d0aba9d52..3bf4836a6 100644
--- a/src/MUIDataTableBodyCell.js
+++ b/src/MUIDataTableBodyCell.js
@@ -2,23 +2,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import Table from "material-ui/Table";
 import { TableCell } from "material-ui/Table";
-import { getStyle, withDataStyles } from "./withDataStyles";
-
-const cellStyles = theme => ({
-  root: {
-    borderBottom: "solid 1px #bdbdbd",
-  },
-});
 
 class MUIDataTableBodyCell extends React.Component {
   render() {
-    const { children, classes, ...otherProps } = this.props;
-    return (
-      <TableCell className={classes.root} {...otherProps}>
-        {children}
-      </TableCell>
-    );
+    const { children, ...otherProps } = this.props;
+
+    return <TableCell {...otherProps}>{children}</TableCell>;
   }
 }
 
-export default withDataStyles(cellStyles)(MUIDataTableBodyCell);
+export default MUIDataTableBodyCell;
diff --git a/src/MUIDataTableFilter.js b/src/MUIDataTableFilter.js
index 2b86b60ed..fbf4349ed 100644
--- a/src/MUIDataTableFilter.js
+++ b/src/MUIDataTableFilter.js
@@ -8,94 +8,7 @@ import Input, { InputLabel } from "material-ui/Input";
 import { MenuItem } from "material-ui/Menu";
 import Select from "material-ui/Select";
 import Checkbox from "material-ui/Checkbox";
-import { getStyle, withDataStyles } from "./withDataStyles";
-
-const filterStyles = theme => ({
-  root: {
-    padding: "16px 24px 16px 24px",
-    fontFamily: "Roboto",
-  },
-  header: {
-    flex: "0 0 auto",
-    marginBottom: "16px",
-    width: "100%",
-    display: "flex",
-    justifyContent: "space-between",
-  },
-  title: {
-    display: "inline-block",
-    marginLeft: "7px",
-    fontSize: "14px",
-    fontWeight: 500,
-  },
-  noMargin: {
-    marginLeft: "0px",
-  },
-  reset: {
-    alignSelf: "left",
-  },
-  resetLink: {
-    color: "#027cb5",
-    display: "inline-block",
-    marginLeft: "24px",
-    fontSize: "12px",
-    cursor: "pointer",
-    "&:hover": {
-      color: "#FF0000",
-    },
-  },
-  filtersSelected: {
-    alignSelf: "right",
-  },
-  /* checkbox */
-  checkboxList: {
-    flex: "1 1 100%",
-    display: "inline-flex",
-    marginRight: "24px",
-  },
-  checkboxListTitle: {
-    marginLeft: "7px",
-    marginBottom: "8px",
-    fontSize: "14px",
-    color: "#424242",
-    textAlign: "left",
-    fontWeight: 500,
-  },
-  checkboxFormGroup: {
-    marginTop: "8px",
-  },
-  checkboxFormControl: {
-    margin: "0px",
-  },
-  checkboxFormControlLabel: {
-    fontSize: "15px",
-    marginLeft: "8px",
-    color: "#4a4a4a",
-  },
-  checkboxIcon: {
-    //color: "#027cb5",
-    width: "32px",
-    height: "32px",
-  },
-  checked: {
-    color: "#027CB5",
-  },
-  /* selects */
-  selectRoot: {
-    display: "flex",
-    marginTop: "16px",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    width: "100%",
-    height: "80%",
-    justifyContent: "space-between",
-  },
-  selectFormControl: {
-    flex: "1 1 calc(50% - 24px)",
-    marginRight: "24px",
-    marginBottom: "24px",
-  },
-});
+import { getStyle, DataStyles } from "./DataStyles";
 
 class MUIDataTableFilter extends React.Component {
   static propTypes = {
@@ -108,7 +21,7 @@ class MUIDataTableFilter extends React.Component {
     /** Callback to trigger filter reset */
     onFilterRest: PropTypes.func,
     /** Extend the style applied to components */
-    classes: PropTypes.object,
+    filterStyles: PropTypes.object,
   };
 
   handleCheckboxChange = (index, column) => {
@@ -121,47 +34,47 @@ class MUIDataTableFilter extends React.Component {
   };
 
   render() {
-    const { classes, columns, options, filterData, filterList, onFilterReset } = this.props;
-
-    const titleClass = classNames({
-      [classes.title]: true,
-      [classes.noMargin]: options.filterType === "dropdown" ? true : false,
-    });
+    const { classes, columns, options, filterStyles, filterData, filterList, onFilterReset } = this.props;
 
     return (
-      <div className={classes.root}>
-        <div className={classes.header}>
-          <div className={classes.reset}>
-            <Typography type="sub" className={titleClass}>
+      <div className={filterStyles.root}>
+        <div className={filterStyles.header}>
+          <div className={filterStyles.reset}>
+            <Typography
+              type="caption"
+              className={classNames({
+                [filterStyles.title]: true,
+                [filterStyles.noMargin]: options.filterType === "dropdown" ? true : false,
+              })}>
               FILTERS
             </Typography>
-            <a className={classes.resetLink} tabIndex={0} aria-label="Reset Filters" onClick={onFilterReset}>
+            <a className={filterStyles.resetLink} tabIndex={0} aria-label="Reset Filters" onClick={onFilterReset}>
               RESET
             </a>
           </div>
-          <div className={classes.filtersSelected} />
+          <div className={filterStyles.filtersSelected} />
         </div>
         {options.filterType === "checkbox" ? (
           columns.map((column, index) => (
-            <div className={classes.checkboxList} key={index}>
+            <div className={filterStyles.checkboxList} key={index}>
               <FormGroup>
-                <Typography type="sub" className={classes.checkboxListTitle}>
+                <Typography type="caption" className={filterStyles.checkboxListTitle}>
                   {column.name}
                 </Typography>
                 {filterData[index].map((filterColumn, filterIndex) => (
                   <FormControlLabel
                     key={filterIndex}
                     classes={{
-                      root: classes.checkboxFormControl,
-                      label: classes.checkboxFormControlLabel,
+                      root: filterStyles.checkboxFormControl,
+                      label: filterStyles.checkboxFormControlLabel,
                     }}
                     control={
                       <Checkbox
-                        className={classes.checkboxIcon}
+                        className={filterStyles.checkboxIcon}
                         onChange={this.handleCheckboxChange.bind(null, index, filterColumn)}
                         checked={filterList[index].indexOf(filterColumn) >= 0 ? true : false}
                         classes={{
-                          checked: classes.checked,
+                          checked: filterStyles.checked,
                         }}
                         value={filterColumn}
                       />
@@ -173,10 +86,10 @@ class MUIDataTableFilter extends React.Component {
             </div>
           ))
         ) : (
-          <div className={classes.selectRoot}>
+          <div className={filterStyles.selectRoot}>
             {columns.map((column, index) => {
               return (
-                <FormControl className={classes.selectFormControl} key={index}>
+                <FormControl className={filterStyles.selectFormControl} key={index}>
                   <InputLabel htmlFor={column.name}>{column.name}</InputLabel>
                   <Select
                     value={filterList[index] && filterList[index][0] ? filterList[index][0] : "All"}
@@ -202,4 +115,4 @@ class MUIDataTableFilter extends React.Component {
   }
 }
 
-export default withDataStyles(filterStyles)(MUIDataTableFilter);
+export default MUIDataTableFilter;
diff --git a/src/MUIDataTableFilterList.js b/src/MUIDataTableFilterList.js
index 6e324840e..3aa4c480e 100644
--- a/src/MUIDataTableFilterList.js
+++ b/src/MUIDataTableFilterList.js
@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Chip from "material-ui/Chip";
-import { getStyle, withDataStyles } from "./withDataStyles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const styles = theme => ({
+const defaultFilterListStyles = {
   root: {
     display: "flex",
     justifyContent: "left",
@@ -13,7 +13,7 @@ const styles = theme => ({
   chip: {
     margin: "8px 8px 0px 0px",
   },
-});
+};
 
 class MUIDataTableFilterList extends React.Component {
   static propTypes = {
@@ -21,28 +21,33 @@ class MUIDataTableFilterList extends React.Component {
     filterList: PropTypes.array.isRequired,
     /** Callback to trigger filter update */
     onFilterUpdate: PropTypes.func,
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
   };
 
   render() {
-    const { classes, filterList, filterUpdate } = this.props;
+    const { filterList, filterUpdate, options } = this.props;
 
     return (
-      <div className={classes.root}>
-        {filterList.map((item, index) =>
-          item.map((data, colIndex) => (
-            <Chip
-              label={data}
-              key={colIndex}
-              onRequestDelete={filterUpdate.bind(null, index, data, "checkbox")}
-              className={classes.chip}
-            />
-          )),
+      <DataStyles
+        defaultStyles={defaultFilterListStyles}
+        name="MUIDataTableFilterList"
+        styles={getStyle(options, "table.filterList")}>
+        {filterListStyles => (
+          <div className={filterListStyles.root}>
+            {filterList.map((item, index) =>
+              item.map((data, colIndex) => (
+                <Chip
+                  label={data}
+                  key={colIndex}
+                  onDelete={filterUpdate.bind(null, index, data, "checkbox")}
+                  className={filterListStyles.chip}
+                />
+              )),
+            )}
+          </div>
         )}
-      </div>
+      </DataStyles>
     );
   }
 }
 
-export default withDataStyles(styles)(MUIDataTableFilterList);
+export default MUIDataTableFilterList;
diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
index e6feb8f2a..d963f7934 100644
--- a/src/MUIDataTableHead.js
+++ b/src/MUIDataTableHead.js
@@ -2,37 +2,66 @@ import React from "react";
 import PropTypes from "prop-types";
 import { TableHead, TableRow } from "material-ui/Table";
 import MUIDataTableHeadCell from "./MUIDataTableHeadCell";
-import { getStyle, withDataStyles } from "./withDataStyles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const headStyles = theme => ({});
+const defaultHeadStyles = {};
+
+const defaultHeadRowStyles = {};
+
+const defaultHeadCellStyles = {
+  root: {},
+};
 
 class MUIDataTableHead extends React.Component {
   render() {
     const { toggleSort, columns, options } = this.props;
 
     return (
-      <TableHead>
-        <TableRow classes={getStyle(options, "table.head.row")}>
-          {columns.map(
-            (column, index) =>
-              column.display ? (
-                <MUIDataTableHeadCell
-                  key={index}
-                  index={index}
-                  classes={getStyle(options, "table.head.cell")}
-                  sortDirection={column.sort}
-                  toggleSort={toggleSort}
-                  options={options}>
-                  {column.name}
-                </MUIDataTableHeadCell>
-              ) : (
-                false
-              ),
-          )}
-        </TableRow>
-      </TableHead>
+      <DataStyles
+        defaultStyles={defaultHeadStyles}
+        name="MUIDataTableHead"
+        styles={getStyle(options, "table.head.main")}>
+        {headStyles => (
+          <TableHead>
+            <DataStyles
+              defaultStyles={defaultHeadRowStyles}
+              name="MUIDataTableHeadRow"
+              styles={getStyle(options, "table.head.row")}>
+              {rowStyles => (
+                <DataStyles
+                  defaultStyles={defaultHeadCellStyles}
+                  name="MUIDataTableHeadCell"
+                  styles={getStyle(options, "table.head.cell")}>
+                  {cellStyles => {
+                    return (
+                      <TableRow classes={getStyle(options, "table.head.row")}>
+                        {columns.map(
+                          (column, index) =>
+                            column.display ? (
+                              <MUIDataTableHeadCell
+                                key={index}
+                                index={index}
+                                classes={cellStyles}
+                                sortDirection={column.sort}
+                                toggleSort={toggleSort}
+                                options={options}>
+                                {column.name}
+                              </MUIDataTableHeadCell>
+                            ) : (
+                              false
+                            ),
+                        )}
+                      </TableRow>
+                    );
+                  }}
+                </DataStyles>
+              )}
+            </DataStyles>
+          </TableHead>
+        )}
+      </DataStyles>
     );
   }
 }
 
-export default withDataStyles(headStyles)(MUIDataTableHead);
+export default MUIDataTableHead;
diff --git a/src/MUIDataTableHeadCell.js b/src/MUIDataTableHeadCell.js
index 20f943f17..dc72bbeff 100644
--- a/src/MUIDataTableHeadCell.js
+++ b/src/MUIDataTableHeadCell.js
@@ -3,16 +3,6 @@ import PropTypes from "prop-types";
 import { TableSortLabel } from "material-ui/Table";
 import { TableCell } from "material-ui/Table";
 import Tooltip from "material-ui/Tooltip";
-import { getStyle, withDataStyles } from "./withDataStyles";
-
-const cellStyles = theme => ({
-  root: {
-    borderBottom: "solid 1px #bdbdbd",
-  },
-  sortLabel: {
-    color: "inherit",
-  },
-});
 
 class MUIDataTableHeadCell extends React.Component {
   handleSortClick = () => {
@@ -44,4 +34,4 @@ class MUIDataTableHeadCell extends React.Component {
   }
 }
 
-export default withDataStyles(cellStyles)(MUIDataTableHeadCell);
+export default MUIDataTableHeadCell;
diff --git a/src/MUIDataTablePagination.js b/src/MUIDataTablePagination.js
index ad2506c6e..7a15d70d7 100644
--- a/src/MUIDataTablePagination.js
+++ b/src/MUIDataTablePagination.js
@@ -1,15 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { TableRow, TableFooter, TablePagination } from "material-ui/Table";
-import { getStyle, withDataStyles } from "./withDataStyles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const styles = theme => ({
+const defaultPaginationStyles = {
   root: {
     "&:last-child": {
       padding: "0px 24px 0px 24px",
     },
   },
-});
+};
 
 class MUIDataTablePagination extends React.Component {
   static propTypes = {
@@ -23,8 +23,6 @@ class MUIDataTablePagination extends React.Component {
     rowsPerPage: PropTypes.number.isRequired,
     /** Callback to trigger rows per page change */
     changeRowsPerPage: PropTypes.func.isRequired,
-    /** Extend the style applied to components */
-    classes: PropTypes.object,
   };
 
   handleRowChange = event => {
@@ -37,23 +35,31 @@ class MUIDataTablePagination extends React.Component {
 
   render() {
     const { count, classes, options, rowsPerPage, page } = this.props;
+    const test = getStyle(options, "pagination");
 
     return (
-      <TableFooter>
-        <TableRow>
-          <TablePagination
-            className={classes.root}
-            count={count}
-            rowsPerPage={rowsPerPage}
-            page={page}
-            rowsPerPageOptions={options.rowsPerPageOptions}
-            onChangePage={this.handlePageChange}
-            onChangeRowsPerPage={this.handleRowChange}
-          />
-        </TableRow>
-      </TableFooter>
+      <DataStyles
+        defaultStyles={defaultPaginationStyles}
+        name="MUIDataTablePagination"
+        styles={getStyle(options, "table.pagination")}>
+        {paginationStyles => (
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                className={paginationStyles.root}
+                count={count}
+                rowsPerPage={rowsPerPage}
+                page={page}
+                rowsPerPageOptions={options.rowsPerPageOptions}
+                onChangePage={this.handlePageChange}
+                onChangeRowsPerPage={this.handleRowChange}
+              />
+            </TableRow>
+          </TableFooter>
+        )}
+      </DataStyles>
     );
   }
 }
 
-export default withDataStyles(styles)(MUIDataTablePagination);
+export default MUIDataTablePagination;
diff --git a/src/MUIDataTableSearch.js b/src/MUIDataTableSearch.js
index 768ba3dde..3d0f8790b 100644
--- a/src/MUIDataTableSearch.js
+++ b/src/MUIDataTableSearch.js
@@ -4,14 +4,14 @@ import { findDOMNode } from "react-dom";
 import Grow from "material-ui/transitions/Grow";
 import TextField from "material-ui/TextField";
 import Typography from "material-ui/Typography";
-import IconButton from "material-ui/IconButton";
 import SearchIcon from "material-ui-icons/Search";
+import IconButton from "material-ui/IconButton";
 import ClearIcon from "material-ui-icons/Clear";
 import FilterIcon from "material-ui-icons/FilterList";
-import { withStyles } from "material-ui/styles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const styles = theme => ({
-  search: {
+const defaultSearchStyles = {
+  main: {
     display: "flex",
     flex: "1 0 auto",
   },
@@ -27,7 +27,7 @@ const styles = theme => ({
       color: "#FF0000",
     },
   },
-});
+};
 
 /*
   issues to work out:
@@ -44,39 +44,41 @@ const styles = theme => ({
 */
 
 class MUIDataTableSearch extends React.Component {
-  componentDidMount() {
-    this.searchField.focus();
-  }
-
   handleTextChange = event => {
     this.props.onSearch(event.target.value);
   };
 
-  componentWillUnmount() {}
-
   render() {
-    const { classes, onHide, onSearch } = this.props;
+    const { classes, onHide, onSearch, options } = this.props;
 
     return (
-      <Grow appear in={true} timeout={300}>
-        <div className={classes.search} ref={el => (this.rootRef = el)}>
-          <SearchIcon className={classes.searchIcon} />
-          <TextField
-            className={classes.searchText}
-            InputProps={{
-              "aria-label": "Search Table",
-            }}
-            onChange={this.handleTextChange}
-            fullWidth={true}
-            inputRef={el => (this.searchField = el)}
-          />
-          <IconButton className={classes.clearIcon} onClick={onHide}>
-            <ClearIcon />
-          </IconButton>
-        </div>
-      </Grow>
+      <DataStyles
+        defaultStyles={defaultSearchStyles}
+        name="MUIDataTableSearch"
+        styles={getStyle(options, "search")}>
+        {headStyles => (
+          <Grow appear in={true} timeout={300}>
+            <div className={headStyles.main} ref={el => (this.rootRef = el)}>
+              <SearchIcon className={headStyles.searchIcon} />
+              <TextField
+                className={headStyles.searchText}
+                autoFocus={true}
+                InputProps={{
+                  "aria-label": "Search Table",
+                }}
+                onChange={this.handleTextChange}
+                fullWidth={true}
+                inputRef={el => (this.searchField = el)}
+              />
+              <IconButton className={headStyles.clearIcon} onClick={onHide}>
+                <ClearIcon />
+              </IconButton>
+            </div>
+          </Grow>
+        )}
+      </DataStyles>
     );
   }
 }
 
-export default withStyles(styles)(MUIDataTableSearch);
+export default MUIDataTableSearch;
diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
index 274730241..07769b035 100644
--- a/src/MUIDataTableToolbar.js
+++ b/src/MUIDataTableToolbar.js
@@ -19,9 +19,9 @@ import PrintIcon from "material-ui-icons/Print";
 import ViewColumnIcon from "material-ui-icons/ViewColumn";
 import ClearIcon from "material-ui-icons/Clear";
 import FilterIcon from "material-ui-icons/FilterList";
-import { getStyle, withDataStyles } from "./withDataStyles";
+import { getStyle, DataStyles } from "./DataStyles";
 
-const styles = theme => ({
+const defaultToolbarStyles = {
   root: {},
   spacer: {
     flex: "1 1 100%",
@@ -41,23 +41,129 @@ const styles = theme => ({
   iconActive: {
     color: "#307BB0",
   },
-  search: {
-    display: "inline-flex",
-    flex: "1 0 auto",
-  },
   searchIcon: {
     display: "inline-flex",
     marginTop: "10px",
     marginRight: "8px",
   },
-  searchText: {
-    display: "inline-flex",
-    flex: "0.5 0",
+};
+
+const defaultViewColStyles = {
+  root: {
+    padding: "16px 24px 16px 24px",
+    fontFamily: "Roboto",
+  },
+  title: {
+    marginLeft: "-7px",
+    fontSize: "14px",
+    color: "#424242",
+    textAlign: "left",
+    fontWeight: 500,
+  },
+  formGroup: {
+    marginTop: "8px",
+  },
+  formControl: {},
+  checkbox: {
+    color: "#027cb5",
+    width: "32px",
+    height: "32px",
+  },
+  label: {
+    fontSize: "15px",
+    marginLeft: "8px",
+    color: "#4a4a4a",
+  },
+};
+
+const defaultFilterStyles = {
+  root: {
+    padding: "16px 24px 16px 24px",
+    fontFamily: "Roboto",
+  },
+  header: {
+    flex: "0 0 auto",
+    marginBottom: "16px",
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  title: {
+    display: "inline-block",
+    marginLeft: "7px",
+    color: "#424242",
+    fontSize: "14px",
+    fontWeight: 500,
+  },
+  noMargin: {
+    marginLeft: "0px",
+  },
+  reset: {
+    alignSelf: "left",
+  },
+  resetLink: {
+    color: "#027cb5",
+    display: "inline-block",
+    marginLeft: "24px",
+    fontSize: "12px",
+    cursor: "pointer",
+    "&:hover": {
+      color: "#FF0000",
+    },
   },
-  clearIcon: {
+  filtersSelected: {
+    alignSelf: "right",
+  },
+  /* checkbox */
+  checkboxList: {
+    flex: "1 1 100%",
     display: "inline-flex",
+    marginRight: "24px",
+  },
+  checkboxListTitle: {
+    marginLeft: "7px",
+    marginBottom: "8px",
+    fontSize: "14px",
+    color: "#424242",
+    textAlign: "left",
+    fontWeight: 500,
+  },
+  checkboxFormGroup: {
+    marginTop: "8px",
+  },
+  checkboxFormControl: {
+    margin: "0px",
+  },
+  checkboxFormControlLabel: {
+    fontSize: "15px",
+    marginLeft: "8px",
+    color: "#4a4a4a",
+  },
+  checkboxIcon: {
+    //color: "#027cb5",
+    width: "32px",
+    height: "32px",
+  },
+  checked: {
+    color: "#027CB5",
+  },
+  /* selects */
+  selectRoot: {
+    display: "flex",
+    marginTop: "16px",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    width: "100%",
+    height: "80%",
+    justifyContent: "space-between",
   },
-});
+  selectFormControl: {
+    flex: "1 1 calc(50% - 24px)",
+    marginRight: "24px",
+    marginBottom: "24px",
+  },
+};
+
 
 class MUIDataTableToolbar extends React.Component {
   state = {
@@ -104,9 +210,8 @@ class MUIDataTableToolbar extends React.Component {
     }));
   };
 
-  getActiveIcon = iconName => {
-    const { classes } = this.props;
-    return this.state.iconActive !== iconName ? classes.icon : classes.iconActive;
+  getActiveIcon = (styles, iconName) => {
+    return this.state.iconActive !== iconName ? styles.icon : styles.iconActive;
   };
 
   hideSearch = () => {
@@ -137,79 +242,112 @@ class MUIDataTableToolbar extends React.Component {
     const { showSearch } = this.state;
 
     return (
-      <Toolbar className={classes.root}>
-        {showSearch === true ? (
-          <MUIDataTableSearch onSearch={searchTextUpdate} onHide={this.hideSearch} />
-        ) : (
-          <div className={classes.titleRoot}>
-            <Typography type="title" className={classes.titleText}>
-              Title goes here and it should be really really long
-            </Typography>
-          </div>
-        )}
-        {showSearch === false ? <div className={classes.spacer} /> : false}
-        <div className={classes.actions}>
-          <Tooltip title="Search">
-            <IconButton
-              aria-label="Search"
-              buttonRef={el => (this.searchButton = el)}
-              classes={{ root: classes.icon }}
-              classes={{ root: this.getActiveIcon("search") }}
-              onClick={this.setActiveIcon.bind(null, "search")}>
-              <SearchIcon />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title="Download CSV">
-            <IconButton aria-label="Download CSV" classes={{ root: classes.icon }} onClick={this.handleCSVDownload}>
-              <DownloadIcon />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title="Print">
-            <IconButton aria-label="Print" classes={{ root: classes.icon }} onClick={this.handlePrint}>
-              <PrintIcon />
-            </IconButton>
-          </Tooltip>
-          <MUIPopover placement={"bottom-center"} refExit={this.setActiveIcon.bind(null)} arrow={false}>
-            <MUIPopoverTarget>
-              <Tooltip title="View Columns">
+      <DataStyles
+        defaultStyles={defaultToolbarStyles}
+        name="MUIDataTableToolbar"
+        styles={getStyle(options, "table.toolbar")}>
+        {toolbarStyles => (
+          <Toolbar className={toolbarStyles.root}>
+            {showSearch === true ? (
+              <MUIDataTableSearch onSearch={searchTextUpdate} onHide={this.hideSearch} options={options} />
+            ) : (
+              <div className={toolbarStyles.titleRoot}>
+                <Typography type="title" className={toolbarStyles.titleText}>
+                  Title goes here and it should be really really long
+                </Typography>
+              </div>
+            )}
+            {showSearch === false ? <div className={toolbarStyles.spacer} /> : false}
+            <div className={toolbarStyles.actions}>
+              <Tooltip title="Search">
                 <IconButton
-                  aria-label="View Columns"
-                  classes={{ root: this.getActiveIcon("viewcolumns") }}
-                  onClick={this.setActiveIcon.bind(null, "viewcolumns")}>
-                  <ViewColumnIcon />
+                  aria-label="Search"
+                  buttonRef={el => (this.searchButton = el)}
+                  classes={{ root: toolbarStyles.icon }}
+                  classes={{ root: this.getActiveIcon(toolbarStyles, "search") }}
+                  onClick={this.setActiveIcon.bind(null, "search")}>
+                  <SearchIcon />
                 </IconButton>
               </Tooltip>
-            </MUIPopoverTarget>
-            <MUIPopoverContent>
-              <MUIDataTableViewCol data={data} columns={columns} onColumnUpdate={toggleViewColumn} />
-            </MUIPopoverContent>
-          </MUIPopover>
-          <MUIPopover placement={"bottom-center"} refExit={this.setActiveIcon.bind(null)} arrow={false}>
-            <MUIPopoverTarget>
-              <Tooltip title="Filter Table">
+              <Tooltip title="Download CSV">
                 <IconButton
-                  aria-label="Filter Table"
-                  classes={{ root: this.getActiveIcon("filter") }}
-                  onClick={this.setActiveIcon.bind(null, "filter")}>
-                  <FilterIcon />
+                  aria-label="Download CSV"
+                  classes={{ root: toolbarStyles.icon }}
+                  onClick={this.handleCSVDownload}>
+                  <DownloadIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Print">
+                <IconButton aria-label="Print" classes={{ root: toolbarStyles.icon }} onClick={this.handlePrint}>
+                  <PrintIcon />
                 </IconButton>
               </Tooltip>
-            </MUIPopoverTarget>
-            <MUIPopoverContent>
-              <MUIDataTableFilter
-                columns={columns}
-                options={options}
-                filterList={filterList}
-                filterData={filterData}
-                onFilterUpdate={filterUpdate}
-                onFilterReset={resetFilters}
-              />
-            </MUIPopoverContent>
-          </MUIPopover>
-        </div>
-      </Toolbar>
+
+              <DataStyles
+                defaultStyles={defaultViewColStyles}
+                name="MUIDataTableViewCol"
+                styles={getStyle(options, "viewColumns")}>
+                {viewColStyles => (
+                  <MUIPopover placement={"bottom-center"} refExit={this.setActiveIcon.bind(null)} arrow={false}>
+                    <MUIPopoverTarget>
+                      <Tooltip title="View Columns">
+                        <IconButton
+                          aria-label="View Columns"
+                          classes={{ root: this.getActiveIcon(toolbarStyles, "viewcolumns") }}
+                          onClick={this.setActiveIcon.bind(null, "viewcolumns")}>
+                          <ViewColumnIcon />
+                        </IconButton>
+                      </Tooltip>
+                    </MUIPopoverTarget>
+                    <MUIPopoverContent>
+                      <MUIDataTableViewCol
+                        data={data}
+                        viewColStyles={viewColStyles}
+                        columns={columns}
+                        options={options}
+                        onColumnUpdate={toggleViewColumn}
+                      />
+                    </MUIPopoverContent>
+                  </MUIPopover>
+                )}
+              </DataStyles>
+
+              <DataStyles
+                defaultStyles={defaultFilterStyles}
+                name="MUIDataTableFilter"
+                styles={getStyle(options, "filterView")}>
+                {filterStyles => (
+                  <MUIPopover placement={"bottom-center"} refExit={this.setActiveIcon.bind(null)} arrow={false}>
+                    <MUIPopoverTarget>
+                      <Tooltip title="Filter Table">
+                        <IconButton
+                          aria-label="Filter Table"
+                          classes={{ root: this.getActiveIcon("filter") }}
+                          onClick={this.setActiveIcon.bind(null, "filter")}>
+                          <FilterIcon />
+                        </IconButton>
+                      </Tooltip>
+                    </MUIPopoverTarget>
+                    <MUIPopoverContent>
+                      <MUIDataTableFilter
+                        columns={columns}
+                        options={options}
+                        filterStyles={filterStyles}
+                        filterList={filterList}
+                        filterData={filterData}
+                        onFilterUpdate={filterUpdate}
+                        onFilterReset={resetFilters}
+                      />
+                    </MUIPopoverContent>
+                  </MUIPopover>
+                )}
+              </DataStyles>
+            </div>
+          </Toolbar>
+        )}
+      </DataStyles>
     );
   }
 }
 
-export default withDataStyles(styles)(MUIDataTableToolbar);
+export default MUIDataTableToolbar;
diff --git a/src/MUIDataTableViewCol.js b/src/MUIDataTableViewCol.js
index 792c7f123..82cefa49c 100644
--- a/src/MUIDataTableViewCol.js
+++ b/src/MUIDataTableViewCol.js
@@ -3,35 +3,6 @@ import PropTypes from "prop-types";
 import Checkbox from "material-ui/Checkbox";
 import Typography from "material-ui/Typography";
 import { FormLabel, FormControl, FormGroup, FormControlLabel, FormHelperText } from "material-ui/Form";
-import { withStyles } from "material-ui/styles";
-
-const styles = theme => ({
-  root: {
-    padding: "16px 24px 16px 24px",
-    fontFamily: "Roboto",
-  },
-  title: {
-    marginLeft: "-7px",
-    fontSize: "14px",
-    color: "#424242",
-    textAlign: "left",
-    fontWeight: 500,
-  },
-  formGroup: {
-    marginTop: "8px",
-  },
-  formControl: {},
-  checkbox: {
-    color: "#027cb5",
-    width: "32px",
-    height: "32px",
-  },
-  label: {
-    fontSize: "15px",
-    marginLeft: "8px",
-    color: "#4a4a4a",
-  },
-});
 
 class MUIDataTableViewCol extends React.Component {
   static propTypes = {
@@ -39,10 +10,12 @@ class MUIDataTableViewCol extends React.Component {
     data: PropTypes.array.isRequired,
     /** Columns used to describe table */
     columns: PropTypes.array.isRequired,
+    /** Options used to describe table */
+    options: PropTypes.object.isRequired,
     /** Callback to trigger View column update */
     onColumnUpdate: PropTypes.func,
     /** Extend the style applied to components */
-    classes: PropTypes.object,
+    viewColStyles: PropTypes.object,
   };
 
   handleColChange = index => {
@@ -50,25 +23,25 @@ class MUIDataTableViewCol extends React.Component {
   };
 
   render() {
-    const { classes, columns, data } = this.props;
+    const { classes, columns, data, options, viewColStyles } = this.props;
 
     return (
-      <FormControl component={"fieldset"} className={classes.root}>
-        <Typography type="sub" className={classes.title}>
+      <FormControl component={"fieldset"} className={viewColStyles.root}>
+        <Typography type="caption" className={viewColStyles.title}>
           Show Columns
         </Typography>
-        <FormGroup className={classes.formGroup}>
+        <FormGroup className={viewColStyles.formGroup}>
           {columns.map((column, index) => {
             return (
               <FormControlLabel
                 key={index}
                 classes={{
-                  root: classes.formControl,
-                  label: classes.label,
+                  root: viewColStyles.formControl,
+                  label: viewColStyles.label,
                 }}
                 control={
                   <Checkbox
-                    className={classes.checkbox}
+                    className={viewColStyles.checkbox}
                     onChange={this.handleColChange.bind(null, index)}
                     checked={column.display}
                     value={column.name}
@@ -84,4 +57,4 @@ class MUIDataTableViewCol extends React.Component {
   }
 }
 
-export default withStyles(styles)(MUIDataTableViewCol);
+export default MUIDataTableViewCol;
diff --git a/src/MUIPopover/MUIPopover.js b/src/MUIPopover/MUIPopover.js
index 9e926e9f8..323bc5210 100644
--- a/src/MUIPopover/MUIPopover.js
+++ b/src/MUIPopover/MUIPopover.js
@@ -156,7 +156,7 @@ class MUIPopover extends React.Component {
             key={index}
             elevation={2}
             open={this.state.open}
-            onRequestClose={this.handleRequestClose}
+            onClose={this.handleRequestClose}
             onExited={this.handleOnExit}
             anchorEl={this.anchorEl}
             ref={el => this.popoverEl}
diff --git a/src/withDataStyles.js b/src/withDataStyles.js
deleted file mode 100644
index c3b74ada2..000000000
--- a/src/withDataStyles.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import memoize from "lodash.memoize";
-import merge from "lodash.merge";
-import get from "lodash.get";
-import { withStyles } from "material-ui/styles";
-
-const getStyle = (obj, name) => {
-  return get(obj, "styles." + name, null);
-};
-
-const withDataStyles = styles => component =>
-  class extends React.Component {
-    mergeStyles = memoize(
-      (defaultStyle, provided) => merge({ ...defaultStyle }, provided),
-      (...args) => JSON.stringify(args),
-    );
-
-    render() {
-      const { classes, ...otherProps } = this.props;
-      const finalStyles = this.mergeStyles(styles(), classes ? { ...classes } : {});
-
-      const WrappedComponent = withStyles(finalStyles)(component);
-      return <WrappedComponent {...otherProps} />;
-    }
-  };
-
-export { getStyle, withDataStyles };