diff --git a/package.json b/package.json
index 5d34cee..58fa266 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "react": "^15.2.1",
     "react-addons-test-utils": "^15.2.1",
     "react-dom": "^15.2.1",
+    "react-router": "^2.6.1",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.2.0",
@@ -92,10 +93,10 @@
     "material-ui": "0.15.3",
     "react-icons": "^2.2.1",
     "react-redux": "^4.0.6",
+    "react-router-redux": "^4.0.5",
     "react-switcher": "^1.0.2",
     "react-tap-event-plugin": "^1.0.0",
     "redux": "^3.0.5",
-    "redux-devtools": "^3.2.0",
     "redux-devtools-chart-monitor": "^1.4.1",
     "redux-devtools-inspector": "^0.7.1",
     "redux-devtools-log-monitor": "^1.0.11",
diff --git a/src/app/actions/index.js b/src/app/actions/index.js
new file mode 100644
index 0000000..3880563
--- /dev/null
+++ b/src/app/actions/index.js
@@ -0,0 +1,55 @@
+import {
+  LIFTED_ACTION, MONITOR_ACTION, SELECT_INSTANCE, SELECT_MONITOR,
+  TOGGLE_SYNC, TOGGLE_SLIDER, TOGGLE_DISPATCHER, GET_REPORT_REQUEST,
+  SHOW_NOTIFICATION, CLEAR_NOTIFICATION
+} from '../constants/actionTypes';
+import { RECONNECT } from '../constants/socketActionTypes';
+
+export function liftedDispatch(action) {
+  if (action.type[0] === '@') return { type: MONITOR_ACTION, action };
+  return { type: LIFTED_ACTION, message: 'DISPATCH', action };
+}
+
+export function selectInstance(event, index, selected) {
+  return { type: SELECT_INSTANCE, selected };
+}
+
+export function selectMonitor(event, index, value) {
+  return { type: SELECT_MONITOR, monitor: value };
+}
+
+export function importState(state) {
+  return { type: LIFTED_ACTION, message: 'IMPORT', state };
+}
+
+export function dispatchRemotely(action) {
+  return { type: LIFTED_ACTION, message: 'ACTION', action };
+}
+
+export function toggleSync() {
+  return { type: TOGGLE_SYNC };
+}
+
+export function toggleSlider() {
+  return { type: TOGGLE_SLIDER };
+}
+
+export function toggleDispatcher() {
+  return { type: TOGGLE_DISPATCHER };
+}
+
+export function saveSocketSettings(isCustom, options) {
+  return { type: RECONNECT, isCustom, options };
+}
+
+export function showNotification(message) {
+  return { type: SHOW_NOTIFICATION, notification: { type: 'ERROR', message } };
+}
+
+export function clearNotification() {
+  return { type: CLEAR_NOTIFICATION };
+}
+
+export function getReport(report) {
+  return { type: GET_REPORT_REQUEST, report };
+}
diff --git a/src/app/components/ButtonBar.js b/src/app/components/ButtonBar.js
index 7b43e84..3537e82 100644
--- a/src/app/components/ButtonBar.js
+++ b/src/app/components/ButtonBar.js
@@ -11,23 +11,15 @@ import Settings from './Settings';
 
 export default class ButtonBar extends Component {
   static propTypes = {
-    openModal: PropTypes.func.isRequired,
-    toggleDispatcher: PropTypes.func.isRequired,
-    toggleSlider: PropTypes.func.isRequired,
+    liftedState: PropTypes.object.isRequired,
     dispatcherIsOpen: PropTypes.bool,
     sliderIsOpen: PropTypes.bool,
-    closeModal: PropTypes.func.isRequired,
-    saveSettings: PropTypes.func.isRequired,
-    importState: PropTypes.func.isRequired,
-    exportState: PropTypes.func.isRequired,
-    socketOptions: PropTypes.object,
     noSettings: PropTypes.bool
   };
 
   constructor() {
     super();
     this.state = { settingsOpened: false };
-
     this.openSettings = this.openSettings.bind(this);
     this.closeSettings = this.closeSettings.bind(this);
   }
@@ -53,23 +45,16 @@ export default class ButtonBar extends Component {
   render() {
     return (
       <div style={styles.buttonBar}>
-        <DispatcherButton
-          dispatcherIsOpen={this.props.dispatcherIsOpen} onClick={this.props.toggleDispatcher}
-        />
-        <SliderButton isOpen={this.props.sliderIsOpen} onClick={this.props.toggleSlider} />
-        <ImportButton importState={this.props.importState} />
-        <ExportButton exportState={this.props.exportState} />
+        <DispatcherButton dispatcherIsOpen={this.props.dispatcherIsOpen} />
+        <SliderButton isOpen={this.props.sliderIsOpen}/>
+        <ImportButton />
+        <ExportButton liftedState={this.props.liftedState} />
         {!this.props.noSettings &&
           <Button Icon={SettingsIcon} onClick={this.openSettings}>Settings</Button>
         }
         <Button Icon={HelpIcon} onClick={this.openHelp}>How to use</Button>
         {!this.props.noSettings &&
-          <Settings
-            isOpen={this.state.settingsOpened}
-            close={this.closeSettings}
-            saveSettings={this.props.saveSettings}
-            socketOptions={this.props.socketOptions}
-          />
+          <Settings isOpen={this.state.settingsOpened} close={this.closeSettings} />
         }
       </div>
     );
diff --git a/src/app/components/Instances.js b/src/app/components/Instances.js
index 47e5ad9..5566d5b 100644
--- a/src/app/components/Instances.js
+++ b/src/app/components/Instances.js
@@ -1,10 +1,13 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
 import shallowCompare from 'react/lib/shallowCompare';
+import { selectInstance } from '../actions';
 import styles from '../styles';
 
-export default class Instances extends Component {
+class Instances extends Component {
   static propTypes = {
     selected: PropTypes.string,
     instances: PropTypes.object.isRequired,
@@ -18,7 +21,7 @@ export default class Instances extends Component {
   render() {
     this.select = [['Autoselect instances', null]];
     Object.keys(this.props.instances).forEach(key => {
-      this.select.push([this.props.instances[key], key]);
+      this.select.push([this.props.instances[key].name, key]);
     });
 
     return (
@@ -38,3 +41,17 @@ export default class Instances extends Component {
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    instances: state.instances.options
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    onSelect: bindActionCreators(selectInstance, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Instances);
diff --git a/src/app/components/MonitorSelector.js b/src/app/components/MonitorSelector.js
index 089f440..eb2887e 100644
--- a/src/app/components/MonitorSelector.js
+++ b/src/app/components/MonitorSelector.js
@@ -1,15 +1,22 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
-import { sideMonitors } from '../containers/DevTools';
+import { monitors } from '../containers/getMonitor';
+import { selectMonitor } from '../actions';
 import styles from '../styles';
 
-export default class MonitorSelector extends Component {
+class MonitorSelector extends Component {
   static propTypes = {
     selected: PropTypes.string,
-    onSelect: PropTypes.func.isRequired
+    selectMonitor: PropTypes.func.isRequired
   };
 
+  items = monitors.map((item, i) =>
+    <MenuItem key={i} value={item.key} primaryText={item.title} />
+  );
+
   shouldComponentUpdate(nextProps) {
     return nextProps.selected !== this.props.selected;
   }
@@ -20,13 +27,19 @@ export default class MonitorSelector extends Component {
         style={styles.select}
         labelStyle={styles.selectLabel}
         iconStyle={styles.selectIcon}
-        onChange={this.props.onSelect}
+        onChange={this.props.selectMonitor}
         value={this.props.selected || 'InspectorMonitor'}
       >
-        {sideMonitors.map((item, i) =>
-          <MenuItem key={i} value={item.key} primaryText={item.title} />
-        )}
+        {this.items}
       </SelectField>
     );
   }
 }
+
+function mapDispatchToProps(dispatch) {
+  return {
+    selectMonitor: bindActionCreators(selectMonitor, dispatch)
+  };
+}
+
+export default connect(null, mapDispatchToProps)(MonitorSelector);
diff --git a/src/app/components/Notification.js b/src/app/components/Notification.js
new file mode 100644
index 0000000..214f289
--- /dev/null
+++ b/src/app/components/Notification.js
@@ -0,0 +1,59 @@
+import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as themes from 'redux-devtools-themes';
+import { clearNotification } from '../actions';
+
+class Notification extends Component {
+  static propTypes = {
+    notification: PropTypes.shape({
+      message: PropTypes.string,
+      type: PropTypes.string
+    }),
+    clearNotification: PropTypes.func.isRequired
+  };
+
+  shouldComponentUpdate(nextProps) {
+    return nextProps.notification !== this.props.notification;
+  }
+
+  render() {
+    if (!this.props.notification) return null;
+    const theme = themes.nicinabox;
+    const buttonStyle = {
+      color: theme.base06, backgroundColor: theme.base00,
+      margin: '0', background: '#DC2424'
+    };
+    const containerStyle = {
+      color: theme.base06, background: '#FC2424',
+      padding: '5px 10px', minHeight: '20px', display: 'flex'
+    };
+    return (
+      <div style={containerStyle}>
+        <div style={{ flex: '1', alignItems: 'center' }}>
+          <p style={{ margin: '0px' }}>{this.props.notification.message}</p>
+        </div>
+        <div style={{ alignItems: 'center' }}>
+          <button
+            onClick={this.props.clearNotification}
+            style={buttonStyle}
+          >&times;</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    notification: state.notification
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    clearNotification: bindActionCreators(clearNotification, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Notification);
diff --git a/src/app/components/Settings.js b/src/app/components/Settings.js
index 2609766..408340b 100644
--- a/src/app/components/Settings.js
+++ b/src/app/components/Settings.js
@@ -1,39 +1,41 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import Checkbox from 'material-ui/Checkbox';
 import TextField from 'material-ui/TextField';
+import { saveSocketSettings } from '../actions';
 import styles from '../styles';
 
-export default class Settings extends Component {
+class Settings extends Component {
   static propTypes = {
     isOpen: PropTypes.bool,
     close: PropTypes.func.isRequired,
     saveSettings: PropTypes.func.isRequired,
-    socketOptions: PropTypes.object
+    socketOptions: PropTypes.object.isRequired,
+    isCustom: PropTypes.bool
   };
 
   constructor(props) {
     super(props);
-    let isLocal;
+    const isCustom = props.isCustom;
     this.options = {};
-    if (props.socketOptions) {
-      isLocal = true;
+    if (isCustom) {
       this.options.hostname = props.socketOptions.hostname;
       this.options.port = props.socketOptions.port;
       this.options.secure = props.socketOptions.secure;
     } else {
-      isLocal = false;
       this.options.hostname = 'localhost';
       this.options.port = '8000';
       this.options.secure = false;
     }
 
-    this.state = { isLocal };
+    this.state = { isCustom };
   }
 
   handleLocalChecked = (e, checked) => {
-    this.setState({ isLocal: checked });
+    this.setState({ isCustom: checked });
   };
 
   handleInputChange = (e, value) => {
@@ -45,7 +47,7 @@ export default class Settings extends Component {
   };
 
   save = () => {
-    this.props.saveSettings(this.state.isLocal, this.options);
+    this.props.saveSettings(this.state.isCustom, this.options);
     this.props.close();
   };
 
@@ -77,10 +79,10 @@ export default class Settings extends Component {
       >
         <Checkbox
           label="Use custom (local) server"
-          checked={this.state.isLocal}
+          checked={this.state.isCustom}
           onCheck={this.handleLocalChecked}
         />
-        {this.state.isLocal && <div>
+        {this.state.isCustom && <div>
           <TextField
             id="hostname"
             floatingLabelText="Host name"
@@ -104,3 +106,18 @@ export default class Settings extends Component {
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    socketOptions: state.socket.options,
+    isCustom: state.socket.isCustom
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    saveSettings: bindActionCreators(saveSocketSettings, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Settings);
diff --git a/src/app/components/SyncToggle.js b/src/app/components/SyncToggle.js
index 678e4e4..1dcc7d2 100644
--- a/src/app/components/SyncToggle.js
+++ b/src/app/components/SyncToggle.js
@@ -1,15 +1,16 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import PinIcon from 'react-icons/lib/ti/pin';
 import GoIcon from 'react-icons/lib/go/sync';
 import Switch from 'react-switcher';
+import { toggleSync } from '../actions';
 import styles from '../styles';
 
-export default class Instances extends Component {
+class SyncToggle extends Component {
   static propTypes = {
     on: PropTypes.bool,
     style: PropTypes.object,
-    offIcon: PropTypes.node,
-    onIcon: PropTypes.node,
     onClick: PropTypes.func.isRequired
   };
 
@@ -31,3 +32,11 @@ export default class Instances extends Component {
    );
   }
 }
+
+function mapDispatchToProps(dispatch) {
+  return {
+    onClick: bindActionCreators(toggleSync, dispatch)
+  };
+}
+
+export default connect(null, mapDispatchToProps)(SyncToggle);
diff --git a/src/app/components/TestGenerator.js b/src/app/components/TestGenerator.js
index fbb56e9..27d27ca 100644
--- a/src/app/components/TestGenerator.js
+++ b/src/app/components/TestGenerator.js
@@ -1,5 +1,6 @@
 import 'codemirror/mode/javascript/javascript';
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
 import Button from './Button';
@@ -12,51 +13,25 @@ import avaTemplate from 'redux-devtools-test-generator/lib/redux/ava/template';
 import mochaVTemplate from 'redux-devtools-test-generator/lib/vanilla/mocha/template';
 import tapeVTemplate from 'redux-devtools-test-generator/lib/vanilla/tape/template';
 import avaVTemplate from 'redux-devtools-test-generator/lib/vanilla/ava/template';
+import { TEST_ADD, TEST_EDIT, TEST_REMOVE, TEST_SELECT } from '../constants/actionTypes';
+import { getActiveInstance } from '../reducers/instances';
 import TestForm from './TestForm';
-import { getFromStorage, saveToStorage } from '../utils/localStorage';
 import styles from '../styles';
 
-let testTemplates;
-let selected;
-let isDefaultTemplate;
-
-export default class TestGen extends Component {
+class TestGen extends Component {
   constructor(props) {
     super(props);
-    if (!testTemplates) {
-      testTemplates = props.testTemplates || getFromStorage('test-templates');
-      selected = props.selectedTemplate || getFromStorage('test-templates-sel') || 0;
-      if (typeof testTemplates === 'string') {
-        testTemplates = JSON.parse(testTemplates);
-      }
-      if (!testTemplates || testTemplates.length === 0 || !testTemplates[0].dispatcher) {
-        testTemplates = this.getDefaultTemplates();
-        isDefaultTemplate = true;
-      }
-      if (typeof selected === 'string') {
-        selected = Number(selected);
-      }
-    } else if (isDefaultTemplate) {
-      testTemplates = this.getDefaultTemplates();
-    }
-
-    this.state = { testTemplates, selected, dialogStatus: 0 };
-  }
-
-  componentWillUpdate(nextProps) {
-    if (isDefaultTemplate && this.props.isRedux !== nextProps.isRedux) {
-      testTemplates = this.getDefaultTemplates(nextProps.isRedux);
-      this.setState({ testTemplates });
-    }
+    this.state = { dialogStatus: 0 };
   }
 
   onSelect = (event, index, value) => {
-    selected = saveToStorage('test-templates-sel', value);
-    this.setState({ selected });
+    this.props.dispatch({ type: TEST_SELECT, selected: value });
   };
 
-  getDefaultTemplates(isRedux = this.props.isRedux) {
-    if (isRedux) return [mochaTemplate, tapeTemplate, avaTemplate];
+  getDefaultTemplates() {
+    if (this.props.options.lib === 'redux') {
+      return [mochaTemplate, tapeTemplate, avaTemplate];
+    }
     return [mochaVTemplate, tapeVTemplate, avaVTemplate];
   }
 
@@ -68,33 +43,25 @@ export default class TestGen extends Component {
     this.setState({ dialogStatus: 2 });
   };
 
-  handleSave = (template) => {
-    testTemplates = [...this.state.testTemplates];
-    selected = this.state.selected;
+  dispatch = (action) => {
+    let templates;
+    if (!this.props.templates) templates = this.getDefaultTemplates();
+    this.props.dispatch({ ...action, templates });
+  };
 
+  handleSave = (template) => {
     if (this.state.dialogStatus === 1) {
-      testTemplates[this.state.selected] = template;
+      this.dispatch({ type: TEST_EDIT, template });
     } else {
-      testTemplates.push(template);
-      selected = testTemplates.length - 1;
-      saveToStorage('test-templates-sel', selected);
+      this.dispatch({ type: TEST_ADD, template });
     }
-
-    saveToStorage('test-templates', testTemplates);
-    this.setState({ testTemplates, selected, dialogStatus: 0 });
-    isDefaultTemplate = false;
+    this.handleCloseDialog();
   };
 
   handleRemove = () => {
     // Todo: add snackbar with undo
-    selected = 0;
-    testTemplates = [...this.state.testTemplates];
-    testTemplates.splice(this.state.selected, 1);
-    if (testTemplates.length === 0) testTemplates = this.getDefaultTemplates();
-    saveToStorage('test-templates-sel', selected);
-    saveToStorage('test-templates', testTemplates);
-    this.setState({ testTemplates, selected, dialogStatus: 0 });
-    isDefaultTemplate = false;
+    this.dispatch({ type: TEST_REMOVE });
+    this.handleCloseDialog();
   };
 
   handleCloseDialog = () => {
@@ -102,15 +69,18 @@ export default class TestGen extends Component {
   };
 
   render() {
-    const { dialogStatus, selected, testTemplates } = this.state; // eslint-disable-line
-    const template = testTemplates[selected];
+    const { dialogStatus } = this.state;
+    const { selected } = this.props;
+    const templates = this.props.templates || this.getDefaultTemplates();
+    const template = templates[selected];
     const { assertion, dispatcher, wrap } = template;
 
     return (
       <TestGenerator
-        isVanilla={!this.props.isRedux}
+        isVanilla={this.props.options.lib !== 'redux'}
+        name={this.props.options.name}
         assertion={assertion} dispatcher={dispatcher} wrap={wrap}
-        theme="night" useCodemirror={this.props.useCodemirror}
+        theme="night" useCodemirror
         header={
           <div style={{ height: '2.5em', minHeight: '2.5em', display: 'flex' }}>
             <SelectField
@@ -120,7 +90,7 @@ export default class TestGen extends Component {
               onChange={this.onSelect}
               value={selected}
             >
-              {testTemplates.map((item, i) =>
+              {templates.map((item, i) =>
                 <MenuItem key={i} value={i} primaryText={item.name} />
               )}
             </SelectField>
@@ -142,14 +112,19 @@ export default class TestGen extends Component {
 }
 
 TestGen.propTypes = {
-  isRedux: PropTypes.bool,
-  testTemplates: PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.string
-  ]),
-  selectedTemplate: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]),
-  useCodemirror: PropTypes.bool
+  templates: PropTypes.array,
+  selected: PropTypes.number,
+  options: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired
 };
+
+function mapStateToProps(state) {
+  const instances = state.instances;
+  return {
+    templates: state.test.templates,
+    selected: state.test.selected,
+    options: instances.options[getActiveInstance(instances)]
+  };
+}
+
+export default connect(mapStateToProps)(TestGen);
diff --git a/src/app/components/buttons/DispatcherButton.js b/src/app/components/buttons/DispatcherButton.js
index 08ad928..252c9e9 100644
--- a/src/app/components/buttons/DispatcherButton.js
+++ b/src/app/components/buttons/DispatcherButton.js
@@ -1,12 +1,15 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import DispatchIcon from 'react-icons/lib/md/keyboard';
 import DispatchHideIcon from 'react-icons/lib/md/keyboard-hide';
 import Button from '../Button';
+import { toggleDispatcher } from '../../actions';
 
-export default class DispatcherButton extends Component {
+class DispatcherButton extends Component {
   static propTypes = {
     dispatcherIsOpen: PropTypes.bool,
-    onClick: PropTypes.func.isRequired
+    toggleDispatcher: PropTypes.func.isRequired
   };
 
   shouldComponentUpdate(nextProps) {
@@ -17,8 +20,16 @@ export default class DispatcherButton extends Component {
     return (
       <Button
         Icon={this.props.dispatcherIsOpen ? DispatchHideIcon : DispatchIcon}
-        onClick={this.props.onClick}
+        onClick={this.props.toggleDispatcher}
       >Dispatcher</Button>
     );
   }
 }
+
+function mapDispatchToProps(dispatch) {
+  return {
+    toggleDispatcher: bindActionCreators(toggleDispatcher, dispatch)
+  };
+}
+
+export default connect(null, mapDispatchToProps)(DispatcherButton);
diff --git a/src/app/components/buttons/ExportButton.js b/src/app/components/buttons/ExportButton.js
index c6737c0..1d949d7 100644
--- a/src/app/components/buttons/ExportButton.js
+++ b/src/app/components/buttons/ExportButton.js
@@ -5,7 +5,7 @@ import Button from '../Button';
 
 export default class ExportButton extends Component {
   static propTypes = {
-    exportState: PropTypes.func.isRequired
+    liftedState: PropTypes.object.isRequired
   };
 
   constructor() {
@@ -19,9 +19,7 @@ export default class ExportButton extends Component {
   }
 
   handleExport() {
-    let state = this.props.exportState();
-    if (!state) return;
-    state = encodeURIComponent(stringify(state));
+    const state = encodeURIComponent(stringify(this.props.liftedState));
     this.setState({ href: 'data:text/json;charset=utf-8,' + state });
   }
 
diff --git a/src/app/components/buttons/ImportButton.js b/src/app/components/buttons/ImportButton.js
index ca1c902..8d1843f 100644
--- a/src/app/components/buttons/ImportButton.js
+++ b/src/app/components/buttons/ImportButton.js
@@ -1,11 +1,15 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import { parse } from 'jsan';
 import UploadIcon from 'react-icons/lib/md/file-upload';
 import Button from '../Button';
+import { importState, showNotification } from '../../actions';
 
-export default class ImportButton extends Component {
+class ImportButton extends Component {
   static propTypes = {
-    importState: PropTypes.func.isRequired
+    importState: PropTypes.func.isRequired,
+    showNotification: PropTypes.func.isRequired
   };
 
   constructor() {
@@ -36,10 +40,7 @@ export default class ImportButton extends Component {
         parse(state); // Check if it is in JSON format
         this.props.importState(state);
       } catch (error) {
-        // FIXME: add error notification
-        /* eslint-disable no-alert */
-        alert('Invalid file');
-        /* eslint-enable */
+        this.props.showNotification('Invalid file');
       }
     };
     reader.readAsText(file);
@@ -58,3 +59,12 @@ export default class ImportButton extends Component {
     );
   }
 }
+
+function mapDispatchToProps(dispatch) {
+  return {
+    importState: bindActionCreators(importState, dispatch),
+    showNotification: bindActionCreators(showNotification, dispatch)
+  };
+}
+
+export default connect(null, mapDispatchToProps)(ImportButton);
diff --git a/src/app/components/buttons/SliderButton.js b/src/app/components/buttons/SliderButton.js
index 3586d4b..60b7f77 100644
--- a/src/app/components/buttons/SliderButton.js
+++ b/src/app/components/buttons/SliderButton.js
@@ -1,12 +1,15 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import TimerIcon from 'react-icons/lib/md/timer';
 import TimerOffIcon from 'react-icons/lib/md/timer-off';
 import Button from '../Button';
+import { toggleSlider } from '../../actions';
 
-export default class DispatcherButton extends Component {
+class SliderButton extends Component {
   static propTypes = {
     isOpen: PropTypes.bool,
-    onClick: PropTypes.func.isRequired
+    toggleSlider: PropTypes.func.isRequired
   };
 
   shouldComponentUpdate(nextProps) {
@@ -17,8 +20,16 @@ export default class DispatcherButton extends Component {
     return (
       <Button
         Icon={this.props.isOpen ? TimerOffIcon : TimerIcon}
-        onClick={this.props.onClick}
+        onClick={this.props.toggleSlider}
       >Slider</Button>
     );
   }
 }
+
+function mapDispatchToProps(dispatch) {
+  return {
+    toggleSlider: bindActionCreators(toggleSlider, dispatch)
+  };
+}
+
+export default connect(null, mapDispatchToProps)(SliderButton);
diff --git a/src/app/components/reports/Table.js b/src/app/components/reports/Table.js
new file mode 100644
index 0000000..c1b7f10
--- /dev/null
+++ b/src/app/components/reports/Table.js
@@ -0,0 +1,54 @@
+import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import {
+  Table, TableBody, TableRow, TableRowColumn
+} from 'material-ui/Table';
+import { getReport } from '../../actions';
+
+const style = {
+  error: { color: '#EF5350' },
+  date: { textAlign: 'right', maxWidth: '150px' }
+};
+
+class Reports extends Component {
+  onSelect = r => {
+    const idx = r[0];
+    if (typeof idx === 'undefined') return;
+    this.props.getReport(this.props.reports[idx]);
+  };
+
+  render() {
+    return (
+      <Table onRowSelection={this.onSelect}>
+        <TableBody displayRowCheckbox={false}>
+          {this.props.reports.map((data) => (
+            <TableRow key={data.id}>
+              <TableRowColumn>{data.title}</TableRowColumn>
+              <TableRowColumn style={style.date}>{data.added}</TableRowColumn>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  }
+}
+
+Reports.propTypes = {
+  reports: PropTypes.array.isRequired,
+  getReport: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    reports: state.reports.data
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    getReport: bindActionCreators(getReport, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Reports);
diff --git a/src/app/constants/actionTypes.js b/src/app/constants/actionTypes.js
new file mode 100644
index 0000000..91d41ea
--- /dev/null
+++ b/src/app/constants/actionTypes.js
@@ -0,0 +1,23 @@
+export const UPDATE_STATE = 'devTools/UPDATE_STATE';
+export const SET_STATE = 'devTools/SET_STATE';
+export const SELECT_INSTANCE = 'devTools/SELECT_INSTANCE';
+export const REMOVE_INSTANCE = 'devTools/REMOVE_INSTANCE';
+export const LIFTED_ACTION = 'devTools/LIFTED_ACTION';
+export const MONITOR_ACTION = 'devTools/MONITOR_ACTION';
+export const TOGGLE_SYNC = 'devTools/TOGGLE_SYNC';
+export const SELECT_MONITOR = 'devTools/SELECT_MONITOR';
+export const TOGGLE_SLIDER = 'devTools/TOGGLE_SLIDER';
+export const TOGGLE_DISPATCHER = 'devTools/TOGGLE_DISPATCHER';
+export const SHOW_NOTIFICATION = 'devTools/SHOW_NOTIFICATION';
+export const CLEAR_NOTIFICATION = 'devTools/CLEAR_NOTIFICATION';
+
+export const UPDATE_REPORTS = 'reports/UPDATE';
+export const GET_REPORT_REQUEST = 'reports/GET_REPORT_REQUEST';
+export const GET_REPORT_ERROR = 'reports/GET_REPORT_ERROR';
+export const GET_REPORT_SUCCESS = 'reports/GET_REPORT_SUCCESS';
+export const ERROR = 'ERROR';
+
+export const TEST_ADD = 'test/ADD';
+export const TEST_EDIT = 'test/EDIT';
+export const TEST_REMOVE = 'test/REMOVE';
+export const TEST_SELECT = 'test/SELECT';
diff --git a/src/app/constants/socketActionTypes.js b/src/app/constants/socketActionTypes.js
new file mode 100644
index 0000000..1df2861
--- /dev/null
+++ b/src/app/constants/socketActionTypes.js
@@ -0,0 +1,19 @@
+import socketCluster from 'socketcluster-client';
+
+export const {
+  CLOSED, CONNECTING, OPEN, AUTHENTICATED, PENDING, UNAUTHENTICATED
+  } = socketCluster.SCSocket;
+export const CONNECT_REQUEST = 'socket/CONNECT_REQUEST';
+export const CONNECT_SUCCESS = 'socket/CONNECT_SUCCESS';
+export const CONNECT_ERROR = 'socket/CONNECT_ERROR';
+export const RECONNECT = 'socket/RECONNECT';
+export const AUTH_REQUEST = 'socket/AUTH_REQUEST';
+export const AUTH_SUCCESS = 'socket/AUTH_SUCCESS';
+export const AUTH_ERROR = 'socket/AUTH_ERROR';
+export const DISCONNECTED = 'socket/DISCONNECTED';
+export const DEAUTHENTICATE = 'socket/DEAUTHENTICATE';
+export const SUBSCRIBE_REQUEST = 'socket/SUBSCRIBE_REQUEST';
+export const SUBSCRIBE_SUCCESS = 'socket/SUBSCRIBE_SUCCESS';
+export const SUBSCRIBE_ERROR = 'socket/SUBSCRIBE_ERROR';
+export const UNSUBSCRIBE = 'socket/UNSUBSCRIBE';
+export const EMIT = 'socket/EMIT';
diff --git a/src/app/constants/socketOptions.js b/src/app/constants/socketOptions.js
index f0636f6..688e727 100644
--- a/src/app/constants/socketOptions.js
+++ b/src/app/constants/socketOptions.js
@@ -2,7 +2,10 @@ const socketOptions = {
   hostname: 'remotedev.io',
   port: 80,
   autoReconnect: true,
-  secure: false
+  secure: false,
+  autoReconnectOptions: {
+    randomness: 30000
+  }
 };
 
 export default socketOptions;
diff --git a/src/app/containers/App.js b/src/app/containers/App.js
index e2a0259..ae3ab33 100644
--- a/src/app/containers/App.js
+++ b/src/app/containers/App.js
@@ -1,194 +1,87 @@
 import React, { Component, PropTypes } from 'react';
-import {
-  saveObjToStorage, getSettings, getFromStorage, saveToStorage
-} from '../utils/localStorage';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { liftedDispatch } from '../actions';
+import { getActiveInstance } from '../reducers/instances';
 import styles from '../styles';
 import DevTools from '../containers/DevTools';
 import Dispatcher from './monitors/Dispatcher';
-import {
-  createRemoteStore, updateStoreInstance, enableSync,
-  startMonitoring, importState, exportState
-} from '../store/createRemoteStore';
-import { addInstance, deleteInstance } from '../services/messaging';
 import ButtonBar from '../components/ButtonBar';
+import Notification from '../components/Notification';
 import Instances from '../components/Instances';
 import MonitorSelector from '../components/MonitorSelector';
 import SyncToggle from '../components/SyncToggle';
 import TestGenerator from '../components/TestGenerator';
 
-export default class App extends Component {
+class App extends Component {
   static propTypes = {
-    selectMonitor: PropTypes.string,
-    testTemplates: PropTypes.array,
-    useCodemirror: PropTypes.bool,
-    selectedTemplate: PropTypes.number,
-    socketOptions: PropTypes.shape({
-      hostname: PropTypes.string,
-      port: PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
-      autoReconnect: PropTypes.bool,
-      secure: PropTypes.bool
-    }),
+    liftedDispatch: PropTypes.func.isRequired,
+    selected: PropTypes.string,
+    liftedState: PropTypes.object.isRequired,
+    options: PropTypes.object.isRequired,
+    monitor: PropTypes.string,
+    dispatcherIsOpen: PropTypes.bool,
+    sliderIsOpen: PropTypes.bool,
+    shouldSync: PropTypes.bool,
     noSettings: PropTypes.bool
   };
 
-  constructor() {
-    super();
-    this.openModal = this.openModal.bind(this);
-    this.closeModal = this.closeModal.bind(this);
-    this.toggleDispatcher = this.toggleDispatcher.bind(this);
-    this.toggleSlider = this.toggleSlider.bind(this);
-    this.saveSettings = this.saveSettings.bind(this);
-    this.clearError = this.clearError.bind(this);
-    this.handleError = this.handleError.bind(this);
-  }
-
-  componentWillMount() {
-    this.state = {
-      monitor: getFromStorage('select-monitor') || this.props.selectMonitor || 'default',
-      modalIsOpen: false,
-      dispatcherIsOpen: false,
-      sliderIsOpen: true,
-      instances: {},
-      instance: null,
-      error: null,
-      shouldSync: false
-    };
-    this.socketOptions = getSettings() || this.props.socketOptions;
-    this.store = this.createStore();
-    this.testComponent = (props) => (
-      <TestGenerator
-        name={this.state.instances[this.state.instance || this.store.liftedStore.getInstance()]}
-        isRedux={this.store.isRedux()}
-        testTemplates={this.props.testTemplates}
-        selectedTemplate={this.props.selectedTemplate}
-        useCodemirror={this.props.useCodemirror}
-        {...props}
-      />
-    );
-  }
-
-  handleInstancesChanged = ({ id, instanceId }, name, toRemove) => {
-    const instances = this.state.instances;
-    if (toRemove) {
-      deleteInstance(id, (instance) => {
-        delete instances[instance];
-        this.store.liftedStore.deleteInstance(instance);
-        if (this.state.instance === instance) {
-          updateStoreInstance(null);
-          this.setState({ instance: null, shouldSync: false });
-        }
-      });
-    } else {
-      addInstance(id, instanceId);
-      instances[instanceId] = name || instanceId;
-      startMonitoring(instanceId);
-    }
-    this.setState({ instances });
-  };
-
-  handleSelectInstance = (event, index, instance) => {
-    updateStoreInstance(instance);
-    this.setState({ instance, shouldSync: false });
-  };
-
-  handleSelectMonitor = (event, index, value) => {
-    this.setState({ monitor: saveToStorage('select-monitor', value) });
-  };
-
-  handleSyncToggle = () => {
-    const shouldSync = !this.state.shouldSync;
-    enableSync(shouldSync);
-    this.setState({ shouldSync });
-  };
-
-  createStore() {
-    return createRemoteStore(
-      this.socketOptions,
-      this.handleInstancesChanged,
-      this.handleError,
-      this.state.instance
-    );
-  }
-
-  saveSettings(isLocal, options) {
-    this.socketOptions = saveObjToStorage(
-      !isLocal, ['hostname', 'port', 'secure'], options
-    ) || undefined;
-    this.store = this.createStore();
-    this.closeModal();
-  }
-
-  toggleDispatcher() {
-    this.setState({ dispatcherIsOpen: !this.state.dispatcherIsOpen });
-  }
-
-  handleError(error) {
-    this.setState({ error });
-  }
-
-  clearError() {
-    this.setState({ error: null });
-  }
-
-  toggleSlider() {
-    this.setState({ sliderIsOpen: !this.state.sliderIsOpen });
-  }
-
-  openModal(content) {
-    this.modalContent = content;
-    this.setState({ modal: this.modal, modalIsOpen: true });
-  }
-  closeModal() {
-    this.modalContent = null;
-    this.setState({ modalIsOpen: false });
-  }
-
   render() {
-    const { monitor } = this.state;
-    const key = (this.socketOptions ? this.socketOptions.hostname : '') + this.state.instance;
+    const { monitor, dispatcherIsOpen, sliderIsOpen, options, liftedState } = this.props;
     return (
       <div style={styles.container}>
         <div style={styles.buttonBar}>
-          <MonitorSelector selected={this.state.monitor} onSelect={this.handleSelectMonitor}/>
-          <Instances
-            instances={this.state.instances} onSelect={this.handleSelectInstance}
-            selected={this.state.instance}
-          />
+          <MonitorSelector selected={monitor}/>
+          <Instances selected={this.props.selected} />
           <SyncToggle
-            on={this.state.shouldSync}
-            onClick={this.handleSyncToggle}
-            style={!this.state.instance ? { display: 'none' } : undefined}
+            on={this.props.shouldSync}
+            style={!this.props.selected ? { display: 'none' } : undefined}
           />
         </div>
         <DevTools
           monitor={monitor}
-          store={this.store}
-          testComponent={this.testComponent}
-          key={`${monitor}-${key}`}
+          liftedState={liftedState}
+          dispatch={this.props.liftedDispatch}
+          testComponent={options.lib === 'redux' && TestGenerator}
         />
-        {this.state.sliderIsOpen && <div style={styles.sliderMonitor}>
-          <DevTools monitor="SliderMonitor" store={this.store} key={`Slider-${key}`} />
-        </div>}
-        {this.state.dispatcherIsOpen && this.store.liftedStore.getInstance() &&
-          <Dispatcher
-            store={this.store}
-            error={this.state.error}
-            clearError={this.clearError}
-            key={`Dispatcher-${key}`}
+        <Notification />
+        {sliderIsOpen && <div style={styles.sliderMonitor}>
+          <DevTools
+            monitor="SliderMonitor"
+            liftedState={liftedState}
+            dispatch={this.props.liftedDispatch}
           />
+        </div>}
+        {dispatcherIsOpen && options.connectionId &&
+          <Dispatcher options={options} />
         }
         <ButtonBar
-          openModal={this.openModal} closeModal={this.closeModal}
-          toggleDispatcher={this.toggleDispatcher}
-          dispatcherIsOpen={this.state.dispatcherIsOpen}
-          toggleSlider={this.toggleSlider}
-          sliderIsOpen={this.state.sliderIsOpen}
-          saveSettings={this.saveSettings}
-          importState={importState} exportState={exportState}
-          socketOptions={this.socketOptions}
+          liftedState={liftedState}
+          dispatcherIsOpen={dispatcherIsOpen}
+          sliderIsOpen={sliderIsOpen}
           noSettings={this.props.noSettings}
         />
       </div>
     );
   }
 }
+
+function mapStateToProps(state) {
+  const instances = state.instances;
+  const id = getActiveInstance(instances);
+  return {
+    selected: instances.selected,
+    liftedState: instances.states[id],
+    options: instances.options[id],
+    monitor: state.monitor.selected,
+    dispatcherIsOpen: state.monitor.dispatcherIsOpen,
+    sliderIsOpen: state.monitor.sliderIsOpen,
+    shouldSync: state.instances.sync
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return { liftedDispatch: bindActionCreators(liftedDispatch, dispatch) };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/app/containers/DevTools.js b/src/app/containers/DevTools.js
index 6347585..1adc20d 100644
--- a/src/app/containers/DevTools.js
+++ b/src/app/containers/DevTools.js
@@ -1,57 +1,43 @@
 import React, { Component, PropTypes, createElement } from 'react';
-import { createDevTools } from 'redux-devtools';
-import LogMonitor from 'redux-devtools-log-monitor';
-import SliderMonitor from 'redux-slider-monitor';
-import InspectorMonitor from 'redux-devtools-inspector';
-import ChartMonitor from 'redux-devtools-chart-monitor';
+import getMonitor from './getMonitor';
 
-export const sideMonitors = [
-  { key: 'LogMonitor', title: 'Log monitor' },
-  { key: 'InspectorMonitor', title: 'Inspector' },
-  { key: 'ChartMonitor', title: 'Chart' }
-];
-
-function getMonitor(type, props) {
-  switch (type) {
-    case 'LogMonitor':
-      return createElement(LogMonitor, { preserveScrollTop: false });
-    case 'SliderMonitor':
-      return createElement(SliderMonitor);
-    case 'DispatchMonitor':
-      return createElement('div'); // deprecated
-    case 'ChartMonitor':
-      return createElement(ChartMonitor, {
-        defaultIsVisible: true, invertTheme: true,
-        tooltipOptions: {
-          style: {
-            'background-color': '#ffffff',
-            'color': '#000000',
-            'opacity': '0.9',
-            'border-radius': '5px',
-            'padding': '5px'
-          }
-        }
-      });
-    default:
-      return createElement(InspectorMonitor, {
-        shouldPersistState: false, isLightTheme: false, theme: 'nicinabox',
-        tabs: defaultTabs => [...defaultTabs, { name: 'Test', component: props.testComponent }]
-      });
+export default class DevTools extends Component {
+  constructor(props) {
+    super(props);
+    this.monitorElement = getMonitor(props);
   }
-}
 
-export default class extends Component {
-  static propTypes = {
-    monitor: PropTypes.string
-  };
+  componentWillReceiveProps(nextProps) {
+    if (
+      nextProps.monitor !== this.props.monitor ||
+      nextProps.testComponent !== this.props.testComponent
+    ) {
+      this.monitorElement = getMonitor(nextProps);
+    }
+  }
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.monitor !== this.props.monitor;
+    return (
+      nextProps.monitor !== this.props.monitor ||
+      nextProps.liftedState !== this.props.liftedState ||
+      nextProps.testComponent !== this.props.testComponent
+    );
   }
 
   render() {
-    const { monitor, ...rest } = this.props;
-    const DevTools = createDevTools(getMonitor(monitor, rest));
-    return <DevTools {...rest} />;
+    const { liftedState, dispatch } = this.props;
+    const monitorProps = this.monitorElement.props;
+    const Monitor = this.monitorElement.type;
+    return <Monitor dispatch={dispatch} {...liftedState} {...monitorProps} />;
   }
 }
+
+DevTools.propTypes = {
+  liftedState: PropTypes.object,
+  dispatch: PropTypes.func.isRequired,
+  monitor: PropTypes.string,
+  testComponent: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.func
+  ])
+};
diff --git a/src/app/containers/Layout.js b/src/app/containers/Layout.js
new file mode 100644
index 0000000..4d4d0d5
--- /dev/null
+++ b/src/app/containers/Layout.js
@@ -0,0 +1,39 @@
+import React, { Component, PropTypes, cloneElement } from 'react';
+import { withRouter } from 'react-router';
+import { Tabs, Tab } from 'material-ui/Tabs';
+import enhance from '../hoc';
+import styles from '../styles';
+
+export default class Layout extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { tab: 0 };
+  }
+  handleChange = (pathname) => {
+    this.props.router.push(pathname);
+  };
+  render() {
+    const { children, ...rest } = this.props;
+    return (
+      <div style={{ height: '100%', display: 'flex', flexFlow: 'column nowrap' }}>
+        <Tabs
+          onChange={this.handleChange}
+          value={this.props.location.pathname}
+          tabItemContainerStyle={styles.tabs}
+        >
+          <Tab label="Monitoring" style={styles.tab} value="/"/>
+          <Tab label="Reports" style={styles.tab} value="/reports"/>
+        </Tabs>
+        {cloneElement(children, rest)}
+      </div>
+    );
+  }
+}
+
+Layout.propTypes = {
+  children: PropTypes.any,
+  router: PropTypes.object,
+  location: PropTypes.object
+};
+
+export default enhance(withRouter(Layout));
diff --git a/src/app/containers/getMonitor.js b/src/app/containers/getMonitor.js
new file mode 100644
index 0000000..7c2bff0
--- /dev/null
+++ b/src/app/containers/getMonitor.js
@@ -0,0 +1,41 @@
+import React, { Component, PropTypes, createElement } from 'react';
+import LogMonitor from 'redux-devtools-log-monitor';
+import SliderMonitor from 'redux-slider-monitor';
+import InspectorMonitor from 'redux-devtools-inspector';
+import ChartMonitor from 'redux-devtools-chart-monitor';
+
+export const monitors = [
+  { key: 'LogMonitor', title: 'Log monitor' },
+  { key: 'InspectorMonitor', title: 'Inspector' },
+  { key: 'ChartMonitor', title: 'Chart' }
+];
+
+export default function getMonitor({ monitor, testComponent }) {
+  switch (monitor) {
+    case 'LogMonitor':
+      return <LogMonitor preserveScrollTop={false} />;
+    case 'SliderMonitor':
+      return <SliderMonitor />;
+    case 'ChartMonitor':
+      return createElement(ChartMonitor, {
+        defaultIsVisible: true, invertTheme: true,
+        tooltipOptions: {
+          style: {
+            'background-color': '#ffffff',
+            'color': '#000000',
+            'opacity': '0.9',
+            'border-radius': '5px',
+            'padding': '5px'
+          }
+        }
+      });
+    default:
+      let tabs;
+      if (testComponent) {
+        tabs = defaultTabs => [...defaultTabs, { name: 'Test', component: testComponent }];
+      }
+      return createElement(InspectorMonitor, {
+        shouldPersistState: false, isLightTheme: false, theme: 'nicinabox', tabs
+      });
+  }
+}
diff --git a/src/app/containers/monitors/Dispatcher.js b/src/app/containers/monitors/Dispatcher.js
index fb36551..075203a 100644
--- a/src/app/containers/monitors/Dispatcher.js
+++ b/src/app/containers/monitors/Dispatcher.js
@@ -2,6 +2,9 @@
 
 import React, { Component, PropTypes } from 'react';
 import * as themes from 'redux-devtools-themes';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { dispatchRemotely } from '../../actions';
 
 const styles = {
   button: {
@@ -33,15 +36,14 @@ const styles = {
   }
 };
 
-export default class Dispatcher extends Component {
+class Dispatcher extends Component {
   static propTypes = {
-    store: PropTypes.object.isRequired,
+    options: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
     theme: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.string,
-    ]),
-    error: PropTypes.string,
-    clearError: PropTypes.func.isRequired
+    ])
   };
 
   static defaultProps = {
@@ -62,7 +64,7 @@ export default class Dispatcher extends Component {
     if (selected !== 'default') {
       // Shrink the number args to the number of the new ones
       args = this.state.args.slice(
-        0, this.props.store.getActionCreators()[selected].args.length
+        0, this.props.options.actionCreators[selected].args.length
       );
     }
     this.setState({
@@ -87,16 +89,15 @@ export default class Dispatcher extends Component {
       let rest = this.refs.restArgs.textContent.trim();
       if (rest === '') rest = undefined;
       const { selected, args } = this.state;
-      this.props.store.dispatch({
-        name: this.props.store.getActionCreators()[selected].name,
+      this.props.dispatch({
+        name: this.props.options.actionCreators[selected].name,
         selected, args, rest
       });
     } else {
       if (this.refs.action.textContent !== '') {
-        this.props.store.dispatch(this.refs.action.textContent);
+        this.props.dispatch(this.refs.action.textContent);
       }
     }
-    this.props.clearError();
   }
 
   componentDidMount() {
@@ -113,7 +114,7 @@ export default class Dispatcher extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.state.selected !== 'default' && !nextProps.store.getActionCreators()) {
+    if (this.state.selected !== 'default' && !nextProps.options.actionCreators) {
       this.setState({
         selected: 'default',
         args: []
@@ -122,7 +123,9 @@ export default class Dispatcher extends Component {
   }
 
   resetCustomAction() {
-    this.refs.action.innerHTML = this.props.store.isRedux() ? '{<br/>type: \'\'<br/>}' : 'this.';
+    this.refs.action.innerHTML = (
+      this.props.options.lib === 'redux' ? '{<br/>type: \'\'<br/>}' : 'this.'
+    );
   }
 
   getTheme() {
@@ -147,7 +150,7 @@ export default class Dispatcher extends Component {
     const buttonStyle = {
       ...styles.button, color: theme.base06, backgroundColor: theme.base00
     };
-    const actionCreators = this.props.store.getActionCreators();
+    const actionCreators = this.props.options.actionCreators;
 
     let fields = <div contentEditable style={contentEditableStyle} ref="action"></div>;
     if (this.state.selected !== 'default' && actionCreators) {
@@ -169,23 +172,6 @@ export default class Dispatcher extends Component {
       );
     }
 
-    let error;
-    if (this.props.error) {
-      error = (
-        <div style={{ color: theme.base06, background: '#FC2424', padding: '5px', display: 'flex' }}>
-          <div style={{ flex: '1', alignItems: 'center' }}>
-            <p style={{ margin: '0px' }}>{this.props.error}</p>
-          </div>
-          <div style={{ alignItems: 'center' }}>
-            <button
-              onClick={this.props.clearError}
-              style={{ ...buttonStyle, margin: '0', background: '#DC2424' }}
-            >&times;</button>
-          </div>
-        </div>
-      );
-    }
-
     let dispatchButtonStyle = buttonStyle;
     if (!actionCreators || actionCreators.length <= 0) {
       dispatchButtonStyle = {
@@ -209,7 +195,6 @@ export default class Dispatcher extends Component {
           position: 'relative'
         }}
       >
-        {error}
         {fields}
         {actionCreators && actionCreators.length > 0 ? <div style={{ display: 'flex' }}>
           <select
@@ -230,3 +215,11 @@ export default class Dispatcher extends Component {
     );
   }
 }
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch: bindActionCreators(dispatchRemotely, dispatch)
+  };
+}
+
+export default connect(null, mapDispatchToProps)(Dispatcher);
diff --git a/src/app/index.js b/src/app/index.js
index 6e70b64..6f8d3cf 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -1,5 +1,49 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
+import { Provider } from 'react-redux';
 import enhance from './hoc';
+import configureStore from './store/configureStore';
+import {
+  getMonitorSettings, getSocketSettings, getTestTemplates, getTemplatesSelected
+} from './utils/localStorage';
+import { CONNECT_REQUEST } from './constants/socketActionTypes';
 import App from './containers/App';
 
-export default enhance(App);
+class Root extends Component {
+  componentWillMount() {
+    this.store = configureStore({
+      monitor: getMonitorSettings() || this.props.monitorOptions,
+      test: {
+        selected: getTemplatesSelected(),
+        templates: getTestTemplates() || this.props.testTemplates
+      }
+    });
+    this.store.dispatch({
+      type: CONNECT_REQUEST,
+      options: getSocketSettings() || this.props.socketOptions
+    });
+  }
+
+  render() {
+    return (
+      <Provider store={this.store}>
+        <App {...this.props} />
+      </Provider>
+    );
+  }
+}
+
+Root.propTypes = {
+  hash: PropTypes.bool,
+  socketOptions: PropTypes.shape({
+    hostname: PropTypes.string,
+    port: PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+    autoReconnect: PropTypes.bool,
+    secure: PropTypes.bool
+  }),
+  monitorOptions: PropTypes.shape({
+    selected: PropTypes.string
+  }),
+  testTemplates: PropTypes.array
+};
+
+export default enhance(Root);
diff --git a/src/app/middlewares/api.js b/src/app/middlewares/api.js
new file mode 100644
index 0000000..34ceefb
--- /dev/null
+++ b/src/app/middlewares/api.js
@@ -0,0 +1,197 @@
+import socketCluster from 'socketcluster-client';
+import { stringify } from 'jsan';
+import * as actions from '../constants/socketActionTypes';
+import { getActiveInstance } from '../reducers/instances';
+import {
+  UPDATE_STATE, REMOVE_INSTANCE, LIFTED_ACTION,
+  UPDATE_REPORTS, GET_REPORT_REQUEST, GET_REPORT_ERROR, GET_REPORT_SUCCESS
+} from '../constants/actionTypes';
+import { showNotification, importState } from '../actions';
+import { nonReduxDispatch } from '../store/monitorActions';
+
+let socket;
+let store;
+
+function emit({ message: type, id, instanceId, action, state }) {
+  socket.emit(
+    id ? 'sc-' + id : 'respond',
+    { type, action, state, instanceId }
+  );
+}
+
+function startMonitoring(channel) {
+  if (channel !== store.getState().socket.baseChannel) return;
+  store.dispatch({ type: actions.EMIT, message: 'START' });
+}
+
+function dispatchRemoteAction({ message, action, state }) {
+  const instances = store.getState().instances;
+  const instanceId = getActiveInstance(instances);
+  const id = instances.options[instanceId].connectionId;
+  store.dispatch({
+    type: actions.EMIT,
+    message,
+    action,
+    state: nonReduxDispatch(store, message, instanceId, action, state, instances),
+    instanceId,
+    id
+  });
+}
+
+function monitoring(request) {
+  if (request.type === 'DISCONNECTED') {
+    store.dispatch({
+      type: REMOVE_INSTANCE,
+      id: request.id
+    });
+    return;
+  }
+  if (request.type === 'START') {
+    store.dispatch({ type: actions.EMIT, message: 'START', id: request.id });
+    return;
+  }
+
+  if (request.type === 'ERROR') {
+    store.dispatch(showNotification(request.payload));
+    return;
+  }
+
+  store.dispatch({
+    type: UPDATE_STATE,
+    request: request.data ? { ...request.data, id: request.id } : request
+  });
+
+  const instances = store.getState().instances;
+  const instanceId = request.instanceId || request.id;
+  if (
+    instances.sync && instanceId === instances.selected &&
+    (request.type === 'ACTION' || request.type === 'STATE')
+  ) {
+    socket.emit('respond', {
+      type: 'SYNC',
+      state: stringify(instances.states[instanceId]),
+      id: request.id,
+      instanceId
+    });
+  }
+}
+
+function subscribe(channelName, subscription) {
+  const channel = socket.subscribe(channelName);
+  if (subscription === UPDATE_STATE) channel.watch(monitoring);
+  else {
+    const watcher = request => {
+      store.dispatch({ type: subscription, request });
+    };
+    channel.watch(watcher);
+    socket.on(channelName, watcher);
+  }
+}
+
+function handleConnection() {
+  socket.on('connect', status => {
+    store.dispatch({
+      type: actions.CONNECT_SUCCESS,
+      payload: {
+        id: status.id,
+        authState: socket.authState,
+        socketState: socket.state
+      },
+      error: status.authError
+    });
+    if (socket.authState !== actions.AUTHENTICATED) {
+      store.dispatch({ type: actions.AUTH_REQUEST });
+    }
+  });
+  socket.on('disconnect', code => {
+    store.dispatch({ type: actions.DISCONNECTED, code });
+  });
+
+  socket.on('subscribe', channel => {
+    store.dispatch({ type: actions.SUBSCRIBE_SUCCESS, channel });
+  });
+  socket.on('unsubscribe', channel => {
+    socket.unsubscribe(channel);
+    socket.unwatch(channel);
+    socket.off(channel);
+    store.dispatch({ type: actions.UNSUBSCRIBE, channel });
+  });
+  socket.on('subscribeFail', error => {
+    store.dispatch({ type: actions.SUBSCRIBE_ERROR, error, status: 'subscribeFail' });
+  });
+  socket.on('dropOut', error => {
+    store.dispatch({ type: actions.SUBSCRIBE_ERROR, error, status: 'dropOut' });
+  });
+
+  socket.on('error', error => {
+    store.dispatch({ type: actions.CONNECT_ERROR, error });
+  });
+}
+
+function connect() {
+  try {
+    socket = socketCluster.connect(store.getState().socket.options);
+    handleConnection(store);
+  } catch (error) {
+    store.dispatch({ type: actions.CONNECT_ERROR, error });
+    store.dispatch(showNotification(error.message || error));
+  }
+}
+
+function disconnect() {
+  socket.disconnect();
+  socket.off();
+}
+
+function login() {
+  socket.emit('login', {}, (error, baseChannel) => {
+    if (error) {
+      store.dispatch({ type: actions.AUTH_ERROR, error });
+      return;
+    }
+    store.dispatch({ type: actions.AUTH_SUCCESS, baseChannel });
+    store.dispatch({
+      type: actions.SUBSCRIBE_REQUEST,
+      channel: baseChannel,
+      subscription: UPDATE_STATE
+    });
+    store.dispatch({
+      type: actions.SUBSCRIBE_REQUEST,
+      channel: 'report',
+      subscription: UPDATE_REPORTS
+    });
+  });
+}
+
+function getReport(report) {
+  if (report.payload) {
+    store.dispatch(importState(report.payload));
+    return;
+  }
+  socket.emit('getReport', report.id, (error, data) => {
+    if (error) {
+      store.dispatch({ type: GET_REPORT_ERROR, error });
+      return;
+    }
+    store.dispatch({ type: GET_REPORT_SUCCESS, data });
+    store.dispatch(importState(data.payload));
+  });
+}
+
+export default function api(inStore) {
+  store = inStore;
+  return next => action => {
+    const result = next(action);
+    switch (action.type) { // eslint-disable-line default-case
+      case actions.CONNECT_REQUEST: connect(); break;
+      case actions.RECONNECT: disconnect(); connect(); break;
+      case actions.AUTH_REQUEST: login(); break;
+      case actions.SUBSCRIBE_REQUEST: subscribe(action.channel, action.subscription); break;
+      case actions.SUBSCRIBE_SUCCESS: startMonitoring(action.channel); break;
+      case actions.EMIT: emit(action); break;
+      case LIFTED_ACTION: dispatchRemoteAction(action); break;
+      case GET_REPORT_REQUEST: getReport(action.report); break;
+    }
+    return result;
+  };
+}
diff --git a/src/app/middlewares/persist.js b/src/app/middlewares/persist.js
new file mode 100644
index 0000000..0f67e06
--- /dev/null
+++ b/src/app/middlewares/persist.js
@@ -0,0 +1,37 @@
+import {
+  SELECT_MONITOR, TOGGLE_SLIDER, TOGGLE_DISPATCHER,
+  TEST_ADD, TEST_EDIT, TEST_REMOVE, TEST_SELECT
+} from '../constants/actionTypes';
+import { RECONNECT } from '../constants/socketActionTypes';
+import { saveToStorage, saveObjToStorage } from '../utils/localStorage';
+
+const persist = (suffix = '') => store => next => action => {
+  const result = next(action);
+  switch (action.type) { // eslint-disable-line default-case
+    case RECONNECT:
+      if (action.options) saveObjToStorage(!action.isCustom, action.options);
+      break;
+    case SELECT_MONITOR:
+      saveToStorage('monitor' + suffix, action.monitor);
+      break;
+    case TOGGLE_SLIDER:
+      saveToStorage('slider' + suffix, true, !store.getState().monitor.sliderIsOpen);
+      break;
+    case TOGGLE_DISPATCHER:
+      saveToStorage('dispatcher' + suffix, true, !store.getState().monitor.dispatcherIsOpen);
+      break;
+    case TEST_SELECT:
+      saveToStorage('test-templates-sel', action.selected);
+      break;
+    case TEST_ADD:
+    case TEST_EDIT:
+    case TEST_REMOVE:
+      const testsTemplates = store.getState().test.templates;
+      saveToStorage('test-templates', testsTemplates, !testsTemplates);
+      saveToStorage('test-templates-sel', action.selected);
+      break;
+  }
+  return result;
+};
+
+export default persist;
diff --git a/src/app/reducers/index.js b/src/app/reducers/index.js
new file mode 100644
index 0000000..52ba85f
--- /dev/null
+++ b/src/app/reducers/index.js
@@ -0,0 +1,20 @@
+import { combineReducers } from 'redux';
+import { routerReducer as routing } from 'react-router-redux';
+import socket from './socket';
+import monitor from './monitor';
+import notification from './notification';
+import instances from './instances';
+import test from './test';
+import reports from './reports';
+
+const rootReducer = combineReducers({
+  routing,
+  socket,
+  monitor,
+  instances,
+  test,
+  reports,
+  notification
+});
+
+export default rootReducer;
diff --git a/src/app/reducers/instances.js b/src/app/reducers/instances.js
new file mode 100644
index 0000000..decdacb
--- /dev/null
+++ b/src/app/reducers/instances.js
@@ -0,0 +1,179 @@
+import {
+  UPDATE_STATE, SET_STATE, LIFTED_ACTION,
+  SELECT_INSTANCE, REMOVE_INSTANCE, TOGGLE_SYNC
+} from '../constants/actionTypes';
+import { DISCONNECTED } from '../constants/socketActionTypes';
+import parseJSON from '../utils/parseJSON';
+import { recompute } from '../store/updateState';
+
+export const initialState = {
+  selected: null,
+  current: 'default',
+  sync: false,
+  connections: {},
+  options: { default: {} },
+  states: {
+    default: {
+      actionsById: {},
+      computedStates: [],
+      currentStateIndex: -1,
+      monitorState: {},
+      nextActionId: 0,
+      skippedActionIds: [],
+      stagedActionIds: []
+    }
+  }
+};
+
+function updateState(state, request, id) {
+  const payload = parseJSON(request.payload);
+  if (typeof payload === 'undefined') return state;
+
+  let newState;
+  const action = request.action && parseJSON(request.action) || {};
+
+  switch (request.type) {
+    case 'INIT':
+      newState = recompute(
+        state.default,
+        payload,
+        { action: { type: '@@INIT' }, timestamp: action.timestamp || Date.now() }
+      );
+      break;
+    case 'ACTION':
+      const liftedState = state[id] || state.default;
+      newState = recompute(
+        liftedState,
+        payload,
+        action,
+        request.nextActionId || (liftedState.nextActionId + 1),
+        request.isExcess
+      );
+      break;
+    case 'STATE':
+      newState = payload;
+      break;
+    default:
+      return state;
+  }
+
+  return { ...state, [id]: newState };
+}
+
+export function dispatchAction(state, { action }) {
+  if (action.type === 'JUMP_TO_STATE') {
+    const id = state.selected || state.current;
+    const liftedState = state.states[id];
+    return {
+      ...state,
+      states: {
+        ...state.states,
+        [id]: { ...liftedState, currentStateIndex: action.index }
+      }
+    };
+  }
+  return state;
+}
+
+function removeState(state, connectionId) {
+  const instanceIds = state.connections[connectionId];
+  if (!instanceIds) return state;
+
+  const connections = { ...state.connections };
+  const options = { ...state.options };
+  const states = { ...state.states };
+  let selected = state.selected;
+  let current = state.current;
+  let sync = state.sync;
+
+  delete connections[connectionId];
+  instanceIds.forEach(id => {
+    if (id === selected) {
+      selected = null;
+      sync = false;
+    }
+    if (id === current) {
+      const inst = Object.keys(connections)[0];
+      if (inst) current = connections[inst][0];
+      else current = 'default';
+    }
+    delete options[id];
+    delete states[id];
+  });
+  return {
+    selected,
+    current,
+    sync,
+    connections,
+    options,
+    states
+  };
+}
+
+function init({ type, action, name }, connectionId, current) {
+  let lib;
+  let actionCreators;
+  let creators = action;
+  if (typeof creators === 'string') creators = JSON.parse(creators);
+  if (Array.isArray(creators)) actionCreators = creators;
+  if (type === 'STATE') lib = 'redux';
+  return {
+    name: name || current,
+    connectionId,
+    lib,
+    actionCreators
+  };
+}
+
+export default function instances(state = initialState, action) {
+  switch (action.type) {
+    case UPDATE_STATE:
+      const { request } = action;
+      const connectionId = action.id || request.id;
+      const current = request.instanceId || connectionId;
+      let connections = state.connections;
+      let options = state.options;
+
+      if (typeof state.options[current] === 'undefined') {
+        connections = {
+          ...state.connections,
+          [connectionId]: [...(connections[connectionId] || []), current]
+        };
+        options = { ...options, [current]: init(request, connectionId, current) };
+      }
+
+      return {
+        ...state,
+        current,
+        connections,
+        options,
+        states: updateState(state.states, request, current)
+      };
+    case SET_STATE:
+      return {
+        ...state,
+        states: {
+          ...state.states,
+          [state.selected || state.current]: action.newState
+        }
+      };
+    case TOGGLE_SYNC:
+      return { ...state, sync: !state.sync };
+    case SELECT_INSTANCE:
+      if (!state.options[action.selected]) return state;
+      return { ...state, selected: action.selected, sync: false };
+    case REMOVE_INSTANCE:
+      return removeState(state, action.id);
+    case LIFTED_ACTION:
+      if (action.message === 'DISPATCH') return dispatchAction(state, action);
+      return state;
+    case DISCONNECTED:
+      return initialState;
+    default:
+      return state;
+  }
+}
+
+/* eslint-disable no-shadow */
+export const getActiveInstance = instances => instances.selected || instances.current;
+/* eslint-enable */
diff --git a/src/app/reducers/monitor.js b/src/app/reducers/monitor.js
new file mode 100644
index 0000000..75613fb
--- /dev/null
+++ b/src/app/reducers/monitor.js
@@ -0,0 +1,29 @@
+import { SELECT_MONITOR, TOGGLE_SLIDER, TOGGLE_DISPATCHER } from '../constants/actionTypes';
+
+const initialState = {
+  selected: 'InspectorMonitor',
+  sliderIsOpen: false,
+  dispatcherIsOpen: false
+};
+
+export default function monitor(state = initialState, action) {
+  switch (action.type) {
+    case SELECT_MONITOR:
+      return {
+        ...state,
+        selected: action.monitor
+      };
+    case TOGGLE_SLIDER:
+      return {
+        ...state,
+        sliderIsOpen: !state.sliderIsOpen
+      };
+    case TOGGLE_DISPATCHER:
+      return {
+        ...state,
+        dispatcherIsOpen: !state.dispatcherIsOpen
+      };
+    default:
+      return state;
+  }
+}
diff --git a/src/app/reducers/notification.js b/src/app/reducers/notification.js
new file mode 100644
index 0000000..edf2903
--- /dev/null
+++ b/src/app/reducers/notification.js
@@ -0,0 +1,16 @@
+import { SHOW_NOTIFICATION, CLEAR_NOTIFICATION, LIFTED_ACTION, ERROR } from '../constants/actionTypes';
+
+export default function notification(state = null, action) {
+  switch (action.type) {
+    case SHOW_NOTIFICATION:
+      return action.notification;
+    case ERROR:
+      return { type: ERROR, message: action.payload };
+    case LIFTED_ACTION:
+      return null;
+    case CLEAR_NOTIFICATION:
+      return null;
+    default:
+      return state;
+  }
+}
diff --git a/src/app/reducers/reports.js b/src/app/reducers/reports.js
new file mode 100644
index 0000000..92ad2e3
--- /dev/null
+++ b/src/app/reducers/reports.js
@@ -0,0 +1,37 @@
+import { UPDATE_REPORTS, GET_REPORT_SUCCESS } from '../constants/actionTypes';
+
+const initialState = {
+  data: []
+};
+
+export default function reports(state = initialState, action) {
+  if (action.type === GET_REPORT_SUCCESS) {
+    const id = action.data.id;
+    return {
+      ...state,
+      data: state.data.map(d => (d.id === id ? action.data : d))
+    };
+  } else if (action.type !== UPDATE_REPORTS) return state;
+
+  const request = action.request;
+  const data = request.data;
+  switch (request.type) {
+    case 'list':
+      return {
+        ...state,
+        data
+      };
+    case 'add':
+      return {
+        ...state,
+        data: [...state.data, data]
+      };
+    case 'remove':
+      return {
+        ...state,
+        data: state.data.filter(d => d.id !== request.id)
+      };
+    default:
+      return state;
+  }
+}
diff --git a/src/app/reducers/socket.js b/src/app/reducers/socket.js
new file mode 100644
index 0000000..d3ab21a
--- /dev/null
+++ b/src/app/reducers/socket.js
@@ -0,0 +1,93 @@
+import socketOptions from '../constants/socketOptions';
+import * as actions from '../constants/socketActionTypes';
+
+const initialState = {
+  options: socketOptions,
+  isCustom: false,
+  id: null,
+  channels: [],
+  socketState: actions.CLOSED,
+  authState: actions.PENDING,
+  authToken: null,
+  error: undefined
+};
+
+export default function socket(state = initialState, action) {
+  switch (action.type) {
+    case actions.CONNECT_REQUEST:
+      let options = state.options;
+      let isCustom = state.isCustom;
+      if (action.options) {
+        isCustom = true;
+        options = action.options;
+      }
+      return {
+        ...state,
+        isCustom,
+        options,
+        socketState: actions.CONNECTING
+      };
+    case actions.CONNECT_ERROR:
+      return {
+        ...state,
+        error: action.error
+      };
+    case actions.CONNECT_SUCCESS:
+      return {
+        ...state,
+        id: action.payload.id,
+        socketState: action.payload.socketState,
+        authState: action.payload.authState,
+        error: action.error
+      };
+    case actions.AUTH_REQUEST:
+      return {
+        ...state,
+        authState: actions.PENDING
+      };
+    case actions.AUTH_SUCCESS:
+      return {
+        ...state,
+        authState: actions.AUTHENTICATED,
+        authToken: action.authToken,
+        baseChannel: action.baseChannel
+      };
+    case actions.AUTH_ERROR:
+      return {
+        ...state,
+        authState: actions.UNAUTHENTICATED,
+        error: action.error
+      };
+    case actions.DEAUTHENTICATE:
+      return {
+        ...state,
+        authState: actions.UNAUTHENTICATED,
+        authToken: null
+      };
+    case actions.SUBSCRIBE_SUCCESS:
+      return {
+        ...state,
+        channels: [...state.channels, action.channelName]
+      };
+    case actions.UNSUBSCRIBE:
+      return {
+        ...state,
+        channels: state.channels.filter(channel =>
+          channel !== action.channelName
+        )
+      };
+    case actions.DISCONNECTED:
+      return {
+        ...initialState,
+        options: state.options
+      };
+    case actions.RECONNECT:
+      return {
+        ...state,
+        isCustom: action.isCustom,
+        options: action.isCustom ? action.options : socketOptions
+      };
+    default:
+      return state;
+  }
+}
diff --git a/src/app/reducers/test.js b/src/app/reducers/test.js
new file mode 100644
index 0000000..c183a16
--- /dev/null
+++ b/src/app/reducers/test.js
@@ -0,0 +1,36 @@
+import { TEST_ADD, TEST_EDIT, TEST_REMOVE, TEST_SELECT } from '../constants/actionTypes';
+
+const initialState = {
+  selected: 0,
+  templates: undefined
+};
+
+export default function monitor(state = initialState, action) {
+  let templates;
+  switch (action.type) {
+    case TEST_SELECT:
+      return { ...state, selected: action.selected };
+    case TEST_EDIT:
+      templates = [...(state.templates || action.templates)];
+      templates[state.selected] = action.template;
+      return { ...state, templates };
+    case TEST_ADD:
+      return {
+        ...state,
+        selected: state.templates.length,
+        templates: [...(state.templates || action.templates), action.template]
+      };
+    case TEST_REMOVE:
+      templates = state.templates || action.templates;
+      return {
+        ...state,
+        selected: 0,
+        templates: templates.length === 1 ? undefined : [
+          ...templates.slice(0, state.selected),
+          ...templates.slice(state.selected + 1)
+        ]
+      };
+    default:
+      return state;
+  }
+}
diff --git a/src/app/routed.js b/src/app/routed.js
new file mode 100644
index 0000000..82d8b89
--- /dev/null
+++ b/src/app/routed.js
@@ -0,0 +1,52 @@
+import React, { Component, PropTypes } from 'react';
+import { Provider } from 'react-redux';
+import { Router, Route, IndexRoute, hashHistory, createMemoryHistory } from 'react-router';
+import { syncHistoryWithStore } from 'react-router-redux';
+import configureStore from './store/configureStore';
+import { getMonitorSettings, getSocketSettings } from './utils/localStorage';
+import { CONNECT_REQUEST } from './constants/socketActionTypes';
+import createElement from './utils/createElement';
+import Layout from './containers/Layout';
+import App from './containers/App';
+import LogsTable from './components/reports/Table';
+
+export default class Root extends Component {
+  componentWillMount() {
+    this.store = configureStore({
+      monitor: getMonitorSettings() || this.props.monitorOptions
+    });
+    this.store.dispatch({
+      type: CONNECT_REQUEST,
+      options: getSocketSettings() || this.props.socketOptions
+    });
+
+    const history = this.props.hash ? hashHistory : createMemoryHistory(location);
+    this.history = syncHistoryWithStore(history, this.store);
+  }
+
+  render() {
+    return (
+      <Provider store={this.store}>
+        <Router history={this.history} createElement={createElement(this.props)}>
+          <Route path="/" component={Layout}>
+            <IndexRoute component={App} />
+            <Route path="reports" component={LogsTable} />
+          </Route>
+        </Router>
+      </Provider>
+    );
+  }
+}
+
+Root.propTypes = {
+  hash: PropTypes.bool,
+  socketOptions: PropTypes.shape({
+    hostname: PropTypes.string,
+    port: PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+    autoReconnect: PropTypes.bool,
+    secure: PropTypes.bool
+  }),
+  monitorOptions: PropTypes.shape({
+    selected: PropTypes.string
+  })
+};
diff --git a/src/app/store/configureStore.js b/src/app/store/configureStore.js
new file mode 100644
index 0000000..00dcca0
--- /dev/null
+++ b/src/app/store/configureStore.js
@@ -0,0 +1,28 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+import api from '../middlewares/api';
+import persist from '../middlewares/persist';
+import rootReducer from '../reducers';
+
+export default function configureStore(preloadedState) {
+  let enhancer;
+  const middlewares = applyMiddleware(api, persist());
+  if (process.env.NODE_ENV === 'production') {
+    enhancer = middlewares;
+  } else {
+    enhancer = compose(
+      middlewares,
+      window.devToolsExtension ? window.devToolsExtension() : noop => noop
+    );
+  }
+  const store = createStore(rootReducer, preloadedState, enhancer);
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextReducer = require('../reducers');
+      store.replaceReducer(nextReducer);
+    });
+  }
+
+  return store;
+}
diff --git a/src/app/store/monitorActions.js b/src/app/store/monitorActions.js
index ea55e21..97fb641 100644
--- a/src/app/store/monitorActions.js
+++ b/src/app/store/monitorActions.js
@@ -1,14 +1,35 @@
+import { stringify } from 'jsan';
 import difference from 'lodash/difference';
+import omit from 'lodash/omit';
+import { SET_STATE } from '../constants/actionTypes';
 
-export function sweep(liftedState) {
-  const state = { ...liftedState };
-  state.skippedActionIds.forEach(id => {
-    delete state.actionsById[id];
-    const idx = liftedState.stagedActionIds.indexOf(id);
-    if (idx !== -1) state.computedStates.splice(idx, 1);
-  });
-  state.stagedActionIds = difference(state.stagedActionIds, state.skippedActionIds);
-  state.skippedActionIds = [];
-  state.currentStateIndex = Math.min(state.currentStateIndex, state.stagedActionIds.length - 1);
-  return state;
+export function sweep(state) {
+  return {
+    ...state,
+    actionsById: omit(state.actionsById, state.skippedActionIds),
+    stagedActionIds: difference(state.stagedActionIds, state.skippedActionIds),
+    skippedActionIds: [],
+    currentStateIndex: Math.min(state.currentStateIndex, state.stagedActionIds.length - 1)
+  };
+}
+
+export function nonReduxDispatch(store, message, instanceId, action, initialState, preInstances) {
+  if (message !== 'DISPATCH') return initialState;
+  const instances = preInstances || store.getState().instances;
+  if (!instances.options[instanceId].lib === 'redux') return initialState;
+  const state = instances.states[instanceId];
+
+  switch (action.type) {
+    case 'TOGGLE_ACTION':
+      return stringify(state);
+    case 'JUMP_TO_STATE':
+      return stringify(state.computedStates[action.index].state);
+    case 'ROLLBACK':
+      return stringify(state.computedStates[0].state);
+    case 'SWEEP':
+      store.dispatch({ type: SET_STATE, newState: sweep(state) });
+      return undefined;
+    default:
+      return undefined;
+  }
 }
diff --git a/src/app/store/updateState.js b/src/app/store/updateState.js
index 7b80541..5314707 100644
--- a/src/app/store/updateState.js
+++ b/src/app/store/updateState.js
@@ -1,7 +1,7 @@
 import parseJSON from '../utils/parseJSON';
 import commitExcessActions from './commitExcessActions';
 
-function recompute(previousLiftedState, storeState, action, nextActionId = 1, isExcess) {
+export function recompute(previousLiftedState, storeState, action, nextActionId = 1, isExcess) {
   const actionId = nextActionId - 1;
   const liftedState = { ...previousLiftedState };
   liftedState.stagedActionIds = [...liftedState.stagedActionIds, actionId];
diff --git a/src/app/styles.js b/src/app/styles.js
index 97359da..00622a7 100644
--- a/src/app/styles.js
+++ b/src/app/styles.js
@@ -6,6 +6,12 @@ const styles = {
     display: 'flex',
     flexFlow: 'column nowrap'
   },
+  tabs: {
+    backgroundColor: 'rgb(79, 90, 101)'
+  },
+  tab: {
+    fontSize: '11px'
+  },
   sliderMonitor: {
     minWidth: '300px',
     zIndex: '0',
@@ -85,6 +91,8 @@ const styles = {
     width: '2em'
   },
   syncToggle: {
+    color: '#000',
+    fontSize: '15px',
     marginLeft: '6px'
   },
   dialogTitle: {
diff --git a/src/app/themes/dark.js b/src/app/themes/dark.js
index 0794701..8ba896e 100644
--- a/src/app/themes/dark.js
+++ b/src/app/themes/dark.js
@@ -1,7 +1,8 @@
 import {
-  cyan700,
   grey600,
-  blueGrey100, blueGrey200, blueGrey400,
+  blueGrey100,
+  blueGrey300,
+  blueGrey400,
   fullWhite,
 } from 'material-ui/styles/colors';
 import { fade } from 'material-ui/utils/colorManipulator';
@@ -11,14 +12,14 @@ export default {
   spacing,
   fontFamily: 'Roboto, sans-serif',
   palette: {
-    primary1Color: cyan700,
-    primary2Color: cyan700,
+    primary1Color: blueGrey100,
+    primary2Color: blueGrey400,
     primary3Color: grey600,
-    accent1Color: blueGrey200,
+    accent1Color: blueGrey300,
     accent2Color: blueGrey400,
     accent3Color: blueGrey100,
     textColor: fullWhite,
-    alternateTextColor: '#2A2F3A',
+    alternateTextColor: fullWhite,
     canvasColor: '#2A2F3A',
     borderColor: fade(fullWhite, 0.3),
     disabledColor: fade(fullWhite, 0.3)
diff --git a/src/app/utils/createElement.js b/src/app/utils/createElement.js
new file mode 100644
index 0000000..a97b463
--- /dev/null
+++ b/src/app/utils/createElement.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const createElement = (originalProps) => (ChildComponent, props) => (
+  <ChildComponent {...props} {...originalProps} />
+);
+
+export default createElement;
diff --git a/src/app/utils/localStorage.js b/src/app/utils/localStorage.js
index 28a0fc4..43d9140 100644
--- a/src/app/utils/localStorage.js
+++ b/src/app/utils/localStorage.js
@@ -5,7 +5,12 @@ export function getFromStorage(key) {
   return localStorage.getItem(key);
 }
 
-export function saveToStorage(key, value) {
+export function saveToStorage(key, value, remove) {
+  if (remove) {
+    localStorage.removeItem(key);
+    return null;
+  }
+
   let sValue = value;
   if (typeof value === 'object' && !localStorage.isChromeStorage) {
     sValue = JSON.stringify(value);
@@ -14,29 +19,44 @@ export function saveToStorage(key, value) {
   return value;
 }
 
-export function saveObjToStorage(remove, keys, values) {
+export function saveObjToStorage(remove, obj) {
   if (remove) {
-    keys.forEach(key => {
+    Object.keys(obj).forEach(key => {
       localStorage.removeItem('s:' + key);
     });
     return null;
   }
 
-  let obj = {};
-  keys.forEach(key => {
-    localStorage.setItem('s:' + key, values[key]);
-    obj[key] = values[key];
+  Object.keys(obj).forEach(key => {
+    localStorage.setItem('s:' + key, obj[key]);
+    obj[key] = obj[key];
   });
   return obj;
 }
 
-export function getSettings() {
-  if (!localStorage.isChromeStorage) {
-    const hostname = localStorage.getItem('s:hostname');
-    const port = localStorage.getItem('s:port');
-    let secure = localStorage.getItem('s:secure');
-    secure = secure === 'true';
-    if (hostname && port) return { hostname, port: Number(port), secure };
-  }
-  return null;
+export function getSocketSettings() {
+  if (localStorage.isChromeStorage) return undefined;
+  const hostname = localStorage.getItem('s:hostname');
+  const port = localStorage.getItem('s:port');
+  let secure = localStorage.getItem('s:secure');
+  secure = secure === 'true';
+  if (hostname && port) return { hostname, port: Number(port), secure };
+}
+
+export function getMonitorSettings() {
+  if (localStorage.isChromeStorage) return undefined;
+  return {
+    selected: localStorage.getItem('monitor') || 'InspectorMonitor',
+    sliderIsOpen: localStorage.getItem('slider') === 'true',
+    dispatcherIsOpen: localStorage.getItem('dispatcher') === 'true'
+  };
+}
+
+export function getTestTemplates() {
+  const templates = getFromStorage('test-templates');
+  return templates && JSON.parse(templates);
+}
+
+export function getTemplatesSelected() {
+  return Number(getFromStorage('test-templates-sel')) || 0;
 }
diff --git a/src/chromeApp/window.js b/src/chromeApp/window.js
index 8f471b3..1f0231e 100644
--- a/src/chromeApp/window.js
+++ b/src/chromeApp/window.js
@@ -3,7 +3,7 @@ import { render } from 'react-dom';
 import App from '../app';
 
 chrome.storage.local.get({
-  'select-monitor': 'InspectorMonitor',
+  'monitor': 'InspectorMonitor',
   'test-templates': null,
   'test-templates-sel': null,
   's:hostname': null,
@@ -12,10 +12,9 @@ chrome.storage.local.get({
 }, options => {
   render(
     <App
-      selectMonitor={options['select-monitor']}
+      selectMonitor={options.monitor}
       testTemplates={options['test-templates']}
       selectedTemplate={options['test-templates-sel']}
-      testTemplates={options['test-templates']}
       useCodemirror
       socketOptions={
         options['s:hostname'] && options['s:port'] ?
diff --git a/src/views/index.jade b/src/views/index.jade
index f5da63d..23fa4ed 100644
--- a/src/views/index.jade
+++ b/src/views/index.jade
@@ -13,6 +13,8 @@ html
         font-size: 100%;
         margin: 0;
         padding: 0;
+        background-color: rgb(53, 59, 70);
+        color: #fff;
       }
       #root {
         height: 100%;
@@ -21,9 +23,6 @@ html
         overflow: auto;
         height: 100%;
       }
-      .CodeMirror {
-        height: 100% !important;
-      }
     link(href='/css/codemirror.css', rel="stylesheet")
     link(href='/css/night.css', rel="stylesheet")
   body
diff --git a/src/web/index.js b/src/web/index.js
index d9b0e2b..81e085b 100644
--- a/src/web/index.js
+++ b/src/web/index.js
@@ -3,6 +3,6 @@ import { render } from 'react-dom';
 import App from '../app';
 
 render(
-  <App useCodemirror />,
+  <App hash useCodemirror />,
   document.getElementById('root')
 );