diff --git a/client/App.jsx b/client/App.jsx
index 403bb21..ff57738 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Header from './Header';
-import Main from './Main';
+import Header from './containers/Header';
+import Main from './containers/Main';
 
 class App extends React.Component {
   constructor() {
diff --git a/client/AppDev.jsx b/client/AppDev.jsx
index f66df7b..ced6eb4 100644
--- a/client/AppDev.jsx
+++ b/client/AppDev.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Header from './Header';
-import Main from './Main';
+import Header from './containers/Header';
+import Main from './containers/Main';
 import build from './../monitor/stats.json';
 
 class App extends React.Component {
diff --git a/client/chartComponents/chartsApp.jsx b/client/chartComponents/chartsApp.jsx
deleted file mode 100644
index 006d760..0000000
--- a/client/chartComponents/chartsApp.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import Cards from './cards/Cards';
-import MainContainer from './graphs/MainContainer';
-import SunburstContainer from './sunburst/SunburstContainer';
-
-const Page = (props) => {
-  return (
-    <div className="container">
-      <Cards
-        build={props.build}
-        activeBuild={props.activeBuild}
-        handleIncrement={props.handleIncrement}
-        handleDecrement={props.handleDecrement}
-      />
-      <MainContainer build={props.build} activeBuild={props.activeBuild} handleCircleClick={props.handleCircleClick}/>
-      <SunburstContainer build={props.build} activeBuild={props.activeBuild} />
-    </div>
-  );
-};
-
-export default Page;
diff --git a/client/chartComponents/graphs/charts/utils/ReactMixins.jsx b/client/chartComponents/graphs/charts/utils/ReactMixins.jsx
deleted file mode 100644
index fd1a32d..0000000
--- a/client/chartComponents/graphs/charts/utils/ReactMixins.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// import React from 'react'
-// import ReactDOM from 'react-dom'
-// import * as d3 from "d3";
-
-var resizeMixin = {
-    componentWillMount:function(){
-
-        var _self=this;
-
-        $(window).on('resize', function(e) {
-            _self.updateSize();
-        });
-
-        this.setState({width:this.props.width});
-
-    },
-    componentDidMount: function() {
-        this.updateSize();
-    },
-    componentWillUnmount:function(){
-        $(window).off('resize');
-    },
-
-    updateSize:function(){
-        var node = ReactDOM.findDOMNode(this);
-        var parentWidth=$(node).width();
-
-        if(parentWidth<this.props.width){
-            this.setState({width:parentWidth-20});
-        }else{
-            this.setState({width:this.props.width});
-        }
-    }
-};
-
-// module.exports = resizeMixin;
diff --git a/client/Header.jsx b/client/containers/Header.jsx
similarity index 79%
rename from client/Header.jsx
rename to client/containers/Header.jsx
index 30c1cfe..f561549 100644
--- a/client/Header.jsx
+++ b/client/containers/Header.jsx
@@ -1,11 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { NavDropdown, MenuItem } from 'react-bootstrap';
-import logo from './assets/wpmlogo.png';
-
-
-// The Header creates links that can be used to navigate
-// between routes.
+import logo from './../assets/wpmlogo.png';
 
 const getMenuItems = (buildNumber, selectBuild) => {
   const menuItems = [];
@@ -20,7 +16,10 @@ const Header = (props) => {
   return (
     <header>
       <nav>
-        <div className="pull-left panel-title header-title"><img className="logo" src={logo} />webpack monitor</div>
+        <div className="pull-left panel-title header-title">
+          <img alt="wpm" className="logo" src={logo} />
+          webpack monitor
+        </div>
         <ul className="links list-inline pull-right">
           <NavDropdown title="Select Build" id="basic-nav-dropdown">
             {menuItems}
@@ -31,7 +30,7 @@ const Header = (props) => {
         </ul>
       </nav>
     </header>
-  )
+  );
 };
 
 export default Header;
diff --git a/client/Main.jsx b/client/containers/Main.jsx
similarity index 87%
rename from client/Main.jsx
rename to client/containers/Main.jsx
index cffa7a9..c5c3aaa 100644
--- a/client/Main.jsx
+++ b/client/containers/Main.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import Recommendations from './recoComponents/Recommendations';
-import Charts from './chartComponents/chartsApp';
-import Dashboard from './BuildComponents/Dashboard';
+import Recommendations from './../views/recommendations/Recommendations';
+import Overview from './../views/overview/Overview';
+import BuildData from './../views/build-data/BuildData';
 
 class Main extends React.Component {
   renderLoader() {
@@ -18,7 +18,7 @@ class Main extends React.Component {
           <Route
             exact path="/"
             render={() => (
-              <Charts
+              <Overview
                 build={this.props.build}
                 activeBuild={this.props.activeBuild}
                 handleCircleClick={this.props.handleCircleClick}
@@ -30,7 +30,7 @@ class Main extends React.Component {
           <Route
             path="/builds"
             render={() => (
-              <Dashboard
+              <BuildData
                 build={this.props.build}
                 activeBuild={this.props.activeBuild}
                 handleIncrement={this.props.handleIncrement}
diff --git a/client/chartComponents/common/Panel.jsx b/client/containers/Panel.jsx
similarity index 62%
rename from client/chartComponents/common/Panel.jsx
rename to client/containers/Panel.jsx
index f3fda39..12e5e98 100644
--- a/client/chartComponents/common/Panel.jsx
+++ b/client/containers/Panel.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
 
-const Panel = (props) => (
+const Panel = props => (
   <div className="bg">
     {props.children}
   </div>
 );
 
-
-
-export default Panel;
\ No newline at end of file
+export default Panel;
diff --git a/client/chartComponents/common/PanelHeader.jsx b/client/containers/PanelHeader.jsx
similarity index 77%
rename from client/chartComponents/common/PanelHeader.jsx
rename to client/containers/PanelHeader.jsx
index d44bd55..f82ba55 100644
--- a/client/chartComponents/common/PanelHeader.jsx
+++ b/client/containers/PanelHeader.jsx
@@ -1,15 +1,12 @@
 import React from 'react';
 
-
-const PanelHeader = (props) => (
+const PanelHeader = props => (
   <div className="panel-header">
     <div className="pull-left panel-title">{props.title}</div>
     <div className="pull-right line-height-30">
       {props.children}
     </div>
-
   </div>
 );
 
-
-export default PanelHeader;
\ No newline at end of file
+export default PanelHeader;
diff --git a/client/containers/utils.js b/client/containers/utils.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/recoComponents/Checkbox.jsx b/client/recoComponents/Checkbox.jsx
deleted file mode 100644
index a125557..0000000
--- a/client/recoComponents/Checkbox.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-const Checkbox = props => (
-  <div>
-    <label>
-      <input type="checkbox" checked={props.checked} onChange={props.handleChange} name={props.name} />
-      {props.label}
-    </label>
-  </div>
-);
-
-export default Checkbox;
diff --git a/client/recoComponents/Item.jsx b/client/recoComponents/Item.jsx
deleted file mode 100644
index 30230f8..0000000
--- a/client/recoComponents/Item.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import Info from './Info';
-import Warning from './Warning';
-import Checkbox from './Checkbox';
-
-const Item = (props) => {
-  const data = props.data;
-  
-  return (
-    <div className={`recommendation ${data.checked ? 'selected' : ''}`} id="fileNames" >
-      <Info text={data.infoText} />
-      <Warning text={data.warningText} disabled={data.warnDisabled} />
-      <Checkbox
-        label={data.label}
-        disabled={data.checkDisabled}
-        checked={data.checked}
-        handleChange={props.handleChange}
-        name={data.name}
-      />
-    </div>
-  );
-};
-
-export default Item;
diff --git a/client/recoComponents/utils.js b/client/recoComponents/utils.js
deleted file mode 100644
index dfa2bd4..0000000
--- a/client/recoComponents/utils.js
+++ /dev/null
@@ -1,99 +0,0 @@
-// const build = require('./../../../monitor/stats.json');
-
-const currentBuild = build[build.length - 1];
-
-const getFileExt = (pathString) => {
-  const splitName = pathString.split('.');
-  return splitName[splitName.length - 1];
-};
-
-const countFileTypes = stats => (
-  stats.assets.reduce((count, asset) => {
-    const ext = getFileExt(asset.name);
-    if (count[ext]) count[ext] += 1;
-    else count[ext] = 1;
-    return count;
-  }, {})
-);
-
-const assetsBig = currentBuild.assets
-.filter(asset => asset.size > 250000 && asset.size <= 1000000)
-.map(asset => ({ name: asset.name, size: asset.size }));
-
-const assetsHuge = currentBuild.assets
-.filter(asset => asset.size > 1000000)
-.map(asset => ({ name: asset.name, size: asset.size }));
-
-const jsCount = countFileTypes(currentBuild).js || 0;
-const cssCount = countFileTypes(currentBuild).css || 0;
-const jsBigCount = assetsBig.filter(asset => getFileExt(asset.name) === 'js').length;
-const jsHugeCount = assetsHuge.filter(asset => getFileExt(asset.name) === 'js').length;
-const cssBigCount = assetsBig.filter(asset => getFileExt(asset.name) === 'css').length;
-
-const isVendor = currentBuild.assets.reduce((isVendor, asset) => {
-  if (isVendor) return isVendor;
-  if (asset.name.includes('vendor')) isVendor = true;
-  return isVendor;
-}, false);
-
-function fileFiles(count) {
-  if (count === 1) return 'file'
-  return 'files';
-}
-
-const cssQty = {
-  name: 'cssQty',
-  cssCount,
-  infoText: `You are currently outputting ${cssCount} css ${fileFiles(cssCount)}`,
-  warningText: cssCount > 0
-    ? 'Good work seperating CSS from JS.'
-    : 'Consider splitting your CSS from your JavaScript to minimize FOUC risk and bring down the overall weight of your JS',
-  label: 'Add the \'extract CSS\' function to your webpack optimization library',
-  warn: cssCount === 0,
-  checked: false
-};
-console.log(cssQty.infoText)
-
-const jsQty = {
-  name: 'jsQty',
-  jsCount,
-  infoText: `You are currently outputting ${jsCount} JavaScript ${fileFiles(jsCount)}`,
-  warningText: jsCount > 1
-    ? 'Consider splitting up your js files to improve initial render times'
-    : 'Good work for splitting your JS. Depending on the size of your individual files, you might still want to consider splitting them further',
-  label: 'Add the \'extract Vendor code\' function to your webpack optimization library',
-  warn: jsCount <= 1,
-  checked: false,
-};
-
-const jsSize = {
-  name: 'jsSize',
-  jsBigCount,
-  jsHugeCount,
-  infoText: `You are currently outputting ${jsBigCount} large (over 250kb) js ${fileFiles(jsBigCount)} and ${jsHugeCount} huge (over 1MB) ${fileFiles(jsHugeCount)}`,
-  warningText: jsBigCount + jsHugeCount > 0
-    ? 'It\'s possible you have big JS files because you still need to minify your code. If there are any over 1MB you might consider splitting further if minifying does not do enough'
-    : 'All your JS files are under 250kb - good work!',
-  label: 'Add the minify JS function to your webpack optimization library',
-  warn: jsBigCount + jsHugeCount > 0,
-  checked: false,
-};
-
-const cssSize = {
-  name: 'cssSize',
-  cssBigCount,
-  infoText: `You are outputting ${cssBigCount} css ${fileFiles(cssBigCount)} over 250kb`,
-  warningText: cssBigCount > 0
-    ? 'If you\'re CSS files are big, you might be bundling a whole library but only using a portion of it.'
-    : 'Great job - all your css files are pretty small',
-  label: 'Add minify and purify CSS functions to your webpack optimization library',
-  warn: cssBigCount > 0,
-  checked: false,
-};
-
-module.exports = [
-  jsSize,
-  jsQty,
-  cssSize,
-  cssQty,
-];
diff --git a/client/BuildComponents/Dashboard.jsx b/client/views/build-data/BuildData.jsx
similarity index 67%
rename from client/BuildComponents/Dashboard.jsx
rename to client/views/build-data/BuildData.jsx
index 9f17dd0..c21199a 100644
--- a/client/BuildComponents/Dashboard.jsx
+++ b/client/views/build-data/BuildData.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import Modules from './Modules';
-import Assets from './Assets';
-import Changes from './Changes';
-import Errors from './Errors';
-import Cards from './../chartComponents/cards/Cards';
+import Modules from './components/Modules';
+import Assets from './components/Assets';
+import Changes from './components/Changes';
+import Errors from './components/Errors';
+import Cards from './../cards/Cards';
 
 const Dashboard = (props) => {
   const getBytes = (number) => {
@@ -65,11 +65,34 @@ const Dashboard = (props) => {
 
   return (
     <div className="container">
-      <Cards build={props.build} activeBuild={props.activeBuild} handleIncrement={props.handleIncrement} handleDecrement={props.handleDecrement} />
-      <Changes build={props.build} activeBuild={props.activeBuild} getBytes={getBytes} dirFinalArray={dirFinalArray} dirFinalArrayPrev={dirFinalArrayPrev} />
-      <Assets build={props.build} activeBuild={props.activeBuild} getBytes={getBytes} />
-      <Errors build={props.build} activeBuild={props.activeBuild} />
-      <Modules build={props.build} activeBuild={props.activeBuild} getBytes={getBytes} dirFinalArray={dirFinalArray} />
+      <Cards
+        build={props.build}
+        activeBuild={props.activeBuild}
+        handleIncrement={props.handleIncrement}
+        handleDecrement={props.handleDecrement}
+      />
+      <Changes
+        build={props.build}
+        activeBuild={props.activeBuild}
+        getBytes={getBytes}
+        dirFinalArray={dirFinalArray}
+        dirFinalArrayPrev={dirFinalArrayPrev}
+      />
+      <Assets
+        build={props.build}
+        activeBuild={props.activeBuild}
+        getBytes={getBytes}
+      />
+      <Errors
+        build={props.build}
+        activeBuild={props.activeBuild}
+      />
+      <Modules
+        build={props.build}
+        activeBuild={props.activeBuild}
+        getBytes={getBytes}
+        dirFinalArray={dirFinalArray}
+      />
     </div>
   );
 };
diff --git a/client/BuildComponents/Assets.jsx b/client/views/build-data/components/Assets.jsx
similarity index 100%
rename from client/BuildComponents/Assets.jsx
rename to client/views/build-data/components/Assets.jsx
diff --git a/client/BuildComponents/Changes.jsx b/client/views/build-data/components/Changes.jsx
similarity index 99%
rename from client/BuildComponents/Changes.jsx
rename to client/views/build-data/components/Changes.jsx
index e143828..f7523dd 100644
--- a/client/BuildComponents/Changes.jsx
+++ b/client/views/build-data/components/Changes.jsx
@@ -111,5 +111,4 @@ const Changes = (props) => {
   );
 };
 
-
 export default Changes;
diff --git a/client/BuildComponents/Errors.jsx b/client/views/build-data/components/Errors.jsx
similarity index 83%
rename from client/BuildComponents/Errors.jsx
rename to client/views/build-data/components/Errors.jsx
index 5e09dea..a57b70d 100644
--- a/client/BuildComponents/Errors.jsx
+++ b/client/views/build-data/components/Errors.jsx
@@ -1,8 +1,5 @@
 import React from 'react';
-import Panel from './../chartComponents/common/Panel';
-import PanelHeader from './../chartComponents/common/PanelHeader';
-import { Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { Panel as PanelTable } from 'react-bootstrap';
+import { Table, OverlayTrigger, Tooltip, Panel as PanelTable } from 'react-bootstrap';
 
 const Errors = (props) => {
   let errors = props.build[props.activeBuild].errors;
diff --git a/client/BuildComponents/Modules.jsx b/client/views/build-data/components/Modules.jsx
similarity index 100%
rename from client/BuildComponents/Modules.jsx
rename to client/views/build-data/components/Modules.jsx
diff --git a/client/views/build-data/utils.js b/client/views/build-data/utils.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/chartComponents/cards/Cards.jsx b/client/views/cards/Cards.jsx
similarity index 99%
rename from client/chartComponents/cards/Cards.jsx
rename to client/views/cards/Cards.jsx
index cd7b6c8..f4a6194 100644
--- a/client/chartComponents/cards/Cards.jsx
+++ b/client/views/cards/Cards.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-
 class Cards extends React.Component {
 
   getData() {
diff --git a/client/views/cards/utils.js b/client/views/cards/utils.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/views/overview/Overview.jsx b/client/views/overview/Overview.jsx
new file mode 100644
index 0000000..5821774
--- /dev/null
+++ b/client/views/overview/Overview.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Cards from './../cards/Cards';
+import GraphContainer from './components/GraphContainer';
+import SunburstContainer from './components/SunburstContainer';
+
+const Page = props =>
+  (
+    <div className="container">
+      <Cards
+        build={props.build}
+        activeBuild={props.activeBuild}
+        handleIncrement={props.handleIncrement}
+        handleDecrement={props.handleDecrement}
+      />
+      <GraphContainer
+        build={props.build}
+        activeBuild={props.activeBuild}
+        handleCircleClick={props.handleCircleClick}
+      />
+      <SunburstContainer
+        build={props.build}
+        activeBuild={props.activeBuild}
+      />
+    </div>
+  );
+
+export default Page;
diff --git a/client/chartComponents/graphs/MainContainer.jsx b/client/views/overview/components/GraphContainer.jsx
similarity index 94%
rename from client/chartComponents/graphs/MainContainer.jsx
rename to client/views/overview/components/GraphContainer.jsx
index 000bd12..0054dce 100644
--- a/client/chartComponents/graphs/MainContainer.jsx
+++ b/client/views/overview/components/GraphContainer.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import * as d3 from 'd3';
-
-import Panel from './../common/Panel';
-import PanelHeader from './../common/PanelHeader';
-import D3TimeAreaChart from './charts/AreaChart';
-import D3TimeLineChart from './charts/LineChart';
-import Key from './Key';
+import Panel from './../../../containers/Panel';
+import PanelHeader from './../../../containers/PanelHeader';
+import D3TimeAreaChart from './graphs/AreaChart';
+import D3TimeLineChart from './graphs/LineChart';
+import Key from './graphs/utils/Key';
 
 class MainContainer extends React.Component {
 
diff --git a/client/chartComponents/sunburst/SunburstContainer.jsx b/client/views/overview/components/SunburstContainer.jsx
similarity index 84%
rename from client/chartComponents/sunburst/SunburstContainer.jsx
rename to client/views/overview/components/SunburstContainer.jsx
index 92331e9..3e39212 100644
--- a/client/chartComponents/sunburst/SunburstContainer.jsx
+++ b/client/views/overview/components/SunburstContainer.jsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import Panel from './../common/Panel';
-import PanelHeader from './../common/PanelHeader';
-import SunBurstChart from './SunBurstChart.jsx';
-
+import Panel from './../../../containers/Panel';
+import PanelHeader from './../../../containers/PanelHeader';
+import SunBurstChart from './sunburst/SunBurstChart';
 
 class StarburstContainer extends React.Component {
 
@@ -44,10 +43,9 @@ class StarburstContainer extends React.Component {
   }
 
   render() {
-    const sunBurstData = this.dataParser()
-    
-    return (
+    const sunBurstData = this.dataParser();
 
+    return (
       <div className="row">
         <div className="col-md-12 custom_padding" >
           <Panel>
@@ -60,6 +58,6 @@ class StarburstContainer extends React.Component {
       </div>
     );
   }
-};
+}
 
-export default StarburstContainer;
\ No newline at end of file
+export default StarburstContainer;
diff --git a/client/chartComponents/graphs/charts/AreaChart.jsx b/client/views/overview/components/graphs/AreaChart.jsx
similarity index 96%
rename from client/chartComponents/graphs/charts/AreaChart.jsx
rename to client/views/overview/components/graphs/AreaChart.jsx
index 601a016..60f74f5 100644
--- a/client/chartComponents/graphs/charts/AreaChart.jsx
+++ b/client/views/overview/components/graphs/AreaChart.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { D3Axis, D3Grid, D3ToolTip, D3Dots } from './utils/D3Utils.jsx';
-import resizeMixin from './utils/ReactMixins.jsx';
-import * as d3 from "d3";
+import * as d3 from 'd3';
+import { D3Axis, D3Grid } from './utils/D3Utils';
 
 class D3TimeAreaChart extends React.Component {
   constructor(props) {
diff --git a/client/chartComponents/graphs/charts/LineChart.jsx b/client/views/overview/components/graphs/LineChart.jsx
similarity index 99%
rename from client/chartComponents/graphs/charts/LineChart.jsx
rename to client/views/overview/components/graphs/LineChart.jsx
index 6fee4a2..aed9c0a 100644
--- a/client/chartComponents/graphs/charts/LineChart.jsx
+++ b/client/views/overview/components/graphs/LineChart.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import * as d3 from 'd3';
 import { D3Axis, D3Grid, D3ToolTip, D3Dots } from './utils/D3Utils';
 import { D3Gradient } from './utils/SVGDefs';
-import * as d3 from "d3";
 
 class D3TimeLineChart extends React.Component {
   constructor(props) {
diff --git a/client/chartComponents/graphs/charts/utils/D3Utils.jsx b/client/views/overview/components/graphs/utils/D3Utils.jsx
similarity index 96%
rename from client/chartComponents/graphs/charts/utils/D3Utils.jsx
rename to client/views/overview/components/graphs/utils/D3Utils.jsx
index ffe5a21..66f9094 100644
--- a/client/chartComponents/graphs/charts/utils/D3Utils.jsx
+++ b/client/views/overview/components/graphs/utils/D3Utils.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import * as d3 from "d3";
+import * as d3 from 'd3';
 
 module.exports = {
 
@@ -12,13 +12,11 @@ module.exports = {
       orient: React.PropTypes.oneOf(['left', 'top', 'right', 'bottom']),
       className: React.PropTypes.string,
       tickFormat: React.PropTypes.string,
-      // ,removeFirst:React.PropTypes.bool
-      ticks: React.PropTypes.number
+      ticks: React.PropTypes.number,
     },
 
     componentDidUpdate() { this.renderAxis(); },
     componentDidMount() {
-      // console.log(props)
       this.renderAxis();
     },
 
@@ -45,16 +43,12 @@ module.exports = {
     render() {
       const translate = `translate(0,${this.props.h})`;
 
-
       return (
         <g className={this.props.className} transform={this.props.axisType === 'x' ? translate : ''} />
       );
     },
-
   }),
 
-  //  module.exports=D3Axis;
-
   D3Grid: React.createClass({
     propTypes: {
       h: React.PropTypes.number,
@@ -92,8 +86,6 @@ module.exports = {
 
   }),
 
-  //  module.exports=D3Grid;
-
   D3ToolTip: React.createClass({
     propTypes: {
       tooltip: React.PropTypes.object,
@@ -149,9 +141,6 @@ module.exports = {
     }
   }),
 
-  //  module.exports=D3ToolTip;
-
-
   D3Dots: React.createClass({
     propTypes: {
       data: React.PropTypes.array,
@@ -179,7 +168,6 @@ module.exports = {
         data = this.props.data;
       }
 
-
       var circles = data.map(function (d, i) {
         return (
           <circle
diff --git a/client/chartComponents/graphs/Key.jsx b/client/views/overview/components/graphs/utils/Key.jsx
similarity index 100%
rename from client/chartComponents/graphs/Key.jsx
rename to client/views/overview/components/graphs/utils/Key.jsx
diff --git a/client/chartComponents/graphs/charts/utils/SVGDefs.jsx b/client/views/overview/components/graphs/utils/SVGDefs.jsx
similarity index 100%
rename from client/chartComponents/graphs/charts/utils/SVGDefs.jsx
rename to client/views/overview/components/graphs/utils/SVGDefs.jsx
diff --git a/client/chartComponents/sunburst/SunBurstChart.jsx b/client/views/overview/components/sunburst/SunBurstChart.jsx
similarity index 99%
rename from client/chartComponents/sunburst/SunBurstChart.jsx
rename to client/views/overview/components/sunburst/SunBurstChart.jsx
index 7ff000f..7b6fc7f 100644
--- a/client/chartComponents/sunburst/SunBurstChart.jsx
+++ b/client/views/overview/components/sunburst/SunBurstChart.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import * as d3 from "d3";
+import * as d3 from 'd3';
 
 class SunBurstChart extends React.Component {
 
diff --git a/client/views/overview/utils.js b/client/views/overview/utils.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/recoComponents/Recommendations.jsx b/client/views/recommendations/Recommendations.jsx
similarity index 74%
rename from client/recoComponents/Recommendations.jsx
rename to client/views/recommendations/Recommendations.jsx
index 3d80db4..76012df 100644
--- a/client/recoComponents/Recommendations.jsx
+++ b/client/views/recommendations/Recommendations.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import Panel from './../chartComponents/common/Panel';
-import PanelHeader from './../chartComponents/common/PanelHeader';
-import Cards from './../chartComponents/cards/Cards';
-import PanelData from './PanelData';
-import FileReport from './FileReport';
-import Summary from './Summary';
-import Minify from './Minify';
-import PurifyCss from './PurifyCss';
+import Panel from './../../containers/Panel';
+import PanelHeader from './../../containers/PanelHeader';
+import Cards from './../../views/cards/Cards';
+import PanelData from './components/common/PanelData';
+import FileReport from './components/common/FileReport';
+import Summary from './components/Summary';
+import Minify from './components/Minify';
+import PurifyCss from './components/PurifyCss';
 
 const panelTitles = ['Total Size', 'Minify JS', 'Purify CSS'];
 
diff --git a/client/recoComponents/Minify.jsx b/client/views/recommendations/components/Minify.jsx
similarity index 84%
rename from client/recoComponents/Minify.jsx
rename to client/views/recommendations/components/Minify.jsx
index bff07c8..222a5c3 100644
--- a/client/recoComponents/Minify.jsx
+++ b/client/views/recommendations/components/Minify.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import PanelHeader from './../chartComponents/common/PanelHeader';
-import PanelData from './PanelData';
-import FileReport from './FileReport';
-import Panel from './../chartComponents/common/Panel';
+import Panel from './../../../containers/Panel';
+import PanelHeader from './../../../containers/PanelHeader';
+import PanelData from './common/PanelData';
+import FileReport from './common/FileReport';
 
 const Minify = (props) => {
   const assets = props.build.assets.filter(asset => asset.miniSize && !asset.minified);
diff --git a/client/recoComponents/PurifyCss.jsx b/client/views/recommendations/components/PurifyCss.jsx
similarity index 76%
rename from client/recoComponents/PurifyCss.jsx
rename to client/views/recommendations/components/PurifyCss.jsx
index 99de45f..c27dfb1 100644
--- a/client/recoComponents/PurifyCss.jsx
+++ b/client/views/recommendations/components/PurifyCss.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import PanelHeader from './../chartComponents/common/PanelHeader';
-import PanelData from './PanelData';
-import FileReport from './FileReport';
-import Panel from './../chartComponents/common/Panel';
+import Panel from './../../../containers/Panel';
+import PanelHeader from './../../../containers/PanelHeader';
+import PanelData from './common/PanelData';
+import FileReport from './common/FileReport';
 
 const PurifyCss = (props) => {
   const build = props.build;
diff --git a/client/recoComponents/Summary.jsx b/client/views/recommendations/components/Summary.jsx
similarity index 78%
rename from client/recoComponents/Summary.jsx
rename to client/views/recommendations/components/Summary.jsx
index 4414bc2..97df1c9 100644
--- a/client/recoComponents/Summary.jsx
+++ b/client/views/recommendations/components/Summary.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import PanelHeader from './../chartComponents/common/PanelHeader';
-import PanelData from './PanelData';
-import FileReport from './FileReport';
-import Panel from './../chartComponents/common/Panel';
+import Panel from './../../../containers/Panel';
+import PanelHeader from './../../../containers/PanelHeader';
+import PanelData from './common/PanelData';
+import FileReport from './common/FileReport';
 
 const Summary = (props) => {
   const build = props.build;
diff --git a/client/recoComponents/FileReport.jsx b/client/views/recommendations/components/common/FileReport.jsx
similarity index 91%
rename from client/recoComponents/FileReport.jsx
rename to client/views/recommendations/components/common/FileReport.jsx
index be74494..c9d1e20 100644
--- a/client/recoComponents/FileReport.jsx
+++ b/client/views/recommendations/components/common/FileReport.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ProgressBar from './ProgressBar';
-import BarData from './BarData';
+import BarData from './ProgressBarData';
 
 const FileReport = (props) => {
   if (props.name) {
diff --git a/client/recoComponents/PanelData.jsx b/client/views/recommendations/components/common/PanelData.jsx
similarity index 100%
rename from client/recoComponents/PanelData.jsx
rename to client/views/recommendations/components/common/PanelData.jsx
diff --git a/client/recoComponents/ProgressBar.jsx b/client/views/recommendations/components/common/ProgressBar.jsx
similarity index 100%
rename from client/recoComponents/ProgressBar.jsx
rename to client/views/recommendations/components/common/ProgressBar.jsx
diff --git a/client/recoComponents/BarData.jsx b/client/views/recommendations/components/common/ProgressBarData.jsx
similarity index 100%
rename from client/recoComponents/BarData.jsx
rename to client/views/recommendations/components/common/ProgressBarData.jsx
diff --git a/client/views/recommendations/utils.js b/client/views/recommendations/utils.js
new file mode 100644
index 0000000..e69de29