diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
index 1b727abf1..c941473c0 100644
--- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
+++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
@@ -45,33 +45,7 @@
   <br><br>
 
   <h2>Latest trades</h2>
-  <table class="table table-borderless table-striped">
-    <thead>
-      <th>Date</th>
-      <th>Price</th>
-      <th>Trade amount</th>
-      <th>Trade amount</th>
-    </thead>
-    <tbody *ngIf="trades$ | async as trades; else loadingTmpl">
-      <tr *ngFor="let trade of trades">
-        <td>
-          {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
-        </td>
-        <td>
-          <ng-container *ngIf="trade._market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: trade._market.rsymbol }}</span></ng-container>
-          <ng-template #priceCrypto>{{ trade.price | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }}</ng-template>
-        </td>
-        <td>
-          <ng-container *ngIf="trade._market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: trade._market.rsymbol }}</span></ng-container>
-          <ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }}</ng-template>
-        </td>
-        <td>
-          <ng-container *ngIf="trade._market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: trade._market.rsymbol }}</span></ng-container>
-          <ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + trade._market.lprecision }} {{ trade._market.lsymbol }}</ng-template>
-        </td>
-      </tr> 
-    </tbody>
-  </table>
+  <app-bisq-trades [trades$]="trades$"></app-bisq-trades>
 
   </ng-container>
 </div>
diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.html b/frontend/src/app/bisq/bisq-market/bisq-market.component.html
index 3c6e6a1a4..5420694c1 100644
--- a/frontend/src/app/bisq/bisq-market/bisq-market.component.html
+++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.html
@@ -60,33 +60,7 @@
       <ng-container *ngIf="trades$ | async as trades; else loadingSpinner">
         <h2>Latest trades</h2>
 
-        <table class="table table-borderless table-striped">
-          <thead>
-            <th>Date</th>
-            <th>Price ({{ currency.market.rsymbol }})</th>
-            <th>Trade amount ({{ currency.market.rsymbol }})</th>
-            <th>Trade amount ({{ currency.market.lsymbol }})</th>
-          </thead>
-          <tbody>
-            <tr *ngFor="let trade of trades">
-              <td>
-                {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
-              </td>
-              <td>
-                <ng-container *ngIf="currency.market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: currency.market.rsymbol }}</span></ng-container>
-                <ng-template #priceCrypto>{{ trade.price | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
-              </td>
-              <td>
-                <ng-container *ngIf="currency.market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: currency.market.rsymbol }}</span></ng-container>
-                <ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
-              </td>
-              <td>
-                <ng-container *ngIf="currency.market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: currency.market.rsymbol }}</span></ng-container>
-                <ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + currency.market.lprecision }} {{ currency.market.lsymbol }}</ng-template>
-              </td>
-            </tr> 
-          </tbody>
-        </table>
+        <app-bisq-trades [trades$]="trades$" [market]="currency.market"></app-bisq-trades>
       </ng-container>
 
     </ng-container>
diff --git a/frontend/src/app/bisq/bisq-trades/bisq-trades.component.html b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.html
new file mode 100644
index 000000000..5758ba7fc
--- /dev/null
+++ b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.html
@@ -0,0 +1,39 @@
+<table class="table table-borderless table-striped">
+  <thead>
+    <th>Date</th>
+    <th>Price</th>
+    <th>Amount (BTC)</th>
+    <th>Amount <ng-template [ngIf]="market">({{ market.lsymbol === 'BTC' ? market.rsymbol : market.lsymbol }})</ng-template></th>
+  </thead>
+  <tbody *ngIf="(trades$ | async) as trades; else loadingTmpl">
+    <tr *ngFor="let trade of trades;">
+      <td>
+        {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
+      </td>
+      <td>
+        <ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: (trade._market || market).rsymbol }}</span></ng-container>
+        <ng-template #priceCrypto>{{ trade.price | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }}</ng-template>
+      </td>
+      <ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeVolume : tradeAmount"></ng-container>
+      <ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeAmount : tradeVolume"></ng-container>
+      <ng-template #tradeAmount>
+        <td>
+          <ng-container *ngIf="(trade._market || market).ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: (trade._market || market).rsymbol }}</span></ng-container>
+          <ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + (trade._market || market).lprecision }} {{ (trade._market || market).lsymbol }}</ng-template>
+        </td>
+      </ng-template>
+      <ng-template #tradeVolume>
+        <td>
+          <ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: (trade._market || market).rsymbol }}</span></ng-container>
+          <ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }}</ng-template>
+        </td>
+      </ng-template>
+    </tr> 
+  </tbody>
+</table>
+
+<ng-template #loadingTmpl>
+  <tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
+    <td *ngFor="let j of [1, 2, 3, 4]"><span class="skeleton-loader"></span></td>
+  </tr>
+</ng-template>
diff --git a/frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/bisq/bisq-trades/bisq-trades.component.ts b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.ts
new file mode 100644
index 000000000..ac9f7c5f8
--- /dev/null
+++ b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-bisq-trades',
+  templateUrl: './bisq-trades.component.html',
+  styleUrls: ['./bisq-trades.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BisqTradesComponent {
+  @Input() trades$: Observable<any>;
+  @Input() market: any;
+}
diff --git a/frontend/src/app/bisq/bisq.module.ts b/frontend/src/app/bisq/bisq.module.ts
index 355ccefb0..1ad40c850 100644
--- a/frontend/src/app/bisq/bisq.module.ts
+++ b/frontend/src/app/bisq/bisq.module.ts
@@ -22,6 +22,7 @@ import { BisqApiService } from './bisq-api.service';
 import { BisqAddressComponent } from './bisq-address/bisq-address.component';
 import { BisqStatsComponent } from './bisq-stats/bisq-stats.component';
 import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
+import { BisqTradesComponent } from './bisq-trades/bisq-trades.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
     LightweightChartsAreaComponent,
     BisqDashboardComponent,
     BisqMarketComponent,
+    BisqTradesComponent,
   ],
   imports: [
     BisqRoutingModule,