diff --git a/package-lock.json b/package-lock.json
index 2c4c3e43d..8e1090ab1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,7 @@
   "requires": true,
   "dependencies": {
     "@aeternity/aepp-components": {
-      "version": "git+https://github.com/aeternity/aepp-components.git#dedf56a5bd08465846b06945cf05a6a65fb94212",
+      "version": "git+https://github.com/aeternity/aepp-components.git#791b2b7d9dde531691778826cfc539db97c296a9",
       "from": "git+https://github.com/aeternity/aepp-components.git#develop",
       "requires": {
         "@download/blockies": "^1.0.3",
@@ -4229,6 +4229,21 @@
       "integrity": "sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg==",
       "dev": true
     },
+    "@zxing/library": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.17.1.tgz",
+      "integrity": "sha512-RuiBZuteGaFXCle/b0X+g3peN8UpDc3pGe/J7hZBzKWaMZLbjensR7ja3vy47xWhXU4e8MICGqegPMxc2V2sow==",
+      "requires": {
+        "@zxing/text-encoding": "~0.9.0",
+        "ts-custom-error": "^3.0.0"
+      }
+    },
+    "@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -5674,11 +5689,6 @@
         "caller-callsite": "^2.0.0"
       }
     },
-    "callforth": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.3.1.tgz",
-      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
-    },
     "callsites": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
@@ -7089,6 +7099,15 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-3.2.0.tgz",
       "integrity": "sha512-tYsK0H9M8POmJTVnfyIsiRgoOxnypa9IQIbf/Hsgi7vbgUYRHtBUfvXwq4RhMqLIVrCeJLXF2hTXTDNY0a/eTA=="
     },
+    "cordova-plugin-qrscanner": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-qrscanner/-/cordova-plugin-qrscanner-3.0.1.tgz",
+      "integrity": "sha512-xrwOP3nD+VmRSiV0w7chZ5PLw2YwpI9vtLdeoGNYLLzmmjjYbyIof+x9vOEOgjtwrg9S61rukmOZhQAmkzaosA==",
+      "requires": {
+        "qrcode-reader": "^1.0.4",
+        "webrtc-adapter": "^3.1.4"
+      }
+    },
     "cordova-plugin-splashscreen": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-5.0.4.tgz",
@@ -15548,6 +15567,11 @@
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
     },
+    "qrcode-reader": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/qrcode-reader/-/qrcode-reader-1.0.4.tgz",
+      "integrity": "sha512-rRjALGNh9zVqvweg1j5OKIQKNsw3bLC+7qwlnead5K/9cb1cEIAGkwikt/09U0K+2IDWGD9CC6SP7tHAjUeqvQ=="
+    },
     "qrcode.vue": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-1.7.0.tgz",
@@ -16614,6 +16638,11 @@
         }
       }
     },
+    "sdp": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-1.5.4.tgz",
+      "integrity": "sha1-jgOPbdsUvXZa4fS1IW4SCUUR4NA="
+    },
     "seedrandom": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
@@ -19224,6 +19253,11 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "ts-custom-error": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.2.0.tgz",
+      "integrity": "sha512-cBvC2QjtvJ9JfWLvstVnI45Y46Y5dMxIaG1TDMGAD/R87hpvqFL+7LhvUDhnRCfOnx/xitollFWWvUKKKhbN0A=="
+    },
     "tsconfig-paths": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz",
@@ -19906,16 +19940,6 @@
         "vue-style-loader": "^4.1.0"
       }
     },
-    "vue-qrcode-reader": {
-      "version": "2.3.12",
-      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-2.3.12.tgz",
-      "integrity": "sha512-LQsdMYvd/UuyzydSqEfI+08aiqvIg2UZXwFCj13SFQ3KcXzcOSyLNZmbDLVrBhaALh4P7EQJsaLOjuiM/6QgqQ==",
-      "requires": {
-        "callforth": "^0.3.1",
-        "core-js": "^3.6.5",
-        "vue": "^2.6.11"
-      }
-    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
@@ -20677,6 +20701,14 @@
         "source-map": "~0.6.1"
       }
     },
+    "webrtc-adapter": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-3.4.3.tgz",
+      "integrity": "sha1-tjYGLu6abvFYrNDYUBtnhDS1bxY=",
+      "requires": {
+        "sdp": "^1.5.0"
+      }
+    },
     "websocket": {
       "version": "1.0.31",
       "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.31.tgz",
diff --git a/package.json b/package.json
index b4d0d49c0..b68273e8e 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@stamp/it": "^1.1.0",
     "@vue/cli-plugin-e2e-cypress": "^3.12.1",
     "@vue/cli-service": "^3.12.0",
+    "@zxing/library": "^0.17.1",
     "aepp-raendom": "github:aeternity/aepp-raendom#feature/layout-superhero",
     "aeternity-tokens": "^1.0.2",
     "axios": "^0.19.0",
@@ -46,6 +47,7 @@
     "cordova-ios": "^5.1.1",
     "cordova-plugin-headercolor": "^1.0.0",
     "cordova-plugin-inappbrowser": "^3.2.0",
+    "cordova-plugin-qrscanner": "^3.0.1",
     "cordova-plugin-splashscreen": "^5.0.4",
     "cordova-plugin-statusbar": "^2.4.3",
     "cordova-plugin-wkwebview-engine": "github:mwchambers/cordova-plugin-wkwebview-engine#da67d6bb6ce8597c38fc69e66b84566e34efea8d",
@@ -60,7 +62,6 @@
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.21.0",
-    "vue-qrcode-reader": "^2.3.12",
     "vue-router": "^3.4.3",
     "vue-tour": "^1.5.0",
     "vuex": "^3.5.1",
@@ -130,7 +131,8 @@
       "ionic-plugin-deeplinks": {
         "URL_SCHEME": "superhero",
         "DEEPLINK_HOST": "wallet.superhero.com"
-      }
+      },
+      "cordova-plugin-qrscanner": {}
     },
     "platforms": [
       "android",
diff --git a/src/popup/locales/en.json b/src/popup/locales/en.json
index 703a0d7a1..d46af1812 100644
--- a/src/popup/locales/en.json
+++ b/src/popup/locales/en.json
@@ -158,6 +158,9 @@
         "msg": "Insufficient balance"
       }
     },
+    "qrCodeReader": {
+      "cameraNotAllowed": "ERROR: you need to grant camera access permisson"
+    },
     "cancel": "Cancel",
     "confirm": "Confirm"
   },
@@ -566,10 +569,6 @@
       "heading": "Privacy Policy",
       "content": "Your privacy is important to us. It is Superhero's policy to respect your privacy regarding any information we may collect from you across our website and other sites we own and operate. We don't ask for personal information to provide a service to you. We don't collect and retain any information for providing your requested service. We don’t share any personally identifying information publicly or with third-parties. Our website and browser extension may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies. Your            continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us. This policy is effective as of 31 January 2020."
     },
-    "qrCodeReader": {
-      "backToAccount": "Back to account",
-      "heading": "Qr Code Scanner"
-    },
     "receive": {
       "backToAccount": "Back to account",
       "heading": "To receive tokens, provide this address or have the payor scan the QR code below.",
@@ -645,7 +644,8 @@
       "to": "To",
       "from": "From",
       "txhash": "Transaction Hash",
-      "home": "Home"
+      "home": "Home",
+      "scanAddress": "Scan AE Address"
     },
     "settings": {
       "backToAccount": "Back to account",
diff --git a/src/popup/router/components/Modals/QrCodeReader.vue b/src/popup/router/components/Modals/QrCodeReader.vue
new file mode 100644
index 000000000..6c4d5a604
--- /dev/null
+++ b/src/popup/router/components/Modals/QrCodeReader.vue
@@ -0,0 +1,155 @@
+<template>
+  <Modal v-if="browserReader || !cameraAllowed" @close="resolve" close>
+    <template slot="header">{{ title }}</template>
+    <div class="qr-code-reader" slot="body">
+      <div v-show="cameraAllowed">
+        <video v-show="cameraAllowed" ref="qrCodeVideo" />
+      </div>
+      <div v-if="!cameraAllowed">
+        {{ $t('modals.qrCodeReader.cameraNotAllowed') }}
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import { BrowserQRCodeReader } from '@zxing/library/esm5/browser/BrowserQRCodeReader';
+import Modal from '../Modal';
+import openUrl from '../../../utils/openUrl';
+
+const handleUnknownError = error => console.log(error);
+
+export default {
+  components: { Modal },
+  props: {
+    title: { type: String, required: true },
+    resolve: { type: Function, required: true },
+    reject: { type: Function, required: true },
+  },
+  data: () => ({
+    // allow camera while QRScanner is loading to not show cameraNotAllowed before actual check
+    cameraAllowed: process.env.PLATFORM === 'cordova',
+    browserReader: !(process.env.PLATFORM === 'cordova') && new BrowserQRCodeReader(),
+    style: null,
+    headerText: '',
+  }),
+  watch: {
+    async cameraAllowed(value) {
+      if (!value) {
+        this.stopReading();
+        return;
+      }
+
+      try {
+        this.resolve(await this.scan());
+      } catch (error) {
+        if (error.name === 'NotAllowedError') {
+          try {
+            await new Promise((resolve, reject) => {
+              if (process.env.IS_EXTENSION) {
+                openUrl(browser.extension.getURL('./popup/CameraRequestPermission.html'));
+                reject();
+              }
+              if (navigator.mediaDevices.getUserMedia)
+                navigator.mediaDevices
+                  .getUserMedia({ video: true })
+                  .then(resolve)
+                  .catch(reject);
+              else reject(new Error('Sorry, your browser does not support getUserMedia'));
+            });
+          } catch {
+            this.cameraAllowed = false;
+          }
+          return;
+        }
+        handleUnknownError(error);
+      }
+    },
+    $route() {
+      this.resolve();
+    },
+  },
+  async mounted() {
+    if (process.env.PLATFORM === 'cordova') {
+      try {
+        await new Promise((resolve, reject) =>
+          window.QRScanner.prepare((error, status) =>
+            !error && status.authorized
+              ? resolve()
+              : reject(error || new Error('Denied to use the camera')),
+          ),
+        );
+      } catch {
+        this.cameraAllowed = false;
+      }
+      this.resolve(await this.scan());
+      return;
+    }
+
+    const status =
+      navigator.permissions &&
+      (await navigator.permissions.query({ name: 'camera' }).catch(error => {
+        const firefoxExceptionMessage =
+          "'name' member of PermissionDescriptor 'camera' is not a valid value for enumeration PermissionName.";
+        if (error.message !== firefoxExceptionMessage) handleUnknownError(error);
+        return null;
+      }));
+    if (status) {
+      this.cameraAllowed = status.state !== 'denied';
+      status.onchange = () => {
+        this.cameraAllowed = status.state !== 'denied';
+      };
+    }
+
+    this.cameraAllowed = true;
+  },
+  beforeDestroy() {
+    this.stopReading();
+  },
+  methods: {
+    async scan() {
+      return process.env.PLATFORM === 'cordova'
+        ? new Promise((resolve, reject) => {
+            window.QRScanner.scan((error, text) =>
+              !error && text ? resolve(text) : reject(error),
+            );
+            window.QRScanner.show();
+            this.style = document.createElement('style');
+            this.style.type = 'text/css';
+            this.style.appendChild(
+              document.createTextNode(
+                'html, body, .ae-main { background: transparent !important }',
+              ),
+            );
+            document.head.appendChild(this.style);
+            document.querySelector('.popup').style.display = 'none';
+            document.querySelector('.header .content div:not(.title)').style.display = 'none';
+            this.headerText = document.querySelector('.header .title').innerText;
+            document.querySelector('.header .title').innerText = 'Scan QR';
+          })
+        : (
+            await this.browserReader.decodeFromInputVideoDevice(undefined, this.$refs.qrCodeVideo)
+          ).getText();
+    },
+    stopReading() {
+      if (process.env.PLATFORM === 'cordova') {
+        if (document.head.contains(this.style)) document.head.removeChild(this.style);
+        document.querySelector('.popup').style.display = '';
+        document.querySelector('.header .content div:not(.title)').style.display = 'none';
+        document.querySelector('.header .title').innerText = this.headerText;
+        window.QRScanner.destroy();
+      } else this.browserReader.reset();
+    },
+    cancelReading() {
+      this.stopReading();
+      this.reject(new Error('Cancelled by user'));
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.qr-code-reader video {
+  max-width: 70vw;
+}
+</style>
diff --git a/src/popup/router/modals.js b/src/popup/router/modals.js
index 05c0d844d..bd4decc35 100644
--- a/src/popup/router/modals.js
+++ b/src/popup/router/modals.js
@@ -7,6 +7,7 @@ import Confirm from './components/Modals/Confirm';
 import ErrorLog from './components/Modals/ErrorLog';
 import ConfirmTransactionSign from './components/Modals/ConfirmTransactionSign';
 import ConfirmRawSign from './components/Modals/ConfirmRawSign';
+import QrCodeReader from './components/Modals/QrCodeReader';
 
 export default () => {
   registerModal({ name: 'default', component: Default });
@@ -26,4 +27,5 @@ export default () => {
     showInPopupIfWebFrame: true,
   });
   registerModal({ name: 'confirm-connect', showInPopupIfWebFrame: true });
+  registerModal({ name: 'read-qr-code', component: QrCodeReader });
 };
diff --git a/src/popup/router/pages/QrCodeReader.vue b/src/popup/router/pages/QrCodeReader.vue
deleted file mode 100644
index e04cc548f..000000000
--- a/src/popup/router/pages/QrCodeReader.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div class="popup popup-camera">
-    <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
-  </div>
-</template>
-
-<script>
-import { QrcodeStream } from 'vue-qrcode-reader';
-import { checkAddress, chekAensName } from '../../utils/helper';
-import openUrl from '../../utils/openUrl';
-
-export default {
-  components: {
-    QrcodeStream,
-  },
-  props: {
-    type: String,
-  },
-  data() {
-    return {
-      errorMessage: '',
-    };
-  },
-  created() {
-    this.$store.commit('setMainLoading', true);
-  },
-  methods: {
-    onDecode(address) {
-      if (this.type === 'send' && (checkAddress(address) || chekAensName(address))) {
-        this.$router.push({ name: 'send', params: { address } });
-      }
-    },
-    async onInit(promise) {
-      const url = browser.extension.getURL('./popup/CameraRequestPermission.html');
-      try {
-        await promise;
-        this.$store.commit('setMainLoading', false);
-      } catch (error) {
-        this.$store.commit('setMainLoading', false);
-        openUrl(url);
-        if (error.name === 'NotAllowedError') {
-          this.errorMessage = 'ERROR: you need to grant camera access permisson';
-        } else if (error.name === 'NotFoundError') {
-          this.errorMessage = 'ERROR: no camera on this device';
-        } else if (error.name === 'NotSupportedError') {
-          this.errorMessage = 'ERROR: secure context required (HTTPS, localhost)';
-        } else if (error.name === 'NotReadableError') {
-          this.errorMessage = 'ERROR: is the camera already in use?';
-        } else if (error.name === 'OverconstrainedError') {
-          this.errorMessage = 'ERROR: installed cameras are not suitable';
-        } else if (error.name === 'StreamApiNotSupportedError') {
-          this.errorMessage = 'ERROR: Stream API is not supported in this browser';
-        }
-        this.$store.dispatch('modals/open', { name: 'default', msg: this.errorMessage });
-        this.$router.go(-1);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.popup-camera .wrapper {
-  position: fixed;
-  top: 50px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 0;
-  max-width: 380px;
-}
-</style>
diff --git a/src/popup/router/pages/Send.vue b/src/popup/router/pages/Send.vue
index 6a74caa2a..a706f72ec 100644
--- a/src/popup/router/pages/Send.vue
+++ b/src/popup/router/pages/Send.vue
@@ -208,12 +208,10 @@ export default {
     this.fetchFee();
   },
   methods: {
-    scan() {
-      this.$router.push({
-        name: 'qrCodeReader',
-        params: {
-          type: 'send',
-        },
+    async scan() {
+      this.form.address = await this.$store.dispatch('modals/open', {
+        name: 'read-qr-code',
+        title: this.$t('pages.send.scanAddress'),
       });
     },
     async fetchFee() {
diff --git a/src/popup/router/routes/index.js b/src/popup/router/routes/index.js
index 40e58177a..debb4131a 100644
--- a/src/popup/router/routes/index.js
+++ b/src/popup/router/routes/index.js
@@ -10,7 +10,6 @@ import SecuritySettings from '../pages/SecuritySettings';
 import AboutSettings from '../pages/AboutSettings';
 import Tip from '../pages/Tip';
 import Retip from '../pages/Retip';
-import QrCodeReader from '../pages/QrCodeReader';
 import TermsOfService from '../pages/TermsOfService';
 import PrivacyPolicy from '../pages/PrivacyPolicy';
 import ImportAccount from '../pages/ImportAccount';
@@ -151,16 +150,6 @@ export default [
       title: 'claim-tips',
     },
   },
-  {
-    path: '/qrCodeReader',
-    name: 'qrCodeReader',
-    props: true,
-    component: QrCodeReader,
-    meta: {
-      title: 'scanQr',
-      notPersist: true,
-    },
-  },
   {
     path: '/termsOfService',
     component: TermsOfService,
diff --git a/tests/e2e/integration/other.js b/tests/e2e/integration/other.js
index 51a4cc8a7..ee4e168b9 100644
--- a/tests/e2e/integration/other.js
+++ b/tests/e2e/integration/other.js
@@ -11,7 +11,6 @@ describe('Tests cases not connected to specific page', () => {
     { path: '/ask-accounts', redirect: false },
     { path: '/message-sign', redirect: false },
     { path: '/success-tip', redirect: false },
-    { path: '/qrCodeReader', redirect: false },
     { path: '/intro', redirect: false },
     { path: '/notifications', redirect: false },
     { path: '/tip', redirect: true },
diff --git a/webpack.config.js b/webpack.config.js
index 8fc948f96..91e52efd3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -170,6 +170,7 @@ const getConfig = platform => {
               },
               { from: 'icons/icon_48.png', to: `icons/icon_48.png` },
               { from: 'icons/icon_128.png', to: `icons/icon_128.png` },
+              { from: 'icons/request_permission.jpg', to: `icons/request_permission.jpg` },
               {
                 from: path.join(__dirname, 'src/content-scripts/tipButton.scss'),
                 to: path.join(