diff --git a/packages/app-accounts/src/Creator.tsx b/packages/app-accounts/src/Creator.tsx
index 67618a6d7f..533608a1ca 100644
--- a/packages/app-accounts/src/Creator.tsx
+++ b/packages/app-accounts/src/Creator.tsx
@@ -10,7 +10,6 @@ import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
 import Password from '@polkadot/ui-app/Password';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import isHex from '@polkadot/util/is/hex';
 import hexToU8a from '@polkadot/util/hex/toU8a';
@@ -62,14 +61,10 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
     const { address, isSeedValid } = this.state;
 
     return (
-      <div
-        className={classes('accounts--Creator', className)}
-        style={style}
-      >
+      <div className='accounts--Creator'>
         <div className='ui--grid'>
           <AddressSummary
             className='shrink'
diff --git a/packages/app-accounts/src/Editor.tsx b/packages/app-accounts/src/Editor.tsx
index 0cacb20629..5131db5fe7 100644
--- a/packages/app-accounts/src/Editor.tsx
+++ b/packages/app-accounts/src/Editor.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import InputAddress from '@polkadot/ui-app/InputAddress';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import accountObservable from '@polkadot/ui-keyring/observable/accounts';
 import withObservableBase from '@polkadot/ui-react-rx/with/observableBase';
@@ -39,13 +38,8 @@ class Editor extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('accounts--Editor', className)}
-        style={style}
-      >
+      <div className='accounts--Editor'>
         {this.renderData()}
         {this.renderButtons()}
       </div>
diff --git a/packages/app-accounts/src/index.tsx b/packages/app-accounts/src/index.tsx
index 69c31c3018..4f8a553585 100644
--- a/packages/app-accounts/src/index.tsx
+++ b/packages/app-accounts/src/index.tsx
@@ -9,7 +9,6 @@ import './index.css';
 import React from 'react';
 
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Creator from './Creator';
 import Editor from './Editor';
@@ -35,15 +34,12 @@ class AccountsApp extends React.PureComponent<Props, State> {
   state: State = { action: 'edit' };
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { action } = this.state;
     const Component = Components[action];
 
     return (
-      <main
-        className={classes('accounts--App', className)}
-        style={style}
-      >
+      <main className='accounts--App'>
         <header>
           <Button.Group>
             <Button
diff --git a/packages/app-addresses/src/Creator.tsx b/packages/app-addresses/src/Creator.tsx
index daddf8ae71..d82d521292 100644
--- a/packages/app-addresses/src/Creator.tsx
+++ b/packages/app-addresses/src/Creator.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import addressDecode from '@polkadot/util-keyring/address/decode';
 import addressEncode from '@polkadot/util-keyring/address/encode';
@@ -39,14 +38,10 @@ class Creator extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
     const { address } = this.state;
 
     return (
-      <div
-        className={classes('addresses--Creator', className)}
-        style={style}
-      >
+      <div className='addresses--Creator'>
         <div className='ui--grid'>
           <AddressSummary
             className='shrink'
diff --git a/packages/app-addresses/src/Editor.tsx b/packages/app-addresses/src/Editor.tsx
index a28e056571..38e4724978 100644
--- a/packages/app-addresses/src/Editor.tsx
+++ b/packages/app-addresses/src/Editor.tsx
@@ -11,7 +11,6 @@ import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import AddressSummary from '@polkadot/ui-app/AddressSummary';
 import InputAddress from '@polkadot/ui-app/InputAddress';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import addressObservable from '@polkadot/ui-keyring/observable/addresses';
 import withObservableBase from '@polkadot/ui-react-rx/with/observableBase';
@@ -39,13 +38,8 @@ class Editor extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('addresses--Editor', className)}
-        style={style}
-      >
+      <div className='addresses--Editor'>
         {this.renderData()}
         {this.renderButtons()}
       </div>
diff --git a/packages/app-addresses/src/index.tsx b/packages/app-addresses/src/index.tsx
index c7f5da13d5..38dc861637 100644
--- a/packages/app-addresses/src/index.tsx
+++ b/packages/app-addresses/src/index.tsx
@@ -7,11 +7,8 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-
 import Button from '@polkadot/ui-app/Button';
 
-import classes from '@polkadot/ui-app/util/classes';
-
 import Creator from './Creator';
 import Editor from './Editor';
 import translate from './translate';
@@ -36,15 +33,12 @@ class AddressesApp extends React.PureComponent<Props, State> {
   state: State = { action: 'edit' };
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { action } = this.state;
     const Component = Components[action];
 
     return (
-      <main
-        className={classes('addresses--App', className)}
-        style={style}
-      >
+      <main className='addresses--App'>
         <header>
           <Button.Group>
             <Button
diff --git a/packages/app-democracy/src/Item.tsx b/packages/app-democracy/src/Item.tsx
index 051aa372de..053b1d57a1 100644
--- a/packages/app-democracy/src/Item.tsx
+++ b/packages/app-democracy/src/Item.tsx
@@ -7,9 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import Card from '@polkadot/ui-app/Card';
 import Extrinsic from '@polkadot/ui-app/Extrinsic';
-import classes from '@polkadot/ui-app/util/classes';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 
 // TODO This would be nice as a shared component, move to ui-app as soon as
@@ -26,13 +24,10 @@ type Props = I18nProps & {
 // FIXME Duplicated layout here and in explorer, clean up with extrinsics
 class Item extends React.PureComponent<Props> {
   render () {
-    const { children, className, idNumber, proposal, proposalExtra, style } = this.props;
+    const { children, idNumber, proposal, proposalExtra } = this.props;
 
     return (
-      <Card
-        className={classes('democracy--Item', className)}
-        style={style}
-      >
+      <article className='democracy--Item'>
         <div className='democracy--Item-header'>
           <div className='democracy--Item-header-info'>
             <div className='democracy--Item-header-name'>
@@ -57,7 +52,7 @@ class Item extends React.PureComponent<Props> {
             {children}
           </div>
         </div>
-      </Card>
+      </article>
     );
   }
 }
diff --git a/packages/app-democracy/src/Proposal.tsx b/packages/app-democracy/src/Proposal.tsx
index 91c2527ea8..61616d45d1 100644
--- a/packages/app-democracy/src/Proposal.tsx
+++ b/packages/app-democracy/src/Proposal.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 import AddressMini from '@polkadot/ui-app/AddressMini';
 import Labelled from '@polkadot/ui-app/Labelled';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
@@ -26,15 +25,13 @@ type Props = I18nProps & {
 
 class Proposal extends React.PureComponent<Props> {
   render () {
-    const { className, idNumber, style, value } = this.props;
+    const { idNumber, value } = this.props;
 
     return (
       <Item
-        className={classes('democracy--Proposal', className)}
         idNumber={idNumber}
         proposal={value.proposal}
         proposalExtra={this.renderExtra()}
-        style={style}
       >
         {this.renderVoting()}
       </Item>
diff --git a/packages/app-democracy/src/Proposals.tsx b/packages/app-democracy/src/Proposals.tsx
index ce50f80956..77e6579b8f 100644
--- a/packages/app-democracy/src/Proposals.tsx
+++ b/packages/app-democracy/src/Proposals.tsx
@@ -6,7 +6,6 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { RxProposal } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 
@@ -19,18 +18,15 @@ type Props = I18nProps & {
 
 class Proposals extends React.PureComponent<Props> {
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
 
     return (
-      <div
-        className={classes('democracy--Proposals', className)}
-        style={style}
-      >
+      <section className='democracy--Proposals'>
         <h1>{t('proposals.header', {
           defaultValue: 'proposals'
         })}</h1>
         {this.renderProposals()}
-      </div>
+      </section>
     );
   }
 
diff --git a/packages/app-democracy/src/Referendum.tsx b/packages/app-democracy/src/Referendum.tsx
index 96c9fc6583..9dff4217df 100644
--- a/packages/app-democracy/src/Referendum.tsx
+++ b/packages/app-democracy/src/Referendum.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import Static from '@polkadot/ui-app/Static';
 import Doughnut from '@polkadot/ui-app/Chart/Doughnut';
 import VoteThreshold from '@polkadot/ui-app/Params/Param/VoteThreshold';
-import classes from '@polkadot/ui-app/util/classes';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
@@ -90,15 +89,13 @@ class Referendum extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, idNumber, style, value } = this.props;
+    const { idNumber, value } = this.props;
 
     return (
       <Item
-        className={classes('democracy--Referendum', className)}
         idNumber={idNumber}
         proposal={value.proposal}
         proposalExtra={this.renderExtra()}
-        style={style}
       >
         <Voting referendumId={idNumber} />
         {this.renderResults()}
diff --git a/packages/app-democracy/src/Referendums.tsx b/packages/app-democracy/src/Referendums.tsx
index 8f3a70c1e0..cbc4a16763 100644
--- a/packages/app-democracy/src/Referendums.tsx
+++ b/packages/app-democracy/src/Referendums.tsx
@@ -6,7 +6,6 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { RxReferendum } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 
@@ -19,18 +18,15 @@ type Props = I18nProps & {
 
 class Referendums extends React.PureComponent<Props> {
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
 
     return (
-      <div
-        className={classes('democracy--Referendums', className)}
-        style={style}
-      >
+      <section className='democracy--Referendums'>
         <h1>{t('referendums.header', {
           defaultValue: 'referendums'
         })}</h1>
         {this.renderReferendums()}
-      </div>
+      </section>
     );
   }
 
diff --git a/packages/app-democracy/src/Summary.tsx b/packages/app-democracy/src/Summary.tsx
index e6788fdfed..cc2b9abcd2 100644
--- a/packages/app-democracy/src/Summary.tsx
+++ b/packages/app-democracy/src/Summary.tsx
@@ -23,13 +23,10 @@ type Props = I18nProps & {
 
 class Summary extends React.PureComponent<Props> {
   render () {
-    const { className, democracyLaunchPeriod, democracyNextTally = new BN(0), democracyProposalCount, democracyReferendumCount = new BN(0), democracyVotingPeriod, style, t } = this.props;
+    const { democracyLaunchPeriod, democracyNextTally = new BN(0), democracyProposalCount, democracyReferendumCount = new BN(0), democracyVotingPeriod, t } = this.props;
 
     return (
-      <summary
-        className={className}
-        style={style}
-      >
+      <summary>
         <section>
           <CardSummary label={t('summary.proposalCount', {
             defaultValue: 'proposals'
diff --git a/packages/app-democracy/src/index.css b/packages/app-democracy/src/index.css
index 06f6a1ac0f..de0251d417 100644
--- a/packages/app-democracy/src/index.css
+++ b/packages/app-democracy/src/index.css
@@ -6,11 +6,6 @@
   margin-bottom: 1em;
 }
 
-.democracy--Proposals,
-.democracy--Referendums {
-  margin-bottom: 2rem;
-}
-
 .democracy--Item-header {
   display: flex;
   justify-content: space-between;
diff --git a/packages/app-explorer/src/BlockByHash/BlockByHash.tsx b/packages/app-explorer/src/BlockByHash/BlockByHash.tsx
index e9b2626b33..6b57cf6373 100644
--- a/packages/app-explorer/src/BlockByHash/BlockByHash.tsx
+++ b/packages/app-explorer/src/BlockByHash/BlockByHash.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import AddressMini from '@polkadot/ui-app/AddressMini';
-import Card from '@polkadot/ui-app/Card';
 import Extrinsic from '@polkadot/ui-app/Extrinsic';
 import prettyJson from '@polkadot/ui-app/util/prettyJson';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
@@ -39,16 +38,16 @@ class BlockByHash extends React.PureComponent<Props> {
     // TODO Remove, debug info for reverse-engineering
     console.log(prettyJson(chainGetBlock));
 
-    return (
-      <div className='explorer--BlockByHash'>
+    return [
+      <header key='header'>
         <BlockHeader
           value={header}
           withExtrinsics
         />
-        {this.renderExtrinsics()}
-        {this.renderJustification()}
-      </div>
-    );
+      </header>,
+      this.renderExtrinsics(),
+      this.renderJustification()
+    ];
   }
 
   private renderExtrinsics () {
@@ -56,7 +55,7 @@ class BlockByHash extends React.PureComponent<Props> {
     const { extrinsics } = chainGetBlock;
 
     return (
-      <div className='explorer--BlockByHash-extrinsics'>
+      <section key='extrinsics'>
         <h1>{t('block.extrinsics', {
           defaultValue: 'extrinsics'
         })}</h1>
@@ -66,7 +65,7 @@ class BlockByHash extends React.PureComponent<Props> {
               className='explorer--BlockByHash-extrinsic'
               key={`${value}:extrinsic:${index}`}
             >
-              <Card>
+              <article>
                 <div className='explorer--BlockByHash-extrinsic-header'>
                   <div className='explorer--BlockByHash-extrinsic-header-name'>
                     {extrinsic.extrinsic.section}.{extrinsic.extrinsic.name}
@@ -85,11 +84,11 @@ class BlockByHash extends React.PureComponent<Props> {
                   </div>
                 </div>
                 <Extrinsic value={extrinsic} />
-              </Card>
+              </article>
             </div>
           ))}
         </div>
-      </div>
+      </section>
     );
   }
 
@@ -98,7 +97,7 @@ class BlockByHash extends React.PureComponent<Props> {
     const { justification } = chainGetBlock;
 
     return (
-      <div className='explorer--BlockByHash-justification'>
+      <section key='justification'>
         <h1>{t('block.justifications', {
           defaultValue: 'justifications'
         })}</h1>
@@ -116,7 +115,7 @@ class BlockByHash extends React.PureComponent<Props> {
             </div>
           ))}
         </div>
-      </div>
+      </section>
     );
   }
 }
diff --git a/packages/app-explorer/src/BlockHeader/index.tsx b/packages/app-explorer/src/BlockHeader/index.tsx
index 4e3c03e9f5..d556ad8809 100644
--- a/packages/app-explorer/src/BlockHeader/index.tsx
+++ b/packages/app-explorer/src/BlockHeader/index.tsx
@@ -11,7 +11,6 @@ import './BlockHeader.css';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import headerHash from '@polkadot/primitives/codec/header/hash';
-import classes from '@polkadot/ui-app/util/classes';
 import numberFormat from '@polkadot/ui-react-rx/util/numberFormat';
 import withApi from '@polkadot/ui-react-rx/with/api';
 import u8aToHex from '@polkadot/util/u8a/toHex';
@@ -26,7 +25,7 @@ type Props = ApiProps & BareProps & {
 
 class BlockHeader extends React.PureComponent<Props> {
   render () {
-    const { apiMethods, className, value, style, withExtrinsics = false, withLink = false } = this.props;
+    const { apiMethods, value, withExtrinsics = false, withLink = false } = this.props;
 
     if (!value) {
       return null;
@@ -40,10 +39,7 @@ class BlockHeader extends React.PureComponent<Props> {
     const parentHex = u8aToHex(parentHash);
 
     return (
-      <div
-        className={classes('explorer--BlockHeader', className)}
-        style={style}
-      >
+      <div className='explorer--BlockHeader'>
         <div className='number'>
           <div>{numberFormat(number)}</div>
         </div>
diff --git a/packages/app-explorer/src/index.css b/packages/app-explorer/src/index.css
index fa4bfb2cb7..b026d35766 100644
--- a/packages/app-explorer/src/index.css
+++ b/packages/app-explorer/src/index.css
@@ -30,11 +30,6 @@
   text-align: right;
 }
 
-.explorer--BlockByHash-extrinsics,
-.explorer--BlockByHash-justification {
-  margin-top: 2em;
-}
-
 .explorer--BlockByHash-flexable {
   display: flex;
   flex-wrap: wrap;
diff --git a/packages/app-explorer/src/index.tsx b/packages/app-explorer/src/index.tsx
index c48a843070..6938723d24 100644
--- a/packages/app-explorer/src/index.tsx
+++ b/packages/app-explorer/src/index.tsx
@@ -8,7 +8,6 @@ import './index.css';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
-import classes from '@polkadot/ui-app/util/classes';
 
 import BlockByHash from './BlockByHash';
 import Main from './Main';
@@ -19,13 +18,8 @@ type Props = BareProps & {
 
 export default class ExplorerApp extends React.Component<Props> {
   render () {
-    const { className, style } = this.props;
-
     return (
-      <main
-        className={classes('explorer--App', className)}
-        style={style}
-      >
+      <main className='explorer--App'>
         <Switch>
           <Route path='/explorer/hash/:hash' component={BlockByHash} />
           <Route component={Main} />
diff --git a/packages/app-extrinsics/src/Account.tsx b/packages/app-extrinsics/src/Account.tsx
index 59bdd94349..d4a71e4cc6 100644
--- a/packages/app-extrinsics/src/Account.tsx
+++ b/packages/app-extrinsics/src/Account.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 
 import InputAddress from '@polkadot/ui-app/InputAddress';
 import Labelled from '@polkadot/ui-app/Labelled';
-import classes from '@polkadot/ui-app/util/classes';
 import Balance from '@polkadot/ui-react-rx/Balance';
 
 import translate from './translate';
@@ -41,13 +40,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, defaultValue, isDisabled, isError, isInput, label, style, type, withLabel } = this.props;
+    const { defaultValue, isDisabled, isError, isInput, label, type, withLabel } = this.props;
 
     return (
-      <div
-        className={classes('extrinsics--Account', 'ui--row', className)}
-        style={style}
-      >
+      <div className='extrinsics--Account ui--row'>
         <div className='large'>
           <InputAddress
             defaultValue={defaultValue}
diff --git a/packages/app-extrinsics/src/Extrinsic.tsx b/packages/app-extrinsics/src/Extrinsic.tsx
index 5fe51a447b..086f4e1ab4 100644
--- a/packages/app-extrinsics/src/Extrinsic.tsx
+++ b/packages/app-extrinsics/src/Extrinsic.tsx
@@ -14,7 +14,6 @@ import React from 'react';
 import encode from '@polkadot/extrinsics/codec/encode/extrinsic';
 import InputExtrinsic from '@polkadot/ui-app/InputExtrinsic';
 import Params from '@polkadot/ui-app/Params';
-import classes from '@polkadot/ui-app/util/classes';
 import isUndefined from '@polkadot/util/is/undefined';
 import withApi from '@polkadot/ui-react-rx/with/api';
 
@@ -49,14 +48,11 @@ class Extrinsic extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, defaultValue, isDisabled, isError, isPrivate, labelMethod, labelSection, style, withLabel } = this.props;
+    const { defaultValue, isDisabled, isError, isPrivate, labelMethod, labelSection, withLabel } = this.props;
     const { extrinsic } = this.state;
 
     return (
-      <div
-        className={classes('extrinsics--Extrinsic', className)}
-        style={style}
-      >
+      <div className='extrinsics--Extrinsic'>
         <InputExtrinsic
           defaultValue={defaultValue}
           isDisabled={isDisabled}
diff --git a/packages/app-extrinsics/src/Nonce.tsx b/packages/app-extrinsics/src/Nonce.tsx
index e440dde029..ebf4c2aa2c 100644
--- a/packages/app-extrinsics/src/Nonce.tsx
+++ b/packages/app-extrinsics/src/Nonce.tsx
@@ -8,7 +8,6 @@ import { BareProps } from '@polkadot/ui-app/types';
 import React from 'react';
 
 import Labelled from '@polkadot/ui-app/Labelled';
-import classes from '@polkadot/ui-app/util/classes';
 import RxNonce from '@polkadot/ui-react-rx/Nonce';
 
 type Props = BareProps & {
@@ -19,17 +18,14 @@ type Props = BareProps & {
 
 export default class Nonce extends React.PureComponent<Props> {
   render () {
-    const { className, label, style, rxChange, value } = this.props;
+    const { label, rxChange, value } = this.props;
 
     if (!value) {
       return null;
     }
 
     return (
-      <div
-        className={classes('ui--row', className)}
-        style={style}
-      >
+      <div className='ui--row'>
         <Labelled
           className='small'
           label={label}
diff --git a/packages/app-extrinsics/src/Selection.tsx b/packages/app-extrinsics/src/Selection.tsx
index 740ab12150..2772fedf4c 100644
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/packages/app-extrinsics/src/Selection.tsx
@@ -11,7 +11,6 @@ import React from 'react';
 import extrinsics from '@polkadot/extrinsics';
 import rpc from '@polkadot/jsonrpc';
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Account from './Account';
 import Extrinsic from './Extrinsic';
@@ -38,14 +37,11 @@ class Selection extends React.PureComponent<Props, State> {
   } as State;
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { publicKey, isValid } = this.state;
 
     return (
-      <div
-        className={classes('extrinsics--Selection', className)}
-        style={style}
-      >
+      <div className='extrinsics--Selection'>
         <Account
           isInput={false}
           label={t('display.sender', {
diff --git a/packages/app-extrinsics/src/index.tsx b/packages/app-extrinsics/src/index.tsx
index 420eea27f1..2b05020923 100644
--- a/packages/app-extrinsics/src/index.tsx
+++ b/packages/app-extrinsics/src/index.tsx
@@ -8,7 +8,6 @@ import { QueueProps } from '@polkadot/ui-signer/types';
 import './index.css';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import { QueueConsumer } from '@polkadot/ui-signer/Context';
 
 import Selection from './Selection';
@@ -19,13 +18,8 @@ type Props = BareProps & {
 
 export default class ExtrinsicsApp extends React.PureComponent<Props> {
   render () {
-    const { className, style } = this.props;
-
     return (
-      <main
-        className={classes('extrinsics--App', className)}
-        style={style}
-      >
+      <main className='extrinsics--App'>
         <QueueConsumer>
           {({ queueAdd }: QueueProps) => (
             <Selection queueAdd={queueAdd} />
diff --git a/packages/app-rpc/src/Account.tsx b/packages/app-rpc/src/Account.tsx
index 54dbf008ab..849d16ee43 100644
--- a/packages/app-rpc/src/Account.tsx
+++ b/packages/app-rpc/src/Account.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 
 import InputAddress from '@polkadot/ui-app/InputAddress';
 import Labelled from '@polkadot/ui-app/Labelled';
-import classes from '@polkadot/ui-app/util/classes';
 import Nonce from '@polkadot/ui-react-rx/Nonce';
 
 import translate from './translate';
@@ -38,13 +37,10 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, defaultValue, isError, style, t } = this.props;
+    const { defaultValue, isError, t } = this.props;
 
     return (
-      <div
-        className={classes('rpc--Account', 'ui--row', className)}
-        style={style}
-      >
+      <div className='rpc--Account ui--row'>
         <div className='large'>
           <InputAddress
             defaultValue={defaultValue}
diff --git a/packages/app-rpc/src/Results.tsx b/packages/app-rpc/src/Results.tsx
index e926224276..762eb6053c 100644
--- a/packages/app-rpc/src/Results.tsx
+++ b/packages/app-rpc/src/Results.tsx
@@ -8,7 +8,6 @@ import { QueueTx } from '@polkadot/ui-signer/types';
 import React from 'react';
 
 import Output from '@polkadot/ui-app/Output';
-import classes from '@polkadot/ui-app/util/classes';
 import prettyJson from '@polkadot/ui-app/util/prettyJson';
 import isUndefined from '@polkadot/util/is/undefined';
 
@@ -18,7 +17,7 @@ type Props = BareProps & {
 
 export default class Results extends React.PureComponent<Props> {
   render () {
-    const { className, queue = [], style } = this.props;
+    const { queue = [] } = this.props;
 
     const filtered = queue
       .filter(({ error, result }) =>
@@ -31,10 +30,7 @@ export default class Results extends React.PureComponent<Props> {
     }
 
     return (
-      <div
-        className={classes('rpc--Results', className)}
-        style={style}
-      >
+      <section className='rpc--Results'>
         {filtered.map(({ error, id, result, rpc: { section, name } }) => (
           <Output
             isError={!!error}
@@ -47,7 +43,7 @@ export default class Results extends React.PureComponent<Props> {
             }
           />
         ))}
-      </div>
+      </section>
     );
   }
 }
diff --git a/packages/app-rpc/src/Selection.tsx b/packages/app-rpc/src/Selection.tsx
index fc15e0219c..2f74f87f8c 100644
--- a/packages/app-rpc/src/Selection.tsx
+++ b/packages/app-rpc/src/Selection.tsx
@@ -12,12 +12,10 @@ import './index.css';
 
 import BN from 'bn.js';
 import React from 'react';
-
 import rpc from '@polkadot/jsonrpc';
 import Button from '@polkadot/ui-app/Button';
 import InputRpc from '@polkadot/ui-app/InputRpc';
 import Params from '@polkadot/ui-app/Params';
-import classes from '@polkadot/ui-app/util/classes';
 import rawToValues from '@polkadot/ui-signer/rawToValues';
 
 import Account from './Account';
@@ -47,14 +45,11 @@ class Selection extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { isValid, rpc } = this.state;
 
     return (
-      <div
-        className={classes('rpc--Selection', className)}
-        style={style}
-      >
+      <section className='rpc--Selection'>
         <InputRpc
           defaultValue={defaultMethod}
           onChange={this.onChangeMethod}
@@ -74,7 +69,7 @@ class Selection extends React.PureComponent<Props, State> {
             })}
           />
         </Button.Group>
-      </div>
+      </section>
     );
   }
 
diff --git a/packages/app-rpc/src/index.tsx b/packages/app-rpc/src/index.tsx
index 18bfe8d993..3e75009ae3 100644
--- a/packages/app-rpc/src/index.tsx
+++ b/packages/app-rpc/src/index.tsx
@@ -8,7 +8,6 @@ import { QueueProps } from '@polkadot/ui-signer/types';
 import './index.css';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import { QueueConsumer } from '@polkadot/ui-signer/Context';
 
 import Results from './Results';
@@ -20,13 +19,8 @@ type Props = BareProps & {
 
 export default class RpcApp extends React.PureComponent<Props> {
   render () {
-    const { className, style } = this.props;
-
     return (
-      <main
-        className={classes('rpc--App', className)}
-        style={style}
-      >
+      <main className='rpc--App'>
         <QueueConsumer>
           {({ queue, queueAdd }: QueueProps) => [
             <Selection
diff --git a/packages/app-staking/src/Account.tsx b/packages/app-staking/src/Account.tsx
index acdf376374..739b1d4e65 100644
--- a/packages/app-staking/src/Account.tsx
+++ b/packages/app-staking/src/Account.tsx
@@ -15,7 +15,6 @@ import extrinsics from '@polkadot/extrinsics';
 import AddressMini from '@polkadot/ui-app/AddressMini';
 import AddressSummary from '@polkadot/ui-app/AddressSummary';
 import Button from '@polkadot/ui-app/Button';
-import Card from '@polkadot/ui-app/Card';
 import Icon from '@polkadot/ui-app/Icon';
 import classes from '@polkadot/ui-app/util/classes';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
@@ -53,14 +52,11 @@ class Account extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { address, className, intentions, isValidator, name, style } = this.props;
+    const { address, intentions, isValidator, name } = this.props;
     const { isNominateOpen } = this.state;
 
     return (
-      <Card
-        className={classes('staking--Account', className)}
-        style={style}
-      >
+      <article className='staking--Account'>
         <Icon
           className={classes('staking--Account-validating', isValidator ? 'isValidator' : '')}
           name='certificate'
@@ -83,7 +79,7 @@ class Account extends React.PureComponent<Props, State> {
             {this.renderNominators()}
           </div>
         </AddressSummary>
-      </Card>
+      </article>
     );
   }
 
diff --git a/packages/app-staking/src/Nominating.tsx b/packages/app-staking/src/Nominating.tsx
index 310fdbce5d..cb83abaa45 100644
--- a/packages/app-staking/src/Nominating.tsx
+++ b/packages/app-staking/src/Nominating.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Input from '@polkadot/ui-app/Input';
 import Modal from '@polkadot/ui-app/Modal';
-import classes from '@polkadot/ui-app/util/classes';
 
 import translate from './translate';
 
@@ -38,7 +37,7 @@ class Nominating extends React.PureComponent<Props> {
   }
 
   render () {
-    const { className, isOpen, style } = this.props;
+    const { isOpen, style } = this.props;
 
     if (!isOpen) {
       return null;
@@ -46,7 +45,7 @@ class Nominating extends React.PureComponent<Props> {
 
     return (
       <Modal
-        className={classes('ui--signer-Signer', className)}
+        className='staking--Nominating'
         dimmer='inverted'
         open
         style={style}
diff --git a/packages/app-staking/src/StakeList.tsx b/packages/app-staking/src/StakeList.tsx
index f190807917..dba248b6ed 100644
--- a/packages/app-staking/src/StakeList.tsx
+++ b/packages/app-staking/src/StakeList.tsx
@@ -7,7 +7,6 @@ import { QueueProps } from '@polkadot/ui-signer/types';
 import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import { QueueConsumer } from '@polkadot/ui-signer/Context';
 
@@ -22,15 +21,12 @@ type Props = I18nProps & {
 
 class StakeList extends React.PureComponent<Props> {
   render () {
-    const { balances, className, intentions, style, validators } = this.props;
+    const { balances, intentions, validators } = this.props;
 
     return (
       <QueueConsumer>
         {({ queueExtrinsic }: QueueProps) => (
-          <div
-            className={classes('staking--StakeList', className)}
-            style={style}
-          >
+          <div className='staking--StakeList'>
             {keyring.getAccounts().map((account) => {
               const address = account.address();
               const name = account.getMeta().name || '';
diff --git a/packages/app-staking/src/UnnominateButton.tsx b/packages/app-staking/src/UnnominateButton.tsx
index d02f88b946..6b26059264 100644
--- a/packages/app-staking/src/UnnominateButton.tsx
+++ b/packages/app-staking/src/UnnominateButton.tsx
@@ -6,7 +6,6 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 
@@ -21,7 +20,7 @@ type Props = I18nProps & {
 
 class UnnominateButton extends React.Component<Props> {
   render () {
-    const { className, nominating, stakingNominatorsFor, style, t } = this.props;
+    const { nominating, stakingNominatorsFor, style, t } = this.props;
 
     if (!nominating || !stakingNominatorsFor || stakingNominatorsFor.length === 0) {
       return null;
@@ -29,7 +28,7 @@ class UnnominateButton extends React.Component<Props> {
 
     return (
       <Button
-        className={classes('staking--Account-buttons', className)}
+        className='staking--Account-buttons'
         style={style}
         isNegative
         onClick={this.onClick}
diff --git a/packages/app-staking/src/index.tsx b/packages/app-staking/src/index.tsx
index 02f2b89a2a..868da8aaae 100644
--- a/packages/app-staking/src/index.tsx
+++ b/packages/app-staking/src/index.tsx
@@ -6,7 +6,6 @@ import { BareProps } from '@polkadot/ui-app/types';
 import { RxBalanceMap } from '@polkadot/ui-react-rx/ApiObservable/types';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservable from '@polkadot/ui-react-rx/with/observable';
 import withMulti from '@polkadot/ui-react-rx/with/multi';
 
@@ -24,13 +23,10 @@ type Props = BareProps & {
 
 class App extends React.PureComponent<Props> {
   render () {
-    const { className, sessionValidators = [], stakingIntentions = [], style, validatingBalances = {} } = this.props;
+    const { sessionValidators = [], stakingIntentions = [], validatingBalances = {} } = this.props;
 
     return (
-      <main
-        className={classes('staking--App', className)}
-        style={style}
-      >
+      <main className='staking--App'>
         <Summary
           balances={validatingBalances}
           intentions={stakingIntentions}
diff --git a/packages/app-storage/src/Queries.tsx b/packages/app-storage/src/Queries.tsx
index ef068069cf..19be82ae49 100644
--- a/packages/app-storage/src/Queries.tsx
+++ b/packages/app-storage/src/Queries.tsx
@@ -2,34 +2,28 @@
 // This software may be modified and distributed under the terms
 // of the ISC license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/ui-app/types';
+import { BareProps } from '@polkadot/ui-app/types';
 import { StorageQuery } from './types';
 
 import React from 'react';
 
-import classes from '@polkadot/ui-app/util/classes';
-
-import translate from './translate';
 import Query from './Query';
 
-type Props = I18nProps & {
+type Props = BareProps & {
   onRemove: (id: number) => void,
   value?: Array<StorageQuery>
 };
 
-class Queries extends React.PureComponent<Props> {
+export default class Queries extends React.PureComponent<Props> {
   render () {
-    const { className, onRemove, style, value } = this.props;
+    const { onRemove, value } = this.props;
 
     if (!value || !value.length) {
       return null;
     }
 
     return (
-      <div
-        className={classes('storage--Queries', className)}
-        style={style}
-      >
+      <section className='storage--Queries'>
         {value.map((query) =>
           <Query
             key={query.id}
@@ -37,9 +31,7 @@ class Queries extends React.PureComponent<Props> {
             value={query}
           />
         )}
-      </div>
+      </section>
     );
   }
 }
-
-export default translate(Queries);
diff --git a/packages/app-storage/src/Query.tsx b/packages/app-storage/src/Query.tsx
index a1b8b2236b..4f07332771 100644
--- a/packages/app-storage/src/Query.tsx
+++ b/packages/app-storage/src/Query.tsx
@@ -12,7 +12,6 @@ import typeToString from '@polkadot/params/typeToString';
 import Button from '@polkadot/ui-app/Button';
 import Labelled from '@polkadot/ui-app/Labelled';
 import valueToText from '@polkadot/ui-app/Params/valueToText';
-import classes from '@polkadot/ui-app/util/classes';
 import withObservableDiv from '@polkadot/ui-react-rx/with/observableDiv';
 
 import translate from './translate';
@@ -67,14 +66,11 @@ class Query extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style, value: { key } } = this.props;
+    const { value: { key } } = this.props;
     const { Component, inputs } = this.state;
 
     return (
-      <div
-        className={classes('storage--Query', 'storage--actionrow', className)}
-        style={style}
-      >
+      <div className='storage--Query storage--actionrow'>
         <Labelled
           className='storage--actionrow-value'
           label={
diff --git a/packages/app-storage/src/Selection.tsx b/packages/app-storage/src/Selection.tsx
index 3cfebbfca0..d231582f82 100644
--- a/packages/app-storage/src/Selection.tsx
+++ b/packages/app-storage/src/Selection.tsx
@@ -15,7 +15,6 @@ import Button from '@polkadot/ui-app/Button';
 import InputStorage from '@polkadot/ui-app/InputStorage';
 import Labelled from '@polkadot/ui-app/Labelled';
 import Params from '@polkadot/ui-app/Params';
-import classes from '@polkadot/ui-app/util/classes';
 import isUndefined from '@polkadot/util/is/undefined';
 
 import translate from './translate';
@@ -41,14 +40,11 @@ class Selection extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
     const { isValid, key } = this.state;
 
     return (
-      <div
-        className={classes('storage--Selection', 'storage--actionrow', className)}
-        style={style}
-      >
+      <section className='storage--Selection storage--actionrow'>
         <div className='storage--actionrow-value'>
           <InputStorage
             defaultValue={defaultValue}
@@ -71,7 +67,7 @@ class Selection extends React.PureComponent<Props, State> {
             onClick={this.onAdd}
           />
         </Labelled>
-      </div>
+      </section>
     );
   }
 
diff --git a/packages/app-storage/src/index.css b/packages/app-storage/src/index.css
index cbd4452ea1..194d33935f 100644
--- a/packages/app-storage/src/index.css
+++ b/packages/app-storage/src/index.css
@@ -2,10 +2,6 @@
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
 
-.storage--Queries {
-  margin-top: 2em;
-}
-
 .storage--Query {
   margin-bottom: 0.25em;
   padding: 0.25em 0;
diff --git a/packages/app-storage/src/index.tsx b/packages/app-storage/src/index.tsx
index 152bb85e36..088f2e2250 100644
--- a/packages/app-storage/src/index.tsx
+++ b/packages/app-storage/src/index.tsx
@@ -8,7 +8,6 @@ import { StorageQuery } from './types';
 import './index.css';
 
 import React from 'react';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Queries from './Queries';
 import Selection from './Selection';
@@ -28,14 +27,10 @@ class StorageApp extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style } = this.props;
     const { queue } = this.state;
 
     return (
-      <main
-        className={classes('storage--App', className)}
-        style={style}
-      >
+      <main className='storage--App'>
         <Selection onAdd={this.onAdd} />
         <Queries
           onRemove={this.onRemove}
diff --git a/packages/app-toolbox/src/Hash.tsx b/packages/app-toolbox/src/Hash.tsx
index 39c58d435f..0eb84dd937 100644
--- a/packages/app-toolbox/src/Hash.tsx
+++ b/packages/app-toolbox/src/Hash.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import Input from '@polkadot/ui-app/Input';
 import Output from '@polkadot/ui-app/Output';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
 import u8aFromString from '@polkadot/util/u8a/fromString';
@@ -31,13 +30,8 @@ class Hash extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('toolbox--Hash', className)}
-        style={style}
-      >
+      <div className='toolbox--Hash'>
         {this.renderInput()}
         {this.renderOutput()}
       </div>
diff --git a/packages/app-toolbox/src/Sign.tsx b/packages/app-toolbox/src/Sign.tsx
index fdf75faae4..22ad836021 100644
--- a/packages/app-toolbox/src/Sign.tsx
+++ b/packages/app-toolbox/src/Sign.tsx
@@ -12,7 +12,6 @@ import Input from '@polkadot/ui-app/Input';
 import InputAddress from '@polkadot/ui-app/InputAddress';
 import Output from '@polkadot/ui-app/Output';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
@@ -57,13 +56,8 @@ class Sign extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('toolbox--Sign', className)}
-        style={style}
-      >
+      <div className='toolbox--Sign'>
         {this.renderAccount()}
         {this.renderInput()}
         {this.renderSignature()}
diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx
index 42f4879edf..a4c669217e 100644
--- a/packages/app-toolbox/src/Unlock.tsx
+++ b/packages/app-toolbox/src/Unlock.tsx
@@ -11,7 +11,6 @@ import { Trans } from 'react-i18next';
 import Button from '@polkadot/ui-app/Button';
 import Modal from '@polkadot/ui-app/Modal';
 import Password from '@polkadot/ui-app/Password';
-import classes from '@polkadot/ui-app/util/classes';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 
 import translate from './translate';
@@ -48,14 +47,13 @@ class Unlock extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style, t } = this.props;
+    const { t } = this.props;
 
     return (
       <Modal
-        className={classes('toolbox--Unlock', className)}
+        className='toolbox--Unlock'
         dimmer='inverted'
         open
-        style={style}
       >
         <Modal.Header>
           {t('unlock.header', {
diff --git a/packages/app-toolbox/src/Verify.tsx b/packages/app-toolbox/src/Verify.tsx
index 609752ff10..e1096cec4a 100644
--- a/packages/app-toolbox/src/Verify.tsx
+++ b/packages/app-toolbox/src/Verify.tsx
@@ -10,7 +10,6 @@ import Icon from '@polkadot/ui-app/Icon';
 import Input from '@polkadot/ui-app/Input';
 import InputAddress from '@polkadot/ui-app/InputAddress';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import hexToU8a from '@polkadot/util/hex/toU8a';
 import isHex from '@polkadot/util/is/hex';
@@ -55,13 +54,8 @@ class Verify extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <div
-        className={classes('toolbox--Verify', className)}
-        style={style}
-      >
+      <div className='toolbox--Verify'>
         {this.renderInput()}
         {this.renderAddress()}
         {this.renderSignature()}
diff --git a/packages/app-toolbox/src/index.tsx b/packages/app-toolbox/src/index.tsx
index ae4683c81a..2589bcf191 100644
--- a/packages/app-toolbox/src/index.tsx
+++ b/packages/app-toolbox/src/index.tsx
@@ -8,7 +8,6 @@ import './index.css';
 
 import React from 'react';
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Hash from './Hash';
 import Sign from './Sign';
@@ -38,15 +37,11 @@ class ToolboxApp extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style } = this.props;
     const { action } = this.state;
     const Component = Components[action];
 
     return (
-      <main
-        className={classes('toolbox--App', className)}
-        style={style}
-      >
+      <main className='toolbox--App'>
         {this.renderButtons()}
         <Component />
       </main>
diff --git a/packages/app-vanitygen/src/Match.tsx b/packages/app-vanitygen/src/Match.tsx
index d5f7514394..bac6d26dbf 100644
--- a/packages/app-vanitygen/src/Match.tsx
+++ b/packages/app-vanitygen/src/Match.tsx
@@ -8,7 +8,6 @@ import React from 'react';
 
 import CopyButton from '@polkadot/ui-app/CopyButton';
 import Button from '@polkadot/ui-app/Button';
-import classes from '@polkadot/ui-app/util/classes';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 import u8aToHex from '@polkadot/util/u8a/toHex';
 
@@ -34,14 +33,11 @@ export default class Match extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { address, className, count, offset, style } = this.props;
+    const { address, count, offset } = this.props;
     const { hexSeed } = this.state;
 
     return (
-      <div
-        className={classes('vanity--Match', className)}
-        style={style}
-      >
+      <div className='vanity--Match'>
         <div className='vanity--Match-item'>
           <IdentityIcon
             className='vanity--Match-icon'
diff --git a/packages/app-vanitygen/src/index.tsx b/packages/app-vanitygen/src/index.tsx
index 7f7ce85ed8..da672a2d7e 100644
--- a/packages/app-vanitygen/src/index.tsx
+++ b/packages/app-vanitygen/src/index.tsx
@@ -12,7 +12,6 @@ import Button from '@polkadot/ui-app/Button';
 import Dropdown from '@polkadot/ui-app/Dropdown';
 import Input from '@polkadot/ui-app/Input';
 import Static from '@polkadot/ui-app/Static';
-import classes from '@polkadot/ui-app/util/classes';
 
 import Match from './Match';
 import generator from './generator';
@@ -57,13 +56,8 @@ class VanityApp extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, style } = this.props;
-
     return (
-      <main
-        className={classes('vanity--App', className)}
-        style={style}
-      >
+      <main className='vanity--App'>
         {this.renderOptions()}
         {this.renderButtons()}
         {this.renderStats()}
diff --git a/packages/apps/src/Connecting/index.tsx b/packages/apps/src/Connecting/index.tsx
index 2f3b96d815..d7881c4ee4 100644
--- a/packages/apps/src/Connecting/index.tsx
+++ b/packages/apps/src/Connecting/index.tsx
@@ -8,8 +8,6 @@ import { ApiProps } from '@polkadot/ui-react-rx/types';
 import './Connecting.css';
 
 import React from 'react';
-
-import classes from '@polkadot/ui-app/util/classes';
 import withApi from '@polkadot/ui-react-rx/with/api';
 
 import translate from '../translate';
@@ -18,17 +16,14 @@ type Props = I18nProps & ApiProps;
 
 class Connecting extends React.PureComponent<Props> {
   render () {
-    const { apiConnected, className, style, t } = this.props;
+    const { apiConnected, t } = this.props;
 
     if (apiConnected) {
       return null;
     }
 
     return (
-      <div
-        className={classes('apps--Connecting', className)}
-        style={style}
-      >
+      <div className='apps--Connecting'>
         <div className='apps--Connecting-text'>
           {t('connecting.disconnected', {
             defaultValue: 'You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.'
diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index edf3e68fcf..621c956f32 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -9,8 +9,6 @@ import './Content.css';
 import React from 'react';
 import { withRouter } from 'react-router';
 
-import classes from '@polkadot/ui-app/util/classes';
-
 import routing from '../routing';
 import NotFound from './NotFound';
 
@@ -25,7 +23,7 @@ const unknown = {
 
 class Content extends React.PureComponent<Props> {
   render () {
-    const { className, location, style } = this.props;
+    const { location } = this.props;
 
     const app = location.pathname.slice(1) || '';
     const { Component, name } = routing.routes.find((route) =>
@@ -33,10 +31,7 @@ class Content extends React.PureComponent<Props> {
     ) || unknown;
 
     return (
-      <div
-        className={classes('apps--Content', className)}
-        style={style}
-      >
+      <div className='apps--Content'>
         <Component basePath={`/${name}`} />
       </div>
     );
diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx
index 7ae21be123..bfc1e8739c 100644
--- a/packages/apps/src/SideBar/index.tsx
+++ b/packages/apps/src/SideBar/index.tsx
@@ -9,7 +9,6 @@ import './SideBar.css';
 import React from 'react';
 import Icon from '@polkadot/ui-app/Icon';
 import Menu from '@polkadot/ui-app/Menu';
-import classes from '@polkadot/ui-app/util/classes';
 
 import polkadotLogo from '../static/polkadot-white.svg';
 import routing from '../routing';
@@ -22,13 +21,10 @@ type Props = I18nProps & {
 
 class SideBar extends React.PureComponent<Props> {
   render () {
-    const { children, className, style, t } = this.props;
+    const { children, t } = this.props;
 
     return (
-      <div
-        className={classes('apps--SideBar', className)}
-        style={style}
-      >
+      <div className='apps--SideBar'>
         <Menu
           secondary
           vertical
diff --git a/packages/apps/src/index.tsx b/packages/apps/src/index.tsx
index c3bdd5ebd3..ef52b2b97a 100644
--- a/packages/apps/src/index.tsx
+++ b/packages/apps/src/index.tsx
@@ -7,9 +7,7 @@ import { BareProps } from '@polkadot/ui-app/types';
 import './index.css';
 
 import React from 'react';
-
 import createApp from '@polkadot/ui-app/index';
-import classes from '@polkadot/ui-app/util/classes';
 import Signer from '@polkadot/ui-signer/index';
 
 import Connecting from './Connecting';
@@ -19,12 +17,9 @@ import SideBar from './SideBar';
 
 type Props = BareProps & {};
 
-function App ({ className, style }: Props) {
+function App (props: Props) {
   return (
-    <div
-      className={classes('apps--App', className)}
-      style={style}
-    >
+    <div className='apps--App'>
       <SideBar>
         <NodeInfo />
       </SideBar>
diff --git a/packages/ui-app/src/Card.tsx b/packages/ui-app/src/Card.tsx
deleted file mode 100644
index a52f0ab54c..0000000000
--- a/packages/ui-app/src/Card.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright 2017-2018 @polkadot/ui-app authors & contributors
-// This software may be modified and distributed under the terms
-// of the ISC license. See the LICENSE file for details.
-
-import { BareProps } from './types';
-
-import React from 'react';
-
-import classes from './util/classes';
-
-type Props = BareProps & {
-  children: React.ReactNode
-};
-
-export default class Card extends React.PureComponent<Props> {
-  render () {
-    const { children, className, style } = this.props;
-
-    return (
-      <div
-        className={classes('ui--Card', className)}
-        style={style}
-      >
-        {children}
-      </div>
-    );
-  }
-}
diff --git a/packages/ui-app/src/CardSummary.tsx b/packages/ui-app/src/CardSummary.tsx
index fac78ab582..f23ce9522c 100644
--- a/packages/ui-app/src/CardSummary.tsx
+++ b/packages/ui-app/src/CardSummary.tsx
@@ -8,7 +8,6 @@ import BN from 'bn.js';
 import React from 'react';
 import isUndefined from '@polkadot/util/is/undefined';
 
-import Card from './Card';
 import Progress, { Colors as ProgressColors } from './Progress';
 import Labelled from './Labelled';
 import classes from './util/classes';
@@ -46,7 +45,7 @@ export default class CardSummary extends React.PureComponent<Props> {
       : undefined;
 
     return (
-      <Card
+      <article
         className={classes('ui--CardSummary', className)}
         style={style}
       >
@@ -73,7 +72,7 @@ export default class CardSummary extends React.PureComponent<Props> {
             )
           }
         </Labelled>
-      </Card>
+      </article>
     );
   }
 }
diff --git a/packages/ui-app/src/styles/app.css b/packages/ui-app/src/styles/app.css
index 1bb5de7fc0..c234e56517 100644
--- a/packages/ui-app/src/styles/app.css
+++ b/packages/ui-app/src/styles/app.css
@@ -33,6 +33,18 @@ main {
   padding: 1em 2em;
 }
 
+main > section {
+  margin-bottom: 2em;
+}
+
+article {
+  background: #fefefe;
+  border: 1px solid #fafafa;
+  border-radius: 0.25rem;
+  margin: 0.5rem;
+  padding: 1.5rem;
+}
+
 header,
 summary {
   margin-bottom: 2em;
@@ -52,6 +64,11 @@ summary {
   flex-wrap: wrap;
 }
 
+summary article {
+  flex: 0 1 auto;
+  text-align: left;
+}
+
 summary > section {
   display: flex;
   flex: 0 1 auto;
diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css
index 17cebf0d7d..b705a0bdb0 100644
--- a/packages/ui-app/src/styles/components.css
+++ b/packages/ui-app/src/styles/components.css
@@ -136,19 +136,6 @@ header .ui--Button-Group {
   padding: 0;
 }
 
-.ui--Card {
-  background: #fcfcfc;
-  border: 1px solid #fafafa;
-  border-radius: 0.25rem;
-  margin: 0.5rem;
-  padding: 1.5rem;
-}
-
-summary .ui--Card {
-  flex: 0 1 auto;
-  text-align: left;
-}
-
 .ui--CardSummary .ui.label {
   padding-left: 0;
   padding-right: 0;
diff --git a/packages/ui-signer/src/Modal.tsx b/packages/ui-signer/src/Modal.tsx
index e0a73cea4e..006c2812bc 100644
--- a/packages/ui-signer/src/Modal.tsx
+++ b/packages/ui-signer/src/Modal.tsx
@@ -9,7 +9,6 @@ import { QueueTx, QueueTx$MessageSetStatus } from './types';
 import React from 'react';
 import Button from '@polkadot/ui-app/Button';
 import Modal from '@polkadot/ui-app/Modal';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 import withApi from '@polkadot/ui-react-rx/with/api';
 
@@ -79,7 +78,6 @@ class Signer extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, style } = this.props;
     const { currentItem } = this.state;
 
     if (!currentItem || currentItem.rpc.isSigned !== true) {
@@ -88,10 +86,9 @@ class Signer extends React.PureComponent<Props, State> {
 
     return (
       <Modal
-        className={classes('ui--signer-Signer', className)}
+        className='ui--signer-Signer'
         dimmer='inverted'
         open
-        style={style}
       >
         {this.renderContent()}
         {this.renderButtons()}
diff --git a/packages/ui-signer/src/Status.tsx b/packages/ui-signer/src/Status.tsx
index f3afea724d..963a80a22a 100644
--- a/packages/ui-signer/src/Status.tsx
+++ b/packages/ui-signer/src/Status.tsx
@@ -15,7 +15,7 @@ type Props = BareProps & {
 
 export default class Status extends React.PureComponent<Props> {
   render () {
-    const { queue, className, style } = this.props;
+    const { queue } = this.props;
     const available = queue.filter(({ status }) =>
 
       !['completed', 'incomplete'].includes(status)
@@ -26,10 +26,7 @@ export default class Status extends React.PureComponent<Props> {
     }
 
     return (
-      <div
-        className={classes('ui--signer-Status', className)}
-        style={style}
-      >
+      <div className='ui--signer-Status'>
         {available.map(({ rpc: { name, section }, id, status }) =>
           <div
             className={classes('ui--signer-Status-Item', status)}
diff --git a/packages/ui-signer/src/Unlock.tsx b/packages/ui-signer/src/Unlock.tsx
index 66b0e208c7..ec42be3afe 100644
--- a/packages/ui-signer/src/Unlock.tsx
+++ b/packages/ui-signer/src/Unlock.tsx
@@ -8,7 +8,6 @@ import { KeyringPair } from '@polkadot/util-keyring/types';
 import React from 'react';
 
 import Password from '@polkadot/ui-app/Password';
-import classes from '@polkadot/ui-app/util/classes';
 import keyring from '@polkadot/ui-keyring/index';
 
 import translate from './translate';
@@ -41,7 +40,7 @@ class Unlock extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, onChange, password, style, t } = this.props;
+    const { onChange, password, t } = this.props;
     const { isError, isLocked } = this.state;
 
     if (!isLocked) {
@@ -49,10 +48,7 @@ class Unlock extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div
-        className={classes('ui--signer-Signer-Unlock', className)}
-        style={style}
-      >
+      <div className='ui--signer-Signer-Unlock'>
         <div className='ui--row'>
           <Password
             className='medium'