diff --git a/package.json b/package.json
index f074e45..0d3466f 100644
--- a/package.json
+++ b/package.json
@@ -53,21 +53,22 @@
     "glamor": "2.20.18",
     "lodash": "^4.16.2",
     "react-dock": "^0.2.4",
-    "react-draggable": "2.2.3",
-    "react-icons": "2.2.2",
-    "react-json-tree": "0.9.0",
-    "react-tooltip": "^3.2.1"
+    "react-draggable": "^3.0.3",
+    "react-icons": "^2.2.7",
+    "react-json-tree": "^0.10.9",
+    "react-tooltip": "^3.3.1"
   },
   "peerDependencies": {
     "mobx": "^2.5.0 || ^3.0.0",
-    "mobx-react": "^4.0.0",
+    "mobx-react": "^3.0.0 || ^4.0.0",
     "mobx-react-form": "^1.x.x",
-    "react": "^15.3.2"
+    "prop-types": "^15.6.0",
+    "react": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
     "babel-cli": "6.18.0",
     "babel-core": "6.21.0",
-    "babel-eslint": "7.1.1",
+    "babel-eslint": "^8.0.1",
     "babel-loader": "6.2.10",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-lodash": "3.2.11",
@@ -81,19 +82,20 @@
     "codecov": "1.0.1",
     "commitizen": "2.9.2",
     "cz-conventional-changelog": "1.2.0",
-    "eslint": "3.12.2",
-    "eslint-config-airbnb": "13.0.0",
-    "eslint-config-airbnb-base": "^11.3.2",
+    "eslint": "^4.8.0",
+    "eslint-config-airbnb": "^16.0.0",
+    "eslint-config-airbnb-base": "^12.0.2",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "^7.3.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
     "husky": "^0.12.0",
-    "mobx": "2.7.0",
+    "mobx": "^3.3.1",
     "mocha": "3.2.0",
     "npm-run-all": "3.1.2",
     "nyc": "10.0.0",
-    "react": "15.4.1",
-    "react-dom": "15.4.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "rimraf": "2.5.4",
     "semantic-release": "^7.0.2",
     "webpack": "1.14.0"
diff --git a/src/components/RenderFormData.jsx b/src/components/RenderFormData.jsx
index 889472b..141b038 100644
--- a/src/components/RenderFormData.jsx
+++ b/src/components/RenderFormData.jsx
@@ -31,16 +31,18 @@ export default observer(({ store, handlers }) => (
         hideRoot
         data={parseFormData(store.selected.form)}
         theme={store.theme}
-        isLightTheme={false}
+        invertTheme={false}
       />}
     <h4 className={style.heading}>
       <Icons.FaBars className={style.icon} /> Fields
     </h4>
-    <JSONTree
-      hideRoot
-      data={parseFieldsData(store.selected.form.fields)}
-      theme={store.theme}
-      isLightTheme={false}
-    />
+    <div className={style.container}>
+      <JSONTree
+        hideRoot
+        data={parseFieldsData(store.selected.form.fields)}
+        theme={store.theme}
+        invertTheme={false}
+      />
+    </div>
   </div>
 ));
diff --git a/src/components/SelectInitialForm.jsx b/src/components/SelectInitialForm.jsx
index 4b2b0dd..6c9afc5 100644
--- a/src/components/SelectInitialForm.jsx
+++ b/src/components/SelectInitialForm.jsx
@@ -11,13 +11,13 @@ export default observer(({ store, handlers }) => (
   <div>
     <h4>SELECT A FORM</h4>
     {mapo(store.menu, (key, val) =>
-      (<button
+      // eslint-disable-next-line
+      <button
         key={key}
         value={key}
         className={merge($U.button, style.btn)}
         onClick={handlers.handleInitialFormSelect}
-      >
-        <Icons.FaCircleO className={style.icon} /> {val}
-      </button>))}
+      ><Icons.FaCircleO className={style.icon} /> {val}
+      </button>)}
   </div>
 ));
diff --git a/src/styles/RenderFormData.js b/src/styles/RenderFormData.js
index a066b52..3b8cdbb 100644
--- a/src/styles/RenderFormData.js
+++ b/src/styles/RenderFormData.js
@@ -2,6 +2,9 @@ import { style } from 'glamor';
 import theme from './_.theme';
 
 export default {
+  container: style({
+    marginLeft: '10px',
+  }),
   heading: style({
     color: theme.base00,
     padding: '10px',