diff --git a/src/components/pages/OrderBook/BookWidget.vue b/src/components/pages/OrderBook/BookWidget.vue
index ae506e942..9f929cf9b 100644
--- a/src/components/pages/OrderBook/BookWidget.vue
+++ b/src/components/pages/OrderBook/BookWidget.vue
@@ -1,11 +1,12 @@
 <template>
   <base-widget
+    extensive
     v-loading="loading"
     class="stock-book book"
     :title="t('orderBook.orderBook')"
     :tooltip="t('orderBook.tooltip.bookWidget')"
   >
-    <template #title-append>
+    <template #filters>
       <s-dropdown
         v-if="false"
         class="stock-book__switcher"
diff --git a/src/components/pages/OrderBook/HistoryOrderWidget.vue b/src/components/pages/OrderBook/HistoryOrderWidget.vue
index 9a53be5c1..fa8a65265 100644
--- a/src/components/pages/OrderBook/HistoryOrderWidget.vue
+++ b/src/components/pages/OrderBook/HistoryOrderWidget.vue
@@ -1,50 +1,42 @@
 <template>
-  <base-widget class="order-history-widget s-flex-column">
+  <base-widget class="order-history-widget s-flex-column" extensive delimeter>
     <template #title>
-      <div class="order-history-header">
-        <div class="order-history-header-filter-buttons">
-          <span
-            class="order-history-filter"
-            :class="{ 'order-history-filter--active': currentFilter === Filter.open }"
-            @click="switchFilter(Filter.open)"
-          >
-            {{ openOrdersText }}
-          </span>
-          <span
-            class="order-history-filter"
-            :class="{ 'order-history-filter--active': currentFilter === Filter.all }"
-            @click="switchFilter(Filter.all)"
-          >
-            {{ t('orderBook.history.orderHistory') }}
-          </span>
-          <span
-            class="order-history-filter"
-            :class="{ 'order-history-filter--active': currentFilter === Filter.executed }"
-            @click="switchFilter(Filter.executed)"
-          >
-            {{ t('orderBook.history.tradeHistory') }}
-          </span>
-        </div>
-        <div v-if="isLoggedIn" class="order-history-header-cancel-buttons">
-          <span
-            class="order-history-cancel"
-            :class="{ 'order-history-cancel--inactive': isCancelMultipleInactive }"
-            @click="handleCancel(Cancel.multiple)"
-          >
-            {{ cancelText }}
-          </span>
-          <span
-            class="order-history-cancel"
-            :class="{ 'order-history-cancel--inactive': isCancelAllInactive }"
-            @click="openConfirmCancelDialog"
-          >
-            {{ cancelAllText }}
-          </span>
-        </div>
+      <div class="order-history-buttons order-history-buttons--filter-buttons">
+        <span
+          :class="['order-history-button', { active: currentFilter === Filter.open }]"
+          @click="switchFilter(Filter.open)"
+        >
+          {{ openOrdersText }}
+        </span>
+        <span
+          :class="['order-history-button', { active: currentFilter === Filter.all }]"
+          @click="switchFilter(Filter.all)"
+        >
+          {{ t('orderBook.history.orderHistory') }}
+        </span>
+        <span
+          :class="['order-history-button', { active: currentFilter === Filter.executed }]"
+          @click="switchFilter(Filter.executed)"
+        >
+          {{ t('orderBook.history.tradeHistory') }}
+        </span>
+      </div>
+      <div v-if="isLoggedIn" class="order-history-buttons order-history-buttons--cancel-buttons">
+        <span
+          :class="['order-history-button', 'order-history-button--cancel', { inactive: isCancelMultipleInactive }]"
+          @click="handleCancel(Cancel.multiple)"
+        >
+          {{ cancelText }}
+        </span>
+        <span
+          :class="['order-history-button', 'order-history-button--cancel', { inactive: isCancelAllInactive }]"
+          @click="openConfirmCancelDialog"
+        >
+          {{ cancelAllText }}
+        </span>
       </div>
     </template>
 
-    <div class="delimiter" />
     <div class="order-history-main s-flex-column" v-if="isLoggedIn">
       <open-orders v-if="currentFilter === Filter.open" :parent-loading="openOrdersLoading" />
       <all-orders v-else :filter="currentFilter" />
@@ -218,54 +210,35 @@ export default class OrderHistoryWidget extends Mixins(TranslationMixin, mixins.
 
 <style lang="scss" scoped>
 .order-history {
-  &-header {
+  &-buttons {
     display: flex;
-    flex: 1;
-    justify-content: space-between;
-    padding: $inner-spacing-medium 0 $inner-spacing-mini;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    justify-content: flex-end;
+    gap: $inner-spacing-tiny $inner-spacing-medium;
+
     color: var(--s-color-base-content-secondary);
-    font-size: $basic-spacing;
-    font-weight: 500;
-    &-cancel-buttons {
-      display: flex;
-      flex-wrap: wrap;
-      align-content: flex-start;
-      justify-content: flex-end;
+
+    &--cancel-buttons {
       flex: 1;
     }
-    &-filter-buttons {
-      display: flex;
-      flex-wrap: wrap;
-      align-content: flex-start;
-      justify-content: flex-start;
-    }
   }
 
-  &-filter {
-    margin-right: $basic-spacing;
-    line-height: 1.5;
-
-    &:hover {
-      cursor: pointer;
+  &-button {
+    &--cancel {
       color: var(--s-color-theme-accent);
     }
 
-    &--active {
+    &:hover {
+      cursor: pointer;
       color: var(--s-color-theme-accent);
     }
-  }
-
-  &-cancel {
-    color: var(--s-color-theme-accent);
-    margin-left: $basic-spacing;
-    line-height: 1.5;
 
-    &:hover {
-      cursor: pointer;
+    &.active {
       color: var(--s-color-theme-accent);
     }
 
-    &--inactive {
+    &.inactive {
       opacity: 0.5;
 
       &:hover {
@@ -298,11 +271,4 @@ export default class OrderHistoryWidget extends Mixins(TranslationMixin, mixins.
     }
   }
 }
-
-.delimiter {
-  background: var(--s-color-base-border-secondary);
-  margin: $inner-spacing-mini 0;
-  height: 1px;
-  width: 100%;
-}
 </style>
diff --git a/src/components/pages/OrderBook/MarketTradesWidget.vue b/src/components/pages/OrderBook/MarketTradesWidget.vue
index 7708f9113..044d3baf4 100644
--- a/src/components/pages/OrderBook/MarketTradesWidget.vue
+++ b/src/components/pages/OrderBook/MarketTradesWidget.vue
@@ -1,5 +1,6 @@
 <template>
   <base-widget
+    extensive
     class="market-trades"
     :title="t('orderBook.marketTrades')"
     :tooltip="t('orderBook.tooltip.marketWidget')"
diff --git a/src/components/pages/OrderBook/SetLimitOrderWidget.vue b/src/components/pages/OrderBook/SetLimitOrderWidget.vue
index 62f6c39f3..2ab82a63e 100644
--- a/src/components/pages/OrderBook/SetLimitOrderWidget.vue
+++ b/src/components/pages/OrderBook/SetLimitOrderWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget v-loading="loadingState">
+  <base-widget extensive v-loading="loadingState">
     <div class="order-book-tabs">
       <s-tabs :value="currentTab" type="card" @input="handleChangeTab">
         <s-tab
diff --git a/src/components/pages/Stats/BarChart.vue b/src/components/pages/Stats/BarChart.vue
index 9df2d57f3..766ac02be 100644
--- a/src/components/pages/Stats/BarChart.vue
+++ b/src/components/pages/Stats/BarChart.vue
@@ -1,12 +1,5 @@
 <template>
-  <stats-card>
-    <template #title>
-      <span>{{ title }}</span>
-      <s-tooltip border-radius="mini" :content="tooltip">
-        <s-icon name="info-16" size="14px" />
-      </s-tooltip>
-    </template>
-
+  <base-widget :title="title" :tooltip="tooltip">
     <template #filters>
       <stats-filter :filters="filters" :value="filter" @input="changeFilter" />
     </template>
@@ -25,7 +18,7 @@
       <price-change :value="priceChange" />
       <v-chart ref="chart" class="chart" :option="chartSpec" autoresize />
     </chart-skeleton>
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -76,9 +69,9 @@ const normalizeTo = (sample: ChartData[], difference: number, from: number, to:
 
 @Component({
   components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
     ChartSkeleton: lazyComponent(Components.ChartSkeleton),
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
     StatsFilter: lazyComponent(Components.StatsFilter),
     FormattedAmount: components.FormattedAmount,
     TokenLogo: components.TokenLogo,
diff --git a/src/components/pages/Stats/NetworkStats.vue b/src/components/pages/Stats/NetworkStats.vue
index 26ebd4f2b..5ef9fef58 100644
--- a/src/components/pages/Stats/NetworkStats.vue
+++ b/src/components/pages/Stats/NetworkStats.vue
@@ -1,7 +1,5 @@
 <template>
-  <stats-card>
-    <template #title>{{ t('networkStatisticsText') }}</template>
-
+  <base-widget :title="t('networkStatisticsText')">
     <template #filters>
       <stats-filter :disabled="loading" :filters="filters" :value="filter" @input="changeFilter" />
     </template>
@@ -34,7 +32,7 @@
         </s-card>
       </div>
     </div>
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -72,7 +70,7 @@ type NetworkStatsColumn = {
 @Component({
   components: {
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
+    BaseWidget: lazyComponent(Components.BaseWidget),
     StatsFilter: lazyComponent(Components.StatsFilter),
     FormattedAmount: components.FormattedAmount,
   },
@@ -181,7 +179,6 @@ $gap: $inner-spacing-mini;
   display: flex;
   flex-flow: row wrap;
   gap: $gap;
-  margin-top: $inner-spacing-mini * 2.5;
 
   .stats-column {
     @include columns(2, $gap);
diff --git a/src/components/pages/Stats/SupplyChart.vue b/src/components/pages/Stats/SupplyChart.vue
index 4deb073c9..3bcea4290 100644
--- a/src/components/pages/Stats/SupplyChart.vue
+++ b/src/components/pages/Stats/SupplyChart.vue
@@ -1,12 +1,5 @@
 <template>
-  <stats-card>
-    <template #title>
-      <span>Supply</span>
-      <s-tooltip border-radius="mini" :content="t('tooltips.supply')">
-        <s-icon name="info-16" size="14px" />
-      </s-tooltip>
-    </template>
-
+  <base-widget title="Supply" :tooltip="t('tooltips.supply')">
     <template #filters>
       <stats-filter :filters="filters" :value="filter" @input="changeFilter" />
     </template>
@@ -33,7 +26,7 @@
       <v-chart ref="chart" class="chart" :option="chartSpec" autoresize />
     </chart-skeleton>
     <select-token :visible.sync="showSelectTokenDialog" :asset="token" @select="changeToken" />
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -70,7 +63,7 @@ const getExtremum = (data: readonly ChartData[], prop: string, min = false) => {
   components: {
     ChartSkeleton: lazyComponent(Components.ChartSkeleton),
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
+    BaseWidget: lazyComponent(Components.BaseWidget),
     StatsFilter: lazyComponent(Components.StatsFilter),
     TokenSelectButton: lazyComponent(Components.TokenSelectButton),
     SelectToken: lazyComponent(Components.SelectToken),
diff --git a/src/components/pages/Stats/TvlChart.vue b/src/components/pages/Stats/TvlChart.vue
index bc68473f7..f221d5e6d 100644
--- a/src/components/pages/Stats/TvlChart.vue
+++ b/src/components/pages/Stats/TvlChart.vue
@@ -1,12 +1,5 @@
 <template>
-  <stats-card>
-    <template #title>
-      <span>{{ TranslationConsts.TVL }}</span>
-      <s-tooltip border-radius="mini" :content="t('tooltips.tvl')">
-        <s-icon name="info-16" size="14px" />
-      </s-tooltip>
-    </template>
-
+  <base-widget :title="TranslationConsts.TVL" :tooltip="t('tooltips.tvl')">
     <template #filters>
       <stats-filter :filters="filters" :value="filter" @input="changeFilter" />
     </template>
@@ -24,7 +17,7 @@
       <price-change :value="priceChange" />
       <v-chart ref="chart" class="chart" :option="chartSpec" autoresize />
     </chart-skeleton>
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -46,9 +39,9 @@ import { calcPriceChange, formatAmountWithSuffix, formatDecimalPlaces } from '@/
 
 @Component({
   components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
     ChartSkeleton: lazyComponent(Components.ChartSkeleton),
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
     StatsFilter: lazyComponent(Components.StatsFilter),
     FormattedAmount: components.FormattedAmount,
   },
diff --git a/src/components/pages/Swap/Chart.vue b/src/components/pages/Swap/Chart.vue
index 1e22b45a3..df8aafb1a 100644
--- a/src/components/pages/Swap/Chart.vue
+++ b/src/components/pages/Swap/Chart.vue
@@ -1,5 +1,5 @@
 <template>
-  <stats-card v-loading="parentLoading">
+  <base-widget v-loading="parentLoading">
     <template #title>
       <tokens-row border :assets="tokens" size="medium" />
       <div v-if="tokenA" class="token-title">
@@ -56,7 +56,7 @@
         @datazoom="changeZoomLevel"
       />
     </chart-skeleton>
-  </stats-card>
+  </base-widget>
 </template>
 
 <script lang="ts">
@@ -254,10 +254,10 @@ const getPrecision = (value: number): number => {
   components: {
     TokenLogo: components.TokenLogo,
     FormattedAmount: components.FormattedAmount,
+    BaseWidget: lazyComponent(Components.BaseWidget),
     SvgIconButton: lazyComponent(Components.SvgIconButton),
     TokensRow: lazyComponent(Components.TokensRow),
     PriceChange: lazyComponent(Components.PriceChange),
-    StatsCard: lazyComponent(Components.StatsCard),
     StatsFilter: lazyComponent(Components.StatsFilter),
     ChartSkeleton: lazyComponent(Components.ChartSkeleton),
   },
diff --git a/src/components/pages/Swap/Transactions.vue b/src/components/pages/Swap/Transactions.vue
new file mode 100644
index 000000000..6dfc6612b
--- /dev/null
+++ b/src/components/pages/Swap/Transactions.vue
@@ -0,0 +1,22 @@
+<template>
+  <base-widget title="All trades" tooltip="Some text"> </base-widget>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+
+@Component({
+  components: {
+    BaseWidget: lazyComponent(Components.BaseWidget),
+  },
+})
+export default class SwapTransactions extends Vue {
+  @Prop({ default: () => null, type: Object }) readonly baseAsset!: Nullable<AccountAsset>;
+  @Prop({ default: () => null, type: Object }) readonly quoteAsset!: Nullable<AccountAsset>;
+}
+</script>
diff --git a/src/components/shared/Stats/StatsCard.vue b/src/components/shared/Stats/StatsCard.vue
deleted file mode 100644
index bb3b0cf13..000000000
--- a/src/components/shared/Stats/StatsCard.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <s-card class="stats-card" border-radius="small" shadow="always" size="big" primary>
-    <div class="stats-card-header">
-      <div class="s-flex stats-card-title header-title">
-        <slot name="title" />
-      </div>
-      <div v-if="$slots.filters" class="s-flex stats-card-filters">
-        <slot name="filters" />
-      </div>
-      <div v-if="$slots.types" class="s-flex stats-card-types">
-        <slot name="types" />
-      </div>
-    </div>
-
-    <slot />
-  </s-card>
-</template>
-
-<script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
-
-@Component
-export default class StatsCard extends Mixins() {}
-</script>
-
-<style lang="scss" scoped>
-.stats-card {
-  &.s-card.neumorphic.s-size-big {
-    padding: $inner-spacing-big $inner-spacing-big $inner-spacing-medium;
-  }
-
-  &-header {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: $inner-spacing-small;
-    margin-bottom: $inner-spacing-small;
-  }
-
-  &-title {
-    display: flex;
-    align-items: center;
-    gap: $inner-spacing-mini;
-  }
-
-  &-filters {
-    order: 1;
-
-    @include large-desktop {
-      margin-left: auto;
-      width: auto;
-      order: initial;
-    }
-  }
-}
-
-.header-title {
-  font-size: var(--s-font-size-medium);
-  line-height: var(--s-line-height-medium);
-  font-weight: 600;
-}
-</style>
diff --git a/src/components/shared/Widget/BaseWidget.vue b/src/components/shared/Widget/BaseWidget.vue
index 3ffad63d5..4e6e83482 100644
--- a/src/components/shared/Widget/BaseWidget.vue
+++ b/src/components/shared/Widget/BaseWidget.vue
@@ -1,22 +1,30 @@
 <template>
-  <div class="base-widget">
-    <div class="base-widget-header">
-      <slot name="title">
-        <div class="base-widget-header-title">
-          <h4 v-if="title" class="base-widget-header-title__text">{{ title }}</h4>
-          <s-tooltip v-if="tooltip" slot="suffix" border-radius="mini" :content="tooltip" placement="top" tabindex="-1">
-            <s-icon name="info-16" size="14px" />
-          </s-tooltip>
+  <s-card :class="['base-widget', { delimeter }]" border-radius="small" shadow="always" size="big" primary>
+    <template #header v-if="hasHeader">
+      <div class="base-widget-header">
+        <slot name="title">
+          <div class="base-widget-title">
+            <h4 v-if="title">{{ title }}</h4>
+            <s-tooltip v-if="tooltip" border-radius="mini" :content="tooltip">
+              <s-icon name="info-16" size="14px" />
+            </s-tooltip>
+          </div>
+        </slot>
+
+        <div v-if="$slots.filters" class="s-flex base-widget-filters">
+          <slot name="filters" />
         </div>
-      </slot>
 
-      <slot name="title-append" />
-    </div>
+        <div v-if="$slots.types" class="s-flex base-widget-types">
+          <slot name="types" />
+        </div>
+      </div>
+    </template>
 
-    <div class="base-widget-content s-flex-column">
+    <div :class="['base-widget-content', { extensive }]">
       <slot />
     </div>
-  </div>
+  </s-card>
 </template>
 
 <script lang="ts">
@@ -26,43 +34,78 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 export default class BaseWidget extends Vue {
   @Prop({ default: '', type: String }) readonly title!: string;
   @Prop({ default: '', type: String }) readonly tooltip!: string;
+  @Prop({ default: false, type: Boolean }) readonly delimeter!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly extensive!: boolean;
+
+  get hasHeader(): boolean {
+    return !!this.title || !!this.$slots.title;
+  }
 }
 </script>
 
 <style lang="scss">
 .base-widget {
-  padding: unset;
-  background-color: var(--s-color-utility-surface);
-  box-shadow: var(--s-shadow-dialog);
-  color: var(--s-color-base-content-primary);
-  border-radius: var(--s-border-radius-small);
   overflow: hidden;
 
+  &.s-card.neumorphic.s-size-big {
+    padding: 0;
+
+    &.delimeter .el-card__header {
+      border-bottom-color: var(--s-color-base-border-secondary);
+    }
+
+    .el-card__body {
+      display: flex;
+      flex-flow: column nowrap;
+      flex: 1;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$top-offset: $inner-spacing-small;
+$left-offset: $inner-spacing-medium;
+
+.base-widget {
   &-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 $inner-spacing-medium;
+    padding: $top-offset $left-offset;
+    gap: $inner-spacing-mini;
 
-    &-title {
-      display: flex;
-      align-items: center;
-
-      &__text {
-        height: 40px;
-        line-height: 40px;
-        font-weight: 500;
-        font-size: 17px;
-      }
-
-      .el-tooltip {
-        margin-left: $inner-spacing-mini;
-      }
+    font-size: var(--s-font-size-medium);
+    font-weight: 500;
+    line-height: var(--s-line-height-medium);
+  }
+
+  &-title {
+    display: flex;
+    align-items: center;
+    gap: $inner-spacing-mini;
+  }
+
+  &-filters {
+    order: 1;
+
+    @include large-desktop {
+      margin-left: auto;
+      width: auto;
+      order: initial;
     }
   }
 
   &-content {
+    display: flex;
+    flex-flow: column nowrap;
     flex: 1;
+
+    padding: $top-offset $left-offset;
+
+    &.extensive {
+      padding: 0;
+    }
   }
 }
 </style>
diff --git a/src/consts/index.ts b/src/consts/index.ts
index b0c01cfa5..3b6729a65 100644
--- a/src/consts/index.ts
+++ b/src/consts/index.ts
@@ -208,6 +208,7 @@ export enum Components {
   // Swap Page
   SwapConfirm = 'pages/Swap/Confirm',
   SwapChart = 'pages/Swap/Chart',
+  SwapTransactions = 'pages/Swap/Transactions',
   SwapStatusActionBadge = 'pages/Swap/StatusActionBadge',
   SwapTransactionDetails = 'pages/Swap/TransactionDetails',
   SwapSettings = 'pages/Swap/Settings/Settings',
@@ -267,7 +268,6 @@ export enum Components {
   SettingsTabs = 'shared/Settings/Tabs',
   SlippageTolerance = 'shared/Settings/SlippageTolerance',
   // Shared Stats
-  StatsCard = 'shared/Stats/StatsCard',
   StatsFilter = 'shared/Stats/StatsFilter',
   // Shared Chart
   ChartSkeleton = 'shared/Chart/ChartSkeleton',
diff --git a/src/views/OrderBook.vue b/src/views/OrderBook.vue
index 2d228fc6f..77e1aa4db 100644
--- a/src/views/OrderBook.vue
+++ b/src/views/OrderBook.vue
@@ -217,7 +217,7 @@ export default class OrderBookView extends Mixins(TranslationMixin, mixins.Loadi
       }
 
       .column-3 {
-        .order-history-header-filter-buttons {
+        .order-history-buttons--filter-buttons {
           flex-direction: column;
         }
       }
diff --git a/src/views/Swap.vue b/src/views/Swap.vue
index 2bdafff78..702f18ccc 100644
--- a/src/views/Swap.vue
+++ b/src/views/Swap.vue
@@ -152,6 +152,7 @@
       :is-available="isAvailable"
       class="swap-chart"
     />
+    <swap-transactions :base-asset="tokenFrom" :quote-asset="tokenTo" />
   </div>
 </template>
 
@@ -193,6 +194,7 @@ import type { Subscription } from 'rxjs';
     SwapStatusActionBadge: lazyComponent(Components.SwapStatusActionBadge),
     SwapTransactionDetails: lazyComponent(Components.SwapTransactionDetails),
     SwapChart: lazyComponent(Components.SwapChart),
+    SwapTransactions: lazyComponent(Components.SwapTransactions),
     SwapLossWarningDialog: lazyComponent(Components.SwapLossWarningDialog),
     GenericPageHeader: lazyComponent(Components.GenericPageHeader),
     SlippageTolerance: lazyComponent(Components.SlippageTolerance),