diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 92e3c751e..ee36283f8 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -48,6 +48,7 @@ import RepostNew from 'page/repost';
 import BuyPage from 'page/buy';
 import ReceivePage from 'page/receive';
 import SendPage from 'page/send';
+import SwapPage from 'page/swap';
 import NotificationsPage from 'page/notifications';
 import SignInWalletPasswordPage from 'page/signInWalletPassword';
 import YoutubeSyncPage from 'page/youtubeSync';
@@ -285,6 +286,7 @@ function AppRouter(props: Props) {
       <PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.RECEIVE}`} component={ReceivePage} />
       <PrivateRoute {...props} path={`/$/${PAGES.SEND}`} component={SendPage} />
+      <PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
       <PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
 
diff --git a/ui/component/walletBalance/view.jsx b/ui/component/walletBalance/view.jsx
index 6746d5c36..3122a7087 100644
--- a/ui/component/walletBalance/view.jsx
+++ b/ui/component/walletBalance/view.jsx
@@ -155,6 +155,7 @@ const WalletBalance = (props: Props) => {
             <Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
             <Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
             <Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
+            <Button button="secondary" label={__('Swap')} icon={ICONS.REFRESH} navigate={`/$/${PAGES.SWAP}`} />
           </div>
           {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
             <p className="help">
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index 2623d581e..2623f3c2a 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -59,6 +59,7 @@ exports.CODE_2257 = '2257';
 exports.BUY = 'buy';
 exports.RECEIVE = 'receive';
 exports.SEND = 'send';
+exports.SWAP = 'swap';
 exports.CHANNEL_NEW = 'channel/new';
 exports.NOTIFICATIONS = 'notifications';
 exports.YOUTUBE_SYNC = 'youtube';
diff --git a/ui/page/swap/index.js b/ui/page/swap/index.js
new file mode 100644
index 000000000..8d853b9cf
--- /dev/null
+++ b/ui/page/swap/index.js
@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import SwapPage from './view';
+
+const select = (state) => ({});
+
+export default connect(select, null)(SwapPage);
diff --git a/ui/page/swap/view.jsx b/ui/page/swap/view.jsx
new file mode 100644
index 000000000..74964f563
--- /dev/null
+++ b/ui/page/swap/view.jsx
@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import Page from 'component/page';
+import LbcSymbol from 'component/common/lbc-symbol';
+
+type Props = {};
+
+export default function SwapPage(props: Props) {
+  return (
+    <Page
+      noSideNavigation
+      className="main--buy"
+      backout={{
+        backoutLabel: __('Done'),
+        title: (
+          <>
+            <LbcSymbol prefix={__('Swap')} size={28} />
+          </>
+        ),
+      }}
+    />
+  );
+}