diff --git a/src/views/OsmosisTrade.vue b/src/views/OsmosisTrade.vue
index 3547bd66..60c8cb1c 100644
--- a/src/views/OsmosisTrade.vue
+++ b/src/views/OsmosisTrade.vue
@@ -8,7 +8,7 @@
         <b-card>
           <div class="d-flex justify-content-begin align-items-center mb-1">
             <b-button
-              id="popover-button-3"
+              id="popover-trading-pairs"
               variant="flat-primary"
               class="mr-3"
               @click="show = !show"
@@ -18,29 +18,37 @@
 
             <b-popover
               :show.sync="show"
-              target="popover-button-3"
+              target="popover-trading-pairs"
               placement="bottom"
-              triggers="click"
-              style="width:300px;"
+              triggers="hover"
+              boundary="scrollParent"
+              boundary-padding="0"
             >
-              <template #title>
-                Pairs
-              </template>
               <b-table
                 striped
                 hover
                 :small="true"
                 :items="pairs"
-                class="m-0"
+                class="m-0 p-0"
               >
 
                 <template #cell(pair)="data">
                   <router-link
                     :to="`/osmosis/osmosis/trade/${data.item.id}`"
                   >
-                    {{ data.item.pair[0] }} / {{ data.item.pair[1] }}
+                    {{ data.item.pair[0] }}/{{ data.item.pair[1] }}
                   </router-link>
                 </template>
+                <template #cell(price)="data">
+                  <div class="text-right">
+                    <small class="">{{ data.item.price }}</small>
+                  </div>
+                </template>
+                <template #cell(change)="data">
+                  <div class="text-right">
+                    <small :class="data.item.change > 0 ? 'text-success': 'text-danger'">{{ data.item.change }}%</small>
+                  </div>
+                </template>
               </b-table>
             </b-popover>
             <div class="mr-3 text-success font-weight-bolder">
@@ -84,6 +92,7 @@ import {
   BRow, BCol, BCard, BButton, BPopover, BTable,
 } from 'bootstrap-vue'
 import { getPairName } from '@/libs/osmos'
+import { formatTokenDenom } from '@/libs/data'
 import Place from './components/KlineTrade/Place.vue'
 import Kline from './components/kline/index.vue'
 
@@ -101,13 +110,6 @@ export default {
   data() {
     return {
       show: false,
-      // pairs: [
-      //   { pair: 'ATOM/OSMO' },
-      //   { pair: 'IRIS/OSMO' },
-      //   { pair: 'AKT/OSMO' },
-      //   { pair: 'ATOM/OSMO' },
-      //   { pair: 'ATOM/OSMO' },
-      // ],
       pools: [],
       current: {},
       denomTrace: [],
@@ -123,28 +125,26 @@ export default {
     },
     pairs() {
       const pairs = this.pools.map(x => {
-        const x2 = {
+        const pair = x.poolAssets.map(t => {
+          if (t.token.denom.startsWith('ibc/')) {
+            return formatTokenDenom(this.denomTrace[t.token.denom] ? this.denomTrace[t.token.denom].base_denom : ' ')
+          }
+          return formatTokenDenom(t.token.denom)
+        })
+        return {
           id: x.id,
-          pair: x.poolAssets.map(t => {
-            if (t.token.denom.startsWith('ibc/')) {
-              return (this.denomTrace[t.token.denom] ? this.denomTrace[t.token.denom].base_denom : ' ')
-            }
-            return t.token.denom
-          }),
+          pair,
+          price: this.getPrice(pair),
+          change: this.getChanges(pair),
         }
-        return x2
       })
       return pairs
     },
     latestPrice() {
-      const p1 = this.$store.state.chains.quotes[this.base]
-      const p2 = this.$store.state.chains.quotes[this.target]
-      return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
+      return this.getPrice([this.base, this.target])
     },
     changesIn24H() {
-      const p1 = this.$store.state.chains.quotes[this.base]
-      const p2 = this.$store.state.chains.quotes[this.target]
-      return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-'
+      return this.getChanges([this.base, this.target])
     },
   },
   created() {
@@ -173,6 +173,16 @@ export default {
     // }
   },
   methods: {
+    getPrice(symbol) {
+      const p1 = this.$store.state.chains.quotes[symbol[0]]
+      const p2 = this.$store.state.chains.quotes[symbol[1]]
+      return p1 && p2 ? (p1.usd / p2.usd).toFixed(4) : '-'
+    },
+    getChanges(symbol) {
+      const p1 = this.$store.state.chains.quotes[symbol[0]]
+      const p2 = this.$store.state.chains.quotes[symbol[1]]
+      return p1 && p2 ? (p1.usd_24h_change / p2.usd_24h_change).toFixed(2) : '-'
+    },
     init(poolid) {
       this.current = this.pools.find(p => p.id === poolid) || this.pools[0]
     },
diff --git a/src/views/components/KlineTrade/DepositeWindow.vue b/src/views/components/KlineTrade/DepositeWindow.vue
index 437b8eaf..dd16ad24 100644
--- a/src/views/components/KlineTrade/DepositeWindow.vue
+++ b/src/views/components/KlineTrade/DepositeWindow.vue
@@ -12,277 +12,279 @@
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
-    ><b-overlay
-      :show="channels.length === 0"
-      rounded="sm"
     >
-      <template #overlay>
-        <div class="text-center">
-          <p>
-            IBC Module is not enabled.
-          </p>
-        </div>
-      </template>
-      <validation-observer ref="simpleRules">
-        <b-form>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Sender"
-                label-for="Account"
-              >
-                <b-input-group class="mb-25">
-                  <b-input-group-prepend is-text>
-                    <b-avatar
-                      :src="account?account.logo:''"
-                      size="18"
-                      variant="light-primary"
-                      rounded
-                    />
-                  </b-input-group-prepend>
-                  <b-form-input
-                    :value="account?account.addr:address"
-                    readonly
-                  />
-                </b-input-group>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Available Token"
-                label-for="Token"
-              >
-                <validation-provider
-                  #default="{ errors }"
-                  rules="required"
-                  name="Token"
-                >
-                  <b-form-select
-                    v-model="token"
-                    @change="tokenChange"
-                  >
-                    <template #first>
-                      <b-form-select-option
-                        value=""
-                      >
-                        -- Please select a token --
-                      </b-form-select-option>
-                    </template>
-                    <b-form-select-option
-                      v-for="item in balance"
-                      :key="item.denom"
-                      :value="item.denom"
-                    >
-                      {{ format(item) }}
-                    </b-form-select-option>
-                  </b-form-select>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Amount"
-                label-for="Amount"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required|regex:^([0-9\.]+)$"
-                  name="amount"
+      <template #modal-header="" />
+      <b-overlay
+        :show="channels.length === 0"
+        rounded="sm"
+      >
+        <template #overlay>
+          <div class="text-center">
+            <p>
+              IBC Module is not enabled.
+            </p>
+          </div>
+        </template>
+        <validation-observer ref="simpleRules">
+          <b-form>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Sender"
+                  label-for="Account"
                 >
                   <b-input-group class="mb-25">
+                    <b-input-group-prepend is-text>
+                      <b-avatar
+                        :src="account?account.logo:''"
+                        size="18"
+                        variant="light-primary"
+                        rounded
+                      />
+                    </b-input-group-prepend>
                     <b-form-input
-                      id="Amount"
-                      v-model="amount"
-                      :state="errors.length > 0 ? false:null"
-                      placeholder="Input a number"
+                      :value="account?account.addr:address"
+                      readonly
+                    />
+                  </b-input-group>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Available Token"
+                  label-for="Token"
+                >
+                  <validation-provider
+                    #default="{ errors }"
+                    rules="required"
+                    name="Token"
+                  >
+                    <b-form-select
+                      v-model="token"
+                      @change="tokenChange"
+                    >
+                      <template #first>
+                        <b-form-select-option
+                          value=""
+                        >
+                          -- Please select a token --
+                        </b-form-select-option>
+                      </template>
+                      <b-form-select-option
+                        v-for="item in balance"
+                        :key="item.denom"
+                        :value="item.denom"
+                      >
+                        {{ format(item) }}
+                      </b-form-select-option>
+                    </b-form-select>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Amount"
+                  label-for="Amount"
+                >
+                  <validation-provider
+                    v-slot="{ errors }"
+                    rules="required|regex:^([0-9\.]+)$"
+                    name="amount"
+                  >
+                    <b-input-group class="mb-25">
+                      <b-form-input
+                        id="Amount"
+                        v-model="amount"
+                        :state="errors.length > 0 ? false:null"
+                        placeholder="Input a number"
+                        type="number"
+                      />
+                      <b-input-group-append is-text>
+                        {{ printDenom() }}
+                      </b-input-group-append>
+                    </b-input-group>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Destination"
+                  label-for="destination"
+                >
+                  <validation-provider
+                    #default="{ errors }"
+                    rules="required"
+                    name="destination"
+                  >
+                    <v-select
+                      v-model="destination"
+                      name="destination"
+                      :options="destinationOptions"
+                      placeholder="Select a channel"
+                    />
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Recipient"
+                  label-for="Recipient"
+                >
+                  <validation-provider
+                    #default="{ errors }"
+                    rules="required"
+                    name="recipient"
+                  >
+                    <b-input-group class="mb-25">
+                      <b-form-input
+                        id="Recipient"
+                        v-model="recipient"
+                        :state="errors.length > 0 ? false:null"
+                        :placeholder="placeholder"
+                      />
+                    </b-input-group>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Fee"
+                  label-for="Fee"
+                >
+                  <validation-provider
+                    v-slot="{ errors }"
+                    rules="required|integer"
+                    name="fee"
+                  >
+                    <b-input-group>
+                      <b-form-input v-model="fee" />
+                      <b-input-group-append>
+                        <b-form-select
+                          v-model="feeDenom"
+                          :options="feeDenoms"
+                          value-field="denom"
+                          text-field="denom"
+                        />
+                      </b-input-group-append>
+                    </b-input-group>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+              <b-col cols="12">
+                <b-form-group>
+                  <b-form-checkbox
+                    v-model="advance"
+                    name="advance"
+                    value="true"
+                  >
+                    <small>Advance</small>
+                  </b-form-checkbox>
+                </b-form-group>
+              </b-col>
+            </b-row>
+            <b-row v-if="advance">
+              <b-col cols="12">
+                <b-form-group
+                  label="Gas"
+                  label-for="gas"
+                >
+                  <validation-provider
+                    v-slot="{ errors }"
+                    name="gas"
+                  >
+                    <b-form-input
+                      id="gas"
+                      v-model="gas"
                       type="number"
                     />
-                    <b-input-group-append is-text>
-                      {{ printDenom() }}
-                    </b-input-group-append>
-                  </b-input-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Destination"
-                label-for="destination"
-              >
-                <validation-provider
-                  #default="{ errors }"
-                  rules="required"
-                  name="destination"
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+              <b-col cols="12">
+                <b-form-group
+                  label="Memo"
+                  label-for="Memo"
                 >
-                  <v-select
-                    v-model="destination"
-                    name="destination"
-                    :options="destinationOptions"
-                    placeholder="Select a channel"
-                  />
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Recipient"
-                label-for="Recipient"
-              >
-                <validation-provider
-                  #default="{ errors }"
-                  rules="required"
-                  name="recipient"
-                >
-                  <b-input-group class="mb-25">
-                    <b-form-input
-                      id="Recipient"
-                      v-model="recipient"
-                      :state="errors.length > 0 ? false:null"
-                      :placeholder="placeholder"
-                    />
-                  </b-input-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Fee"
-                label-for="Fee"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required|integer"
-                  name="fee"
-                >
-                  <b-input-group>
-                    <b-form-input v-model="fee" />
-                    <b-input-group-append>
-                      <b-form-select
-                        v-model="feeDenom"
-                        :options="feeDenoms"
-                        value-field="denom"
-                        text-field="denom"
-                      />
-                    </b-input-group-append>
-                  </b-input-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-            <b-col cols="12">
-              <b-form-group>
-                <b-form-checkbox
-                  v-model="advance"
-                  name="advance"
-                  value="true"
-                >
-                  <small>Advance</small>
-                </b-form-checkbox>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row v-if="advance">
-            <b-col cols="12">
-              <b-form-group
-                label="Gas"
-                label-for="gas"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  name="gas"
-                >
-                  <b-form-input
-                    id="gas"
-                    v-model="gas"
-                    type="number"
-                  />
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-            <b-col cols="12">
-              <b-form-group
-                label="Memo"
-                label-for="Memo"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  name="memo"
-                >
-                  <b-form-input
-                    id="Memo"
-                    v-model="memo"
-                    max="2"
-                  />
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-
-          <b-row>
-            <b-col>
-              <b-form-group
-                label="Wallet"
-                label-for="wallet"
-              >
-                <validation-provider
-                  v-slot="{ errors }"
-                  rules="required"
-                  name="wallet"
-                >
-                  <b-form-radio-group
-                    v-model="wallet"
-                    stacked
-                    class="demo-inline-spacing"
+                  <validation-provider
+                    v-slot="{ errors }"
+                    name="memo"
                   >
-                    <b-form-radio
+                    <b-form-input
+                      id="Memo"
+                      v-model="memo"
+                      max="2"
+                    />
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+
+            <b-row>
+              <b-col>
+                <b-form-group
+                  label="Wallet"
+                  label-for="wallet"
+                >
+                  <validation-provider
+                    v-slot="{ errors }"
+                    rules="required"
+                    name="wallet"
+                  >
+                    <b-form-radio-group
                       v-model="wallet"
-                      name="wallet"
-                      value="keplr"
-                      class="d-none d-md-block"
+                      stacked
+                      class="demo-inline-spacing"
                     >
-                      Keplr
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerUSB"
-                    >
-                      <small>Ledger(USB)</small>
-                    </b-form-radio>
-                    <b-form-radio
-                      v-model="wallet"
-                      name="wallet"
-                      value="ledgerBle"
-                      class="mr-0"
-                    >
-                      <small>Ledger(Bluetooth)</small>
-                    </b-form-radio>
-                  </b-form-radio-group>
-                  <small class="text-danger">{{ errors[0] }}</small>
-                </validation-provider>
-              </b-form-group>
-            </b-col>
-          </b-row>
-        </b-form>
-      </validation-observer>
-      {{ error }}
-    </b-overlay></b-modal>
+                      <b-form-radio
+                        v-model="wallet"
+                        name="wallet"
+                        value="keplr"
+                        class="d-none d-md-block"
+                      >
+                        Keplr
+                      </b-form-radio>
+                      <b-form-radio
+                        v-model="wallet"
+                        name="wallet"
+                        value="ledgerUSB"
+                      >
+                        <small>Ledger(USB)</small>
+                      </b-form-radio>
+                      <b-form-radio
+                        v-model="wallet"
+                        name="wallet"
+                        value="ledgerBle"
+                        class="mr-0"
+                      >
+                        <small>Ledger(Bluetooth)</small>
+                      </b-form-radio>
+                    </b-form-radio-group>
+                    <small class="text-danger">{{ errors[0] }}</small>
+                  </validation-provider>
+                </b-form-group>
+              </b-col>
+            </b-row>
+          </b-form>
+        </validation-observer>
+        {{ error }}
+      </b-overlay></b-modal>
   </div>
 </template>