diff --git a/js/src/ui/Actionbar/actionbar.css b/js/src/ui/Actionbar/actionbar.css
index 56f69a829..4bb36abcf 100644
--- a/js/src/ui/Actionbar/actionbar.css
+++ b/js/src/ui/Actionbar/actionbar.css
@@ -19,12 +19,14 @@
   background: transparent;
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
   padding: 0.5em 1.5em;
   margin: 0;
 
   .title {
     text-transform: uppercase;
+    margin: 0;
   }
 
   .children {
diff --git a/js/src/ui/Container/container.css b/js/src/ui/Container/container.css
index 540b29b2d..136bd0b74 100644
--- a/js/src/ui/Container/container.css
+++ b/js/src/ui/Container/container.css
@@ -82,6 +82,11 @@ $borderColor: rgba(242, 242, 242, 1);
   background: $backgroundLight !important;
 }
 
+.cardContainer {
+  width: 100%;
+  height: 100%;
+}
+
 .link {
   width: 100%;
   height: 100%;
diff --git a/js/src/ui/Container/container.js b/js/src/ui/Container/container.js
index 5903cc9a1..df705df0f 100644
--- a/js/src/ui/Container/container.js
+++ b/js/src/ui/Container/container.js
@@ -81,7 +81,7 @@ export default class Container extends Component {
           link
             ? this.renderLink(link, card)
             : (
-              <div>
+              <div className={ styles.cardContainer }>
                 { card }
                 { this.renderHover() }
               </div>
diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js
index b7aa0e18e..787bfb04a 100644
--- a/js/src/ui/Form/AddressSelect/addressSelect.js
+++ b/js/src/ui/Form/AddressSelect/addressSelect.js
@@ -317,7 +317,7 @@ class AddressSelect extends Component {
 
       content = (
         <div className={ styles.cards }>
-          <div>{ cards }</div>
+          { cards }
         </div>
       );
     }
diff --git a/js/src/ui/Form/Input/input.js b/js/src/ui/Form/Input/input.js
index 163aa2636..9a3729a52 100644
--- a/js/src/ui/Form/Input/input.js
+++ b/js/src/ui/Form/Input/input.js
@@ -114,11 +114,11 @@ export default class Input extends Component {
 
     return (
       <LabelWrapper
-        className={ styles.container }
+        className={ `${styles.container} ${className}` }
         label={ label }
       >
         <SemanticInput
-          className={ `${styles.input} ${className}` }
+          className={ styles.input }
           disabled={ disabled }
           error={ !!error }
           fluid
diff --git a/js/src/ui/Form/InputAddress/inputAddress.css b/js/src/ui/Form/InputAddress/inputAddress.css
index ee154d070..145b2349c 100644
--- a/js/src/ui/Form/InputAddress/inputAddress.css
+++ b/js/src/ui/Form/InputAddress/inputAddress.css
@@ -27,10 +27,6 @@
   }
 }
 
-.inputEmpty input {
-  padding-left: 0 !important;
-}
-
 .small {
   .input input {
     padding-left: 40px !important;
@@ -48,7 +44,7 @@
 .icon,
 .iconDisabled {
   position: absolute;
-  top: 35px;
+  top: 33px;
 
   &.noLabel {
     top: 10px;
diff --git a/js/src/ui/GasPriceSelector/CustomBar/customBar.js b/js/src/ui/GasPriceSelector/CustomBar/customBar.js
index 069fa82cd..36a378028 100644
--- a/js/src/ui/GasPriceSelector/CustomBar/customBar.js
+++ b/js/src/ui/GasPriceSelector/CustomBar/customBar.js
@@ -38,7 +38,7 @@ export default class CustomBar extends Component {
       : COLORS.default;
 
     const borderWidth = 0.5;
-    const borderColor = 'rgba(255, 255, 255, 0.5)';
+    const borderColor = 'rgba(0, 0, 0, 0)';
 
     return (
       <g>
diff --git a/js/src/ui/GasPriceSelector/CustomShape/customShape.js b/js/src/ui/GasPriceSelector/CustomShape/customShape.js
index e05e79fa5..6fc6f7d0b 100644
--- a/js/src/ui/GasPriceSelector/CustomShape/customShape.js
+++ b/js/src/ui/GasPriceSelector/CustomShape/customShape.js
@@ -35,13 +35,13 @@ export default class CustomShape extends Component {
     return (
       <g>
         <Dot
-          style={ { fill: 'white' } }
+          style={ { fill: 'rgb(129, 190, 226)' } }
           cx={ cx }
           cy={ cy }
           r={ 5 }
         />
         <Dot
-          style={ { fill: 'rgb(255, 99, 132)' } }
+          style={ { fill: 'rgb(129, 190, 226)', zIndex: '700' } }
           cx={ cx }
           cy={ cy }
           r={ 3 }
diff --git a/js/src/ui/GasPriceSelector/util.js b/js/src/ui/GasPriceSelector/util.js
index 0b5de2a2e..fe898ed08 100644
--- a/js/src/ui/GasPriceSelector/util.js
+++ b/js/src/ui/GasPriceSelector/util.js
@@ -15,12 +15,12 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 const COLORS = {
-  default: 'rgba(255, 99, 132, 0.2)',
-  selected: 'rgba(255, 99, 132, 0.5)',
-  hover: 'rgba(255, 99, 132, 0.15)',
-  grid: 'rgba(255, 99, 132, 0.5)',
-  line: 'rgb(255, 99, 132)',
-  intersection: '#fff'
+  default: 'rgba(33, 133, 208, 0.4)',
+  selected: 'rgba(33, 133, 208, 0.9)',
+  hover: 'rgba(33, 133, 208, 1)',
+  grid: 'rgba(33, 133, 208, 0.6)',
+  line: 'rgba(0, 0, 0, 0.4)',
+  intersection: '#81BEE2'
 };
 
 const countModifier = (count) => {
diff --git a/js/src/ui/MethodDecoding/methodDecoding.css b/js/src/ui/MethodDecoding/methodDecoding.css
index a9065f982..32024861a 100644
--- a/js/src/ui/MethodDecoding/methodDecoding.css
+++ b/js/src/ui/MethodDecoding/methodDecoding.css
@@ -71,6 +71,9 @@
 }
 
 .inputs, .addressContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
   padding-left: 2em;
 }
 
diff --git a/js/src/ui/MethodDecoding/methodDecoding.js b/js/src/ui/MethodDecoding/methodDecoding.js
index 2d0c722b1..52d494b30 100644
--- a/js/src/ui/MethodDecoding/methodDecoding.js
+++ b/js/src/ui/MethodDecoding/methodDecoding.js
@@ -20,7 +20,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { TypedInput, InputAddress } from '../Form';
+import IdentityIcon from '~/ui/IdentityIcon';
+import { TypedInput, Label } from '../Form';
 import Loading from '../Loading';
 import MethodDecodingStore from './methodDecodingStore';
 
@@ -622,12 +623,12 @@ class MethodDecoding extends Component {
   renderAddressName (address, withName = true) {
     return (
       <div className={ styles.addressContainer }>
-        <InputAddress
-          disabled
-          className={ styles.address }
-          value={ address }
-          text={ withName }
+        <IdentityIcon
+          address={ address }
+          center
+          inline
         />
+        <Label>{address}</Label>
       </div>
     );
   }
diff --git a/js/src/views/Account/Transfer/Details/details.js b/js/src/views/Account/Transfer/Details/details.js
index bf7da2ca8..d3d0aa7a6 100644
--- a/js/src/views/Account/Transfer/Details/details.js
+++ b/js/src/views/Account/Transfer/Details/details.js
@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
-import Form, { AddressSelect, Checkbox, Input, InputAddressSelect } from '@parity/ui/Form';
+import Form, { AddressSelect, Checkbox, Input, InputAddressSelect, Label } from '@parity/ui/Form';
 
 import TokenSelect from './tokenSelect';
 import styles from '../transfer.css';
@@ -59,13 +59,19 @@ export default class Details extends Component {
     const label = (
       <FormattedMessage
         id='transfer.details.amount.label'
-        defaultMessage='amount to transfer (in {tag})'
+        defaultMessage='Amount to transfer (in {tag})'
         values={ {
           tag: token.tag
         } }
       />
     );
 
+    let totalAmountStyle = { color: 'rgba(0,0,0,.87)' };
+
+    if (totalError) {
+      totalAmountStyle = { color: '#9F3A38' };
+    }
+
     return (
       <Form>
         { this.renderTokenSelect() }
@@ -74,12 +80,13 @@ export default class Details extends Component {
         <div className={ styles.columns }>
           <div>
             <Input
+              className={ styles.inputContainer }
               disabled={ all }
               label={ label }
               hint={
                 <FormattedMessage
                   id='transfer.details.amount.hint'
-                  defaultMessage='the amount to transfer to the recipient'
+                  defaultMessage='The amount to transfer to the recipient'
                 />
               }
               value={ value }
@@ -93,7 +100,7 @@ export default class Details extends Component {
               label={
                 <FormattedMessage
                   id='transfer.details.fullBalance.label'
-                  defaultMessage='full account balance'
+                  defaultMessage='Full account balance'
                 />
               }
               onClick={ this.onCheckAll }
@@ -102,21 +109,17 @@ export default class Details extends Component {
           </div>
         </div>
         <div className={ styles.columns }>
-          <div>
-            <Input
-              disabled
-              label={
-                <FormattedMessage
-                  id='transfer.details.total.label'
-                  defaultMessage='total transaction amount'
-                />
-              }
-              error={ totalError }
-            >
-              <div className={ styles.inputoverride }>
-                { total }<small> ETH</small>
-              </div>
-            </Input>
+          <div className={ styles.totalTx }>
+            <Label className={ styles.transferLabel }>
+              <FormattedMessage
+                id='transfer.details.total.label'
+                defaultMessage='Total transaction amount'
+              />
+            </Label>
+            <div className={ styles.totalAmount } style={ totalAmountStyle }>
+              <div>{ total }<small> ETH</small></div>
+              <div>{ totalError }</div>
+            </div>
           </div>
 
           <div>
@@ -125,7 +128,7 @@ export default class Details extends Component {
               label={
                 <FormattedMessage
                   id='transfer.details.advanced.label'
-                  defaultMessage='advanced sending options'
+                  defaultMessage='Advanced sending options'
                 />
               }
               onClick={ this.onCheckExtras }
@@ -152,13 +155,13 @@ export default class Details extends Component {
           label={
             <FormattedMessage
               id='transfer.details.sender.label'
-              defaultMessage='sender address'
+              defaultMessage='Sender address'
             />
           }
           hint={
             <FormattedMessage
               id='transfer.details.sender.hint'
-              defaultMessage='the sender address'
+              defaultMessage='The sender address'
             />
           }
           value={ sender }
@@ -174,16 +177,17 @@ export default class Details extends Component {
     return (
       <div className={ styles.address }>
         <InputAddressSelect
+          className={ styles.inputContainer }
           label={
             <FormattedMessage
               id='transfer.details.recipient.label'
-              defaultMessage='recipient address'
+              defaultMessage='Recipient address'
             />
           }
           hint={
             <FormattedMessage
               id='transfer.details.recipient.hint'
-              defaultMessage='the recipient address'
+              defaultMessage='The recipient address'
             />
           }
           error={ recipientError }
diff --git a/js/src/views/Account/Transfer/errors.js b/js/src/views/Account/Transfer/errors.js
index 2aac3ccda..57ea1ed53 100644
--- a/js/src/views/Account/Transfer/errors.js
+++ b/js/src/views/Account/Transfer/errors.js
@@ -15,14 +15,14 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 const ERRORS = {
-  requireSender: 'a valid sender is required for the transaction',
-  requireRecipient: 'a recipient network address is required for the transaction',
-  invalidAddress: 'the supplied address is an invalid network address',
-  invalidAmount: 'the supplied amount should be a valid positive number',
-  invalidDecimals: 'the supplied amount exceeds the allowed decimals',
-  largeAmount: 'the transaction total is higher than the available balance',
-  gasException: 'the transaction will throw an exception with the current values',
-  gasBlockLimit: 'the transaction execution will exceed the block gas limit'
+  requireSender: 'A valid sender is required for the transaction',
+  requireRecipient: 'A recipient network address is required for the transaction',
+  invalidAddress: 'The supplied address is an invalid network address',
+  invalidAmount: 'The supplied amount should be a valid positive number',
+  invalidDecimals: 'The supplied amount exceeds the allowed decimals',
+  largeAmount: 'The transaction total is higher than the available balance',
+  gasException: 'The transaction will throw an exception with the current values',
+  gasBlockLimit: 'The transaction execution will exceed the block gas limit'
 };
 
 export default ERRORS;
diff --git a/js/src/views/Account/Transfer/transfer.css b/js/src/views/Account/Transfer/transfer.css
index 36f0d278f..a59f5e261 100644
--- a/js/src/views/Account/Transfer/transfer.css
+++ b/js/src/views/Account/Transfer/transfer.css
@@ -139,8 +139,20 @@
   font-size: 0.75em;
 }
 
-.inputoverride {
-  padding-top: 24px !important;
+.inputContainer {
+  padding-top: 10px;
+}
+
+.totalAmount {
+  padding-top: 6px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.totalTx {
+  padding-top: 10px;
 }
 
 .contentTitle {