diff --git a/src/views/trade/components/trade-pairs-modal.vue b/src/views/trade/components/trade-pairs-modal.vue
new file mode 100644
index 0000000..646fd37
--- /dev/null
+++ b/src/views/trade/components/trade-pairs-modal.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { modalController } from "@ionic/vue";
+import { client, safeClient } from "@/api";
+
+const emit = defineEmits<{
+  select: [symbol: string];
+}>();
+
+const { data } = safeClient(client.api.trading_pairs.get());
+const searchText = ref("");
+
+function handleSelect(symbol: string) {
+  emit("select", symbol);
+  modalController.dismiss(symbol);
+}
+</script>
+
+<template>
+  <ion-header class="ion-no-border">
+    <ion-searchbar v-model="searchText" placeholder="搜索" class="mt-4" />
+  </ion-header>
+
+  <ion-content>
+    <div class="mt-2 flex flex-col">
+      <div v-for="item in data" :key="item.symbol" class="flex items-center px-3 my-3 w-full" @click="handleSelect(item.symbol)">
+        <Icon icon="cryptocurrency-color:dta" class="text-3xl" />
+        <div class="ml-2 inline-flex gap-2 items-baseline">
+          <span class="font-medium text-md">{{ item.baseAsset }}</span><span class="text-xs text-text-400">/ {{ item.quoteAsset }}</span>
+        </div>
+      </div>
+    </div>
+  </ion-content>
+</template>
+
+<style lang="css" scoped>
+@reference "tailwindcss";
+
+ion-item.selected {
+  --background: var(--ion-color-light);
+}
+
+ion-searchbar {
+  --border-radius: 8px;
+}
+</style>
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index e2122df..f3bcb05 100644
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import type { ChartingLibraryWidgetOptions } from "#/charting_library";
+import { modalController } from "@ionic/vue";
 import { useRouteQuery } from "@vueuse/router";
 import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
 import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/candlestick-chart-outline";
+import { client, safeClient } from "@/api";
 import { TradeTypeEnum } from "@/api/enum";
 import { TradingViewChart } from "@/tradingview/index";
 import OrdersPanel from "./components/orders-panel.vue";
+import TradePairsModal from "./components/trade-pairs-modal.vue";
 import TradeSwitch from "./components/trade-switch.vue";
 import TradeWay from "./components/trade-way.vue";
 
@@ -17,13 +20,39 @@ const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
     "create_volume_indicator_by_default",
   ],
 };
+
+const { data } = safeClient(client.api.trading_pairs.get());
+
+async function openTradePairs() {
+  if (!data.value)
+    return;
+
+  const modal = await modalController.create({
+    component: TradePairsModal,
+    componentProps: {
+      tradingPairs: data.value,
+      currentSymbol: symbol.value,
+    },
+    breakpoints: [0, 0.95],
+    initialBreakpoint: 0.95,
+    handle: true,
+  });
+
+  await modal.present();
+
+  const { data: result } = await modal.onWillDismiss<string>();
+
+  if (result) {
+    symbol.value = result;
+  }
+}
 </script>
 
 <template>
   <ion-page>
     <ion-header>
       <ion-toolbar class="ion-toolbar">
-        <div slot="start" class="flex items-center gap-1 px-4">
+        <div slot="start" class="flex items-center gap-1 px-4" @click="openTradePairs">
           <div class="text-md font-bold">
             {{ symbol }}
           </div>