diff --git a/README.md b/README.md
index 9a344ba14..40e7ae3ae 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,7 @@ Local: http://localhost:3000
 | Balances Tab     | [/account/stellar\*fed.network#balances](https://steexp.com/account/stellar*fed.network#balances)         |
 | Payments Tab     | [/account/stellar\*fed.network#payments](https://steexp.com/account/stellar*fed.network#payments)         |
 | Offers Tab       | [/account/stellar\*fed.network#offers](https://steexp.com/account/stellar*fed.network#offers)             |
+| Trades Tab       | [/account/stellar\*fed.network#trades](https://steexp.com/account/stellar*fed.network#trades)             |
 | Effects Tab      | [/account/stellar\*fed.network#effects](https://steexp.com/account/stellar*fed.network#effects)           |
 | Operations Tab   | [/account/stellar\*fed.network#operations](https://steexp.com/account/stellar*fed.network#operations)     |
 | Transactions Tab | [/account/stellar\*fed.network#transactions](https://steexp.com/account/stellar*fed.network#transactions) |
diff --git a/src/components/Account.js b/src/components/Account.js
index 607240f73..77521bcf9 100644
--- a/src/components/Account.js
+++ b/src/components/Account.js
@@ -25,10 +25,12 @@ import AccountLink from './shared/AccountLink'
 import Asset from './shared/Asset'
 import ClipboardCopy from './shared/ClipboardCopy'
 import EffectTable from './EffectTable'
+import FormattedAmount from './shared/FormattedAmount'
 import Logo from './shared/Logo'
 import OperationTable from './OperationTable'
 import OfferTable from './OfferTable'
 import PaymentTable from './PaymentTable'
+import TradeTable from './TradeTable'
 import TransactionTable from './TransactionTableContainer'
 
 const stellarAddressFromURI = () => {
@@ -60,7 +62,9 @@ const NameValueTable = ({data, decodeValue = false}) => {
             <td>
               {typeof data[key] === 'boolean'
                 ? data[key].toString()
-                : decodeValue ? base64Decode(data[key]) : data[key]}
+                : decodeValue
+                  ? base64Decode(data[key])
+                  : data[key]}
             </td>
           </tr>
         ))}
@@ -79,7 +83,9 @@ const balanceRow = bal => (
       />
     </td>
     <td>
-      <span className="break">{bal.balance}</span>
+      <span className="break">
+        <FormattedAmount amount={bal.balance} />
+      </span>
     </td>
     <td>
       <span className="break">{bal.limit}</span>
@@ -327,6 +333,9 @@ class Account extends React.Component {
                 usePaging
               />
             </Tab>
+            <Tab eventKey="trades" title={formatMessage({id: 'trades'})}>
+              <TradeTable key={a.id} account={a.id} limit={20} usePaging />
+            </Tab>
             <Tab eventKey="effects" title={formatMessage({id: 'effects'})}>
               {// OPTIMISATION: render on focus only as it hits the server for every effect
               this.state.renderEffects === true && (
diff --git a/src/components/TradeTable.js b/src/components/TradeTable.js
index 5f67d234c..172946503 100644
--- a/src/components/TradeTable.js
+++ b/src/components/TradeTable.js
@@ -8,16 +8,19 @@ import mapKeys from 'lodash/mapKeys'
 import camelCase from 'lodash/camelCase'
 
 import AccountLink from './shared/AccountLink'
+import FormattedAmount from './shared/FormattedAmount'
 import Asset from './shared/Asset'
 import {withDataFetchingContainer} from './shared/DataFetchingContainer'
 import {withPaging} from './shared/Paging'
 import {withSpinner} from './shared/Spinner'
 import TimeSynchronisedFormattedRelative from './shared/TimeSynchronizedFormattedRelative'
 
-const Trade = ({trade, parentRenderTimestamp}) => {
+import {isPublicKey} from '../lib/utils'
+
+const Trade = ({account, singleAccountView, trade, parentRenderTimestamp}) => {
   const Base = (
     <span>
-      {trade.baseAmount}{' '}
+      <FormattedAmount amount={trade.baseAmount} />{' '}
       <Asset
         code={trade.baseAssetCode}
         issuer={trade.baseAssetIssuer}
@@ -28,7 +31,7 @@ const Trade = ({trade, parentRenderTimestamp}) => {
 
   const Counter = (
     <span>
-      {trade.counterAmount}{' '}
+      <FormattedAmount amount={trade.counterAmount} />{' '}
       <Asset
         code={trade.counterAssetCode}
         issuer={trade.counterAssetIssuer}
@@ -37,24 +40,34 @@ const Trade = ({trade, parentRenderTimestamp}) => {
     </span>
   )
 
+  let baseFirst
+  let account1, account2
+
+  if (singleAccountView) {
+    const accountIsBase = account === trade.baseAccount
+    baseFirst = !accountIsBase // account's bought asset first
+    account1 = account
+    account2 = accountIsBase ? trade.counterAccount : trade.baseAccount
+  } else {
+    baseFirst = trade.baseIsSeller
+    account1 = trade.baseAccount
+    account2 = trade.counterAccount
+  }
+
   return (
     <tr key={trade.id} className="trade">
-      <td className="account-badge">
-        <AccountLink
-          account={
-            trade.baseIsSeller ? trade.baseAccount : trade.counterAccount
-          }
-        />
+      <td>
+        <span className="account-badge">
+          <AccountLink account={account1} />
+        </span>
       </td>
-      <td>{trade.baseIsSeller ? Base : Counter}</td>
-      <td className="account-badge">
-        <AccountLink
-          account={
-            trade.baseIsSeller ? trade.counterAccount : trade.baseAccount
-          }
-        />
+      <td>{baseFirst ? Base : Counter}</td>
+      <td>
+        <span className="account-badge">
+          <AccountLink account={account2} />
+        </span>
       </td>
-      <td>{trade.baseIsSeller ? Counter : Base}</td>
+      <td>{baseFirst ? Counter : Base}</td>
       <td>
         <span title={trade.time}>
           <TimeSynchronisedFormattedRelative
@@ -67,45 +80,68 @@ const Trade = ({trade, parentRenderTimestamp}) => {
   )
 }
 
-const TradeTable = ({compact, server, parentRenderTimestamp, records}) => (
-  <Table id="trade-table" className="table-striped table-hover table-condensed">
-    <thead>
-      <tr>
-        <th>
-          <FormattedMessage id="seller" />
-        </th>
-        <th>
-          <FormattedMessage id="amount" />
-        </th>
-        <th>
-          <FormattedMessage id="buyer" />
-        </th>
-        <th>
-          <FormattedMessage id="amount" />
-        </th>
-        <th>
-          <FormattedMessage id="time" />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      {records.map(trade => (
-        <Trade
-          key={trade.id}
-          compact={compact}
-          trade={trade}
-          parentRenderTimestamp={parentRenderTimestamp}
-        />
-      ))}
-    </tbody>
-  </Table>
-)
+Trade.propTypes = {
+  parentRenderTimestamp: PropTypes.number,
+  trade: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    baseIsSeller: PropTypes.bool.isRequired,
+    baseAccount: PropTypes.string.isRequired,
+    counterAccount: PropTypes.string.isRequired,
+    time: PropTypes.string.isRequired,
+  }).isRequired,
+  account: PropTypes.string,
+  singleAccountView: PropTypes.bool,
+}
+
+const TradeTable = ({server, parentRenderTimestamp, account, records}) => {
+  const singleAccountView = isPublicKey(account)
+  return (
+    <Table
+      id="trade-table"
+      className="table-striped table-hover table-condensed"
+    >
+      <thead>
+        <tr>
+          <th>
+            <FormattedMessage id="account" />
+            {' 1'}
+          </th>
+          <th>
+            <FormattedMessage id="bought" />
+          </th>
+          <th>
+            <FormattedMessage id="account" />
+            {' 2'}
+          </th>
+          <th>
+            <FormattedMessage id="bought" />
+          </th>
+          <th>
+            <FormattedMessage id="time" />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {records.map(trade => (
+          <Trade
+            key={trade.id}
+            trade={trade}
+            account={account}
+            singleAccountView={singleAccountView}
+            parentRenderTimestamp={parentRenderTimestamp}
+          />
+        ))}
+      </tbody>
+    </Table>
+  )
+}
 
 TradeTable.propTypes = {
-  compact: PropTypes.bool,
   parentRenderTimestamp: PropTypes.number,
   records: PropTypes.array.isRequired,
   server: PropTypes.object.isRequired,
+  account: PropTypes.string,
+  accountView: PropTypes.bool,
 }
 
 const rspRecToPropsRec = record => {
diff --git a/src/components/Trades.js b/src/components/Trades.js
index 4def0b8c5..2f79b952e 100644
--- a/src/components/Trades.js
+++ b/src/components/Trades.js
@@ -12,7 +12,7 @@ class Trades extends React.Component {
       <Grid>
         <Row>
           <Panel header={formatMessage({id: 'trades'})}>
-            <TradeTable compact={false} limit={50} usePaging />
+            <TradeTable limit={50} usePaging />
           </Panel>
         </Row>
       </Grid>
diff --git a/src/components/shared/FormattedAmount.js b/src/components/shared/FormattedAmount.js
index 5d5fc6a54..194c0a7de 100644
--- a/src/components/shared/FormattedAmount.js
+++ b/src/components/shared/FormattedAmount.js
@@ -1,16 +1,8 @@
 import PropTypes from 'prop-types'
+import {formatAmount} from '../../lib/utils'
 
-const REGEX_TRAILING_ZEROS = /0*$/
-const REGEX_TRAILING_DOT = /\.$/
-
-// chop off any trailing 0s and the '.' if only . left.
-const FormattedAmount = ({amount}) => {
-  let fmtAmount = amount
-  fmtAmount = fmtAmount.replace(REGEX_TRAILING_ZEROS, '')
-  if (fmtAmount.endsWith('.'))
-    fmtAmount = fmtAmount.replace(REGEX_TRAILING_DOT, '')
-  return fmtAmount
-}
+// chop off any trailing 0s
+const FormattedAmount = ({amount}) => formatAmount(amount)
 
 FormattedAmount.propTypes = {
   amount: PropTypes.string.isRequired,