diff --git a/src/components/Bar.vue b/src/components/Bar.vue
deleted file mode 100644
index ca8c9b8..0000000
--- a/src/components/Bar.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <q-dialog ref="dialog" v-model="showDialog" @hide="closeDialog">
-    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <div>
-        <q-form class="q-gutter-md">
-          <q-input
-            filled
-            dense
-            type="textarea"
-            label="Paste an invoice, payment request or lnurl code *"
-          >
-          </q-input>
-          <div class="row q-mt-lg">
-            <q-btn unelevated color="deep-purple" type="submit">Read</q-btn>
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-          </div>
-        </q-form>
-      </div>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script>
-export default {
-  name: 'Bar',
-  props: ['bolt11Invoice'],
-  data() {
-    return {
-      showDialog: true,
-    }
-  },
-  methods: {
-    closeDialog() {
-      this.$browser.runtime.sendMessage('hide_iframe');
-      this.showDialog = true
-    },
-  },
-}
-</script>
diff --git a/src/components/Foo.vue b/src/components/Foo.vue
deleted file mode 100644
index 83b10bd..0000000
--- a/src/components/Foo.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="p-3">
-    Fooo
-  </div>
-</template>
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
deleted file mode 100644
index d934b57..0000000
--- a/src/components/Layout.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <q-dialog ref="dialog" v-model="showDialog">
-    <q-card style="width: 700px; max-width: 80vw">
-      <q-card-section>
-        <q-input
-          filled
-          dense
-          type="textarea"
-          label="Paste an invoice, payment request or lnurl code *"
-        >
-        </q-input>
-        <div class="q-mt-lg">
-          <q-btn unelevated color="deep-purple" type="submit">Read</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-        </div>
-      </q-card-section>
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn flat label="OK" v-close-popup />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script>
-export default {
-  name: 'Layout',
-  props: ['bolt11Invoice'],
-  computed: {
-    contentSize() {
-      return this.moreContent ? 150 : 5
-    },
-  },
-  data() {
-    return {
-      showDialog: true,
-      layout: false,
-
-      moreContent: true,
-      drawer: false,
-      drawerR: false,
-
-      lorem:
-        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus, ratione eum minus fuga, quasi dicta facilis corporis magnam, suscipit at quo nostrum!',
-    }
-  },
-
-  // computed: {
-  //   contentSize() {
-  //     return this.moreContent ? 150 : 5
-  //   },
-  // },
-
-  methods: {
-    // following method is REQUIRED
-    // (don't change its name --> "show")
-    show() {
-      this.$refs.dialog.show()
-    },
-
-    // following method is REQUIRED
-    // (don't change its name --> "hide")
-    hide() {
-      this.$refs.dialog.hide()
-    },
-
-    onDialogHide() {
-      // required to be emitted
-      // when QDialog emits "hide" event
-      this.$emit('hide')
-    },
-
-    onOKClick() {
-      // on OK, it is REQUIRED to
-      // emit "ok" event (with optional payload)
-      // before hiding the QDialog
-      this.$emit('ok')
-      // or with payload: this.$emit('ok', { ... })
-
-      // then hiding dialog
-      this.hide()
-    },
-
-    onCancelClick() {
-      // we just need to hide dialog
-      this.hide()
-    },
-  },
-}
-</script>
diff --git a/src/components/PayInvoice.vue b/src/components/PayInvoice.vue
index e2633ed..e162510 100644
--- a/src/components/PayInvoice.vue
+++ b/src/components/PayInvoice.vue
@@ -85,12 +85,36 @@
           <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
         </div>
       </div>
+      <div v-else-if="showPaymentStatus">
+        <q-card-section dark bordered>
+          <p class="text-center">
+            <q-icon v-if="paymentDetails.isPayed" name="check_circle" size="5.5em" color="green" />
+            <q-spinner-bars v-else color="purple" size="5.5em" />
+          </p>
+          <p class="q-my-none text-h6 text-center">{{ paymentDetails.message }}</p>
+          <q-expansion-item
+            v-if="paymentDetails.details && paymentDetails.details.length"
+            group="extras"
+            icon="info"
+            class="bg-yellow-1"
+            label="Details"
+          >
+            <span v-html="paymentDetails.details"></span>
+          </q-expansion-item>
+        </q-card-section>
+
+        <div class="row q-mt-lg">
+          <q-space />
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto cursor-pointer">Close</q-btn>
+          <q-space />
+        </div>
+      </div>
       <div v-else-if="showErrorDetais">
         <q-card-section dark bordered class="bg-red-5">
           <div class="text-h6">{{ error.title }}</div>
           <div class="text-subtitle2">{{ error.message }}</div>
         </q-card-section>
-        <q-expansion-item group="extras" class="bg-yellow-2" icon="info" label="Details">
+        <q-expansion-item group="extras" class="bg-yellow-2" icon="error" label="Details">
           <p class="text-wrap">
             {{ parse.data.request }}
           </p>
@@ -142,6 +166,11 @@ export default {
         },
         paymentChecker: null,
       },
+      paymentDetails: {
+        isPayed: false,
+        message: '...',
+        details: '',
+      },
       receive: {
         show: false,
         status: 'pending',
@@ -178,6 +207,9 @@ export default {
     showErrorDetais: function () {
       return this.currentView === 'error'
     },
+    showPaymentStatus: function () {
+      return this.currentView === 'paymentStatus'
+    },
   },
   filters: {
     msatoshiFormat: function (value) {
@@ -273,11 +305,8 @@ export default {
       this.balance = Math.round(response.data.balance / 1000)
     },
     payInvoice: async function () {
-      const dismissPaymentMsg = this.$q.notify({
-        timeout: 0,
-        message: 'Processing payment...',
-      })
       try {
+        this.showPaymentInProgressCard()
         const response = await lnbitsApi(this.serverUrl).payInvoice(
           this.activeWallet,
           this.parse.data.request
@@ -294,22 +323,18 @@ export default {
         this.parse.paymentChecker = setInterval(() => {
           if (payResponse.data.paid) {
             clearInterval(this.parse.paymentChecker)
-            dismissPaymentMsg()
-            this.closeDialog()
+            const preimageHtml = `<p class="text-wrap"><strong>Preimage: </strong> ${payResponse.data.preimage} </p>`
+            this.showPaymentCompentedCard(preimageHtml)
           }
-        }, 2000)
+        }, 1000)
       } catch (err) {
+        console.error('### err', JSON.stringify(err))
         this.showErrorCard(err, 'Cannot pay BOLT11 invoice!')
-        dismissPaymentMsg()
       }
     },
     payLnurl: async function () {
-      const dismissPaymentMsg = this.$q.notify({
-        timeout: 0,
-        message: 'Processing payment...',
-      })
-
       try {
+        this.showPaymentInProgressCard()
         const response = await lnbitsApi(this.serverUrl).payLnurl(
           this.activeWallet,
           this.parse.lnurlpay.callback,
@@ -329,30 +354,21 @@ export default {
             response.data.payment_hash
           )
           if (res.data.paid) {
-            // this.showDialog = false
-            dismissPaymentMsg()
             clearInterval(this.parse.paymentChecker)
 
             // show lnurlpay success action
             if (response.data.success_action) {
               switch (response.data.success_action.tag) {
                 case 'url':
-                  this.$q.notify({
-                    message: `<a target="_blank" style="color: inherit" href="${response.data.success_action.url}">${response.data.success_action.url}</a>`,
-                    caption: response.data.success_action.description,
-                    html: true,
-                    type: 'positive',
-                    timeout: 0,
-                    closeBtn: true,
-                  })
+                  const actionDescription = `<strong>Message: </strong> ${response.data.success_action.description}`
+                  const actionLink = `<a target="_blank" style="color: inherit" href="${response.data.success_action.url}">${response.data.success_action.url}</a>`
+                  this.showPaymentCompentedCard(
+                    `<p class="text-wrap">${actionDescription}<br>${actionLink}</p>`
+                  )
                   break
                 case 'message':
-                  this.$q.notify({
-                    message: response.data.success_action.message,
-                    type: 'positive',
-                    timeout: 0,
-                    closeBtn: true,
-                  })
+                  const message = `<p class="text-wrap"><strong>Message: </strong> ${response.data.success_action.message}</p>`
+                  this.showPaymentCompentedCard(message)
                   break
               }
             }
@@ -360,7 +376,6 @@ export default {
         }, 2000)
       } catch (err) {
         this.showErrorCard(err, 'Cannot pay LNURL invoice!')
-        dismissPaymentMsg()
       }
     },
     gotoOptionsPage() {
@@ -374,6 +389,18 @@ export default {
       this.error.title = title
       this.error.message = (err.message || err) + '.'
     },
+    showPaymentInProgressCard() {
+      this.currentView = 'paymentStatus'
+      this.paymentDetails.isPayed = false
+      this.paymentDetails.message = 'Processing payment...'
+      this.paymentDetails.details = ''
+    },
+    showPaymentCompentedCard(details = '') {
+      this.currentView = 'paymentStatus'
+      this.paymentDetails.isPayed = true
+      this.paymentDetails.message = 'Payment Successful!'
+      this.paymentDetails.details = details
+    },
   },
   mounted: async function () {
     this.showDialog = true
diff --git a/src/views/content-inject/content.js b/src/views/content-inject/content.js
index 8e82fb7..091080a 100644
--- a/src/views/content-inject/content.js
+++ b/src/views/content-inject/content.js
@@ -32,7 +32,7 @@ try {
   window.addEventListener("message", (e) => {
     const data = e.data;
     if (router.currentRoute.path === '/payment') {
-      router.replace('/foo')
+      router.replace('/loading')
     }
     setTimeout(() => {
       router.replace({
diff --git a/src/views/content-inject/routes.js b/src/views/content-inject/routes.js
index acc149c..eb75181 100644
--- a/src/views/content-inject/routes.js
+++ b/src/views/content-inject/routes.js
@@ -1,17 +1,7 @@
-import Foo from '../../components/Foo.vue'
-import Bar from '../../components/Bar.vue'
 import Loading from '../../components/Loading.vue'
 import PayInvoice from '../../components/PayInvoice.vue'
 
 const routes = [{
-        path: '/foo',
-        component: Foo
-    },
-    {
-        path: '/bar',
-        component: Bar
-    },
-    {
         path: '/payment',
         component: PayInvoice
     },
diff --git a/src/views/options/routes.js b/src/views/options/routes.js
deleted file mode 100644
index 50f7036..0000000
--- a/src/views/options/routes.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Foo from '../../components/Foo.vue'
-import Bar from '../../components/Bar.vue'
-
-const routes = [{
-        path: '/foo',
-        component: Foo
-    },
-    {
-        path: '/bar',
-        component: Bar
-    }
-]
-
-export default routes
\ No newline at end of file