diff --git a/config.xml b/config.xml
index 13bbdbbb7c..d370458be0 100644
--- a/config.xml
+++ b/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.superhero.cordova" version="0.0.15" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.superhero.cordova" version="0.0.16" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>SuperHero</name>
     <description>SuperHero wallet</description>
     <author email="dev@cordova.apache.org" href="http://cordova.io">
diff --git a/package-lock.json b/package-lock.json
index a28970508f..b67f307b22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "superhero-wallet",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2605,24 +2605,24 @@
       "version": "github:aeternity/aepp-raendom#9bf50b4c526e81ee6d26f3eb57c7becfba3cdd5e",
       "from": "github:aeternity/aepp-raendom#feature/layout-superhero",
       "requires": {
-        "@aeternity/aepp-sdk": "7.1.1",
         "axios": "^0.19.0",
         "bignumber.js": "^9.0.0",
         "bootstrap": "^4.4.1",
-        "bootstrap-vue": "^2.4.0",
-        "i18n": "^0.8.5",
+        "bootstrap-vue": "^2.9.0",
+        "core-js": "^3.6.4",
+        "detect-browser": "^4.8.0",
+        "i18n": "^0.8.6",
         "lodash-es": "^4.17.15",
-        "timers": "^0.1.1",
-        "vue": "^2.6.10",
-        "vue-i18n": "^8.15.3",
-        "vue-router": "^3.1.3",
-        "vuex": "^3.1.2"
+        "vue": "^2.6.11",
+        "vue-i18n": "^8.16.0",
+        "vue-router": "^3.1.6",
+        "vuex": "^3.1.3"
       },
       "dependencies": {
         "@aeternity/aepp-sdk": {
-          "version": "7.2.1",
-          "resolved": "https://registry.npmjs.org/@aeternity/aepp-sdk/-/aepp-sdk-7.2.1.tgz",
-          "integrity": "sha512-ok15jB7FB6QkHf3kjFBKQ0GCp/2QHIFYq+TvBh59l6D7pYfb/7eU4/tLZKdxJPqYDtO9I7t3KIzCWG39yCWzhQ==",
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/@aeternity/aepp-sdk/-/aepp-sdk-7.1.1.tgz",
+          "integrity": "sha512-xSdmqyQZgCTpqCWAw+qUcMT5joId6gOYcT/aIWgw64FLlQaCqrqvvzeIfmt4aKqa+sKEex1vqmYjSrynbHTEgg==",
           "requires": {
             "@aeternity/bip39": "^0.1.0",
             "@stamp/it": "^1.0.3",
@@ -5623,8 +5623,7 @@
     "core-js": {
       "version": "3.6.4",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
-      "integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==",
-      "dev": true
+      "integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw=="
     },
     "core-js-compat": {
       "version": "3.6.4",
@@ -18304,11 +18303,6 @@
       "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
       "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
     },
-    "timers": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/timers/-/timers-0.1.1.tgz",
-      "integrity": "sha1-hqxceMHuQZaU81pY3k/UGDz7nB4="
-    },
     "timers-browserify": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.11.tgz",
diff --git a/package.json b/package.json
index db33935c97..66172750d0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "superhero-wallet",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Superhero wallet",
   "author": "SuperHero",
   "license": "MIT",
diff --git a/src/common/variables.scss b/src/common/variables.scss
index f2f6ddfb05..ddd022ba0c 100644
--- a/src/common/variables.scss
+++ b/src/common/variables.scss
@@ -20,15 +20,16 @@ $bg-color: #16161D;
 $white-color: #F1F1F1;
 $border-color: #34343B;
 $input-bg-color: #121217;
-$button-color: #3F4048;
-$button-text-color: #CFCFCF;
+$button-color: #2A9CFF;
+$button-text-color: #FFFFFF;
+$modal-background: #1B1B23;
 $placeholder-color: #67676D;
 $text-color: #BCBCC4;
 $accent-color: #67f7b8;
 $secondary-color: #2a9cff;
 $nav-bg-color: #21212A;
-$input-focus-color: #67f7b8;
-$input-error-color: #2a9cff;
+$input-focus-color: #2a9cff;
+$input-error-color: #FF5857;
 $transactions-bg: #12121b;
 $nav-border-color: #3A3A47;
 $tx-border-color: #33343e;
diff --git a/src/icons/icon_128.png b/src/icons/icon_128.png
index c6aea1d0ba..99e4fdf51f 100644
Binary files a/src/icons/icon_128.png and b/src/icons/icon_128.png differ
diff --git a/src/icons/icon_48.png b/src/icons/icon_48.png
index c4796a7e19..7bf23cd699 100644
Binary files a/src/icons/icon_48.png and b/src/icons/icon_48.png differ
diff --git a/src/popup/locales/en.json b/src/popup/locales/en.json
index b69148cf61..3bf3b3a761 100644
--- a/src/popup/locales/en.json
+++ b/src/popup/locales/en.json
@@ -155,7 +155,7 @@
       "wholeTransaction": "Whole transaction history",
       "latestTransactions": "Latest transactions",
       "noTransactionsFound": "No transactions found!",
-      "tipSomeone": "Send Tips",
+      "tipSomeone": "Send Tip",
       "howToClaim": "How to claim AE",
       "balance": "Balance",
       "copied": "Copied!",
@@ -187,9 +187,6 @@
     "recentTransactions": {
       "recentActivity": "Recent Activity",
       "viewAll": "View all",
-      "pendingStatus": "Pending",
-      "sentStatus": "Sent",
-      "receivedStatus": "Received",
       "noTransactionsFound": "No transactions found!"
     },
     "addFungibleToken": {
@@ -597,6 +594,7 @@
     },
     "tipPage": {
       "back": "Back",
+      "OkButton": "OK",
       "noImage": "No Image",
       "domainVerified": "Verified",
       "domainNotVerified": "Not verified",
@@ -610,6 +608,9 @@
       "tipDetails": "Details",
       "tipWebsite": "Website",
       "heading": "Send",
+      "sendTipConfirmationHeader": "Send Tip Confirmation",
+      "sendTipConfirmationBody": "You are going to send tip to untrusted URL. Third party issues prevent us to ensure that tips will be directly delivered to the URL owner.",
+      "sendTipConfirmationQstn":"Are you sure you would like to send the tip anyway?",
       "headingSending": "Sending",
       "selectTip": "Select amount to tip",
       "tipDomain": "Tip domain",
@@ -621,15 +622,19 @@
       "title": "Title",
       "titlePlaceholder": "Send a message of #support along with your donation...",
       "account": "Account",
-      "next": "Send Tips",
-      "url": "Send a tip to",
+      "next": "Send Tip",
+      "url": "Send Tip to",
       "to": "to",
       "amountPlaceholder": "Enter amount",
       "amountLabel": "Amount",
       "availableLabel": "Available",
       "confirm": "Confirm",
       "cancel": "Cancel",
-      "edit": "Edit AE Details"
+      "edit": "Edit AE Details",
+      "whatIsVerifieddUrl": "What is \"Verified\" URL?",
+      "whatIsUntrustedUrl": "What is \"Untrusted\" URL?",
+      "untrustedUrlInfo": "Third party issues prevent us to ensure that tips will be directly delivered to the URL owner. You are sending the tip at your own risk.",
+      "verifiedUrlInfo": "If a URL is marked as verified, it means the owner of this URL is already a fellow Superhero — and that is awesome! An AE address has been included in the URL and tips can be claimed."
     },
     "successTip": {
       "sendMore": "Send More AE",
@@ -707,7 +712,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/Button.vue b/src/popup/router/components/Button.vue
index 4f7bd1cb0d..29096e89cb 100644
--- a/src/popup/router/components/Button.vue
+++ b/src/popup/router/components/Button.vue
@@ -13,6 +13,7 @@ export default {
     small: Boolean,
     third: Boolean,
     onboarding: Boolean,
+    dark: Boolean,
   },
   computed: {
     getClasses() {
@@ -23,6 +24,7 @@ export default {
       if (this.small) c.push('small');
       if (this.third) c.push('third');
       if (this.onboarding) c.push('onboarding');
+      if (this.dark) c.push('dark');
       return c.join(' ');
     },
   },
@@ -61,6 +63,9 @@ export default {
   width: 48% !important;
   margin: 0 !important;
 }
+.primary-button.dark {
+  background: $box-button-color !important;
+}
 .primary-button.small {
   width: auto !important;
   line-height: 1px !important;
diff --git a/src/popup/router/components/CheckBox.vue b/src/popup/router/components/CheckBox.vue
index 90c3d50be7..e2081c9c39 100644
--- a/src/popup/router/components/CheckBox.vue
+++ b/src/popup/router/components/CheckBox.vue
@@ -40,7 +40,6 @@ export default {
 .checkbox-container {
   display: flex;
   position: relative;
-  padding-left: 15px;
   height: 20px;
   cursor: pointer;
   justify-content: start;
diff --git a/src/popup/router/components/Loader.vue b/src/popup/router/components/Loader.vue
index 50e30d011e..f251c837ca 100644
--- a/src/popup/router/components/Loader.vue
+++ b/src/popup/router/components/Loader.vue
@@ -37,14 +37,17 @@ export default {
 .fadeOut-leave-active {
   transition: all 0.5s ease-in-out;
 }
+
 .fadeOut-leave-to {
   opacity: 0;
 }
+
 .ae-loader {
   border: 0.2em solid $secondary-color !important;
   border-left-color: transparent !important;
   border-right-color: transparent !important;
 }
+
 .mainLoader {
   position: fixed;
   width: 100%;
@@ -52,25 +55,29 @@ export default {
   background-color: $bg-color;
   top: 0;
   z-index: 6;
-}
-.mainLoader .ae-loader {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -1.5em;
-  width: 3em !important;
-  height: 3em !important;
-  border-radius: 3em !important;
   padding-top: 50px;
   padding-top: calc(50px + env(safe-area-inset-top));
+
+  .ae-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -1.5em;
+    width: 3em !important;
+    height: 3em !important;
+    border-radius: 3em !important;
+  }
+
+  &.mainLoaderTransparent {
+    opacity: 0.6;
+  }
 }
-.mainLoader.mainLoaderTransparent {
-  opacity: 0.6;
-}
+
 .loader .loading {
   width: 32px;
   margin-right: 15px;
 }
+
 .center {
   position: relative;
   z-index: 5;
diff --git a/src/popup/router/components/Modal.vue b/src/popup/router/components/Modal.vue
index cdfe4fd0bb..4a4b6dc7a9 100644
--- a/src/popup/router/components/Modal.vue
+++ b/src/popup/router/components/Modal.vue
@@ -2,9 +2,9 @@
   <div class="popup">
     <transition name="modal">
       <div class="modal--mask">
-        <div class="modal--wrapper" @click="$emit('close')">
+        <div class="modal--wrapper">
           <div class="modal--container">
-            <!-- <Close class="modal--close" @click="$emit('close')" /> -->
+            <Close class="modal--close" @click="$emit('close')" />
             <div class="modal--header">
               <slot name="header" />
             </div>
@@ -22,7 +22,12 @@
 </template>
 
 <script>
+import Close from '../../../icons/close.svg?vue-component';
+
 export default {
+  components: {
+    Close,
+  },
   mounted() {
     if (document.body.style.overflow) return;
     document.body.style.overflow = 'hidden';
@@ -32,6 +37,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @import '../../../common/variables';
 .modal--mask {
@@ -41,50 +47,50 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.7);
   display: table;
   transition: opacity 0.3s ease;
-}
-.modal--wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
-.modal--container {
-  position: relative;
-  width: 90%;
-  margin: 0 auto;
-  padding: 20px;
-  background: #fff;
-  border: 1px solid $tx-border-color;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-}
-.modal--close {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-}
-.modal--header {
-  color: $white-color;
-  font-size: 16px;
-}
-.modal--body {
-  margin: 20px 0;
-  color: $text-color;
-  font-size: 14px;
-  word-break: break-word;
-  text-align: left;
-}
-.modal--enter {
-  opacity: 0;
-}
-.modal--leave--active {
-  opacity: 0;
-}
-.modal--enter .modal--container,
-.modal--leave--active .modal--container {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
+  .modal--wrapper {
+    display: table-cell;
+    vertical-align: middle;
+  }
+  .modal--container {
+    position: relative;
+    width: 87%;
+    margin: 0 auto;
+    padding: 62px 25px 30px;
+    background: $modal-background;
+    border: 1px solid $tx-border-color;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+  }
+  .modal--close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+  }
+  .modal--header {
+    color: $white-color;
+    font-size: 16px;
+  }
+  .modal--body {
+    margin: 20px 0;
+    color: $text-color;
+    font-size: 14px;
+    word-break: break-word;
+    text-align: left;
+  }
+  .modal--enter {
+    opacity: 0;
+  }
+  .modal--leave--active {
+    opacity: 0;
+  }
+  .modal--enter .modal--container,
+  .modal--leave--active .modal--container {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
 }
 </style>
diff --git a/src/popup/router/components/Modals/ClaimSuccessModal.vue b/src/popup/router/components/Modals/ClaimSuccessModal.vue
index 39752c10e1..92f987af26 100644
--- a/src/popup/router/components/Modals/ClaimSuccessModal.vue
+++ b/src/popup/router/components/Modals/ClaimSuccessModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal>
+  <Modal @close="resolve">
     <div slot="body">
       <CheckIcon /> <br />
       <b>{{ $t('pages.claim.url') }}:</b> {{ url }} <br />
diff --git a/src/popup/router/components/Modals/ConfirmTip.vue b/src/popup/router/components/Modals/ConfirmTip.vue
new file mode 100644
index 0000000000..59f17a3521
--- /dev/null
+++ b/src/popup/router/components/Modals/ConfirmTip.vue
@@ -0,0 +1,64 @@
+<template>
+  <Modal @close="resolve">
+    <h4 class="confirmtip-modal-header" slot="header">
+      {{ $t('pages.tipPage.sendTipConfirmationHeader') }}
+    </h4>
+    <div class="confirmtip-modal--body" slot="body">
+      {{ $t('pages.tipPage.sendTipConfirmationBody') }}
+      <p class="confirmation--question">{{ $t('pages.tipPage.sendTipConfirmationQstn') }}</p>
+    </div>
+    <div class="confirmtip-modal--footer" slot="footer">
+      <Button data-cy="cancel-tip" dark @click="cancelTip">
+        {{ $t('pages.tipPage.cancel') }}
+      </Button>
+      <Button data-cy="to-confirm" @click="toConfirm">
+        {{ $t('pages.tipPage.sendTipBtn') }}
+      </Button>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import Modal from '../Modal';
+import Button from '../Button';
+
+export default {
+  props: {
+    resolve: { type: Function, required: true },
+    reject: { type: Function, required: true },
+  },
+  components: { Modal, Button },
+  methods: {
+    toConfirm() {
+      this.resolve(true);
+    },
+    cancelTip() {
+      this.reject(new Error('reject'));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.confirmtip-modal-header {
+  margin: 0 !important;
+  font-weight: 500 !important;
+}
+.confirmtip-modal--body {
+  padding-bottom: 20px;
+  .confirmation--question {
+    font-weight: 500 !important;
+    color: #fff !important;
+  }
+}
+.confirmtip-modal--footer {
+  display: flex;
+  justify-content: space-between;
+  button {
+    margin: 0 !important;
+    width: 120px !important;
+    font-weight: 700 !important;
+    font-size: 15px !important;
+  }
+}
+</style>
diff --git a/src/popup/router/components/Modals/DefaultModal.vue b/src/popup/router/components/Modals/DefaultModal.vue
index 1b1799cab0..2bfd7e7b96 100644
--- a/src/popup/router/components/Modals/DefaultModal.vue
+++ b/src/popup/router/components/Modals/DefaultModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal>
+  <Modal @close="resolve">
     <div v-if="title" slot="header">{{ title || $t(`modals.${type}.title`) }}</div>
     <div slot="body">{{ msg || $t(`modals.${type}.msg`) }}</div>
     <div slot="footer">
diff --git a/src/popup/router/components/Modals/TipBadgeModal.vue b/src/popup/router/components/Modals/TipBadgeModal.vue
new file mode 100644
index 0000000000..e4a855226e
--- /dev/null
+++ b/src/popup/router/components/Modals/TipBadgeModal.vue
@@ -0,0 +1,58 @@
+<template>
+  <Modal @close="resolve">
+    <div class="badge-modal-header" slot="header">
+      <UrlBadge :type="verifiedStatus" />
+      <h4>
+        {{
+          verifiedStatus == 'verified'
+            ? $t('pages.tipPage.whatIsVerifieddUrl')
+            : $t('pages.tipPage.whatIsUntrustedUrl')
+        }}
+      </h4>
+    </div>
+    <div slot="body">
+      {{
+        verifiedStatus == 'verified'
+          ? $t('pages.tipPage.verifiedUrlInfo')
+          : $t('pages.tipPage.untrustedUrlInfo')
+      }}
+    </div>
+    <div slot="footer">
+      <Button class="ok-button" @click="resolve">{{ $t('pages.tipPage.OkButton') }}</Button>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import Modal from '../Modal';
+import Button from '../Button';
+import UrlBadge from '../UrlBadge';
+
+export default {
+  props: {
+    resolve: { type: Function, required: true },
+    verifiedStatus: { type: String, required: true },
+  },
+  components: { Modal, Button, UrlBadge },
+};
+</script>
+
+<style lang="scss" scoped>
+.badge-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .badge {
+    font-weight: 400 !important;
+    margin: 0 !important;
+  }
+  h4 {
+    margin: 0 5px;
+  }
+}
+.ok-button {
+  width: 120px !important;
+  font-weight: 700 !important;
+  font-size: 15px !important;
+}
+</style>
diff --git a/src/popup/router/components/Modals/TipVerifiedModal.vue b/src/popup/router/components/Modals/TipVerifiedModal.vue
deleted file mode 100644
index 326230348e..0000000000
--- a/src/popup/router/components/Modals/TipVerifiedModal.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <Modal>
-    <div slot="body">
-      <span style="display:block;margin-bottom:1rem;">
-        <CheckIcon />
-        This URL has been verified.
-      </span>
-      This means that the creator of the content there or the website owner has successfully claimed
-      tips for this url.
-    </div>
-    <div slot="footer">
-      <Button @click="resolve">OK</Button>
-    </div>
-  </Modal>
-</template>
-
-<script>
-import Modal from '../Modal';
-import Button from '../Button';
-import CheckIcon from '../../../../icons/check-icon.svg?vue-component';
-
-export default {
-  props: {
-    resolve: { type: Function, required: true },
-  },
-  components: { Modal, Button, CheckIcon },
-};
-</script>
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/modals.js b/src/popup/router/modals.js
index 593fa00bf9..44ed769d51 100644
--- a/src/popup/router/modals.js
+++ b/src/popup/router/modals.js
@@ -1,10 +1,12 @@
 import { registerModal } from '../../store/plugins/modals';
 import DefaultModal from './components/Modals/DefaultModal';
-import TipVerifiedModal from './components/Modals/TipVerifiedModal';
 import ClaimSuccessModal from './components/Modals/ClaimSuccessModal';
+import TipBadgeModal from './components/Modals/TipBadgeModal';
+import ConfirmTip from './components/Modals/ConfirmTip';
 
 export default async () => {
   registerModal({ name: 'default', component: DefaultModal });
-  registerModal({ name: 'tip-verified', component: TipVerifiedModal });
   registerModal({ name: 'claim-success', component: ClaimSuccessModal });
+  registerModal({ name: 'tip-badge', component: TipBadgeModal });
+  registerModal({ name: 'confirm-tip', component: ConfirmTip });
 };
diff --git a/src/popup/router/pages/Retip.vue b/src/popup/router/pages/Retip.vue
index 6a6b9ddffd..09f9038e69 100644
--- a/src/popup/router/pages/Retip.vue
+++ b/src/popup/router/pages/Retip.vue
@@ -75,9 +75,6 @@ export default {
     amount() {
       this.amountError = false;
     },
-    urlVerified(val) {
-      if (val) this.$store.dispatch('modals/open', { name: 'tip-verified' });
-    },
   },
   async created() {
     this.loading = true;
diff --git a/src/popup/router/pages/SecuritySettings.vue b/src/popup/router/pages/SecuritySettings.vue
index e202d417bb..2c9fa879de 100644
--- a/src/popup/router/pages/SecuritySettings.vue
+++ b/src/popup/router/pages/SecuritySettings.vue
@@ -13,7 +13,7 @@
         <ae-loader />
       </div>
     </div>
-    <Modal v-if="type == 3" :modal="modal">
+    <div v-if="type == 3 && modal.visible">
       <div slot="content">
         <small v-if="seedPhrase == '' && !loading && type == '3'">{{
           $t('pages.securitySettings.seedPhraseWarning')
@@ -49,7 +49,7 @@
           {{ $t('pages.seedPhrase.doneThis') }}
         </button>
       </div>
-    </Modal>
+    </div>
     <div v-if="type == 4">
       <h3 class="phraseTitle">{{ $t('pages.seedPhrase.confirmSeedPhrase') }}</h3>
       <ae-phraser>
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..7600e0bd83 100644
--- a/src/popup/router/pages/TipPage.vue
+++ b/src/popup/router/pages/TipPage.vue
@@ -4,11 +4,9 @@
       <p class="primary-title text-left mb-8 f-16" :class="{ 'title-holder': !confirmMode }">
         <template v-if="!confirmMode">
           <div>
-            {{ $t('pages.tipPage.heading') }}
-            <span class="secondary-text">{{ $t('pages.appVUE.aeid') }}</span>
-            {{ $t('pages.tipPage.to') }}
+            {{ $t('pages.tipPage.url') }}
           </div>
-          <UrlBadge :type="verifiedStatus" />
+          <UrlBadge @click.native="showBadgeModal" :type="verifiedStatus" />
         </template>
         <template v-else>
           {{ $t('pages.tipPage.headingSending') }}
@@ -41,6 +39,7 @@
         />
         <Textarea v-model="note" :placeholder="$t('pages.tipPage.titlePlaceholder')" size="sm" />
         <Button
+          class="send-tip-button"
           @click="toConfirm"
           :disabled="!note || amountError || noteError || !minCallFee || editUrl"
           data-cy="send-tip"
@@ -131,9 +130,6 @@ export default {
     amount() {
       this.amountError = !+this.amount || this.amount <= 0;
     },
-    urlVerified(val) {
-      if (val) this.$store.dispatch('modals/open', { name: 'tip-verified' });
-    },
     $route: {
       immediate: true,
       handler({ fullPath }) {
@@ -171,6 +167,12 @@ export default {
     }).min;
   },
   methods: {
+    showBadgeModal() {
+      this.$store.dispatch('modals/open', {
+        name: 'tip-badge',
+        verifiedStatus: this.verifiedStatus,
+      });
+    },
     async persistTipDetails() {
       if (this.tip) {
         const { amount, note, exp } = this.tip;
@@ -189,7 +191,15 @@ export default {
         },
       );
     },
-    toConfirm() {
+    async toConfirm() {
+      if (!this.urlVerified) {
+        const allowToConfirm = await this.$store
+          .dispatch('modals/open', { name: 'confirm-tip' })
+          .catch(() => false);
+        if (!allowToConfirm) {
+          return;
+        }
+      }
       this.amountError = !this.amount || !this.minCallFee || this.maxValue - this.amount <= 0;
       this.amountError = this.amountError || !+this.amount || this.amount <= 0;
       this.noteError = !this.note || !this.url;
@@ -206,8 +216,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',
           });
@@ -225,6 +235,10 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../../common/variables';
+.send-tip-button {
+  font-weight: bold !important;
+  font-size: 15px !important;
+}
 .tour__step3 {
   margin: 0 10px;
   padding: 12px 10px 4px;
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');
   });
 
diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
index 6f6f13a3c9..d314d16483 100644
--- a/tests/e2e/support/commands.js
+++ b/tests/e2e/support/commands.js
@@ -120,7 +120,9 @@ Cypress.Commands.add('shouldRedirect', (url, to) => {
 });
 
 Cypress.Commands.add('openMenu', () => {
-  cy.get('[data-cy=hamburger]').click();
+  cy.get('[data-cy=hamburger]')
+    .click()
+    .wait(1500);
 });
 
 Cypress.Commands.add('closeMenu', (from = 'button') => {
@@ -206,6 +208,17 @@ Cypress.Commands.add('toConfirmTip', (tip = {}) => {
     .buttonShouldNotBeDisabled('[data-cy=send-tip]')
     .get('[data-cy=send-tip]')
     .click()
+    .get('.confirmtip-modal--footer')
+    .should('be.visible')
+    .get('[data-cy=cancel-tip]')
+    .click()
+    .wait(1000)
+    .get('[data-cy=send-tip]')
+    .click()
+    .get('.confirmtip-modal--footer')
+    .should('be.visible')
+    .get('[data-cy=to-confirm]')
+    .click()
     .get('[data-cy=confirm-tip]')
     .should('be.visible')
     .buttonShouldNotBeDisabled('[data-cy=confirm-tip]')