diff --git a/package.json b/package.json
index 1a44727328805503bce94a36a9444701d9f779da..20f1fa6b84e32b84cc6c0a419bff258e5aa72bba 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@parity/api": "^2.1.22",
-    "@parity/light.js": "https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45",
+    "@parity/light.js": "https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828",
     "axios": "^0.18.0",
     "electron": "^2.0.0",
     "electron-dl": "^1.11.0",
diff --git a/src/App/App.js b/src/App/App.js
index 795d191e8861c0c642afed2b72af7e2e06b049ed..195acad96d8000597bd0373da41b37d0385b2c7e 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 import { BrowserRouter, MemoryRouter, Route, Link } from 'react-router-dom';
 
 import CreateAccount from '../Accounts/CreateAccount';
+import Health from '../Health';
 import Loading from '../Loading';
 import ProtectedRoute from './ProtectedRoute';
 import Receive from '../Receive';
@@ -42,6 +43,7 @@ class App extends Component {
               <ProtectedRoute path='/accounts/new' component={CreateAccount} />
 
               <nav className='primary-nav'>
+                <Health />
                 <Link to='/'>Home</Link>
                 {/* @brian Putting a <Link> here for ease of use for us,
                 but I'll let you decided how/when to show the Signer component */}
diff --git a/src/Health/Health.css b/src/Health/Health.css
new file mode 100644
index 0000000000000000000000000000000000000000..a473d63d0bf99355bf05bd310b696e5fc555104a
--- /dev/null
+++ b/src/Health/Health.css
@@ -0,0 +1,29 @@
+/* @brian all this css is taken from https://www.w3schools.com/css/css_tooltip.asp
+feel free to remove all this */
+
+/* Tooltip container */
+.tooltip {
+  flex-grow: 1;
+  position: relative;
+  display: inline-block;
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
diff --git a/src/Health/Health.js b/src/Health/Health.js
new file mode 100644
index 0000000000000000000000000000000000000000..81adfd6b8a0179a0876136f2ebd861b7d3920c1f
--- /dev/null
+++ b/src/Health/Health.js
@@ -0,0 +1,79 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { nodeHealth$, syncing$ } from '@parity/light.js';
+
+import light from '../hoc';
+import './Health.css';
+
+export const STATUS_OK = 'ok';
+export const STATUS_WARN = 'needsAttention';
+export const STATUS_BAD = 'bad';
+
+/**
+ * Calculate the average health.
+ * It's currently here too: https://github.com/parity-js/mobx/blob/master/src/parity/nodeHealth.js
+ * and here https://github.com/parity-js/shared/blob/43837f3a6a8fe84f5e756b4df1643b28eea00dc0/src/redux/providers/statusReducer.js
+ * TODO Factorize this.
+ */
+const averageHealth = nodeHealth => {
+  if (!nodeHealth || !Object.keys(nodeHealth).length) {
+    return {
+      status: STATUS_BAD,
+      message: ['Unable to fetch node health.']
+    };
+  }
+
+  // Find out if there are bad statuses
+  const bad = Object.values(nodeHealth)
+    .filter(x => x)
+    .map(({ status }) => status)
+    .find(s => s === STATUS_BAD);
+  // Find out if there are needsAttention statuses
+  const needsAttention = Object.keys(nodeHealth)
+    .filter(key => key !== 'time')
+    .map(key => nodeHealth[key])
+    .filter(x => x)
+    .map(({ status }) => status)
+    .find(s => s === STATUS_WARN);
+  // Get all non-empty messages from all statuses
+  const message = Object.values(nodeHealth)
+    .map(({ message }) => message)
+    .filter(x => x);
+
+  return {
+    status: bad || needsAttention || STATUS_OK,
+    message
+  };
+};
+
+@light({
+  nodeHealth: nodeHealth$,
+  syncing: syncing$
+})
+class Health extends Component {
+  render () {
+    const { nodeHealth, syncing } = this.props;
+    const { message, status } = averageHealth(nodeHealth);
+
+    return (
+      <p className='tooltip'>
+        {status}
+        <span className='tooltiptext'>
+          {status !== STATUS_OK && <span>{message}</span>}
+          {syncing && <span>Syncing: {JSON.stringify(syncing)}</span>}
+          {nodeHealth && (
+            <span>
+              Peers: {nodeHealth.peers.details[0]}/{nodeHealth.peers.details[1]}
+            </span>
+          )}
+        </span>
+      </p>
+    );
+  }
+}
+
+export default Health;
diff --git a/src/Health/index.js b/src/Health/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e81ce42cd32ce0056c443300b1d013b6306a90e
--- /dev/null
+++ b/src/Health/index.js
@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import Health from './Health';
+
+export default Health;
diff --git a/src/Tokens/Tokens.js b/src/Tokens/Tokens.js
index 5e79fc3c46980cb4d96cf6fe960c9689acc56ab7..13407eaa9d1ba1704f91282d13a240749b75790f 100644
--- a/src/Tokens/Tokens.js
+++ b/src/Tokens/Tokens.js
@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import { defaultAccount$, nodeHealth$ } from '@parity/light.js';
+import { defaultAccount$ } from '@parity/light.js';
 import { Redirect } from 'react-router-dom';
 
 import EthBalance from './EthBalance';
@@ -15,14 +15,12 @@ import TokenBalance from './TokenBalance';
 @inject('parityStore', 'tokensStore')
 @observer
 @light({
-  me: defaultAccount$,
-  nodeHealth: nodeHealth$
+  me: defaultAccount$
 })
 class Tokens extends Component {
   render () {
     const {
       me,
-      nodeHealth,
       parityStore: { isApiConnected },
       tokensStore: { tokens }
     } = this.props;
@@ -44,43 +42,6 @@ class Tokens extends Component {
                 )}
               </li>
             ))}
-
-          {/* @brian the following 3 <li> are just to show what data I have from the backend, remove them whenever you want */}
-          <li>
-            <p>1. DL and install parity Status</p>
-
-            <pre>OK, parity installed and running</pre>
-          </li>
-
-          {nodeHealth && (
-            <li>
-              <p>2. Overall node health status</p>
-              <pre>
-                PEERS: {nodeHealth.peers.status} {nodeHealth.peers.details[0]}/{
-                  nodeHealth.peers.details[1]
-                }
-                <br />SYNC: {nodeHealth.sync.status}
-                <br />TIMESYNC: {nodeHealth.time.status}
-              </pre>
-              <p>
-                Note: I can make a small algorithm which outputs the average
-                health with 3 states: OK, ALRIGHT, and BAD
-              </p>
-            </li>
-          )}
-
-          {nodeHealth && (
-            <li>
-              <p>
-                3. When SYNC above is false, we have the syncing progress to
-                give an idea how much time it'll take
-              </p>
-              <pre>
-                "startingBlock": 900<br />"currentBlock": 902<br />
-                "highestBlock": 1108
-              </pre>
-            </li>
-          )}
         </ul>
       </div>
     );
diff --git a/yarn.lock b/yarn.lock
index 07e4c8565f22241a8c561fcad1e5d51ade4f4493..fa6a079aa7fb612d004e389085aa2b4773180fff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -122,9 +122,9 @@
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/@parity/jsonrpc/-/jsonrpc-2.1.6.tgz#260bbe7dfcec18d59f0bf1668dfd6021452d6452"
 
-"@parity/light.js@https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45":
+"@parity/light.js@https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828":
   version "1.0.0"
-  resolved "https://github.com/parity-js/light.js#f62bb37782ed32eb74a8bb0cc428632d3a8c6d45"
+  resolved "https://github.com/parity-js/light.js#c531c68b5268a1bf7aba1f43424f440b2bde7828"
   dependencies:
     "@babel/runtime" "^7.0.0-beta.46"
     "@parity/api" "^2.1.22"