diff --git a/packages/app-council/src/Motions/Motion.tsx b/packages/app-council/src/Motions/Motion.tsx
new file mode 100644
index 0000000000..f948f51aa6
--- /dev/null
+++ b/packages/app-council/src/Motions/Motion.tsx
@@ -0,0 +1,171 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { I18nProps } from '@polkadot/ui-app/types';
+import { Option, Proposal, Votes } from '@polkadot/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import styled from 'styled-components';
+import { ActionItem, InputAddress, Labelled, Voting } from '@polkadot/ui-app';
+import { withCalls, withMulti } from '@polkadot/ui-api';
+
+import translate from '../translate';
+
+type Props = I18nProps & {
+  chain_bestNumber?: BN,
+  hash: string,
+  proposal: Proposal | null,
+  votes: Votes | null
+};
+
+type State = {
+  votedTotal: number,
+  votedNay: number,
+  votedAye: number
+};
+
+class Motion extends React.PureComponent<Props, State> {
+  state: State = {
+    votedTotal: 0,
+    votedAye: 0,
+    votedNay: 0
+  };
+
+  static getDerivedStateFromProps ({ votes }: Props): State | null {
+    if (!votes) {
+      return null;
+    }
+
+    const { ayes, nays } = votes;
+
+    const newState: State = {
+      votedNay: nays.length,
+      votedAye: ayes.length,
+      votedTotal: ayes.length + nays.length
+    };
+
+    return newState;
+  }
+
+  render () {
+    const { className, hash, proposal, votes } = this.props;
+
+    if (!proposal || !votes) {
+      return null;
+    }
+
+    const { index } = votes;
+
+    return (
+      <ActionItem
+        className={className}
+        accessory={
+          <Voting
+            hash={hash}
+            isCouncil
+            idNumber={index}
+            proposal={proposal}
+          />
+        }
+        expandNested
+        idNumber={index}
+        proposal={proposal}
+      >
+        {this.renderInfo()}
+      </ActionItem>
+    );
+  }
+
+  private renderInfo () {
+    const { votes, t } = this.props;
+
+    if (!votes) {
+      return null;
+    }
+
+    const { ayes, nays, threshold } = votes;
+
+    return (
+      <div>
+        <h4>
+          {t(
+            'ayes ({{ayes}}/{{threshold}} to approve)',
+            {
+              replace: {
+                ayes: ayes.length,
+                threshold: threshold.toString()
+              }
+            }
+          )}
+        </h4>
+        {ayes.map((address, index) => (
+          <Labelled
+            key={`${index}:${address}`}
+            label={t('Aye')}
+          >
+            <InputAddress
+              isDisabled
+              value={address}
+              withLabel={false}
+            />
+          </Labelled>
+        ))}
+        <h4>
+          {t(
+            'nays ({{nays}})',
+            {
+              replace: {
+                nays: nays.length
+              }
+            }
+          )}
+        </h4>
+        {nays.map((address, index) => (
+          <Labelled
+            key={`${index}:${address}`}
+            label={t('Nay')}
+          >
+            <InputAddress
+              isDisabled
+              value={address}
+              withLabel={false}
+            />
+          </Labelled>
+        ))}
+      </div>
+    );
+  }
+}
+
+export default withMulti(
+  styled(Motion as React.ComponentClass<Props>)`
+    .democracy--Motion-results {
+      margin-bottom: 1em;
+
+      &.chart {
+        text-align: center;
+      }
+    }
+  `,
+  translate,
+  withCalls<Props>(
+    [
+      'query.councilMotions.proposalOf',
+      {
+        paramName: 'hash',
+        propName: 'proposal',
+        transform: (value: Option<Proposal>) => value.unwrapOr(null)
+      }
+    ],
+    [
+      'query.councilMotions.voting',
+      {
+        paramName: 'hash',
+        propName: 'votes',
+        transform: (value: Option<Votes>) => value.unwrapOr(null)
+      }
+    ]
+  )
+);
diff --git a/packages/app-council/src/Motions/Propose.tsx b/packages/app-council/src/Motions/Propose.tsx
new file mode 100644
index 0000000000..6ccc18c8b0
--- /dev/null
+++ b/packages/app-council/src/Motions/Propose.tsx
@@ -0,0 +1,144 @@
+// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { ApiProps } from '@polkadot/ui-api/types';
+import { Method, Proposal } from '@polkadot/types';
+
+import BN from 'bn.js';
+import React from 'react';
+
+import { Button, Extrinsic, InputNumber } from '@polkadot/ui-app';
+import TxModal, { TxModalState, TxModalProps } from '@polkadot/ui-app/TxModal';
+import { withApi, withCalls, withMulti } from '@polkadot/ui-api';
+
+import translate from '../translate';
+
+type Props = TxModalProps & ApiProps & {
+  memberCount: number
+};
+
+type State = TxModalState & {
+  method: Method | null,
+  threshold: BN | null
+};
+
+class Propose extends TxModal<Props, State> {
+  constructor (props: Props) {
+    super(props);
+
+    this.defaultState = {
+      ...this.defaultState,
+      method: null,
+      threshold: props.memberCount ? new BN((props.memberCount / 2) + 1) : null
+    };
+    this.state = this.defaultState;
+  }
+
+  static getDerivedStateFromProps ({ memberCount }: Props, { threshold }: State) {
+    if (!threshold && memberCount > 0) {
+      const simpleMajority = new BN((memberCount / 2) + 1);
+      return { threshold: simpleMajority };
+    }
+    return null;
+  }
+
+  headerText = () => this.props.t('Propose a council motion');
+
+  txMethod = () => 'councilMotions.propose';
+  txParams = () => {
+    const { method, threshold } = this.state;
+
+    return [
+      threshold,
+      ...(method ? [new Proposal(method)] : [])
+    ];
+  }
+
+  isDisabled = () => {
+    const { memberCount = 0 } = this.props;
+    const { accountId, method, threshold } = this.state;
+
+    const hasThreshold = !!threshold && threshold.gtn(0) && threshold.ltn(memberCount + 1);
+    const hasMethod = !!method;
+
+    return !accountId || !hasMethod || !hasThreshold;
+  }
+
+  renderTrigger = () => {
+    const { t } = this.props;
+
+    return (
+      <Button.Group>
+        <Button
+          isPrimary
+          label={t('Propose a council motion')}
+          labelIcon='add'
+          onClick={this.showModal}
+        />
+      </Button.Group>
+    );
+  }
+
+  renderContent = () => {
+    const { apiDefaultTxSudo, memberCount = 0, t } = this.props;
+    const { threshold } = this.state;
+
+    return (
+      <>
+        <InputNumber
+          className='medium'
+          label={t('threshold')}
+          help={t('The minimum number of council votes required to approve this motion')}
+          isError={!threshold || threshold.eqn(0) || threshold.gtn(memberCount)}
+          onChange={this.onChangeThreshold}
+          onEnter={this.sendTx}
+          placeholder={
+            t(
+              'Positive number between 1 and {{memberCount}}',
+              { replace: { memberCount } }
+            )
+          }
+          value={threshold || new BN(0)}
+        />
+        <Extrinsic
+          defaultValue={apiDefaultTxSudo}
+          label={t('proposal')}
+          onChange={this.onChangeExtrinsic}
+          onEnter={this.sendTx}
+        />
+      </>
+    );
+  }
+
+  private onChangeThreshold = (threshold?: BN): void => {
+    const { memberCount = 0 } = this.props;
+    if (memberCount > 0 && !this.defaultState.threshold) {
+      this.defaultState.threshold = new BN((memberCount / 2) + 1);
+    }
+    this.setState({ threshold } as State);
+  }
+
+  private onChangeExtrinsic = (method: Method): void => {
+    if (!method) {
+      return;
+    }
+
+    this.setState({ method } as State);
+  }
+}
+
+export default withMulti(
+  Propose,
+  translate,
+  withApi,
+  withCalls(
+    [
+      'query.council.activeCouncil',
+      {
+        propName: 'memberCount',
+        transform: (value: Array<any>) => value.length
+      }
+    ]
+  )
+);
diff --git a/packages/app-council/src/Motions/Summary.tsx b/packages/app-council/src/Motions/Summary.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/app-council/src/Motions/index.tsx b/packages/app-council/src/Motions/index.tsx
new file mode 100644
index 0000000000..e0211c55dd
--- /dev/null
+++ b/packages/app-council/src/Motions/index.tsx
@@ -0,0 +1,53 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Hash } from '@polkadot/types';
+import { I18nProps } from '@polkadot/ui-app/types';
+
+import React from 'react';
+import { withCalls } from '@polkadot/ui-api';
+import { CardGrid } from '@polkadot/ui-app';
+
+import Motion from './Motion';
+import Propose from './Propose';
+import translate from '../translate';
+
+type Props = I18nProps & {
+  councilMotions_proposals?: Array<Hash>
+};
+
+class Motions extends React.PureComponent<Props> {
+  render () {
+    const { t } = this.props;
+
+    return (
+      <CardGrid
+        emptyText={t('No council motions')}
+        headerText={t('Motions')}
+        buttons={
+          <Propose />
+        }
+      >
+        {this.renderMotions()}
+      </CardGrid>
+    );
+  }
+
+  private renderMotions () {
+    const { councilMotions_proposals = [] } = this.props;
+
+    return councilMotions_proposals.map((hash) => (
+      <Motion
+        hash={hash.toHex()}
+        key={hash.toHex()}
+      />
+    ));
+  }
+}
+
+export default translate(
+  withCalls<Props>(
+    'query.councilMotions.proposals'
+  )(Motions)
+);
diff --git a/packages/app-council/src/index.tsx b/packages/app-council/src/index.tsx
index 2202e4942d..2ee7796cec 100644
--- a/packages/app-council/src/index.tsx
+++ b/packages/app-council/src/index.tsx
@@ -10,6 +10,7 @@ import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/ui-app';
 
 import Overview from './Overview';
+import Motions from './Motions';
 import translate from './translate';
 
 type Props = AppProps & BareProps & I18nProps;
@@ -30,6 +31,10 @@ class App extends React.PureComponent<Props, State> {
           isRoot: true,
           name: 'overview',
           text: t('Council overview')
+        },
+        {
+          name: 'motions',
+          text: t('Motions')
         }
       ]
     };
@@ -48,6 +53,7 @@ class App extends React.PureComponent<Props, State> {
           />
         </header>
         <Switch>
+          <Route path={`${basePath}/motions`} component={Motions} />
           <Route component={Overview} />
         </Switch>
       </main>
diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx
index 4c51642120..7ccdc3c475 100644
--- a/packages/app-democracy/src/Overview/Referendum.tsx
+++ b/packages/app-democracy/src/Overview/Referendum.tsx
@@ -10,14 +10,13 @@ import { RawParam } from '@polkadot/ui-params/types';
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
-import { ActionItem, Chart, Static } from '@polkadot/ui-app';
+import { ActionItem, Chart, Static, Voting } from '@polkadot/ui-app';
 import { formatBalance, formatNumber } from '@polkadot/util';
 import settings from '@polkadot/ui-settings';
 import VoteThreshold from '@polkadot/ui-params/Param/VoteThreshold';
 import { withCalls, withMulti } from '@polkadot/ui-api';
 
 import translate from '../translate';
-import Voting from './Voting';
 
 const COLORS_AYE = settings.uiTheme === 'substrate'
   ? ['#4d4', '#4e4']
@@ -100,7 +99,10 @@ class Referendum extends React.PureComponent<Props, State> {
         idNumber={value.index}
         proposal={value.proposal}
         accessory={
-          <Voting referendumId={value.index} />
+          <Voting
+            idNumber={value.index}
+            proposal={value.proposal}
+          />
         }
       >
         {this.renderInfo()}
diff --git a/packages/app-democracy/src/Overview/Voting.tsx b/packages/app-democracy/src/Overview/Voting.tsx
index aa693ef155..ff82fd146a 100644
--- a/packages/app-democracy/src/Overview/Voting.tsx
+++ b/packages/app-democracy/src/Overview/Voting.tsx
@@ -82,7 +82,7 @@ class Voting extends React.PureComponent<Props, State> {
         <Modal.Header>{t('Vote on proposal')}</Modal.Header>
         <Modal.Content>
           <InputAddress
-            help={t('Select the account you wish to vote with. You can approve "yay" or deny "nay" the proposal.')}
+            help={t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.')}
             label={t('vote with account')}
             onChange={this.onChangeAccount}
             type='account'
diff --git a/packages/app-democracy/src/md/basic.md b/packages/app-democracy/src/md/basic.md
index 100b577d23..77950f6bd7 100644
--- a/packages/app-democracy/src/md/basic.md
+++ b/packages/app-democracy/src/md/basic.md
@@ -9,5 +9,5 @@ This lists the proposals that you can not vote on yet. The proposal with the hig
 
 # Referendum
 
-This lists the proposal that you can now vote for "yay" or against "nay".
+This lists the proposal that you can now vote for "aye" or against "nay".
 At the end of the launch period, and depending on the outcome of the referendum, the action that was subjected to vote will be executed or rejected.
diff --git a/packages/app-treasury/src/Overview/Approve.tsx b/packages/app-treasury/src/Overview/Approve.tsx
index a94a893d41..c9f74e4d79 100644
--- a/packages/app-treasury/src/Overview/Approve.tsx
+++ b/packages/app-treasury/src/Overview/Approve.tsx
@@ -2,18 +2,22 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ApiProps } from '@polkadot/ui-api/types';
 import { I18nProps } from '@polkadot/ui-app/types';
+import { AccountId, BlockNumber } from '@polkadot/types';
 
 import React from 'react';
-import { Dropdown } from '@polkadot/ui-app';
+import { Button, Dropdown } from '@polkadot/ui-app';
+import { withMulti, withApi, withCalls } from '@polkadot/ui-api';
 import TxModal, { TxModalProps, TxModalState } from '@polkadot/ui-app/TxModal';
 
 import translate from '../translate';
 
-type Props = I18nProps & TxModalProps & {
+type Props = I18nProps & ApiProps & TxModalProps & {
   isApproved?: boolean,
   proposalInfo?: React.ReactNode,
-  proposalId: string
+  proposalId: string,
+  threshold: number
 };
 
 type State = TxModalState & {
@@ -33,19 +37,40 @@ class Approve extends TxModal<Props, State> {
 
   headerText = () => this.props.t('Approve or reject proposal');
 
-  txMethod = () => this.state.isApproving ? 'treasury.approveProposal' : 'treasury.rejectProposal';
-  txParams = () => [this.props.proposalId];
+  txMethod = () => 'councilMotions.propose';
+  txParams = () => {
+    const { api, proposalId, threshold } = this.props;
+    const { isApproving } = this.state;
+
+    const method = isApproving ? 'approveProposal' : 'rejectProposal';
+    const spendProposal = api.tx.treasury[method](proposalId);
+    return [threshold, spendProposal];
+  }
+
+  renderTrigger = () => {
+    const { t } = this.props;
+    return (
+      <div className='ui--Row-buttons'>
+        <Button.Group>
+          <Button
+            isPrimary
+            label={t('Respond')}
+            labelIcon='reply'
+            onClick={this.showModal}
+          />
+        </Button.Group>
+      </div>
+    );
+  }
 
   renderPreContent = () => {
     const { proposalInfo = null } = this.props;
 
-    return (
-      <>
-        {proposalInfo}
-        <br />
-        <br />
-      </>
-    );
+    if (!proposalInfo) {
+      return null;
+    }
+
+    return proposalInfo;
   }
 
   renderContent = () => {
@@ -54,8 +79,8 @@ class Approve extends TxModal<Props, State> {
 
     return (
       <Dropdown
-        help={t('Select your vote preference for this spend proposal, either to approve or disapprove')}
-        label={t('action')}
+        help={t('Propose a majority council motion to either approve or reject this spend proposal')}
+        label={t('proposed council action')}
         options={this.approveOptions()}
         onChange={this.onChangeApproving}
         value={isApproving}
@@ -68,4 +93,17 @@ class Approve extends TxModal<Props, State> {
   }
 }
 
-export default translate(Approve);
+export default withMulti(
+  Approve,
+  translate,
+  withApi,
+  withCalls(
+    [
+      'query.council.activeCouncil',
+      {
+        propName: 'threshold',
+        transform: (value: Array<[AccountId, BlockNumber]>) => 1 + (value.length / 2)
+      }
+    ]
+  )
+);
diff --git a/packages/app-treasury/src/Overview/Item.tsx b/packages/app-treasury/src/Overview/Item.tsx
deleted file mode 100644
index 0b739b66f3..0000000000
--- a/packages/app-treasury/src/Overview/Item.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/ui-app/types';
-
-import React from 'react';
-import styled from 'styled-components';
-import { TreasuryProposal } from '@polkadot/types';
-import { Card } from '@polkadot/ui-app';
-import { styles as rowStyles } from '@polkadot/ui-app/Row';
-
-import translate from '../translate';
-
-type Props = I18nProps & {
-  children?: React.ReactNode,
-  isApproved?: boolean,
-  proposal: TreasuryProposal,
-  proposalExtra?: React.ReactNode,
-  proposalId: string
-};
-
-class Item extends React.PureComponent<Props> {
-  render () {
-    const { children, className, proposalExtra, proposalId } = this.props;
-
-    return (
-      <Card className={className}>
-        <div className='ui--Row'>
-          <div className='ui--Row-base'>
-            <div className='ui--Row-details treasury--Item-header'>
-              <h3 className='treasury--Item-header-id'>
-                #{proposalId}
-              </h3>
-            </div>
-            {children}
-          </div>
-          {proposalExtra}
-        </div>
-      </Card>
-    );
-  }
-}
-
-export default translate(styled(Item as React.ComponentClass<Props>)`
-  ${rowStyles}
-
-  .treasury--Item-header {
-    margin: -0.5rem -0.5rem 0 0;
-  }
-
-  .treasury--Approve-approved {
-    color: green;
-    margin: 0;
-  }
-
-  .treasury--Item-header-id {
-    font-size: 2rem;
-    line-height: 2rem;
-  }
-`);
diff --git a/packages/app-treasury/src/Overview/Proposal.tsx b/packages/app-treasury/src/Overview/Proposal.tsx
index 9123d14aa0..b41541d722 100644
--- a/packages/app-treasury/src/Overview/Proposal.tsx
+++ b/packages/app-treasury/src/Overview/Proposal.tsx
@@ -6,20 +6,27 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
 import React from 'react';
-import { Option, TreasuryProposal } from '@polkadot/types';
-import { ActionItem, Button, Icon, InputAddress, Labelled, Static } from '@polkadot/ui-app';
+import styled from 'styled-components';
+import { Option, TreasuryProposal as TreasuryProposalType } from '@polkadot/types';
+import { ActionItem, Icon, TreasuryProposal } from '@polkadot/ui-app';
 import { withCalls, withMulti, withObservable } from '@polkadot/ui-api';
 import keyring from '@polkadot/ui-keyring';
-import { formatBalance } from '@polkadot/util';
 
 import translate from '../translate';
 import Approve from './Approve';
 
+const Approved = styled.h3`
+  color: green;
+  margin: 0;
+`;
+
 type Props = I18nProps & {
   allAccounts?: SubjectInfo,
   isApproved: boolean,
-  proposal?: TreasuryProposal | null,
-  proposalId: string
+  proposal?: TreasuryProposalType | null,
+  proposalId: string,
+  onPopulate: () => void,
+  onRespond: () => void
 };
 
 type State = {
@@ -27,6 +34,23 @@ type State = {
 };
 
 class ProposalDisplay extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props);
+
+    const { proposal, onPopulate } = props;
+    if (proposal) {
+      onPopulate();
+    }
+  }
+
+  componentWillReceiveProps ({ proposal }: Props) {
+    const { onPopulate } = this.props;
+
+    if (proposal && !this.props.proposal) {
+      onPopulate();
+    }
+  }
+
   state: State = {
     isApproveOpen: false
   };
@@ -43,22 +67,21 @@ class ProposalDisplay extends React.PureComponent<Props, State> {
         accessory={this.renderAccessory()}
         idNumber={proposalId}
       >
-        {this.renderInfo()}
+        <TreasuryProposal proposal={proposal} />
       </ActionItem>
     );
   }
 
   private renderAccessory () {
-    const { allAccounts, isApproved, proposalId, t } = this.props;
-    const { isApproveOpen } = this.state;
+    const { allAccounts, isApproved, onRespond, proposal, proposalId, t } = this.props;
 
     if (isApproved) {
       return (
-        <h3 className='treasury--Approve-approved'>
+        <Approved>
           <Icon name='check' />
           {'  '}
           {t('Approved')}
-        </h3>
+        </Approved>
       );
     }
 
@@ -68,73 +91,21 @@ class ProposalDisplay extends React.PureComponent<Props, State> {
     }
 
     return (
-      <>
-        <div className='ui--Row-buttons'>
-          <Button.Group>
-            <Button
-              isPrimary
-              label={t('Respond')}
-              labelIcon='reply'
-              onClick={this.showApprove}
-            />
-          </Button.Group>
-        </div>
-        <Approve
-          isOpen={isApproveOpen}
-          onClose={this.hideApprove}
-          proposalInfo={this.renderInfo()}
-          proposalId={proposalId}
-        />
-      </>
+      <Approve
+        proposalInfo={
+          <>
+            <h3>Proposal #{proposalId}</h3>
+            <details>
+              <TreasuryProposal proposal={proposal} />
+            </details>
+            <br />
+          </>
+        }
+        proposalId={proposalId}
+        onSuccess={onRespond}
+      />
     );
   }
-
-  private renderInfo () {
-    const { isApproved, proposal, t } = this.props;
-
-    if (!proposal) {
-      return null;
-    }
-
-    const { bond, beneficiary, proposer, value } = proposal;
-
-    return (
-      <div className={['treasury--Proposal-info', !isApproved && 'with-children'].join(' ')}>
-        <Labelled label={t('proposed by')}>
-          <InputAddress
-            isDisabled
-            value={proposer}
-            withLabel={false}
-          />
-        </Labelled>
-        <Labelled label={t('beneficiary')}>
-          <InputAddress
-            isDisabled
-            value={beneficiary}
-            withLabel={false}
-          />
-        </Labelled>
-        <Static label={t('value')}>
-          {formatBalance(value)}
-        </Static>
-        <Static label={t('bond')}>
-          {formatBalance(bond)}
-        </Static>
-      </div>
-    );
-  }
-
-  private showApprove = (): void => {
-    this.setState({
-      isApproveOpen: true
-    });
-  }
-
-  private hideApprove = (): void => {
-    this.setState({
-      isApproveOpen: false
-    });
-  }
 }
 
 export default withMulti(
@@ -144,7 +115,7 @@ export default withMulti(
     ['query.treasury.proposals', {
       paramName: 'proposalId',
       propName: 'proposal',
-      transform: (value: Option<TreasuryProposal>) =>
+      transform: (value: Option<TreasuryProposalType>) =>
         value.unwrapOr(null)
     }]
   ),
diff --git a/packages/app-treasury/src/Overview/Proposals.tsx b/packages/app-treasury/src/Overview/Proposals.tsx
index f377c6a056..bd2bd32d29 100644
--- a/packages/app-treasury/src/Overview/Proposals.tsx
+++ b/packages/app-treasury/src/Overview/Proposals.tsx
@@ -7,27 +7,29 @@ import { ProposalIndex } from '@polkadot/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import styled from 'styled-components';
+import { RouteComponentProps } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import { withCalls, withMulti } from '@polkadot/ui-api';
-import { Button, Column } from '@polkadot/ui-app';
+import { Column } from '@polkadot/ui-app';
 
 import Proposal from './Proposal';
-import Propose from './Propose';
 import translate from '../translate';
 
-type Props = I18nProps & {
+type Props = I18nProps & RouteComponentProps & {
   isApprovals?: boolean,
   treasury_approvals?: Array<BN>,
   treasury_proposalCount?: BN
 };
 
 type State = {
+  isEmpty: boolean,
   isProposeOpen: boolean,
   proposalIndices: Array<BN>
 };
 
 class ProposalsBase extends React.PureComponent<Props> {
   state: State = {
+    isEmpty: true,
     isProposeOpen: false,
     proposalIndices: [] as Array<BN>
   };
@@ -39,7 +41,9 @@ class ProposalsBase extends React.PureComponent<Props> {
       proposalIndices = treasury_approvals;
     } else {
       for (let i = 0; i < treasury_proposalCount.toNumber(); i++) {
-        proposalIndices.push(new BN(i));
+        if (!treasury_approvals.find(index => index.eqn(i))) {
+          proposalIndices.push(new BN(i));
+        }
       }
     }
     return { proposalIndices };
@@ -47,32 +51,17 @@ class ProposalsBase extends React.PureComponent<Props> {
 
   render () {
     const { isApprovals, t } = this.props;
-    const { isProposeOpen } = this.state;
+    const { isEmpty } = this.state;
 
     return (
       <>
         <Column
           emptyText={t(isApprovals ? 'No approved proposals' : 'No pending proposals')}
           headerText={t(isApprovals ? 'Approved' : 'Proposals')}
-          buttons={!isApprovals && (
-            <Button.Group>
-              <Button
-                isPrimary
-                label={t('Submit a spend proposal')}
-                labelIcon='add'
-                onClick={this.togglePropose(true)}
-              />
-            </Button.Group>
-          )}
+          isEmpty={isEmpty}
         >
           {this.renderProposals()}
         </Column>
-        {!isApprovals && (
-          <Propose
-            isOpen={isProposeOpen}
-            onClose={this.togglePropose(false)}
-          />
-        )}
       </>
     );
   }
@@ -84,26 +73,32 @@ class ProposalsBase extends React.PureComponent<Props> {
     return proposalIndices.map((proposalId) => (
       <Proposal
         isApproved={isApprovals}
+        onPopulate={this.onPopulateProposal}
+        onRespond={this.onRespond}
         proposalId={proposalId.toString()}
         key={proposalId.toString()}
       />
     ));
   }
 
-  private togglePropose = (isProposeOpen: boolean) => () => {
-    this.setState({
-      isProposeOpen
+  onRespond = () => {
+    const { history } = this.props;
+
+    history.push('/council/motions');
+  }
+
+  private onPopulateProposal = () => {
+    this.setState(({ isEmpty }: State) => {
+      if (isEmpty) {
+        return { isEmpty: false };
+      }
+      return null;
     });
   }
 }
 
 const Proposals = withMulti(
-  styled(ProposalsBase as React.ComponentClass<Props, State>)`
-    .treasury--Proposals-inner {
-      display: flex;
-      flex-wrap: column;
-    }
-  `,
+  ProposalsBase,
   translate,
   withCalls<Props>(
     [
@@ -113,7 +108,8 @@ const Proposals = withMulti(
       }
     ],
     'query.treasury.proposalCount'
-  )
+  ),
+  withRouter
 );
 
 export default Proposals;
diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx
index 51701e2879..268a0cb02a 100644
--- a/packages/app-treasury/src/Overview/Propose.tsx
+++ b/packages/app-treasury/src/Overview/Propose.tsx
@@ -5,7 +5,7 @@
 import BN from 'bn.js';
 import React from 'react';
 
-import { InputAddress, InputBalance } from '@polkadot/ui-app';
+import { Button, InputAddress, InputBalance } from '@polkadot/ui-app';
 import TxModal, { TxModalState, TxModalProps } from '@polkadot/ui-app/TxModal';
 
 import translate from '../translate';
@@ -42,6 +42,21 @@ class Propose extends TxModal<Props, State> {
     return !accountId || !hasValue || !hasBeneficiary;
   }
 
+  renderTrigger = () => {
+    const { t } = this.props;
+
+    return (
+      <Button.Group>
+        <Button
+          isPrimary
+          label={t('Submit a spend proposal')}
+          labelIcon='add'
+          onClick={this.showModal}
+        />
+      </Button.Group>
+    );
+  }
+
   renderContent = () => {
     const { t } = this.props;
     const { value } = this.state;
diff --git a/packages/app-treasury/src/Overview/index.tsx b/packages/app-treasury/src/Overview/index.tsx
index 35f32512fe..26e43918c4 100644
--- a/packages/app-treasury/src/Overview/index.tsx
+++ b/packages/app-treasury/src/Overview/index.tsx
@@ -9,6 +9,7 @@ import { Columar } from '@polkadot/ui-app';
 
 import Summary from './Summary';
 import Proposals, { Approvals } from './Proposals';
+import Propose from './Propose';
 
 type Props = AppProps & BareProps & I18nProps;
 
@@ -25,6 +26,7 @@ export default class Overview extends React.PureComponent<Props, State> {
     return (
       <>
         <Summary />
+        <Propose />
         <Columar>
           <Proposals />
           <Approvals />
diff --git a/packages/app-treasury/src/index.tsx b/packages/app-treasury/src/index.tsx
index c832e48d30..658e41b78a 100644
--- a/packages/app-treasury/src/index.tsx
+++ b/packages/app-treasury/src/index.tsx
@@ -11,7 +11,7 @@ import { HelpOverlay, Tabs } from '@polkadot/ui-app';
 
 import basicMd from './md/basic.md';
 import Overview from './Overview';
-import Settings from './Settings';
+// import Settings from './Settings';
 
 import translate from './translate';
 
@@ -33,11 +33,11 @@ class App extends React.PureComponent<Props, State> {
           isRoot: true,
           name: 'overview',
           text: t('Treasury overview')
-        },
-        {
-          name: 'settings',
-          text: t('Edit settings')
         }
+        // {
+        //   name: 'settings',
+        //   text: t('Edit settings')
+        // }
       ]
     };
   }
@@ -56,7 +56,7 @@ class App extends React.PureComponent<Props, State> {
           />
         </header>
         <Switch>
-          <Route path={`${basePath}/settings`} component={Settings} />
+          {/*<Route path={`${basePath}/settings`} component={Settings} />*/}
           <Route component={Overview} />
         </Switch>
       </main>
diff --git a/packages/ui-app/src/ActionItem.tsx b/packages/ui-app/src/ActionItem.tsx
index cbfdea35b8..f1a0a43cff 100644
--- a/packages/ui-app/src/ActionItem.tsx
+++ b/packages/ui-app/src/ActionItem.tsx
@@ -2,82 +2,42 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Method, Proposal } from '@polkadot/types';
+import { Proposal } from '@polkadot/types';
 
 import BN from 'bn.js';
 import React from 'react';
+import { RouteComponentProps } from 'react-router';
+import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
-import { formatNumber } from '@polkadot/util';
 
-import Call from './Call';
 import Card from './Card';
+import ProposedAction, { styles as proposedActionStyles } from './ProposedAction';
 import { styles as rowStyles } from './Row';
 
-type Props = {
+type Props = RouteComponentProps & {
   className?: string,
   children?: React.ReactNode,
   accessory?: React.ReactNode,
-  proposal?: Proposal,
-  idNumber: BN | number | string
+  proposal?: Proposal | null,
+  idNumber: BN | number | string,
+  expandNested?: boolean
 };
 
 export const styles = `
   ${rowStyles}
-
-  .ui--ActionItem-extrinsic {
-    margin-top: 1rem;
-
-    .ui--Params-Content {
-      padding-left: 0;
-    }
-  }
-
-  .ui--ActionItem-header {
-    margin-bottom: 1rem;
-  }
-
-  .ui--ActionItem-buttons {
-
-  }
+  ${proposedActionStyles}
 `;
 
 class ActionItem extends React.PureComponent<Props> {
   render () {
-    const { className, children, accessory, proposal } = this.props;
-
-    const idNumber = typeof this.props.idNumber === 'string'
-      ? this.props.idNumber
-      : formatNumber(this.props.idNumber);
+    const { className, children, accessory } = this.props;
 
     return (
       <Card className={className}>
         <div className='ui--Row'>
           <div className='ui--Row-base'>
             <div className='ui--Row-details'>
-              {
-                proposal ?
-                  (() => {
-                    const { meta, method, section } = Method.findFunction(proposal.callIndex);
-
-                    return (
-                      <>
-                        <h3>#{idNumber}: {section}.{method}</h3>
-                        {meta && meta.documentation && (
-                          <details>
-                            <summary>{meta.documentation.join(' ')}</summary>
-                          </details>
-                        )}
-                        <Call
-                          className='ui--ActionItem-extrinsic'
-                          value={proposal}
-                        />
-                      </>
-                    );
-                  })() :
-                  (
-                    <h3>#{idNumber}</h3>
-                  )
-              }
+              {this.renderProposal()}
             </div>
             {accessory}
           </div>
@@ -86,6 +46,19 @@ class ActionItem extends React.PureComponent<Props> {
       </Card>
     );
   }
+
+  private renderProposal () {
+    const { idNumber, proposal, expandNested } = this.props;
+
+    return (
+      <ProposedAction
+        idNumber={idNumber}
+        proposal={proposal}
+        withLinks={expandNested}
+        expandNested={expandNested}
+      />
+    );
+  }
 }
 
-export default styled(ActionItem as React.ComponentClass<Props>)`${styles}`;
+export default withRouter(styled(ActionItem as React.ComponentClass<Props>)`${styles}`);
diff --git a/packages/ui-app/src/CardGrid.tsx b/packages/ui-app/src/CardGrid.tsx
index 059149a820..2cd00b082b 100644
--- a/packages/ui-app/src/CardGrid.tsx
+++ b/packages/ui-app/src/CardGrid.tsx
@@ -14,9 +14,9 @@ type Props = CollectionProps;
 type State = CollectionState;
 
 class CardGrid extends Collection<Props, State> {
-  static getDerivedStateFromProps ({ children, isEmpty }: Props) {
-    if (isEmpty || !children || (children as Array<any>).length <= 0) {
-      return { isEmpty: true, showHeader: false };
+  static getDerivedStateFromProps ({ children, headerText }: Props) {
+    if (!children || (children as Array<any>).length <= 0) {
+      return { isEmpty: true, showHeader: !!headerText };
     }
     return { isEmpty: false, showHeader: true };
   }
diff --git a/packages/ui-app/src/Collection.tsx b/packages/ui-app/src/Collection.tsx
index d50ec5253b..4b5086fe9d 100644
--- a/packages/ui-app/src/Collection.tsx
+++ b/packages/ui-app/src/Collection.tsx
@@ -101,7 +101,6 @@ export default class Collection<P extends CollectionProps, S extends CollectionS
 
   protected renderCollection (): React.ReactNode {
     const { children } = this.props;
-
     return children;
   }
 }
diff --git a/packages/ui-app/src/Column.tsx b/packages/ui-app/src/Column.tsx
index 84e822c8f4..1a860b20d6 100644
--- a/packages/ui-app/src/Column.tsx
+++ b/packages/ui-app/src/Column.tsx
@@ -21,10 +21,8 @@ class Column extends Collection<Props, State> {
     return (
       <div className={`ui--Column ${className}`}>
         {this.renderHeader()}
-        {isEmpty ?
-          this.renderEmpty() :
-          this.renderCollection()
-        }
+        {isEmpty && this.renderEmpty()}
+        {this.renderCollection()}
       </div>
     );
   }
@@ -50,6 +48,7 @@ export default translate(
     ${collectionStyles}
 
     box-sizing: border-box;
+    max-width: 100%;
     flex: 1 1;
     margin: 0;
     padding: 0.5rem;
diff --git a/packages/ui-app/src/InputNumber.tsx b/packages/ui-app/src/InputNumber.tsx
index cda0f009ed..c0591a905f 100644
--- a/packages/ui-app/src/InputNumber.tsx
+++ b/packages/ui-app/src/InputNumber.tsx
@@ -91,7 +91,7 @@ class InputNumber extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { bitLength = DEFAULT_BITLENGTH, className, help, isSi, isDisabled, isError = false, maxLength, maxValue, onEnter, style, withMax, t } = this.props;
+    const { bitLength = DEFAULT_BITLENGTH, className, help, isSi, isDisabled, isError = false, maxLength, maxValue, onEnter, placeholder, style, withMax, t } = this.props;
     const { isValid, value } = this.state;
     const maxValueLength = this.maxValue(bitLength).toString().length - 1;
 
@@ -109,7 +109,7 @@ class InputNumber extends React.PureComponent<Props, State> {
         onKeyDown={this.onKeyDown}
         onKeyUp={this.onKeyUp}
         onPaste={this.onPaste}
-        placeholder={t('Positive number')}
+        placeholder={placeholder || t('Positive number')}
         style={style}
         type='text'
         value={value}
diff --git a/packages/ui-app/src/Inset.tsx b/packages/ui-app/src/Inset.tsx
new file mode 100644
index 0000000000..a098952048
--- /dev/null
+++ b/packages/ui-app/src/Inset.tsx
@@ -0,0 +1,153 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import { RouteComponentProps } from 'react-router';
+import { withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+
+import Icon from './Icon';
+import { classes } from './util';
+
+export type InsetProps = RouteComponentProps & {
+  className?: string,
+  children?: React.ReactNode
+  isCollapsible?: boolean,
+  header?: React.ReactNode,
+  href?: string | null,
+  withTopMargin?: boolean,
+  withBottomMargin?: boolean
+};
+
+type State = {
+  isCollapsed: boolean
+};
+
+class Inset extends React.PureComponent<InsetProps, State> {
+  state: State = {
+    isCollapsed: true
+  };
+
+  render () {
+    const { children, className, isCollapsible, header, href, withBottomMargin, withTopMargin } = this.props;
+    const { isCollapsed } = this.state;
+
+    if (!children) {
+      return null;
+    }
+
+    return (
+      <div
+        className={
+          classes(
+            'ui--Inset',
+            href && 'as-link',
+            isCollapsible && 'collapsible',
+            withBottomMargin && 'bottom-margin',
+            withTopMargin && 'top-margin',
+            className
+          )
+        }
+      >
+        {isCollapsible && (
+          <div
+            className='header'
+            onClick={this.toggleCollapsed}
+          >
+            <h3>{header}</h3>
+            <Icon
+              className={classes(isCollapsed && 'collapsed')}
+              name='angle up'
+            />
+          </div>
+        )}
+        <div
+          className={classes('children', (isCollapsible && isCollapsed) && 'collapsed')}
+          onClick={href ? this.onClick : undefined}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  private onClick = () => {
+    const { history, href } = this.props;
+
+    history.push(href!);
+  }
+
+  private toggleCollapsed = () => {
+    this.setState(({ isCollapsed }: State) => {
+      return {
+        isCollapsed: !isCollapsed
+      };
+    });
+  }
+}
+
+export default withRouter(
+  styled(Inset as React.ComponentClass<InsetProps, State>)`
+    & {
+      box-shadow: 0 3px 3px rgba(0,0,0,.2);
+      position: relative;
+      background: #fefefe;
+      padding: 1rem;
+      transition: all 0.2s;
+      display: flex;
+      flex-direction: column;
+
+      &.bottom-margin {
+        margin-bottom: 2rem;
+      }
+
+      &.top-margin {
+        margin-top: 2rem;
+      }
+
+      .header {
+        cursor: pointer;
+        height: 2rem;
+        width: 100%;
+
+        h3 {
+          line-height: 2rem;
+          margin-bottom: 0;
+        }
+
+        .icon {
+          height: 4rem;
+          width: 4rem;
+          font-size: 2rem;
+          color: rgba(0,0,0,0.35);
+          position: absolute;
+          right: 0;
+          top: 0;
+          line-height: 4rem;
+          transition: all 0.2s;
+          transform-origin: center center;
+
+          &.collapsed {
+            transform: rotate(180deg);
+          }
+        }
+      }
+
+      .children {
+        &.collapsed {
+          display: none;
+        }
+      }
+
+      &.as-link {
+        cursor: pointer;
+
+        &:hover {
+          box-shadow: 0 5px 5px rgba(0,0,0,.2);
+          transform: translateY(-2px);
+        }
+      }
+    }
+  `
+);
diff --git a/packages/ui-app/src/Labelled.tsx b/packages/ui-app/src/Labelled.tsx
index 2f98244a2f..7ab895252b 100644
--- a/packages/ui-app/src/Labelled.tsx
+++ b/packages/ui-app/src/Labelled.tsx
@@ -35,6 +35,10 @@ const Wrapper = styled.div`
     white-space: nowrap;
   }
 
+  > label {
+    text-transform: lowercase;
+  }
+
   &.label-small {
     display: block;
 
diff --git a/packages/ui-app/src/ProposedAction.tsx b/packages/ui-app/src/ProposedAction.tsx
new file mode 100644
index 0000000000..321e0293a5
--- /dev/null
+++ b/packages/ui-app/src/ProposedAction.tsx
@@ -0,0 +1,120 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Method, Proposal } from '@polkadot/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import styled from 'styled-components';
+import { formatNumber } from '@polkadot/util';
+
+import Call from './Call';
+import Inset, { InsetProps } from './Inset';
+import TreasuryProposal from './TreasuryProposal';
+import { isTreasuryProposalVote } from './util';
+
+type Props = {
+  className?: string,
+  asInset?: boolean,
+  insetProps?: Partial<InsetProps>,
+  proposal?: Proposal | null,
+  idNumber: BN | number | string,
+  isCollapsible?: boolean,
+  withLinks?: boolean,
+  expandNested?: boolean
+};
+
+export const styles = `
+  .ui--ProposedAction-extrinsic {
+    margin-bottom: 1rem;
+
+    .ui--Params-Content {
+      padding-left: 0;
+    }
+  }
+
+  .ui--ProposedAction-header {
+    margin-bottom: 1rem;
+  }
+`;
+
+class ProposedAction extends React.PureComponent<Props> {
+  render () {
+    const { asInset, insetProps, isCollapsible, proposal, withLinks, expandNested } = this.props;
+
+    const idNumber = typeof this.props.idNumber === 'string'
+      ? this.props.idNumber
+      : formatNumber(this.props.idNumber);
+
+    if (!proposal) {
+      return (
+        <h3>#{idNumber}</h3>
+      );
+    }
+
+    const { meta, method, section } = Method.findFunction(proposal.callIndex);
+
+    const header = `#${idNumber}: ${section}.${method}`;
+    const documentation = (meta && meta.documentation)
+      ? (
+        <summary>{meta.documentation.join(' ')}</summary>
+      )
+      : null;
+    const params = (isTreasuryProposalVote(proposal) && expandNested) ? (
+      <TreasuryProposal
+        className='ui--ProposedAction-extrinsic'
+        asInset={withLinks}
+        insetProps={{
+          withTopMargin: true,
+          withBottomMargin: true,
+          ...(withLinks ? { href: '/treasury' } : {})
+        }}
+        proposalId={proposal.args[0].toString()}
+      />
+    ) : (
+      <Call
+        className='ui--ProposedAction-extrinsic'
+        value={proposal}
+      />
+    );
+
+    if (asInset) {
+      return (
+        <Inset
+          header={header}
+          isCollapsible
+          {...insetProps}
+        >
+          <>
+            {documentation}
+            {params}
+          </>
+        </Inset>
+      );
+    }
+
+    return (
+      <>
+        <h3>{header}</h3>
+        {isCollapsible
+          ? (
+            <details>
+              {documentation}
+              {params}
+            </details>
+          )
+          : (
+            <>
+              <details>
+                {documentation}
+              </details>
+              {params}
+            </>
+          )}
+      </>
+    );
+  }
+}
+
+export default styled(ProposedAction as React.ComponentClass<Props>)`${styles}`;
diff --git a/packages/ui-app/src/Row.tsx b/packages/ui-app/src/Row.tsx
index f9aa4cbde4..b1f6e5e374 100644
--- a/packages/ui-app/src/Row.tsx
+++ b/packages/ui-app/src/Row.tsx
@@ -84,8 +84,9 @@ export const styles = `
   }
 
   .ui--Row-buttons {
-    flex: 0;
-    margin: -0.75rem -1rem 0 0;
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
     white-space: nowrap;
 
     button.ui.button:last-child {
@@ -103,6 +104,7 @@ export const styles = `
     flex: 1;
     margin-right: 1rem;
     padding: 0.25rem 0 0;
+    width: 100%;
 
     .account-label{
       margin: -0.75rem 0 0 0
diff --git a/packages/ui-app/src/TreasuryProposal.tsx b/packages/ui-app/src/TreasuryProposal.tsx
new file mode 100644
index 0000000000..b67a5d8220
--- /dev/null
+++ b/packages/ui-app/src/TreasuryProposal.tsx
@@ -0,0 +1,132 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { I18nProps } from '@polkadot/ui-app/types';
+import { ApiProps } from '@polkadot/ui-api/types';
+import { Option, TreasuryProposal as TreasuryProposalType } from '@polkadot/types';
+
+import React from 'react';
+import { InputAddress, Labelled, Static } from '@polkadot/ui-app';
+import { withMulti, withApi } from '@polkadot/ui-api';
+import { formatBalance } from '@polkadot/util';
+
+import Inset, { InsetProps } from './Inset';
+import translate from './translate';
+
+type Props = I18nProps & ApiProps & {
+  className?: string,
+  asInset?: boolean,
+  insetProps?: Partial<InsetProps>,
+  onClick?: () => void,
+  proposalId: string,
+  proposal?: TreasuryProposalType | null,
+  withLink?: boolean
+};
+
+type State = {
+  proposal?: TreasuryProposalType | null
+};
+
+class TreasuryProposal extends React.PureComponent<Props, State> {
+  state: State = {};
+
+  constructor (props: Props) {
+    super(props);
+
+    if (!props.proposal) {
+      this.fetchProposal();
+    }
+  }
+
+  static getDerivedStateFromProps ({ proposal }: Props, state: State) {
+    if (!state.proposal && proposal) {
+      return { proposal };
+    }
+    return null;
+  }
+
+  componentDidUpdate () {
+    this.fetchProposal();
+  }
+
+  render () {
+    const { className, asInset, insetProps, onClick, t } = this.props;
+    const { proposal } = this.state;
+
+    if (!proposal) {
+      return null;
+    }
+
+    const { bond, beneficiary, proposer, value } = proposal;
+
+    const inner = (
+      <>
+        <Labelled label={t('proposed by')}>
+          <InputAddress
+            isDisabled
+            defaultValue={proposer}
+            value={proposer}
+            withLabel={false}
+          />
+        </Labelled>
+        <Labelled label={t('beneficiary')}>
+          <InputAddress
+            isDisabled
+            defaultValue={beneficiary}
+            value={beneficiary}
+            withLabel={false}
+          />
+        </Labelled>
+        <Static label={t('value')}>
+          {formatBalance(value)}
+        </Static>
+        <Static label={t('bond')}>
+          {formatBalance(bond)}
+        </Static>
+      </>
+    );
+
+    if (asInset) {
+      return (
+        <Inset
+          className={className}
+          {...insetProps}
+        >
+          {inner}
+        </Inset>
+      );
+    }
+
+    return (
+      <div
+        className={className}
+        onClick={onClick && onClick}
+      >
+        {inner}
+      </div>
+    );
+  }
+
+  private fetchProposal = () => {
+    const { api, proposalId } = this.props;
+
+    if (!this.state.proposal && proposalId) {
+      api.query.treasury.proposals(proposalId)
+        .then((proposal) => {
+          this.setState({
+            proposal: (proposal as Option<TreasuryProposalType>).unwrapOr(null)
+          });
+        })
+        .catch(() => {
+          console.error('Error fetching proposal');
+        });
+    }
+  }
+}
+
+export default withMulti(
+  TreasuryProposal,
+  translate,
+  withApi
+);
diff --git a/packages/ui-app/src/TxModal.tsx b/packages/ui-app/src/TxModal.tsx
index dc3bcfcae1..7f46235a19 100644
--- a/packages/ui-app/src/TxModal.tsx
+++ b/packages/ui-app/src/TxModal.tsx
@@ -8,7 +8,6 @@ import React from 'react';
 import { Button, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
 
 export type TxModalProps = I18nProps & {
-  isOpen: boolean,
   onSubmit?: () => void,
   onClose?: () => void
   onSuccess?: () => void,
@@ -17,44 +16,44 @@ export type TxModalProps = I18nProps & {
 
 export type TxModalState = {
   accountId?: string | null,
-  isBusy: boolean
+  isBusy: boolean,
+  isOpen: boolean
 };
 
 class TxModal<P extends TxModalProps, S extends TxModalState> extends TxComponent<P, S> {
   protected defaultState: S = {
-    accountId: null
+    accountId: null,
+    isOpen: false,
+    isBusy: false
   } as S;
 
   state: S = this.defaultState;
 
-  componentWillReceiveProps ({ isOpen }: P, _: S) {
-    if (isOpen && !this.props.isOpen && !this.state.isBusy) {
-      this.reset();
-    }
-  }
-
   render () {
-    const { isOpen } = this.props;
+    const { isOpen } = this.state;
 
     return (
-      <Modal
-        className='ui--Modal'
-        dimmer='inverted'
-        onClose={this.onClose}
-        open={isOpen}
-      >
-        <Modal.Header>
-          {this.headerText()}
-        </Modal.Header>
-        <Modal.Content>
-          {this.renderPreContent()}
-          {this.renderInputAccount()}
-          {this.renderContent()}
-        </Modal.Content>
-        <Modal.Actions>
-          {this.renderButtons()}
-        </Modal.Actions>
-      </Modal>
+      <>
+        {this.renderTrigger && this.renderTrigger()}
+        <Modal
+          className='ui--Modal'
+          dimmer='inverted'
+          onClose={this.hideModal}
+          open={isOpen}
+        >
+          <Modal.Header>
+            {this.headerText()}
+          </Modal.Header>
+          <Modal.Content>
+            {this.renderPreContent()}
+            {this.renderInputAccount()}
+            {this.renderContent()}
+          </Modal.Content>
+          <Modal.Actions>
+            {this.renderButtons()}
+          </Modal.Actions>
+        </Modal>
+      </>
     );
   }
 
@@ -64,12 +63,6 @@ class TxModal<P extends TxModalProps, S extends TxModalState> extends TxComponen
   protected submitLabel = (): React.ReactNode => this.props.t('Submit');
   protected cancelLabel = (): React.ReactNode => this.props.t('Cancel');
 
-  protected onClose = () => {
-    const { onClose } = this.props;
-
-    onClose && onClose();
-  }
-
   protected onChangeAccount = (accountId: string | null): void => {
     this.setState({ accountId });
   }
@@ -84,9 +77,9 @@ class TxModal<P extends TxModalProps, S extends TxModalState> extends TxComponen
   protected onSuccess = (): void => {
     const { onClose, onSuccess } = this.props;
 
-    this.toggleBusy(false);
     onSuccess && onSuccess();
     onClose && onClose();
+    this.hideModal();
   }
 
   protected onFailed = (): void => {
@@ -113,6 +106,7 @@ class TxModal<P extends TxModalProps, S extends TxModalState> extends TxComponen
 
   protected renderContent: () => React.ReactNode | null = () => null;
   protected renderPreContent: () => React.ReactNode | null = () => null;
+  protected renderTrigger?: () => React.ReactNode | null = () => null;
 
   protected renderButtons: () => React.ReactNode | null = () => {
     return (
@@ -166,7 +160,7 @@ class TxModal<P extends TxModalProps, S extends TxModalState> extends TxComponen
       <>
         <Button
           isNegative
-          onClick={this.onClose}
+          onClick={this.hideModal}
           label={t('Cancel')}
         />
         <Button.Or />
@@ -179,6 +173,21 @@ class TxModal<P extends TxModalProps, S extends TxModalState> extends TxComponen
       this.defaultState
     );
   }
+
+  protected showModal = () => {
+    this.setState({
+      isOpen: true
+    });
+  }
+
+  protected hideModal = () => {
+    const { onClose } = this.props;
+
+    onClose && onClose();
+    this.setState(
+      this.defaultState
+    );
+  }
 }
 
 export default TxModal;
diff --git a/packages/ui-app/src/Voting.tsx b/packages/ui-app/src/Voting.tsx
new file mode 100644
index 0000000000..d8bf75ff0f
--- /dev/null
+++ b/packages/ui-app/src/Voting.tsx
@@ -0,0 +1,133 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Proposal } from '@polkadot/types';
+import { I18nProps } from '@polkadot/ui-app/types';
+import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import keyring from '@polkadot/ui-keyring';
+import { withMulti, withObservable } from '@polkadot/ui-api';
+
+import translate from './translate';
+import Button from './Button';
+import Dropdown from './Dropdown';
+import ProposedAction from './ProposedAction';
+import TxModal, { TxModalProps, TxModalState } from './TxModal';
+import { isTreasuryProposalVote } from './util';
+
+type Props = I18nProps & TxModalProps & {
+  allAccounts?: SubjectInfo,
+  hash?: string,
+  idNumber: BN | number,
+  isCouncil: boolean,
+  proposal?: Proposal | null,
+  preContent?: React.ReactNode
+};
+
+type State = TxModalState & {
+  voteOptions: Array<{ text: React.ReactNode, value: boolean }>,
+  voteValue: boolean
+};
+
+class Voting extends TxModal<Props, State> {
+  state: State;
+
+  headerText = () => {
+    const { isCouncil, t } = this.props;
+
+    return t(isCouncil ? 'Vote on council motion' : 'Vote on proposal');
+  }
+
+  accountLabel = () => this.props.t('Vote with account');
+  accountHelp = () => this.props.t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.');
+
+  txMethod = () => {
+    const { isCouncil } = this.props;
+
+    return isCouncil ? 'councilMotions.vote' : 'democracy.vote';
+  }
+
+  txParams = () => {
+    const { hash, idNumber, isCouncil } = this.props;
+    const { voteValue } = this.state;
+
+    return isCouncil
+      ? [hash!, idNumber, voteValue]
+      : [idNumber, voteValue];
+  }
+
+  constructor (props: Props) {
+    super(props);
+
+    const { t } = props;
+
+    this.state = {
+      ...this.defaultState,
+      voteOptions: [
+        { text: t('Aye, I approve'), value: true },
+        { text: t('Nay, I do not approve'), value: false }
+      ],
+      voteValue: true
+    };
+  }
+
+  renderPreContent = () => {
+    const { idNumber, proposal } = this.props;
+
+    return (
+      <>
+        <ProposedAction
+          expandNested={isTreasuryProposalVote(proposal)}
+          idNumber={idNumber}
+          isCollapsible
+          proposal={proposal}
+        />
+        <br />
+        <br />
+      </>
+    );
+  }
+
+  renderContent = () => {
+    const { t } = this.props;
+    const { voteOptions, voteValue } = this.state;
+
+    return (
+      <Dropdown
+        help={t('Select your vote preferences for this proposal, either to approve or disapprove')}
+        label={t('record my vote as')}
+        options={voteOptions}
+        onChange={this.onChangeVote}
+        value={voteValue}
+      />
+    );
+  }
+
+  renderTrigger = () => {
+    const { t } = this.props;
+
+    return (
+      <div className='ui--Row-buttons'>
+        <Button
+          isPrimary
+          label={t('Vote')}
+          labelIcon='check'
+          onClick={this.showModal}
+        />
+      </div>
+    );
+  }
+
+  private onChangeVote = (voteValue: boolean) => {
+    this.setState({ voteValue });
+  }
+}
+
+export default withMulti(
+  Voting,
+  translate,
+  withObservable(keyring.accounts.subject, { propName: 'allAccounts' })
+);
diff --git a/packages/ui-app/src/index.tsx b/packages/ui-app/src/index.tsx
index 508c9b68f3..322b15ed19 100644
--- a/packages/ui-app/src/index.tsx
+++ b/packages/ui-app/src/index.tsx
@@ -43,6 +43,7 @@ export { default as InputNumber } from './InputNumber';
 export { default as InputRpc } from './InputRpc';
 export { default as InputStorage } from './InputStorage';
 export { default as InputTags } from './InputTags';
+export { default as Inset } from './Inset';
 export { default as Label } from './Label';
 export { default as LabelHelp } from './LabelHelp';
 export { default as Labelled } from './Labelled';
@@ -54,6 +55,7 @@ export { default as Nonce } from './Nonce';
 export { default as Output } from './Output';
 export { default as Password } from './Password';
 export { default as Progress } from './Progress';
+export { default as ProposedAction } from './ProposedAction';
 export { default as RecentlyOffline } from './RecentlyOffline';
 export { default as Row } from './Row';
 export { default as Static } from './Static';
@@ -62,8 +64,10 @@ export { default as SummaryBox } from './SummaryBox';
 export { default as Tabs } from './Tabs';
 export { default as Toggle } from './Toggle';
 export { default as Tooltip } from './Tooltip';
+export { default as TreasuryProposal } from './TreasuryProposal';
 export { default as TxButton } from './TxButton';
 export { default as TxComponent } from './TxComponent';
 export { default as TxModal } from './TxModal';
+export { default as Voting } from './Voting';
 
 export { default as media } from './media';
diff --git a/packages/ui-app/src/styles/semantic.css b/packages/ui-app/src/styles/semantic.css
index cef2448433..1cfb8aea7a 100644
--- a/packages/ui-app/src/styles/semantic.css
+++ b/packages/ui-app/src/styles/semantic.css
@@ -26,7 +26,7 @@
 
 .ui.dropdown {
   &.disabled {
-    background: #fefefe;
+    background: transparent;
     border-color: #eee;
     border-style: dashed;
     opacity: 1;
diff --git a/packages/ui-app/src/util/index.ts b/packages/ui-app/src/util/index.ts
index f18f8914a2..e88d6a33b7 100644
--- a/packages/ui-app/src/util/index.ts
+++ b/packages/ui-app/src/util/index.ts
@@ -7,5 +7,6 @@ export { default as getAddressMeta } from './getAddressMeta';
 export { default as getAddressName } from './getAddressName';
 export { default as getAddressTags } from './getAddressTags';
 export { default as getContractAbi } from './getContractAbi';
+export { default as isTreasuryProposalVote } from './isTreasuryProposalVote';
 export { default as toAddress } from './toAddress';
 export { default as toShortAddress } from './toShortAddress';
diff --git a/packages/ui-app/src/util/isTreasuryProposalVote.ts b/packages/ui-app/src/util/isTreasuryProposalVote.ts
new file mode 100644
index 0000000000..8eab5c32d4
--- /dev/null
+++ b/packages/ui-app/src/util/isTreasuryProposalVote.ts
@@ -0,0 +1,17 @@
+// Copyright 2017-2019 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Method, Proposal } from '@polkadot/types';
+
+export default function isTreasuryProposalVote (proposal?: Proposal | null): boolean {
+  if (!proposal) {
+    return false;
+  }
+
+  const { method, section } = Method.findFunction(proposal.callIndex);
+
+  return section === 'treasury'
+    && ['approveProposal', 'rejectProposal'].includes(method)
+    && !!proposal.args[0];
+}
diff --git a/packages/ui-params/src/Params.css b/packages/ui-params/src/Params.css
index 144dc23a51..96aadec71f 100644
--- a/packages/ui-params/src/Params.css
+++ b/packages/ui-params/src/Params.css
@@ -6,6 +6,7 @@
   border-left: 0.25rem solid #f2f2f2;
 
   label {
+    text-transform: none;
     font-family: monospace;
   }
 
diff --git a/yarn.lock b/yarn.lock
index 0caf894adf..34ac4e65ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8320,6 +8320,13 @@ is-relative@^1.0.0:
   dependencies:
     is-unc-path "^1.0.0"
 
+is-relative@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
+  integrity sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==
+  dependencies:
+    is-unc-path "^1.0.0"
+
 is-resolvable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"