diff --git a/flow-typed/react-i18next.js b/flow-typed/react-i18next.js
index 2b7dec5bdb82..1cd03aec061e 100644
--- a/flow-typed/react-i18next.js
+++ b/flow-typed/react-i18next.js
@@ -12,6 +12,7 @@ declare type I18Next$Translate = (key: string, config: I18Next$Translate$Config)
 declare module 'react-i18next' {
   declare module.exports: {
     I18nextProvider: React$StatelessFunctionalComponent<*>,
+    Trans: React$StatelessFunctionalComponent<*>,
     reactI18nextModule: {},
     translate: (context: string | Array<string>) => (component: React$Component<*> | React$StatelessFunctionalComponent<*>) => React$StatelessFunctionalComponent<*>
   }
diff --git a/packages/app-explorer/package.json b/packages/app-explorer/package.json
index d098d0146717..ea3800868811 100644
--- a/packages/app-explorer/package.json
+++ b/packages/app-explorer/package.json
@@ -16,11 +16,12 @@
     "@polkadot/primitives": "^0.10.3",
     "@polkadot/primitives-codec": "^0.10.3",
     "@polkadot/primitives-json": "^0.10.3",
-    "@polkadot/rx-react": "^0.2.20",
+    "@polkadot/rx-react": "^0.3.6",
     "@polkadot/util": "^0.19.2",
     "@polkadot/util-crypto": "^0.19.2",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
+    "react-i18next": "^7.5.1",
     "semantic-ui-css": "^2.3.1",
     "semantic-ui-react": "^0.79.1"
   }
diff --git a/packages/app-explorer/src/App/index.js b/packages/app-explorer/src/App/index.js
index 3562deea6802..0b21096233a3 100644
--- a/packages/app-explorer/src/App/index.js
+++ b/packages/app-explorer/src/App/index.js
@@ -8,6 +8,7 @@ import type { BaseProps } from '@polkadot/portal/types';
 import './App.css';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import BestNumber from '@polkadot/rx-react/BestNumber';
 
 import BestHash from '../BestHash';
@@ -15,7 +16,7 @@ import BlockHeaders from '../BlockHeaders';
 
 type Props = BaseProps & {};
 
-export default function App ({ className, style }: Props): React$Node {
+function App ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={['explorer--App', className].join(' ')}
@@ -23,10 +24,14 @@ export default function App ({ className, style }: Props): React$Node {
     >
       <BestNumber
         className='explorer--App-BestNumber'
-        label='best #'
+        label={t('app.bestNumber', {
+          defaultValue: 'best #'
+        })}
       />
       <BestHash className='explorer--App-BestHash' />
       <BlockHeaders />
     </div>
   );
 }
+
+export default translate(['explorer'])(App);
diff --git a/packages/app-explorer/src/BestHash.js b/packages/app-explorer/src/BestHash.js
index 8336f8061894..aafa7ce595e0 100644
--- a/packages/app-explorer/src/BestHash.js
+++ b/packages/app-explorer/src/BestHash.js
@@ -7,6 +7,7 @@ import type { Header } from '@polkadot/primitives/header';
 import type { BaseProps } from './types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import headerHash from '@polkadot/primitives-codec/header/hash';
 import withApiCall from '@polkadot/rx-react/with/apiCall';
 import u8aToHexShort from '@polkadot/util/u8a/toHexShort';
@@ -31,7 +32,7 @@ function BestHash ({ className, style, value }: Props): React$Node {
 }
 
 export default withApiCall(
-  BestHash,
+  translate(['explorer'])(BestHash),
   {
     method: 'newHead',
     section: 'chain'
diff --git a/packages/app-explorer/src/BlockHeader/index.js b/packages/app-explorer/src/BlockHeader/index.js
index 4d0ddb7dfaf2..c0859f8148d4 100644
--- a/packages/app-explorer/src/BlockHeader/index.js
+++ b/packages/app-explorer/src/BlockHeader/index.js
@@ -9,6 +9,7 @@ import type { BaseProps } from '../types';
 import './BlockHeader.css';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import headerHash from '@polkadot/primitives-codec/header/hash';
 import u8aToHex from '@polkadot/util/u8a/toHex';
 
@@ -17,7 +18,7 @@ type Props = BaseProps & {
   value?: Header
 };
 
-export default function BlockHeader ({ className, label = '#', value, style }: Props): React$Node {
+function BlockHeader ({ className, label = '#', value, style }: Props): React$Node {
   if (!value) {
     return null;
   }
@@ -63,3 +64,5 @@ export default function BlockHeader ({ className, label = '#', value, style }: P
     </div>
   );
 }
+
+export default translate(['explorer'])(BlockHeader);
diff --git a/packages/app-explorer/src/BlockHeaders/index.js b/packages/app-explorer/src/BlockHeaders/index.js
index 164362b70fb4..7f722f7dc19e 100644
--- a/packages/app-explorer/src/BlockHeaders/index.js
+++ b/packages/app-explorer/src/BlockHeaders/index.js
@@ -7,6 +7,7 @@ import type { Header } from '@polkadot/primitives/header';
 import type { BaseProps } from '../types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import withApiCall from '@polkadot/rx-react/with/apiCall';
 
 import BlockHeader from '../BlockHeader';
@@ -36,7 +37,7 @@ function BlockHeaders ({ className, style, value }: Props): React$Node {
 }
 
 export default withApiCall(
-  BlockHeaders,
+  translate(['explorer'])(BlockHeaders),
   {
     method: 'newHead',
     section: 'chain'
diff --git a/packages/app-explorer/src/types.js b/packages/app-explorer/src/types.js
index 0bd6e60296f7..c61fac7fbbb7 100644
--- a/packages/app-explorer/src/types.js
+++ b/packages/app-explorer/src/types.js
@@ -7,5 +7,6 @@ export type BaseProps = {
   className?: string,
   style?: {
     [string]: string
-  }
+  },
+  t: I18Next$Translate
 };
diff --git a/packages/app-extrinsics/package.json b/packages/app-extrinsics/package.json
index 91e45cb1362c..34d0528fdc97 100644
--- a/packages/app-extrinsics/package.json
+++ b/packages/app-extrinsics/package.json
@@ -13,13 +13,14 @@
     "test": "react-scripts test --env=jsdom --coverage"
   },
   "devDependencies": {
-    "@polkadot/rx-react": "^0.2.20",
-    "@polkadot/ui-react": "^0.9.10",
+    "@polkadot/rx-react": "^0.3.6",
+    "@polkadot/ui-react": "^0.9.11",
     "@polkadot/util": "^0.19.2",
     "@polkadot/util-keyring": "^0.19.2",
     "prop-types": "^15.6.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
+    "react-i18next": "^7.5.1",
     "semantic-ui-css": "^2.3.1",
     "semantic-ui-react": "^0.79.1"
   }
diff --git a/packages/app-extrinsics/src/Account.js b/packages/app-extrinsics/src/Account.js
index 380fb627f466..9aae78d48332 100644
--- a/packages/app-extrinsics/src/Account.js
+++ b/packages/app-extrinsics/src/Account.js
@@ -6,6 +6,7 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 import Balance from '@polkadot/rx-react/Balance';
 import withObservableParams from '@polkadot/rx-react/with/observableParams';
@@ -17,7 +18,7 @@ type Props = BaseProps & {
   subject: rxjs$BehaviorSubject<*>
 };
 
-export default function Account ({ className, label, subject, style }: Props): React$Node {
+function Account ({ className, label, subject, style, t }: Props): React$Node {
   const AccountBalance = withObservableParams(Balance, subject);
 
   return (
@@ -33,7 +34,11 @@ export default function Account ({ className, label, subject, style }: Props): R
         />
       </div>
       <div className='small'>
-        <Label>with an available balance of</Label>
+        <Label>
+          {t('account.balance', {
+            defaultValue: 'with an available balance of'
+          })}
+        </Label>
         <AccountBalance
           className='ui disabled dropdown selection'
           classNameUpdated='hasUpdated'
@@ -42,3 +47,5 @@ export default function Account ({ className, label, subject, style }: Props): R
     </div>
   );
 }
+
+export default translate(['extrinsics'])(Account);
diff --git a/packages/app-extrinsics/src/App.js b/packages/app-extrinsics/src/App.js
index 85a8c1f801a8..07df6003dd08 100644
--- a/packages/app-extrinsics/src/App.js
+++ b/packages/app-extrinsics/src/App.js
@@ -6,6 +6,7 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
 import CallDisplay from './CallDisplay';
 import CallSelect from './CallSelect';
@@ -15,7 +16,7 @@ import Signer from './Signer';
 
 type Props = BaseProps & {};
 
-export default function App ({ className, style }: Props) {
+function App ({ className, style }: Props): React$Node {
   return (
     <div
       className={['extrinsics--App', className].join(' ')}
@@ -29,3 +30,5 @@ export default function App ({ className, style }: Props) {
     </div>
   );
 }
+
+export default translate(['extrinsics'])(App);
diff --git a/packages/app-extrinsics/src/CallDisplay/Error.js b/packages/app-extrinsics/src/CallDisplay/Error.js
index 100201fcc412..4d374b01d3b5 100644
--- a/packages/app-extrinsics/src/CallDisplay/Error.js
+++ b/packages/app-extrinsics/src/CallDisplay/Error.js
@@ -8,14 +8,19 @@ import type { BaseProps } from '../types';
 import './CallDisplay.css';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
-export default function Error ({ className, style }: BaseProps): React$Node {
+function ErrorDisplay ({ className, style, t }: BaseProps): React$Node {
   return (
     <div
       className={['extrinsics--CallDisplay-error', className].join(' ')}
       style={style}
     >
-      ERROR: Invalid or unimplemented extrinsic function
+      {t('calldisplay.error', {
+        defaultValue: 'ERROR: Invalid or unimplemented extrinsic function'
+      })}
     </div>
   );
 }
+
+export default translate(['extrinsics'])(ErrorDisplay);
diff --git a/packages/app-extrinsics/src/CallDisplay/index.js b/packages/app-extrinsics/src/CallDisplay/index.js
index 40df417a3ffa..1ef2edc613d6 100644
--- a/packages/app-extrinsics/src/CallDisplay/index.js
+++ b/packages/app-extrinsics/src/CallDisplay/index.js
@@ -8,6 +8,7 @@ import type { BaseProps } from '../types';
 import './CallDisplay.css';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import Button from 'semantic-ui-react/dist/es/elements/Button';
 import withObservable from '@polkadot/rx-react/with/observable';
 
@@ -32,7 +33,7 @@ const COMPONENTS = {
   'staking_unstake': StakingUnstake
 };
 
-function CallDisplay ({ className, style, value }: Props): React$Node {
+function CallDisplay ({ className, style, t, value }: Props): React$Node {
   // flowlint-next-line sketchy-null-string:off
   if (!value) {
     return null;
@@ -55,10 +56,15 @@ function CallDisplay ({ className, style, value }: Props): React$Node {
         onClick={onSubmit}
         primary
       >
-        Submit Extrinsic
+        {t('calldisplay.submit', {
+          defaultValue: 'Submit Extrinsic'
+        })}
       </Button>
     </div>
   );
 }
 
-export default withObservable(CallDisplay, extrinsicName);
+export default withObservable(
+  translate(['extrinsics'])(CallDisplay),
+  extrinsicName
+);
diff --git a/packages/app-extrinsics/src/CallSelect/index.js b/packages/app-extrinsics/src/CallSelect/index.js
index f79230527c8b..e0f2f667b206 100644
--- a/packages/app-extrinsics/src/CallSelect/index.js
+++ b/packages/app-extrinsics/src/CallSelect/index.js
@@ -8,6 +8,7 @@ import type { BaseProps } from '../types';
 import './CallSelect.css';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 
@@ -39,14 +40,18 @@ extrinsics.sections.forEach(({ description, methods, name }) => {
   });
 });
 
-export default function CallSelect ({ className, style }: Props) {
+function CallSelect ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={['extrinsics--CallSelect', 'extrinsics--split', className].join(' ')}
       style={style}
     >
       <div className='large'>
-        <Label>submit the following extrinsic</Label>
+        <Label>
+          {t('callselect.label', {
+            defaultValue: 'submit the following extrinsic'
+          })}
+        </Label>
         <Dropdown
           selection
           onChange={onChange}
@@ -56,3 +61,5 @@ export default function CallSelect ({ className, style }: Props) {
     </div>
   );
 }
+
+export default translate(['extrinsics'])(CallSelect);
diff --git a/packages/app-extrinsics/src/InputAddress/PairDisplay.js b/packages/app-extrinsics/src/InputAddress/PairDisplay.js
index 831511d12151..0826762f8142 100644
--- a/packages/app-extrinsics/src/InputAddress/PairDisplay.js
+++ b/packages/app-extrinsics/src/InputAddress/PairDisplay.js
@@ -9,6 +9,7 @@ import type { BaseProps } from '../types';
 import './PairDisplay.css';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import u8aToHex from '@polkadot/util/u8a/toHex';
 
@@ -16,7 +17,7 @@ type Props = BaseProps & {
   pair: KeyringPair
 };
 
-export default function PairDisplay ({ className, pair, style }: Props): React$Node {
+function PairDisplay ({ className, pair, style }: Props): React$Node {
   const publicKey = pair.publicKey();
   const { name } = pair.getMeta();
 
@@ -26,9 +27,9 @@ export default function PairDisplay ({ className, pair, style }: Props): React$N
       style={style}
     >
       <IdentityIcon
-        address={publicKey}
         className='ui--InputyAddress-PairDisplay-icon'
         size={32}
+        value={publicKey}
       />
       <div className='ui--InputyAddress-PairDisplay-name'>
         {name}
@@ -39,3 +40,5 @@ export default function PairDisplay ({ className, pair, style }: Props): React$N
     </div>
   );
 }
+
+export default translate(['extrinsics'])(PairDisplay);
diff --git a/packages/app-extrinsics/src/InputAddress/index.js b/packages/app-extrinsics/src/InputAddress/index.js
index e00a0573e513..c7b87811cbc6 100644
--- a/packages/app-extrinsics/src/InputAddress/index.js
+++ b/packages/app-extrinsics/src/InputAddress/index.js
@@ -8,6 +8,7 @@ import type { BaseProps } from '../types';
 import './InputAddress.css';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import Dropdown from 'semantic-ui-react/dist/es/modules/Dropdown';
 
 import PairDisplay from './PairDisplay';
@@ -31,7 +32,7 @@ const options = keyring.getPairs().map((pair) => {
   };
 });
 
-export default function InputAddress (props: Props): React$Node {
+function InputAddress (props: Props): React$Node {
   // eslint-disable-next-line no-unused-vars
   const onChange = (event: SyntheticEvent<*>, { value }): void => {
     if (props.subject) {
@@ -49,3 +50,5 @@ export default function InputAddress (props: Props): React$Node {
     />
   );
 }
+
+export default translate(['extrinsics'])(InputAddress);
diff --git a/packages/app-extrinsics/src/Nonce.js b/packages/app-extrinsics/src/Nonce.js
index 598e2c756dfe..b5a006db961a 100644
--- a/packages/app-extrinsics/src/Nonce.js
+++ b/packages/app-extrinsics/src/Nonce.js
@@ -6,6 +6,7 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 import RxNonce from '@polkadot/rx-react/Nonce';
 import withObservableParams from '@polkadot/rx-react/with/observableParams';
@@ -16,14 +17,18 @@ type Props = BaseProps & {};
 
 const SenderNonce = withObservableParams(RxNonce, senderAddr);
 
-export default function Nonce ({ className, style }: Props) {
+function Nonce ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={['extrinsics--split', className].join(' ')}
       style={style}
     >
       <div className='small'>
-        <Label>with an index</Label>
+        <Label>
+          {t('nonce.label', {
+            defaultValue: 'with an index'
+          })}
+        </Label>
         <SenderNonce
           className='ui disabled dropdown selection'
           classNameUpdated='hasUpdated'
@@ -33,3 +38,5 @@ export default function Nonce ({ className, style }: Props) {
     </div>
   );
 }
+
+export default translate(['extrinsics'])(Nonce);
diff --git a/packages/app-extrinsics/src/Recipient.js b/packages/app-extrinsics/src/Recipient.js
index 9ab66ad94e92..ac1e54d27d4a 100644
--- a/packages/app-extrinsics/src/Recipient.js
+++ b/packages/app-extrinsics/src/Recipient.js
@@ -6,19 +6,24 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
 import Account from './Account';
 import { recipientAddr } from './subjects';
 
 type Props = BaseProps & {};
 
-export default function Recipient (props: Props) {
+function Recipient (props: Props): React$Node {
   return (
     <Account
       {...props}
       className={['extrinsics--Recipient', props.className].join(' ')}
-      label='to the recipient'
+      label={props.t('recipient.label', {
+        defaultValue: 'to the recipient'
+      })}
       subject={recipientAddr}
     />
   );
 }
+
+export default translate(['extrinsics'])(Recipient);
diff --git a/packages/app-extrinsics/src/Sender.js b/packages/app-extrinsics/src/Sender.js
index d1e6616b6f02..709cc915acba 100644
--- a/packages/app-extrinsics/src/Sender.js
+++ b/packages/app-extrinsics/src/Sender.js
@@ -6,19 +6,24 @@
 import type { BaseProps } from './types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
 import Account from './Account';
 import { senderAddr } from './subjects';
 
 type Props = BaseProps & {};
 
-export default function Sender (props: Props) {
+function Sender (props: Props): React$Node {
   return (
     <Account
       {...props}
       className={['extrinsics--Sender', props.className].join(' ')}
-      label='using the selected account'
+      label={props.t('sender.label', {
+        defaultValue: 'using the selected account'
+      })}
       subject={senderAddr}
     />
   );
 }
+
+export default translate(['extrinsics'])(Sender);
diff --git a/packages/app-extrinsics/src/Signer/Extrinsic.js b/packages/app-extrinsics/src/Signer/Extrinsic.js
index 0440eb9c1bd0..90279c93c22e 100644
--- a/packages/app-extrinsics/src/Signer/Extrinsic.js
+++ b/packages/app-extrinsics/src/Signer/Extrinsic.js
@@ -6,6 +6,7 @@
 import type { BaseProps, QueueTx } from '../types';
 
 import React from 'react';
+import { Trans, translate } from 'react-i18next';
 import Modal from 'semantic-ui-react/dist/es/modules/Modal';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import u8aToHex from '@polkadot/util/u8a/toHex';
@@ -15,7 +16,9 @@ type Props = BaseProps & {
   value: QueueTx
 };
 
-export default function Extrinsic ({ className, style, value: { message, method, publicKey } }: Props): React$Node {
+function Extrinsic ({ className, style, t, value: { message, method, publicKey } }: Props): React$Node {
+  const from = u8aToHexShort(publicKey);
+
   return (
     <Modal.Content
       className={['extrinsics--Signer-Extrinsic', className].join(' ')}
@@ -23,15 +26,25 @@ export default function Extrinsic ({ className, style, value: { message, method,
     >
       <div className='body'>
         <IdentityIcon
-          address={publicKey}
           className='icon'
+          value={publicKey}
         />
         <div className='expanded'>
-          <p>You are about to sign a message from <span className='code'>{u8aToHexShort(publicKey)}</span> calling <span className='code'>{method}</span></p>
-          <p>The encoded message to be signed contains the data</p>
+          <p>
+            <Trans i18nkey='extrinsic.short'>
+              You are about to sign a message from <span className='code'>{from}</span> calling <span className='code'>{method}</span>
+            </Trans>
+          </p>
+          <p>
+            {t('extrinsic.data', {
+              defaultValue: 'The encoded message to be signed contains the data'
+            })}
+          </p>
           <p className='code'>{u8aToHex(message)}</p>
         </div>
       </div>
     </Modal.Content>
   );
 }
+
+export default translate(['extrinsics'])(Extrinsic);
diff --git a/packages/app-extrinsics/src/Signer/index.js b/packages/app-extrinsics/src/Signer/index.js
index d42b5b45a3d6..4eddfcad85b2 100644
--- a/packages/app-extrinsics/src/Signer/index.js
+++ b/packages/app-extrinsics/src/Signer/index.js
@@ -9,6 +9,7 @@ import './Signer.css';
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import { translate } from 'react-i18next';
 import Button from 'semantic-ui-react/dist/es/elements/Button';
 import Modal from 'semantic-ui-react/dist/es/modules/Modal';
 import withObservable from '@polkadot/rx-react/with/observable';
@@ -21,7 +22,7 @@ type Props = BaseProps & {
   value?: QueueTx
 };
 
-function Signer ({ className, style, value }: Props, { api }: BaseContext): React$Node {
+function Signer ({ className, style, t, value }: Props, { api }: BaseContext): React$Node {
   if (!value) {
     return null;
   }
@@ -40,17 +41,25 @@ function Signer ({ className, style, value }: Props, { api }: BaseContext): Reac
       open
       style={style}
     >
-      <Modal.Header>Sign and submit</Modal.Header>
+      <Modal.Header>
+        {t('signer.header', {
+          defaultValue: 'Sign and submit'
+        })}
+      </Modal.Header>
       <Extrinsic value={value} />
       <Modal.Actions>
         <Button onClick={onClose}>
-          Cancel
+          {t('signer.cancel', {
+            defaultValue: 'Cancel'
+          })}
         </Button>
         <Button
           onClick={onSign}
           primary
         >
-          Sign and Submit
+          {t('signer.send', {
+            defaultValue: 'Sign and Submit'
+          })}
         </Button>
       </Modal.Actions>
     </Modal>
@@ -61,4 +70,7 @@ Signer.contextTypes = {
   api: PropTypes.object
 };
 
-export default withObservable(Signer, queueTx);
+export default withObservable(
+  translate(['extrinsics'])(Signer),
+  queueTx
+);
diff --git a/packages/app-extrinsics/src/Staking/Stake/index.js b/packages/app-extrinsics/src/Staking/Stake/index.js
index 136cc3309ae4..0253f9c649ce 100644
--- a/packages/app-extrinsics/src/Staking/Stake/index.js
+++ b/packages/app-extrinsics/src/Staking/Stake/index.js
@@ -6,12 +6,13 @@
 import type { BaseProps } from '../../types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
 import getValues from './getValues';
 
 type Props = BaseProps & {};
 
-function StakingStake ({ className, style }: Props) {
+function StakingStake ({ className, style }: Props): React$Node {
   return (
     <div
       className={['extrinsics--StakingStake', className].join(' ')}
@@ -22,4 +23,4 @@ function StakingStake ({ className, style }: Props) {
 
 StakingStake.getValues = getValues;
 
-export default StakingStake;
+export default translate(['extrinsics'])(StakingStake);
diff --git a/packages/app-extrinsics/src/Staking/Transfer/Amount.js b/packages/app-extrinsics/src/Staking/Transfer/Amount.js
index 709b12683173..603f6bb88256 100644
--- a/packages/app-extrinsics/src/Staking/Transfer/Amount.js
+++ b/packages/app-extrinsics/src/Staking/Transfer/Amount.js
@@ -7,6 +7,7 @@ import type { BaseProps } from '../../types';
 
 import BN from 'bn.js';
 import React from 'react';
+import { translate } from 'react-i18next';
 import Input from 'semantic-ui-react/dist/es/elements/Input';
 import Label from 'semantic-ui-react/dist/es/elements/Label';
 
@@ -21,16 +22,20 @@ const onChange = (event: SyntheticEvent<*>, { value }): void => {
   );
 };
 
-export default function Amount ({ className, style }: Props) {
+function Amount ({ className, style, t }: Props): React$Node {
   return (
     <div
       className={['extrinsics--split', className].join(' ')}
       style={style}
     >
       <div className='small'>
-        <Label>sending an amount of</Label>
+        <Label>
+          {t('transfer.amount', {
+            defaultValue: 'sending an amount of'
+          })}
+        </Label>
         <Input
-          defaultValue={0}
+          defaultValue={1}
           min={0}
           onChange={onChange}
           type='number'
@@ -39,3 +44,5 @@ export default function Amount ({ className, style }: Props) {
     </div>
   );
 }
+
+export default translate(['extrinsics'])(Amount);
diff --git a/packages/app-extrinsics/src/Staking/Transfer/index.js b/packages/app-extrinsics/src/Staking/Transfer/index.js
index ed77d94949e0..6b8a03075d5e 100644
--- a/packages/app-extrinsics/src/Staking/Transfer/index.js
+++ b/packages/app-extrinsics/src/Staking/Transfer/index.js
@@ -6,6 +6,7 @@
 import type { BaseProps } from '../../types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
 import Recipient from '../../Recipient';
 import Amount from './Amount';
@@ -13,7 +14,7 @@ import getValues from './getValues';
 
 type Props = BaseProps & {};
 
-function StakingTransfer ({ className, style }: Props) {
+function StakingTransfer ({ className, style }: Props): React$Node {
   return (
     <div
       className={['extrinsics--StakingTransfer', className].join(' ')}
@@ -27,4 +28,4 @@ function StakingTransfer ({ className, style }: Props) {
 
 StakingTransfer.getValues = getValues;
 
-export default StakingTransfer;
+export default translate(['extrinsics'])(StakingTransfer);
diff --git a/packages/app-extrinsics/src/Staking/Unstake/index.js b/packages/app-extrinsics/src/Staking/Unstake/index.js
index 2e7c2caf9931..fa436d639572 100644
--- a/packages/app-extrinsics/src/Staking/Unstake/index.js
+++ b/packages/app-extrinsics/src/Staking/Unstake/index.js
@@ -6,12 +6,13 @@
 import type { BaseProps } from '../../types';
 
 import React from 'react';
+import { translate } from 'react-i18next';
 
 import getValues from './getValues';
 
 type Props = BaseProps & {};
 
-function StakingUnstake ({ className, style }: Props) {
+function StakingUnstake ({ className, style }: Props): React$Node {
   return (
     <div
       className={['extrinsics--StakingUnstake', className].join(' ')}
@@ -22,4 +23,4 @@ function StakingUnstake ({ className, style }: Props) {
 
 StakingUnstake.getValues = getValues;
 
-export default StakingUnstake;
+export default translate(['extrinsics'])(StakingUnstake);
diff --git a/packages/app-extrinsics/src/types.js b/packages/app-extrinsics/src/types.js
index bcc16e2ca7fa..ca44a598a995 100644
--- a/packages/app-extrinsics/src/types.js
+++ b/packages/app-extrinsics/src/types.js
@@ -9,7 +9,8 @@ export type BaseProps = {
   className?: string,
   style?: {
     [string]: string
-  }
+  },
+  t: I18Next$Translate
 };
 
 export type BaseContext = {
diff --git a/packages/portal/package.json b/packages/portal/package.json
index 7469156be02c..657fe70a63fb 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -16,8 +16,8 @@
   "devDependencies": {
     "@polkadot/app-explorer": "^0.1.0",
     "@polkadot/app-extrinsics": "^0.1.0",
-    "@polkadot/rx-react": "^0.2.20",
-    "@polkadot/ui-react": "^0.9.10",
+    "@polkadot/rx-react": "^0.3.6",
+    "@polkadot/ui-react": "^0.9.11",
     "i18next": "^11.1.1",
     "i18next-browser-languagedetector": "^2.2.0",
     "i18next-xhr-backend": "^1.5.1",
diff --git a/packages/portal/src/App/index.js b/packages/portal/src/App/index.js
index 57ca99429b2c..a2da56087a16 100644
--- a/packages/portal/src/App/index.js
+++ b/packages/portal/src/App/index.js
@@ -10,21 +10,23 @@ import './App.css';
 import React from 'react';
 import { translate } from 'react-i18next';
 
+import Connecting from '../Connecting';
 import Content from '../Content';
 import SideBar from '../SideBar';
 
 type Props = BaseProps & {};
 
-export default translate(['portal'])(
-  function App ({ className, style }: Props) {
-    return (
-      <div
-        className={['portal--App', className].join(' ')}
-        style={style}
-      >
-        <SideBar className='portal--App-column' />
-        <Content className='portal--App-column' />
-      </div>
-    );
-  }
-);
+function App ({ className, style }: Props) {
+  return (
+    <div
+      className={['portal--App', className].join(' ')}
+      style={style}
+    >
+      <SideBar className='portal--App-column' />
+      <Content className='portal--App-column' />
+      <Connecting />
+    </div>
+  );
+}
+
+export default translate(['portal'])(App);
diff --git a/packages/portal/src/Connecting/Connecting.css b/packages/portal/src/Connecting/Connecting.css
new file mode 100644
index 000000000000..e4272a62a59f
--- /dev/null
+++ b/packages/portal/src/Connecting/Connecting.css
@@ -0,0 +1,16 @@
+/* Copyright 2017-2018 Jaco Greeff
+/* This software may be modified and distributed under the terms
+/* of the ISC license. See the LICENSE file for details. */
+
+.portal--Connecting {
+  text-align: center;
+}
+
+.portal--Connecting-text {
+  background: red;
+  bottom: 0;
+  color: white;
+  line-height: 1.5em;
+  padding: 1em 2em;
+  position: absolute;
+}
diff --git a/packages/portal/src/Connecting/index.js b/packages/portal/src/Connecting/index.js
new file mode 100644
index 000000000000..d3fa50dac4a6
--- /dev/null
+++ b/packages/portal/src/Connecting/index.js
@@ -0,0 +1,42 @@
+// Copyright 2017-2018 Jaco Greeff
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+// @flow
+
+import type { BaseProps } from '../types';
+
+import './Connecting.css';
+
+import React from 'react';
+import { translate } from 'react-i18next';
+import withApiCall from '@polkadot/rx-react/with/apiCall';
+
+type Props = BaseProps & {
+  value: boolean
+};
+
+function Connecting ({ className, style, value, t }: Props): React$Node {
+  if (value) {
+    return null;
+  }
+
+  return (
+    <div
+      className={['portal--Connecting', 'ui inverted page modals dimmer transition visible active', className].join(' ')}
+      style={style}
+    >
+      <div className='portal--Connecting-text'>
+        {t('connecting.disconnected', {
+          defaultValue: 'You are disconnected from the node. Check that your node is running and that the Websocket endpoint is reachable.'
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default withApiCall(
+  translate(['portal'])(Connecting),
+  {
+    method: 'isConnected'
+  }
+);
diff --git a/packages/portal/src/NotFound/index.js b/packages/portal/src/NotFound/index.js
index a1931e21bb1f..93976bb2330c 100644
--- a/packages/portal/src/NotFound/index.js
+++ b/packages/portal/src/NotFound/index.js
@@ -10,13 +10,15 @@ import './NotFound.css';
 import React from 'react';
 import { translate } from 'react-i18next';
 
-function NotFound ({ className, style }: BaseProps) {
+function NotFound ({ className, style, t }: BaseProps) {
   return (
     <div
       className={['portal--NotFound', className].join(' ')}
       style={style}
     >
-      ERROR: You have tried to access an application that does not exist
+      {t('notfound.error', {
+        defaultValue: 'ERROR: You have tried to access an application that does not exist'
+      })}
     </div>
   );
 }
diff --git a/packages/portal/src/semantic.css b/packages/portal/src/semantic.css
index 152068b99670..1f27c323b0ee 100644
--- a/packages/portal/src/semantic.css
+++ b/packages/portal/src/semantic.css
@@ -25,6 +25,10 @@
   width: 0;
 }
 
+.ui.inverted.dimmer {
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
 .ui.label {
   background: transparent;
   font-weight: normal;
diff --git a/yarn.lock b/yarn.lock
index 24d0a1555d9e..212dd528794a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1177,38 +1177,39 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@polkadot/api-format@^0.8.18":
-  version "0.8.18"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-format/-/api-format-0.8.18.tgz#0a96d04131edb5fa6ac5ded8108078fff92cd17e"
+"@polkadot/api-format@^0.9.3":
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-format/-/api-format-0.9.3.tgz#14f8a0e3c6ab1139f9642d63318c448efdca42d9"
   dependencies:
     "@polkadot/primitives-json" "^0.10.3"
     "@polkadot/util" "^0.19.2"
     babel-runtime "^6.26.0"
 
-"@polkadot/api-jsonrpc@^0.8.18":
-  version "0.8.18"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-jsonrpc/-/api-jsonrpc-0.8.18.tgz#3c752d1257470c2643c8f0d0b6847dcd65007ab7"
+"@polkadot/api-jsonrpc@^0.9.3":
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-jsonrpc/-/api-jsonrpc-0.9.3.tgz#19098df936f2ed3a97c6bce1fe9f507cf33446b0"
   dependencies:
     babel-runtime "^6.26.0"
 
-"@polkadot/api-provider@^0.8.18":
-  version "0.8.18"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-provider/-/api-provider-0.8.18.tgz#03b58364cc0ed8b64f48a71661727781f4e19bd2"
+"@polkadot/api-provider@^0.9.3":
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-provider/-/api-provider-0.9.3.tgz#9b66e32ce0cfcb5f468b4ee3332704ffa38f1dfe"
   dependencies:
     "@polkadot/util" "^0.19.2"
     "@polkadot/util-crypto" "^0.19.2"
     "@polkadot/util-keyring" "^0.19.2"
     babel-runtime "^6.26.0"
+    eventemitter3 "^2.0.3"
     isomorphic-fetch "^2.2.1"
     websocket "^1.0.25"
 
-"@polkadot/api@^0.8.18":
-  version "0.8.18"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.8.18.tgz#d8e0e1a58625bdc97b4cf6991a597a0aac2aebb1"
+"@polkadot/api@^0.9.3":
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.9.3.tgz#736361e8efd3b3a0f0cb919b03707f10110f1a75"
   dependencies:
-    "@polkadot/api-format" "^0.8.18"
-    "@polkadot/api-jsonrpc" "^0.8.18"
-    "@polkadot/api-provider" "^0.8.18"
+    "@polkadot/api-format" "^0.9.3"
+    "@polkadot/api-jsonrpc" "^0.9.3"
+    "@polkadot/api-provider" "^0.9.3"
     "@polkadot/util" "^0.19.2"
     babel-runtime "^6.26.0"
 
@@ -1299,33 +1300,33 @@
     "@polkadot/util" "^0.19.2"
     babel-runtime "^6.26.0"
 
-"@polkadot/rx-api@^0.2.20":
-  version "0.2.20"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.2.20.tgz#f08a2dcc6b246df1ff4b1b6d3c02b236ea3a6ded"
+"@polkadot/rx-api@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-api/-/rx-api-0.3.6.tgz#75c7115f340a7526ebd356bffcefeda4750cdc20"
   dependencies:
-    "@polkadot/api" "^0.8.18"
-    "@polkadot/api-provider" "^0.8.18"
+    "@polkadot/api" "^0.9.3"
+    "@polkadot/api-provider" "^0.9.3"
     rxjs "^5.5.10"
 
-"@polkadot/rx-react@^0.2.20":
-  version "0.2.20"
-  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.2.20.tgz#8bd5af52e00e20098fce9ba42d05d7b9405abd21"
+"@polkadot/rx-react@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@polkadot/rx-react/-/rx-react-0.3.6.tgz#571c9be95b00cc9a5ea11f150a3ad62ad627acd8"
   dependencies:
-    "@polkadot/rx-api" "^0.2.20"
+    "@polkadot/rx-api" "^0.3.6"
     "@polkadot/util" "^0.19.2"
 
-"@polkadot/ui-identicon@^0.9.10":
-  version "0.9.10"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-identicon/-/ui-identicon-0.9.10.tgz#f1f8bd585b30bbbeef73bdac52087c892d0e6454"
+"@polkadot/ui-identicon@^0.9.11":
+  version "0.9.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-identicon/-/ui-identicon-0.9.11.tgz#9c00fbaaa0d205b6fe38fda7d56591f66b197b08"
   dependencies:
     babel-runtime "^6.26.0"
     color "^3.0.0"
 
-"@polkadot/ui-react@^0.9.10":
-  version "0.9.10"
-  resolved "https://registry.yarnpkg.com/@polkadot/ui-react/-/ui-react-0.9.10.tgz#e947526bd354ebfff9a73a8e66da90b6f8bc761c"
+"@polkadot/ui-react@^0.9.11":
+  version "0.9.11"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-react/-/ui-react-0.9.11.tgz#544af459d0134ea041e5a5c9dc992e96d97ab11b"
   dependencies:
-    "@polkadot/ui-identicon" "^0.9.10"
+    "@polkadot/ui-identicon" "^0.9.11"
     babel-runtime "^6.26.0"
 
 "@polkadot/util-crypto@^0.19.2":
@@ -4531,6 +4532,10 @@ eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+
 events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"