diff --git a/app/components/account-list.js b/app/components/account-list.js
deleted file mode 100644
index 3aba166..0000000
--- a/app/components/account-list.js
+++ /dev/null
@@ -1,53 +0,0 @@
-class AccountList extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            error: false,
-            errorMessage: "",
-            accounts: []
-        };
-
-        this.handleClick = this.handleClick.bind(this);
-    }
-
-    async handleClick(e){
-        e.preventDefault();
-
-        try {
-            let accounts = await web3.eth.getAccounts();
-            window.accounts = accounts;
-
-            console.log("%cawait web3.eth.getAccounts()", 'font-weight: bold');
-            console.log(accounts);
-
-            this.setState({accounts: accounts});
-        
-            this.props.accountUpdate(accounts);
-        } catch(err) {
-            this.setState({
-                error: true,
-                errorMessage: e.name + ': ' + e.message
-            })
-        }
-
-    }
-
-    render(){
-        return <div>
-            <h3>Get Accounts</h3>
-            <div className="scenario">
-            <div id="getAccounts" className="code">
-                await web3.eth.getAccounts(); <button onClick={this.handleClick}>&#9166;</button>
-            </div>
-            {
-                this.state.accounts.length > 0 ? 
-                    <p className="note"><tt>accounts</tt> variable is available in the console</p>
-                    : ""
-            }
-            {this.state.error ? '<p className="error">' + this.state.errorMessage + '</p>' : ''}
-            </div>
-        </div>;
-    }
-}
-
-export default AccountList;
diff --git a/app/components/contract-ui.js b/app/components/contract-ui.js
deleted file mode 100644
index 6d6726b..0000000
--- a/app/components/contract-ui.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import Tab from './tab'; 
-import AccountList from './account-list';
-import SourceArea from './source-area';
-import InstanceSelector from './instance-selector';
-import FunctionArea from './function-area';
-
-class ContractUI extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            accounts: [],
-            instances: [],
-            selectedInstance: null
-        };
-
-        if(props.contract.options.address != null){
-            this.state.instances = [props.contract.options.address];
-            this.state.selectedInstance = props.contract.options.address;
-        }
-
-        this.handleAccountUpdate = this.handleAccountUpdate.bind(this);
-        this.handleInstanceSelection = this.handleInstanceSelection.bind(this);
-    }
-
-    handleAccountUpdate(_accounts){
-        this.setState({
-            accounts: _accounts
-        });
-    }
-
-    handleInstanceSelection(_instance){
-        this.props.contract.options.address = _instance;
-        this.setState({
-            selectedInstance: _instance
-        })
-    }
-
-    render() {
-        return <div>
-            <h1><span>{this.props.name}</span> <small>contract</small></h1>
-            <p>Open your browser's console: <code>Tools &gt; Developer Tools</code></p>
-            <p>Remix: <a href="https://remix.ethereum.org">http://remix.ethereum.org</a></p>
-            <ul className="nav nav-tabs" role="tablist" id="myTabs">
-                <li role="presentation" className="active"><a href="#deploy" role="tab" data-toggle="tab">Instance</a></li>
-                <li role="presentation"><a href="#functions" role="tab" data-toggle="tab">Functions</a></li>
-                <li role="presentation"><a href="#contract" role="tab" data-toggle="tab">Contract</a></li>
-            </ul>
-            <div className="tab-content">
-                <Tab id="deploy" name="Deployment / Utils" active={true}>
-                    <AccountList accountUpdate={this.handleAccountUpdate} />
-                    <h3>Deploy</h3>
-                    <FunctionArea accounts={this.state.accounts} contractName={this.props.name} contract={this.props.contract} type="constructor" />
-                </Tab>
-                <Tab id="functions" name="Functions">
-                    <InstanceSelector selectedInstance={this.state.selectedInstance} instances={this.state.instances} instanceUpdate={this.handleInstanceSelection} />
-                    <FunctionArea accounts={this.state.accounts} contractName={this.props.name} contract={this.props.contract} type="function" />
-                    <FunctionArea accounts={this.state.accounts} contractName={this.props.name} contract={this.props.contract} type="fallback" />
-                </Tab>
-                <Tab id="contract" name="Contract">
-                    <SourceArea sourceURL={this.props.sourceURL} />
-                </Tab>
-            </div>
-        </div>;
-    }
-}
-
-export default ContractUI;
\ No newline at end of file
diff --git a/app/components/function-area.js b/app/components/function-area.js
deleted file mode 100644
index d038c9d..0000000
--- a/app/components/function-area.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import FunctionForm from './function-form';
- 
-class FunctionArea extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { };
-    }
-
-    render(){   
-        const type = this.props.type;
-        const contract = this.props.contract;
-        const contractName = this.props.contractName;
-        const accounts = this.props.accounts;
-        
-        return <div>
-            {
-                this.props.contract.options.jsonInterface
-                    .filter(item => item.type == type)
-                    .map((item, i) => <FunctionForm key={i} accounts={accounts} contract={contract} contractName={contractName} abi={item} />)
-            }
-        </div>;
-    }
-}
-
-export default FunctionArea;
\ No newline at end of file
diff --git a/app/components/function-form.js b/app/components/function-form.js
deleted file mode 100644
index 6806fe1..0000000
--- a/app/components/function-form.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Function from './function';
- 
-class FunctionForm extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            fields: {}
-        };
-    }
-
-    
-
-    _getFunctionParamFields(elem){
-        if(this.props.abi.type == 'fallback') return '';
-            
-        return '(' + this.props.abi.inputs
-                .map((input, i) => <input type="text" data-var-type={input.type} data-type="inputParam" data-name={input.name} placeholder={input.name} title={input.type + ' ' + input.name} size={input.name.length}  />)
-                .join(', ') + ')';
-    }
-
-    _getMethodType(elem){
-        return (this.props.abi.constant == true || this.props.abi.stateMutability == 'view' || this.props.abi.stateMutability == 'pure') ? 'call' : 'send';
-    }
-
-    render(){
-        const functionName = this.props.abi.name;
-        const isDuplicated = this.props.contract.options.jsonInterface.filter(x => x.name == functionName).length > 1;
-        
-        return <div className="function">
-            <h4>{this.props.abi.type == 'function' ? this.props.abi.name : (this.props.abi.type == 'fallback' ? '(fallback)' : this.props.abi.name)}</h4>
-            <div className="scenario">
-                <div className="code">
-                  <Function accounts={this.props.accounts} contract={this.props.contractName} duplicated={isDuplicated} abi={this.props.abi} />
-                </div>
-                <p className="error"></p>
-                <p className="note"></p>
-            </div>
-        </div>;
-    }
-}
-
-export default FunctionForm;
\ No newline at end of file
diff --git a/app/components/function.js b/app/components/function.js
deleted file mode 100644
index 4b2cfc9..0000000
--- a/app/components/function.js
+++ /dev/null
@@ -1,116 +0,0 @@
-class Function extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = { 
-            fields: {},
-            methodFields: {
-                from: '',
-                to: '',
-                value: 0,
-                data: '',
-                gasLimit: '700000'
-            }
-        };
-
-        this.handleParameterChange = this.handleParameterChange.bind(this);
-        this.handleMethodFieldChange = this.handleMethodFieldChange.bind(this);
-    }
-
-    handleParameterChange(e){
-        let newState = this.state;
-        newState.fields[e.target.getAttribute('data-name')] = e.target.value;
-        this.setState(newState);
-    }
-
-    handleMethodFieldChange(e){
-        let newState = this.state;
-        newState.methodFields[e.target.getAttribute('data-param')] = e.target.value;
-        this.setState(newState);
-    }
-
-    _getFunctionLabel(){
-        if(this.props.abi.type == 'function')
-            if(!this.props.duplicated)
-                return `${this.props.contract}.methods.${this.props.abi.name}`;
-            else {
-                return `${this.props.contract}.methods['${this.props.abi.name + '(' + (this.props.abi.inputs != null ? this.props.abi.inputs.map(input => input.type).join(',') : '') + ')'}']`;
-            }
-        else if(this.props.abi.type == 'fallback'){
-            return `web3.eth.sendTransaction`;
-        }
-        else
-            return `${this.props.contract}.deploy`;
-    }
-
-    _getMethodType(){
-        return (this.props.abi.constant == true || this.props.abi.stateMutability == 'view' || this.props.abi.stateMutability == 'pure') ? 'call' : 'send';
-    }
-
-    _getMethodFields(){
-        let methodParams;
-        return <span>
-            from: <select data-param="from" disabled={this.props.accounts.length == 0} onChange={this.handleMethodFieldChange}>
-                  {
-                      this.props.accounts.length == 0 ?
-                        <option>No accounts</option>
-                        :
-                        this.props.accounts.map(function (item, i) {
-                              return <option key={i} value={item}>{`account[${i}]`}</option>;
-                        })
-                  }
-                    
-                  </select>
-            {
-                this.props.abi.payable ?
-                    <span>, value: 
-                        <input type="text" data-param="value" value={this.state.methodFields.value} size="6" onChange={this.handleMethodFieldChange} />
-                    </span>
-                    : ''
-            }
-            {
-                this._getMethodType() == 'send' ?
-                    <span>, gasLimit: 
-                        <input type="text" data-param="gasLimit" value={this.state.methodFields.gasLimit} size="6" onChange={this.handleMethodFieldChange} />
-                    </span>
-                    : ''
-            }
-            {
-                this._getMethodType() == 'send' && this.props.abi.type == 'fallback' ?
-                    <span>, data: 
-                        <input type="text" data-param="data" value={this.state.methodFields.data} size="6" onChange={this.handleMethodFieldChange} />
-                    </span>
-                    : ''
-            }
-            </span>;
-    }
-
-
-    _getFunctionParamFields(){
-        return <span>
-                { 
-                    this.props.abi.inputs
-                        .map((input, i) => <input key={i} type="text" data-var-type={input.type} data-type="inputParam" data-name={input.name} placeholder={input.name} title={input.type + ' ' + input.name} size={input.name.length} value={this.state.fields[input.name]} size="6" onChange={this.handleParameterChange} />)
-                        .reduce((accu, elem) => {
-                            return accu === null ? [elem] : [...accu, ', ', elem]
-                        }, null)
-                }
-                </span>;
-    }
-
-    render(){
-        return <span>
-            await {this._getFunctionLabel()}
-            { this.props.abi.type != 'fallback' ? '(' : '' }
-            { this.props.abi.type != 'fallback' ? this._getFunctionParamFields() : '' }
-            { this.props.abi.type != 'fallback' ? ')' : '' }
-            { this.props.abi.type != 'fallback' ? '.' + this._getMethodType() : '' }
-            ({ this._getMethodFields() })
-            <button>&#9166;</button>
-            <img src="images/loading.gif" className="loading" alt="" />
-        </span>;
-    }
-
-}
-
-export default Function;
\ No newline at end of file
diff --git a/app/components/instance-selector.js b/app/components/instance-selector.js
deleted file mode 100644
index 19582be..0000000
--- a/app/components/instance-selector.js
+++ /dev/null
@@ -1,100 +0,0 @@
-class InstanceSelector extends  React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            showInstances: false,
-            showCustomAddressField: false,
-            selectedInstance: props.selectedInstance,
-            customInstance: "",
-            error: false,
-            errorMessage: ""
-        };
-
-        this.handleShowInstances = this.handleShowInstances.bind(this);
-        this.handleChange = this.handleChange.bind(this);
-        this.handleClick = this.handleClick.bind(this);
-        this.handleTextChange = this.handleTextChange.bind(this);
-    }
-    
-    handleTextChange(e){
-        this.setState({customInstance: e.target.value});
-    }
-
-    handleShowInstances(e){
-        e.preventDefault();
-        this.setState({
-            showInstances: !this.state.showInstances
-        });
-    }
-
-    handleClick(e){
-        e.preventDefault();
-
-        let instance;
-        if(this.state.selectedInstance == "custom"){
-            instance = this.state.customInstance;
-        } else {
-            instance = this.state.selectedInstance;
-        }
-
-        if(!/^0x[0-9a-f]{40}$/i.test(instance)){
-            this.setState({error: true, errorMessage: 'Not a valid Ethereum address.'});
-            console.log(this.state.errorMessage);
-            return;
-        } else {
-            this.setState({error: false});
-        }
-
-        this.props.instanceUpdate(instance);
-
-        this.setState({
-            showInstances: false,
-            showCustomAddressField: false,
-            selectedInstance: instance,
-            customInstance: this.state.selectedInstance == "custom" ? this.state.customInstance : ""
-        })
-    }
-
-    handleChange(e){
-        this.setState({
-            showCustomAddressField: e.target.value == "custom",
-            selectedInstance: e.target.value
-        });
-    }
-
-    render(){
-
-        return <div className="contractSelection">
-            <h5>
-                <b>Instance Selected:</b> <span><b>{this.props.selectedInstance != null ? this.props.selectedInstance : 'none'}</b></span>
-                {!this.state.showInstances ? <a href="#" onClick={this.handleShowInstances}>Change</a> : <a href="#" onClick={this.handleShowInstances}>Cancel</a> }
-            </h5>
-            {this.state.showInstances ? 
-            <div className="form-group control-group error">
-                <select className="form-control" id="contracts" value={this.state.selectedInstance} onChange={this.handleChange}>
-                    <option value="custom">Specific contract address</option>
-                    {
-                        this.props.instances.map(function (item, i) {
-                            return <option key={i} value={item}>{item}</option>;
-                        })
-                    }
-                </select>
-                {
-                    this.state.showCustomAddressField ? 
-                    <input type="text" className="form-control" id="specificAddress" onChange={this.handleTextChange} placeholder="0x" />
-                    : ''
-                }
-                <button className="btn btn-default" onClick={this.handleClick}>Change</button>
-                {
-                    this.state.error ?
-                    <p className="error">{this.state.errorMessage}</p>
-                    : ""
-                }
-            </div> : "" }
-      </div>;
-    }
-
-}
-
-export default InstanceSelector;
\ No newline at end of file
diff --git a/app/components/source-area.js b/app/components/source-area.js
deleted file mode 100644
index ece36b7..0000000
--- a/app/components/source-area.js
+++ /dev/null
@@ -1,27 +0,0 @@
-class SourceArea extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            sourceCode: ""
-        };
-    }
-
-    componentDidMount(){
-        fetch(this.props.sourceURL)
-            .then(response => response.text())
-            .then(text => {
-                let colorCodedText = hljs.highlight('javascript', text, true).value;
-                this.setState({sourceCode: colorCodedText});
-            });
-    }
-    
-    render(){
-        return <div>
-            <h3 className="filename">{this.props.sourceURL.split('\\').pop().split('/').pop()}</h3>
-            <small className="url">{this.props.sourceURL}</small>
-            <pre dangerouslySetInnerHTML={{__html: this.state.sourceCode}}></pre>
-        </div>;
-    }
-}
-
-export default SourceArea;
\ No newline at end of file
diff --git a/app/components/tab.js b/app/components/tab.js
deleted file mode 100644
index 80006f0..0000000
--- a/app/components/tab.js
+++ /dev/null
@@ -1,10 +0,0 @@
-class Tab extends React.Component {
-    render(){
-        return <div role="tabpanel" className={this.props.active || false ? 'tab-pane active' : 'tab-pane'} id={this.props.id}>
-        <h2>{this.props.name}</h2>
-        { this.props.children }
-      </div>;
-    }
-}
-
-export default Tab;
\ No newline at end of file
diff --git a/app/react-dapp.js b/app/react-dapp.js
deleted file mode 100644
index ba6326d..0000000
--- a/app/react-dapp.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import 'bootstrap';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './dapp.css';
-
-import EmbarkJS from 'Embark/EmbarkJS';
-import IdentityFactory from 'Embark/contracts/IdentityFactory';
-
-import ContractUI from './components/contract-ui';
-
-
-__embarkContext.execWhenReady(function(){
-    
-    // Each contract should be awailable on window
-    window["IdentityFactory"] = IdentityFactory;
-    ReactDOM.render(
-        <ContractUI name="IdentityFactory" contract={IdentityFactory} sourceURL="https://raw.githubusercontent.com/status-im/contracts/contracts-ui-demo/contracts/identity/IdentityFactory.sol" />,
-        document.getElementById('root')
-      );
-
-
-});
diff --git a/app/react-version.html b/app/react-version.html
deleted file mode 100644
index 04cf4cb..0000000
--- a/app/react-version.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Contract UI</title>
-    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/javascript.min.js"></script>
-    <script src="js/react-dapp.js"></script>
-  </head>
-  <body class="container-fluid">
-    <div id="root"></div>
-  </body>
-</html>
\ No newline at end of file
diff --git a/embark.json b/embark.json
index 2ee7064..9a18ff8 100644
--- a/embark.json
+++ b/embark.json
@@ -2,9 +2,9 @@
   "contracts": ["contracts/**"],
   "app": {
     "js/dapp.js": ["app/dapp.js"],
-    "js/react-dapp.js": ["app/react-dapp.js"],
+    "contracts-section.js": ["app/react/contracts-section.js"],
     "index.html": "app/index.html",
-    "react-version.html": "app/react-version.html",
+    "contracts-section.html": "app/react/contracts-section.html",
     "images/": ["app/images/**"]
   },
   "buildDir": "dist/",