diff --git a/src/components/DexTradesTable.vue b/src/components/DexTradesTable.vue
index 1085b925d..d942f7ba4 100644
--- a/src/components/DexTradesTable.vue
+++ b/src/components/DexTradesTable.vue
@@ -1,13 +1,49 @@
 <template>
-  <table>
-    <!--    todo hints-->
-    <!--    todo mobile view-->
-    <!--    todo test-->
-    <!--    todo naming-->
+  <table class="dex-trades-table">
     <tr>
-      <th>Hash</th>
+      <th>
+        Hash
+        <hint-tooltip>
+          {{ dexTradesHints.hash }}
+        </hint-tooltip>
+      </th>
       <th>
         <time-toggle-button>Executed</time-toggle-button>
+        <hint-tooltip>
+          {{ dexTradesHints.executed }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Action
+        <hint-tooltip>
+          {{ dexTradesHints.action }}
+        </hint-tooltip>
+      </th>
+
+      <th>
+        Token Amount (Out)
+        <hint-tooltip>
+          {{ dexTradesHints.tokenAmountOut }}
+        </hint-tooltip>
+      </th>
+
+      <th>
+        Token Amount (In)
+        <hint-tooltip>
+          {{ dexTradesHints.tokenAmountIn }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Swapped Rate
+        <hint-tooltip>
+          {{ dexTradesHints.swappedRate }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Value
+        <hint-tooltip>
+          {{ dexTradesHints.value }}
+        </hint-tooltip>
       </th>
       <th>Action</th>
       <th>Token Amount (In)</th>
@@ -37,35 +73,41 @@
           {{ trade.action }}
         </app-chip>
       </td>
-
       <td>
-        {{ formatNumber(trade.fromAmount) }}
-        <app-link
-          :to="`/tokens/${trade.fromContract}`">
-          {{ trade.fromToken }}
-        </app-link>
+        <price-label
+          :contract-id="trade.fromContract"
+          :currency="trade.fromToken"
+          :price="trade.fromAmount"
+          :max-digits="4"
+          :has-link="true"/>
+      </td>
+      <td>
+        <price-label
+          :contract-id="trade.toContract"
+          :currency="trade.toToken"
+          :price="trade.toAmount"
+          :max-digits="4"
+          :has-link="true"/>
       </td>
       <td>
-        <transaction-arrow-right-icon/>
+        <not-available-label v-if="!trade.rate"/>
+        {{ trade.rate }}
       </td>
       <td>
-        {{ formatNumber(trade.toAmount) }}
-        <app-link
-          :to="`tokens/${trade.toContract}`">
-          {{ trade.toToken }}
-        </app-link>
+        <not-available-label v-if="trade.value === '0'"/>
+        <template v-else>
+          $ {{ trade.value }}
+        </template>
       </td>
-      <td>{{ trade.rate }}</td>
-      <td>$ {{ trade.value }}</td>
     </tr>
   </table>
 </template>
 
 <script setup>
-
+import { dexTradesHints } from "@/utils/hints/dexTradesHints";
 defineProps({
   trades: {
-    type: Array,
+    type: Object,
     required: true,
   },
 })
diff --git a/src/components/DexTradesTableCondensed.vue b/src/components/DexTradesTableCondensed.vue
new file mode 100644
index 000000000..9c8aaf958
--- /dev/null
+++ b/src/components/DexTradesTableCondensed.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <table
+      v-for="trade in trades.data"
+      :key="trade.txHash"
+      class="dex-trades-table-condensed__table">
+      <tbody>
+        <tr class="dex-trades-table-condensed__row">
+          <th class="dex-trades-table-condensed__header">
+            <app-tooltip>
+              Hash
+              <template #tooltip>
+                {{ dexTradesHints.hash }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="dex-trades-table-condensed__data">
+            <value-hash-ellipsed
+              :link-to="`/transactions/${trade.txHash}`"
+              :hash="trade.txHash"/>
+          </td>
+        </tr>
+
+        <tr class="dex-trades-table-condensed__row">
+          <th class="dex-trades-table-condensed__header">
+            <app-tooltip>
+              <time-toggle-button>Executed</time-toggle-button>
+              <template #tooltip>
+                {{ dexTradesHints.executed }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="dex-trades-table-condensed__data">
+            <block-time-cell
+              :height="trade.height"
+              :timestamp="trade.timestamp"/>
+          </td>
+        </tr>
+        <tr class="dex-trades-table-condensed__row">
+          <th class="dex-trades-table-condensed__header">
+            <app-tooltip>
+              Action
+              <template #tooltip>
+                {{ dexTradesHints.action }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="dex-trades-table-condensed__data">
+            <app-chip :variant="getChipVariant(trade.action)">
+              {{ trade.action }}
+            </app-chip>
+          </td>
+        </tr>
+        <tr class="dex-trades-table-condensed__row">
+          <th class="dex-trades-table-condensed__header">
+            <app-tooltip>
+              Token Amount (Out)
+              <template #tooltip>
+                {{ dexTradesHints.tokenAmountOut }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="dex-trades-table-condensed__data">
+            <price-label
+              :contract-id="trade.fromContract"
+              :currency="trade.fromToken"
+              :price="trade.fromAmount"
+              :max-digits="4"
+              :has-link="true"/>
+          </td>
+        </tr>
+        <tr class="dex-trades-table-condensed__row">
+          <th class="dex-trades-table-condensed__header">
+            <app-tooltip>
+              Token Amount (In)
+              <template #tooltip>
+                {{ dexTradesHints.tokenAmountIn }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="dex-trades-table-condensed__data">
+            <price-label
+              :contract-id="trade.toContract"
+              :currency="trade.toToken"
+              :price="trade.toAmount"
+              :max-digits="4"
+              :has-link="true"/>
+          </td>
+        </tr>
+        <tr class="dex-trades-table-condensed__row">
+          <th class="dex-trades-table-condensed__header">
+            <app-tooltip>
+              Swapped Rate
+              <template #tooltip>
+                {{ dexTradesHints.swappedRate }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="dex-trades-table-condensed__data">
+            <not-available-label v-if="!trade.rate"/>
+            {{ trade.rate }}
+          </td>
+        </tr>
+        <tr class="dex-trades-table-condensed__row">
+          <th class="dex-trades-table-condensed__header">
+            <app-tooltip>
+              Value
+              <template #tooltip>
+                {{ dexTradesHints.value }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="dex-trades-table-condensed__data">
+            <not-available-label v-if="trade.value === '0'"/>
+            <template v-else>
+              $ {{ trade.value }}
+            </template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script setup>
+import { dexTradesHints } from '@/utils/hints/dexTradesHints'
+
+defineProps({
+  trades: {
+    type: Object,
+    required: true,
+  },
+})
+
+function getChipVariant(action) {
+  const variants = {
+    BUY: 'error',
+    SELL: 'success',
+    SWAP: 'primary',
+  }
+  return variants[action]
+}
+</script>
+
+<style scoped>
+.dex-trades-table-condensed {
+  &__table {
+    padding: 0 var(--space-1) var(--space-7);
+    margin-bottom: var(--space-5);
+  }
+
+  &__header {
+    border-bottom: 1px solid var(--color-midnight-25);
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/components/TokenTradesPanel.vue b/src/components/TokenTradesPanel.vue
index 700af7c9e..6edd4ace0 100644
--- a/src/components/TokenTradesPanel.vue
+++ b/src/components/TokenTradesPanel.vue
@@ -1,159 +1,40 @@
 <template>
-
-
-  <!--    <paginated-content-->
-  <!--      :entities="tokenEvents"-->
-  <!--      pagination-style="history"-->
-  <!--      :total-count="tokenEventsCount"-->
-  <!--      @prev-clicked="loadPrevEvents"-->
-  <!--      @next-clicked="loadNextEvents">-->
-  <!--      <token-events-table-->
-  <!--        v-if="tokenEvents"-->
-  <!--        :token-events="tokenEvents"-->
-  <!--        class="token-events-panel__table u-hidden-mobile"/>-->
-  <!--      <token-events-table-condensed-->
-  <!--        v-if="tokenEvents"-->
-  <!--        :token-events="tokenEvents"-->
-  <!--        class="u-hidden-desktop"/>-->
-  <!--    </paginated-content>-->
-
-
-  <table class="dex-trades-table">
-    <tr>
-      <th>
-        Hash
-        <hint-tooltip>
-          {{ dexTradesHints.hash }}
-        </hint-tooltip>
-      </th>
-      <th>
-        <time-toggle-button>Executed</time-toggle-button>
-        <hint-tooltip>
-          {{ dexTradesHints.executed }}
-        </hint-tooltip>
-      </th>
-      <th>
-        Action
-        <hint-tooltip>
-          {{ dexTradesHints.action }}
-        </hint-tooltip>
-      </th>
-
-      <th>
-        Token Amount (Out)
-        <hint-tooltip>
-          {{ dexTradesHints.tokenAmountOut }}
-        </hint-tooltip>
-      </th>
-
-      <th>
-        Token Amount (In)
-        <hint-tooltip>
-          {{ dexTradesHints.tokenAmountIn }}
-        </hint-tooltip>
-      </th>
-      <th>
-        Swapped Rate
-        <hint-tooltip>
-          {{ dexTradesHints.swappedRate }}
-        </hint-tooltip>
-      </th>
-      <th>
-        Value
-        <hint-tooltip>
-          {{ dexTradesHints.value }}
-        </hint-tooltip>
-      </th>
-    </tr>
-
-    <tr
-      v-for="trade in trades.data"
-      :key="trade.txHash">
-      <td>
-        <value-hash-ellipsed
-          :link-to="`/transactions/${trade.txHash}`"
-          :hash="trade.txHash"/>
-      </td>
-      <td>
-        <block-time-cell
-          :height="trade.height"
-          :timestamp="trade.timestamp"/>
-      </td>
-      <td>
-        <app-chip :variant="getChipVariant(trade.action)">
-          {{ trade.action }}
-        </app-chip>
-      </td>
-      <td>
-        <price-label
-          :contract-id="trade.fromContract"
-          :currency="trade.fromToken"
-          :price="trade.fromAmount"
-          :max-digits="4"
-          :has-link="true"/>
-      </td>
-      <td>
-        <price-label
-          :contract-id="trade.toContract"
-          :currency="trade.toToken"
-          :price="trade.toAmount"
-          :max-digits="4"
-          :has-link="true"/>
-      </td>
-      <td>
-        <not-available-label v-if="!trade.rate"/>
-        {{ trade.rate }}
-      </td>
-      <td>
-        <not-available-label v-if="trade.value === '0'"/>
-        <template v-else>
-          $ {{ trade.value }}
-        </template>
-      </td>
-    </tr>
-  </table>
-
-
-  {{ trades }}
+  <app-panel>
+    <paginated-content
+      :entities="trades"
+      pagination-style="history"
+      @prev-clicked="loadPrevEvents"
+      @next-clicked="loadNextEvents">
+      <dex-trades-table
+        :trades="trades"
+        class="u-hidden-mobile"/>
+      <dex-trades-table-condensed
+        :trades="trades"
+        class="u-hidden-desktop"/>
+    </paginated-content>
+  </app-panel>
 </template>
-
 <script setup>
-import { storeToRefs } from 'pinia'
-import { useTokenDetailsStore } from '@/stores/tokenDetails'
 
-const { trades } = storeToRefs(useTokenDetailsStore())
-const { fetchTokenTrades } = useTokenDetailsStore()
+const tokenDetailsStore = useTokenDetailsStore()
+const { trades } = storeToRefs(tokenDetailsStore)
+const { fetchTokenTrades } = tokenDetailsStore
 const route = useRoute()
-//
-// function loadPrevEvents() {
-//   fetchTokenEvents({ queryParameters: tokenEvents.value.prev })
-// }
-//
-// function loadNextEvents() {
-//   fetchTokenEvents({ queryParameters: tokenEvents.value.next })
-// }
 
 
-function getChipVariant(action) {
-  const variants = {
-    BUY: 'error',
-    SELL: 'success',
-    SWAP: 'primary',
-  }
-  return variants[action]
+function loadPrevEvents() {
+  fetchTokenTrades({ queryParameters: trades.value.prev })
+}
+
+function loadNextEvents() {
+  fetchTokenTrades({ queryParameters: trades.value.next })
 }
 
 if (process.client) {
   const limit = computed(() => isDesktop() ? 10 : 3)
   await fetchTokenTrades({
-    limit: limit.value,
     contractId: route.params.id,
+    limit: limit.value,
   })
 }
 </script>
-
-<style scoped>
-.token-events-panel__table {
-  margin-bottom: var(--space-4);
-}
-</style>