diff --git a/src/popup/locales/en.json b/src/popup/locales/en.json
index b69148cf61..6b59c9a811 100644
--- a/src/popup/locales/en.json
+++ b/src/popup/locales/en.json
@@ -187,9 +187,6 @@
     "recentTransactions": {
       "recentActivity": "Recent Activity",
       "viewAll": "View all",
-      "pendingStatus": "Pending",
-      "sentStatus": "Sent",
-      "receivedStatus": "Received",
       "noTransactionsFound": "No transactions found!"
     },
     "addFungibleToken": {
@@ -707,7 +704,10 @@
       "nameUpdate": "name update tx",
       "createTx": "create tx",
       "clear": "Clear filter",
-      "apply": "Apply filter"
+      "apply": "Apply filter",
+      "sent": "Sent",
+      "received": "Received",
+      "pending": "Pending"
     },
     "utilities": {
       "heading": "Utilities",
diff --git a/src/popup/router/components/PendingTxs.vue b/src/popup/router/components/PendingTxs.vue
index a66ca7fe83..a58031d0d1 100644
--- a/src/popup/router/components/PendingTxs.vue
+++ b/src/popup/router/components/PendingTxs.vue
@@ -1,46 +1,34 @@
 <template>
   <div v-if="filteredPendings.length" data-cy="pending-txs">
-    <ae-list-item
-      v-for="tr in filteredPendings"
-      :key="tr.hash"
-      fill="neutral"
-      class="list-item-transaction"
-    >
-      <div class="holder">
-        <span class="amount" data-cy="amount">
-          {{ tr.amount }} {{ $t('pages.appVUE.aeid') }}
-          <span class="text">( {{ tr.amountCurrency }} {{ currentCurrency }} )</span>
-        </span>
-        <span class="status" data-cy="status">{{
-          $t('pages.recentTransactions.pendingStatus')
-        }}</span>
-        <span class="time" data-cy="time">{{ tr.time | formatDate }}</span>
-      </div>
-      <div class="holder">
-        <span class="url" data-cy="url">{{ tr.domain }}</span>
-        <span class="seeTransaction"><Eye /></span>
-      </div>
-    </ae-list-item>
+    <TransactionItem
+      v-for="transaction in filteredPendings"
+      :key="transaction.hash"
+      :transaction="transaction"
+    />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import { setInterval, clearInterval } from 'timers';
-import { formatDate } from '../../utils';
-import Eye from '../../../icons/eye.svg?vue-component';
+import TransactionItem from './TransactionItem';
 
 export default {
-  components: {
-    Eye,
-  },
+  components: { TransactionItem },
   computed: {
     ...mapGetters(['transactions', 'currentCurrency']),
     filteredPendings() {
-      return this.transactions.pending.filter(({ amount, hash }) => !Number.isNaN(+amount) && hash);
+      return this.transactions.pending
+        .filter(({ amount, hash }) => !Number.isNaN(+amount) && hash)
+        .map(({ time, hash, tipUrl, ...t }) => ({
+          time,
+          hash,
+          tipUrl,
+          tx: { ...t },
+          pending: true,
+        }));
     },
   },
-  filters: { formatDate },
   created() {
     const checkMined = setInterval(() => this.checkPendingTxMined(), 2500);
     this.$once('hook:destroyed', () => clearInterval(checkMined));
@@ -48,13 +36,13 @@ export default {
   methods: {
     async checkPendingTxMined() {
       await Promise.all(
-        this.transactions.pending.map(async ({ hash, type, amount, domain }) => {
+        this.transactions.pending.map(async ({ hash, type, amount, tipUrl }) => {
           const mined = await this.$store.state.sdk.poll(hash);
           if (!mined) return;
           const pending = this.transactions.pending.filter(p => p.hash !== hash);
           this.$store.commit('SET_PENDING_TXS', pending);
           if (type === 'tip')
-            this.$router.push({ name: 'success-tip', params: { amount, domain } });
+            this.$router.push({ name: 'success-tip', params: { amount, tipUrl } });
           if (type === 'spend')
             this.$router.push({ name: 'send', params: { redirectstep: 3, successtx: mined } });
         }),
@@ -63,48 +51,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import '../../../common/variables';
-
-.list-item-transaction {
-  display: inline-block !important;
-  padding: 5px 0;
-  border-color: $bg-color !important;
-  text-decoration: none;
-  list-style: none;
-  cursor: default;
-  border-top: 1px solid transparent;
-
-  .holder {
-    display: flex;
-    justify-content: space-between;
-
-    .url {
-      display: inline-block;
-      width: 295px;
-      white-space: nowrap;
-      overflow: hidden !important;
-      text-overflow: ellipsis;
-      color: $accent-color;
-      font-size: 12px;
-      text-align: left;
-    }
-
-    .time {
-      color: $text-color !important;
-      font-size: 12px;
-    }
-
-    .amount {
-      color: $secondary-color !important;
-      font-size: 14px;
-    }
-
-    .status {
-      color: $text-color !important;
-      font-size: 14px;
-    }
-  }
-}
-</style>
diff --git a/src/popup/router/components/RecentTransactions.vue b/src/popup/router/components/RecentTransactions.vue
index 37b208d2d6..6d31900816 100644
--- a/src/popup/router/components/RecentTransactions.vue
+++ b/src/popup/router/components/RecentTransactions.vue
@@ -14,7 +14,7 @@
           :dark="true"
           v-for="transaction in transactions.latest"
           :key="transaction.id"
-          :transactionData="transaction"
+          :transaction="transaction"
         ></TransactionItem>
       </ae-list>
     </div>
diff --git a/src/popup/router/components/TransactionItem.vue b/src/popup/router/components/TransactionItem.vue
index 71d7889807..62a7033ec9 100644
--- a/src/popup/router/components/TransactionItem.vue
+++ b/src/popup/router/components/TransactionItem.vue
@@ -1,85 +1,84 @@
 <template>
   <div>
-    <ae-list-item fill="neutral" class="list-item-transaction" :class="transactionData.hash">
+    <li fill="neutral" class="list-item-transaction">
       <div class="holder">
         <span class="amount">
           <span data-cy="amount">{{ txAmount }}</span>
           {{ $t('pages.appVUE.aeid') }}
-          <span class="text" data-cy="currency-amount"
-            >( {{ txAmountToCurrency }} {{ current.currency.toUpperCase() }} )</span
-          >
+          <span class="text" data-cy="currency-amount">
+            ( {{ txAmountToCurrency }} {{ current.currency.toUpperCase() }} )
+          </span>
         </span>
-        <span class="status">{{
-          txType == 'Sent'
-            ? $t('pages.recentTransactions.sentStatus')
-            : $t('pages.recentTransactions.receivedStatus')
-        }}</span>
-        <span class="time" data-cy="time">{{ transactionDate }}</span>
+        <span class="status">{{ status }}</span>
+        <span class="time" data-cy="time">{{ transaction.time | formatDate }}</span>
       </div>
       <div class="holder tx-info">
         <span class="url" @click="visitTipUrl">{{ tipUrl }}</span>
-        <span class="seeTransaction" @click="seeTx(transactionData.hash)">
+        <span class="seeTransaction" @click="seeTx()">
           <img src="../../../icons/eye.png" />
         </span>
       </div>
-    </ae-list-item>
+    </li>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import { decode } from '@aeternity/aepp-sdk/es/tx/builder/helpers';
-import { convertToAE } from '../../utils/helper';
+import { aettosToAe } from '../../utils/helper';
 import { formatDate } from '../../utils';
 import openUrl from '../../utils/openUrl';
 
 export default {
-  props: ['transactionData', 'recent', 'dark'],
-  data() {
-    return {
-      status: '',
-      tipUrl: null,
-      tipAmount: 0,
-      tipComment: null,
-    };
+  props: {
+    transaction: {
+      type: Object,
+      required: true,
+    },
   },
+  data: () => ({ tip: null }),
+  filters: { formatDate },
   async created() {
-    await this.$watchUntilTruly(() => this.sdk);
-    this.getEventData();
+    if (!this.transaction.pending) {
+      await this.$watchUntilTruly(() => this.sdk);
+      this.getEventData();
+    }
   },
   computed: {
-    ...mapGetters(['account', 'popup', 'sdk', 'current', 'network', 'transactions', 'tipping']),
-    txType() {
+    ...mapGetters(['account', 'sdk', 'current', 'network']),
+    status() {
       if (
-        this.transactionData.tx.sender_id === this.account.publicKey ||
-        this.transactionData.tx.account_id === this.account.publicKey ||
-        this.transactionData.tx.owner_id === this.account.publicKey ||
-        this.transactionData.tx.caller_id === this.account.publicKey
+        this.transaction.tx.sender_id === this.account.publicKey ||
+        this.transaction.tx.account_id === this.account.publicKey ||
+        this.transaction.tx.owner_id === this.account.publicKey ||
+        this.transaction.tx.caller_id === this.account.publicKey
       ) {
-        return 'Sent';
+        return this.$t('pages.transactions.sent');
+      }
+      if (this.transaction.pending) {
+        return this.$t('pages.transactions.pending');
       }
-      return 'Received';
+      return this.$t('pages.transactions.received');
     },
     txAmount() {
-      const amount = this.transactionData.tx.amount ? this.transactionData.tx.amount : 0;
-      return convertToAE(amount).toFixed(2);
+      const amount = this.transaction.tx.amount ? this.transaction.tx.amount : 0;
+      return (+aettosToAe(amount)).toFixed(2);
     },
     txAmountToCurrency() {
-      const amount = this.transactionData.tx.amount ? this.transactionData.tx.amount : 0;
-      const { fee } = this.transactionData.tx;
-      const txamount = (amount + fee) / 10 ** 18;
+      const amount = this.transaction.tx.amount ? this.transaction.tx.amount : 0;
+      const fee = this.transaction.tx.fee || 0;
+      const txamount = aettosToAe(amount + fee);
       return (txamount * this.current.currencyRate).toFixed(2);
     },
-    transactionDate() {
-      return formatDate(this.transactionData.time);
+    tipUrl() {
+      return this.transaction.tipUrl ? this.transaction.tipUrl : this.tip;
     },
   },
   methods: {
     async getEventData() {
-      const { log } = await this.sdk.tx(this.transactionData.hash, true);
+      const { log } = await this.sdk.tx(this.transaction.hash, true);
       if (log && log.length) {
-        this.tipUrl = decode(log[0].data).toString();
-        this.tipAmount = convertToAE(log[0].topics[2]);
+        this.tip = decode(log[0].data).toString();
       }
     },
     visitTipUrl() {
@@ -87,27 +86,30 @@ export default {
         openUrl(this.tipUrl);
       }
     },
-    seeTx(txHash) {
-      openUrl(`${this.network[this.current.network].explorerUrl}/transactions/${txHash}`);
+    seeTx() {
+      openUrl(
+        `${this.network[this.current.network].explorerUrl}/transactions/${this.transaction.hash}`,
+      );
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '../../../common/variables';
-.list-item-transaction:first-child {
-  border-top: 1px solid $tx-border-color !important;
-}
 .list-item-transaction {
   display: inline-block;
   padding: 10px 0;
-  border-color: $bg-color !important;
+  border-color: $bg-color;
   text-decoration: none;
   list-style: none;
   cursor: default;
   border-top: 1px solid transparent;
 
+  &:first-child {
+    border-top: 1px solid $tx-border-color !important;
+  }
+
   .holder {
     display: flex;
     justify-content: space-between;
@@ -132,27 +134,33 @@ export default {
       text-align: left;
       cursor: pointer;
     }
+
     .seeTransaction {
       margin-left: 10px;
       cursor: pointer;
     }
+
     .time {
       color: $text-color !important;
       font-size: 12px;
       padding-top: 1px;
     }
+
     .date {
       color: $text-color !important;
       font-size: 12px;
       padding-top: 1px;
     }
+
     .amount {
       color: $secondary-color !important;
       font-size: 14px;
     }
+
     .text {
       color: $white-color !important;
     }
+
     .status {
       color: $white-color !important;
       margin-left: 4px;
diff --git a/src/popup/router/pages/Send.vue b/src/popup/router/pages/Send.vue
index 3374e07355..7a9e730ef7 100644
--- a/src/popup/router/pages/Send.vue
+++ b/src/popup/router/pages/Send.vue
@@ -296,7 +296,7 @@ export default {
         if (hash) {
           await this.$store.dispatch('setPendingTx', {
             hash,
-            amount: this.form.amount,
+            amount,
             time: Date.parse(new Date()),
             type: 'spend',
           });
diff --git a/src/popup/router/pages/SuccessTip.vue b/src/popup/router/pages/SuccessTip.vue
index d1304abbe1..af1741400a 100644
--- a/src/popup/router/pages/SuccessTip.vue
+++ b/src/popup/router/pages/SuccessTip.vue
@@ -14,7 +14,7 @@
       ({{ getCurrencyAmount }} {{ currentCurrency }})
       {{ $t('pages.successTip.to') }}
     </p>
-    <a class="link-sm text-left block" data-cy="tip-url">{{ domain }}</a>
+    <a class="link-sm text-left block" data-cy="tip-url">{{ tipUrl }}</a>
     <br />
     <div>
       <span style="word-break: break-word;font-size: 14px;float: left;">{{
@@ -50,13 +50,14 @@ import Heart from '../../../icons/heart.svg?vue-component';
 import Textarea from '../components/Textarea';
 import openUrl from '../../utils/openUrl';
 import { TIP_SERVICE, BACKEND_URL, UI_URL } from '../../utils/constants';
+import { aettosToAe } from '../../utils/helper';
 
 export default {
   components: {
     Heart,
     Textarea,
   },
-  props: ['amount', 'domain'],
+  props: ['amount', 'tipUrl'],
   data() {
     return {
       note: this.$t('pages.successTip.notifyMessage'),
@@ -66,13 +67,13 @@ export default {
   computed: {
     ...mapGetters(['current', 'currentCurrency']),
     amountTip() {
-      return this.amount;
+      return (+aettosToAe(this.amount)).toFixed(2);
     },
     getCurrencyAmount() {
       return (this.amountTip * this.current.currencyRate).toFixed(3);
     },
     urlVerified() {
-      return this.domain && this.verifiedUrls.includes(this.domain);
+      return this.tipUrl && this.verifiedUrls.includes(this.tipUrl);
     },
   },
   async created() {
diff --git a/src/popup/router/pages/TipPage.vue b/src/popup/router/pages/TipPage.vue
index 27fe91d875..95c225da34 100644
--- a/src/popup/router/pages/TipPage.vue
+++ b/src/popup/router/pages/TipPage.vue
@@ -206,8 +206,8 @@ export default {
         if (hash) {
           await this.$store.dispatch('setPendingTx', {
             hash,
-            amount: this.amount,
-            domain: this.url,
+            amount,
+            tipUrl: this.url,
             time: Date.now(),
             type: 'tip',
           });
diff --git a/src/popup/router/pages/Transactions.vue b/src/popup/router/pages/Transactions.vue
index 411e4abcdc..3ad4eccfad 100644
--- a/src/popup/router/pages/Transactions.vue
+++ b/src/popup/router/pages/Transactions.vue
@@ -4,14 +4,11 @@
     <BalanceInfo />
     <TransactionFilters @filtrate="filtrate" />
     <ae-list class="all-transactions" data-cy="all-transactions">
-      <div class="date" v-if="pendingTransactions.length">
-        {{ $t('pages.recentTransactions.pendingStatus') }}
-      </div>
       <PendingTxs />
       <TransactionItem
         v-for="transaction in filteredTransactions"
         :key="transaction.id"
-        :transactionData="transaction"
+        :transaction="transaction"
       />
     </ae-list>
     <div v-if="!filteredTransactions.length && !loading">
diff --git a/src/store/actions.js b/src/store/actions.js
index 9502d7cbd6..d8797e70be 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -167,16 +167,8 @@ export default {
     commit('UPDATE_ACCOUNT', keypair);
     commit('SWITCH_LOGGED_IN', true);
   },
-  async setPendingTx({ commit, state: { transactions, current } }, tx) {
-    const txs = [...transactions.pending, tx].map(el => {
-      const { time, domain } = el;
-      const amount = parseFloat(el.amount).toFixed(3);
-      const amountCurrency = parseFloat(
-        current.currencyRate ? amount * current.currencyRate : amount,
-      ).toFixed(3);
-      return { ...el, amount, time, amountCurrency, domain };
-    });
-    commit('SET_PENDING_TXS', txs);
+  async setPendingTx({ commit, state: { transactions } }, tx) {
+    commit('SET_PENDING_TXS', [...transactions.pending, tx]);
   },
   async checkExtensionUpdate({ state: { network } }) {
     const { tipContract } = network[DEFAULT_NETWORK];
diff --git a/tests/e2e/integration/menu.js b/tests/e2e/integration/menu.js
index 7630c404dc..a3b872b921 100644
--- a/tests/e2e/integration/menu.js
+++ b/tests/e2e/integration/menu.js
@@ -31,7 +31,7 @@ describe('Test cases for menu sidebar component', () => {
 
   it('Have account identicon', () => {
     cy.openMenu()
-      .get('.user-avatar')
+      .get('.user-identicon')
       .should('be.visible');
   });