diff --git a/src/libs/material-ui/components/transactions/transaction_signing_overlay.jsx b/src/libs/material-ui/components/transactions/transaction_signing_overlay.jsx
index ade1877..2a2bf0e 100644
--- a/src/libs/material-ui/components/transactions/transaction_signing_overlay.jsx
+++ b/src/libs/material-ui/components/transactions/transaction_signing_overlay.jsx
@@ -2,7 +2,6 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { connect } from 'react-redux';
 
 import Dialog from '@material-ui/core/Dialog';
@@ -10,16 +9,8 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Grid from '@material-ui/core/Grid';
-import Collapse from '@material-ui/core/Collapse';
-import Typography from '@material-ui/core/Typography';
-import Card from '@material-ui/core/Card';
-import TextField from '@material-ui/core/TextField';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import Slider from '@digix/mui/lib/components/SimpleSlider';
 
-import '@digix/mui/lib/assets/css/simpleSlider.css';
-
-import { withStyles } from '@material-ui/core/styles';
+import { GasPrice } from '@digix/governance-ui-components/src/components/common';
 
 import Button from '@material-ui/core/Button';
 import LinearProgress from '@material-ui/core/LinearProgress';
@@ -36,109 +27,18 @@ const defaultState = {
   autoBroadcast: true,
   signedTx: null,
   signingAction: undefined,
-  openAdvanced: false,
   gasPrice: 20,
   showAdvancedTab: true,
 };
 
-const styles = theme => ({
-  expand: {
-    transform: 'rotate(0deg)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.shortest
-    })
-  },
-  slider: {
-    margin: '3em 0 0 0'
-  },
-  advancedBtn: {
-    fontWeight: '300',
-    border: 0,
-    marginTop: '1.5em',
-    padding: 0,
-    fontSize: '0.8em',
-    textAlign: 'center'
-  },
-  expandOpen: {
-    transform: 'rotate(180deg)'
-  },
-  card: {
-    padding: '2rem',
-    borderRadius: '.5rem',
-    background: 'rgba(70, 78, 91, 0.2);',
-    boxShadow: 'none',
-    textAlign: 'center',
-    [theme.breakpoints.between('xs', 'sm')]: {
-      padding: '2em 1em'
-    }
-  },
-  noPadding: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 !important'
-  },
-  typography: {
-    margin: '1em 0 2em 0',
-    color: '#000'
-  },
-  voteSelection: {
-    background: '#E2CE98',
-    borderRadius: '50px',
-    textAlign: 'center',
-    padding: '0 !important'
-  },
-  selected: {
-    margin: '0',
-    // color: globalVars.tertiaryColor,
-    fontSize: '1.5em',
-    paddingRight: '1rem'
-  },
-  textField: {
-    // color: globalVars.tertiaryColor,
-    width: 'auto',
-    textAlign: 'center',
-    fontSize: '1.1em',
-    fontWeight: '600',
-    '&': {
-      '-moz-appearance': 'textfield'
-    },
-    '&::-webkit-inner-spin-button, &::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
-  },
-  noBorder: {
-    border: '0',
-    '&::before': {
-      borderBottom: '0'
-    },
-    ':hover': {
-      border: 'none'
-    }
-  },
-  minValue: {
-    textAlign: 'left',
-    fontSize: '1.3em',
-    color: '#000',
-    marginTop: '1em'
-  },
-  maxValue: {
-    textAlign: 'right',
-    fontSize: '1.3em',
-    color: '#000',
-    marginTop: '1em'
-  }
-});
-
 class TransactionSigningOverlay extends Component {
   static propTypes = {
     data: PropTypes.object,
     hideTxSigningModal: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired
   };
 
   static defaultProps = {
-    data: undefined
+    data: undefined,
   };
 
   constructor(props) {
@@ -150,7 +50,7 @@ class TransactionSigningOverlay extends Component {
     this.handleSign = this.handleSign.bind(this);
   }
 
-  componentWillReceiveProps = nextProps => {
+  componentWillReceiveProps = (nextProps) => {
     const { data } = nextProps;
     if (data) {
       const { txData } = data;
@@ -159,10 +59,10 @@ class TransactionSigningOverlay extends Component {
     }
   };
 
-  setGasPrice = gasPrice => {
+  setGasPrice = (gasPrice) => {
     // this.props.setTxFee(gasPrice);
     this.setState({
-      gasPrice
+      gasPrice,
     });
   };
 
@@ -206,10 +106,10 @@ class TransactionSigningOverlay extends Component {
     this.props.hideTxSigningModal({ error: t.cancelled });
   }
 
-  handleChange = (name, { min, max }) => event => {
+  handleChange = (name, { min, max }) => (event) => {
     const value = parseFloat(event.target.value) || min;
     this.setState({
-      [name]: value > max ? max : value
+      [name]: value > max ? max : value,
     });
   };
 
@@ -217,99 +117,6 @@ class TransactionSigningOverlay extends Component {
     this.setState({ showAdvancedTab: false });
   }
 
-  toggleAdvancedTab = (e) => {
-    e.preventDefault();
-    const { logTxn } = this.props.data;
-    const { openAdvanced } = this.state;
-
-    if (logTxn) {
-      logTxn.toggleAdvanced(!openAdvanced);
-    }
-
-    this.setState({ openAdvanced: !openAdvanced });
-  }
-
-  renderAdvancedTab() {
-    const t = this.props.data.translations.common;
-    const { classes } = this.props;
-    const { gasPrice, openAdvanced, showAdvancedTab } = this.state;
-
-    if (!showAdvancedTab) {
-      return null;
-    }
-
-    const MIN_GWEI = 1;
-    const MAX_GWEI = 100;
-    const range = {
-      min: MIN_GWEI,
-      max: MAX_GWEI,
-    };
-
-    const inputProps = {
-      step: 1,
-      ...range,
-      className: classes.textField,
-    };
-
-    const classProps = {
-      classes: {
-        root: classes.textField,
-        input: classes.noBorder,
-        underline: classes.noBorder,
-      },
-    };
-
-    return (
-      <div>
-        <Button
-          className={classes.advancedBtn}
-          disableRipple
-          disableTouchRipple
-          onClick={this.toggleAdvancedTab}
-          variant="outlined"
-        >
-          {t.advanced}
-          <ExpandMoreIcon
-            className={classnames(classes.expand, {
-              [classes.expandOpen]: openAdvanced,
-            })}
-          />
-        </Button>
-
-        <Collapse in={openAdvanced}>
-          <Card className={classes.card}>
-            <Grid container>
-              <Grid item xs={9} className={classes.noPadding}>
-                <Typography className={classes.typography}>{t.gasPrice}</Typography>
-              </Grid>
-              <Grid item xs={3} className={classes.voteSelection}>
-                <Typography className={classes.selected} variant="caption">
-                  <TextField
-                    inputProps={inputProps}
-                    InputProps={classProps}
-                    onChange={this.handleChange('gasPrice', range)}
-                    value={gasPrice}
-                    type="number"
-                  />
-                  &nbsp;GWEI
-                </Typography>
-              </Grid>
-              <Grid item xs={12}>
-                <div className={classes.slider}>
-                  <Slider onUpdate={this.setGasPrice} range={range} start={[gasPrice]} step={1} />
-                  <Grid container>
-                    <Grid item xs={6} className={classes.minValue}>{MIN_GWEI}</Grid>
-                    <Grid item xs={6} className={classes.maxValue}>{MAX_GWEI}</Grid>
-                  </Grid>
-                </div>
-              </Grid>
-            </Grid>
-          </Card>
-        </Collapse>
-      </div>
-    );
-  }
-
   render() {
     const { data } = this.props;
     if (!data) {
@@ -325,7 +132,6 @@ class TransactionSigningOverlay extends Component {
       signedTx,
       signingAction,
       loading,
-      gasPrice,
     } = this.state;
 
     if (!txData || !keystore) {
@@ -334,7 +140,7 @@ class TransactionSigningOverlay extends Component {
 
     const { gasPrice: txGas, ...rest } = txData;
     const newTxData = {
-      gasPrice: `0x${(Number(gasPrice) * 1e9).toString(16)}`,
+      gasPrice: `0x${(Number(this.state.gasPrice) * 1e9).toString(16)}`,
       ...rest,
     };
 
@@ -379,7 +185,12 @@ class TransactionSigningOverlay extends Component {
                     translations={translations}
                     logTxn={logTxn}
                   />
-                  {this.renderAdvancedTab()}
+                  {this.state.showAdvancedTab && (
+                    <GasPrice
+                      gas={newTxData.gas}
+                      onGasPriceChange={this.setGasPrice}
+                    />
+                  )}
                 </div>
               ) : (
                 <div>
@@ -392,7 +203,7 @@ class TransactionSigningOverlay extends Component {
                     content="Broadcast Transaction"
                     icon="bullhorn"
                     color="green"
-                    onClick={e => {
+                    onClick={(e) => {
                       e.preventDefault();
                       this.handleBroadcast({ signedTx });
                     }}
@@ -417,5 +228,5 @@ class TransactionSigningOverlay extends Component {
 
 export default connect(
   state => ({ data: getSigningModalData(state) }),
-  { hideTxSigningModal }
-)(withStyles(styles)(TransactionSigningOverlay));
+  { hideTxSigningModal },
+)(TransactionSigningOverlay);
diff --git a/src/libs/material-ui/keystoreTypes/metamask/metamask_keystore_transaction_signer.jsx b/src/libs/material-ui/keystoreTypes/metamask/metamask_keystore_transaction_signer.jsx
index d0c942c..fc1b72b 100644
--- a/src/libs/material-ui/keystoreTypes/metamask/metamask_keystore_transaction_signer.jsx
+++ b/src/libs/material-ui/keystoreTypes/metamask/metamask_keystore_transaction_signer.jsx
@@ -1,10 +1,12 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import { withStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@material-ui/core/Button';
+import Markdown from 'react-markdown';
 
 const styles = () => ({
   card: {
@@ -23,15 +25,18 @@ class MetaMaskTransactionSigner extends Component {
     super(props);
     this.state = {
       error: false,
+      isSigning: false,
     };
-  }
 
-  componentDidMount() {
-    this.props.hideAdvancedTab();
+    this.renderInitSigning = this.renderInitSigning.bind(this);
+    this.renderLoading = this.renderLoading.bind(this);
+    this.initiateSigning = this.initiateSigning.bind(this);
+  }
 
+  initiateSigning() {
     const throwErr = (error) => {
       this.props.setLoading(false);
-      this.setState({ error });
+      this.setState({ error, isSigning: false });
       const { logTxn } = this.props;
       if (logTxn) {
         logTxn.completeTransaction(false, error);
@@ -58,6 +63,7 @@ class MetaMaskTransactionSigner extends Component {
           }
           this.props.hideTxSigningModal({ error: ERROR_MESSAGES.shouldBeInRpc });
         } else {
+          this.setState({ isSigning: true });
           window.web3.eth.sendTransaction(txData, (sendTransactionError, txHash) => {
             const result = sendTransactionError ? { error: sendTransactionError } : txHash;
             this.props.hideTxSigningModal(result);
@@ -69,19 +75,47 @@ class MetaMaskTransactionSigner extends Component {
     }
   }
 
-  render() {
+  renderInitSigning = () => {
+    const handleInitiateSigning = () => {
+      this.props.hideAdvancedTab();
+      this.initiateSigning();
+    };
+
+    const buttonStyle = {
+      display: 'block',
+      margin: '0 auto',
+    };
+
+    const t = this.props.translations.common;
+    return (
+      <Fragment>
+        <Markdown source={t.modifyInstructions} escapeHtml={false} />
+        <Button variant="outlined" onClick={handleInitiateSigning} style={buttonStyle}>
+          {t.sign}
+        </Button>
+      </Fragment>
+    );
+  };
+
+  renderLoading = () => {
     const { classes } = this.props;
     const t = this.props.translations.Metamask;
 
+    return (
+      <Card className={classes.card} elevation={0}>
+        <CardHeader
+          avatar={<CircularProgress />}
+          title={t.title}
+          subheader={t.description}
+        />
+      </Card>
+    );
+  };
+
+  render() {
     return (
       <div style={{ marginTop: '1em' }}>
-        <Card className={classes.card} elevation={0}>
-          <CardHeader
-            avatar={<CircularProgress />}
-            title={t.title}
-            subheader={t.description}
-          />
-        </Card>
+        {this.state.isSigning ? this.renderLoading() : this.renderInitSigning()}
       </div>
     );
   }