diff --git a/package-lock.json b/package-lock.json
index ded870b2a..7a22c3ec0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,7 @@
         "stream-browserify": "^3.0.0",
         "stream-http": "^3.2.0",
         "tslib": "^2.3.0",
-        "ununifi-client": "^0.46.4",
+        "ununifi-client": "^0.46.5-dev2",
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
@@ -40076,9 +40076,9 @@
       }
     },
     "node_modules/ununifi-client": {
-      "version": "0.46.4",
-      "resolved": "https://registry.npmjs.org/ununifi-client/-/ununifi-client-0.46.4.tgz",
-      "integrity": "sha512-oCPlLAWbMra5LhOYIJtTyA0LfH4zI2NPWcvBDgKvD25M7Ad0fx5nvrVE2vvwAqY//jxx0TBR8SSFBHNdCYPIZw==",
+      "version": "0.46.5-dev2",
+      "resolved": "https://registry.npmjs.org/ununifi-client/-/ununifi-client-0.46.5-dev2.tgz",
+      "integrity": "sha512-T9evt/03cUxl/5R6QJEJ0eUIssE1CK1+cZd2mrKfV7Cj0GVi8Yj00vCjO2TEURWXd35vIghtTujd8mpcfWg6kQ==",
       "dependencies": {
         "axios": "^0.21.1",
         "protobufjs": "^6.11.2"
@@ -71540,9 +71540,9 @@
       "dev": true
     },
     "ununifi-client": {
-      "version": "0.46.4",
-      "resolved": "https://registry.npmjs.org/ununifi-client/-/ununifi-client-0.46.4.tgz",
-      "integrity": "sha512-oCPlLAWbMra5LhOYIJtTyA0LfH4zI2NPWcvBDgKvD25M7Ad0fx5nvrVE2vvwAqY//jxx0TBR8SSFBHNdCYPIZw==",
+      "version": "0.46.5-dev2",
+      "resolved": "https://registry.npmjs.org/ununifi-client/-/ununifi-client-0.46.5-dev2.tgz",
+      "integrity": "sha512-T9evt/03cUxl/5R6QJEJ0eUIssE1CK1+cZd2mrKfV7Cj0GVi8Yj00vCjO2TEURWXd35vIghtTujd8mpcfWg6kQ==",
       "requires": {
         "axios": "^0.21.1",
         "protobufjs": "^6.11.2"
diff --git a/package.json b/package.json
index de3d3ac7e..d757fc45c 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "tslib": "^2.3.0",
-    "ununifi-client": "^0.46.4",
+    "ununifi-client": "^0.46.5-dev2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
diff --git a/projects/portal/src/app/models/copy-trading/copy-trading.application.service.ts b/projects/portal/src/app/models/copy-trading/copy-trading.application.service.ts
new file mode 100644
index 000000000..ff155a4f3
--- /dev/null
+++ b/projects/portal/src/app/models/copy-trading/copy-trading.application.service.ts
@@ -0,0 +1,270 @@
+import {
+  TxConfirmDialogComponent,
+  TxConfirmDialogData,
+} from '../../views/dialogs/txs/tx-confirm/tx-confirm-dialog.component';
+import { TxCommonApplicationService } from '../cosmos/tx-common.application.service';
+import { CopyTradingService } from './copy-trading.service';
+import { Dialog } from '@angular/cdk/dialog';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CopyTradingApplicationService {
+  constructor(
+    private readonly dialog: Dialog,
+    private readonly copyTradingService: CopyTradingService,
+    private readonly txCommonApplication: TxCommonApplicationService,
+  ) {}
+
+  async createExemplaryTrader(name: string, description: string, profitCommissionRate: number) {
+    const prerequisiteData = await this.txCommonApplication.getPrerequisiteData();
+    if (!prerequisiteData) {
+      return;
+    }
+    const { address, publicKey, account, currentCosmosWallet, minimumGasPrice } = prerequisiteData;
+
+    const msg = this.copyTradingService.buildMsgCreateExemplaryTrader(
+      address,
+      name,
+      description,
+      profitCommissionRate,
+    );
+
+    const simulationResult = await this.txCommonApplication.simulate(
+      msg,
+      publicKey,
+      account,
+      minimumGasPrice,
+    );
+    if (!simulationResult) {
+      return;
+    }
+    const { gas, fee } = simulationResult;
+
+    if (!(await this.txCommonApplication.confirmFeeIfUnUniFiWallet(currentCosmosWallet, fee))) {
+      return;
+    }
+
+    const txHash = await this.txCommonApplication.broadcast(
+      msg,
+      currentCosmosWallet,
+      publicKey,
+      account,
+      gas,
+      fee,
+    );
+    if (!txHash) {
+      return;
+    }
+
+    if (txHash) {
+      await this.dialog
+        .open<TxConfirmDialogData>(TxConfirmDialogComponent, {
+          data: { txHash: txHash, msg: 'Successfully registered as an Exemplary Trader.' },
+        })
+        .closed.toPromise();
+      location.reload();
+    }
+  }
+
+  async updateExemplaryTrader(name: string, description: string, profitCommissionRate: number) {
+    const prerequisiteData = await this.txCommonApplication.getPrerequisiteData();
+    if (!prerequisiteData) {
+      return;
+    }
+    const { address, publicKey, account, currentCosmosWallet, minimumGasPrice } = prerequisiteData;
+
+    const msg = this.copyTradingService.buildMsgUpdateExemplaryTrader(
+      address,
+      name,
+      description,
+      profitCommissionRate,
+    );
+
+    const simulationResult = await this.txCommonApplication.simulate(
+      msg,
+      publicKey,
+      account,
+      minimumGasPrice,
+    );
+    if (!simulationResult) {
+      return;
+    }
+    const { gas, fee } = simulationResult;
+
+    if (!(await this.txCommonApplication.confirmFeeIfUnUniFiWallet(currentCosmosWallet, fee))) {
+      return;
+    }
+
+    const txHash = await this.txCommonApplication.broadcast(
+      msg,
+      currentCosmosWallet,
+      publicKey,
+      account,
+      gas,
+      fee,
+    );
+    if (!txHash) {
+      return;
+    }
+
+    if (txHash) {
+      await this.dialog
+        .open<TxConfirmDialogData>(TxConfirmDialogComponent, {
+          data: { txHash: txHash, msg: 'Successfully updated your Exemplary Trader.' },
+        })
+        .closed.toPromise();
+      location.reload();
+    }
+  }
+
+  async deleteExemplaryTrader() {
+    const prerequisiteData = await this.txCommonApplication.getPrerequisiteData();
+    if (!prerequisiteData) {
+      return;
+    }
+    const { address, publicKey, account, currentCosmosWallet, minimumGasPrice } = prerequisiteData;
+
+    const msg = this.copyTradingService.buildMsgDeleteExemplaryTrader(address);
+
+    const simulationResult = await this.txCommonApplication.simulate(
+      msg,
+      publicKey,
+      account,
+      minimumGasPrice,
+    );
+    if (!simulationResult) {
+      return;
+    }
+    const { gas, fee } = simulationResult;
+
+    if (!(await this.txCommonApplication.confirmFeeIfUnUniFiWallet(currentCosmosWallet, fee))) {
+      return;
+    }
+
+    const txHash = await this.txCommonApplication.broadcast(
+      msg,
+      currentCosmosWallet,
+      publicKey,
+      account,
+      gas,
+      fee,
+    );
+    if (!txHash) {
+      return;
+    }
+
+    if (txHash) {
+      await this.dialog
+        .open<TxConfirmDialogData>(TxConfirmDialogComponent, {
+          data: { txHash: txHash, msg: 'Successfully deleted your Exemplary Trader.' },
+        })
+        .closed.toPromise();
+      location.reload();
+    }
+  }
+
+  async createTracing(
+    exemplaryTrader: string,
+    sizeCoef: number,
+    leverageCoef: number,
+    reverse: boolean,
+  ) {
+    const prerequisiteData = await this.txCommonApplication.getPrerequisiteData();
+    if (!prerequisiteData) {
+      return;
+    }
+    const { address, publicKey, account, currentCosmosWallet, minimumGasPrice } = prerequisiteData;
+
+    const msg = this.copyTradingService.buildMsgCreateTracing(
+      address,
+      exemplaryTrader,
+      sizeCoef,
+      leverageCoef,
+      reverse,
+    );
+
+    const simulationResult = await this.txCommonApplication.simulate(
+      msg,
+      publicKey,
+      account,
+      minimumGasPrice,
+    );
+    if (!simulationResult) {
+      return;
+    }
+    const { gas, fee } = simulationResult;
+
+    if (!(await this.txCommonApplication.confirmFeeIfUnUniFiWallet(currentCosmosWallet, fee))) {
+      return;
+    }
+
+    const txHash = await this.txCommonApplication.broadcast(
+      msg,
+      currentCosmosWallet,
+      publicKey,
+      account,
+      gas,
+      fee,
+    );
+    if (!txHash) {
+      return;
+    }
+
+    if (txHash) {
+      await this.dialog
+        .open<TxConfirmDialogData>(TxConfirmDialogComponent, {
+          data: { txHash: txHash, msg: 'Successfully create tracing the Exemplary Trader.' },
+        })
+        .closed.toPromise();
+      location.reload();
+    }
+  }
+
+  async deleteTracing() {
+    const prerequisiteData = await this.txCommonApplication.getPrerequisiteData();
+    if (!prerequisiteData) {
+      return;
+    }
+    const { address, publicKey, account, currentCosmosWallet, minimumGasPrice } = prerequisiteData;
+
+    const msg = this.copyTradingService.buildMsgDeleteTracing(address);
+
+    const simulationResult = await this.txCommonApplication.simulate(
+      msg,
+      publicKey,
+      account,
+      minimumGasPrice,
+    );
+    if (!simulationResult) {
+      return;
+    }
+    const { gas, fee } = simulationResult;
+
+    if (!(await this.txCommonApplication.confirmFeeIfUnUniFiWallet(currentCosmosWallet, fee))) {
+      return;
+    }
+
+    const txHash = await this.txCommonApplication.broadcast(
+      msg,
+      currentCosmosWallet,
+      publicKey,
+      account,
+      gas,
+      fee,
+    );
+    if (!txHash) {
+      return;
+    }
+
+    if (txHash) {
+      await this.dialog
+        .open<TxConfirmDialogData>(TxConfirmDialogComponent, {
+          data: { txHash: txHash, msg: 'Successfully create tracing the Exemplary Trader.' },
+        })
+        .closed.toPromise();
+      location.reload();
+    }
+  }
+}
diff --git a/projects/portal/src/app/models/copy-trading/copy-trading.model.ts b/projects/portal/src/app/models/copy-trading/copy-trading.model.ts
new file mode 100644
index 000000000..0b2dfb7db
--- /dev/null
+++ b/projects/portal/src/app/models/copy-trading/copy-trading.model.ts
@@ -0,0 +1,18 @@
+export type CreateExemplaryTraderRequest = {
+  name: string;
+  description: string;
+  profitCommissionRate: number;
+};
+
+export type UpdateExemplaryTraderRequest = {
+  name: string;
+  description: string;
+  profitCommissionRate: number;
+};
+
+export type CreateTracingRequest = {
+  exemplaryTrader: string;
+  sizeCoef: number;
+  leverageCoef: number;
+  reverse: boolean;
+};
diff --git a/projects/portal/src/app/models/copy-trading/copy-trading.query.service.ts b/projects/portal/src/app/models/copy-trading/copy-trading.query.service.ts
new file mode 100644
index 000000000..a66b6414e
--- /dev/null
+++ b/projects/portal/src/app/models/copy-trading/copy-trading.query.service.ts
@@ -0,0 +1,58 @@
+import { CosmosSDKService } from '../cosmos-sdk.service';
+import { Injectable } from '@angular/core';
+import { CosmosSDK } from '@cosmos-client/core/cjs/sdk';
+import { Observable } from 'rxjs';
+import { map, mergeMap, pluck } from 'rxjs/operators';
+import ununificlient from 'ununifi-client';
+import {
+  ExemplaryTraderAll200ResponseExemplaryTraderInner,
+  ExemplaryTraderTracing200ResponseTracingInner,
+} from 'ununifi-client/esm/openapi';
+
+@Injectable({ providedIn: 'root' })
+export class CopyTradingQueryService {
+  private restSdk$: Observable<CosmosSDK>;
+
+  constructor(private cosmosSDK: CosmosSDKService) {
+    this.restSdk$ = this.cosmosSDK.sdk$.pipe(pluck('rest'));
+  }
+
+  listExemplaryTraders$(): Observable<ExemplaryTraderAll200ResponseExemplaryTraderInner[]> {
+    return this.restSdk$.pipe(
+      mergeMap((sdk) => ununificlient.rest.copyTrading.exemplaryTraderAll(sdk)),
+      map((res) => res.data.exemplaryTrader!),
+    );
+  }
+
+  getExemplaryTrader$(
+    address: string,
+  ): Observable<ExemplaryTraderAll200ResponseExemplaryTraderInner> {
+    return this.restSdk$.pipe(
+      mergeMap((sdk) => ununificlient.rest.copyTrading.exemplaryTrader(sdk, address)),
+      map((res) => res.data.exemplaryTrader!),
+    );
+  }
+
+  listTracingsExemplaryTrader$(
+    address: string,
+  ): Observable<ExemplaryTraderTracing200ResponseTracingInner[]> {
+    return this.restSdk$.pipe(
+      mergeMap((sdk) => ununificlient.rest.copyTrading.exemplaryTraderTracing(sdk, address)),
+      map((res) => res.data.tracing!),
+    );
+  }
+
+  listAllTracings$(): Observable<ExemplaryTraderTracing200ResponseTracingInner[]> {
+    return this.restSdk$.pipe(
+      mergeMap((sdk) => ununificlient.rest.copyTrading.tracingAll(sdk)),
+      map((res) => res.data.tracing!),
+    );
+  }
+
+  getTracing$(address: string): Observable<ExemplaryTraderTracing200ResponseTracingInner> {
+    return this.restSdk$.pipe(
+      mergeMap((sdk) => ununificlient.rest.copyTrading.tracing(sdk, address)),
+      map((res) => res.data.tracing!),
+    );
+  }
+}
diff --git a/projects/portal/src/app/models/copy-trading/copy-trading.service.ts b/projects/portal/src/app/models/copy-trading/copy-trading.service.ts
new file mode 100644
index 000000000..8cd83bcad
--- /dev/null
+++ b/projects/portal/src/app/models/copy-trading/copy-trading.service.ts
@@ -0,0 +1,78 @@
+import { TxCommonService } from '../cosmos/tx-common.service';
+import { Injectable } from '@angular/core';
+import ununificlient from 'ununifi-client';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CopyTradingService {
+  constructor(private readonly txCommon: TxCommonService) {}
+
+  buildMsgCreateExemplaryTrader(
+    sender: string,
+    name: string,
+    description: string,
+    profitCommissionRate: number,
+  ) {
+    const decProfitCommissionRate = this.txCommon.numberToDecString(profitCommissionRate);
+    const msgCreateExemplaryTrader =
+      new ununificlient.proto.ununifi.copytrading.MsgCreateExemplaryTrader({
+        sender,
+        name,
+        description,
+        profit_commission_rate: decProfitCommissionRate,
+      });
+    return msgCreateExemplaryTrader;
+  }
+
+  buildMsgUpdateExemplaryTrader(
+    sender: string,
+    name: string,
+    description: string,
+    profitCommissionRate: number,
+  ) {
+    const decProfitCommissionRate = this.txCommon.numberToDecString(profitCommissionRate);
+    const msgUpdateExemplaryTrader =
+      new ununificlient.proto.ununifi.copytrading.MsgUpdateExemplaryTrader({
+        sender,
+        name,
+        description,
+        profit_commission_rate: decProfitCommissionRate,
+      });
+    return msgUpdateExemplaryTrader;
+  }
+
+  buildMsgDeleteExemplaryTrader(sender: string) {
+    const msgDeleteExemplaryTrader =
+      new ununificlient.proto.ununifi.copytrading.MsgDeleteExemplaryTrader({
+        sender,
+      });
+    return msgDeleteExemplaryTrader;
+  }
+
+  buildMsgCreateTracing(
+    sender: string,
+    exemplaryTrader: string,
+    sizeCoef: number,
+    leverageCoef: number,
+    reverse: boolean,
+  ) {
+    const decSizeCoef = this.txCommon.numberToDecString(sizeCoef);
+    const decLeverageCoef = this.txCommon.numberToDecString(leverageCoef);
+    const msgCreateTracing = new ununificlient.proto.ununifi.copytrading.MsgCreateTracing({
+      sender,
+      exemplary_trader: exemplaryTrader,
+      size_coefficient: decSizeCoef,
+      leverage_coefficient: decLeverageCoef,
+      reverse,
+    });
+    return msgCreateTracing;
+  }
+
+  buildMsgDeleteTracing(sender: string) {
+    const msgDeleteTracing = new ununificlient.proto.ununifi.copytrading.MsgDeleteTracing({
+      sender,
+    });
+    return msgDeleteTracing;
+  }
+}
diff --git a/projects/portal/src/app/models/derivatives/derivatives.application.service.ts b/projects/portal/src/app/models/derivatives/derivatives.application.service.ts
index 9a6fa8608..6ca723957 100644
--- a/projects/portal/src/app/models/derivatives/derivatives.application.service.ts
+++ b/projects/portal/src/app/models/derivatives/derivatives.application.service.ts
@@ -172,13 +172,7 @@ export class DerivativesApplicationService {
       .toPromise();
 
     const perpetualFuturesPositionInstance =
-      this.derivativesService.buildPerpetualFuturesPositionInstance(
-        baseSymbol,
-        positionType,
-        size * 10 ** 12,
-        leverage,
-        symbolMetadataMap,
-      );
+      this.derivativesService.buildPerpetualFuturesPositionInstance(positionType, size, leverage);
 
     const positionInstance: cosmosclient.proto.google.protobuf.IAny =
       cosmosclient.codec.instanceToProtoAny(perpetualFuturesPositionInstance);
diff --git a/projects/portal/src/app/models/derivatives/derivatives.query.service.ts b/projects/portal/src/app/models/derivatives/derivatives.query.service.ts
index 1216b0389..ee458b060 100644
--- a/projects/portal/src/app/models/derivatives/derivatives.query.service.ts
+++ b/projects/portal/src/app/models/derivatives/derivatives.query.service.ts
@@ -2,9 +2,8 @@ import { CosmosSDKService } from '../cosmos-sdk.service';
 import { Injectable } from '@angular/core';
 import cosmosclient from '@cosmos-client/core';
 import { CosmosSDK } from '@cosmos-client/core/cjs/sdk';
-import { AccAddress } from '@cosmos-client/core/cjs/types';
-import { Observable, zip } from 'rxjs';
-import { filter, map, mergeMap, pluck } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { map, mergeMap, pluck } from 'rxjs/operators';
 import ununificlient from 'ununifi-client';
 import {
   AllPositions200ResponsePositionsInner,
diff --git a/projects/portal/src/app/models/derivatives/derivatives.service.ts b/projects/portal/src/app/models/derivatives/derivatives.service.ts
index 14fa421cf..f8ff026f5 100644
--- a/projects/portal/src/app/models/derivatives/derivatives.service.ts
+++ b/projects/portal/src/app/models/derivatives/derivatives.service.ts
@@ -1,5 +1,6 @@
 import { CosmosSDKService } from '../cosmos-sdk.service';
 import { BankService } from '../cosmos/bank.service';
+import { TxCommonService } from '../cosmos/tx-common.service';
 import { Injectable } from '@angular/core';
 import cosmosclient from '@cosmos-client/core';
 import ununificlient from 'ununifi-client';
@@ -10,6 +11,7 @@ import ununificlient from 'ununifi-client';
 export class DerivativesService {
   constructor(
     private readonly cosmosSDK: CosmosSDKService,
+    private readonly txCommonService: TxCommonService,
     private readonly bankService: BankService,
   ) {}
 
@@ -57,7 +59,7 @@ export class DerivativesService {
     )[0];
 
     const msgMintLiquidityProviderToken =
-      new ununificlient.proto.ununifi.derivatives.MsgMintLiquidityProviderToken({
+      new ununificlient.proto.ununifi.derivatives.MsgDepositToPool({
         sender: senderAddress,
         amount: coin,
       });
@@ -79,30 +81,23 @@ export class DerivativesService {
     const redeemDenom = symbolMetadataMap?.[redeemSymbol].base;
 
     const msgMintLiquidityProviderToken =
-      new ununificlient.proto.ununifi.derivatives.MsgBurnLiquidityProviderToken({
+      new ununificlient.proto.ununifi.derivatives.MsgWithdrawFromPool({
         sender: senderAddress,
-        amount: coin.amount,
+        lpt_amount: coin.amount,
         redeem_denom: redeemDenom,
       });
     return msgMintLiquidityProviderToken;
   }
 
   buildPerpetualFuturesPositionInstance(
-    baseSymbol: string,
     positionType: ununificlient.proto.ununifi.derivatives.PositionType,
     size: number,
     leverage: number,
-    symbolMetadataMap: { [symbol: string]: cosmosclient.proto.cosmos.bank.v1beta1.IMetadata },
   ) {
-    const position = this.bankService.convertSymbolAmountMapToCoins(
-      { [baseSymbol]: size },
-      symbolMetadataMap,
-    )[0];
-
     const perpetualFuturesPositionInstance =
       new ununificlient.proto.ununifi.derivatives.PerpetualFuturesPositionInstance({
         position_type: positionType,
-        size: position.amount,
+        size: this.txCommonService.numberToDecString(size),
         leverage: Math.floor(leverage),
       });
     return perpetualFuturesPositionInstance;
diff --git a/projects/portal/src/app/models/nft-pawnshops/nft-pawnshop.query.service.ts b/projects/portal/src/app/models/nft-pawnshops/nft-pawnshop.query.service.ts
index f3822964e..7e670742e 100644
--- a/projects/portal/src/app/models/nft-pawnshops/nft-pawnshop.query.service.ts
+++ b/projects/portal/src/app/models/nft-pawnshops/nft-pawnshop.query.service.ts
@@ -12,6 +12,7 @@ import {
   Liquidation200ResponseLiquidations,
   ListedClass200Response,
   ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
   Loan200Response,
   Loans200ResponseLoansInner,
   NftmarketParams200ResponseParams,
@@ -31,14 +32,20 @@ export class NftPawnshopQueryService {
     );
   }
 
-  getNftListing$(classID: string, nftID: string): Observable<ListedNfts200ResponseListingsInner> {
+  getNftListing$(
+    classID: string,
+    nftID: string,
+  ): Observable<ListedNfts200ResponseListingsInnerListing> {
     return this.restSdk$.pipe(
       mergeMap((sdk) => ununifi.rest.nftmarket.nftListing(sdk, classID, nftID)),
       map((res) => res.data.listing!),
     );
   }
 
-  async getNftListing(classID: string, nftID: string): Promise<ListedNfts200ResponseListingsInner> {
+  async getNftListing(
+    classID: string,
+    nftID: string,
+  ): Promise<ListedNfts200ResponseListingsInnerListing> {
     const sdk = await this.cosmosSDK.sdk().then((sdk) => sdk.rest);
     const res = await ununifi.rest.nftmarket.nftListing(sdk, classID, nftID);
     return res.data.listing!;
diff --git a/projects/portal/src/app/pages/apps/app-derivatives/app-derivatives-routing.module.ts b/projects/portal/src/app/pages/apps/app-derivatives/app-derivatives-routing.module.ts
index 89b93ac01..bc92e39c6 100644
--- a/projects/portal/src/app/pages/apps/app-derivatives/app-derivatives-routing.module.ts
+++ b/projects/portal/src/app/pages/apps/app-derivatives/app-derivatives-routing.module.ts
@@ -9,6 +9,12 @@ const routes: Routes = [
     loadChildren: () =>
       import('../../derivatives/derivatives.module').then((m) => m.AppDerivativesModule),
   },
+  {
+    path: 'copy-trading',
+    component: AppDerivativesComponent,
+    loadChildren: () =>
+      import('../../copy-trading/copy-trading.module').then((m) => m.AppCopyTradingModule),
+  },
 ];
 
 @NgModule({
diff --git a/projects/portal/src/app/pages/copy-trading/copy-trading-routing.module.ts b/projects/portal/src/app/pages/copy-trading/copy-trading-routing.module.ts
new file mode 100644
index 000000000..3c7667f70
--- /dev/null
+++ b/projects/portal/src/app/pages/copy-trading/copy-trading-routing.module.ts
@@ -0,0 +1,26 @@
+import { CreateComponent } from './traders/create/create.component';
+import { TraderComponent } from './traders/trader/trader.component';
+import { TradersComponent } from './traders/traders.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: 'traders',
+    component: TradersComponent,
+  },
+  {
+    path: 'traders/create',
+    component: CreateComponent,
+  },
+  {
+    path: 'traders/:address',
+    component: TraderComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CopyTradingRoutingModule {}
diff --git a/projects/portal/src/app/pages/copy-trading/copy-trading.module.ts b/projects/portal/src/app/pages/copy-trading/copy-trading.module.ts
new file mode 100644
index 000000000..4270cc22a
--- /dev/null
+++ b/projects/portal/src/app/pages/copy-trading/copy-trading.module.ts
@@ -0,0 +1,15 @@
+import { CreateModule } from '../../views/copy-trading/traders/create/create.module';
+import { TraderModule } from '../../views/copy-trading/traders/trader/trader.module';
+import { TradersModule } from '../../views/copy-trading/traders/traders.module';
+import { CopyTradingRoutingModule } from './copy-trading-routing.module';
+import { CreateComponent } from './traders/create/create.component';
+import { TraderComponent } from './traders/trader/trader.component';
+import { TradersComponent } from './traders/traders.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  declarations: [TradersComponent, TraderComponent, CreateComponent],
+  imports: [CommonModule, CopyTradingRoutingModule, TradersModule, TraderModule, CreateModule],
+})
+export class AppCopyTradingModule {}
diff --git a/projects/portal/src/app/pages/copy-trading/traders/create/create.component.css b/projects/portal/src/app/pages/copy-trading/traders/create/create.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/pages/copy-trading/traders/create/create.component.html b/projects/portal/src/app/pages/copy-trading/traders/create/create.component.html
new file mode 100644
index 000000000..d9824c302
--- /dev/null
+++ b/projects/portal/src/app/pages/copy-trading/traders/create/create.component.html
@@ -0,0 +1,10 @@
+<view-create
+  [address]="address$ | async"
+  [myExemplaryTrader]="myExemplaryTrader$ | async"
+  [traderName]="traderName$ | async"
+  [traderDescription]="traderDescription$ | async"
+  [commissionRate]="commissionRate$ | async"
+  [newCommissionRate]="commissionRate$ | async"
+  (createExemplaryTrader)="onCreateTrader($event)"
+  (updateExemplaryTrader)="onUpdateTrader($event)"
+></view-create>
diff --git a/projects/portal/src/app/pages/copy-trading/traders/create/create.component.ts b/projects/portal/src/app/pages/copy-trading/traders/create/create.component.ts
new file mode 100644
index 000000000..a3cd7992d
--- /dev/null
+++ b/projects/portal/src/app/pages/copy-trading/traders/create/create.component.ts
@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import cosmosclient from '@cosmos-client/core';
+import { CopyTradingApplicationService } from 'projects/portal/src/app/models/copy-trading/copy-trading.application.service';
+import {
+  CreateExemplaryTraderRequest,
+  UpdateExemplaryTraderRequest,
+} from 'projects/portal/src/app/models/copy-trading/copy-trading.model';
+import { CopyTradingQueryService } from 'projects/portal/src/app/models/copy-trading/copy-trading.query.service';
+import { StoredWallet } from 'projects/portal/src/app/models/wallets/wallet.model';
+import { WalletService } from 'projects/portal/src/app/models/wallets/wallet.service';
+import { Observable, combineLatest } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+import { ExemplaryTraderAll200ResponseExemplaryTraderInner } from 'ununifi-client/esm/openapi';
+
+@Component({
+  selector: 'app-create',
+  templateUrl: './create.component.html',
+  styleUrls: ['./create.component.css'],
+})
+export class CreateComponent implements OnInit {
+  address$: Observable<string>;
+  myExemplaryTrader$: Observable<ExemplaryTraderAll200ResponseExemplaryTraderInner | undefined>;
+  traderName$: Observable<string | undefined>;
+  traderDescription$: Observable<string | undefined>;
+  commissionRate$: Observable<number | undefined>;
+
+  constructor(
+    private readonly walletService: WalletService,
+    private readonly copyTradingQuery: CopyTradingQueryService,
+    private readonly copyTradingApplication: CopyTradingApplicationService,
+  ) {
+    const currentStoredWallet$ = this.walletService.currentStoredWallet$;
+    this.address$ = currentStoredWallet$.pipe(
+      filter((wallet): wallet is StoredWallet => wallet !== undefined && wallet !== null),
+      map((wallet) => cosmosclient.AccAddress.fromString(wallet.address).toString()),
+    );
+    const exemplaryTraders$ = this.copyTradingQuery.listExemplaryTraders$();
+    this.myExemplaryTrader$ = combineLatest([this.address$, exemplaryTraders$]).pipe(
+      map(([address, traders]) => traders.find((trader) => trader.address == address)),
+    );
+    this.traderName$ = this.myExemplaryTrader$.pipe(map((trader) => trader?.name));
+    this.traderDescription$ = this.myExemplaryTrader$.pipe(map((trader) => trader?.description));
+    this.commissionRate$ = this.myExemplaryTrader$.pipe(
+      map((trader) => Number(trader?.profit_commission_rate)),
+    );
+  }
+
+  ngOnInit(): void {}
+
+  onCreateTrader(data: CreateExemplaryTraderRequest) {
+    this.copyTradingApplication.createExemplaryTrader(
+      data.name,
+      data.description,
+      data.profitCommissionRate,
+    );
+  }
+
+  onUpdateTrader(data: UpdateExemplaryTraderRequest) {
+    this.copyTradingApplication.updateExemplaryTrader(
+      data.name,
+      data.description,
+      data.profitCommissionRate,
+    );
+  }
+}
diff --git a/projects/portal/src/app/pages/copy-trading/traders/trader/trader.component.css b/projects/portal/src/app/pages/copy-trading/traders/trader/trader.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/pages/copy-trading/traders/trader/trader.component.html b/projects/portal/src/app/pages/copy-trading/traders/trader/trader.component.html
new file mode 100644
index 000000000..682ab5cad
--- /dev/null
+++ b/projects/portal/src/app/pages/copy-trading/traders/trader/trader.component.html
@@ -0,0 +1,15 @@
+<view-trader
+  [address]="address$ | async"
+  [exemplaryTraderAddress]="exemplaryTraderAddress$ | async"
+  [trader]="trader$ | async"
+  [tracing]="tracing$ | async"
+  [isTracing]="isTracing$ | async"
+  [userCount]="userCount$ | async"
+  [commissionRate]="commissionRate$ | async"
+  [newCommissionRate]="commissionRate$ | async"
+  [description]="description$ | async"
+  (createTracing)="onCreateTracing($event)"
+  (deleteTracing)="onDeleteTracing()"
+  (updateTrader)="onUpdateTrader($event)"
+  (deleteTrader)="onDeleteTrader()"
+></view-trader>
diff --git a/projects/portal/src/app/pages/copy-trading/traders/trader/trader.component.ts b/projects/portal/src/app/pages/copy-trading/traders/trader/trader.component.ts
new file mode 100644
index 000000000..6fd8a8e3a
--- /dev/null
+++ b/projects/portal/src/app/pages/copy-trading/traders/trader/trader.component.ts
@@ -0,0 +1,96 @@
+import { CopyTradingQueryService } from '../../../../models/copy-trading/copy-trading.query.service';
+import { StoredWallet } from '../../../../models/wallets/wallet.model';
+import { WalletService } from '../../../../models/wallets/wallet.service';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import cosmosclient from '@cosmos-client/core';
+import { CopyTradingApplicationService } from 'projects/portal/src/app/models/copy-trading/copy-trading.application.service';
+import {
+  CreateTracingRequest,
+  UpdateExemplaryTraderRequest,
+} from 'projects/portal/src/app/models/copy-trading/copy-trading.model';
+import { Observable, combineLatest } from 'rxjs';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import {
+  ExemplaryTraderAll200ResponseExemplaryTraderInner,
+  ExemplaryTraderTracing200ResponseTracingInner,
+} from 'ununifi-client/esm/openapi';
+
+@Component({
+  selector: 'app-trader',
+  templateUrl: './trader.component.html',
+  styleUrls: ['./trader.component.css'],
+})
+export class TraderComponent implements OnInit {
+  address$: Observable<string>;
+  exemplaryTraderAddress$: Observable<string>;
+  trader$: Observable<ExemplaryTraderAll200ResponseExemplaryTraderInner>;
+  tracing$: Observable<ExemplaryTraderTracing200ResponseTracingInner>;
+  isTracing$: Observable<boolean>;
+  userCount$: Observable<number>;
+  commissionRate$: Observable<number>;
+  description$: Observable<string | undefined>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private readonly walletService: WalletService,
+    private readonly copyTradingQuery: CopyTradingQueryService,
+    private readonly copyTradingApplication: CopyTradingApplicationService,
+  ) {
+    const currentStoredWallet$ = this.walletService.currentStoredWallet$;
+    this.address$ = currentStoredWallet$.pipe(
+      filter((wallet): wallet is StoredWallet => wallet !== undefined && wallet !== null),
+      map((wallet) => cosmosclient.AccAddress.fromString(wallet.address).toString()),
+    );
+    this.exemplaryTraderAddress$ = this.route.params.pipe(map((params) => params.address));
+    this.trader$ = this.exemplaryTraderAddress$.pipe(
+      mergeMap((exAddress) => this.copyTradingQuery.getExemplaryTrader$(exAddress)),
+    );
+    this.tracing$ = this.address$.pipe(
+      mergeMap((address) => this.copyTradingQuery.getTracing$(address)),
+    );
+    this.isTracing$ = combineLatest([this.tracing$, this.exemplaryTraderAddress$]).pipe(
+      map(([tracing, exAddress]) => tracing.exemplary_trader == exAddress),
+    );
+    this.userCount$ = combineLatest([
+      this.exemplaryTraderAddress$,
+      this.copyTradingQuery.listAllTracings$(),
+    ]).pipe(
+      map(
+        ([exAddress, tracings]) =>
+          tracings.filter((tracing) => tracing.exemplary_trader == exAddress).length,
+      ),
+    );
+    this.commissionRate$ = this.trader$.pipe(
+      map((trader) => Number(trader.profit_commission_rate || 0)),
+    );
+    this.description$ = this.trader$.pipe(map((trader) => trader.description));
+  }
+
+  ngOnInit(): void {}
+
+  onCreateTracing(data: CreateTracingRequest) {
+    this.copyTradingApplication.createTracing(
+      data.exemplaryTrader,
+      data.sizeCoef,
+      data.leverageCoef,
+      data.reverse,
+    );
+  }
+
+  onDeleteTracing() {
+    this.copyTradingApplication.deleteTracing();
+  }
+
+  onUpdateTrader(data: UpdateExemplaryTraderRequest) {
+    this.copyTradingApplication.updateExemplaryTrader(
+      data.name,
+      data.description,
+      data.profitCommissionRate,
+    );
+  }
+
+  onDeleteTrader() {
+    this.copyTradingApplication.deleteExemplaryTrader();
+  }
+}
diff --git a/projects/portal/src/app/pages/copy-trading/traders/traders.component.css b/projects/portal/src/app/pages/copy-trading/traders/traders.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/pages/copy-trading/traders/traders.component.html b/projects/portal/src/app/pages/copy-trading/traders/traders.component.html
new file mode 100644
index 000000000..c7e764648
--- /dev/null
+++ b/projects/portal/src/app/pages/copy-trading/traders/traders.component.html
@@ -0,0 +1,9 @@
+<view-traders
+  [address]="address$ | async"
+  [exemplaryTraders]="exemplaryTraders$ | async"
+  [myExemplaryTrader]="myExemplaryTrader$ | async"
+  [tracing]="tracing$ | async"
+  [tracingTrader]="tracingTrader$ | async"
+  [userCounts]="userCounts$ | async"
+  (deleteTracing)="onDeleteTracing()"
+></view-traders>
diff --git a/projects/portal/src/app/pages/copy-trading/traders/traders.component.ts b/projects/portal/src/app/pages/copy-trading/traders/traders.component.ts
new file mode 100644
index 000000000..01f77aa3c
--- /dev/null
+++ b/projects/portal/src/app/pages/copy-trading/traders/traders.component.ts
@@ -0,0 +1,66 @@
+import { CopyTradingApplicationService } from '../../../models/copy-trading/copy-trading.application.service';
+import { CopyTradingQueryService } from '../../../models/copy-trading/copy-trading.query.service';
+import { StoredWallet } from '../../../models/wallets/wallet.model';
+import { WalletService } from '../../../models/wallets/wallet.service';
+import { Component, OnInit } from '@angular/core';
+import cosmosclient from '@cosmos-client/core';
+import { Observable, combineLatest } from 'rxjs';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import {
+  ExemplaryTraderAll200ResponseExemplaryTraderInner,
+  ExemplaryTraderTracing200ResponseTracingInner,
+} from 'ununifi-client/esm/openapi';
+
+@Component({
+  selector: 'app-traders',
+  templateUrl: './traders.component.html',
+  styleUrls: ['./traders.component.css'],
+})
+export class TradersComponent implements OnInit {
+  address$: Observable<string>;
+  exemplaryTraders$: Observable<ExemplaryTraderAll200ResponseExemplaryTraderInner[]>;
+  myExemplaryTrader$: Observable<ExemplaryTraderAll200ResponseExemplaryTraderInner | undefined>;
+  tracing$: Observable<ExemplaryTraderTracing200ResponseTracingInner>;
+  tracingTrader$: Observable<ExemplaryTraderAll200ResponseExemplaryTraderInner | undefined>;
+  userCounts$: Observable<number[]>;
+
+  constructor(
+    private readonly walletService: WalletService,
+    private readonly copyTradingQuery: CopyTradingQueryService,
+    private readonly copyTradingApplication: CopyTradingApplicationService,
+  ) {
+    const currentStoredWallet$ = this.walletService.currentStoredWallet$;
+    this.address$ = currentStoredWallet$.pipe(
+      filter((wallet): wallet is StoredWallet => wallet !== undefined && wallet !== null),
+      map((wallet) => cosmosclient.AccAddress.fromString(wallet.address).toString()),
+    );
+    this.exemplaryTraders$ = this.copyTradingQuery.listExemplaryTraders$();
+    this.myExemplaryTrader$ = combineLatest([this.address$, this.exemplaryTraders$]).pipe(
+      map(([address, traders]) => traders.find((trader) => trader.address == address)),
+    );
+    this.tracing$ = this.address$.pipe(
+      mergeMap((address) => this.copyTradingQuery.getTracing$(address)),
+    );
+    this.tracingTrader$ = combineLatest([this.tracing$, this.exemplaryTraders$]).pipe(
+      map(([tracing, traders]) =>
+        traders.find((trader) => trader.address == tracing.exemplary_trader),
+      ),
+    );
+
+    const availableTracings$ = this.copyTradingQuery.listAllTracings$();
+    this.userCounts$ = combineLatest([this.exemplaryTraders$, availableTracings$]).pipe(
+      map(([traders, tracings]) =>
+        traders.map(
+          (trader) =>
+            tracings.filter((tracing) => tracing.exemplary_trader == trader.address).length,
+        ),
+      ),
+    );
+  }
+
+  ngOnInit(): void {}
+
+  onDeleteTracing() {
+    this.copyTradingApplication.deleteTracing();
+  }
+}
diff --git a/projects/portal/src/app/pages/derivatives/derivatives-routing.module.ts b/projects/portal/src/app/pages/derivatives/derivatives-routing.module.ts
index 96dd53bb0..4f55a5861 100644
--- a/projects/portal/src/app/pages/derivatives/derivatives-routing.module.ts
+++ b/projects/portal/src/app/pages/derivatives/derivatives-routing.module.ts
@@ -25,6 +25,11 @@ const routes: Routes = [
         (m) => m.AppPerpetualFuturesModule,
       ),
   },
+  {
+    path: 'copy-trading',
+    loadChildren: () =>
+      import('../copy-trading/copy-trading.module').then((m) => m.AppCopyTradingModule),
+  },
 ];
 
 @NgModule({
diff --git a/projects/portal/src/app/pages/derivatives/pool/pool.component.ts b/projects/portal/src/app/pages/derivatives/pool/pool.component.ts
index fd875e503..1aafbe861 100644
--- a/projects/portal/src/app/pages/derivatives/pool/pool.component.ts
+++ b/projects/portal/src/app/pages/derivatives/pool/pool.component.ts
@@ -6,7 +6,6 @@ import { StoredWallet } from '../../../models/wallets/wallet.model';
 import { WalletService } from '../../../models/wallets/wallet.service';
 import { BurnLPTEvent, MintLPTEvent } from '../../../views/derivatives/pool/pool.component';
 import { Component, OnInit } from '@angular/core';
-import cosmosclient from '@cosmos-client/core';
 import { BehaviorSubject, combineLatest, of, timer } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
 
diff --git a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrow/borrow.component.ts b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrow/borrow.component.ts
index 6d400c566..1a0614639 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrow/borrow.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrow/borrow.component.ts
@@ -9,7 +9,7 @@ import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.m
 import { Observable, combineLatest, of } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
 import {
-  ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
   BidderBids200ResponseBidsInner,
   Loans200ResponseLoansInner,
 } from 'ununifi-client/esm/openapi';
@@ -22,7 +22,7 @@ import {
 export class BorrowComponent implements OnInit {
   classID$: Observable<string>;
   nftID$: Observable<string>;
-  listingInfo$: Observable<ListedNfts200ResponseListingsInner>;
+  listingInfo$: Observable<ListedNfts200ResponseListingsInnerListing>;
   bidders$: Observable<BidderBids200ResponseBidsInner[]>;
   loans$: Observable<Loans200ResponseLoansInner[]>;
   nftMetadata$: Observable<Metadata>;
@@ -48,7 +48,9 @@ export class BorrowComponent implements OnInit {
     this.bidders$ = nftCombine$.pipe(
       mergeMap(([classID, nftID]) => this.pawnshopQuery.listNftBids$(classID, nftID)),
       map((bidders) =>
-        bidders.sort((a, b) => parseInt(b.deposit_amount?.amount!) - parseInt(a.deposit_amount?.amount!)),
+        bidders.sort(
+          (a, b) => parseInt(b.deposit_amount?.amount!) - parseInt(a.deposit_amount?.amount!),
+        ),
       ),
     );
     this.borrowAmount$ = this.bidders$.pipe(
diff --git a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrower-nft.component.ts b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrower-nft.component.ts
index 32a9f1610..20ef0b096 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrower-nft.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrower-nft.component.ts
@@ -6,9 +6,9 @@ import { NftPawnshopQueryService } from 'projects/portal/src/app/models/nft-pawn
 import { NftPawnshopService } from 'projects/portal/src/app/models/nft-pawnshops/nft-pawnshop.service';
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
 import { Observable, combineLatest } from 'rxjs';
-import { first, map, mergeMap } from 'rxjs/operators';
+import { map, mergeMap } from 'rxjs/operators';
 import {
-  ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
   BidderBids200ResponseBidsInner,
   Loan200Response,
   Liquidation200ResponseLiquidations,
@@ -22,7 +22,7 @@ import {
 export class BorrowerNftComponent implements OnInit {
   classID$: Observable<string>;
   nftID$: Observable<string>;
-  listingInfo$: Observable<ListedNfts200ResponseListingsInner>;
+  listingInfo$: Observable<ListedNfts200ResponseListingsInnerListing>;
   bidders$: Observable<BidderBids200ResponseBidsInner[]>;
   loan$: Observable<Loan200Response>;
   liquidation$: Observable<Liquidation200ResponseLiquidations>;
diff --git a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/repay/repay.component.ts b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/repay/repay.component.ts
index 25ca1541c..60442be2d 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/repay/repay.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/repay/repay.component.ts
@@ -8,12 +8,11 @@ import { NftPawnshopService } from 'projects/portal/src/app/models/nft-pawnshops
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
 import { Observable, combineLatest, of } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
-import { rewards } from 'ununifi-client/cjs/rest/nftmarket/module';
 import {
-  ListedNfts200ResponseListingsInner,
   BidderBids200ResponseBidsInner,
   Loans200ResponseLoansInner,
   Liquidation200ResponseLiquidations,
+  ListedNfts200ResponseListingsInnerListing,
 } from 'ununifi-client/esm/openapi';
 
 @Component({
@@ -24,7 +23,7 @@ import {
 export class RepayComponent implements OnInit {
   classID$: Observable<string>;
   nftID$: Observable<string>;
-  listingInfo$: Observable<ListedNfts200ResponseListingsInner>;
+  listingInfo$: Observable<ListedNfts200ResponseListingsInnerListing>;
   bidders$: Observable<BidderBids200ResponseBidsInner[]>;
   loans$: Observable<Loans200ResponseLoansInner[]>;
   liquidation$: Observable<Liquidation200ResponseLiquidations>;
@@ -52,7 +51,9 @@ export class RepayComponent implements OnInit {
       mergeMap(([classID, nftID]) => this.pawnshopQuery.listNftBids$(classID, nftID)),
       map((bidders) => bidders.filter((bidder) => bidder.borrowings?.length)),
       map((bidders) =>
-        bidders.sort((a, b) => parseInt(b.deposit_amount?.amount!) - parseInt(a.deposit_amount?.amount!)),
+        bidders.sort(
+          (a, b) => parseInt(b.deposit_amount?.amount!) - parseInt(a.deposit_amount?.amount!),
+        ),
       ),
     );
     this.loans$ = nftCombine$.pipe(
diff --git a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower/borrower.component.ts b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower/borrower.component.ts
index 27e0aaef9..ec8028ad2 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower/borrower.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrower/borrower.component.ts
@@ -48,7 +48,7 @@ export class BorrowerComponent implements OnInit {
       mergeMap((address) =>
         this.pawnshopQuery
           .listAllListedNfts$()
-          .pipe(map((nfts) => nfts.filter((nft) => nft.owner == address))),
+          .pipe(map((nfts) => nfts.filter((nft) => nft.listing?.owner == address))),
       ),
     );
 
@@ -56,8 +56,11 @@ export class BorrowerComponent implements OnInit {
       mergeMap((nfts) =>
         Promise.all(
           nfts.map(async (nft) => {
-            if (nft.nft_id && nft.nft_id.class_id && nft.nft_id.nft_id) {
-              const res = await this.pawnshopQuery.getNft(nft.nft_id.class_id, nft.nft_id.nft_id);
+            if (nft.listing?.nft_id?.class_id && nft.listing?.nft_id?.nft_id) {
+              const res = await this.pawnshopQuery.getNft(
+                nft.listing.nft_id.class_id,
+                nft.listing.nft_id.nft_id,
+              );
               return res.nft?.uri;
             } else {
               return '';
diff --git a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrowers.component.ts b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrowers.component.ts
index faa5d5289..fcaf30c2d 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrowers.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/borrowers/borrowers.component.ts
@@ -34,7 +34,7 @@ export class BorrowersComponent implements OnInit {
       mergeMap((address) =>
         this.pawnshopQuery
           .listAllListedNfts$()
-          .pipe(map((nfts) => nfts.filter((nft) => nft.owner == address))),
+          .pipe(map((nfts) => nfts.filter((nft) => nft.listing?.owner == address))),
       ),
     );
   }
diff --git a/projects/portal/src/app/pages/nft-pawnshop/lenders/lender-nfts/lender-nft/lender-nft.component.ts b/projects/portal/src/app/pages/nft-pawnshop/lenders/lender-nfts/lender-nft/lender-nft.component.ts
index 4b10aefed..869a0f3e4 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/lenders/lender-nfts/lender-nft/lender-nft.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/lenders/lender-nfts/lender-nft/lender-nft.component.ts
@@ -12,7 +12,7 @@ import { combineLatest, Observable } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
 import {
   BidderBids200ResponseBidsInner,
-  ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
 } from 'ununifi-client/esm/openapi';
 
 @Component({
@@ -25,7 +25,7 @@ export class LenderNftComponent implements OnInit {
   address$: Observable<string>;
   classID$: Observable<string>;
   nftID$: Observable<string>;
-  listingInfo$: Observable<ListedNfts200ResponseListingsInner>;
+  listingInfo$: Observable<ListedNfts200ResponseListingsInnerListing>;
   bidders$: Observable<BidderBids200ResponseBidsInner[]>;
   nftMetadata$: Observable<Metadata>;
   nftImage$: Observable<string>;
diff --git a/projects/portal/src/app/pages/nft-pawnshop/lenders/lender-nfts/lender-nft/place-bid/place-bid.component.ts b/projects/portal/src/app/pages/nft-pawnshop/lenders/lender-nfts/lender-nft/place-bid/place-bid.component.ts
index 3a4a9a9e0..caf9e7962 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/lenders/lender-nfts/lender-nft/place-bid/place-bid.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/lenders/lender-nfts/lender-nft/place-bid/place-bid.component.ts
@@ -13,7 +13,7 @@ import { combineLatest, Observable, zip } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
 import {
   BidderBids200ResponseBidsInner,
-  ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
 } from 'ununifi-client/esm/openapi';
 
 @Component({
@@ -27,7 +27,7 @@ export class PlaceBidComponent implements OnInit {
   symbol$: Observable<string | null | undefined>;
   currentStoredWallet$: Observable<StoredWallet | null | undefined>;
   balance$: Observable<number>;
-  listingInfo$: Observable<ListedNfts200ResponseListingsInner>;
+  listingInfo$: Observable<ListedNfts200ResponseListingsInnerListing>;
   bidders$: Observable<BidderBids200ResponseBidsInner[]>;
   nftMetadata$: Observable<Metadata>;
   nftImage$: Observable<string>;
diff --git a/projects/portal/src/app/pages/nft-pawnshop/lenders/lender/lender.component.ts b/projects/portal/src/app/pages/nft-pawnshop/lenders/lender/lender.component.ts
index 407ea7571..812e6d8d7 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/lenders/lender/lender.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/lenders/lender/lender.component.ts
@@ -7,7 +7,7 @@ import { NftPawnshopService } from 'projects/portal/src/app/models/nft-pawnshops
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
 import { Observable, pipe } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
-import { ListedNfts200ResponseListingsInner } from 'ununifi-client/esm/openapi';
+import { ListedNfts200ResponseListingsInnerListing } from 'ununifi-client/esm/openapi';
 
 @Component({
   selector: 'app-lender',
@@ -16,7 +16,7 @@ import { ListedNfts200ResponseListingsInner } from 'ununifi-client/esm/openapi';
 })
 export class LenderComponent implements OnInit {
   address$: Observable<string>;
-  biddingNfts$: Observable<ListedNfts200ResponseListingsInner[]>;
+  biddingNfts$: Observable<ListedNfts200ResponseListingsInnerListing[]>;
   nftsMetadata$: Observable<Metadata[]>;
   nftImages$: Observable<string[]>;
 
diff --git a/projects/portal/src/app/pages/nft-pawnshop/lenders/lenders.component.ts b/projects/portal/src/app/pages/nft-pawnshop/lenders/lenders.component.ts
index dfc09b3cd..27e8d08e7 100644
--- a/projects/portal/src/app/pages/nft-pawnshop/lenders/lenders.component.ts
+++ b/projects/portal/src/app/pages/nft-pawnshop/lenders/lenders.component.ts
@@ -14,6 +14,7 @@ import {
   BidderBids200ResponseBidsInner,
   ListedClass200Response,
   ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
 } from 'ununifi-client/esm/openapi';
 
 export interface BidderNftsInfo {
@@ -34,7 +35,7 @@ export class LendersComponent implements OnInit {
   bidderBids$: Observable<BidderBids200ResponseBidsInner[]>;
   depositCoins$: Observable<cosmosclient.proto.cosmos.base.v1beta1.ICoin[]>;
   lendCoins$: Observable<cosmosclient.proto.cosmos.base.v1beta1.ICoin[]>;
-  biddingNfts$: Observable<ListedNfts200ResponseListingsInner[]>;
+  biddingNfts$: Observable<ListedNfts200ResponseListingsInnerListing[]>;
   biddingNftsInfo$: Observable<BidderNftsInfo>;
   rewards$: Observable<cosmosclient.proto.cosmos.base.v1beta1.ICoin[]>;
   listedClasses$: Observable<ListedClass200Response[]>;
@@ -160,10 +161,10 @@ export class LendersComponent implements OnInit {
           return [];
         }
         const filteredNfts = nfts.filter(
-          (nft) => nft.bid_token == selectedMetadata.denom_units![0].denom,
+          (nft) => nft.listing?.bid_token == selectedMetadata.denom_units![0].denom,
         );
         return classes.filter((value) =>
-          filteredNfts.find((nft) => nft.nft_id?.class_id == value.class_id),
+          filteredNfts.find((nft) => nft.listing?.nft_id?.class_id == value.class_id),
         );
       }),
     );
diff --git a/projects/portal/src/app/views/apps/app-derivatives/app-derivatives.component.html b/projects/portal/src/app/views/apps/app-derivatives/app-derivatives.component.html
index 1e4793bfe..d949cd632 100644
--- a/projects/portal/src/app/views/apps/app-derivatives/app-derivatives.component.html
+++ b/projects/portal/src/app/views/apps/app-derivatives/app-derivatives.component.html
@@ -72,6 +72,14 @@
               <span class="flex-1">Pool</span>
             </label>
           </li>
+          <li>
+            <label class="flex gap-4" routerLink="/derivatives/copy-trading/traders">
+              <span class="flex-none">
+                <mat-icon color="primary">file_copy</mat-icon>
+              </span>
+              <span class="flex-1">Copy Trading</span>
+            </label>
+          </li>
 
           <li class="menu-title">
             <span>Apps</span>
@@ -162,6 +170,14 @@
           <span class="flex-1">Pool</span>
         </label>
       </li>
+      <li>
+        <label for="drawer-main" class="flex gap-4" routerLink="/derivatives/copy-trading/traders">
+          <span class="flex-none">
+            <mat-icon color="primary">file_copy</mat-icon>
+          </span>
+          <span class="flex-1">Copy Trading</span>
+        </label>
+      </li>
 
       <li class="menu-title">
         <span>Apps</span>
diff --git a/projects/portal/src/app/views/copy-trading/traders/create/create.component.css b/projects/portal/src/app/views/copy-trading/traders/create/create.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/views/copy-trading/traders/create/create.component.html b/projects/portal/src/app/views/copy-trading/traders/create/create.component.html
new file mode 100644
index 000000000..48159eff6
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/create/create.component.html
@@ -0,0 +1,96 @@
+<div class="mx-auto max-w-screen-xl">
+  <div class="flex flex-row flex-wrap mb-8">
+    <h2 *ngIf="!myExemplaryTrader">Become an Exemplary Trader</h2>
+    <h2 *ngIf="myExemplaryTrader">Manage your Exemplary Trader</h2>
+  </div>
+
+  <div class="w-full md:w-auto mb-8">
+    <div class="card bg-base-100 shadow-xl w-full">
+      <div class="card-body">
+        <h2 class="card-title">Exemplary traders Settings</h2>
+        <form #formRef="ngForm" (submit)="onClickButton()">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Address</span>
+            </label>
+            <input
+              type="text"
+              name="address"
+              [(ngModel)]="address"
+              disabled
+              class="input input-bordered"
+            />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Enter Trader Name</span>
+            </label>
+            <input
+              required
+              type="text"
+              name="name"
+              [(ngModel)]="traderName"
+              placeholder="Enter a unique name"
+              class="input input-bordered"
+              [disabled]="!!myExemplaryTrader"
+            />
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Enter Description</span>
+            </label>
+            <textarea
+              required
+              type="text"
+              name="description"
+              [(ngModel)]="traderDescription"
+              class="textarea textarea-bordered"
+              placeholder="Enter a description"
+            ></textarea>
+          </div>
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Enter New Commission Rate</span>
+            </label>
+            <label class="input-group">
+              <input
+                required
+                type="number"
+                name="rate"
+                [(ngModel)]="newCommissionRate"
+                [min]="0"
+                [max]="commissionRate || 100"
+                [step]="0.1"
+                placeholder="e.g. 1.123456"
+                class="input input-bordered w-full"
+              />
+              <span>%</span>
+            </label>
+
+            <input
+              placeholder="1"
+              type="range"
+              min="0"
+              max="10"
+              [(ngModel)]="newCommissionRate"
+              [ngClass]="{
+                'range-info': !newCommissionRate || newCommissionRate < 5,
+                'range-warning':
+                  newCommissionRate && 5 <= newCommissionRate && newCommissionRate < 10,
+                'range-error': newCommissionRate && 10 <= newCommissionRate
+              }"
+              class="range mt-1"
+              name="rate-slider"
+            />
+          </div>
+          <div class="card-actions justify-end mt-4">
+            <button class="btn btn-primary w-full md:w-auto md:px-8" [disabled]="formRef.invalid">
+              <span *ngIf="!myExemplaryTrader">Register</span>
+              <span *ngIf="myExemplaryTrader">Update</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/projects/portal/src/app/views/copy-trading/traders/create/create.component.ts b/projects/portal/src/app/views/copy-trading/traders/create/create.component.ts
new file mode 100644
index 000000000..b919009d7
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/create/create.component.ts
@@ -0,0 +1,45 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  CreateExemplaryTraderRequest,
+  UpdateExemplaryTraderRequest,
+} from 'projects/portal/src/app/models/copy-trading/copy-trading.model';
+import { ExemplaryTraderAll200ResponseExemplaryTraderInner } from 'ununifi-client/esm/openapi';
+
+@Component({
+  selector: 'view-create',
+  templateUrl: './create.component.html',
+  styleUrls: ['./create.component.css'],
+})
+export class CreateComponent implements OnInit {
+  @Input() address?: string | null;
+  @Input() myExemplaryTrader?: ExemplaryTraderAll200ResponseExemplaryTraderInner | null;
+  @Input() traderName?: string | null;
+  @Input() traderDescription?: string | null;
+  @Input() commissionRate?: number | null;
+  @Input() newCommissionRate?: number | null;
+  @Output() createExemplaryTrader = new EventEmitter<CreateExemplaryTraderRequest>();
+  @Output() updateExemplaryTrader = new EventEmitter<UpdateExemplaryTraderRequest>();
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  onClickButton() {
+    if (!this.traderName || !this.traderDescription || !this.newCommissionRate) {
+      alert('Please fill all fields.');
+      return;
+    }
+    if (this.myExemplaryTrader) {
+      this.updateExemplaryTrader.emit({
+        name: this.traderName,
+        description: this.traderDescription,
+        profitCommissionRate: this.newCommissionRate,
+      });
+    } else {
+      this.createExemplaryTrader.emit({
+        name: this.traderName,
+        description: this.traderDescription,
+        profitCommissionRate: this.newCommissionRate,
+      });
+    }
+  }
+}
diff --git a/projects/portal/src/app/views/copy-trading/traders/create/create.module.ts b/projects/portal/src/app/views/copy-trading/traders/create/create.module.ts
new file mode 100644
index 000000000..d234ee6de
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/create/create.module.ts
@@ -0,0 +1,11 @@
+import { CreateComponent } from './create.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [CreateComponent],
+  imports: [CommonModule, FormsModule],
+  exports: [CreateComponent],
+})
+export class CreateModule {}
diff --git a/projects/portal/src/app/views/copy-trading/traders/trader/trader.component.css b/projects/portal/src/app/views/copy-trading/traders/trader/trader.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/views/copy-trading/traders/trader/trader.component.html b/projects/portal/src/app/views/copy-trading/traders/trader/trader.component.html
new file mode 100644
index 000000000..0ae954d22
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/trader/trader.component.html
@@ -0,0 +1,269 @@
+<div class="mx-auto max-w-screen-xl">
+  <h2>Exemplary traders</h2>
+
+  <div class="w-full md:w-auto mb-8">
+    <div class="card bg-base-100 shadow-xl w-full">
+      <div class="card-body">
+        <h2 class="card-title">{{ trader?.name }}</h2>
+        <div class="overflow-x-auto">
+          <table class="table w-full">
+            <tbody>
+              <tr>
+                <td>Address</td>
+                <td>{{ exemplaryTraderAddress }}</td>
+              </tr>
+              <tr>
+                <td>Exemplary trader name</td>
+                <td>{{ trader?.name }}</td>
+              </tr>
+              <tr>
+                <td>Commission Fee</td>
+                <td>{{ trader?.profit_commission_rate | percent : '1.2-2' }}</td>
+              </tr>
+              <tr>
+                <td>Users</td>
+                <td>{{ userCount || 0 }}</td>
+              </tr>
+              <tr>
+                <td>Current APY</td>
+                <td>Coming Soon</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p>{{ trader?.description }}</p>
+
+        <ng-container>
+          <h2 class="card-title">Tracing Info</h2>
+          <div class="flex flex-row">
+            <div *ngIf="tracing?.reverse" class="badge badge-lg badge-error mr-1">Reverse</div>
+          </div>
+          <div class="stats stats-vertical md:stats-horizontal">
+            <div class="stat">
+              <div class="stat-title">Size Coefficient</div>
+              <div class="stat-value text-primary">
+                x {{ tracing?.size_coefficient || 0 | number }}
+              </div>
+              <div class="stat-desc"></div>
+            </div>
+            <div class="stat">
+              <div class="stat-title">Leverage Coefficient</div>
+              <div class="stat-value text-secondary">
+                x {{ tracing?.leverage_coefficient || 0 | number }}
+              </div>
+              <div class="stat-desc"></div>
+            </div>
+          </div>
+        </ng-container>
+
+        <div class="card-actions justify-end">
+          <label
+            *ngIf="address !== exemplaryTraderAddress && !isTracing"
+            for="trace-model"
+            class="btn btn-primary w-full md:w-auto md:px-8"
+          >
+            Subscribe
+          </label>
+          <label
+            *ngIf="isTracing"
+            for="untrace-model"
+            class="btn btn-outline btn-error w-full md:w-auto md:px-8"
+          >
+            Unsubscribe
+          </label>
+          <label
+            *ngIf="address === exemplaryTraderAddress"
+            for="update-model"
+            class="btn btn-info w-full md:w-auto md:px-8"
+          >
+            Update
+          </label>
+          <label
+            *ngIf="address === exemplaryTraderAddress"
+            for="delete-model"
+            class="btn btn-outline btn-error w-full md:w-auto md:px-8"
+          >
+            Delete
+          </label>
+        </div>
+        <input type="checkbox" id="trace-model" class="modal-toggle" />
+        <div class="modal modal-bottom sm:modal-middle">
+          <div class="modal-box">
+            <h3 class="font-bold text-lg">Are you sure to subscribe this Trader?</h3>
+            <form #createFormRef="ngForm" (submit)="onClickCreateTracing()">
+              <div class="form-control mb-2">
+                <label class="label">
+                  <span class="label-text">Enter Coefficient of Position Size</span>
+                </label>
+                <label class="input-group">
+                  <span>x</span>
+                  <input
+                    required
+                    type="number"
+                    name="size"
+                    [(ngModel)]="sizeCoef"
+                    [min]="0"
+                    [step]="0.1"
+                    class="input input-bordered w-full"
+                  />
+                </label>
+
+                <input
+                  type="range"
+                  [min]="0"
+                  [max]="10"
+                  [step]="0.1"
+                  [(ngModel)]="sizeCoef"
+                  [ngClass]="{
+                    'range-info': sizeCoef <= 2,
+                    'range-warning': 2 < sizeCoef && sizeCoef < 10,
+                    'range-error': 10 <= sizeCoef
+                  }"
+                  class="range mt-1"
+                  name="size-slider"
+                />
+              </div>
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text">Enter Coefficient of Leverage</span>
+                </label>
+                <label class="input-group">
+                  <span>x</span>
+                  <input
+                    placeholder="100"
+                    type="number"
+                    name="leverage"
+                    [(ngModel)]="leverageCoef"
+                    [min]="0"
+                    [step]="0.1"
+                    class="input input-bordered w-full"
+                  />
+                </label>
+                <input
+                  type="range"
+                  [min]="0"
+                  [max]="10"
+                  [step]="0.1"
+                  [(ngModel)]="leverageCoef"
+                  [ngClass]="{
+                    'range-info': leverageCoef <= 2,
+                    'range-warning': 2 < leverageCoef && leverageCoef < 10,
+                    'range-error': 10 <= leverageCoef
+                  }"
+                  class="range mt-1"
+                  name="leverage-slider"
+                />
+              </div>
+              <div class="form-control mt-4">
+                <label class="label"> <span class="label-text mr-2">Reverse</span></label>
+                <label class="input-group">
+                  <input
+                    type="checkbox"
+                    class="toggle toggle-error"
+                    name="reverse"
+                    [(ngModel)]="isReverse"
+                  />
+                </label>
+              </div>
+              <div class="modal-action">
+                <label for="trace-model" class="btn btn-outline">Cancel</label>
+                <button class="btn btn-primary" [disabled]="createFormRef.invalid">
+                  Subscribe
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <input type="checkbox" id="untrace-model" class="modal-toggle" />
+        <div class="modal modal-bottom sm:modal-middle">
+          <div class="modal-box">
+            <h3 class="font-bold text-lg">Are you sure to unsubscribe this Trader?</h3>
+            <div class="modal-action">
+              <label for="untrace-model" class="btn btn-outline">Cancel</label>
+              <button class="btn btn-error" (click)="onClickDeleteTracing()">Unsubscribe</button>
+            </div>
+          </div>
+        </div>
+
+        <input type="checkbox" id="delete-model" class="modal-toggle" />
+        <div class="modal modal-bottom sm:modal-middle">
+          <div class="modal-box">
+            <h3 class="font-bold text-lg">Are you sure to delete yor Exemplary trader?</h3>
+            <div class="modal-action">
+              <label for="delete-model" class="btn btn-outline">Cancel</label>
+              <button class="btn btn-error" (click)="onClickDeleteTrader()">Delete</button>
+            </div>
+          </div>
+        </div>
+
+        <input type="checkbox" id="update-model" class="modal-toggle" />
+        <div class="modal modal-bottom sm:modal-middle">
+          <div class="modal-box">
+            <h3 class="font-bold text-lg">
+              Are you sure to update your Exemplary trader settings?
+            </h3>
+            <form #updateFormRef="ngForm" (submit)="onClickUpdateTrader()">
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text">Enter New Description</span>
+                </label>
+                <textarea
+                  type="text"
+                  name="description"
+                  [(ngModel)]="description"
+                  class="textarea textarea-bordered"
+                  placeholder="Exemplary Trader Description"
+                ></textarea>
+              </div>
+              <div class="form-control">
+                <label class="label">
+                  <span class="label-text">Enter New Commission Rate</span>
+                </label>
+                <label class="input-group">
+                  <input
+                    required
+                    type="number"
+                    placeholder="e.g. 0.123456"
+                    name="rate"
+                    [(ngModel)]="newCommissionRate"
+                    [min]="0"
+                    [max]="commissionRate || 0"
+                    [step]="0.1"
+                    class="input input-bordered w-full"
+                  />
+                  <span>%</span>
+                </label>
+
+                <input
+                  placeholder="1"
+                  type="range"
+                  min="0"
+                  max="commissionRate"
+                  [(ngModel)]="newCommissionRate"
+                  [ngClass]="{
+                    'range-info':
+                      !newCommissionRate || newCommissionRate <= (commissionRate || 0) / 2,
+                    'range-warning':
+                      commissionRate &&
+                      newCommissionRate &&
+                      commissionRate / 2 < newCommissionRate &&
+                      newCommissionRate < commissionRate,
+                    'range-error':
+                      commissionRate && newCommissionRate && commissionRate <= newCommissionRate
+                  }"
+                  class="range mt-1"
+                  name="rate-slider"
+                />
+              </div>
+              <div class="modal-action">
+                <label for="update-model" class="btn btn-outline">Cancel</label>
+                <button class="btn btn-info" [disabled]="updateFormRef.invalid">Update Info</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/projects/portal/src/app/views/copy-trading/traders/trader/trader.component.ts b/projects/portal/src/app/views/copy-trading/traders/trader/trader.component.ts
new file mode 100644
index 000000000..c616b5888
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/trader/trader.component.ts
@@ -0,0 +1,69 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  CreateTracingRequest,
+  UpdateExemplaryTraderRequest,
+} from 'projects/portal/src/app/models/copy-trading/copy-trading.model';
+import {
+  ExemplaryTraderAll200ResponseExemplaryTraderInner,
+  ExemplaryTraderTracing200ResponseTracingInner,
+} from 'ununifi-client/esm/openapi';
+
+@Component({
+  selector: 'view-trader',
+  templateUrl: './trader.component.html',
+  styleUrls: ['./trader.component.css'],
+})
+export class TraderComponent implements OnInit {
+  @Input() address?: string | null;
+  @Input() exemplaryTraderAddress?: string | null;
+  @Input() trader?: ExemplaryTraderAll200ResponseExemplaryTraderInner | null;
+  @Input() tracing?: ExemplaryTraderTracing200ResponseTracingInner | null;
+  @Input() isTracing?: boolean | null;
+  @Input() userCount?: number | null;
+  @Input() commissionRate?: number | null;
+  @Input() newCommissionRate?: number | null;
+  @Input() description?: string | null;
+  @Output() createTracing = new EventEmitter<CreateTracingRequest>();
+  @Output() deleteTracing = new EventEmitter<{}>();
+  @Output() updateTrader = new EventEmitter<UpdateExemplaryTraderRequest>();
+  @Output() deleteTrader = new EventEmitter<{}>();
+
+  sizeCoef: number = 1;
+  leverageCoef: number = 1;
+  isReverse: boolean = false;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  onClickCreateTracing() {
+    if (!this.exemplaryTraderAddress) {
+      return;
+    }
+    this.createTracing.emit({
+      exemplaryTrader: this.exemplaryTraderAddress,
+      sizeCoef: this.sizeCoef,
+      leverageCoef: this.leverageCoef,
+      reverse: this.isReverse,
+    });
+  }
+
+  onClickDeleteTracing() {
+    this.deleteTracing.emit();
+  }
+
+  onClickUpdateTrader() {
+    if (this.newCommissionRate === undefined || this.newCommissionRate === null) {
+      return;
+    }
+    this.updateTrader.emit({
+      name: this.trader?.name || '',
+      description: this.description || '',
+      profitCommissionRate: this.newCommissionRate,
+    });
+  }
+
+  onClickDeleteTrader() {
+    this.deleteTrader.emit();
+  }
+}
diff --git a/projects/portal/src/app/views/copy-trading/traders/trader/trader.module.ts b/projects/portal/src/app/views/copy-trading/traders/trader/trader.module.ts
new file mode 100644
index 000000000..c6946e004
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/trader/trader.module.ts
@@ -0,0 +1,11 @@
+import { TraderComponent } from './trader.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [TraderComponent],
+  imports: [CommonModule, FormsModule],
+  exports: [TraderComponent],
+})
+export class TraderModule {}
diff --git a/projects/portal/src/app/views/copy-trading/traders/traders.component.css b/projects/portal/src/app/views/copy-trading/traders/traders.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/views/copy-trading/traders/traders.component.html b/projects/portal/src/app/views/copy-trading/traders/traders.component.html
new file mode 100644
index 000000000..fdc1761a0
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/traders.component.html
@@ -0,0 +1,104 @@
+<div class="mx-auto max-w-screen-xl">
+  <ng-container class="mb-4" *ngIf="tracing">
+    <h2>Your Subscribing Trader</h2>
+    <div class="w-full md:w-auto mb-8">
+      <div class="card bg-base-100 shadow-xl w-full">
+        <div class="card-body">
+          <div class="flex flex-row">
+            <div *ngIf="tracing.reverse" class="badge badge-lg badge-error mr-1">Reverse</div>
+          </div>
+          <h2 class="card-title">{{ tracingTrader?.name || tracing.address }}</h2>
+          <div class="stats stats-vertical md:stats-horizontal">
+            <div class="stat">
+              <div class="stat-title">Size Coefficient</div>
+              <div class="stat-value text-primary">
+                x {{ tracing.size_coefficient || 0 | number }}
+              </div>
+              <div class="stat-desc"></div>
+            </div>
+            <div class="stat">
+              <div class="stat-title">Leverage Coefficient</div>
+              <div class="stat-value text-info">
+                x {{ tracing.leverage_coefficient || 0 | number }}
+              </div>
+              <div class="stat-desc"></div>
+            </div>
+            <div class="stat">
+              <div class="stat-title">Commission Fee</div>
+              <div class="stat-value">
+                {{ tracingTrader?.profit_commission_rate | percent : '1.2-2' }}
+              </div>
+              <div class="stat-desc"></div>
+            </div>
+          </div>
+
+          <div class="card-actions justify-end">
+            <button
+              routerLink="{{ tracing.address }}"
+              class="btn btn-outline btn-info w-full md:w-auto md:px-8"
+            >
+              View
+            </button>
+            <label for="untrace-model" class="btn btn-outline btn-error w-full md:w-auto md:px-8">
+              Unsubscribe
+            </label>
+          </div>
+          <input type="checkbox" id="untrace-model" class="modal-toggle" />
+          <div class="modal modal-bottom sm:modal-middle">
+            <div class="modal-box">
+              <h3 class="font-bold text-lg">Are you sure to unsubscribe this Trader?</h3>
+              <div class="modal-action">
+                <label for="untrace-model" class="btn btn-outline">Cancel</label>
+                <button class="btn btn-error" (click)="onClickDelete()">Unsubscribe</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div class="flex flex-row flex-wrap mb-4">
+    <h2>Exemplary Traders</h2>
+    <span class="flex-auto"></span>
+    <button class="btn btn-outline btn-secondary w-full md:w-auto md:px-8" routerLink="create">
+      <span *ngIf="!myExemplaryTrader">Become an Exemplary Trader</span>
+      <span *ngIf="myExemplaryTrader">Manege your Exemplary Trader</span>
+    </button>
+  </div>
+
+  <ng-container *ngFor="let trader of exemplaryTraders; let i = index">
+    <div class="w-full md:w-auto mb-8">
+      <div class="card bg-base-100 shadow-xl w-full">
+        <div class="card-body">
+          <h2 class="card-title">{{ trader.name }}</h2>
+          <div class="stats stats-vertical md:stats-horizontal">
+            <div class="stat">
+              <div class="stat-title">Commission Fee</div>
+              <div class="stat-value">
+                {{ trader.profit_commission_rate | percent : '1.2-2' }}
+              </div>
+              <div class="stat-desc"></div>
+            </div>
+            <div class="stat" *ngIf="userCounts">
+              <div class="stat-title"></div>
+              <div class="stat-value text-primary">
+                {{ userCounts[i] || 0 }}
+              </div>
+              <div class="stat-desc">Users</div>
+            </div>
+          </div>
+
+          <div class="card-actions justify-end">
+            <button
+              routerLink="{{ trader.address }}"
+              class="btn btn-outline btn-info w-full md:w-auto md:px-8"
+            >
+              View
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>
diff --git a/projects/portal/src/app/views/copy-trading/traders/traders.component.ts b/projects/portal/src/app/views/copy-trading/traders/traders.component.ts
new file mode 100644
index 000000000..0c92db1e6
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/traders.component.ts
@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  ExemplaryTraderAll200ResponseExemplaryTraderInner,
+  ExemplaryTraderTracing200ResponseTracingInner,
+} from 'ununifi-client/esm/openapi';
+
+@Component({
+  selector: 'view-traders',
+  templateUrl: './traders.component.html',
+  styleUrls: ['./traders.component.css'],
+})
+export class TradersComponent implements OnInit {
+  @Input() address?: string | null;
+  @Input() exemplaryTraders?: ExemplaryTraderAll200ResponseExemplaryTraderInner[] | null;
+  @Input() myExemplaryTrader?: ExemplaryTraderAll200ResponseExemplaryTraderInner | null;
+  @Input() tracing?: ExemplaryTraderTracing200ResponseTracingInner | null;
+  @Input() tracingTrader?: ExemplaryTraderAll200ResponseExemplaryTraderInner | null;
+  @Input() userCounts?: number[] | null;
+  @Output() deleteTracing = new EventEmitter<{}>();
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  onClickDelete() {
+    this.deleteTracing.emit();
+  }
+}
diff --git a/projects/portal/src/app/views/copy-trading/traders/traders.module.ts b/projects/portal/src/app/views/copy-trading/traders/traders.module.ts
new file mode 100644
index 000000000..5a8a03c40
--- /dev/null
+++ b/projects/portal/src/app/views/copy-trading/traders/traders.module.ts
@@ -0,0 +1,11 @@
+import { TradersComponent } from './traders.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [TradersComponent],
+  imports: [CommonModule, RouterModule],
+  exports: [TradersComponent],
+})
+export class TradersModule {}
diff --git a/projects/portal/src/app/views/derivatives/perpetual-futures/market/market.component.ts b/projects/portal/src/app/views/derivatives/perpetual-futures/market/market.component.ts
index f61411d86..9fc81a8bc 100644
--- a/projects/portal/src/app/views/derivatives/perpetual-futures/market/market.component.ts
+++ b/projects/portal/src/app/views/derivatives/perpetual-futures/market/market.component.ts
@@ -219,8 +219,4 @@ export class MarketComponent implements OnInit, AfterViewInit, OnChanges {
   onSubmitClose(positionId: string) {
     this.closePosition.emit(positionId);
   }
-
-  calcMarginRate(decRate: string) {
-    return Number(decRate) / 10 ** 6;
-  }
 }
diff --git a/projects/portal/src/app/views/derivatives/positions/position/perpetual-futures/perpetual-futures.component.html b/projects/portal/src/app/views/derivatives/positions/position/perpetual-futures/perpetual-futures.component.html
index 7a9c3937c..d61eaca5d 100644
--- a/projects/portal/src/app/views/derivatives/positions/position/perpetual-futures/perpetual-futures.component.html
+++ b/projects/portal/src/app/views/derivatives/positions/position/perpetual-futures/perpetual-futures.component.html
@@ -26,7 +26,7 @@ <h2 class="card-title">
         <div class="stat">
           <div class="stat-title">Margin Maintenance Rate</div>
           <div class="stat-value">
-            {{ calcMarginRate(position?.margin_maintenance_rate!) | percentage }}
+            {{ position?.margin_maintenance_rate | percentage }}
           </div>
           <div class="stat-desc">Under 50% will initiate liquidation</div>
         </div>
diff --git a/projects/portal/src/app/views/derivatives/positions/position/perpetual-futures/perpetual-futures.component.ts b/projects/portal/src/app/views/derivatives/positions/position/perpetual-futures/perpetual-futures.component.ts
index eef6ef884..1618d2184 100644
--- a/projects/portal/src/app/views/derivatives/positions/position/perpetual-futures/perpetual-futures.component.ts
+++ b/projects/portal/src/app/views/derivatives/positions/position/perpetual-futures/perpetual-futures.component.ts
@@ -78,8 +78,4 @@ export class PerpetualFuturesComponent implements OnInit {
   onClickClose() {
     this.closePosition.emit(this.position?.position?.id);
   }
-
-  calcMarginRate(decRate: string) {
-    return Number(decRate) / 10 ** 6;
-  }
 }
diff --git a/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrow/borrow.component.ts b/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrow/borrow.component.ts
index 37a88d438..39aab5d8b 100644
--- a/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrow/borrow.component.ts
+++ b/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrow/borrow.component.ts
@@ -13,7 +13,7 @@ import { NftPawnshopChartService } from 'projects/portal/src/app/models/nft-pawn
 import { BorrowRequest } from 'projects/portal/src/app/models/nft-pawnshops/nft-pawnshop.model';
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
 import {
-  ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
   BidderBids200ResponseBidsInner,
   Loans200ResponseLoansInner,
 } from 'ununifi-client/esm/openapi';
@@ -29,7 +29,7 @@ export class BorrowComponent implements OnInit {
   @Input()
   nftID?: string | null;
   @Input()
-  listingInfo?: ListedNfts200ResponseListingsInner | null;
+  listingInfo?: ListedNfts200ResponseListingsInnerListing | null;
   @Input()
   bidders?: BidderBids200ResponseBidsInner[] | null;
   @Input()
diff --git a/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrower-nft.component.ts b/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrower-nft.component.ts
index ff29ad9bf..47922dab5 100644
--- a/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrower-nft.component.ts
+++ b/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/borrower-nft.component.ts
@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { NftRequest } from 'projects/portal/src/app/models/nft-pawnshops/nft-pawnshop.model';
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
 import {
-  ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
   BidderBids200ResponseBidsInner,
   Loan200Response,
   Liquidation200ResponseLiquidations,
@@ -19,7 +19,7 @@ export class BorrowerNftComponent implements OnInit {
   @Input()
   nftID?: string | null;
   @Input()
-  listingInfo?: ListedNfts200ResponseListingsInner | null;
+  listingInfo?: ListedNfts200ResponseListingsInnerListing | null;
   @Input()
   bidders?: BidderBids200ResponseBidsInner[] | null;
   @Input()
diff --git a/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/repay/repay.component.ts b/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/repay/repay.component.ts
index b9d72d4ee..710ab132f 100644
--- a/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/repay/repay.component.ts
+++ b/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower-nfts/borrower-nft/repay/repay.component.ts
@@ -13,10 +13,10 @@ import { NftPawnshopChartService } from 'projects/portal/src/app/models/nft-pawn
 import { RepayRequest } from 'projects/portal/src/app/models/nft-pawnshops/nft-pawnshop.model';
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
 import {
-  ListedNfts200ResponseListingsInner,
   BidderBids200ResponseBidsInner,
   Loans200ResponseLoansInner,
   Liquidation200ResponseLiquidations,
+  ListedNfts200ResponseListingsInnerListing,
 } from 'ununifi-client/esm/openapi';
 
 @Component({
@@ -30,7 +30,7 @@ export class RepayComponent implements OnInit {
   @Input()
   nftID?: string | null;
   @Input()
-  listingInfo?: ListedNfts200ResponseListingsInner | null;
+  listingInfo?: ListedNfts200ResponseListingsInnerListing | null;
   @Input()
   bidders?: BidderBids200ResponseBidsInner[] | null;
   @Input()
diff --git a/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower/borrower.component.html b/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower/borrower.component.html
index a637998f6..2054c30eb 100644
--- a/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower/borrower.component.html
+++ b/projects/portal/src/app/views/nft-pawnshop/borrowers/borrower/borrower.component.html
@@ -74,42 +74,48 @@ <h2>Listed NFTs</h2>
         *ngFor="let nft of listedOwnNfts; let i = index"
         class="sm:pr-12 pb-12 md:w-1/3 lg:w-1/4 xl:w-1/5"
       >
-        <div class="card w-full glass shadow-xl">
-          <figure class="aspect-square w-full">
-            <img
-              *ngIf="listedOwnNftImages"
-              src="{{ listedOwnNftImages[i] || 'assets/UnUniFi-logo.png' }}"
-              alt=""
-              class="h-full object-cover"
-            />
-            <img
-              *ngIf="!listedOwnNftImages"
-              src="assets/UnUniFi-logo.png"
-              alt=""
-              class="h-full object-cover"
-            />
-          </figure>
-          <div class="card-body">
-            <span class="badge badge-primary">{{ nft.state }}</span>
-            <h2 *ngIf="listedOwnNftsMetadata" class="card-title break-all">
-              {{ listedOwnNftsMetadata[i].name + '/' + nft.nft_id?.nft_id }}
-            </h2>
-            <h2 *ngIf="!listedOwnNftsMetadata" class="card-title break-all">
-              {{ nft.nft_id?.nft_id }}
-            </h2>
-            <button
-              class="btn btn-outline btn-secondary"
-              routerLink="../nfts/{{ nft.nft_id?.class_id }}/{{ nft.nft_id?.nft_id }}"
-            >
-              View
-            </button>
+        <div class="indicator w-full">
+          <span class="indicator-item badge badge-primary">{{ nft.listing?.state }}</span>
+          <div class="card w-full glass shadow-xl">
+            <figure class="aspect-square w-full">
+              <img
+                *ngIf="listedOwnNftImages"
+                src="{{ listedOwnNftImages[i] || 'assets/UnUniFi-logo.png' }}"
+                alt=""
+                class="h-full object-cover"
+              />
+              <img
+                *ngIf="!listedOwnNftImages"
+                src="assets/UnUniFi-logo.png"
+                alt=""
+                class="h-full object-cover"
+              />
+            </figure>
+            <div class="card-body">
+              <h2 *ngIf="listedOwnNftsMetadata" class="card-title break-all">
+                {{
+                  listedOwnNftsMetadata[i].name ||
+                    nft.listing?.nft_id?.class_id + '/' + nft.listing?.nft_id?.nft_id
+                }}
+              </h2>
+              <h2 *ngIf="!listedOwnNftsMetadata" class="card-title break-all">
+                {{ nft.listing?.nft_id?.class_id + '/' + nft.listing?.nft_id?.nft_id }}
+              </h2>
+              <button
+                class="btn btn-outline btn-secondary"
+                routerLink="../nfts/{{ nft.listing?.nft_id?.class_id }}/{{
+                  nft.listing?.nft_id?.nft_id
+                }}"
+              >
+                View
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </ng-template>
   <ng-template #emptyListing>
-    <p>There is no listed NFT.</p>
-    <p>Please list your NFTs.</p>
+    <p>There is no listed NFT. Please list your NFTs.</p>
   </ng-template>
 </div>
diff --git a/projects/portal/src/app/views/nft-pawnshop/lenders/lender-nfts/lender-nft/lender-nft.component.ts b/projects/portal/src/app/views/nft-pawnshop/lenders/lender-nfts/lender-nft/lender-nft.component.ts
index f70341605..c84f647b2 100644
--- a/projects/portal/src/app/views/nft-pawnshop/lenders/lender-nfts/lender-nft/lender-nft.component.ts
+++ b/projects/portal/src/app/views/nft-pawnshop/lenders/lender-nfts/lender-nft/lender-nft.component.ts
@@ -4,7 +4,7 @@ import { StoredWallet } from 'projects/shared/src/common';
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
 import {
   BidderBids200ResponseBidsInner,
-  ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
 } from 'ununifi-client/esm/openapi';
 
 @Component({
@@ -20,7 +20,7 @@ export class LenderNftComponent implements OnInit {
   @Input()
   currentStoredWallet?: StoredWallet | null;
   @Input()
-  listingInfo?: ListedNfts200ResponseListingsInner | null;
+  listingInfo?: ListedNfts200ResponseListingsInnerListing | null;
   @Input()
   bidders?: BidderBids200ResponseBidsInner[] | null;
   @Input()
diff --git a/projects/portal/src/app/views/nft-pawnshop/lenders/lender-nfts/lender-nft/place-bid/place-bid.component.ts b/projects/portal/src/app/views/nft-pawnshop/lenders/lender-nfts/lender-nft/place-bid/place-bid.component.ts
index 84d7d90af..9ce2ce9aa 100644
--- a/projects/portal/src/app/views/nft-pawnshop/lenders/lender-nfts/lender-nft/place-bid/place-bid.component.ts
+++ b/projects/portal/src/app/views/nft-pawnshop/lenders/lender-nfts/lender-nft/place-bid/place-bid.component.ts
@@ -15,7 +15,7 @@ import { NftPawnshopPocService } from 'projects/portal/src/app/models/nft-pawnsh
 import { StoredWallet } from 'projects/portal/src/app/models/wallets/wallet.model';
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
 import {
-  ListedNfts200ResponseListingsInner,
+  ListedNfts200ResponseListingsInnerListing,
   BidderBids200ResponseBidsInner,
 } from 'ununifi-client/esm/openapi';
 
@@ -36,7 +36,7 @@ export class PlaceBidComponent implements OnInit {
   @Input()
   balance?: number | null;
   @Input()
-  listingInfo?: ListedNfts200ResponseListingsInner | null;
+  listingInfo?: ListedNfts200ResponseListingsInnerListing | null;
   @Input()
   bidders?: BidderBids200ResponseBidsInner[] | null;
   @Input()
diff --git a/projects/portal/src/app/views/nft-pawnshop/lenders/lender/lender.component.ts b/projects/portal/src/app/views/nft-pawnshop/lenders/lender/lender.component.ts
index 04124049f..a4e2310d5 100644
--- a/projects/portal/src/app/views/nft-pawnshop/lenders/lender/lender.component.ts
+++ b/projects/portal/src/app/views/nft-pawnshop/lenders/lender/lender.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Metadata } from 'projects/shared/src/lib/models/ununifi/query/nft/nft.model';
-import { ListedNfts200ResponseListingsInner } from 'ununifi-client/esm/openapi';
+import { ListedNfts200ResponseListingsInnerListing } from 'ununifi-client/esm/openapi';
 
 @Component({
   selector: 'view-lender',
@@ -11,7 +11,7 @@ export class LenderComponent implements OnInit {
   @Input()
   address?: string | null;
   @Input()
-  biddingNfts?: ListedNfts200ResponseListingsInner[] | null;
+  biddingNfts?: ListedNfts200ResponseListingsInnerListing[] | null;
   @Input()
   nftsMetadata?: Metadata[] | null;
   @Input()