diff --git a/package.json b/package.json
index f95e7c9a627b..9c06d9275134 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.98.0-beta.0",
-    "@polkadot/api-contract": "^0.98.0-beta.0",
+    "@polkadot/api": "^0.98.0-beta.1",
+    "@polkadot/api-contract": "^0.98.0-beta.1",
     "@polkadot/keyring": "^1.7.1",
-    "@polkadot/types": "^0.98.0-beta.0",
+    "@polkadot/types": "^0.98.0-beta.1",
     "@polkadot/util": "^1.7.1",
     "@polkadot/util-crypto": "^1.7.1",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/packages/app-contracts/package.json b/packages/app-contracts/package.json
index 7f14812525d8..f98e42927374 100644
--- a/packages/app-contracts/package.json
+++ b/packages/app-contracts/package.json
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.4",
-    "@polkadot/api-contract": "^0.98.0-beta.0",
+    "@polkadot/api-contract": "^0.98.0-beta.1",
     "@polkadot/react-components": "^0.38.0-beta.8"
   }
 }
diff --git a/packages/app-democracy/src/Overview/PreImage.tsx b/packages/app-democracy/src/Overview/PreImage.tsx
new file mode 100644
index 000000000000..e1685ff4532b
--- /dev/null
+++ b/packages/app-democracy/src/Overview/PreImage.tsx
@@ -0,0 +1,87 @@
+// 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 { SubmittableExtrinsic } from '@polkadot/api/promise/types';
+import { I18nProps } from '@polkadot/react-components/types';
+
+import React, { useEffect, useState } from 'react';
+import { Button, Input, InputAddress, Extrinsic, Modal, TxButton } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
+import { Available } from '@polkadot/react-query';
+import { blake2AsHex } from '@polkadot/util-crypto';
+
+import translate from '../translate';
+
+interface Props extends I18nProps {
+  onClose: () => void;
+}
+
+const ZERO_HASH = blake2AsHex('');
+
+function PreImage ({ className, onClose, t }: Props): React.ReactElement<Props> {
+  const { apiDefaultTxSudo } = useApi();
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const [{ hex, hash }, setHash] = useState<{ hex: string; hash: string }>({ hex: '', hash: ZERO_HASH });
+  const [proposal, setProposal] = useState<any>();
+
+  useEffect((): void => {
+    const hex = (proposal as SubmittableExtrinsic)?.method.toHex() || '';
+
+    setHash({ hex, hash: blake2AsHex(hex) });
+  }, [proposal]);
+
+  return (
+    <Modal
+      className={className}
+      dimmer='inverted'
+      open
+    >
+      <Modal.Header>{t('Submit preimage')}</Modal.Header>
+      <Modal.Content>
+        <InputAddress
+          help={t('The account you want to register the preimage from')}
+          label={t('send from account')}
+          labelExtra={<Available label={t('transferrable')} params={accountId} />}
+          onChange={setAccountId}
+          type='account'
+        />
+        <Extrinsic
+          defaultValue={apiDefaultTxSudo}
+          label={t('propose')}
+          onChange={setProposal}
+        />
+        <Input
+          help={t('The hash of the selected proposal, use it for submitting the proposal')}
+          isDisabled
+          label={t('preimage hash')}
+          value={hash}
+        />
+      </Modal.Content>
+      <Modal.Actions>
+        <Button.Group>
+          <Button
+            isNegative
+            label={t('Cancel')}
+            icon='add'
+            onClick={onClose}
+          />
+          <Button.Or />
+          <TxButton
+            accountId={accountId}
+            isDisabled={!proposal || !accountId}
+            isPrimary
+            label={t('Submit preimage')}
+            icon='add'
+            onStart={onClose}
+            params={[hex]}
+            tx='democracy.notePreimage'
+            withSpinner={false}
+          />
+        </Button.Group>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+export default translate(PreImage);
diff --git a/packages/app-democracy/src/Overview/Proposal.tsx b/packages/app-democracy/src/Overview/Proposal.tsx
index c10cb70734f1..cf7fa971ceab 100644
--- a/packages/app-democracy/src/Overview/Proposal.tsx
+++ b/packages/app-democracy/src/Overview/Proposal.tsx
@@ -1,82 +1,49 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // 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 { AccountId, Balance, Proposal as ProposalType } from '@polkadot/types/interfaces';
+import { DeriveProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
-import BN from 'bn.js';
 import React from 'react';
-import { Option, Tuple, Vec } from '@polkadot/types';
-import { ActionItem, InputAddress, Labelled, Static } from '@polkadot/react-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
+import { ActionItem, InputAddress, Static } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 
 import translate from '../translate';
 import Seconding from './Seconding';
 
 interface Props extends I18nProps {
-  democracy_depositOf?: [Balance, Vec<AccountId>] | null;
-  idNumber: BN;
-  value: ProposalType;
+  value: DeriveProposal;
 }
 
-function renderProposal ({ democracy_depositOf, t }: Props): React.ReactNode {
-  if (!democracy_depositOf) {
-    return null;
-  }
-
-  const [balance, addresses] = democracy_depositOf;
-
-  return (
-    <div>
-      <Labelled label={t('depositors')}>
-        {addresses.map((address, index): React.ReactNode => (
-          <InputAddress
-            isDisabled
-            key={`${index}:${address}`}
-            defaultValue={address}
-            withLabel={false}
-          />
-        ))}
-      </Labelled>
-      <Static label={t('balance')}>
-        <FormatBalance value={balance} />
-      </Static>
-    </div>
-  );
-}
-
-function Proposal (props: Props): React.ReactElement<Props> {
-  const { className, democracy_depositOf, idNumber, value } = props;
-  const depositors = democracy_depositOf
-    ? democracy_depositOf[1]
-    : [];
-
+function Proposal ({ className, t, value: { balance, index, proposal, seconds } }: Props): React.ReactElement<Props> {
   return (
     <ActionItem
       className={className}
-      idNumber={idNumber}
-      proposal={value}
+      idNumber={index}
+      proposal={proposal}
     >
       <Seconding
-        depositors={depositors}
-        proposalId={idNumber}
+        depositors={seconds || []}
+        proposalId={index}
       />
-      {renderProposal(props)}
+      {balance && seconds && (
+        <div>
+          {seconds.map((address, count): React.ReactNode => (
+            <InputAddress
+              isDisabled
+              label={count === 0 ? t('proposer') : t('depositor {{count}}', { replace: { count } })}
+              key={`${count}:${address}`}
+              defaultValue={address}
+            />
+          ))}
+          <Static label={t('balance')}>
+            <FormatBalance value={balance} />
+          </Static>
+        </div>
+      )}
     </ActionItem>
   );
 }
 
-export default withMulti(
-  Proposal,
-  translate,
-  withCalls<Props>(
-    ['query.democracy.depositOf', {
-      paramName: 'idNumber',
-      transform: (value: Option<Tuple>): Tuple | null =>
-        value.unwrapOr(null)
-    }]
-  )
-);
+export default translate(Proposal);
diff --git a/packages/app-democracy/src/Overview/Proposals.tsx b/packages/app-democracy/src/Overview/Proposals.tsx
index d3854c399786..6fa6201a49ff 100644
--- a/packages/app-democracy/src/Overview/Proposals.tsx
+++ b/packages/app-democracy/src/Overview/Proposals.tsx
@@ -1,42 +1,35 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // 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/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
+import { DeriveProposal } from '@polkadot/api-derive/types';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
-import BN from 'bn.js';
 import React from 'react';
-import { withCalls, withMulti } from '@polkadot/react-api';
-import { Column } from '@polkadot/react-components';
+import { useApi, trackStream } from '@polkadot/react-hooks';
 
 import ProposalDisplay from './Proposal';
 import translate from '../translate';
 
-interface Props extends I18nProps {
-  democracy_publicProps?: [BN, Proposal][];
-}
+function Proposals ({ className, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const proposals = trackStream<DeriveProposal[]>(api.derive.democracy.proposals, []);
 
-function Proposals ({ democracy_publicProps, t }: Props): React.ReactElement<Props> {
   return (
-    <Column
-      emptyText={t('No available proposals')}
-      headerText={t('proposals')}
-    >
-      {democracy_publicProps && democracy_publicProps.map(([idNumber, proposal]): React.ReactNode => (
-        <ProposalDisplay
-          idNumber={idNumber}
-          key={idNumber.toString()}
-          value={proposal}
-        />
-      ))}
-    </Column>
+    <div className={`proposalSection ${className}`}>
+      <h1>{t('proposals')}</h1>
+      {
+        proposals?.length
+          ? proposals.map((proposal): React.ReactNode => (
+            <ProposalDisplay
+              key={proposal.index.toString()}
+              value={proposal}
+            />
+          ))
+          : t('No active proposals')
+      }
+    </div>
   );
 }
 
-export default withMulti(
-  Proposals,
-  translate,
-  withCalls<Props>('query.democracy.publicProps')
-);
+export default translate(Proposals);
diff --git a/packages/app-democracy/src/Overview/Propose.tsx b/packages/app-democracy/src/Overview/Propose.tsx
index c93924aff72f..6acc0cac9e3c 100644
--- a/packages/app-democracy/src/Overview/Propose.tsx
+++ b/packages/app-democracy/src/Overview/Propose.tsx
@@ -1,122 +1,83 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
+// 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 { Call } from '@polkadot/types/interfaces';
-import { ApiProps } from '@polkadot/react-api/types';
+import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
-import React from 'react';
-import { createType } from '@polkadot/types';
-import { Button, Extrinsic, InputBalance } from '@polkadot/react-components';
-import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
-import { registry, withApi, withMulti } from '@polkadot/react-api';
+import React, { useState } from 'react';
+import { Button, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Available } from '@polkadot/react-query';
+import { isHex } from '@polkadot/util';
 
 import translate from '../translate';
 
-interface Props extends TxModalProps, ApiProps {}
-
-interface State extends TxModalState {
-  accountId?: string | null;
-  method: Call | null;
-  value: BN;
-  isValid: boolean;
+interface Props extends I18nProps {
+  onClose: () => void;
 }
 
-class Propose extends TxModal<Props, State> {
-  public state: State = {
-    ...this.defaultState,
-    value: new BN(0)
-  };
-
-  protected headerText = (): string => this.props.t('Submit proposal');
-
-  protected txMethod = (): string => 'democracy.propose';
-
-  protected txParams = (): [Call, BN] => {
-    const { value, method } = this.state;
-
-    return [createType(registry, 'Proposal', method || undefined), value];
-  }
-
-  protected isDisabled = (): boolean => {
-    const { accountId, value, method } = this.state;
-    const hasValue = !!value && value.gtn(0);
-    const hasMethod = !!method;
-
-    return !accountId || !hasValue || !hasMethod;
-  }
-
-  protected renderTrigger = (): React.ReactNode => {
-    const { t } = this.props;
-
-    return (
-      <Button.Group>
-        <Button
-          isPrimary
-          label={t('Submit proposal')}
-          icon='add'
-          onClick={this.showModal}
+function Propose ({ className, onClose, t }: Props): React.ReactElement<Props> {
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const [balance, setBalance] = useState<BN | undefined>();
+  const [{ isHashValid, hash }, setHash] = useState<{ isHashValid: boolean; hash?: string }>({ isHashValid: false, hash: '' });
+
+  const _onChangeHash = (hash?: string): void => setHash({
+    isHashValid: isHex(hash, 256),
+    hash
+  });
+
+  return (
+    <Modal
+      className={className}
+      dimmer='inverted'
+      open
+    >
+      <Modal.Header>{t('Submit proposal')}</Modal.Header>
+      <Modal.Content>
+        <InputAddress
+          help={t('The account you want to register the proposal from')}
+          label={t('send from account')}
+          labelExtra={<Available label={t('transferrable')} params={accountId} />}
+          onChange={setAccountId}
+          type='account'
         />
-      </Button.Group>
-    );
-  }
-
-  protected renderContent = (): React.ReactNode => {
-    const { apiDefaultTxSudo, t } = this.props;
-    const { value } = this.state;
-    const hasValue = !!value && value.gtn(0);
-
-    return (
-      <section>
-        <Extrinsic
-          defaultValue={apiDefaultTxSudo}
-          label={t('propose')}
-          onChange={this.onChangeExtrinsic}
-          onEnter={this.sendTx}
+        <Input
+          autoFocus
+          help={t('The preimage hash of the proposal')}
+          label={t('preimage hash')}
+          onChange={_onChangeHash}
+          value={hash}
         />
         <InputBalance
-          className='medium'
-          isError={!hasValue}
-          help={t('The amount that will be bonded to submit the proposal')}
-          label={t('value')}
-          onChange={this.onChangeValue}
-          onEnter={this.sendTx}
+          help={t('The locked value for this proposal')}
+          label={t('locked balance')}
+          onChange={setBalance}
         />
-      </section>
-    );
-  }
-
-  private nextState (newState: Partial<State>): void {
-    this.setState(
-      (prevState: State): Pick<State, never> => {
-        const { accountId = prevState.accountId, method = prevState.method, value = prevState.value } = newState;
-        const isValid = !!method && !!value && value.gt(new BN(0)) && !!accountId && accountId.length > 0;
-
-        return {
-          accountId,
-          method,
-          value,
-          isValid
-        };
-      }
-    );
-  }
-
-  private onChangeExtrinsic = (method?: Call): void => {
-    if (!method) {
-      return this.nextState({ method: null });
-    }
-
-    this.nextState({ method });
-  }
-
-  private onChangeValue = (value?: BN): void => {
-    this.nextState({ value });
-  }
+      </Modal.Content>
+      <Modal.Actions>
+        <Button.Group>
+          <Button
+            isNegative
+            label={t('Cancel')}
+            icon='add'
+            onClick={onClose}
+          />
+          <Button.Or />
+          <TxButton
+            accountId={accountId}
+            isDisabled={!balance || balance.lten(0) || !isHashValid || !accountId}
+            isPrimary
+            label={t('Submit proposal')}
+            icon='add'
+            onStart={onClose}
+            params={[hash, balance]}
+            tx='democracy.propose'
+            withSpinner={false}
+          />
+        </Button.Group>
+      </Modal.Actions>
+    </Modal>
+  );
 }
 
-export default withMulti(
-  withApi(Propose),
-  translate
-);
+export default translate(Propose);
diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx
index bb07af767474..7d444a4437c8 100644
--- a/packages/app-democracy/src/Overview/Referendum.tsx
+++ b/packages/app-democracy/src/Overview/Referendum.tsx
@@ -3,9 +3,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DerivedReferendumVote } from '@polkadot/api-derive/types';
+import { DerivedReferendumVote, DerivedReferendum } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
-import { ReferendumInfoExtended } from '@polkadot/api-derive/type';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
@@ -25,7 +24,7 @@ interface Props extends I18nProps {
   chain_bestNumber?: BN;
   democracy_referendumVotesFor?: DerivedReferendumVote[];
   democracy_enactmentPeriod: BN;
-  value: ReferendumInfoExtended;
+  value: DerivedReferendum;
 }
 
 interface State {
@@ -79,11 +78,11 @@ function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, d
     }
   }, [democracy_referendumVotesFor]);
 
-  if (!chain_bestNumber || value.end.sub(chain_bestNumber).lten(0)) {
+  if (!chain_bestNumber || value.info.end.sub(chain_bestNumber).lten(0)) {
     return null;
   }
 
-  const enactBlock = (democracy_enactmentPeriod || new BN(0)).add(value.end);
+  const enactBlock = (democracy_enactmentPeriod || new BN(0)).add(value.info.end);
 
   return (
     <ActionItem
@@ -98,29 +97,11 @@ function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, d
       }
     >
       <div>
-        {voteCount !== 0 && votedTotal.gtn(0) && (
-          <div className='democracy--Referendum-results chart'>
-            <Chart.HorizBar
-              values={[
-                {
-                  colors: COLORS_AYE,
-                  label: `Aye, ${formatBalance(votedAye, { forceUnit: '-' })} (${formatNumber(voteCountAye)})`,
-                  value: votedAye.muln(10000).div(votedTotal).toNumber() / 100
-                },
-                {
-                  colors: COLORS_NAY,
-                  label: `Nay, ${formatBalance(votedNay, { forceUnit: '-' })} (${formatNumber(voteCountNay)})`,
-                  value: votedNay.muln(10000).div(votedTotal).toNumber() / 100
-                }
-              ]}
-            />
-          </div>
-        )}
         <Static label={t('ending at')}>
           {t('block #{{blockNumber}}, {{remaining}} blocks remaining', {
             replace: {
-              blockNumber: formatNumber(value.end),
-              remaining: formatNumber(value.end.sub(chain_bestNumber).subn(1))
+              blockNumber: formatNumber(value.info.end),
+              remaining: formatNumber(value.info.end.sub(chain_bestNumber).subn(1))
             }
           })}
         </Static>
@@ -133,7 +114,7 @@ function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, d
         </Static>
         <VoteThreshold
           isDisabled
-          defaultValue={{ isValid: true, value: value.threshold }}
+          defaultValue={{ isValid: true, value: value.info.threshold }}
           label={t('vote threshold')}
           name='voteThreshold'
           type={{
@@ -141,6 +122,24 @@ function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, d
             type: 'VoteThreshold'
           }}
         />
+        {voteCount !== 0 && votedTotal.gtn(0) && (
+          <div className='democracy--Referendum-results chart'>
+            <Chart.HorizBar
+              values={[
+                {
+                  colors: COLORS_AYE,
+                  label: `Aye, ${formatBalance(votedAye, { forceUnit: '-' })} (${formatNumber(voteCountAye)})`,
+                  value: votedAye.muln(10000).div(votedTotal).toNumber() / 100
+                },
+                {
+                  colors: COLORS_NAY,
+                  label: `Nay, ${formatBalance(votedNay, { forceUnit: '-' })} (${formatNumber(voteCountNay)})`,
+                  value: votedNay.muln(10000).div(votedTotal).toNumber() / 100
+                }
+              ]}
+            />
+          </div>
+        )}
       </div>
     </ActionItem>
   );
diff --git a/packages/app-democracy/src/Overview/Referendums.tsx b/packages/app-democracy/src/Overview/Referendums.tsx
index d96a4ef46dcd..f47d89093ff9 100644
--- a/packages/app-democracy/src/Overview/Referendums.tsx
+++ b/packages/app-democracy/src/Overview/Referendums.tsx
@@ -1,46 +1,36 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // 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/react-components/types';
+import { DerivedReferendum } from '@polkadot/api-derive/types';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { ReferendumInfoExtended } from '@polkadot/api-derive/type';
-import { Option } from '@polkadot/types';
-import { withCalls } from '@polkadot/react-api';
-import { Column } from '@polkadot/react-components';
+import { useApi, trackStream } from '@polkadot/react-hooks';
 
 import Referendum from './Referendum';
 import translate from '../translate';
 
-interface Props extends I18nProps {
-  democracy_referendums?: Option<ReferendumInfoExtended>[];
-}
+function Referendums ({ className, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const referendums = trackStream<DerivedReferendum[]>(api.derive.democracy.referendums, []);
 
-function Referendums ({ democracy_referendums, t }: Props): React.ReactElement<Props> {
   return (
-    <Column
-      emptyText={t('No available referendums')}
-      headerText={t('referendum')}
-    >
-      {democracy_referendums && democracy_referendums
-        .filter((opt): boolean => opt.isSome)
-        .map((opt): ReferendumInfoExtended => opt.unwrap())
-        .map((referendum): React.ReactNode => (
-          <Referendum
-            idNumber={referendum.index}
-            key={referendum.index.toString()}
-            value={referendum}
-          />
-        ))
+    <div className={`proposalSection ${className}`}>
+      <h1>{t('referenda')}</h1>
+      {
+        referendums?.length
+          ? referendums.map((referendum): React.ReactNode => (
+            <Referendum
+              idNumber={referendum.index}
+              key={referendum.index.toString()}
+              value={referendum}
+            />
+          ))
+          : t('No active referendums')
       }
-    </Column>
+    </div>
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    'derive.democracy.referendums'
-  )(Referendums)
-);
+export default translate(Referendums);
diff --git a/packages/app-democracy/src/Overview/Summary.tsx b/packages/app-democracy/src/Overview/Summary.tsx
index 8dc7a3a2b1d9..87609218f173 100644
--- a/packages/app-democracy/src/Overview/Summary.tsx
+++ b/packages/app-democracy/src/Overview/Summary.tsx
@@ -8,6 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
+import { useApi, trackStream } from '@polkadot/react-hooks';
 import { withCalls } from '@polkadot/react-api';
 import { formatNumber } from '@polkadot/util';
 
@@ -15,16 +16,17 @@ import translate from '../translate';
 
 interface Props extends I18nProps {
   chain_bestNumber?: BN;
-  democracy_launchPeriod?: BN;
   democracy_nextTally?: BN;
   democracy_publicPropCount?: BN;
   democracy_referendumCount?: BN;
 }
 
 function Summary (props: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const activeProposals = trackStream<any[]>(api.derive.democracy.proposals, []);
+
   const {
-    chain_bestNumber = new BN(0),
-    democracy_launchPeriod = new BN(1),
+    chain_bestNumber,
     democracy_nextTally = new BN(0),
     democracy_publicPropCount,
     democracy_referendumCount = new BN(0),
@@ -35,31 +37,37 @@ function Summary (props: Props): React.ReactElement<Props> {
     <SummaryBox>
       <section>
         <CardSummary label={t('proposals')}>
+          {formatNumber(activeProposals?.length)}
+        </CardSummary>
+        <CardSummary label={t('total')}>
           {formatNumber(democracy_publicPropCount)}
         </CardSummary>
+      </section>
+      <section>
         <CardSummary label={t('referenda')}>
-          {formatNumber(democracy_referendumCount)}
-        </CardSummary>
-        <CardSummary label={t('active')}>
           {formatNumber(democracy_referendumCount.sub(democracy_nextTally))}
         </CardSummary>
+        <CardSummary label={t('total')}>
+          {formatNumber(democracy_referendumCount)}
+        </CardSummary>
       </section>
-      <section className='ui--media-medium'>
-        <CardSummary
-          label={t('launch period')}
-          progress={{
-            value: chain_bestNumber.mod(democracy_launchPeriod).addn(1),
-            total: democracy_launchPeriod || new BN(1)
-          }}
-        />
-      </section>
+      {chain_bestNumber && (
+        <section className='ui--media-medium'>
+          <CardSummary
+            label={t('launch period')}
+            progress={{
+              value: chain_bestNumber.mod(api.consts.democracy.launchPeriod).addn(1),
+              total: api.consts.democracy.launchPeriod
+            }}
+          />
+        </section>
+      )}
     </SummaryBox>
   );
 }
 
 export default translate(
   withCalls<Props>(
-    ['consts.democracy.launchPeriod', { fallbacks: ['query.democracy.launchPeriod'] }],
     'query.democracy.nextTally',
     'query.democracy.publicPropCount',
     'query.democracy.referendumCount',
diff --git a/packages/app-democracy/src/Overview/index.tsx b/packages/app-democracy/src/Overview/index.tsx
index 56daf1a0c134..b9b298bce073 100644
--- a/packages/app-democracy/src/Overview/index.tsx
+++ b/packages/app-democracy/src/Overview/index.tsx
@@ -2,23 +2,60 @@
 // 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 { Columar } from '@polkadot/react-components';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Button } from '@polkadot/react-components';
+
+import translate from '../translate';
 import Proposals from './Proposals';
 import Referendums from './Referendums';
 import Summary from './Summary';
+import PreImage from './PreImage';
 import Propose from './Propose';
 
-export default function Overview (): React.ReactElement {
+function Overview ({ className, t }: Props): React.ReactElement {
+  const [isPreimageOpen, setIsPreimageOpen] = useState(false);
+  const [isProposeOpen, setIsProposeOpen] = useState(false);
+
+  const _togglePreimage = (): void => setIsPreimageOpen(!isPreimageOpen);
+  const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
+
   return (
-    <>
+    <div className={className}>
       <Summary />
-      <Propose />
-      <Columar>
-        <Referendums />
-        <Proposals />
-      </Columar>
-    </>
+      <Button.Group>
+        <Button
+          icon='add'
+          isPrimary
+          label={t('Submit preimage')}
+          onClick={_togglePreimage}
+        />
+        <Button.Or />
+        <Button
+          icon='add'
+          isPrimary
+          label={t('Submit proposal')}
+          onClick={_togglePropose}
+        />
+      </Button.Group>
+      {isPreimageOpen && (
+        <PreImage onClose={_togglePreimage} />
+      )}
+      {isProposeOpen && (
+        <Propose onClose={_togglePropose} />
+      )}
+      <Referendums />
+      <Proposals />
+    </div>
   );
 }
+
+export default translate(
+  styled(Overview)`
+    .proposalSection {
+      margin-bottom: 1.5rem;
+    }
+  `
+);
diff --git a/packages/apps-routing/src/democracy.ts b/packages/apps-routing/src/democracy.ts
index fab0d9ff24f1..b53f2b8db40c 100644
--- a/packages/apps-routing/src/democracy.ts
+++ b/packages/apps-routing/src/democracy.ts
@@ -10,9 +10,8 @@ export default ([
   {
     Component: Democracy,
     display: {
-      isHidden: true,
       needsApi: [
-        'query.democracy.nextTally'
+        'tx.democracy.notePreimage'
       ]
     },
     i18n: {
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index 5e49db97febc..6ad476e216da 100644
--- a/packages/react-api/package.json
+++ b/packages/react-api/package.json
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.7.4",
-    "@polkadot/api": "^0.98.0-beta.0",
+    "@polkadot/api": "^0.98.0-beta.1",
     "@polkadot/extension-dapp": "^0.14.0-beta.6",
     "edgeware-node-types": "^1.0.10",
     "rxjs-compat": "^6.5.3"
diff --git a/packages/react-components/src/ActionItem.tsx b/packages/react-components/src/ActionItem.tsx
index 7afb4f75e20d..2cd34a50e534 100644
--- a/packages/react-components/src/ActionItem.tsx
+++ b/packages/react-components/src/ActionItem.tsx
@@ -34,6 +34,7 @@ function ActionItem ({ className, children, accessory, idNumber, proposal, expan
           <div className='ui--Row-details'>
             <ProposedAction
               idNumber={idNumber}
+              isCollapsible
               proposal={proposal}
               withLinks={expandNested}
               expandNested={expandNested}
diff --git a/packages/react-components/src/Chart/HorizBar.tsx b/packages/react-components/src/Chart/HorizBar.tsx
index 98f00febfac8..377b7a554fec 100644
--- a/packages/react-components/src/Chart/HorizBar.tsx
+++ b/packages/react-components/src/Chart/HorizBar.tsx
@@ -82,7 +82,7 @@ function calculateOptions (aspectRatio: number, values: Value[], jsonValues: str
   };
 }
 
-export default function ChartHorizBar ({ aspectRatio = 4, className, max = 100, style, values }: Props): React.ReactElement<Props> | null {
+export default function ChartHorizBar ({ aspectRatio = 8, className, max = 100, style, values }: Props): React.ReactElement<Props> | null {
   const [{ chartData, chartOptions, jsonValues }, setState] = useState<State>({});
 
   useEffect((): void => {
@@ -97,6 +97,7 @@ export default function ChartHorizBar ({ aspectRatio = 4, className, max = 100,
     return null;
   }
 
+  // HACK on width/height to get the aspectRatio to work
   return (
     <div
       className={className}
@@ -104,7 +105,9 @@ export default function ChartHorizBar ({ aspectRatio = 4, className, max = 100,
     >
       <HorizontalBar
         data={chartData}
+        height={null as any}
         options={chartOptions}
+        width={null as any}
       />
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
index 55e0b33feb05..b2e135faf3c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2029,35 +2029,35 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@polkadot/api-contract@^0.98.0-beta.0":
-  version "0.98.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.98.0-beta.0.tgz#218b763c43f66f4f6446d16fe0d275bad188246f"
-  integrity sha512-GMAMHgGOXXp6GHfoL6syfpicXWtmFM9izcphao1VBm4p0u4fCvuiLBQCtK4a2mCiiX7ej2GSe5/zKzDm/JPUlw==
+"@polkadot/api-contract@^0.98.0-beta.1":
+  version "0.98.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.98.0-beta.1.tgz#dde866e8968566f4245db1f304e41aa7cacf0f07"
+  integrity sha512-y6VQF6jB/jYUVqspmlq28ALFVeyAU0Vr7MlsXAshGA5Ejx7XjSJYqEkl4ESeraIDYGrLxHBJZxz8828xb3w88Q==
   dependencies:
     "@babel/runtime" "^7.7.4"
-    "@polkadot/types" "^0.98.0-beta.0"
+    "@polkadot/types" "^0.98.0-beta.1"
 
-"@polkadot/api-derive@^0.98.0-beta.0":
-  version "0.98.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.98.0-beta.0.tgz#23ecace3c930ab56ac8bb6c7882a7953b1eaf5b9"
-  integrity sha512-UCsHYg3rGAZ5cwIypGQmaxnXibHOiP63NQUdglQOGvTCnSlBxGeT2Y51PHHwZuSLOGgLnbR6XennCnYGNAauKA==
+"@polkadot/api-derive@^0.98.0-beta.1":
+  version "0.98.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.98.0-beta.1.tgz#2d8eaa185f6351b32f906d25fb49e81334311a41"
+  integrity sha512-MpcbN7oRJ8xmQ2mynAN62CrwXFDJQG9wLewA7SgUAgSMXM/D3g88iyxuIFV6N/lAZKFfVWqg86ALWep+DpJYJQ==
   dependencies:
     "@babel/runtime" "^7.7.4"
-    "@polkadot/api" "^0.98.0-beta.0"
-    "@polkadot/types" "^0.98.0-beta.0"
+    "@polkadot/api" "^0.98.0-beta.1"
+    "@polkadot/types" "^0.98.0-beta.1"
 
-"@polkadot/api@^0.98.0-beta.0":
-  version "0.98.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.98.0-beta.0.tgz#44bb55e19bab49f73c99c528094a7094082da941"
-  integrity sha512-Mh0/2/8PKAIriAA2vBrZHJhdRkw/XMOhTWS1Bp22PnjsGKxQ3hZmV9tYLf1oGFD9S9V05G3v4KU72oiKIlKhjA==
+"@polkadot/api@^0.98.0-beta.1":
+  version "0.98.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.98.0-beta.1.tgz#ad1bf45c9db4a310326c21ecc6fe6b3a6286715a"
+  integrity sha512-4JIEIbtPnl38EXWOB+TjMnICMCvSMEbXZq4JbbLHl8FY0E0vOaeSWRrwuB4sz+Ho9oCt0usFtpomdowFHA6neQ==
   dependencies:
     "@babel/runtime" "^7.7.4"
-    "@polkadot/api-derive" "^0.98.0-beta.0"
+    "@polkadot/api-derive" "^0.98.0-beta.1"
     "@polkadot/keyring" "^1.7.1"
-    "@polkadot/metadata" "^0.98.0-beta.0"
-    "@polkadot/rpc-core" "^0.98.0-beta.0"
-    "@polkadot/rpc-provider" "^0.98.0-beta.0"
-    "@polkadot/types" "^0.98.0-beta.0"
+    "@polkadot/metadata" "^0.98.0-beta.1"
+    "@polkadot/rpc-core" "^0.98.0-beta.1"
+    "@polkadot/rpc-provider" "^0.98.0-beta.1"
+    "@polkadot/types" "^0.98.0-beta.1"
     "@polkadot/util-crypto" "^1.7.1"
 
 "@polkadot/dev-react@^0.32.0-beta.15":
@@ -2161,10 +2161,10 @@
   dependencies:
     "@babel/runtime" "^7.7.4"
 
-"@polkadot/jsonrpc@^0.98.0-beta.0":
-  version "0.98.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.98.0-beta.0.tgz#041f5ad81053ce7dba451114f0fb54a994b4bcb5"
-  integrity sha512-XmYxvdsNl0/GdOn/9h65Qrwyn3X7ZXTtRYNi5kmvDPBYjvblbGf5goeWSMIUNj5X0BvIkfOQ1t8TIQH3zObK0w==
+"@polkadot/jsonrpc@^0.98.0-beta.1":
+  version "0.98.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.98.0-beta.1.tgz#8c0a09b94d9fa432e64ec08bc52ca5db9ba8fd4b"
+  integrity sha512-dhFECHZq0vE1orTxxQ0yfkj+9goH1bFzVSWoNIt6UW4JSaOsKhTmMX3zjGxOBkzl88dOgMzaqF9HE4Vp3Ghyiw==
   dependencies:
     "@babel/runtime" "^7.7.4"
 
@@ -2177,13 +2177,13 @@
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
 
-"@polkadot/metadata@^0.98.0-beta.0":
-  version "0.98.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.98.0-beta.0.tgz#b02d1c76ed4622ec8c5ae846e286c4262dd99dd1"
-  integrity sha512-Fc4d8hjVrZQbzEBY/hK4j4mrk+LJAxvs0gLZIVr6A77hCdwrSuxVSMLzF+JWnn15Ufismhnh35sasTjjFBhOYg==
+"@polkadot/metadata@^0.98.0-beta.1":
+  version "0.98.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.98.0-beta.1.tgz#3491cc376b0a466423315c4f18f1bc38853db0be"
+  integrity sha512-233F/gFt+kv1Fm43TvUHHVYk/WcknBBUmBSQ015rX/wyLtrxl0lCEUrPe5mGrTrhSxzhjDRLt2KPUAAA1RDVjg==
   dependencies:
     "@babel/runtime" "^7.7.4"
-    "@polkadot/types" "^0.98.0-beta.0"
+    "@polkadot/types" "^0.98.0-beta.1"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
 
@@ -2212,25 +2212,25 @@
     qrcode-generator "^1.4.4"
     react-qr-reader "^2.2.1"
 
-"@polkadot/rpc-core@^0.98.0-beta.0":
-  version "0.98.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.98.0-beta.0.tgz#868c82bc17883120a2ab88381e4480db720d0cda"
-  integrity sha512-CqYOvqxuo7GLvuXF1eQFoC+WDLo7AGUS6aT9Muk6PoSRaOHKHLeXnbaWskSLrF0jWhhcSAMlqlh3uOLuRDdtAA==
+"@polkadot/rpc-core@^0.98.0-beta.1":
+  version "0.98.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.98.0-beta.1.tgz#211838c2566771556a368fba0a0aaa52f9efefa9"
+  integrity sha512-e0dtdg08Yl3uJ1G9QoWj4h5zyQ1v5CY4+SEWryk5WaXUGcUCaHWBI30pi/8vD6KZ8S2p51+MsZ1x5kOLlFskRg==
   dependencies:
     "@babel/runtime" "^7.7.4"
-    "@polkadot/jsonrpc" "^0.98.0-beta.0"
-    "@polkadot/rpc-provider" "^0.98.0-beta.0"
-    "@polkadot/types" "^0.98.0-beta.0"
+    "@polkadot/jsonrpc" "^0.98.0-beta.1"
+    "@polkadot/rpc-provider" "^0.98.0-beta.1"
+    "@polkadot/types" "^0.98.0-beta.1"
     "@polkadot/util" "^1.7.1"
     rxjs "^6.5.3"
 
-"@polkadot/rpc-provider@^0.98.0-beta.0":
-  version "0.98.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.98.0-beta.0.tgz#9503e9071dfdeff007a9b2a7c4d51d0df7a90678"
-  integrity sha512-quQm+mTD0IgqN1RWc0EKOq3LEIQVzPcgN5yt/l9HOpf9FFde1OaPzyRQVpOITK0LcmvpAY2HA/WvvvvRCcAbxA==
+"@polkadot/rpc-provider@^0.98.0-beta.1":
+  version "0.98.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.98.0-beta.1.tgz#d3f45ddc5d98213cc2b7ba146ae693a23b758eb7"
+  integrity sha512-JtoqWDesXQQaIw8I0BNvo15/BR/yNOZLBaAxfMV+wgppaAlPBTjm/YmALsd36KG7a68XqaOV6cua4Gqc3d7QRw==
   dependencies:
     "@babel/runtime" "^7.7.4"
-    "@polkadot/metadata" "^0.98.0-beta.0"
+    "@polkadot/metadata" "^0.98.0-beta.1"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
     eventemitter3 "^4.0.0"
@@ -2244,10 +2244,10 @@
   dependencies:
     "@types/chrome" "^0.0.91"
 
-"@polkadot/types@^0.98.0-beta.0":
-  version "0.98.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.98.0-beta.0.tgz#5c51c234772c1c456ac43bbef71c3804e65e0e02"
-  integrity sha512-pmATM5HA4wHJHATvYOZym48TXvpST5xxG49+E5qHMi9Wsoij0RFiFNqyuOl/RIeFd8Xp1xhCIxZo0NbS17NT9g==
+"@polkadot/types@^0.98.0-beta.1":
+  version "0.98.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.98.0-beta.1.tgz#01f6e9f896a6e7224bc0f269df445ea561149de5"
+  integrity sha512-9vCaK/gdbfs1ABAaAhrcFDrTVhUXLqwdZ/JlJiPxiI7o1Ful+SYO4f0jOpsX8RMsbA6ErwmbFYdvW+bNvgmdCA==
   dependencies:
     "@babel/runtime" "^7.7.4"
     "@polkadot/util" "^1.7.1"