diff --git a/react/src/components/dashboard/main/dashboard.render.js b/react/src/components/dashboard/main/dashboard.render.js
index b6b31e6..dfc5911 100644
--- a/react/src/components/dashboard/main/dashboard.render.js
+++ b/react/src/components/dashboard/main/dashboard.render.js
@@ -14,7 +14,6 @@ import Settings from '../settings/settings';
 import ReceiveCoin from '../receiveCoin/receiveCoin';
 import About from '../about/about';
 import WalletsNative from '../walletsNative/walletsNative';
-import WalletsNativeTxInfo from '../walletsNativeTxInfo/walletsNativeTxInfo';
 import WalletsTxInfo from '../walletsTxInfo/walletsTxInfo';
 
 const DashboardRender = function() {
@@ -28,13 +27,14 @@ const DashboardRender = function() {
           <CoinTile {...this.props} />
           <WalletsNav {...this.props} />
           <WalletsProgress {...this.props} />
-          { !this.isNativeMode() && <WalletsBalance {...this.props} />}
+          <span className={ this.props.ActiveCoin.mode !== 'native' ? 'show' : 'hide' }>
+            <WalletsBalance {...this.props} />
+          </span>
           <SendCoin {...this.props} />
+          <ReceiveCoin {...this.props.ActiveCoin} />
           <WalletsData {...this.props} />
           <WalletsTxInfo {...this.props} />
           <WalletsNative {...this.props} />
-          <ReceiveCoin {...this.props.ActiveCoin} />
-          <WalletsNativeTxInfo {...this.props} />
         </div>
         <div className={ this.isSectionActive('edex') ? 'show' : 'hide' }>
           <EDEX {...this.props} />
diff --git a/react/src/components/dashboard/walletsNative/walletsNative.render.js b/react/src/components/dashboard/walletsNative/walletsNative.render.js
index 2123121..1be038b 100644
--- a/react/src/components/dashboard/walletsNative/walletsNative.render.js
+++ b/react/src/components/dashboard/walletsNative/walletsNative.render.js
@@ -16,7 +16,9 @@ const WalletsNativeRender = function() {
           <ol className="breadcrumb">
             <li className="header-easydex-section">
               <img src={ `assets/images/native/${this.defaultBG()}_header_title_logo.png` } /> 
-              <span className={ `easydex-section-image ${(this.props.ActiveCoin.coin === 'KMD' ? 'hide' : '')}` }>
+              <span
+                className={ `easydex-section-image ${(this.props.ActiveCoin.coin === 'KMD' ? 'hide' : '')}` }
+                style={{ marginLeft: '20px' }}>
                 { this.props.ActiveCoin.coin }
               </span>
             </li>
diff --git a/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.js b/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.js
deleted file mode 100644
index 39deb98..0000000
--- a/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { toggleDashboardTxInfoModal } from '../../../actions/actionCreators';
-import Store from '../../../store';
-
-class WalletsNativeTxInfo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeTab: 0,
-    };
-    this.toggleTxInfoModal = this.toggleTxInfoModal.bind(this);
-  }
-
-  toggleTxInfoModal() {
-    Store.dispatch(toggleDashboardTxInfoModal(false));
-  }
-
-  openTab(tab) {
-    this.setState(Object.assign({}, this.state, {
-      activeTab: tab,
-    }));
-  }
-
-  handleKeydown(e) {
-    if (e.key === 'Escape') {
-      this.toggleTxInfoModal();
-    }
-  }
-
-  render() {
-    if (this.props &&
-        this.props.ActiveCoin.showTransactionInfo &&
-        this.props.ActiveCoin.nativeActiveSection === 'default' &&
-        this.props.ActiveCoin.mode === 'native') {
-      const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
-
-      return WalletsNativeTxInfoRender.call(this, txInfo);
-    } else {
-      return null;
-    }
-  }
-}
-
-export default WalletsNativeTxInfo;
diff --git a/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.render.js b/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.render.js
deleted file mode 100644
index 064d597..0000000
--- a/react/src/components/dashboard/walletsNativeTxInfo/walletsNativeTxInfo.render.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react';
-import { translate } from '../../../translate/translate';
-import { secondsToString } from '../../../util/time';
-
-const WalletsNativeTxInfoRender = function(txInfo) {
-  return (
-    <div onKeyDown={ (event) => this.handleKeydown(event) }>
-      <div
-        className="modal show"
-        id="kmd_txid_info_mdl">
-        <div className="modal-dialog modal-center modal-lg">
-          <div className="modal-content">
-            <div className="modal-body modal-body-container">
-              <div className="panel nav-tabs-horizontal">
-                <ul className="nav nav-tabs nav-tabs-line">
-                  <li className={ this.state.activeTab === 0 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(0) }>
-                      <i className="icon md-balance-wallet"></i>TxID Info
-                    </a>
-                  </li>
-                  <li className={ this.state.activeTab === 1 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(1) }>
-                      <i className="icon md-plus-square"></i>Vjointsplits, Details
-                    </a>
-                  </li>
-                  <li className={ this.state.activeTab === 2 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(2) }>
-                      <i className="icon wb-briefcase"></i>Hex
-                    </a>
-                  </li>
-                  <li className={ this.state.activeTab === 3 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(3) }>
-                      <i className="icon wb-file"></i>Raw info
-                    </a>
-                  </li>
-                </ul>
-                <div className="panel-body">
-                  <div className="tab-content">
-                    <div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
-                      <table className="table table-striped">
-                        <tbody>
-                        <tr>
-                          <td>amount</td>
-                          <td>
-                            { txInfo.amount }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>fee</td>
-                          <td>
-                            { txInfo.fee }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>confirmations</td>
-                          <td>
-                            { txInfo.confirmations }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>blockhash</td>
-                          <td>
-                            { txInfo.blockhash }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>blockindex</td>
-                          <td>
-                            { txInfo.blockindex }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>blocktime</td>
-                          <td>
-                            { secondsToString(txInfo.blocktime) }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>txid</td>
-                          <td>
-                            { txInfo.txid }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>walletconflicts</td>
-                          <td>
-                            { txInfo.walletconflicts.length }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>time</td>
-                          <td>
-                            { secondsToString(txInfo.time) }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>timereceived</td>
-                          <td>
-                            { secondsToString(txInfo.timereceived) }
-                          </td>
-                        </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                    <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
-                      <table className="table table-striped">
-                        <tbody>
-                        <tr>
-                          <td>vjoinsplit</td>
-                          <td>
-                            { txInfo.vjoinsplit }
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>details</td>
-                          <td>
-                            { txInfo.details }
-                          </td>
-                        </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                    <div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
-                      <textarea
-                        className="full-width height-170"
-                        rows="10"
-                        cols="80"
-                        defaultValue={ txInfo.hex } disabled></textarea>
-                    </div>
-                    <div className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }>
-                      <textarea
-                        className="full-width height-400"
-                        rows="40"
-                        cols="80"
-                        defaultValue={ JSON.stringify(txInfo, null, '\t') }
-                        disabled></textarea>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="modal-footer">
-              <button
-                type="button"
-                className="btn btn-default"
-                onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="modal-backdrop show in"></div>
-    </div>
-  );
-};
-
-export default WalletsNativeTxInfoRender;
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js
index 0eac017..03a021b 100644
--- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js
+++ b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js
@@ -28,10 +28,17 @@ class WalletsTxInfo extends React.Component {
     }
   }
 
+  isNativeMode() {
+    return this.props.ActiveCoin.mode === 'native';
+  }
+
   render() {
     if (this.props &&
         this.props.ActiveCoin.showTransactionInfo &&
-        this.props.ActiveCoin.mode !== 'native') {
+        // TODO the conditions below should be merged once the native mode components are fully merged
+        // into the rest of the components
+        (!this.isNativeMode() ||
+        (this.isNativeMode() && this.props.ActiveCoin.nativeActiveSection === 'default'))) {
       const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
       return WalletsTxInfoRender.call(this, txInfo);
     }
diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
index 093aab2..07299a2 100644
--- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
+++ b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
@@ -18,8 +18,25 @@ const WalletsTxInfoRender = function(txInfo) {
                       <i className="icon md-balance-wallet"></i>TxID Info
                     </a>
                   </li>
-                  <li className={ this.state.activeTab === 1 ? 'active' : '' }>
-                    <a onClick={ () => this.openTab(1) }>
+
+                  { this.isNativeMode() &&
+                    <li className={ this.state.activeTab === 1 ? 'active' : '' }>
+                      <a onClick={ () => this.openTab(1) }>
+                        <i className="icon md-plus-square"></i>Vjointsplits, Details
+                      </a>
+                    </li>
+                  }
+
+                  { this.isNativeMode() &&
+                    <li className={ this.state.activeTab === 2 ? 'active' : '' }>
+                      <a onClick={ () => this.openTab(2) }>
+                        <i className="icon wb-briefcase"></i>Hex
+                      </a>
+                    </li>
+                  }
+
+                  <li className={ this.state.activeTab === 3 ? 'active' : '' }>
+                    <a onClick={ () => this.openTab(3) }>
                       <i className="icon wb-file"></i>Raw info
                     </a>
                   </li>
@@ -71,10 +88,64 @@ const WalletsTxInfoRender = function(txInfo) {
                             { txInfo.txid }
                           </td>
                         </tr>
+
+                        { this.isNativeMode() &&
+                        <tr>
+                          <td>walletconflicts</td>
+                          <td>
+                            { txInfo.walletconflicts.length }
+                          </td>
+                        </tr>
+                        }
+
+                        { this.isNativeMode() &&
+                        <tr>
+                          <td>time</td>
+                          <td>
+                            { secondsToString(txInfo.time) }
+                          </td>
+                        </tr>
+                        }
+
+                        { this.isNativeMode() &&
+                        <tr>
+                          <td>timereceived</td>
+                          <td>
+                            { secondsToString(txInfo.timereceived) }
+                          </td>
+                        </tr>
+                        }
                         </tbody>
                       </table>
                     </div>
+
                     <div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
+                      <table className="table table-striped">
+                        <tbody>
+                        <tr>
+                          <td>vjoinsplit</td>
+                          <td>
+                            { txInfo.vjoinsplit }
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>details</td>
+                          <td>
+                            { txInfo.details }
+                          </td>
+                        </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
+                      <textarea
+                        className="full-width height-170"
+                        rows="10"
+                        cols="80"
+                        defaultValue={ txInfo.hex } disabled></textarea>
+                    </div>
+
+                    <div className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }>
                       <textarea
                         className="full-width height-400"
                         rows="40"