diff --git a/js/package.json b/js/package.json
index aa3e05ba004..081321ba864 100644
--- a/js/package.json
+++ b/js/package.json
@@ -115,6 +115,7 @@
     "es6-promise": "^3.2.1",
     "format-json": "^1.0.3",
     "format-number": "^2.0.1",
+    "geopattern": "^1.2.3",
     "isomorphic-fetch": "^2.2.1",
     "js-sha3": "^0.5.2",
     "lodash": "^4.11.1",
diff --git a/js/src/index.js b/js/src/index.js
index a952783be84..4e89dde8eee 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -47,6 +47,8 @@ const parityUrl = process.env.NODE_ENV === 'production' ? window.location.host :
 
 const api = new Api(new Api.Transport.Ws(`ws://${parityUrl}`, initToken)); // new Api.Transport.Http('/rpc/'));
 
+muiTheme.parity.setBackgroundSeed(api.util.sha3(initToken + Date.now()));
+
 // signer
 function tokenSetter (token, cb) {
   window.localStorage.setItem('sysuiToken', token);
diff --git a/js/src/modals/CreateAccount/createAccount.css b/js/src/modals/CreateAccount/createAccount.css
index e665cb3c144..7d59c0da633 100644
--- a/js/src/modals/CreateAccount/createAccount.css
+++ b/js/src/modals/CreateAccount/createAccount.css
@@ -15,7 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .paddedtop {
-  padding: 1.618em 0 0 0;
+  padding: 1.5em 1em 0 1em;
   line-height: 1.618em;
 }
 
diff --git a/js/src/reset.css b/js/src/reset.css
index dd05698547e..10b47aaae71 100644
--- a/js/src/reset.css
+++ b/js/src/reset.css
@@ -22,7 +22,6 @@
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
-  background: rgb(80, 80, 80); /* rgb(95, 95, 95); */
   color: rgba(255, 255, 255, 0.75);
   font-size: 16px;
   font-family: 'Roboto', sans-serif;
diff --git a/js/src/ui/Actionbar/actionbar.js b/js/src/ui/Actionbar/actionbar.js
index d2efe126c16..c3fbe6a1898 100644
--- a/js/src/ui/Actionbar/actionbar.js
+++ b/js/src/ui/Actionbar/actionbar.js
@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import { Toolbar, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';
+import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
 
 import styles from './actionbar.css';
 
@@ -59,9 +59,9 @@ export default class Actionbar extends Component {
     const { title } = this.props;
 
     return (
-      <ToolbarTitle
-        className={ styles.tooltitle }
-        text={ title } />
+      <h3 className={ styles.tooltitle }>
+        { title }
+      </h3>
     );
   }
 }
diff --git a/js/src/ui/Container/Title/title.css b/js/src/ui/Container/Title/title.css
index d5105d642a0..c3bf7a3b10e 100644
--- a/js/src/ui/Container/Title/title.css
+++ b/js/src/ui/Container/Title/title.css
@@ -17,3 +17,9 @@
 .byline {
   color: #aaa;
 }
+
+.title {
+  text-transform: uppercase;
+  margin: 0;
+  line-height: 34px;
+}
diff --git a/js/src/ui/Container/Title/title.js b/js/src/ui/Container/Title/title.js
index 015ccfc4a65..9a6f2f51a95 100644
--- a/js/src/ui/Container/Title/title.js
+++ b/js/src/ui/Container/Title/title.js
@@ -16,12 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { CardTitle } from 'material-ui/Card';
-
 import styles from './title.css';
 
-const TITLE_STYLE = { textTransform: 'uppercase', padding: 0 };
-
 export default class Title extends Component {
   static propTypes = {
     title: PropTypes.oneOfType([
@@ -37,9 +33,9 @@ export default class Title extends Component {
   render () {
     return (
       <div>
-        <CardTitle
-          style={ TITLE_STYLE }
-          title={ this.props.title } />
+        <h3 className={ styles.title }>
+          { this.props.title }
+        </h3>
         <div className={ styles.byline }>
           { this.props.byline }
         </div>
diff --git a/js/src/ui/Container/container.css b/js/src/ui/Container/container.css
index ca37dfb76d8..3684a32ed06 100644
--- a/js/src/ui/Container/container.css
+++ b/js/src/ui/Container/container.css
@@ -19,5 +19,6 @@
 }
 
 .padded {
-  padding: 1em;
+  padding: 1.5em;
+  background: rgba(0, 0, 0, 0.7) !important;
 }
diff --git a/js/src/ui/Modal/modal.css b/js/src/ui/Modal/modal.css
index f76585ba156..3edfdd48267 100644
--- a/js/src/ui/Modal/modal.css
+++ b/js/src/ui/Modal/modal.css
@@ -14,9 +14,23 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+.actions, .body {
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+.dialog {
+}
+
+.content {
+  transform: translate(0px, 0px) !important;
+}
+
+.content>div {
+  background: rgba(0, 0, 0, 0.7) !important;
+}
+
 .title {
   padding: 1em;
-  background: rgba(0, 0, 0, 0.175);
 }
 
 .title h3 {
diff --git a/js/src/ui/Modal/modal.js b/js/src/ui/Modal/modal.js
index 207ce5de22b..24d8e1e3232 100644
--- a/js/src/ui/Modal/modal.js
+++ b/js/src/ui/Modal/modal.js
@@ -23,11 +23,14 @@ import Title from './Title';
 const ACTIONS_STYLE = { borderStyle: 'none' };
 const TITLE_STYLE = { borderStyle: 'none' };
 const DIALOG_STYLE = { paddingTop: '1px' };
-const CONTENT_STYLE = { transform: 'translate(0px, 0px)' };
 
 import styles from './modal.css';
 
 export default class Modal extends Component {
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  }
+
   static propTypes = {
     actions: PropTypes.node,
     children: PropTypes.node,
@@ -43,6 +46,7 @@ export default class Modal extends Component {
   }
 
   render () {
+    const { muiTheme } = this.context;
     const { actions, className, current, children, scroll, steps, waiting, title, visible } = this.props;
     const header = (
       <Title
@@ -51,15 +55,19 @@ export default class Modal extends Component {
         steps={ steps }
         title={ title } />
     );
+    const classes = `${styles.dialog} ${className}`;
 
     return (
       <Dialog
-        className={ className }
+        className={ classes }
         actions={ actions }
         actionsContainerStyle={ ACTIONS_STYLE }
         autoDetectWindowHeight={ false }
         autoScrollBodyContent={ !!scroll }
-        contentStyle={ CONTENT_STYLE }
+        actionsContainerClassName={ styles.actions }
+        bodyClassName={ styles.body }
+        contentClassName={ styles.content }
+        contentStyle={ muiTheme.parity.getBackgroundStyle() }
         modal
         open={ visible }
         repositionOnUpdate={ false }
diff --git a/js/src/ui/Page/page.css b/js/src/ui/Page/page.css
index 379d5095ab0..7b0c4e16479 100644
--- a/js/src/ui/Page/page.css
+++ b/js/src/ui/Page/page.css
@@ -15,5 +15,5 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .layout {
-  padding: 0em 3em;
+  padding: 0 3em;
 }
diff --git a/js/src/ui/ParityBackground/index.js b/js/src/ui/ParityBackground/index.js
new file mode 100644
index 00000000000..4c766ac3c1f
--- /dev/null
+++ b/js/src/ui/ParityBackground/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './parityBackground';
diff --git a/js/src/ui/ParityBackground/parityBackground.js b/js/src/ui/ParityBackground/parityBackground.js
new file mode 100644
index 00000000000..801b72d461d
--- /dev/null
+++ b/js/src/ui/ParityBackground/parityBackground.js
@@ -0,0 +1,39 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+export default class ParityBackground extends Component {
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+  }
+
+  render () {
+    const { children, className } = this.props;
+    const { muiTheme } = this.context;
+
+    return (
+      <div className={ className } style={ muiTheme.parity.getBackgroundStyle() }>
+        { children }
+      </div>
+    );
+  }
+}
diff --git a/js/src/ui/Theme/theme.js b/js/src/ui/Theme/theme.js
index 3f5a360cce3..2ef26f596da 100644
--- a/js/src/ui/Theme/theme.js
+++ b/js/src/ui/Theme/theme.js
@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import GeoPattern from 'geopattern';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
 import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
@@ -23,16 +24,32 @@ const muiTheme = getMuiTheme(darkBaseTheme);
 
 muiTheme.stepper.textColor = '#eee';
 muiTheme.stepper.disabledTextColor = '#777';
-muiTheme.inkBar.backgroundColor = 'transparent'; // 'rgb(0, 151, 167)'; // 'rgba(255, 136, 0, 0.8)';
+muiTheme.inkBar.backgroundColor = 'transparent';
 muiTheme.raisedButton.primaryTextColor = 'white';
 muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)';
 muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.9)';
 muiTheme.tabs = lightTheme.tabs;
-muiTheme.tabs.backgroundColor = 'rgb(65, 65, 65)';
-muiTheme.tabs.selectedTextColor = 'rgb(255, 255, 255)'; // 'rgb(0, 151, 167)'; // 'rgba(255, 136, 0, 0.8)';
-muiTheme.tabs.textColor = 'rgb(0, 151, 167)'; // 'rgba(255, 255, 255, 1)'; // 'rgba(0, 151, 167, 1)';
+muiTheme.tabs.backgroundColor = 'transaprent';
+muiTheme.tabs.selectedTextColor = 'rgb(255, 255, 255)';
+muiTheme.tabs.textColor = 'rgb(0, 151, 167)';
 muiTheme.textField.disabledTextColor = muiTheme.textField.textColor;
 muiTheme.toolbar = lightTheme.toolbar;
-muiTheme.toolbar.backgroundColor = 'rgb(80, 80, 80)'; // 'rgba(255, 136, 0, 0.5)'; // 'rgb(80, 80, 80)';
+muiTheme.toolbar.backgroundColor = 'transparent';
+
+muiTheme.parity = {
+  backgroundSeed: '0x0',
+
+  setBackgroundSeed: (seed) => {
+    muiTheme.parity.backgroundSeed = seed;
+  },
+
+  getBackgroundStyle: () => {
+    const url = GeoPattern.generate(muiTheme.parity.backgroundSeed).toDataUrl();
+
+    return {
+      background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), ${url}`
+    };
+  }
+};
 
 export default muiTheme;
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
index 528dcb541aa..8691a07f8e9 100644
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@@ -27,6 +27,7 @@ import IdentityIcon from './IdentityIcon';
 import Modal from './Modal';
 import muiTheme from './Theme';
 import Page from './Page';
+import ParityBackground from './ParityBackground';
 import SignerIcon from './SignerIcon';
 import Tooltips, { Tooltip } from './Tooltips';
 
@@ -52,6 +53,7 @@ export {
   Modal,
   muiTheme,
   Page,
+  ParityBackground,
   SignerIcon,
   Tooltip,
   Tooltips
diff --git a/js/src/views/Application/Container/container.js b/js/src/views/Application/Container/container.js
index 3ba23930c73..a1b9124c7d1 100644
--- a/js/src/views/Application/Container/container.js
+++ b/js/src/views/Application/Container/container.js
@@ -17,13 +17,13 @@
 import React, { Component, PropTypes } from 'react';
 
 import { FirstRun } from '../../../modals';
-import { Errors, Tooltips } from '../../../ui';
+import { Errors, ParityBackground, Tooltips } from '../../../ui';
 
 import styles from '../application.css';
 
 export default class Container extends Component {
   static propTypes = {
-    children: PropTypes.node,
+    children: PropTypes.node.isRequired,
     showFirstRun: PropTypes.bool,
     onCloseFirstRun: PropTypes.func
   };
@@ -32,14 +32,14 @@ export default class Container extends Component {
     const { children, showFirstRun, onCloseFirstRun } = this.props;
 
     return (
-      <div className={ styles.container }>
+      <ParityBackground className={ styles.container }>
         <FirstRun
           visible={ showFirstRun }
           onClose={ onCloseFirstRun } />
         <Tooltips />
         <Errors />
         { children }
-      </div>
+      </ParityBackground>
     );
   }
 }
diff --git a/js/src/views/Application/DappContainer/dappContainer.js b/js/src/views/Application/DappContainer/dappContainer.js
index deff12c9d7f..e3e3d2cb0cc 100644
--- a/js/src/views/Application/DappContainer/dappContainer.js
+++ b/js/src/views/Application/DappContainer/dappContainer.js
@@ -22,7 +22,7 @@ import styles from '../application.css';
 
 export default class DappContainer extends Component {
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node.isRequired
   };
 
   render () {
diff --git a/js/src/views/Application/TabBar/tabBar.css b/js/src/views/Application/TabBar/tabBar.css
index 3edb9f2bded..e8eea06e6b1 100644
--- a/js/src/views/Application/TabBar/tabBar.css
+++ b/js/src/views/Application/TabBar/tabBar.css
@@ -15,7 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .toolbar {
-  background: rgb(65, 65, 65) !important;
+  background: none !important;
   height: 72px !important;
   position: relative;
 }
@@ -25,13 +25,19 @@
   position: relative;
 }
 
+.tabs button,
+.settings,
+.logo {
+  background: rgba(0, 0, 0, 0.7) !important; /* rgba(0, 0, 0, 0.25) !important; */
+}
+
 .tabs button:hover {
-  background: rgb(72, 72, 72) !important;
+  background: rgba(0, 0, 0, 0.3) !important;
 }
 
 button.tabactive,
 button.tabactive:hover {
-  background: rgb(80, 80, 80) !important;
+  background: none !important;
   border-radius: 4px 4px 0 0;
 }
 
@@ -51,7 +57,8 @@ button.tabactive:hover {
 }
 
 .logo {
-  margin: 22px 3em 0 0;
+  margin: 0 0 0 -24px;
+  padding: 22px 24px 0 24px;
   white-space: nowrap;
 }
 
@@ -76,8 +83,8 @@ button.tabactive:hover {
 }
 
 .settings {
-  padding-left: 24px;
-  margin: 12px -12px;
+  margin: 0 -24px 0 0;
+  padding: 12px 24px;
 }
 
 .settings svg {
diff --git a/js/src/views/Application/application.css b/js/src/views/Application/application.css
index a1cde11ea46..a9f6d4f7ed5 100644
--- a/js/src/views/Application/application.css
+++ b/js/src/views/Application/application.css
@@ -15,6 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .container {
-  height: 100%;
+  min-height: 100%;
   width: 100%;
 }
diff --git a/js/src/views/Application/application.js b/js/src/views/Application/application.js
index 229314d95db..fdea0a264db 100644
--- a/js/src/views/Application/application.js
+++ b/js/src/views/Application/application.js
@@ -28,7 +28,8 @@ const inFrame = window.parent !== window && window.parent.frames.length !== 0;
 
 class Application extends Component {
   static contextTypes = {
-    api: PropTypes.object.isRequired
+    api: PropTypes.object.isRequired,
+    background: PropTypes.string
   }
 
   static propTypes = {
diff --git a/js/src/views/ParityBar/parityBar.css b/js/src/views/ParityBar/parityBar.css
index f6e2190926d..e217860fe80 100644
--- a/js/src/views/ParityBar/parityBar.css
+++ b/js/src/views/ParityBar/parityBar.css
@@ -32,16 +32,18 @@
 
 .expanded {
   right: 16px;
-  width: 860px;
-  height: 250px;
+  width: 964px;
+  height: 300px;
   border-radius: 4px 4px 0 0;
   background: rgb(48, 48, 48);
-  padding: 1em;
   overflow-y: scroll;
 }
 
+.expanded .content {
+  padding: 0 2em;
+}
+
 .corner {
-  background: rgb(48, 48, 48);
   position: absolute;
   bottom: 0;
   right: 16px;
@@ -90,13 +92,17 @@
 
 .header {
   height: 36px;
-  padding-bottom: 1em;
+  padding: 1em;
 }
 
 .header:after {
   clear: both;
 }
 
+.body {
+  padding: 1em;
+}
+
 .title {
   float: left;
 }
diff --git a/js/src/views/ParityBar/parityBar.js b/js/src/views/ParityBar/parityBar.js
index c4ace9af933..6c9a75ce764 100644
--- a/js/src/views/ParityBar/parityBar.js
+++ b/js/src/views/ParityBar/parityBar.js
@@ -20,7 +20,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import ContentClear from 'material-ui/svg-icons/content/clear';
 
-import { Badge, Button, ContainerTitle, SignerIcon } from '../../ui';
+import { Badge, Button, ContainerTitle, ParityBackground, SignerIcon } from '../../ui';
 import { Embedded as Signer } from '../Signer';
 
 import imagesEthcoreBlock from '../../images/ethcore-block-blue.png';
@@ -52,7 +52,7 @@ class ParityBar extends Component {
 
     return (
       <div className={ styles.bar }>
-        <div className={ styles.corner }>
+        <ParityBackground className={ styles.corner }>
           <Link to='/apps'>
             <Button
               className={ styles.button }
@@ -64,14 +64,14 @@ class ParityBar extends Component {
             icon={ <SignerIcon className={ styles.signerIcon } /> }
             label={ this.renderSignerLabel() }
             onClick={ this.toggleDisplay } />
-        </div>
+        </ParityBackground>
       </div>
     );
   }
 
   renderExpanded () {
     return (
-      <div className={ styles.expanded }>
+      <ParityBackground className={ styles.expanded }>
         <div className={ styles.header }>
           <div className={ styles.title }>
             <ContainerTitle title='Parity Signer: Pending' />
@@ -83,8 +83,10 @@ class ParityBar extends Component {
               onClick={ this.toggleDisplay } />
           </div>
         </div>
-        <Signer />
-      </div>
+        <div className={ styles.content }>
+          <Signer />
+        </div>
+      </ParityBackground>
     );
   }
 
diff --git a/js/src/views/Signer/containers/Embedded/embedded.js b/js/src/views/Signer/containers/Embedded/embedded.js
index 611f5bbc653..a55739ddab4 100644
--- a/js/src/views/Signer/containers/Embedded/embedded.js
+++ b/js/src/views/Signer/containers/Embedded/embedded.js
@@ -18,6 +18,8 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
+import { Container } from '../../../../ui';
+
 import { RequestPendingWeb3 } from '../../components';
 import * as RequestsActions from '../../actions/requests';
 
@@ -37,9 +39,11 @@ class Embedded extends Component {
 
   render () {
     return (
-      <div className={ styles.signer }>
-        { this.renderPendingRequests() }
-      </div>
+      <Container>
+        <div className={ styles.signer }>
+          { this.renderPendingRequests() }
+        </div>
+      </Container>
     );
   }