diff --git a/src/App/Components/Beneficiaries.js b/src/App/Components/Beneficiaries.js
index bc457e3..e8ecbc5 100644
--- a/src/App/Components/Beneficiaries.js
+++ b/src/App/Components/Beneficiaries.js
@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
+import Collapsable from "./Collapsable";
 import ErrorBoundary from "./ErrorBoundary";
 import NetworkComponent from "./NetworkComponent";
 import DrizzleTxResolver from "./DrizzleTxResolver";
 
 import { web3Scripts, CONTRACT_ARRAYs_LENGTH, BENEFICIARY_EVENT, NULL_ADDRESS } from '../../Scripts';
-import { FormHelp } from '../../Config';
+import { FormHelp, Timers } from '../../Config';
 
 import Button from 'antd/lib/button';
 import Col from 'antd/lib/col';
@@ -35,6 +36,8 @@ class Beneficiaries extends DrizzleTxResolver {
     constructor (props) {
         super(props);
 
+        this.props.closeCollapsable ? '' : this.state.defaultProps.opened = true;
+
         this.addBeneficiary = this.addBeneficiary.bind(this);
         this.removeBeneficiary = this.removeBeneficiary.bind(this);
         this.calcValue = this.calcValue.bind(this);
@@ -46,6 +49,7 @@ class Beneficiaries extends DrizzleTxResolver {
 
     state = {
         beneficiaries: [''],
+        defaultProps: {},
         contractBeneficiaries: [],
         dispositions: [''],
         loading: false,
@@ -339,85 +343,81 @@ class Beneficiaries extends DrizzleTxResolver {
 
     render () {
         return (
-            <Layout>
-                <Row gutter={0} style={{ margin: '48px 0 24px' }}>
-                    <Col span={24}>
-                        <h3>Benefeciaries</h3>
-                        <Divider style={{ height: '1px', margin: '0' }} />
-                    </Col>
-                </Row>
-                { this.state.loading &&
-                    <Layout>
-                        <Spin size="large" />
-                    </Layout>
-                }
-                { !this.state.loading &&
-                    <Form onSubmit={(e) => e.preventDefault()} >
-                        <Row gutter={16}>
-                            <Col span={15}>
-                                <h5>
-                                    <span title={FormHelp['newBeneficiary']} style={{ cursor: 'help' }}>
-                                        Address
-                                    </span>
-                                </h5>
-                            </Col>
-                            <Col span={3}>
-                                <h5>
-                                    <span title={FormHelp['newBeneficiaryDisposition']} style={{ cursor: 'help' }}>
-                                        Ratio
-                                    </span>
-                                </h5>
-                            </Col>
-                            <Col span={4}>
-                                <h5>
-                                    <span title={FormHelp['newBeneficiaryDispositionValue']} style={{ cursor: 'help' }}>
-                                        Value (Eth)
-                                    </span>
-                                </h5>
-                            </Col>
-                            <Col span={2}>
-                            </Col>
-                            <Col span={24}>
-                                <Divider />
-                            </Col>
-                        </Row>
-                        {
-                            this.state.beneficiaries.map( (one, index) => 
-                                <Row gutter={16} key={index}>
-                                    <Col span={15}>
-                                        <Item validateStatus={this.state.beneficiaries[index] && this.validateStatus('beneficiaries', index)} required>
-                                            <Input onChange={this.handleChange('beneficiaries', index)} value={one} />
-                                        </Item>
-                                    </Col>
-                                    <Col span={3}>
-                                        <Item validateStatus={this.state.dispositions[index] && this.validateStatus('dispositions', index)} required>
-                                            <Input onChange={this.handleChange('dispositions', index)} type='number' min={1} value={this.state.dispositions[index]} />
-                                        </Item>
-                                    </Col>
-                                    <Col span={4}>
-                                        <Item >
-                                            <Input disabled={true} value={ web3Scripts.parseEtherValue(this.calcValue(this.state.dispositions[index]), true) } />
-                                        </Item>
-                                    </Col>
-                                    <Col span={2}>
-                                        <Button style={{ marginTop: '4px' }} icon='minus-square' title={FormHelp.removeBeneficiary} onClick={this.removeBeneficiary(index)} />
-                                    </Col>
-                                </Row>
-                            )
-                        }
-                        <Row>
-                            <Col span={2}>
-                                <Button style={{ marginTop: '4px' }} icon='plus-square' disabled={this.props.disbursed} title={FormHelp.addNewBeneficiary} onClick={this.addBeneficiary} />
-                            </Col>
-                            <Col offset={18} span={4}>
-                                <Button type='primary' style={{ marginTop: '4px' }} icon='upload' disabled={!this.canUpdate} title={FormHelp.updateContract} onClick={this.storeToNetwork} >
-                                    Save
-                                </Button>
-                            </Col>
-                        </Row>
-                    </Form>
-                }
-            </Layout>
+            <Collapsable title={'Benefeciaries'} style={{ margin: '48px 0 12px' }} {...this.state.defaultProps}>
+                <Layout >
+                    { this.state.loading &&
+                        <Layout>
+                            <Spin size="large" />
+                        </Layout>
+                    }
+                    { !this.state.loading &&
+                        <Form onSubmit={(e) => e.preventDefault()} >
+                            <Row gutter={16}>
+                                <Col span={15}>
+                                    <h5>
+                                        <span title={FormHelp['newBeneficiary']} style={{ cursor: 'help' }}>
+                                            Address
+                                        </span>
+                                    </h5>
+                                </Col>
+                                <Col span={3}>
+                                    <h5>
+                                        <span title={FormHelp['newBeneficiaryDisposition']} style={{ cursor: 'help' }}>
+                                            Ratio
+                                        </span>
+                                    </h5>
+                                </Col>
+                                <Col span={4}>
+                                    <h5>
+                                        <span title={FormHelp['newBeneficiaryDispositionValue']} style={{ cursor: 'help' }}>
+                                            Value (Eth)
+                                        </span>
+                                    </h5>
+                                </Col>
+                                <Col span={2}>
+                                </Col>
+                                <Col span={24}>
+                                    <Divider />
+                                </Col>
+                            </Row>
+                            {
+                                this.state.beneficiaries.map( (one, index) => 
+                                    <Row gutter={16} key={index}>
+                                        <Col span={15}>
+                                            <Item validateStatus={this.state.beneficiaries[index] && this.validateStatus('beneficiaries', index)} required>
+                                                <Input onChange={this.handleChange('beneficiaries', index)} value={one} />
+                                            </Item>
+                                        </Col>
+                                        <Col span={3}>
+                                            <Item validateStatus={this.state.dispositions[index] && this.validateStatus('dispositions', index)} required>
+                                                <Input onChange={this.handleChange('dispositions', index)} type='number' min={1} value={this.state.dispositions[index]} />
+                                            </Item>
+                                        </Col>
+                                        <Col span={4}>
+                                            <Item >
+                                                <Input disabled={true} value={ web3Scripts.parseEtherValue(this.calcValue(this.state.dispositions[index]), true) } />
+                                            </Item>
+                                        </Col>
+                                        <Col span={2}>
+                                            <Button style={{ marginTop: '4px' }} icon='minus-square' title={FormHelp.removeBeneficiary} onClick={this.removeBeneficiary(index)} />
+                                        </Col>
+                                    </Row>
+                                )
+                            }
+                            <Row>
+                                <Col span={2}>
+                                    <Button style={{ marginTop: '4px' }} icon='plus-square' disabled={this.props.disbursed} title={FormHelp.addNewBeneficiary} onClick={this.addBeneficiary} />
+                                </Col>
+                                <Col offset={18} span={4}>
+                                    <Button type='primary' style={{ marginTop: '4px' }} icon='upload' disabled={!this.canUpdate} title={FormHelp.updateContract} onClick={this.storeToNetwork} >
+                                        Save
+                                    </Button>
+                                </Col>
+                            </Row>
+                        </Form>
+                    }
+                </Layout >
+            </Collapsable>
         )
     }
 
@@ -430,6 +430,7 @@ Beneficiaries.propTypes = {
     contractBalance: PropTypes.number.isRequired,
     disbursed: PropTypes.bool.isRequired,
     networkId: PropTypes.number.isRequired,
+    closeCollapsable: PropTypes.bool,
     selectedAccount: PropTypes.string,
     transactionStack: PropTypes.array,
     transactions: PropTypes.object
diff --git a/src/App/Components/Collapsable.js b/src/App/Components/Collapsable.js
new file mode 100644
index 0000000..108cf42
--- /dev/null
+++ b/src/App/Components/Collapsable.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import PropTypes from "prop-types";
+
+import Col from 'antd/lib/col';
+import Divider from 'antd/lib/divider';
+import Layout from 'antd/lib/layout';
+
+import 'antd/lib/col/style';
+import 'antd/lib/divider/style';
+import 'antd/lib/layout/style';
+
+class Collapsable extends Component {
+
+    constructor (props) {
+        super(props);
+
+        this.state = {
+            collapsed: props.opened ? false : true
+        }
+        this.toggleCollapse = this.toggleCollapse.bind(this);
+    }
+
+    toggleCollapse () {
+        console.log(this.state)
+        this.setState({
+            collapsed: !this.state.collapsed
+        });
+    }
+
+    render () {
+        const { title, children, opened, ...others } = this.props;
+        return (
+            <Layout {...others}>
+                <Col span={24} style={{ cursor: 'pointer', margin: '0 0 12px' }}>
+                    <div onClick={this.toggleCollapse} >
+                        {typeof title === 'string' &&
+                            <h3>
+                                {title}
+                            </h3>
+                        }
+                        {typeof title === 'object' &&
+                            title
+                        }
+                        <Divider style={{ height: '1px', margin: '0' }} />
+                    </div>
+                </Col>
+                <Col span={24} >
+                    { !this.state.collapsed && children }
+                </Col>
+            </Layout>
+        );
+    }
+}
+
+Collapsable.propTypes = {
+    opened: PropTypes.bool,
+    title: PropTypes.any.isRequired,
+    children: PropTypes.object.isRequired
+}
+
+export default Collapsable;
\ No newline at end of file
diff --git a/src/App/Components/Contract.js b/src/App/Components/Contract.js
index 7a36510..10d34ee 100644
--- a/src/App/Components/Contract.js
+++ b/src/App/Components/Contract.js
@@ -213,15 +213,16 @@ class Contract extends Component {
                     </Layout>
                 }
                 { !this.state.loadingContracts &&
-                    <Layout>
+                    <Layout style={{ margin: '0 0 24px' }}>
                         <Row gutter={0} style={{ margin: '0 0 24px' }}>
                             <Col span={24}>
-                                <h2>Contracts details</h2>
-                                <h4 className='word-wrapped'>
-                                    (<a target='_blank' href={`${Explorers[this.props.networkId]}/address/${this.props.match.params.contractAddress}`}>
-                                        { this.props.match.params.contractAddress }
-                                    </a>)
-                                </h4>
+                                <h2>Contracts details {' '}
+                                    <small className='word-wrapped' style={{fontSize: '0.7em'}}>
+                                        (<a target='_blank' href={`${Explorers[this.props.networkId]}/address/${this.props.match.params.contractAddress}`}>
+                                            { this.props.match.params.contractAddress }
+                                        </a>)
+                                    </small>
+                                </h2>
                                 <Divider style={{ height: '1px', margin: '0' }} />
                             </Col>
                         </Row>
@@ -270,6 +271,7 @@ class Contract extends Component {
                                 drizzle={ this.props.drizzle }
                                 isOwner={ this.isContractOwner }
                                 networkId={ this.props.networkId }
+                                closeCollapsable={this.state.contract.contractType.toLowerCase() === 'willwallet'}
                                 selectedAccount={ this.props.selectedAccount }
                                 transactionStack={this.props.transactionStack}
                                 transactions={this.props.transactions}
diff --git a/src/App/Components/ContractsList.js b/src/App/Components/ContractsList.js
index 8e24252..fa91919 100644
--- a/src/App/Components/ContractsList.js
+++ b/src/App/Components/ContractsList.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { Link, NavLink } from "react-router-dom";
 import PropTypes from "prop-types";
+import Collapsable from "./Collapsable";
 import ErrorBoundary from "./ErrorBoundary";
 import NetworkComponent from "./NetworkComponent";
 
@@ -126,8 +127,8 @@ class ContractsList extends Component {
     
     render () {
         return (
-            <Layout>
-                <Row gutter={0} style={{ margin: '0 0 24px' }}>
+            <Collapsable opened title={
+                <Row gutter={0} >
                     <Col span={20}>
                         <h2>Deployed Contracts</h2>
                     </Col>
@@ -143,10 +144,8 @@ class ContractsList extends Component {
                             </Col>
                         </Row>
                     </Col>
-                    <Col span={24} >
-                        <Divider style={{ height: '1px', margin: '0' }} />
-                    </Col>
                 </Row>
+            }>
                 <Layout style={{ overflowY: 'auto', maxHeight: '900px' }}>
                     {this.displayList.map( (contract, index) => {
                         return (
@@ -186,8 +185,7 @@ class ContractsList extends Component {
                         );
                     })}
                 </Layout>
-                
-            </Layout>
+            </Collapsable>
         );
     }
 }
diff --git a/src/App/Components/Postpone.js b/src/App/Components/Postpone.js
index 8c39352..2c4f157 100644
--- a/src/App/Components/Postpone.js
+++ b/src/App/Components/Postpone.js
@@ -9,38 +9,14 @@ import { web3Scripts } from '../../Scripts';
 import Button from 'antd/lib/button';
 import Col from 'antd/lib/col';
 import Divider from 'antd/lib/divider';
-import Form from 'antd/lib/form';
 import notification from 'antd/lib/notification';
 import Row from 'antd/lib/row';
-import Select from 'antd/lib/select';
 
 import 'antd/lib/button/style';
 import 'antd/lib/col/style';
 import 'antd/lib/divider/style';
-import 'antd/lib/form/style';
-import 'antd/lib/icon/style';
-import 'antd/lib/input/style';
 import 'antd/lib/notification/style';
 import 'antd/lib/row/style';
-import 'antd/lib/select/style';
-
-const { Item } = Form;
-const { Option } = Select;
-
-const timeSpans = [
-    'second',
-    'day',
-    'month',
-    'year'
-];
-
-const timeSpansFactors = {
-    second: 1,
-    day: 86400,
-    month: 2592000,
-    year: 31536000
-
-};
 
 const MILLISECONDS = 1000;
 
@@ -125,7 +101,6 @@ class Postpone extends DrizzleTxResolver {
                     <Button type='primary' disabled={!this.canPostpone()} loading={this.state.postponing} onClick={this.postponeDisbursement} icon='fast-forward' title={FormHelp.postpone} >
                         Postpone Disbursement
                     </Button>
-                    <Divider style={{ height: '1px', margin: '0' }} />
                 </Col>
             </Row>
         );
diff --git a/src/App/Components/Wallet.js b/src/App/Components/Wallet.js
index 2161b99..83b74b6 100644
--- a/src/App/Components/Wallet.js
+++ b/src/App/Components/Wallet.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Collapsable from "./Collapsable";
 import ErrorBoundary from "./ErrorBoundary";
 import DrizzleTxResolver from "./DrizzleTxResolver";
 
@@ -8,7 +9,6 @@ import { web3Scripts } from '../../Scripts';
 
 import Button from 'antd/lib/button';
 import Col from 'antd/lib/col';
-import Divider from 'antd/lib/divider';
 import Form from 'antd/lib/form';
 import Icon from 'antd/lib/icon';
 import Input from 'antd/lib/input';
@@ -17,7 +17,6 @@ import Row from 'antd/lib/row';
 
 import 'antd/lib/button/style';
 import 'antd/lib/col/style';
-import 'antd/lib/divider/style';
 import 'antd/lib/form/style';
 import 'antd/lib/icon/style';
 import 'antd/lib/input/style';
@@ -107,11 +106,7 @@ class Wallet extends DrizzleTxResolver {
     
     render () {
         return (
-            <Row style={{ margin: '48px 0 24px' }}>
-                <Col span={24} style={{ margin: '0 0 24px' }}>
-                    <h3>Wallet</h3>
-                    <Divider style={{ height: '1px', margin: '0' }} />
-                </Col>
+            <Collapsable opened title={'Wallet'} style={{ margin: '48px 0 12px' }}>
                 <Form onSubmit={this.sendTransaction} style={{ margin: '0 0 12x' }}>
                     <Row gutter={24}>
                         <Col span={17}>
@@ -135,7 +130,7 @@ class Wallet extends DrizzleTxResolver {
                         </Col>
                     </Row>
                 </Form>
-            </Row>
+            </Collapsable>
         );
     }
 }
diff --git a/src/App/Components/index.js b/src/App/Components/index.js
index c1e7b53..7035f81 100644
--- a/src/App/Components/index.js
+++ b/src/App/Components/index.js
@@ -3,5 +3,8 @@ export{ default as Beneficiaries } from './Beneficiaries';
 export{ default as Contract } from './Contract';
 export{ default as ContractsList } from './ContractsList';
 export{ default as Deployer } from './Deployer';
+export{ default as DrizzleTxResolver } from './DrizzleTxResolver';
 export{ default as ErrorBoundary } from './ErrorBoundary';
-export{ default as NetworkComponent } from './NetworkComponent';
\ No newline at end of file
+export{ default as NetworkComponent } from './NetworkComponent';
+export{ default as Postpone } from './Postpone';
+export{ default as Wallet } from './Wallet';
\ No newline at end of file