diff --git a/src/icons/circle-check-outlined.svg b/src/icons/check-mark-circle.svg
similarity index 100%
rename from src/icons/circle-check-outlined.svg
rename to src/icons/check-mark-circle.svg
diff --git a/src/popup/App.vue b/src/popup/App.vue
index 953dcca3c..c4bd76a6e 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -14,8 +14,6 @@
         class="app-inner"
         :class="{ 'styled-scrollbar': showScrollbar }"
       >
-        <Header v-if="showHeader" />
-
         <!--
           Layer displayed under the password protection modal when content is not visible.
         -->
@@ -32,8 +30,8 @@
         <IonRouterOutlet
           v-show="showRouter"
           :animated="!RUNNING_IN_TESTS && !IS_FIREFOX"
-          :class="{ 'show-header': showHeader, ios: IS_IOS }"
-          class="main"
+          :class="{ 'has-header': showHeader, ios: IS_IOS }"
+          class="router-outlet"
         />
 
         <ConnectionStatus
@@ -103,7 +101,6 @@ import {
 } from '@/composables';
 import { useTransferSendHandler } from '@/composables/transferSendHandler';
 
-import Header from '@/popup/components/Header.vue';
 import ConnectionStatus from '@/popup/components/ConnectionStatus.vue';
 import Loader from '@/popup/components/Loader.vue';
 import QrCodeReaderMobileOverlay from '@/popup/components/QrCodeReaderMobileOverlay.vue';
@@ -113,7 +110,6 @@ import AppLogo from '@/icons/logo-small.svg?vue-component';
 export default defineComponent({
   name: 'App',
   components: {
-    Header,
     ConnectionStatus,
     QrCodeReaderMobileOverlay,
     IonApp,
@@ -324,7 +320,7 @@ export default defineComponent({
   --screen-padding-x: 16px;
   --screen-border-radius: 0;
   --screen-bg-color: #{$color-bg-app};
-  --header-height: 0;
+  --header-height: 40px;
   --gap: 12px;
 
   position: relative;
@@ -353,8 +349,7 @@ export default defineComponent({
       overflow-y: auto;
     }
 
-    .main {
-      margin-top: calc(var(--header-height) + env(safe-area-inset-top));
+    .router-outlet {
       padding-bottom: env(safe-area-inset-bottom);
       background-color: var(--screen-bg-color);
 
@@ -390,10 +385,6 @@ export default defineComponent({
       left: 0;
       width: 100%;
     }
-
-    &.show-header {
-      --header-height: 40px;
-    }
   }
 
   @include mixins.env-mobile-ios {
diff --git a/src/popup/animations/index.ts b/src/popup/animations/index.ts
index da7812dca..e3e450c26 100644
--- a/src/popup/animations/index.ts
+++ b/src/popup/animations/index.ts
@@ -1,3 +1 @@
-export * from './popIn';
-export * from './popOut';
 export * from './fade';
diff --git a/src/popup/animations/popIn.ts b/src/popup/animations/popIn.ts
deleted file mode 100644
index dd93f06ad..000000000
--- a/src/popup/animations/popIn.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createAnimation } from '@ionic/vue';
-import type { IonAnimationBuilder } from '@/types';
-import { PAGE_TRANSITION_DURATION } from '@/constants';
-
-export const popInAnimation: IonAnimationBuilder = (
-  baseEl: Element,
-  opts: { enteringEl: Element; leavingEl: Element },
-) => {
-  const enteringAnimation = createAnimation()
-    .addElement(opts.enteringEl)
-    .fromTo('opacity', 0, 1)
-    .fromTo('transform', 'translateY(70%)', 'translateY(0px)')
-    .duration(PAGE_TRANSITION_DURATION);
-
-  const leavingAnimation = createAnimation()
-    .addElement(opts.leavingEl)
-    .addElement(document.querySelector('#header') as HTMLElement)
-    .fromTo('opacity', 1, 0)
-    .beforeStyles({ filter: 'blur(5px)' })
-    .afterClearStyles(['filter'])
-    .duration(PAGE_TRANSITION_DURATION);
-
-  const animation = createAnimation()
-    .addAnimation(enteringAnimation)
-    .addAnimation(leavingAnimation);
-
-  return animation;
-};
diff --git a/src/popup/animations/popOut.ts b/src/popup/animations/popOut.ts
deleted file mode 100644
index b04197deb..000000000
--- a/src/popup/animations/popOut.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createAnimation } from '@ionic/vue';
-import type { IonAnimationBuilder } from '@/types';
-import { PAGE_TRANSITION_DURATION } from '@/constants';
-
-export const popOutAnimation: IonAnimationBuilder = (
-  baseEl: Element,
-  opts: { enteringEl: Element; leavingEl: Element },
-) => {
-  const enteringAnimation = createAnimation()
-    .addElement(opts.enteringEl)
-    .addElement(document.querySelector('#header') as HTMLElement)
-    .fromTo('opacity', 0, 1)
-    .beforeStyles({ filter: 'blur(5px)' })
-    .afterClearStyles(['filter'])
-    .duration(PAGE_TRANSITION_DURATION);
-
-  const leavingAnimation = createAnimation()
-    .addElement(opts.leavingEl)
-    .fromTo('opacity', 1, 0)
-    .fromTo('transform', 'translateY(0)', 'translateY(70%)')
-    .duration(PAGE_TRANSITION_DURATION);
-
-  const animation = createAnimation()
-    .addAnimation(enteringAnimation)
-    .addAnimation(leavingAnimation);
-
-  return animation;
-};
diff --git a/src/popup/components/AccountDetailsBase.vue b/src/popup/components/AccountDetailsBase.vue
index 1c266c436..ed376d9ae 100644
--- a/src/popup/components/AccountDetailsBase.vue
+++ b/src/popup/components/AccountDetailsBase.vue
@@ -1,87 +1,88 @@
 <template>
-  <div
-    class="account-details"
-    :data-account-address="activeAccount.address"
-  >
-    <div class="account-info-wrapper">
-      <slot
-        v-if="$slots['account-info']"
-        name="account-info"
-      />
-      <AccountInfo
-        v-else
-        :account="activeAccount"
-        can-copy-address
-        show-protocol-icon
-      />
-      <BtnClose
-        data-cy="btn-close"
-        class="close-button"
-        @click="close"
-      />
-    </div>
-    <div>
-      <slot
-        v-if="$slots.balance"
-        name="balance"
-      />
-      <BalanceInfo
-        v-else
-        :balance="balanceNumeric"
-        :protocol="activeAccount.protocol"
-        horizontal-offline-message
-      />
-
-      <HorizontalScroll
-        ref="buttonsScrollContainer"
-        class="buttons"
-      >
-        <template v-if="!withoutDefaultButtons">
-          <OpenTransferReceiveModalBtn />
-          <OpenTransferSendModalBtn />
-          <OpenShareAddressModalBtn
-            :address="activeAccount.address"
-            :protocol="activeAccount.protocol"
-          />
-          <BtnBox
-            :text="$t('common.key')"
-            :icon="PrivateKeyIcon"
-            data-cy="export-private-key"
-            @click="exportPrivateKey()"
+  <PageWrapper hide-header>
+    <div
+      class="account-details-base"
+      :data-account-address="activeAccount.address"
+    >
+      <div class="account-info-wrapper">
+        <slot name="account-info">
+          <AccountInfo
+            :account="activeAccount"
+            can-copy-address
+            show-protocol-icon
           />
-        </template>
-        <slot
-          v-if="$slots.buttons"
-          name="buttons"
-        />
-      </HorizontalScroll>
-
-      <div
-        ref="headerEl"
-        class="header"
-      >
-        <slot name="navigation" />
-
-        <TransactionAndTokenFilter
-          :key="routeName!"
-          :show-all-filter-options="activeAccount.protocol === PROTOCOLS.aeternity"
-          :show-filters="isScrollEnabled"
+        </slot>
+
+        <BtnClose
+          data-cy="btn-close"
+          class="close-button"
+          @click="close"
         />
       </div>
 
-      <div
-        class="tabs-content"
-        :style="{ height: routerHeight || `${INITIAL_TABS_HEIGHT}px` }"
-      >
-        <!-- We are disabling animations on FF because of a bug that causes flickering
-          see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
-        <IonRouterOutlet
-          :animated="!IS_FIREFOX"
-          :animation="fadeAnimation"
+      <div>
+        <slot
+          v-if="$slots.balance"
+          name="balance"
         />
+        <BalanceInfo
+          v-else
+          :balance="balanceNumeric"
+          :protocol="activeAccount.protocol"
+          horizontal-offline-message
+        />
+
+        <HorizontalScroll
+          ref="buttonsScrollContainer"
+          class="buttons"
+        >
+          <template v-if="!withoutDefaultButtons">
+            <OpenTransferReceiveModalBtn />
+            <OpenTransferSendModalBtn />
+            <OpenShareAddressModalBtn
+              :address="activeAccount.address"
+              :protocol="activeAccount.protocol"
+            />
+            <BtnBox
+              :text="$t('common.key')"
+              :icon="PrivateKeyIcon"
+              data-cy="export-private-key"
+              @click="exportPrivateKey()"
+            />
+          </template>
+          <slot
+            v-if="$slots.buttons"
+            name="buttons"
+          />
+        </HorizontalScroll>
+
+        <div
+          ref="headerEl"
+          class="header"
+        >
+          <slot name="navigation" />
+
+          <TransactionAndTokenFilter
+            :key="routeName!"
+            :show-all-filter-options="activeAccount.protocol === PROTOCOLS.aeternity"
+            :show-filters="isScrollEnabled"
+          />
+        </div>
+
+        <div
+          class="tabs-content"
+          :style="{ height: routerHeight || `${INITIAL_TABS_HEIGHT}px` }"
+        >
+          <!-- We are disabling animations on FF because of a bug that causes flickering
+            see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
+          <IonRouterOutlet
+            :animated="!IS_FIREFOX"
+            :animation="fadeAnimation"
+          />
+        </div>
       </div>
     </div>
-  </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -109,8 +110,9 @@ import {
   useUi,
   useScrollConfig,
 } from '@/composables';
-import { popOutAnimation, fadeAnimation } from '@/popup/animations';
+import { fadeAnimation } from '@/popup/animations';
 
+import PageWrapper from '@/popup/components//PageWrapper.vue';
 import OpenTransferSendModalBtn from '@/popup/components/OpenTransferSendModalBtn.vue';
 import BalanceInfo from '@/popup/components/BalanceInfo.vue';
 import AccountInfo from '@/popup/components/AccountInfo.vue';
@@ -128,6 +130,7 @@ const INITIAL_TABS_HEIGHT = 330;
 export default defineComponent({
   name: 'AccountDetailsBase',
   components: {
+    PageWrapper,
     AccountInfo,
     BalanceInfo,
     BtnBox,
@@ -154,7 +157,7 @@ export default defineComponent({
 
     const routerHeight = ref<string>();
     const headerEl = ref<HTMLDivElement>();
-    const resizeObserver = ref<ResizeObserver>();
+    let resizeObserver: ResizeObserver;
 
     const balanceNumeric = computed(() => balance.value.toNumber());
     const routeName = computed(() => route.name);
@@ -171,7 +174,8 @@ export default defineComponent({
     }
 
     function close() {
-      ionRouter.navigate({ name: homeRouteName.value }, 'back', 'push', popOutAnimation);
+      // Used to prevent animating the dashboard when switching the route
+      ionRouter.navigate({ name: homeRouteName.value }, 'back', 'push');
     }
 
     /**
@@ -179,8 +183,11 @@ export default defineComponent({
      * Tabs change height when filters are shown/hidden
      */
     function observeTabsHeight() {
-      resizeObserver.value = new ResizeObserver(calculateRouterHeight);
-      resizeObserver.value.observe(headerEl.value!);
+      console.log('observeTabsHeight', headerEl.value);
+      if (headerEl.value) {
+        resizeObserver = new ResizeObserver(calculateRouterHeight);
+        resizeObserver.observe(headerEl.value!);
+      }
     }
 
     onMounted(() => {
@@ -198,7 +205,7 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      resizeObserver.value?.disconnect();
+      resizeObserver?.disconnect();
       if (IS_MOBILE_APP) {
         StatusBar.setBackgroundColor({
           color: '#141414',
@@ -230,20 +237,16 @@ export default defineComponent({
 @use '@/styles/variables' as *;
 @use '@/styles/mixins';
 
-.account-details {
+.account-details-base {
   --account-info-height: 120px;
   --screen-padding-x: 12px;
   --screen-bg-color: #{$color-bg-modal};
   --header-height: 64px;
 
-  position: relative;
-  top: env(safe-area-inset-top);
   background-color: $color-bg-4;
-  border-radius: $border-radius-app;
   min-height: 100%;
   height: 100%;
   color: $color-white;
-  box-shadow: 0 0 0 1px $color-border, 0 0 50px rgba($color-black, 0.6);
 
   @include mixins.mobile {
     min-height: 100vh;
diff --git a/src/popup/components/DashboardBase.vue b/src/popup/components/DashboardBase.vue
index 5b042c04a..840e5cbf8 100644
--- a/src/popup/components/DashboardBase.vue
+++ b/src/popup/components/DashboardBase.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="dashboard-base">
+  <PageWrapper
+    class="dashboard-base"
+  >
+    <template #header>
+      <DashboardHeader />
+    </template>
+
     <div class="dashboard-header">
       <div
         v-if="accounts.length > 1"
@@ -63,7 +69,7 @@
 
       <slot name="cards" />
     </div>
-  </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -73,15 +79,19 @@ import { ROUTE_SEED_PHRASE_SETTINGS } from '@/popup/router/routeNames';
 import { useUi } from '@/composables';
 
 import DashboardCard from './DashboardCard.vue';
+import DashboardHeader from './DashboardHeader.vue';
 import TotalWalletAmount from './TotalWalletAmount.vue';
 import FormSelect from './form/FormSelect.vue';
 import BtnPill from './buttons/BtnPill.vue';
 
 import WarningTriangleIcon from '../../icons/warning-triangle.svg?vue-component';
+import PageWrapper from './PageWrapper.vue';
 
 export default defineComponent({
   name: 'DashboardBase',
   components: {
+    PageWrapper,
+    DashboardHeader,
     BtnPill,
     DashboardCard,
     FormSelect,
diff --git a/src/popup/components/DashboardHeader.vue b/src/popup/components/DashboardHeader.vue
new file mode 100644
index 000000000..c0cf4841c
--- /dev/null
+++ b/src/popup/components/DashboardHeader.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="dashboard-header">
+    <div class="left">
+      <Component
+        :is="isLogoDisabled ? 'div' : 'RouterLink'"
+        :to="isLogoDisabled ? null : { name: homeRouteName }"
+        :class="{ disabled: isLogoDisabled }"
+        class="btn-home"
+      >
+        <AppLogo class="home-icon" />
+      </Component>
+    </div>
+
+    <div class="right">
+      <NetworkButton />
+
+      <template v-if="isLoggedIn">
+        <BtnIcon
+          key="btn-wallet-connect"
+          data-cy="btn-wallet-connect"
+          :icon="WalletConnectLogo"
+          :icon-variant="(isOnline && wcSession) ? 'success' : 'default'"
+          :dimmed="!isOnline || !wcSession"
+          @click="openWalletConnectModal()"
+        />
+
+        <AppsBrowserBtn
+          v-if="IS_MOBILE_APP || UNFINISHED_FEATURES"
+          key="btn-browser"
+        />
+
+        <NotificationsIcon
+          key="btn-notifications"
+        />
+
+        <BtnIcon
+          key="btn-more"
+          data-cy="page-more"
+          :to="{ name: ROUTE_MORE }"
+          :icon="ThreeDotsIcon"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  useIonRouter,
+} from '@ionic/vue';
+import {
+  computed,
+  defineComponent,
+} from 'vue';
+import { useRoute } from 'vue-router';
+import { IS_MOBILE_APP, UNFINISHED_FEATURES, MODAL_WALLET_CONNECT } from '@/constants';
+import {
+  ROUTE_ACCOUNT,
+  ROUTE_INDEX,
+  ROUTE_MORE,
+} from '@/popup/router/routeNames';
+import {
+  useAccounts,
+  useConnection,
+  useModals,
+  useUi,
+  useWalletConnect,
+} from '@/composables';
+
+import AppLogo from '@/icons/logo-small.svg?vue-component';
+import WalletConnectLogo from '@/icons/wallet-connect.svg?vue-component';
+import BackIcon from '@/icons/back.svg?vue-component';
+import ThreeDotsIcon from '@/icons/three-dots.svg?vue-component';
+
+import Truncate from './Truncate.vue';
+import BtnClose from './buttons/BtnClose.vue';
+import BtnPlain from './buttons/BtnPlain.vue';
+import NotificationsIcon from './NotificationsIcon.vue';
+import BtnIcon from './buttons/BtnIcon.vue';
+import NetworkButton from './NetworkButton.vue';
+import AppsBrowserBtn from './AppsBrowser/AppsBrowserBtn.vue';
+
+export default defineComponent({
+  components: {
+    NetworkButton,
+    AppsBrowserBtn,
+    NotificationsIcon,
+    BtnClose,
+    BtnPlain,
+    AppLogo,
+    Truncate,
+    BtnIcon,
+  },
+  setup() {
+    const route = useRoute();
+    const ionRouter = useIonRouter();
+
+    const { homeRouteName } = useUi();
+    const { isOnline } = useConnection();
+    const { isLoggedIn } = useAccounts();
+    const { openModal } = useModals();
+    const { wcSession } = useWalletConnect();
+
+    const currentHomeRouteName = computed(
+      () => isLoggedIn.value
+        ? homeRouteName.value
+        : ROUTE_INDEX,
+    );
+    const isLogoDisabled = computed(() => route.name === ROUTE_ACCOUNT);
+
+    function close() {
+      ionRouter.navigate({ name: currentHomeRouteName.value }, 'back', 'push');
+    }
+
+    function openWalletConnectModal() {
+      return openModal(MODAL_WALLET_CONNECT);
+    }
+
+    return {
+      UNFINISHED_FEATURES,
+      homeRouteName,
+      BackIcon,
+      ThreeDotsIcon,
+      WalletConnectLogo,
+      ROUTE_ACCOUNT,
+      ROUTE_MORE,
+      IS_MOBILE_APP,
+      isLoggedIn,
+      isLogoDisabled,
+      isOnline,
+      wcSession,
+      close,
+      openWalletConnectModal,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/variables' as *;
+@use '@/styles/typography';
+@use '@/styles/mixins';
+
+.dashboard-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: $header-default-height;
+  padding: 0 8px;
+
+  @include mixins.mobile {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .left {
+    display: flex;
+
+    .btn-home {
+      &.disabled {
+        cursor: default;
+      }
+
+      &:not(.disabled) {
+        .home-icon {
+          cursor: pointer;
+        }
+
+        &:hover svg {
+          color: $color-primary-hover;
+        }
+
+        &:active svg {
+          color: $color-primary-hover;
+          opacity: 0.9;
+        }
+      }
+
+      .home-icon {
+        width: 32px;
+        height: 32px;
+        color: $color-primary;
+      }
+    }
+  }
+
+  .right {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+}
+</style>
diff --git a/src/popup/components/DefaultPagesRouter.vue b/src/popup/components/DefaultPagesRouter.vue
index 53d980886..97777b03c 100644
--- a/src/popup/components/DefaultPagesRouter.vue
+++ b/src/popup/components/DefaultPagesRouter.vue
@@ -1,11 +1,10 @@
 <template>
-  <IonPage>
+  <IonPage class="default-pages-router">
     <!-- We are disabling animations on FF because of a bug that causes flickering
       see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
 
     <IonRouterOutlet
       :animated="!RUNNING_IN_TESTS && !IS_FIREFOX"
-      :animation="popInAnimation"
     />
   </IonPage>
 </template>
@@ -16,9 +15,9 @@ import { IonRouterOutlet, IonPage } from '@ionic/vue';
 import { useRoute } from 'vue-router';
 import { useUi } from '@/composables';
 import { RUNNING_IN_TESTS, IS_FIREFOX } from '@/constants';
-import { popInAnimation } from '@/popup/animations';
 import { ROUTE_ACCOUNT, ROUTE_MULTISIG_ACCOUNT } from '../router/routeNames';
 
+// TODO remove?
 export default defineComponent({
   components: {
     IonRouterOutlet,
@@ -50,7 +49,6 @@ export default defineComponent({
     return {
       RUNNING_IN_TESTS,
       IS_FIREFOX,
-      popInAnimation,
     };
   },
 });
diff --git a/src/popup/components/Header.vue b/src/popup/components/Header.vue
index 981bcad7a..21b05fe10 100644
--- a/src/popup/components/Header.vue
+++ b/src/popup/components/Header.vue
@@ -1,95 +1,44 @@
 <template>
-  <IonHeader
-    id="header"
-    class="header ion-no-border"
+  <div
+    class="page-header"
+    :class="{
+      'not-logged-in': !isLoggedIn,
+    }"
   >
-    <IonToolbar class="toolbar">
-      <div
-        class="wrapper"
-        :class="{
-          'not-logged-in': !isLoggedIn,
-        }"
-      >
-        <div
-          v-if="isLoggedIn || titleTruncated"
-          class="left"
-        >
-          <BtnIcon
-            v-if="showHeaderNavigation"
-            class="icon-btn"
-            data-cy="back-arrow"
-            :icon="BackIcon"
-            @click="back"
-          />
-          <Component
-            :is="isLogoDisabled ? 'div' : 'RouterLink'"
-            v-else-if="isLoggedIn"
-            :to="isLogoDisabled ? null : { name: homeRouteName }"
-            :class="{ disabled: isLogoDisabled }"
-            class="btn-home"
-          >
-            <AppLogo class="home-icon" />
-          </Component>
-        </div>
-
-        <div
-          v-if="showHeaderNavigation"
-          class="title"
-        >
-          <Truncate
-            :str="titleTruncated"
-            class="text"
-          />
-        </div>
-
-        <div class="right">
-          <BtnClose
-            v-if="showHeaderNavigation"
-            key="btn-close"
-            data-cy="btn-close"
-            class="btn-close"
-            @click="close"
-          />
-          <template v-else>
-            <NetworkButton />
-
-            <template v-if="isLoggedIn">
-              <BtnIcon
-                key="btn-wallet-connect"
-                data-cy="btn-wallet-connect"
-                :icon="WalletConnectLogo"
-                :icon-variant="(isOnline && wcSession) ? 'success' : 'default'"
-                :dimmed="!isOnline || !wcSession"
-                @click="openWalletConnectModal()"
-              />
-
-              <AppsBrowserBtn
-                v-if="IS_MOBILE_APP || UNFINISHED_FEATURES"
-                key="btn-browser"
-              />
-
-              <NotificationsIcon
-                key="btn-notifications"
-              />
-
-              <BtnIcon
-                key="btn-more"
-                data-cy="page-more"
-                :to="{ name: ROUTE_MORE }"
-                :icon="ThreeDotsIcon"
-              />
-            </template>
-          </template>
-        </div>
-      </div>
-    </IonToolbar>
-  </IonHeader>
+    <div
+      v-if="isLoggedIn || text"
+      class="left"
+    >
+      <BtnIcon
+        class="icon-btn"
+        data-cy="back-arrow"
+        :icon="BackIcon"
+        @click="back"
+      />
+    </div>
+
+    <div
+      class="title"
+    >
+      <Truncate
+        :str="text"
+        class="text"
+      />
+    </div>
+
+    <div class="right">
+      <BtnClose
+        key="btn-close"
+        data-cy="btn-close"
+        class="btn-close"
+        @click="close"
+      />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import {
-  IonHeader,
-  IonToolbar,
   useBackButton,
   useIonRouter,
 } from '@ionic/vue';
@@ -98,9 +47,7 @@ import {
   defineComponent,
 } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { IS_MOBILE_APP, UNFINISHED_FEATURES, MODAL_WALLET_CONNECT } from '@/constants';
-import type { WalletRouteMeta } from '@/types';
+import { IS_MOBILE_APP } from '@/constants';
 import {
   ROUTE_ACCOUNT,
   ROUTE_INDEX,
@@ -108,100 +55,36 @@ import {
 } from '@/popup/router/routeNames';
 import {
   useAccounts,
-  useConnection,
-  useModals,
   useUi,
-  useWalletConnect,
 } from '@/composables';
 
-import AppLogo from '@/icons/logo-small.svg?vue-component';
-import WalletConnectLogo from '@/icons/wallet-connect.svg?vue-component';
 import BackIcon from '@/icons/back.svg?vue-component';
-import ThreeDotsIcon from '@/icons/three-dots.svg?vue-component';
 
 import Truncate from './Truncate.vue';
 import BtnClose from './buttons/BtnClose.vue';
-import BtnPlain from './buttons/BtnPlain.vue';
-import NotificationsIcon from './NotificationsIcon.vue';
 import BtnIcon from './buttons/BtnIcon.vue';
-import NetworkButton from './NetworkButton.vue';
-import AppsBrowserBtn from './AppsBrowser/AppsBrowserBtn.vue';
 
 export default defineComponent({
   components: {
-    NetworkButton,
-    AppsBrowserBtn,
-    NotificationsIcon,
     BtnClose,
-    BtnPlain,
-    AppLogo,
     Truncate,
     BtnIcon,
-    IonHeader,
-    IonToolbar,
+  },
+  props: {
+    text: { type: String, default: null },
   },
   setup() {
     const route = useRoute();
     const ionRouter = useIonRouter();
-    const { t } = useI18n();
 
     const { homeRouteName } = useUi();
-    const { isOnline } = useConnection();
     const { isLoggedIn } = useAccounts();
-    const { openModal } = useModals();
-    const { wcSession } = useWalletConnect();
-
-    const pageTitles: Record<string, () => string> = {
-      settings: () => t('pages.titles.settings'),
-      language: () => t('pages.titles.language'),
-      about: () => t('pages.titles.about'),
-      sendTip: () => t('pages.titles.sendTip'),
-      claimTips: () => t('pages.claimTips.title'),
-      terms: () => t('pages.titles.terms'),
-      privacy: () => t('pages.titles.privacy'),
-      currency: () => t('pages.titles.currency'),
-      notifications: () => t('pages.titles.notifications'),
-      auction: () => t('pages.titles.auction'),
-      more: () => t('pages.titles.more'),
-      networks: () => t('pages.titles.networks'),
-      permissionsSettings: () => t('pages.titles.permissionsSettings'),
-      permissionsEdit: () => t('pages.titles.permissionsEdit'),
-      permissionsAdd: () => t('pages.titles.permissionsAdd'),
-      commentNew: () => t('pages.titles.commentNew'),
-      donateError: () => t('pages.titles.donateError'),
-      address: () => t('pages.titles.address'),
-      signMessage: () => t('pages.titles.signMessage'),
-      signTransaction: () => t('pages.titles.signTransaction'),
-      giftCards: () => t('pages.titles.giftCards'),
-      txDetails: () => t('pages.titles.txDetails'),
-      tokenDetails: () => t('pages.titles.tokenDetails'),
-      coinDetails: () => t('pages.titles.coinDetails'),
-      saveErrorsLog: () => t('pages.titles.saveErrorsLog'),
-      resetWallet: () => t('pages.resetWallet.title'),
-      seedPhrase: () => t('pages.titles.seedPhrase'),
-      networkAdd: () => t('pages.titles.networkAdd'),
-      networkEdit: () => t('pages.titles.networkEdit'),
-      notFound: () => t('pages.titles.notFound'),
-      multisigProposalDetails: () => t('pages.titles.multisigProposalDetails'),
-      secureLogin: () => t('pages.titles.secureLogin'),
-      addressBook: () => t('pages.titles.addressBook'),
-      addressBookEdit: () => t('pages.titles.addressBookEdit'),
-      addressBookAdd: () => t('pages.titles.addressBookAdd'),
-    };
 
     const currentHomeRouteName = computed(
       () => isLoggedIn.value
         ? homeRouteName.value
         : ROUTE_INDEX,
     );
-    const routeMeta = computed(() => route.meta as WalletRouteMeta);
-    const showHeaderNavigation = computed(() => !!routeMeta.value?.showHeaderNavigation);
-    const isLogoDisabled = computed(() => route.name === ROUTE_ACCOUNT);
-    const titleTruncated = computed(
-      () => (routeMeta.value?.title && pageTitles[routeMeta.value.title])
-        ? pageTitles[routeMeta.value.title]()
-        : '',
-    );
 
     function back() {
       const { fullPath, meta } = route;
@@ -229,30 +112,17 @@ export default defineComponent({
       ionRouter.navigate({ name: currentHomeRouteName.value }, 'back', 'push');
     }
 
-    function openWalletConnectModal() {
-      return openModal(MODAL_WALLET_CONNECT);
-    }
-
     useBackButton(1, back);
 
     return {
-      UNFINISHED_FEATURES,
-      homeRouteName,
-      BackIcon,
-      ThreeDotsIcon,
-      WalletConnectLogo,
       ROUTE_ACCOUNT,
       ROUTE_MORE,
       IS_MOBILE_APP,
+      homeRouteName,
+      BackIcon,
       isLoggedIn,
-      showHeaderNavigation,
-      isLogoDisabled,
-      isOnline,
-      titleTruncated,
-      wcSession,
       back,
       close,
-      openWalletConnectModal,
     };
   },
 });
@@ -263,103 +133,82 @@ export default defineComponent({
 @use '@/styles/typography';
 @use '@/styles/mixins';
 
-.header {
-  z-index: $z-index-header;
-  height: var(--header-height);
-
-  .toolbar {
-    --opacity: 0;
-    --min-height: 0;
-    --padding-top: 0;
-    --padding-bottom: 0;
-    --padding-start: 0;
-    --padding-end: 0;
-  }
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: $header-default-height;
+  padding: 0 8px;
 
-  .wrapper {
+  .left {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: var(--screen-bg-color);
-    padding: 0 8px;
-    width: 100%;
-    height: var(--header-height);
 
-    @include mixins.mobile {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-    }
-
-    .left {
-      display: flex;
+    .btn-home {
+      &.disabled {
+        cursor: default;
+      }
 
-      .btn-home {
-        &.disabled {
-          cursor: default;
+      &:not(.disabled) {
+        .home-icon {
+          cursor: pointer;
         }
 
-        &:not(.disabled) {
-          .home-icon {
-            cursor: pointer;
-          }
-
-          &:hover svg {
-            color: $color-primary-hover;
-          }
-
-          &:active svg {
-            color: $color-primary-hover;
-            opacity: 0.9;
-          }
+        &:hover svg {
+          color: $color-primary-hover;
         }
 
-        .home-icon {
-          width: 32px;
-          height: 32px;
-          color: $color-primary;
+        &:active svg {
+          color: $color-primary-hover;
+          opacity: 0.9;
         }
       }
-    }
 
-    .right {
-      display: flex;
-      justify-content: flex-end;
-      gap: 8px;
+      .home-icon {
+        width: 32px;
+        height: 32px;
+        color: $color-primary;
+      }
     }
+  }
 
-    .title {
-      .text {
-        @extend %face-sans-16-medium;
+  .right {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
 
-        padding: 0 4px;
-        display: flex;
-        justify-content: center;
-        white-space: nowrap;
-        line-height: 24px;
-        color: $color-white;
-      }
+  .title {
+    .text {
+      @extend %face-sans-16-medium;
 
-      &:only-child {
-        flex-grow: 2;
-        margin-left: 8px;
-      }
+      padding: 0 4px;
+      display: flex;
+      justify-content: center;
+      white-space: nowrap;
+      line-height: 24px;
+      color: $color-white;
     }
 
-    &.not-logged-in:not(:only-child) {
-      .left {
-        z-index: 1;
-      }
+    &:only-child {
+      flex-grow: 2;
+      margin-left: 8px;
+    }
+  }
 
-      .title {
-        width: 100%;
-        position: absolute;
-      }
+  &.not-logged-in:not(:only-child) {
+    .left {
+      z-index: 1;
     }
 
-    .btn-home + .back {
-      margin-left: 22px;
+    .title {
+      width: 100%;
+      position: absolute;
     }
   }
+
+  .btn-home + .back {
+    margin-left: 22px;
+  }
 }
 </style>
diff --git a/src/popup/components/MultisigProposalConsensus.vue b/src/popup/components/MultisigProposalConsensus.vue
index ecca9b258..c518e06bc 100644
--- a/src/popup/components/MultisigProposalConsensus.vue
+++ b/src/popup/components/MultisigProposalConsensus.vue
@@ -84,7 +84,7 @@ import InfoBox, { InfoBoxType, INFO_BOX_TYPES } from './InfoBox.vue';
 import ConsensusLabel from './ConsensusLabel.vue';
 import BtnHelp from './buttons/BtnHelp.vue';
 
-import CheckCircle from '../../icons/circle-check-outlined.svg?vue-component';
+import CheckCircle from '../../icons/check-mark-circle.svg?vue-component';
 import CloseCircle from '../../icons/circle-close.svg?vue-component';
 
 export default defineComponent({
diff --git a/src/popup/components/PageWrapper.vue b/src/popup/components/PageWrapper.vue
new file mode 100644
index 000000000..a99cf58b5
--- /dev/null
+++ b/src/popup/components/PageWrapper.vue
@@ -0,0 +1,105 @@
+<template>
+  <IonPage class="page-wrapper ion-padding ion-content-bg">
+    <IonHeader
+      v-if="!hideHeader"
+      id="header"
+      class="page-wrapper-header ion-no-border"
+    >
+      <IonToolbar class="toolbar">
+        <slot name="header">
+          <PageHeader :text="pageTitle" />
+        </slot>
+      </IonToolbar>
+    </IonHeader>
+
+    <component
+      :is="(hasSubContent) ? 'div' : 'IonContent'"
+      ref="contentEl"
+      :class="{
+        'has-header': !hideHeader,
+        'has-sub-content': hasSubContent,
+      }"
+      class="page-wrapper-content"
+    >
+      <slot v-bind="{ contentEl, pageDidEnter }" />
+    </component>
+  </IonPage>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonToolbar,
+} from '@ionic/vue';
+
+import PageHeader from './Header.vue';
+
+export default defineComponent({
+  name: 'AccountDetailsBase',
+  components: {
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonToolbar,
+    PageHeader,
+  },
+  props: {
+    pageTitle: { type: String, default: null },
+    /** Set to true if the page itself has IonContent as a child */
+    hasSubContent: Boolean,
+    hideHeader: Boolean,
+    pageDidEnter: Boolean,
+  },
+  setup() {
+    const contentEl = ref();
+
+    return {
+      contentEl,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/variables' as *;
+
+.page-wrapper {
+  &::part(scroll) {
+    height: 100%;
+  }
+
+  .has-header {
+    &::part(scroll) {
+      --padding-top: calc(#{$header-default-height} + env(safe-area-inset-top));
+    }
+  }
+
+  .page-wrapper-content {
+    min-height: 100%;
+
+    &.has-header.has-sub-content {
+      padding-top: calc(#{$header-default-height} + env(safe-area-inset-top));
+    }
+  }
+
+  .page-wrapper-header {
+    position: fixed;
+    z-index: $z-index-header;
+    padding-top: env(safe-area-inset-top);
+    background-color: rgba($color-bg-app, 0.8);
+    backdrop-filter: blur($bg-blur-radius);
+
+    .toolbar {
+      --opacity: 0;
+      --min-height: 0;
+      --padding-top: 0;
+      --padding-bottom: 0;
+      --padding-start: 0;
+      --padding-end: 0;
+    }
+  }
+}
+</style>
diff --git a/src/popup/components/ProtocolSpecificView.vue b/src/popup/components/ProtocolSpecificView.vue
index dca17aa30..0f13c3f10 100644
--- a/src/popup/components/ProtocolSpecificView.vue
+++ b/src/popup/components/ProtocolSpecificView.vue
@@ -72,6 +72,8 @@ export default defineComponent({
     },
   },
   setup(props) {
+    console.log('ProtocolSpecificView', props);
+
     const route = useRoute();
     const routeMeta = route.meta as WalletRouteMeta;
     const routeParams = route.params;
diff --git a/src/popup/components/TransactionDetailsBase.vue b/src/popup/components/TransactionDetailsBase.vue
index 8009129e7..7c1fdd8b4 100644
--- a/src/popup/components/TransactionDetailsBase.vue
+++ b/src/popup/components/TransactionDetailsBase.vue
@@ -1,172 +1,173 @@
 <template>
-  <div class="transaction-details-base">
-    <div
-      v-if="showHeader || isErrorTransaction"
-      class="header"
-    >
-      <TransactionErrorStatus
-        v-if="isErrorTransaction"
-        :return-type="transaction?.tx?.returnType"
-      />
-      <slot name="tokens" />
-    </div>
-
-    <div
-      v-if="transaction"
-      class="content"
-    >
-      <TransactionOverview :transaction="transaction" />
-
-      <div class="explorer-link">
-        <LinkButton
-          :href="explorerUrl!"
-          :text="$t('pages.transactionDetails.explorer')"
-          variant="muted"
-          is-external
-          underlined
-        />
-      </div>
-      <div class="data-grid">
-        <slot
-          v-if="!isErrorTransaction"
-          name="swap-data"
-        />
-        <DetailsItem
+  <PageWrapper
+    :page-title="$t('pages.titles.txDetails')"
+  >
+    <div class="transaction-details-base">
+      <div class="header">
+        <TransactionErrorStatus
           v-if="isErrorTransaction"
-          :label="$t('pages.transactionDetails.reason')"
-          :value="transaction.tx.return"
-          class="reason"
-          data-cy="reason"
+          :return-type="transaction?.tx?.returnType"
         />
-        <slot name="additional-content" />
-
-        <DetailsItem
-          v-if="contractId && isContract(contractId)"
-          :label="$t('common.smartContract')"
-          small
-        >
-          <template #value>
-            <CopyText
-              hide-icon
-              :value="contractId"
-              :copied-text="$t('common.hashCopied')"
-            >
-              <span class="text-address">{{ splitAddress(contractId) }}</span>
-            </CopyText>
-          </template>
-        </DetailsItem>
-
-        <DetailsItem
-          :label="$t('pages.transactionDetails.hash')"
-          data-cy="hash"
-          small
-        >
-          <template #value>
-            <CopyText
-              hide-icon
-              :value="hash"
-              :copied-text="$t('common.hashCopied')"
-            >
-              <span class="text-address">{{ splitAddress(hash) }}</span>
-            </CopyText>
-          </template>
-        </DetailsItem>
-
-        <slot name="multisig-content" />
+        <slot name="tokens" />
+      </div>
 
-        <PayloadDetails :payload="payload" />
+      <div
+        v-if="transaction"
+        class="content"
+      >
+        <TransactionOverview :transaction="transaction" />
+
+        <div class="explorer-link">
+          <LinkButton
+            :href="explorerUrl!"
+            :text="$t('pages.transactionDetails.explorer')"
+            variant="muted"
+            is-external
+            underlined
+          />
+        </div>
+        <div class="data-grid">
+          <slot
+            v-if="!isErrorTransaction"
+            name="swap-data"
+          />
+          <DetailsItem
+            v-if="isErrorTransaction"
+            :label="$t('pages.transactionDetails.reason')"
+            :value="transaction.tx.return"
+            class="reason"
+            data-cy="reason"
+          />
+          <slot name="additional-content" />
 
-        <div class="span-3-columns">
           <DetailsItem
-            v-if="transaction.pending"
-            :label="$t('pages.transactionDetails.timestamp')"
-            data-cy="timestamp"
+            v-if="contractId && isContract(contractId)"
+            :label="$t('common.smartContract')"
+            small
           >
             <template #value>
-              <AnimatedPending
-                class="pending-icon"
-              />
-              {{ $t('common.pending') }}
+              <CopyText
+                hide-icon
+                :value="contractId"
+                :copied-text="$t('common.hashCopied')"
+              >
+                <span class="text-address">{{ splitAddress(contractId) }}</span>
+              </CopyText>
             </template>
           </DetailsItem>
+
           <DetailsItem
-            v-else-if="transaction.microTime"
-            :value="formatDate(transaction.microTime)"
-            :secondary="formatTime(transaction.microTime)"
-            :label="$t('pages.transactionDetails.timestamp')"
-            data-cy="timestamp"
-          />
-          <DetailsItem
-            v-if="transaction.blockHeight && transaction.blockHeight > 0"
-            :value="transaction.blockHeight"
-            :label="$t('pages.transactionDetails.blockHeight')"
-            data-cy="block-height"
-          />
-          <DetailsItem
-            v-if="transaction.tx.nonce"
-            :value="transaction.tx.nonce"
-            :label="$t('pages.transactionDetails.nonce')"
-            data-cy="nonce"
-          />
-        </div>
+            :label="$t('pages.transactionDetails.hash')"
+            data-cy="hash"
+            small
+          >
+            <template #value>
+              <CopyText
+                hide-icon
+                :value="hash"
+                :copied-text="$t('common.hashCopied')"
+              >
+                <span class="text-address">{{ splitAddress(hash) }}</span>
+              </CopyText>
+            </template>
+          </DetailsItem>
 
-        <DetailsItem
-          v-if="transaction.tx.function"
-          :label="$t('modals.confirmTransactionSign.functionName')"
-          :value="transaction.tx.function"
-        />
+          <slot name="multisig-content" />
+
+          <PayloadDetails :payload="payload" />
 
-        <DetailsItem
-          v-if="amount"
-          :label="$t('common.amount')"
-          data-cy="amount"
-        >
-          <template #value>
-            <TokenAmount
-              :amount="amount"
-              :symbol="assetSymbol"
-              :hide-fiat="hideFiat"
-              :protocol="protocol"
-              high-precision
+          <div class="span-3-columns">
+            <DetailsItem
+              v-if="transaction.pending"
+              :label="$t('pages.transactionDetails.timestamp')"
+              data-cy="timestamp"
+            >
+              <template #value>
+                <AnimatedPending
+                  class="pending-icon"
+                />
+                {{ $t('common.pending') }}
+              </template>
+            </DetailsItem>
+            <DetailsItem
+              v-else-if="transaction.microTime"
+              :value="formatDate(transaction.microTime)"
+              :secondary="formatTime(transaction.microTime)"
+              :label="$t('pages.transactionDetails.timestamp')"
+              data-cy="timestamp"
             />
-          </template>
-        </DetailsItem>
-
-        <slot name="gas" />
-
-        <DetailsItem
-          v-if="fee"
-          :label="$t('transaction.fee')"
-          data-cy="fee"
-        >
-          <template #value>
-            <TokenAmount
-              :amount="fee"
-              :symbol="coinSymbol"
-              :protocol="protocol"
-              high-precision
+            <DetailsItem
+              v-if="transaction.blockHeight && transaction.blockHeight > 0"
+              :value="transaction.blockHeight"
+              :label="$t('pages.transactionDetails.blockHeight')"
+              data-cy="block-height"
             />
-          </template>
-        </DetailsItem>
-
-        <DetailsItem
-          v-if="!hideAmountTotal"
-          :label="$t('common.total')"
-          data-cy="total"
-        >
-          <template #value>
-            <TokenAmount
-              :amount="amountTotal"
-              :symbol="assetSymbol"
-              :hide-fiat="hideFiat"
-              :protocol="protocol"
-              high-precision
+            <DetailsItem
+              v-if="transaction.tx.nonce"
+              :value="transaction.tx.nonce"
+              :label="$t('pages.transactionDetails.nonce')"
+              data-cy="nonce"
             />
-          </template>
-        </DetailsItem>
+          </div>
+
+          <DetailsItem
+            v-if="transaction.tx.function"
+            :label="$t('modals.confirmTransactionSign.functionName')"
+            :value="transaction.tx.function"
+          />
+
+          <DetailsItem
+            v-if="amount"
+            :label="$t('common.amount')"
+            data-cy="amount"
+          >
+            <template #value>
+              <TokenAmount
+                :amount="amount"
+                :symbol="assetSymbol"
+                :hide-fiat="hideFiat"
+                :protocol="protocol"
+                high-precision
+              />
+            </template>
+          </DetailsItem>
+
+          <slot name="gas" />
+
+          <DetailsItem
+            v-if="fee"
+            :label="$t('transaction.fee')"
+            data-cy="fee"
+          >
+            <template #value>
+              <TokenAmount
+                :amount="fee"
+                :symbol="coinSymbol"
+                :protocol="protocol"
+                high-precision
+              />
+            </template>
+          </DetailsItem>
+
+          <DetailsItem
+            v-if="!hideAmountTotal"
+            :label="$t('common.total')"
+            data-cy="total"
+          >
+            <template #value>
+              <TokenAmount
+                :amount="amountTotal"
+                :symbol="assetSymbol"
+                :hide-fiat="hideFiat"
+                :protocol="protocol"
+                high-precision
+              />
+            </template>
+          </DetailsItem>
+        </div>
       </div>
     </div>
-  </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -182,6 +183,7 @@ import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 import { useFungibleTokens } from '@/composables';
 import { isContract } from '@/protocols/aeternity/helpers';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import TransactionOverview from '@/popup/components/TransactionOverview.vue';
 import TokenAmount from '@/popup/components/TokenAmount.vue';
 import DetailsItem from '@/popup/components/DetailsItem.vue';
@@ -194,6 +196,7 @@ import AnimatedPending from '@/icons/animated-pending.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     PayloadDetails,
     TransactionErrorStatus,
     TransactionOverview,
@@ -219,11 +222,12 @@ export default defineComponent({
     hash: { type: String, required: true },
     protocol: { type: String as PropType<Protocol>, required: true },
     isErrorTransaction: Boolean,
-    showHeader: Boolean,
     hideAmountTotal: Boolean,
     hideFiat: Boolean,
   },
   setup(props) {
+    console.log('TX Details Base: setup');
+
     const adapter = ProtocolAdapterFactory.getAdapter(props.protocol);
     const { coinSymbol } = adapter;
 
diff --git a/src/popup/pages/About.vue b/src/popup/pages/About.vue
index 62de5f209..05d51e092 100644
--- a/src/popup/pages/About.vue
+++ b/src/popup/pages/About.vue
@@ -1,69 +1,69 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="about">
-        <Panel>
-          <PanelTableItem :name="$t('pages.about.name')">
-            {{ APP_NAME }}
-          </PanelTableItem>
-
+  <PageWrapper
+    :page-title="$t('pages.titles.about')"
+  >
+    <div class="about">
+      <Panel>
+        <PanelTableItem :name="$t('pages.about.name')">
+          {{ APP_NAME }}
+        </PanelTableItem>
+
+        <PanelTableItem
+          :name="$t('pages.about.commit')"
+          :href="`${AE_COMMIT_URL}${commitHash}`"
+        >
+          {{ commitHash?.slice(0, 7) }}
+          <GithubIcon class="icon-github" />
+        </PanelTableItem>
+
+        <PanelTableItem :name="$t('pages.about.software-version')">
+          v.{{ extensionVersion }}
+        </PanelTableItem>
+
+        <PanelTableItem :name="$t('pages.about.sdk-version')">
+          {{ sdkVersion }}
+        </PanelTableItem>
+
+        <template v-if="aeActiveNetworkSettings && middlewareStatus">
           <PanelTableItem
-            :name="$t('pages.about.commit')"
-            :href="`${AE_COMMIT_URL}${commitHash}`"
+            :name="$t('pages.about.middleware-version')"
+            :href="`${middlewareUrl}/status`"
+            is-external-link
           >
-            {{ commitHash?.slice(0, 7) }}
-            <GithubIcon class="icon-github" />
-          </PanelTableItem>
-
-          <PanelTableItem :name="$t('pages.about.software-version')">
-            v.{{ extensionVersion }}
+            {{ middlewareStatus.mdwVersion }}
           </PanelTableItem>
 
-          <PanelTableItem :name="$t('pages.about.sdk-version')">
-            {{ sdkVersion }}
+          <PanelTableItem
+            v-if="nodeStatus"
+            :name="$t('pages.about.node-version')"
+            :href="`${nodeUrl}/v3/status`"
+            is-external-link
+          >
+            {{ nodeStatus.node_version }}
           </PanelTableItem>
-
-          <template v-if="aeActiveNetworkSettings && middlewareStatus">
-            <PanelTableItem
-              :name="$t('pages.about.middleware-version')"
-              :href="`${middlewareUrl}/status`"
-              is-external-link
-            >
-              {{ middlewareStatus.mdwVersion }}
-            </PanelTableItem>
-
-            <PanelTableItem
-              v-if="nodeStatus"
-              :name="$t('pages.about.node-version')"
-              :href="`${nodeUrl}/v3/status`"
-              is-external-link
-            >
-              {{ nodeStatus.node_version }}
-            </PanelTableItem>
+        </template>
+      </Panel>
+
+      <div class="additional-links">
+        <PanelItem
+          :to="{ name: 'about-terms' }"
+          :title="$t('pages.about.terms')"
+        >
+          <template #icon>
+            <AboutIcon />
           </template>
-        </Panel>
-
-        <div class="additional-links">
-          <PanelItem
-            :to="{ name: 'about-terms' }"
-            :title="$t('pages.about.terms')"
-          >
-            <template #icon>
-              <AboutIcon />
-            </template>
-          </PanelItem>
-          <PanelItem
-            :to="{ name: 'about-privacy' }"
-            :title="$t('pages.about.privacyPolicy')"
-          >
-            <template #icon>
-              <AboutIcon />
-            </template>
-          </PanelItem>
-        </div>
+        </PanelItem>
+        <PanelItem
+          :to="{ name: 'about-privacy' }"
+          :title="$t('pages.about.privacyPolicy')"
+        >
+          <template #icon>
+            <AboutIcon />
+          </template>
+        </PanelItem>
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -73,7 +73,6 @@ import {
   onMounted,
   ref,
 } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 
 import type { IMiddlewareStatus } from '@/types';
 import { AGGREGATOR_URL, APP_NAME, BUG_REPORT_URL } from '@/constants';
@@ -82,6 +81,7 @@ import { fetchJson } from '@/utils';
 import { AE_COMMIT_URL } from '@/protocols/aeternity/config';
 import { useAeMiddleware, useAeNetworkSettings } from '@/protocols/aeternity/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import Panel from '@/popup/components/Panel.vue';
 import PanelItem from '@/popup/components/PanelItem.vue';
 import PanelTableItem from '@/popup/components/PanelTableItem.vue';
@@ -91,13 +91,12 @@ import GithubIcon from '@/icons/github.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     Panel,
     PanelItem,
     PanelTableItem,
     AboutIcon,
     GithubIcon,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { aeActiveNetworkSettings } = useAeNetworkSettings();
diff --git a/src/popup/pages/AccountDetailsMultisig.vue b/src/popup/pages/AccountDetailsMultisig.vue
index 2fc8f6c6f..a0d57c88b 100644
--- a/src/popup/pages/AccountDetailsMultisig.vue
+++ b/src/popup/pages/AccountDetailsMultisig.vue
@@ -1,66 +1,58 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <AccountDetailsBase
-        v-if="activeMultisigAccount && isPageActive"
-        without-default-buttons
-      >
-        <template #account-info>
-          <AccountInfo
-            :account="convertMultisigAccountToAccount(activeMultisigAccount)"
-            is-multisig
-            show-protocol-icon
-            can-copy-address
-          />
-        </template>
+  <PageWrapper hide-header>
+    <AccountDetailsBase
+      v-if="activeMultisigAccount"
+      without-default-buttons
+    >
+      <template #account-info>
+        <AccountInfo
+          :account="convertMultisigAccountToAccount(activeMultisigAccount)"
+          is-multisig
+          show-protocol-icon
+          can-copy-address
+        />
+      </template>
 
-        <template #balance>
-          <BalanceInfo
-            :balance="+(activeMultisigAccount.balance || 0)"
-            :protocol="PROTOCOLS.aeternity"
-          />
-        </template>
+      <template #balance>
+        <BalanceInfo
+          :balance="+(activeMultisigAccount.balance || 0)"
+          :protocol="PROTOCOLS.aeternity"
+        />
+      </template>
 
-        <template #buttons>
-          <OpenTransferReceiveModalBtn is-multisig />
-          <OpenTransferSendModalBtn
-            :disabled="!!pendingMultisigTransaction"
-            is-multisig
-          />
-          <OpenShareAddressModalBtn
-            :address="convertMultisigAccountToAccount(activeMultisigAccount).address!"
-            :protocol="PROTOCOLS.aeternity"
-          />
-          <BtnBox
-            v-if="UNFINISHED_FEATURES"
-            :icon="CreditCardIcon"
-            :text="$t('common.buy')"
-            :href="simplexLink"
-          />
-        </template>
+      <template #buttons>
+        <OpenTransferReceiveModalBtn is-multisig />
+        <OpenTransferSendModalBtn
+          :disabled="!!pendingMultisigTransaction"
+          is-multisig
+        />
+        <OpenShareAddressModalBtn
+          :address="convertMultisigAccountToAccount(activeMultisigAccount).address!"
+          :protocol="PROTOCOLS.aeternity"
+        />
+        <BtnBox
+          v-if="UNFINISHED_FEATURES"
+          :icon="CreditCardIcon"
+          :text="$t('common.buy')"
+          :href="simplexLink"
+        />
+      </template>
 
-        <template #navigation>
-          <AccountDetailsNavigation
-            :route-names="[
-              ROUTE_MULTISIG_DETAILS,
-              ROUTE_MULTISIG_DETAILS_INFO,
-              ROUTE_MULTISIG_DETAILS_ASSETS,
-            ]"
-          />
-        </template>
-      </AccountDetailsBase>
-    </IonContent>
-  </IonPage>
+      <template #navigation>
+        <AccountDetailsNavigation
+          :route-names="[
+            ROUTE_MULTISIG_DETAILS,
+            ROUTE_MULTISIG_DETAILS_INFO,
+            ROUTE_MULTISIG_DETAILS_ASSETS,
+          ]"
+        />
+      </template>
+    </AccountDetailsBase>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import {
-  IonContent,
-  IonPage,
-  onIonViewDidEnter,
-  onIonViewDidLeave,
-} from '@ionic/vue';
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { PROTOCOLS, UNFINISHED_FEATURES } from '@/constants';
 import { useMultisigAccounts, usePendingMultisigTransaction } from '@/composables';
 import {
@@ -70,6 +62,7 @@ import {
 } from '@/popup/router/routeNames';
 import { buildSimplexLink, convertMultisigAccountToAccount } from '@/protocols/aeternity/helpers';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import BtnBox from '../components/buttons/BtnBox.vue';
 import AccountDetailsBase from '../components/AccountDetailsBase.vue';
 import AccountInfo from '../components/AccountInfo.vue';
@@ -83,6 +76,7 @@ import CreditCardIcon from '../../icons/credit-card.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     OpenTransferSendModalBtn,
     OpenTransferReceiveModalBtn,
     OpenShareAddressModalBtn,
@@ -91,12 +85,8 @@ export default defineComponent({
     BalanceInfo,
     AccountInfo,
     AccountDetailsBase,
-    IonPage,
-    IonContent,
   },
   setup() {
-    const isPageActive = ref(false);
-
     const { activeMultisigAccount } = useMultisigAccounts();
     const { pendingMultisigTransaction } = usePendingMultisigTransaction();
 
@@ -106,14 +96,6 @@ export default defineComponent({
         : '',
     );
 
-    onIonViewDidEnter(() => {
-      isPageActive.value = true;
-    });
-
-    onIonViewDidLeave(() => {
-      isPageActive.value = false;
-    });
-
     return {
       UNFINISHED_FEATURES,
       PROTOCOLS,
@@ -121,7 +103,6 @@ export default defineComponent({
       ROUTE_MULTISIG_DETAILS_INFO,
       ROUTE_MULTISIG_DETAILS_ASSETS,
       activeMultisigAccount,
-      isPageActive,
       simplexLink,
       pendingMultisigTransaction,
       CreditCardIcon,
diff --git a/src/popup/pages/AddressBook.vue b/src/popup/pages/AddressBook.vue
index a76a06d17..d5f57e5dd 100644
--- a/src/popup/pages/AddressBook.vue
+++ b/src/popup/pages/AddressBook.vue
@@ -1,5 +1,9 @@
 <template>
-  <IonPage>
+  <PageWrapper
+    class="address-book-wrapper"
+    :page-title="$t('pages.titles.addressBook')"
+    has-sub-content
+  >
     <div class="address-book">
       <Transition name="slide-transition">
         <div
@@ -26,21 +30,23 @@
           />
         </div>
       </Transition>
-      <AddressBookList v-model:hideButtons="hideButtons" @select-address="handleSelectAddress" />
+
+      <AddressBookList
+        v-model:hideButtons="hideButtons"
+        @select-address="handleSelectAddress"
+      />
     </div>
-  </IonPage>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonPage, useIonRouter } from '@ionic/vue';
-import {
-  defineComponent,
-  ref,
-} from 'vue';
+import { useIonRouter } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
 
 import { ROUTE_ADDRESS_BOOK_ADD, ROUTE_ADDRESS_BOOK_EDIT } from '@/popup/router/routeNames';
 import { useAddressBook } from '@/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import AddressBookList from '@/popup/components/AddressBook/AddressBookList.vue';
 import BtnBox from '@/popup/components/buttons/BtnBox.vue';
 
@@ -50,7 +56,7 @@ import ExportIcon from '@/icons/export-address-book.svg?vue-component';
 
 export default defineComponent({
   components: {
-    IonPage,
+    PageWrapper,
     AddressBookList,
     BtnBox,
   },
diff --git a/src/popup/pages/AddressBookForm.vue b/src/popup/pages/AddressBookForm.vue
index 9af4672d5..bc6f1aec4 100644
--- a/src/popup/pages/AddressBookForm.vue
+++ b/src/popup/pages/AddressBookForm.vue
@@ -1,115 +1,114 @@
 <template>
-  <IonPage class="address-book-form">
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="address-book-form-content">
-        <div class="top-part">
-          <div class="info">
-            <AccountInfo
-              class="account-info"
-              :account="account"
-              :custom-name="accountName"
-              :is-placeholder="isPlaceholder"
-              :avatar-borderless="isPlaceholder"
-              :show-protocol-icon="!isPlaceholder"
-              :show-explorer-link="!isPlaceholder"
-            />
-            <Field
-              v-slot="{ field }"
-              name="isBookmarked"
-              :model-value="formModel.isBookmarked"
-            >
-              <BtnPill
-                class="bookmark-button"
-                variant="dark"
-                @click="toggleBookmark()"
-              >
-                <IconWrapper
-                  :icon="FavoriteIcon"
-                  icon-size="rg"
-                  class="icon"
-                  :class="{ yellow: field.value }"
-                />
-                {{
-                  field.value
-                    ? $t('pages.addressBook.entry.bookmarked')
-                    : $t('pages.addressBook.entry.bookmark')
-                }}
-              </BtnPill>
-            </Field>
-          </div>
-          <BtnIcon
-            class="qrcode-wrapper"
-            :disabled="isPlaceholder"
-            @click="shareAddress()"
-          >
-            <QrCode
-              :value="[account.address ?? '']"
-              :size="116"
-              class="qrcode"
-              :class="{ hidden: isPlaceholder }"
-              disable-click-to-copy
-            />
-          </BtnIcon>
-        </div>
-        <div class="inputs">
+  <PageWrapper
+    :page-title="(isEdit) ? $t('pages.titles.addressBookEdit') : $t('pages.titles.addressBookAdd')"
+  >
+    <div class="address-book-form">
+      <div class="top-part">
+        <div class="info">
+          <AccountInfo
+            class="account-info"
+            :account="account"
+            :custom-name="accountName"
+            :is-placeholder="isPlaceholder"
+            :avatar-borderless="isPlaceholder"
+            :show-protocol-icon="!isPlaceholder"
+            :show-explorer-link="!isPlaceholder"
+          />
           <Field
-            v-slot="{ field, errorMessage }"
-            name="name"
-            :model-value="formModel.name"
-            :validate-on-mount="!!formModel.name"
-            :rules="{
-              required: true,
-              address_book_entry_exists: [addressBook, savedEntry?.name, 'name'],
-              max_len: 33,
-            }"
-          >
-            <FormTextarea
-              v-bind="field"
-              v-model="formModel.name"
-              name="name"
-              data-cy="name"
-              auto-height
-              :text-limit="33"
-              :message="errorMessage"
-              :label="$t('common.name')"
-              :placeholder="$t('pages.addressBook.entry.namePlaceholder')"
-            />
-          </Field>
-
-          <Field
-            v-slot="{ field, errorMessage }"
-            name="address"
-            :model-value="formModel.address"
-            :validate-on-mount="!!formModel.address"
-            :rules="{
-              required: true,
-              address_book_entry_exists: [addressBook, savedEntry?.address, 'address'],
-              account_address: true,
-            }"
+            v-slot="{ field }"
+            name="isBookmarked"
+            :model-value="formModel.isBookmarked"
           >
-            <FormTextarea
-              v-bind="field"
-              v-model="formModel.address"
-              name="address"
-              data-cy="address"
-              auto-height
-              :message="errorMessage"
-              :label="$t('common.address')"
-              :placeholder="$t('pages.addressBook.entry.addressPlaceholder')"
+            <BtnPill
+              class="bookmark-button"
+              variant="dark"
+              @click="toggleBookmark()"
             >
-              <template #label-after>
-                <BtnIcon
-                  :icon="QrScanIcon"
-                  data-cy="scan-button"
-                  @click="scanQr()"
-                />
-              </template>
-            </FormTextarea>
+              <IconWrapper
+                :icon="FavoriteIcon"
+                icon-size="rg"
+                class="icon"
+                :class="{ yellow: field.value }"
+              />
+              {{
+                field.value
+                  ? $t('pages.addressBook.entry.bookmarked')
+                  : $t('pages.addressBook.entry.bookmark')
+              }}
+            </BtnPill>
           </Field>
         </div>
+        <BtnIcon
+          class="qrcode-wrapper"
+          :disabled="isPlaceholder"
+          @click="shareAddress()"
+        >
+          <QrCode
+            :value="[account.address ?? '']"
+            :size="116"
+            class="qrcode"
+            :class="{ hidden: isPlaceholder }"
+            disable-click-to-copy
+          />
+        </BtnIcon>
+      </div>
+      <div class="inputs">
+        <Field
+          v-slot="{ field, errorMessage }"
+          name="name"
+          :model-value="formModel.name"
+          :validate-on-mount="!!formModel.name"
+          :rules="{
+            required: true,
+            address_book_entry_exists: [addressBook, savedEntry?.name, 'name'],
+            max_len: 33,
+          }"
+        >
+          <FormTextarea
+            v-bind="field"
+            v-model="formModel.name"
+            name="name"
+            data-cy="name"
+            auto-height
+            :text-limit="33"
+            :message="errorMessage"
+            :label="$t('common.name')"
+            :placeholder="$t('pages.addressBook.entry.namePlaceholder')"
+          />
+        </Field>
+
+        <Field
+          v-slot="{ field, errorMessage }"
+          name="address"
+          :model-value="formModel.address"
+          :validate-on-mount="!!formModel.address"
+          :rules="{
+            required: true,
+            address_book_entry_exists: [addressBook, savedEntry?.address, 'address'],
+            account_address: true,
+          }"
+        >
+          <FormTextarea
+            v-bind="field"
+            v-model="formModel.address"
+            name="address"
+            data-cy="address"
+            auto-height
+            :message="errorMessage"
+            :label="$t('common.address')"
+            :placeholder="$t('pages.addressBook.entry.addressPlaceholder')"
+          >
+            <template #label-after>
+              <BtnIcon
+                :icon="QrScanIcon"
+                data-cy="scan-button"
+                @click="scanQr()"
+              />
+            </template>
+          </FormTextarea>
+        </Field>
       </div>
-    </IonContent>
-    <FixedScreenFooter class="footer">
+
       <div class="main-buttons">
         <BtnMain
           variant="muted"
@@ -123,20 +122,22 @@
           @click="confirm()"
         />
       </div>
+
       <BtnMain
         v-if="savedEntry?.address"
         variant="muted"
+        class="btn-delete"
         :text="$t('pages.addressBook.entry.delete')"
         :icon="TrashIcon"
         extend
         @click="deleteEntry()"
       />
-    </FixedScreenFooter>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonContent, IonPage, useIonRouter } from '@ionic/vue';
+import { useIonRouter } from '@ionic/vue';
 import {
   defineComponent,
   computed,
@@ -150,13 +151,15 @@ import { useRoute } from 'vue-router';
 
 import { tg } from '@/popup/plugins/i18n';
 import type { IAddressBookEntry } from '@/types';
-import { ROUTE_ADDRESS_BOOK } from '@/popup/router/routeNames';
+import { getProtocolByAddress } from '@/utils';
+import { ROUTE_ADDRESS_BOOK, ROUTE_ADDRESS_BOOK_EDIT } from '@/popup/router/routeNames';
 import {
   useAddressBook,
   useAddressBookEntryForm,
   useModals,
 } from '@/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import AccountInfo from '@/popup/components/AccountInfo.vue';
 import BtnPill from '@/popup/components/buttons/BtnPill.vue';
 import BtnMain from '@/popup/components/buttons/BtnMain.vue';
@@ -164,17 +167,14 @@ import BtnIcon from '@/popup/components/buttons/BtnIcon.vue';
 import FormTextarea from '@/popup/components/form/FormTextarea.vue';
 import QrCode from '@/popup/components/QrCode.vue';
 import IconWrapper from '@/popup/components/IconWrapper.vue';
-import FixedScreenFooter from '@/popup/components/FixedScreenFooter.vue';
 
 import QrScanIcon from '@/icons/qr-scan.svg?vue-component';
 import FavoriteIcon from '@/icons/star-full.svg?vue-component';
 import TrashIcon from '@/icons/trash.svg?vue-component';
-import { getProtocolByAddress } from '@/utils';
 
 export default defineComponent({
   components: {
-    IonPage,
-    IonContent,
+    PageWrapper,
     AccountInfo,
     FormTextarea,
     BtnMain,
@@ -182,7 +182,6 @@ export default defineComponent({
     BtnIcon,
     QrCode,
     IconWrapper,
-    FixedScreenFooter,
     Field,
   },
   setup() {
@@ -205,6 +204,7 @@ export default defineComponent({
       { addressBookEntryData: {} },
     );
 
+    const isEdit = (route.name === ROUTE_ADDRESS_BOOK_EDIT);
     const accountName = computed(() => isPlaceholder.value ? defaultName : formModel.value.name);
     const accountAddress = computed(
       () => isPlaceholder.value ? defaultAddress : formModel.value.address,
@@ -287,6 +287,7 @@ export default defineComponent({
     return {
       account,
       accountName,
+      isEdit,
       formModel,
       isPlaceholder,
       addressBook,
@@ -312,82 +313,79 @@ export default defineComponent({
 @use '@/styles/variables' as *;
 
 .address-book-form {
-  &-content {
-    padding: 16px;
+  padding: 16px;
+
+  .top-part {
+    display: flex;
+    justify-content: space-between;
+    height: auto;
+    margin-bottom: 16px;
 
-    .top-part {
+    .info {
       display: flex;
+      flex-flow: column;
+      align-items: flex-start;
       justify-content: space-between;
-      height: auto;
-      margin-bottom: 16px;
-
-      .info {
-        display: flex;
-        flex-flow: column;
-        align-items: flex-start;
-        justify-content: space-between;
 
-        .account-info {
-          --maxWidth: 155px;
-        }
+      .account-info {
+        --maxWidth: 155px;
+      }
 
-        .bookmark-button {
-          display: flex;
-          gap: 4px;
-          padding: 8px 16px;
-          min-width: 138px;
-          border-radius: 10px;
-          font-weight: 500;
-          color: $color-white;
-          background-color: rgba($color-white, 0.08);
-
-          .icon {
-            color: rgba($color-white, 0.50);
-
-            &.yellow {
-              color: $color-warning;
-            }
+      .bookmark-button {
+        display: flex;
+        gap: 4px;
+        padding: 8px 16px;
+        min-width: 138px;
+        border-radius: 10px;
+        font-weight: 500;
+        color: $color-white;
+        background-color: rgba($color-white, 0.08);
+
+        .icon {
+          color: rgba($color-white, 0.50);
+
+          &.yellow {
+            color: $color-warning;
           }
+        }
 
-          &:hover {
-            background-color: rgba($color-white, 0.05);
-            color: rgba($color-white, 0.8);
-          }
+        &:hover {
+          background-color: rgba($color-white, 0.05);
+          color: rgba($color-white, 0.8);
         }
       }
+    }
 
-      .qrcode-wrapper {
+    .qrcode-wrapper {
+      border-radius: 16px;
+      background-color: rgba($color-white, 0.15);
+
+      .qrcode {
+        display: inline-flex;
         border-radius: 12px;
-        background-color: rgba($color-white, 0.15);
-
-        .qrcode {
-          display: inline-flex;
-          border-radius: 12px;
-          height: 116px;
-          width: 116px;
-          padding: 8px;
-          background-color: $color-white;
-          object-fit: contain;
-
-          &.hidden {
-            opacity: 0;
-          }
+        height: 116px;
+        width: 116px;
+        padding: 8px;
+        background-color: $color-white;
+        object-fit: contain;
+
+        &.hidden {
+          opacity: 0;
         }
       }
     }
   }
 
-  .footer {
+  .main-buttons {
     display: flex;
-    flex-flow: column;
-    background-color: $color-bg-app;
-
-    .main-buttons {
-      display: flex;
-      flex-flow: row;
-      gap: 8px;
-    }
+    flex-flow: row;
+    gap: 8px;
+    width: 100%;
+    margin-top: 24px;
   }
 
+  .btn-delete {
+    margin-top: 8px;
+  }
 }
 </style>
diff --git a/src/popup/pages/AppsBrowser.vue b/src/popup/pages/AppsBrowser.vue
index ff4d07423..c010fd6f6 100644
--- a/src/popup/pages/AppsBrowser.vue
+++ b/src/popup/pages/AppsBrowser.vue
@@ -1,82 +1,84 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div
-        class="apps-browser"
-        :class="{ 'app-selected': selectedApp }"
-      >
-        <AppsBrowserHeader
-          :selected-app="selectedApp"
-          :iframe="iframeEl"
-          @back="back()"
-          @refresh="refresh()"
-        />
-        <div v-if="!selectedApp">
-          <Field
-            v-slot="{ field, errorMessage, resetField }"
-            v-model="customAppURL"
-            name="customAppURL"
-            :rules="{
-              url: customAppURL.length > 0,
-            }"
+  <PageWrapper>
+    <template #header>
+      <AppsBrowserHeader
+        :selected-app="selectedApp"
+        :iframe="iframeEl"
+        @back="back()"
+        @refresh="refresh()"
+      />
+    </template>
+
+    <div
+      class="apps-browser"
+      :class="{ 'app-selected': selectedApp }"
+    >
+      <div v-if="!selectedApp">
+        <Field
+          v-slot="{ field, errorMessage, resetField }"
+          v-model="customAppURL"
+          name="customAppURL"
+          :rules="{
+            url: customAppURL.length > 0,
+          }"
+        >
+          <InputField
+            v-bind="field"
+            :model-value="customAppURL"
+            class="input-url"
+            type="url"
+            show-message-help
+            :placeholder="$t('pages.appsBrowser.inputPlaceholder')"
+            :message="errorMessage"
+            @keydown.enter.stop="(event: any) => handleEnter(event, errorMessage)"
           >
-            <InputField
-              v-bind="field"
-              :model-value="customAppURL"
-              class="input-url"
-              type="url"
-              show-message-help
-              :placeholder="$t('pages.appsBrowser.inputPlaceholder')"
-              :message="errorMessage"
-              @keydown.enter.stop="(event: any) => handleEnter(event, errorMessage)"
-            >
-              <template #after>
-                <Component
-                  :is="GlobeSmallIcon"
-                  v-if="!customAppURL.length"
-                />
-                <BtnIcon
-                  v-else
-                  size="sm"
-                  :icon="CloseIcon"
-                  @click="resetField({ value: '' })"
-                />
-              </template>
-            </InputField>
-          </Field>
-
-          <div class="apps-browser-popular-apps">
-            {{ $t('pages.appsBrowser.popularApps') }}
-          </div>
-
-          <div class="apps-browser-list">
-            <div
-              v-for="app in DAPPS_LIST"
-              :key="app.title"
-              class="apps-browser-card"
-            >
-              <AppsBrowserListItem
-                :title="app.title"
-                :image="app.image"
-                @click="onSelectApp(app)"
+            <template #after>
+              <Component
+                :is="GlobeSmallIcon"
+                v-if="!customAppURL.length"
               />
-            </div>
-          </div>
-          <AppsBrowserHistory @select-app="onSelectApp" />
+              <BtnIcon
+                v-else
+                size="sm"
+                :icon="CloseIcon"
+                @click="resetField({ value: '' })"
+              />
+            </template>
+          </InputField>
+        </Field>
+
+        <div class="apps-browser-popular-apps">
+          {{ $t('pages.appsBrowser.popularApps') }}
         </div>
 
-        <iframe
-          v-else
-          ref="iframeEl"
-          title="selectedApp"
-          class="apps-browser-iframe"
-          :src="selectedApp.url"
-          @load="onAppLoaded()"
-        />
+        <div class="apps-browser-list">
+          <div
+            v-for="app in DAPPS_LIST"
+            :key="app.title"
+            class="apps-browser-card"
+          >
+            <AppsBrowserListItem
+              :title="app.title"
+              :image="app.image"
+              @click="onSelectApp(app)"
+            />
+          </div>
+        </div>
+        <AppsBrowserHistory @select-app="onSelectApp" />
       </div>
-      <BackToTop v-if="!selectedApp" />
-    </IonContent>
-  </IonPage>
+
+      <iframe
+        v-else
+        ref="iframeEl"
+        title="selectedApp"
+        class="apps-browser-iframe"
+        :src="selectedApp.url"
+        @load="onAppLoaded()"
+      />
+    </div>
+
+    <BackToTop v-if="!selectedApp" />
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -84,7 +86,6 @@ import {
   BrowserWindowMessageConnection,
   RPC_STATUS,
 } from '@aeternity/aepp-sdk';
-import { IonPage, IonContent } from '@ionic/vue';
 import {
   defineComponent,
   onUnmounted,
@@ -103,6 +104,7 @@ import {
 } from '@/utils';
 import { useAeSdk, useAppsBrowserHistory, useModals } from '@/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import InputField from '@/popup/components/InputField.vue';
 import AppsBrowserHeader from '@/popup/components/AppsBrowser/AppsBrowserHeader.vue';
 import AppsBrowserListItem from '@/popup/components/AppsBrowser/AppsBrowserListItem.vue';
@@ -141,14 +143,13 @@ const LOCAL_STORAGE_ITEM = 'selected-app';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     AppsBrowserListItem,
     AppsBrowserHeader,
     AppsBrowserHistory,
     InputField,
     BtnIcon,
     Field,
-    IonPage,
-    IonContent,
     BackToTop,
   },
   setup() {
@@ -321,14 +322,10 @@ export default defineComponent({
   }
 
   .apps-browser-iframe {
-    --header-height: 40px;
-
     width: 100%;
     height: 100%;
     overflow: hidden;
     border: none;
-    margin-top: calc(-1 * (var(--header-height) + env(safe-area-inset-top)));
-    padding-top: calc(var(--header-height) + env(safe-area-inset-top));
   }
 }
 </style>
diff --git a/src/popup/pages/Assets/AssetDetails.vue b/src/popup/pages/Assets/AssetDetails.vue
index d1e58f5e7..5c60e11a5 100644
--- a/src/popup/pages/Assets/AssetDetails.vue
+++ b/src/popup/pages/Assets/AssetDetails.vue
@@ -1,102 +1,97 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="token-container">
-        <div class="token-content">
-          <div class="top">
-            <Tokens
-              :tokens="tokens"
-              :symbol-length="22"
-              :icon-size="ICON_SIZES.xxl"
-              full-symbol
-              vertical
-            />
+  <PageWrapper
+    :page-title="(isCoin) ? $t('pages.titles.coinDetails') : $t('pages.titles.tokenDetails')"
+  >
+    <div class="token-container">
+      <div class="token-content">
+        <div class="top">
+          <Tokens
+            :tokens="tokens"
+            :symbol-length="22"
+            :icon-size="ICON_SIZES.xxl"
+            full-symbol
+            vertical
+          />
+
+          <TokenAmount
+            class="token-amount"
+            hide-symbol
+            vertical
+            large
+            :protocol="currentActiveProtocol"
+            :amount="assetBalance"
+            :hide-fiat="!isCoin"
+          />
+        </div>
 
-            <TokenAmount
-              class="token-amount"
-              hide-symbol
-              vertical
-              large
-              :protocol="currentActiveProtocol"
-              :amount="assetBalance"
-              :hide-fiat="!isCoin"
-            />
-          </div>
+        <div class="token-actions">
+          <OpenTransferReceiveModalBtn
+            :is-multisig="isMultisig"
+            :token-contract-id="fungibleToken?.contractId"
+          />
+          <OpenTransferSendModalBtn
+            :is-multisig="isMultisig"
+            :disabled="isMultisig && !!pendingMultisigTransaction"
+            :token-contract-id="fungibleToken?.contractId"
+          />
+          <BtnBox
+            v-if="isAeCoin && isNodeMainnet && UNFINISHED_FEATURES"
+            :text="$t('common.buy')"
+            :icon="BuyIcon"
+            :href="activeAccountSimplexLink"
+          />
+          <BtnBox
+            v-else-if="isAeCoin && isNodeTestnet"
+            :text="$t('common.faucet')"
+            :icon="FaucetIcon"
+            :href="activeAccountFaucetUrl"
+          />
+          <BtnBox
+            v-else-if="(
+              !IS_IOS
+              && (isNodeMainnet || isNodeTestnet)
+              && currentActiveProtocol === PROTOCOLS.aeternity
+            )"
+            :text="$t('common.swap')"
+            :icon="SwapIcon"
+            :href="AE_DEX_URL"
+          />
+        </div>
 
-          <div class="token-actions">
-            <OpenTransferReceiveModalBtn
-              :is-multisig="isMultisig"
-              :token-contract-id="fungibleToken?.contractId"
-            />
-            <OpenTransferSendModalBtn
-              :is-multisig="isMultisig"
-              :disabled="isMultisig && !!pendingMultisigTransaction"
-              :token-contract-id="fungibleToken?.contractId"
+        <div
+          ref="stickyTabsWrapperEl"
+          class="sticky-tabs-wrapper"
+        >
+          <Tabs>
+            <Tab
+              v-for="tab in tabs"
+              :key="tab.routeName"
+              :exact-path="tab.exact"
+              :to="{ name: tab.routeName, params: route.params }"
+              :text="tab.text"
             />
-            <BtnBox
-              v-if="isAeCoin && isNodeMainnet && UNFINISHED_FEATURES"
-              :text="$t('common.buy')"
-              :icon="BuyIcon"
-              :href="activeAccountSimplexLink"
-            />
-            <BtnBox
-              v-else-if="isAeCoin && isNodeTestnet"
-              :text="$t('common.faucet')"
-              :icon="FaucetIcon"
-              :href="activeAccountFaucetUrl"
-            />
-            <BtnBox
-              v-else-if="(
-                !IS_IOS
-                && (isNodeMainnet || isNodeTestnet)
-                && currentActiveProtocol === PROTOCOLS.aeternity
-              )"
-              :text="$t('common.swap')"
-              :icon="SwapIcon"
-              :href="AE_DEX_URL"
-            />
-          </div>
-
-          <div
-            ref="stickyTabsWrapperEl"
-            class="sticky-tabs-wrapper"
-          >
-            <Tabs>
-              <Tab
-                v-for="tab in tabs"
-                :key="tab.routeName"
-                :exact-path="tab.exact"
-                :to="{ name: tab.routeName, params: route.params }"
-                :text="tab.text"
-              />
-            </Tabs>
-            <TransactionAndTokenFilter
-              :key="routeName?.toString()"
-              :show-filters="showFilterBar"
-              :show-all-filter-options="!isAeCoin && currentActiveProtocol === PROTOCOLS.aeternity"
-            />
-          </div>
+          </Tabs>
+          <TransactionAndTokenFilter
+            :key="routeName?.toString()"
+            :show-filters="showFilterBar"
+            :show-all-filter-options="!isAeCoin && currentActiveProtocol === PROTOCOLS.aeternity"
+          />
         </div>
-        <!-- We are disabling animations on FF because of a bug that causes flickering
-          see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
-        <IonRouterOutlet
-          :animated="!IS_FIREFOX"
-          :animation="fadeAnimation"
-          class="token-router"
-          :style="{ height: routerHeight || '350px' }"
-        />
       </div>
-    </IonContent>
-  </IonPage>
+      <!-- We are disabling animations on FF because of a bug that causes flickering
+        see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
+      <IonRouterOutlet
+        :animated="!IS_FIREFOX"
+        :animation="fadeAnimation"
+        class="token-router"
+        :style="{ height: routerHeight || '350px' }"
+      />
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import {
-  IonPage,
-  IonRouterOutlet,
-  IonContent,
-  onIonViewDidLeave,
-} from '@ionic/vue';
+import { IonRouterOutlet, onIonViewDidLeave } from '@ionic/vue';
 import {
   computed,
   defineComponent,
@@ -148,6 +143,7 @@ import {
   isContract,
 } from '@/protocols/aeternity/helpers';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import BtnBox from '../../components/buttons/BtnBox.vue';
 import TokenAmount from '../../components/TokenAmount.vue';
 import Tokens from '../../components/Tokens.vue';
@@ -164,6 +160,7 @@ import FaucetIcon from '../../../icons/faucet.svg?vue-component';
 export default defineComponent({
   name: 'AssetDetails',
   components: {
+    PageWrapper,
     TransactionAndTokenFilter,
     TokenAmount,
     BtnBox,
@@ -172,8 +169,6 @@ export default defineComponent({
     Tab,
     OpenTransferReceiveModalBtn,
     OpenTransferSendModalBtn,
-    IonPage,
-    IonContent,
     IonRouterOutlet,
   },
   setup() {
diff --git a/src/popup/pages/CommentNew.vue b/src/popup/pages/CommentNew.vue
index 426d7a2e9..6cefab715 100644
--- a/src/popup/pages/CommentNew.vue
+++ b/src/popup/pages/CommentNew.vue
@@ -1,39 +1,36 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="comment-new">
-        <AccountSelector
-          v-model="creatorAddress"
-          :options="aeAccountsSelectOptions"
-          @select="setActiveAccountByAddress"
-        />
-        <div class="comment-text">
-          {{ text }}
-        </div>
-
-        <FixedScreenFooter>
-          <BtnMain
-            variant="muted"
-            extra-padded
-            class="cancel-button"
-            @click="openCallbackOrGoHome(false)"
-          >
-            {{ $t('common.cancel') }}
-          </BtnMain>
-          <BtnMain
-            :disabled="!isTippingSupported"
-            @click="sendComment"
-          >
-            {{ $t('common.confirm') }}
-          </BtnMain>
-        </FixedScreenFooter>
+  <PageWrapper :page-title="$t('pages.titles.commentNew')">
+    <div class="comment-new">
+      <AccountSelector
+        v-model="creatorAddress"
+        :options="aeAccountsSelectOptions"
+        @select="setActiveAccountByAddress"
+      />
+      <div class="comment-text">
+        {{ text }}
       </div>
-    </ioncontent>
-  </ionpage>
+
+      <FixedScreenFooter>
+        <BtnMain
+          variant="muted"
+          extra-padded
+          class="cancel-button"
+          @click="openCallbackOrGoHome(false)"
+        >
+          {{ $t('common.cancel') }}
+        </BtnMain>
+        <BtnMain
+          :disabled="!isTippingSupported"
+          @click="sendComment"
+        >
+          {{ $t('common.confirm') }}
+        </BtnMain>
+      </FixedScreenFooter>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonPage, IonContent } from '@ionic/vue';
 import {
   defineComponent,
   ref,
@@ -53,6 +50,7 @@ import {
 import { ROUTE_ACCOUNT } from '@/popup/router/routeNames';
 import { useAeNetworkSettings } from '@/protocols/aeternity/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import AccountSelector from '../components/AccountSelector.vue';
 import BtnMain from '../components/buttons/BtnMain.vue';
 import FixedScreenFooter from '../components/FixedScreenFooter.vue';
@@ -60,11 +58,10 @@ import FixedScreenFooter from '../components/FixedScreenFooter.vue';
 export default defineComponent({
   name: 'CommentNew',
   components: {
+    PageWrapper,
     AccountSelector,
     BtnMain,
     FixedScreenFooter,
-    IonPage,
-    IonContent,
   },
   setup() {
     const router = useRouter();
diff --git a/src/popup/pages/CurrencySettings.vue b/src/popup/pages/CurrencySettings.vue
index ef37ea9ad..0d5459d5f 100644
--- a/src/popup/pages/CurrencySettings.vue
+++ b/src/popup/pages/CurrencySettings.vue
@@ -1,54 +1,52 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="currency-settings">
-        <p class="text-description">
-          {{ $t('pages.currencySettings.chooseLanguage') }}
-        </p>
+  <PageWrapper :page-title="$t('pages.titles.currency')">
+    <div class="currency-settings">
+      <p
+        class="text-description"
+        v-text="$t('pages.currencySettings.chooseLanguage')"
+      />
 
-        <div class="options">
-          <RadioButton
-            v-for="({ code, name, symbol }, index) in CURRENCIES"
-            :key="`${index}-${code}`"
-            :value="currentCurrencyCode === code"
-            :class="{ active: currentCurrencyCode === code }"
-            class="currency"
-            has-label-effect
-            @input="setCurrentCurrency(code)"
-          >
-            <div class="row">
-              <div class="left">
-                <div class="code">
-                  {{ code }}
-                </div>
-                <div class="symbol">
-                  ({{ symbol }})
-                </div>
+      <div class="options">
+        <RadioButton
+          v-for="({ code, name, symbol }, index) in CURRENCIES"
+          :key="`${index}-${code}`"
+          :value="currentCurrencyCode === code"
+          :class="{ active: currentCurrencyCode === code }"
+          class="currency"
+          has-label-effect
+          @input="setCurrentCurrency(code)"
+        >
+          <div class="row">
+            <div class="left">
+              <div class="code">
+                {{ code }}
               </div>
-              <div class="name">
-                {{ name }}
+              <div class="symbol">
+                ({{ symbol }})
               </div>
             </div>
-          </RadioButton>
-        </div>
+            <div class="name">
+              {{ name }}
+            </div>
+          </div>
+        </RadioButton>
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 import { useCurrencies } from '@/composables';
 
-import RadioButton from '../components/RadioButton.vue';
+import PageWrapper from '@/popup/components/PageWrapper.vue';
+import RadioButton from '@/popup/components/RadioButton.vue';
 
 export default defineComponent({
   name: 'CurrencySettings',
   components: {
+    PageWrapper,
     RadioButton,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { CURRENCIES, currentCurrencyCode, setCurrentCurrency } = useCurrencies();
diff --git a/src/popup/pages/Dashboard.vue b/src/popup/pages/Dashboard.vue
index ff97b6d41..7c94abbdb 100644
--- a/src/popup/pages/Dashboard.vue
+++ b/src/popup/pages/Dashboard.vue
@@ -1,94 +1,83 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <DashboardBase
-        class="dashboard"
-        :accounts="accounts"
-        :accounts-select-options="accountsSelectOptions"
-        :active-account-address="activeAccount.address"
+  <DashboardBase
+    class="dashboard"
+    :accounts="accounts"
+    :accounts-select-options="accountsSelectOptions"
+    :active-account-address="activeAccount.address"
+    :active-idx="activeAccountGlobalIdx"
+    :balances-total="accountsTotalBalance"
+    @select-account="(address) => setActiveAccountByAddress(address)"
+  >
+    <template #swiper>
+      <AccountSwiper
         :active-idx="activeAccountGlobalIdx"
-        :balances-total="accountsTotalBalance"
-        @select-account="(address) => setActiveAccountByAddress(address)"
+        :address-list="accountsAddressList"
+        @select-account="(index) => setActiveAccountByGlobalIdx(index)"
       >
-        <template #swiper>
-          <AccountSwiper
-            :active-idx="activeAccountGlobalIdx"
-            :address-list="accountsAddressList"
-            @select-account="(index) => setActiveAccountByGlobalIdx(index)"
-          >
-            <template #slide="{ index, selected }">
-              <AccountCard
-                :account="accounts[index]"
-                :selected="selected"
-                :idx="index"
-                :to="{ name: ROUTE_ACCOUNT_DETAILS }"
-              />
-            </template>
-          </AccountSwiper>
-        </template>
-
-        <template #buttons>
-          <OpenTransferReceiveModalBtn is-big />
-          <OpenTransferSendModalBtn is-big />
-        </template>
-
-        <template #cards>
-          <LatestTransactionsCard />
-
-          <DashboardCard
-            v-if="IS_MOBILE_APP || UNFINISHED_FEATURES"
-            :title="$t('dashboard.daeppBrowserCard.title')"
-            :description="$t('dashboard.daeppBrowserCard.description')"
-            :btn-text="$t('dashboard.daeppBrowserCard.button')"
-            :background="daeppBrowserBackground"
-            :icon="GlobeIcon"
-            :to="{ name: ROUTE_APPS_BROWSER }"
-            :card-id="DASHBOARD_CARD_ID.daeppBrowser!"
-          />
-          <DashboardCard
-            v-if="isNodeMainnet && UNFINISHED_FEATURES"
-            :title="$t('dashboard.buyCard.title')"
-            :description="$t('dashboard.buyCard.description')"
-            :btn-text="$t('dashboard.buyCard.button')"
-            :background="buyBackground"
-            :icon="CardIcon"
-            :href="activeAccountSimplexLink"
-            :card-id="DASHBOARD_CARD_ID.buyAe"
-          />
-
-          <DashboardCard
-            v-if="(
-              (isNodeMainnet || isNodeTestnet)
-              && activeAccount.protocol === PROTOCOLS.aeternity
-            )"
-            :title="$t('dashboard.nameCard.title')"
-            :description="$t('dashboard.nameCard.description')"
-            :btn-text="$t('dashboard.nameCard.button')"
-            :background="chainNameBackground"
-            :icon="ActionIcon"
-            :to="{ name: ROUTE_ACCOUNT_DETAILS_NAMES_CLAIM }"
-            :card-id="DASHBOARD_CARD_ID.claimName"
-            variant="purple"
+        <template #slide="{ index, selected }">
+          <AccountCard
+            :account="accounts[index]"
+            :selected="selected"
+            :idx="index"
+            :to="{ name: ROUTE_ACCOUNT_DETAILS }"
           />
         </template>
-      </DashboardBase>
-    </IonContent>
-  </IonPage>
+      </AccountSwiper>
+    </template>
+
+    <template #buttons>
+      <OpenTransferReceiveModalBtn is-big />
+      <OpenTransferSendModalBtn is-big />
+    </template>
+
+    <template #cards>
+      <LatestTransactionsCard />
+
+      <DashboardCard
+        v-if="IS_MOBILE_APP || UNFINISHED_FEATURES"
+        :title="$t('dashboard.daeppBrowserCard.title')"
+        :description="$t('dashboard.daeppBrowserCard.description')"
+        :btn-text="$t('dashboard.daeppBrowserCard.button')"
+        :background="daeppBrowserBackground"
+        :icon="GlobeIcon"
+        :to="{ name: ROUTE_APPS_BROWSER }"
+        :card-id="DASHBOARD_CARD_ID.daeppBrowser!"
+      />
+      <DashboardCard
+        v-if="isNodeMainnet && UNFINISHED_FEATURES"
+        :title="$t('dashboard.buyCard.title')"
+        :description="$t('dashboard.buyCard.description')"
+        :btn-text="$t('dashboard.buyCard.button')"
+        :background="buyBackground"
+        :icon="CardIcon"
+        :href="activeAccountSimplexLink"
+        :card-id="DASHBOARD_CARD_ID.buyAe"
+      />
+
+      <DashboardCard
+        v-if="(
+          (isNodeMainnet || isNodeTestnet)
+          && activeAccount.protocol === PROTOCOLS.aeternity
+        )"
+        :title="$t('dashboard.nameCard.title')"
+        :description="$t('dashboard.nameCard.description')"
+        :btn-text="$t('dashboard.nameCard.button')"
+        :background="chainNameBackground"
+        :icon="ActionIcon"
+        :to="{ name: ROUTE_ACCOUNT_DETAILS_NAMES_CLAIM }"
+        :card-id="DASHBOARD_CARD_ID.claimName"
+        variant="purple"
+      />
+    </template>
+  </DashboardBase>
 </template>
 
 <script lang="ts">
 import {
   computed,
   defineComponent,
-  ref,
   watch,
 } from 'vue';
-import {
-  IonPage,
-  IonContent,
-  onIonViewWillEnter,
-  onIonViewDidLeave,
-} from '@ionic/vue';
 import { useRoute } from 'vue-router';
 
 import {
@@ -135,15 +124,11 @@ export default defineComponent({
     AccountSwiper,
     DashboardBase,
     DashboardCard,
-    IonPage,
-    IonContent,
     LatestTransactionsCard,
     OpenTransferReceiveModalBtn,
     OpenTransferSendModalBtn,
   },
   setup() {
-    const pageIsActive = ref(true);
-
     const route = useRoute();
 
     const {
@@ -172,14 +157,6 @@ export default defineComponent({
       },
     );
 
-    onIonViewWillEnter(() => {
-      pageIsActive.value = true;
-    });
-
-    onIonViewDidLeave(() => {
-      pageIsActive.value = false;
-    });
-
     return {
       DASHBOARD_CARD_ID,
       IS_MOBILE_APP,
@@ -208,7 +185,6 @@ export default defineComponent({
       daeppBrowserBackground,
       isNodeMainnet,
       isNodeTestnet,
-      pageIsActive,
       setActiveAccountByGlobalIdx,
       setActiveAccountByAddress,
     };
diff --git a/src/popup/pages/DashboardMultisig.vue b/src/popup/pages/DashboardMultisig.vue
index cd0a99eb4..a2193b15d 100644
--- a/src/popup/pages/DashboardMultisig.vue
+++ b/src/popup/pages/DashboardMultisig.vue
@@ -1,59 +1,51 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <DashboardBase
-        v-if="isValidActiveIdx"
-        class="dashboard-multisig"
+  <DashboardBase
+    v-if="isValidActiveIdx"
+    class="dashboard-multisig"
+    :active-idx="multisigAccountIdx"
+    :balances-total="multisigBalancesTotal"
+    :accounts="multisigAccounts"
+    is-multisig
+  >
+    <template #swiper>
+      <AccountSwiper
         :active-idx="multisigAccountIdx"
-        :balances-total="multisigBalancesTotal"
-        :accounts="multisigAccounts"
+        :address-list="addressList"
         is-multisig
+        @select-account="(index) => selectAccount(index)"
       >
-        <template #swiper>
-          <AccountSwiper
-            :active-idx="multisigAccountIdx"
-            :address-list="addressList"
-            is-multisig
-            @select-account="(index) => selectAccount(index)"
-          >
-            <template #slide="{ index, selected }">
-              <AccountCardMultisig
-                :account="multisigAccounts[index]"
-                :pending="isPendingAccount(multisigAccounts[index])"
-                :selected="selected"
-                :idx="index"
-                :to="{ name: ROUTE_MULTISIG_DETAILS }"
-              />
-            </template>
-          </AccountSwiper>
-        </template>
-
-        <template #buttons>
-          <OpenTransferReceiveModalBtn
-            :disabled="isActiveMultisigAccountPending"
-            is-multisig
-            is-big
-          />
-          <OpenTransferSendModalBtn
-            :disabled="!!pendingMultisigTransaction || isActiveMultisigAccountPending"
-            is-multisig
-            is-big
+        <template #slide="{ index, selected }">
+          <AccountCardMultisig
+            :account="multisigAccounts[index]"
+            :pending="isPendingAccount(multisigAccounts[index])"
+            :selected="selected"
+            :idx="index"
+            :to="{ name: ROUTE_MULTISIG_DETAILS }"
           />
         </template>
+      </AccountSwiper>
+    </template>
 
-        <template #widgets>
-          <PendingMultisigTransactionCard />
-        </template>
-      </DashboardBase>
-    </IonContent>
-  </IonPage>
+    <template #buttons>
+      <OpenTransferReceiveModalBtn
+        :disabled="isActiveMultisigAccountPending"
+        is-multisig
+        is-big
+      />
+      <OpenTransferSendModalBtn
+        :disabled="!!pendingMultisigTransaction || isActiveMultisigAccountPending"
+        is-multisig
+        is-big
+      />
+    </template>
+
+    <template #widgets>
+      <PendingMultisigTransactionCard />
+    </template>
+  </DashboardBase>
 </template>
 
 <script lang="ts">
-import {
-  IonPage,
-  IonContent,
-} from '@ionic/vue';
 import { computed, defineComponent } from 'vue';
 import BigNumber from 'bignumber.js';
 
@@ -80,8 +72,6 @@ export default defineComponent({
     OpenTransferReceiveModalBtn,
     DashboardBase,
     PendingMultisigTransactionCard,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { openModal } = useModals();
diff --git a/src/popup/pages/ErrorLogSettings.vue b/src/popup/pages/ErrorLogSettings.vue
index c67b9cc28..ab3752b31 100644
--- a/src/popup/pages/ErrorLogSettings.vue
+++ b/src/popup/pages/ErrorLogSettings.vue
@@ -1,35 +1,32 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="errors-log-settings">
-        <p class="text-description">
-          {{ $t('pages.errors-log-settings.description') }}
-        </p>
-
-        <div class="options">
-          <SwitchButton
-            :label="$t('pages.titles.saveErrorsLog')"
-            :model-value="saveErrorLog"
-            @update:modelValue="setSaveErrorLog"
-          />
-        </div>
+  <PageWrapper :page-title="$t('pages.titles.saveErrorsLog')">
+    <div class="errors-log-settings">
+      <p class="text-description">
+        {{ $t('pages.errors-log-settings.description') }}
+      </p>
+
+      <div class="options">
+        <SwitchButton
+          :label="$t('pages.titles.saveErrorsLog')"
+          :model-value="saveErrorLog"
+          @update:modelValue="setSaveErrorLog"
+        />
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 import { useUi } from '@/composables';
 
-import SwitchButton from '../components/SwitchButton.vue';
+import PageWrapper from '@/popup/components/PageWrapper.vue';
+import SwitchButton from '@/popup/components/SwitchButton.vue';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     SwitchButton,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { saveErrorLog, setSaveErrorLog } = useUi();
@@ -43,9 +40,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/variables' as *;
-@use '@/styles/typography';
-
 .errors-log-settings {
   padding-inline: var(--screen-padding-x);
 
diff --git a/src/popup/pages/Invite.vue b/src/popup/pages/Invite.vue
index 7f849013e..4886ac0bf 100644
--- a/src/popup/pages/Invite.vue
+++ b/src/popup/pages/Invite.vue
@@ -1,74 +1,71 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="invite-page">
-        <AccountInfo
-          :account="activeAccount"
-          can-copy-address
-          show-protocol-icon
-        />
-        <BalanceInfo
-          :balance="balance.toNumber()"
-          :protocol="activeAccount.protocol"
-          horizontal-offline-message
+  <PageWrapper :page-title="$t('pages.titles.giftCards')">
+    <div class="invite-page">
+      <AccountInfo
+        :account="activeAccount"
+        can-copy-address
+        show-protocol-icon
+      />
+      <BalanceInfo
+        :balance="balance.toNumber()"
+        :protocol="activeAccount.protocol"
+        horizontal-offline-message
+      />
+      <p class="section-title">
+        {{ $t('pages.invite.generate-link') }}
+      </p>
+      <Field
+        v-slot="{ field, errorMessage, resetField }"
+        v-model="formModel.amount"
+        name="amount"
+        :rules="{
+          does_not_exceed_decimals: formModel.selectedAsset?.decimals,
+          min_value_exclusive: 0,
+          ...+balance.minus(fee) > 0 ? { max_value: max } : {},
+          enough_coin: fee.toString(),
+        }"
+      >
+        <InputAmount
+          v-bind="field"
+          :model-value="formModel.amount"
+          class="amount"
+          name="amount"
+          :label="$t('pages.invite.tip-attached')"
+          :message="errorMessage"
+          readonly
+          :protocol="PROTOCOLS.aeternity"
+          :selected-asset="formModel.selectedAsset"
+          @asset-selected="(val) => formModel.selectedAsset = val"
         />
+        <BtnMain
+          extend
+          :icon="PlusCircleFillIcon"
+          :disabled="!formModel.amount || !!errorMessage"
+          data-cy="invite-generate"
+          @click="generate(resetField)"
+        >
+          {{ $t('pages.invite.generate') }}
+        </BtnMain>
+      </Field>
+      <div
+        v-if="invites.length > 0"
+        class="generated-links"
+      >
         <p class="section-title">
-          {{ $t('pages.invite.generate-link') }}
+          {{ $t('pages.invite.created-links') }}
         </p>
-        <Field
-          v-slot="{ field, errorMessage, resetField }"
-          v-model="formModel.amount"
-          name="amount"
-          :rules="{
-            does_not_exceed_decimals: formModel.selectedAsset?.decimals,
-            min_value_exclusive: 0,
-            ...+balance.minus(fee) > 0 ? { max_value: max } : {},
-            enough_coin: fee.toString(),
-          }"
-        >
-          <InputAmount
-            v-bind="field"
-            :model-value="formModel.amount"
-            class="amount"
-            name="amount"
-            :label="$t('pages.invite.tip-attached')"
-            :message="errorMessage"
-            readonly
-            :protocol="PROTOCOLS.aeternity"
-            :selected-asset="formModel.selectedAsset"
-            @asset-selected="(val) => formModel.selectedAsset = val"
-          />
-          <BtnMain
-            extend
-            :icon="PlusCircleFillIcon"
-            :disabled="!formModel.amount || !!errorMessage"
-            data-cy="invite-generate"
-            @click="generate(resetField)"
-          >
-            {{ $t('pages.invite.generate') }}
-          </BtnMain>
-        </Field>
-        <div
-          v-if="invites.length > 0"
-          class="generated-links"
-        >
-          <p class="section-title">
-            {{ $t('pages.invite.created-links') }}
-          </p>
-          <InviteItem
-            v-for="link in invites"
-            v-bind="link ?? null"
-            :key="link.secretKey.toString()"
-            @loading="(val) => setLoaderVisible(val)"
-          />
-        </div>
+        <InviteItem
+          v-for="link in invites"
+          v-bind="link ?? null"
+          :key="link.secretKey.toString()"
+          @loading="(val) => setLoaderVisible(val)"
+        />
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonPage, IonContent } from '@ionic/vue';
 import { defineComponent, ref } from 'vue';
 import { Field } from 'vee-validate';
 import { generateKeyPair, AE_AMOUNT_FORMATS } from '@aeternity/aepp-sdk';
@@ -86,6 +83,7 @@ import {
   useUi,
 } from '@/composables';
 
+import PageWrapper from '../components/PageWrapper.vue';
 import AccountInfo from '../components/AccountInfo.vue';
 import BalanceInfo from '../components/BalanceInfo.vue';
 import InputAmount from '../components/InputAmount.vue';
@@ -101,8 +99,7 @@ export default defineComponent({
     BtnMain,
     InviteItem,
     Field,
-    IonPage,
-    IonContent,
+    PageWrapper,
   },
   setup() {
     const { activeAccount } = useAccounts();
diff --git a/src/popup/pages/LanguageSettings.vue b/src/popup/pages/LanguageSettings.vue
index 09a766ab6..142d084eb 100644
--- a/src/popup/pages/LanguageSettings.vue
+++ b/src/popup/pages/LanguageSettings.vue
@@ -1,43 +1,41 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="language-settings">
-        <p class="text-description">
-          {{ $t('pages.languageSettings.chooseLanguage') }}
-        </p>
+  <PageWrapper :page-title="$t('pages.titles.language')">
+    <div class="language-settings">
+      <p
+        class="text-description"
+        v-text="$t('pages.languageSettings.chooseLanguage')"
+      />
 
-        <div class="languages">
-          <RadioButton
-            v-for="{ code, name } in languageList"
-            :key="code"
-            :value="activeLanguage === code"
-            :class="{ active: activeLanguage === code }"
-            class="language"
-            has-label-effect
-            @input="switchLanguage(code)"
-          >
-            {{ name }}
-            <span class="language-code">({{ code }})</span>
-          </RadioButton>
-        </div>
+      <div class="languages">
+        <RadioButton
+          v-for="{ code, name } in languageList"
+          :key="code"
+          :value="activeLanguage === code"
+          :class="{ active: activeLanguage === code }"
+          class="language"
+          has-label-effect
+          @input="switchLanguage(code)"
+        >
+          {{ name }}
+          <span class="language-code">({{ code }})</span>
+        </RadioButton>
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 import { languages, SupportedLanguage } from '@/popup/plugins/i18n';
 import { useLanguages } from '@/composables';
 
+import PageWrapper from '../components/PageWrapper.vue';
 import RadioButton from '../components/RadioButton.vue';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     RadioButton,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { activeLanguage, switchLanguage } = useLanguages();
diff --git a/src/popup/pages/More.vue b/src/popup/pages/More.vue
index b087cbfaf..862150cd1 100644
--- a/src/popup/pages/More.vue
+++ b/src/popup/pages/More.vue
@@ -1,120 +1,119 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="more">
-        <PanelItem
-          :to="{ name: 'settings' }"
-          :title="$t('pages.titles.settings')"
-          data-cy="settings"
-        >
-          <template #icon>
-            <Settings />
-          </template>
-        </PanelItem>
-
-        <PanelItem
-          :to="{ name: ROUTE_ADDRESS_BOOK }"
-          :title="$t('pages.titles.addressBook')"
-          :info="addressBookCount"
-          data-cy="address-book"
-        >
-          <template #icon>
-            <MenuCardIcon />
-          </template>
-        </PanelItem>
-
-        <template v-if="isNodeMainnet || isNodeTestnet">
-          <PanelItem
-            :to="{ name: 'tips-claim' }"
-            :title="$t('pages.claimTips.title')"
-            :disabled="!isActiveAccountAe"
-            data-cy="tips-claim"
-          >
-            <template #icon>
-              <ClaimTips />
-            </template>
-          </PanelItem>
-
-          <PanelItem
-            :to="{ name: ROUTE_INVITE }"
-            :title="$t('pages.titles.giftCards')"
-            :disabled="!isActiveAccountAe"
-            data-cy="invite"
-          >
-            <template #icon>
-              <Invites />
-            </template>
-          </PanelItem>
+  <PageWrapper
+    :page-title="$t('pages.titles.more')"
+  >
+    <div class="more">
+      <PanelItem
+        :to="{ name: 'settings' }"
+        :title="$t('pages.titles.settings')"
+        data-cy="settings"
+      >
+        <template #icon>
+          <Settings />
         </template>
+      </PanelItem>
+
+      <PanelItem
+        :to="{ name: ROUTE_ADDRESS_BOOK }"
+        :title="$t('pages.titles.addressBook')"
+        :info="addressBookCount"
+        data-cy="address-book"
+      >
+        <template #icon>
+          <MenuCardIcon />
+        </template>
+      </PanelItem>
 
+      <template v-if="isNodeMainnet || isNodeTestnet">
         <PanelItem
-          :href="BUG_REPORT_URL"
-          :title="$t('pages.about.reportBug')"
-        >
-          <template #icon>
-            <BugReport />
-          </template>
-        </PanelItem>
-
-        <PanelItem
-          v-if="isNodeMainnet && UNFINISHED_FEATURES"
-          :href="AE_SIMPLEX_URL"
-          :title="$t('pages.fungible-tokens.buyAe')"
-        >
-          <template #icon>
-            <BuyIcon />
-          </template>
-        </PanelItem>
-
-        <PanelItem
-          v-else-if="isNodeTestnet"
+          :to="{ name: 'tips-claim' }"
+          :title="$t('pages.claimTips.title')"
           :disabled="!isActiveAccountAe"
-          :href="activeAccountFaucetUrl"
-          :title="$t('common.faucet')"
-        >
-          <template #icon>
-            <FaucetIcon />
-          </template>
-        </PanelItem>
-
-        <PanelItem
-          :href="AE_DEX_URL"
-          :title="$t('pages.more.dex')"
-        >
-          <template #icon>
-            <Dex />
-          </template>
-        </PanelItem>
-
-        <PanelItem
-          :to="{ name: 'about' }"
-          :title="$t('pages.titles.about')"
-          data-cy="about"
+          data-cy="tips-claim"
         >
           <template #icon>
-            <AboutIcon />
+            <ClaimTips />
           </template>
         </PanelItem>
 
         <PanelItem
-          v-if="isMnemonicEncrypted || isBiometricLoginEnabled"
-          :title="$t('pages.secureLogin.lockWallet')"
-          :disabled="isUsingDefaultPassword || (!isMnemonicEncrypted && !isBiometricLoginEnabled)"
-          data-cy="lock-wallet"
-          @click="lockWallet()"
+          :to="{ name: ROUTE_INVITE }"
+          :title="$t('pages.titles.giftCards')"
+          :disabled="!isActiveAccountAe"
+          data-cy="invite"
         >
           <template #icon>
-            <SecureIcon />
+            <Invites />
           </template>
         </PanelItem>
-      </div>
-    </IonContent>
-  </IonPage>
+      </template>
+
+      <PanelItem
+        :href="BUG_REPORT_URL"
+        :title="$t('pages.about.reportBug')"
+      >
+        <template #icon>
+          <BugReport />
+        </template>
+      </PanelItem>
+
+      <PanelItem
+        v-if="isNodeMainnet && UNFINISHED_FEATURES"
+        :href="AE_SIMPLEX_URL"
+        :title="$t('pages.fungible-tokens.buyAe')"
+      >
+        <template #icon>
+          <BuyIcon />
+        </template>
+      </PanelItem>
+
+      <PanelItem
+        v-else-if="isNodeTestnet"
+        :disabled="!isActiveAccountAe"
+        :href="activeAccountFaucetUrl"
+        :title="$t('common.faucet')"
+      >
+        <template #icon>
+          <FaucetIcon />
+        </template>
+      </PanelItem>
+
+      <PanelItem
+        :href="AE_DEX_URL"
+        :title="$t('pages.more.dex')"
+      >
+        <template #icon>
+          <Dex />
+        </template>
+      </PanelItem>
+
+      <PanelItem
+        :to="{ name: 'about' }"
+        :title="$t('pages.titles.about')"
+        data-cy="about"
+      >
+        <template #icon>
+          <AboutIcon />
+        </template>
+      </PanelItem>
+
+      <PanelItem
+        v-if="isMnemonicEncrypted || isBiometricLoginEnabled"
+        :title="$t('pages.secureLogin.lockWallet')"
+        :disabled="isUsingDefaultPassword || (!isMnemonicEncrypted && !isBiometricLoginEnabled)"
+        data-cy="lock-wallet"
+        @click="lockWallet()"
+      >
+        <template #icon>
+          <SecureIcon />
+        </template>
+      </PanelItem>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { IonContent, IonPage } from '@ionic/vue';
 
 import { BUG_REPORT_URL, PROTOCOLS, UNFINISHED_FEATURES } from '@/constants';
 import {
@@ -128,6 +127,7 @@ import { AE_DEX_URL, AE_SIMPLEX_URL } from '@/protocols/aeternity/config';
 import { buildAeFaucetUrl } from '@/protocols/aeternity/helpers';
 import { ROUTE_ADDRESS_BOOK, ROUTE_INVITE } from '@/popup/router/routeNames';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import PanelItem from '@/popup/components/PanelItem.vue';
 
 import Invites from '@/icons/invites.svg?vue-component';
@@ -144,9 +144,8 @@ import SecureIcon from '@/icons/secure-lock.svg?vue-component';
 export default defineComponent({
   name: 'More',
   components: {
+    PageWrapper,
     PanelItem,
-    IonPage,
-    IonContent,
     Invites,
     Settings,
     AboutIcon,
diff --git a/src/popup/pages/MultisigProposalDetails.vue b/src/popup/pages/MultisigProposalDetails.vue
index d309cd3f5..6f6d92293 100644
--- a/src/popup/pages/MultisigProposalDetails.vue
+++ b/src/popup/pages/MultisigProposalDetails.vue
@@ -1,256 +1,254 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="multisig-proposal-details">
-        <AnimatedSpinner
-          v-if="!activeMultisigAccount || !multisigTx"
-          class="spinner"
-        />
-        <template v-else>
-          <div class="header">
-            <TransactionAssetRows
-              v-if="multisigTx"
-              :assets="transactionAssets"
-              :protocol="PROTOCOLS.aeternity"
-              icon-size="rg"
+  <PageWrapper :page-title="$t('pages.titles.multisigProposalDetails')">
+    <div class="multisig-proposal-details">
+      <AnimatedSpinner
+        v-if="!activeMultisigAccount || !multisigTx"
+        class="spinner"
+      />
+      <template v-else>
+        <div class="header">
+          <TransactionAssetRows
+            v-if="multisigTx"
+            :assets="transactionAssets"
+            :protocol="PROTOCOLS.aeternity"
+            icon-size="rg"
+          />
+        </div>
+        <div class="content">
+          <TransactionInfo
+            v-if="multisigTx"
+            class="transaction-overview"
+            :sender="{
+              label: $t('multisig.multisigVault'),
+              address: activeMultisigAccount.gaAccountId,
+              url: protocolExplorer.prepareUrlForAccount(activeMultisigAccount.gaAccountId),
+            }"
+            :recipient="{
+              label: $t('common.smartContract'),
+              address: activeMultisigAccount.contractId,
+              url: activeMultisigAccountExplorerUrl,
+            }"
+            :transaction="transaction"
+          />
+          <div class="explorer">
+            <LinkButton
+              :text="$t('pages.transactionDetails.explorer')"
+              :href="activeMultisigAccountExplorerUrl!"
+              variant="muted"
+              is-external
+              underlined
             />
           </div>
-          <div class="content">
-            <TransactionInfo
-              v-if="multisigTx"
-              class="transaction-overview"
-              :sender="{
-                label: $t('multisig.multisigVault'),
-                address: activeMultisigAccount.gaAccountId,
-                url: protocolExplorer.prepareUrlForAccount(activeMultisigAccount.gaAccountId),
-              }"
-              :recipient="{
-                label: $t('common.smartContract'),
-                address: activeMultisigAccount.contractId,
-                url: activeMultisigAccountExplorerUrl,
-              }"
-              :transaction="transaction"
+          <div class="data-grid">
+            <DetailsItem
+              v-if="multisigTx && multisigTx.recipientId"
+              :label="$t('pages.proposalDetails.receivingAddress')"
+              small
+            >
+              <template #value>
+                <div class="receiving-address">
+                  <Avatar
+                    :address="multisigTx.recipientId"
+                    size="sm"
+                  />
+                  <CopyText
+                    hide-icon
+                    :value="multisigTx.recipientId"
+                    :copied-text="$t('common.addressCopied')"
+                  >
+                    <span class="text-address">{{ splitAddress(multisigTx.recipientId) }}</span>
+                  </CopyText>
+                </div>
+              </template>
+            </DetailsItem>
+
+            <DetailsItem
+              v-if="activeMultisigAccount.proposedBy"
+              :label="$t('pages.proposalDetails.proposedBy')"
+              small
+            >
+              <template #value>
+                <div class="row">
+                  <AccountItem
+                    :address="activeMultisigAccount.proposedBy"
+                    :protocol="PROTOCOLS.aeternity"
+                  />
+                  <DialogBox
+                    v-if="isLocalAccountAddress(activeMultisigAccount.proposedBy)"
+                    dense
+                  >
+                    {{ $t('common.you') }}
+                  </DialogBox>
+                </div>
+              </template>
+            </DetailsItem>
+
+            <MultisigProposalConsensus :proposal-completed="proposalCompleted" />
+
+            <PayloadDetails
+              v-if="transaction"
+              :payload="getTransactionPayload(transaction)"
             />
-            <div class="explorer">
-              <LinkButton
-                :text="$t('pages.transactionDetails.explorer')"
-                :href="activeMultisigAccountExplorerUrl!"
-                variant="muted"
-                is-external
-                underlined
+
+            <div class="span-3-columns">
+              <DetailsItem
+                v-if="activeMultisigAccount.expirationHeight"
+                :value="activeMultisigAccount.expirationHeight"
+                :label="$t('pages.proposalDetails.expiresAt')"
+                :secondary="expirationHeightToRelativeTime"
               />
-            </div>
-            <div class="data-grid">
               <DetailsItem
-                v-if="multisigTx && multisigTx.recipientId"
-                :label="$t('pages.proposalDetails.receivingAddress')"
-                small
-              >
-                <template #value>
-                  <div class="receiving-address">
-                    <Avatar
-                      :address="multisigTx.recipientId"
-                      size="sm"
-                    />
-                    <CopyText
-                      hide-icon
-                      :value="multisigTx.recipientId"
-                      :copied-text="$t('common.addressCopied')"
-                    >
-                      <span class="text-address">{{ splitAddress(multisigTx.recipientId) }}</span>
-                    </CopyText>
-                  </div>
-                </template>
-              </DetailsItem>
-
+                v-else-if="transaction?.blockHeight"
+                :value="transaction.blockHeight"
+                :label="$t('pages.transactionDetails.blockHeight')"
+              />
               <DetailsItem
-                v-if="activeMultisigAccount.proposedBy"
-                :label="$t('pages.proposalDetails.proposedBy')"
-                small
-              >
-                <template #value>
-                  <div class="row">
-                    <AccountItem
-                      :address="activeMultisigAccount.proposedBy"
-                      :protocol="PROTOCOLS.aeternity"
-                    />
-                    <DialogBox
-                      v-if="isLocalAccountAddress(activeMultisigAccount.proposedBy)"
-                      dense
-                    >
-                      {{ $t('common.you') }}
-                    </DialogBox>
-                  </div>
-                </template>
-              </DetailsItem>
-
-              <MultisigProposalConsensus :proposal-completed="proposalCompleted" />
-
-              <PayloadDetails
-                v-if="transaction"
-                :payload="getTransactionPayload(transaction)"
+                v-if="activeMultisigAccount.nonce"
+                :value="activeMultisigAccount.nonce"
+                :label="$t('pages.transactionDetails.nonce')"
+                data-cy="nonce"
               />
-
-              <div class="span-3-columns">
-                <DetailsItem
-                  v-if="activeMultisigAccount.expirationHeight"
-                  :value="activeMultisigAccount.expirationHeight"
-                  :label="$t('pages.proposalDetails.expiresAt')"
-                  :secondary="expirationHeightToRelativeTime"
-                />
-                <DetailsItem
-                  v-else-if="transaction?.blockHeight"
-                  :value="transaction.blockHeight"
-                  :label="$t('pages.transactionDetails.blockHeight')"
+            </div>
+            <DetailsItem
+              v-if="multisigTx.gasPrice"
+              :label="$t('pages.transactionDetails.gasPrice')"
+              data-cy="gas-price"
+            >
+              <template #value>
+                <TokenAmount
+                  :amount="+(aettosToAe(multisigTx.gasPrice))"
+                  :protocol="PROTOCOLS.aeternity"
+                  :symbol="AE_SYMBOL"
+                  hide-fiat
                 />
-                <DetailsItem
-                  v-if="activeMultisigAccount.nonce"
-                  :value="activeMultisigAccount.nonce"
-                  :label="$t('pages.transactionDetails.nonce')"
-                  data-cy="nonce"
+              </template>
+            </DetailsItem>
+
+            <DetailsItem
+              v-if="transaction?.tx?.gasPrice"
+              :label="$t('pages.transactionDetails.gasPrice')"
+            >
+              <template #value>
+                <TokenAmount
+                  :amount="+aettosToAe(transaction.tx.gasPrice)"
+                  :symbol="AE_SYMBOL"
+                  :protocol="PROTOCOLS.aeternity"
                 />
-              </div>
-              <DetailsItem
-                v-if="multisigTx.gasPrice"
-                :label="$t('pages.transactionDetails.gasPrice')"
-                data-cy="gas-price"
-              >
-                <template #value>
-                  <TokenAmount
-                    :amount="+(aettosToAe(multisigTx.gasPrice))"
-                    :protocol="PROTOCOLS.aeternity"
-                    :symbol="AE_SYMBOL"
-                    hide-fiat
-                  />
-                </template>
-              </DetailsItem>
+              </template>
+            </DetailsItem>
 
-              <DetailsItem
-                v-if="transaction?.tx?.gasPrice"
-                :label="$t('pages.transactionDetails.gasPrice')"
-              >
-                <template #value>
-                  <TokenAmount
-                    :amount="+aettosToAe(transaction.tx.gasPrice)"
-                    :symbol="AE_SYMBOL"
-                    :protocol="PROTOCOLS.aeternity"
-                  />
-                </template>
-              </DetailsItem>
+            <DetailsItem
+              v-if="transaction?.tx?.gas"
+              :value="transaction.tx.gas"
+              :label="$t('pages.transactionDetails.gasUsed')"
+            />
 
-              <DetailsItem
-                v-if="transaction?.tx?.gas"
-                :value="transaction.tx.gas"
-                :label="$t('pages.transactionDetails.gasUsed')"
-              />
+            <DetailsItem
+              v-if="multisigTx"
+              :label="$t('modals.multisigTxProposal.fee')"
+            >
+              <template #value>
+                <TokenAmount
+                  :amount="+aettosToAe(AE_GET_META_TX_FEE)"
+                  :symbol="AE_SYMBOL"
+                  :protocol="PROTOCOLS.aeternity"
+                />
+              </template>
+            </DetailsItem>
+            <DetailsItem
+              v-if="transaction"
+              :label="$t('transaction.fee')"
+              data-cy="fee"
+            >
+              <template #value>
+                <TokenAmount
+                  :amount="+aettosToAe(transaction.tx.fee)"
+                  :symbol="AE_SYMBOL"
+                  :protocol="PROTOCOLS.aeternity"
+                />
+              </template>
+            </DetailsItem>
 
-              <DetailsItem
-                v-if="multisigTx"
-                :label="$t('modals.multisigTxProposal.fee')"
-              >
-                <template #value>
-                  <TokenAmount
-                    :amount="+aettosToAe(AE_GET_META_TX_FEE)"
-                    :symbol="AE_SYMBOL"
-                    :protocol="PROTOCOLS.aeternity"
-                  />
-                </template>
-              </DetailsItem>
-              <DetailsItem
-                v-if="transaction"
-                :label="$t('transaction.fee')"
-                data-cy="fee"
+            <DetailsItem
+              v-if="totalSpent"
+              :label="$t('common.total')"
+              data-cy="amount"
+            >
+              <template #value>
+                <TokenAmount
+                  :amount="+aettosToAe(totalSpent)"
+                  :symbol="AE_SYMBOL"
+                  :protocol="PROTOCOLS.aeternity"
+                  high-precision
+                />
+              </template>
+            </DetailsItem>
+          </div>
+          <div
+            v-if="!proposalCompleted && activeMultisigAccount.txHash"
+            class="bottom-buttons"
+          >
+            <div class="row">
+              <BtnMain
+                variant="muted"
+                nowrap
+                extra-padded
+                :disabled="isLoaderVisible"
+                @click="dispatchProposalAction(
+                  TX_FUNCTIONS_MULTISIG.refuse,
+                  $t('pages.proposalDetails.refuse'),
+                )"
               >
-                <template #value>
-                  <TokenAmount
-                    :amount="+aettosToAe(transaction.tx.fee)"
-                    :symbol="AE_SYMBOL"
-                    :protocol="PROTOCOLS.aeternity"
-                  />
-                </template>
-              </DetailsItem>
+                {{ $t('pages.proposalDetails.refuse') }}
+              </BtnMain>
 
-              <DetailsItem
-                v-if="totalSpent"
-                :label="$t('common.total')"
-                data-cy="amount"
+              <BtnMain
+                v-if="pendingMultisigTxCanBeSent"
+                extend
+                nowrap
+                extra-padded
+                :disabled="isLoaderVisible || pendingMultisigTxExpired"
+                @click="processProposal()"
               >
-                <template #value>
-                  <TokenAmount
-                    :amount="+aettosToAe(totalSpent)"
-                    :symbol="AE_SYMBOL"
-                    :protocol="PROTOCOLS.aeternity"
-                    high-precision
-                  />
-                </template>
-              </DetailsItem>
-            </div>
-            <div
-              v-if="!proposalCompleted && activeMultisigAccount.txHash"
-              class="bottom-buttons"
-            >
-              <div class="row">
-                <BtnMain
-                  variant="muted"
-                  nowrap
-                  extra-padded
-                  :disabled="isLoaderVisible"
-                  @click="dispatchProposalAction(
-                    TX_FUNCTIONS_MULTISIG.refuse,
-                    $t('pages.proposalDetails.refuse'),
-                  )"
-                >
-                  {{ $t('pages.proposalDetails.refuse') }}
-                </BtnMain>
-
-                <BtnMain
-                  v-if="pendingMultisigTxCanBeSent"
-                  extend
-                  nowrap
-                  extra-padded
-                  :disabled="isLoaderVisible || pendingMultisigTxExpired"
-                  @click="processProposal()"
-                >
-                  {{ $t('common.send') }}
-                </BtnMain>
-                <BtnMain
-                  v-else
-                  extend
-                  nowrap
-                  extra-padded
-                  :disabled="
-                    isLoaderVisible
-                      || pendingMultisigTxConfirmedByLocalSigners
-                      || pendingMultisigTxExpired
-                  "
-                  @click="dispatchProposalAction(
-                    TX_FUNCTIONS_MULTISIG.confirm,
-                    $t('pages.proposalDetails.sign'),
-                  )"
-                >
-                  {{ $t('pages.proposalDetails.sign') }}
-                </BtnMain>
-              </div>
+                {{ $t('common.send') }}
+              </BtnMain>
               <BtnMain
-                v-if="isLocalAccountAddress(activeMultisigAccount.proposedBy)"
-                variant="muted"
+                v-else
                 extend
                 nowrap
                 extra-padded
-                :disabled="isLoaderVisible"
+                :disabled="
+                  isLoaderVisible
+                    || pendingMultisigTxConfirmedByLocalSigners
+                    || pendingMultisigTxExpired
+                "
                 @click="dispatchProposalAction(
-                  TX_FUNCTIONS_MULTISIG.revoke,
-                  $t('pages.proposalDetails.revoke'),
+                  TX_FUNCTIONS_MULTISIG.confirm,
+                  $t('pages.proposalDetails.sign'),
                 )"
               >
-                {{ $t('pages.proposalDetails.revokeTransaction') }}
+                {{ $t('pages.proposalDetails.sign') }}
               </BtnMain>
             </div>
+            <BtnMain
+              v-if="isLocalAccountAddress(activeMultisigAccount.proposedBy)"
+              variant="muted"
+              extend
+              nowrap
+              extra-padded
+              :disabled="isLoaderVisible"
+              @click="dispatchProposalAction(
+                TX_FUNCTIONS_MULTISIG.revoke,
+                $t('pages.proposalDetails.revoke'),
+              )"
+            >
+              {{ $t('pages.proposalDetails.revokeTransaction') }}
+            </BtnMain>
           </div>
-        </template>
-      </div>
-    </IonContent>
-  </IonPage>
+        </div>
+      </template>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -265,7 +263,7 @@ import { Encoded, Tag } from '@aeternity/aepp-sdk';
 import { isEqual } from 'lodash-es';
 import { useRouter } from 'vue-router';
 import BigNumber from 'bignumber.js';
-import { IonContent, IonPage, onIonViewWillLeave } from '@ionic/vue';
+import { onIonViewWillLeave } from '@ionic/vue';
 
 import type {
   IGAMetaTx,
@@ -306,12 +304,12 @@ import { AeAccountHdWallet } from '@/protocols/aeternity/libs/AeAccountHdWallet'
 
 import { type MultisigProposalConfirmActionVal } from '@/popup/components/Modals/MultisigProposalConfirmActions.vue';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import TransactionInfo from '../components/TransactionInfo.vue';
 import TokenAmount from '../components/TokenAmount.vue';
 import DetailsItem from '../components/DetailsItem.vue';
 import LinkButton from '../components/LinkButton.vue';
 import AccountItem from '../components/AccountItem.vue';
-
 import BtnMain from '../components/buttons/BtnMain.vue';
 import CopyText from '../components/CopyText.vue';
 import PayloadDetails from '../components/PayloadDetails.vue';
@@ -324,6 +322,7 @@ import AnimatedSpinner from '../../icons/animated-spinner.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     PayloadDetails,
     TransactionAssetRows,
     MultisigProposalConsensus,
@@ -337,8 +336,6 @@ export default defineComponent({
     BtnMain,
     CopyText,
     AnimatedSpinner,
-    IonPage,
-    IonContent,
   },
   setup() {
     const router = useRouter();
diff --git a/src/popup/pages/Names/Auction.vue b/src/popup/pages/Names/Auction.vue
index 560c39cd2..ed380b1c2 100644
--- a/src/popup/pages/Names/Auction.vue
+++ b/src/popup/pages/Names/Auction.vue
@@ -1,5 +1,5 @@
 <template>
-  <IonPage>
+  <PageWrapper has-sub-content>
     <div class="auction">
       <div class="auction-tabs">
         <Tabs>
@@ -22,11 +22,11 @@
         :name="name"
       />
     </div>
-  </IonPage>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonRouterOutlet, IonPage } from '@ionic/vue';
+import { IonRouterOutlet } from '@ionic/vue';
 import {
   defineComponent,
   onBeforeUnmount,
@@ -47,18 +47,19 @@ import { aettosToAe } from '@/protocols/aeternity/helpers';
 import { useAeMiddleware } from '@/protocols/aeternity/composables';
 import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
 
-import Tabs from '../../components/tabs/Tabs.vue';
-import Tab from '../../components/tabs/Tab.vue';
+import PageWrapper from '@/popup/components/PageWrapper.vue';
+import Tabs from '@/popup/components/tabs/Tabs.vue';
+import Tab from '@/popup/components/tabs/Tab.vue';
 
 const POLLING_INTERVAL = 3000;
 
 export default defineComponent({
   name: 'Auction',
   components: {
+    PageWrapper,
     Tabs,
     Tab,
     IonRouterOutlet,
-    IonPage,
   },
   props: {
     name: { type: String as PropType<ChainName>, required: true },
diff --git a/src/popup/pages/NetworkForm.vue b/src/popup/pages/NetworkForm.vue
index b1d4cd1b2..149971071 100644
--- a/src/popup/pages/NetworkForm.vue
+++ b/src/popup/pages/NetworkForm.vue
@@ -1,111 +1,111 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div
-        class="network-form"
-        data-cy="network-form"
+  <PageWrapper
+    :page-title="(isEdit) ? $t('pages.titles.networkEdit') : $t('pages.titles.networkAdd')"
+  >
+    <div
+      class="network-form"
+      data-cy="network-form"
+    >
+      <InfoBox
+        v-if="isNetworkPrefilled"
+        :type="INFO_BOX_TYPES.warning"
+        :text="$t('pages.network.thirdPartyDetails')"
+      />
+      <p
+        v-else
+        class="text-description"
       >
-        <InfoBox
-          v-if="isNetworkPrefilled"
-          :type="INFO_BOX_TYPES.warning"
-          :text="$t('pages.network.thirdPartyDetails')"
+        {{ $t('pages.network.formLabel') }}
+      </p>
+
+      <Field
+        v-slot="{ field, errorMessage }"
+        key="name"
+        name="name"
+        :rules="{
+          required: true,
+          network_exists: [customNetworks, savedNetworkName],
+          max_len: NETWORK_NAME_MAX_LENGTH,
+        }"
+      >
+        <InputField
+          v-bind="field"
+          v-model="newNetworkName"
+          data-cy="network-name"
+          :placeholder="$t('pages.network.networkNamePlaceholder')"
+          :label="$t('pages.network.networkNameLabel')"
+          :message="errorMessage"
+          :text-limit="NETWORK_NAME_MAX_LENGTH"
         />
-        <p
-          v-else
-          class="text-description"
-        >
-          {{ $t('pages.network.formLabel') }}
-        </p>
+      </Field>
 
+      <div
+        v-for="{ inputs, name, protocol } in formStructure"
+        :key="protocol"
+        :data-cy="`group-${protocol}`"
+      >
+        <hr>
+        <h3
+          class="text-heading-5"
+          v-text="name"
+        />
         <Field
+          v-for="input in inputs"
           v-slot="{ field, errorMessage }"
-          key="name"
-          name="name"
+          :key="protocol + input.key"
+          :name="`${protocol}-${input.key}`"
           :rules="{
-            required: true,
-            network_exists: [customNetworks, savedNetworkName],
-            max_len: NETWORK_NAME_MAX_LENGTH,
+            required: input.required === true,
+            url: true,
+            ...input.validationRules,
           }"
         >
           <InputField
             v-bind="field"
-            v-model="newNetworkName"
-            data-cy="network-name"
-            :placeholder="$t('pages.network.networkNamePlaceholder')"
-            :label="$t('pages.network.networkNameLabel')"
+            v-model="newNetworkProtocols[protocol][input.key]"
+            :placeholder="input.getPlaceholder()"
+            :label="input.getLabel()"
+            :data-cy="input.key"
             :message="errorMessage"
-            :text-limit="NETWORK_NAME_MAX_LENGTH"
           />
         </Field>
+      </div>
 
-        <div
-          v-for="{ inputs, name, protocol } in formStructure"
-          :key="protocol"
-          :data-cy="`group-${protocol}`"
-        >
-          <hr>
-          <h3
-            class="text-heading-5"
-            v-text="name"
-          />
-          <Field
-            v-for="input in inputs"
-            v-slot="{ field, errorMessage }"
-            :key="protocol + input.key"
-            :name="`${protocol}-${input.key}`"
-            :rules="{
-              required: input.required === true,
-              url: true,
-              ...input.validationRules,
-            }"
-          >
-            <InputField
-              v-bind="field"
-              v-model="newNetworkProtocols[protocol][input.key]"
-              :placeholder="input.getPlaceholder()"
-              :label="input.getLabel()"
-              :data-cy="input.key"
-              :message="errorMessage"
-            />
-          </Field>
-        </div>
-
-        <Transition name="fade-transition">
-          <InfoBox
-            v-if="Object.keys(errors).length"
-            class="invalid-form-message"
-            :type="INFO_BOX_TYPES.danger"
-            :text="$t('validation.formInvalid')"
-          />
-        </Transition>
+      <Transition name="fade-transition">
+        <InfoBox
+          v-if="Object.keys(errors).length"
+          class="invalid-form-message"
+          :type="INFO_BOX_TYPES.danger"
+          :text="$t('validation.formInvalid')"
+        />
+      </Transition>
 
-        <div class="button-wrapper">
-          <BtnMain
-            data-cy="cancel"
-            variant="muted"
-            class="cancel-button"
-            extra-padded
-            :text="$t('common.cancel')"
-            @click="goBack"
-          />
-          <BtnMain
-            :icon="isEdit ? null : PlusCircleIcon"
-            :disabled="!!Object.keys(errors).length"
-            data-cy="btn-add-network"
-            class="add-button"
-            @click="addOrUpdateNetwork()"
-          >
-            <template v-if="isEdit">
-              {{ $t('pages.network.apply') }}
-            </template>
-            <template v-else>
-              {{ $t('pages.network.addNetwork') }}
-            </template>
-          </BtnMain>
-        </div>
+      <div class="button-wrapper">
+        <BtnMain
+          data-cy="cancel"
+          variant="muted"
+          class="cancel-button"
+          extra-padded
+          :text="$t('common.cancel')"
+          @click="goBack"
+        />
+        <BtnMain
+          :icon="isEdit ? null : PlusCircleIcon"
+          :disabled="!!Object.keys(errors).length"
+          data-cy="btn-add-network"
+          class="add-button"
+          @click="addOrUpdateNetwork()"
+        >
+          <template v-if="isEdit">
+            {{ $t('pages.network.apply') }}
+          </template>
+          <template v-else>
+            {{ $t('pages.network.addNetwork') }}
+          </template>
+        </BtnMain>
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -116,7 +116,6 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { Field, useForm } from 'vee-validate';
-import { IonPage, IonContent } from '@ionic/vue';
 import type {
   AdapterNetworkSettingList,
   INetwork,
@@ -135,6 +134,7 @@ import { useNetworks } from '@/composables';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 import type { AeNetworkProtocolSettings } from '@/protocols/aeternity/types';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import BtnMain from '../components/buttons/BtnMain.vue';
 import InputField from '../components/InputField.vue';
 import InfoBox, { INFO_BOX_TYPES } from '../components/InfoBox.vue';
@@ -149,12 +149,11 @@ interface IFormBlock {
 export default defineComponent({
   name: 'NetworkForm',
   components: {
+    PageWrapper,
     InfoBox,
     BtnMain,
     InputField,
     Field,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { setValues, validate, errors } = useForm();
diff --git a/src/popup/pages/Networks.vue b/src/popup/pages/Networks.vue
index d00bdb9e4..b75ce31bd 100644
--- a/src/popup/pages/Networks.vue
+++ b/src/popup/pages/Networks.vue
@@ -1,55 +1,53 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div
-        data-cy="networks"
-        class="networks"
-      >
-        <p class="text-description">
-          {{ $t('pages.network.listLabel') }}
-        </p>
+  <PageWrapper :page-title="$t('pages.titles.networks')">
+    <div
+      data-cy="networks"
+      class="networks"
+    >
+      <p
+        class="text-description"
+        v-text="$t('pages.network.listLabel')"
+      />
 
-        <div class="networks-list">
-          <NetworkRow
-            v-for="network in networks"
-            :key="network.name"
-            :network="network"
-            :is-active="network.name === activeNetwork.name"
-            @network-select="switchNetwork"
-            @network-delete="deleteCustomNetwork"
-          />
-        </div>
-
-        <BtnMain
-          extend
-          variant="muted"
-          class="add-custom-network"
-          data-cy="to-add"
-          :text="$t('pages.network.addCustomNetwork')"
-          :icon="PlusCircleIcon"
-          :to="{ name: ROUTE_NETWORK_ADD }"
+      <div class="networks-list">
+        <NetworkRow
+          v-for="network in networks"
+          :key="network.name"
+          :network="network"
+          :is-active="network.name === activeNetwork.name"
+          @network-select="switchNetwork"
+          @network-delete="deleteCustomNetwork"
         />
       </div>
-    </IonContent>
-  </IonPage>
+
+      <BtnMain
+        extend
+        variant="muted"
+        class="add-custom-network"
+        data-cy="to-add"
+        :text="$t('pages.network.addCustomNetwork')"
+        :icon="PlusCircleIcon"
+        :to="{ name: ROUTE_NETWORK_ADD }"
+      />
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonPage, IonContent } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { useNetworks } from '@/composables';
 import { ROUTE_NETWORK_ADD } from '@/popup/router/routeNames';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import NetworkRow from '@/popup/components/NetworkRow.vue';
 import BtnMain from '@/popup/components/buttons/BtnMain.vue';
 import PlusCircleIcon from '@/icons/plus-circle.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     BtnMain,
     NetworkRow,
-    IonPage,
-    IonContent,
   },
   setup() {
     const {
diff --git a/src/popup/pages/NotFound.vue b/src/popup/pages/NotFound.vue
index ab49cadc6..5f9c9823c 100644
--- a/src/popup/pages/NotFound.vue
+++ b/src/popup/pages/NotFound.vue
@@ -1,62 +1,61 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="not-found">
-        <img
-          class="image"
-          :src="NotFoundImage"
-          alt="Feature not found"
-        >
-        <div class="text-heading-1 heading">
-          {{ $t('pages.notFound.header') }}
-        </div>
-        <div class="text-description description">
-          {{ $t('pages.notFound.description') }}
-        </div>
+  <PageWrapper :page-title="$t('pages.titles.notFound')">
+    <div class="not-found">
+      <img
+        class="image"
+        :src="NotFoundImage"
+        alt="Feature not found"
+      >
+      <div
+        class="text-heading-1 heading"
+        v-text="$t('pages.notFound.header')"
+      />
+      <div
+        class="text-description description"
+        v-text="$t('pages.notFound.description')"
+      />
 
-        <div class="button-wrapper">
-          <BtnMain
-            v-if="!hideHomeButton"
-            class="button"
-            :to="{ name: 'index' }"
-          >
-            {{ $t('pages.notFound.backToHome') }}
-          </BtnMain>
-          <BtnMain
-            class="button"
-            :href="BUG_REPORT_URL"
-            variant="muted"
-          >
-            <BugIcon class="icon" />
-            {{ $t('pages.notFound.reportBug') }}
-          </BtnMain>
-        </div>
+      <div class="button-wrapper">
+        <BtnMain
+          v-if="!hideHomeButton"
+          class="button"
+          :to="{ name: 'index' }"
+          :text="$t('pages.notFound.backToHome')"
+          extend
+        />
+        <BtnMain
+          class="button"
+          :href="BUG_REPORT_URL"
+          :icon="BugIcon"
+          :text="$t('pages.notFound.reportBug')"
+          variant="muted"
+          extend
+        />
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonContent, IonPage } from '@ionic/vue';
 import { BUG_REPORT_URL } from '@/constants';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import BtnMain from '../components/buttons/BtnMain.vue';
 import NotFoundImage from '../../image/not-found.webp';
 import BugIcon from '../../icons/bug.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     BtnMain,
-    BugIcon,
-    IonPage,
-    IonContent,
   },
   props: {
     hideHomeButton: Boolean,
   },
   setup() {
     return {
+      BugIcon,
       NotFoundImage,
       BUG_REPORT_URL,
     };
@@ -66,8 +65,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/typography';
-
 .not-found {
   text-align: center;
   display: flex;
@@ -95,16 +92,6 @@ export default defineComponent({
     gap: 16px;
     margin-top: 32px;
     width: 100%;
-
-    .button {
-      width: 100%;
-    }
-
-    .icon {
-      margin-right: 4px;
-      width: 20px;
-      height: 20px;
-    }
   }
 }
 </style>
diff --git a/src/popup/pages/NotificationSettings.vue b/src/popup/pages/NotificationSettings.vue
index 540ca7bd3..4e8e94b02 100644
--- a/src/popup/pages/NotificationSettings.vue
+++ b/src/popup/pages/NotificationSettings.vue
@@ -1,44 +1,41 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="notification-settings">
-        <p class="text-description">
-          {{ $t('pages.notificationSettings.description') }}
-        </p>
-        <p class="text-description">
-          {{ $t('pages.notificationSettings.description2') }}
-        </p>
+  <PageWrapper :page-title="$t('pages.titles.notifications')">
+    <div class="notification-settings">
+      <p class="text-description">
+        {{ $t('pages.notificationSettings.description') }}
+      </p>
+      <p class="text-description">
+        {{ $t('pages.notificationSettings.description2') }}
+      </p>
 
-        <div class="switches">
-          <SwitchButton
-            v-for="(label, type) in notificationTypeLabels"
-            :key="type"
-            :disabled="type === NOTIFICATION_TYPES.wallet"
-            :model-value="isNotificationTypeAllowed(type)"
-            :label="label"
-            @update:modelValue="toggleNotificationsSetting(type)"
-          />
-        </div>
+      <div class="switches">
+        <SwitchButton
+          v-for="(label, type) in notificationTypeLabels"
+          :key="type"
+          :disabled="type === NOTIFICATION_TYPES.wallet"
+          :model-value="isNotificationTypeAllowed(type)"
+          :label="label"
+          @update:modelValue="toggleNotificationsSetting(type)"
+        />
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 import { useI18n } from 'vue-i18n';
 import type { NotificationType } from '@/types';
 import { NOTIFICATION_TYPES } from '@/constants';
 import { useNotifications } from '@/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import SwitchButton from '@/popup/components/SwitchButton.vue';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     SwitchButton,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { t } = useI18n();
diff --git a/src/popup/pages/Notifications.vue b/src/popup/pages/Notifications.vue
index 131da56c6..8c5466e59 100644
--- a/src/popup/pages/Notifications.vue
+++ b/src/popup/pages/Notifications.vue
@@ -1,33 +1,30 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div
-        ref="innerElement"
-        class="notifications"
+  <PageWrapper :page-title="$t('pages.titles.notifications')">
+    <div
+      ref="innerElement"
+      class="notifications"
+    >
+      <InfiniteScroll
+        v-if="notificationsToShow.length"
+        @load-more="loadMoreNotifications"
       >
-        <InfiniteScroll
-          v-if="notificationsToShow.length"
-          @load-more="loadMoreNotifications"
-        >
-          <NotificationItem
-            v-for="notification in notificationsToShow"
-            :key="notification.id"
-            :notification="notification"
-          />
-        </InfiniteScroll>
-        <p
-          v-else
-          class="empty-list-message"
-        >
-          {{ $t('pages.notifications.noNotifications') }}
-        </p>
-      </div>
-    </IonContent>
-  </IonPage>
+        <NotificationItem
+          v-for="notification in notificationsToShow"
+          :key="notification.id"
+          :notification="notification"
+        />
+      </InfiniteScroll>
+      <p
+        v-else
+        class="empty-list-message"
+      >
+        {{ $t('pages.notifications.noNotifications') }}
+      </p>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonPage, IonContent } from '@ionic/vue';
 import {
   defineComponent,
   onBeforeUnmount,
@@ -38,16 +35,16 @@ import {
 import { IS_EXTENSION } from '@/constants';
 import { useViewport, useNotifications } from '@/composables';
 
-import NotificationItem from '../components/NotificationItem.vue';
-import InfiniteScroll from '../components/InfiniteScroll.vue';
+import PageWrapper from '@/popup/components/PageWrapper.vue';
+import NotificationItem from '@/popup/components/NotificationItem.vue';
+import InfiniteScroll from '@/popup/components/InfiniteScroll.vue';
 
 export default defineComponent({
   name: 'Notifications',
   components: {
+    PageWrapper,
     InfiniteScroll,
     NotificationItem,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { initViewport } = useViewport();
diff --git a/src/popup/pages/PermissionManager.vue b/src/popup/pages/PermissionManager.vue
index c7ff17323..f534cd576 100644
--- a/src/popup/pages/PermissionManager.vue
+++ b/src/popup/pages/PermissionManager.vue
@@ -1,164 +1,164 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="permission-manager">
-        <div
-          v-if="!editView"
-          class="text-description"
-        >
-          {{ $t('pages.permissions.add-description') }}
-        </div>
+  <PageWrapper
+    :page-title="(editView) ? $t('pages.titles.permissionsEdit') : $t('pages.titles.permissionsAdd')"
+  >
+    <div class="permission-manager">
+      <div
+        v-if="!editView"
+        class="text-description"
+      >
+        {{ $t('pages.permissions.add-description') }}
+      </div>
 
-        <div class="inputs">
-          <div class="permission-row">
-            <Field
-              v-slot="{ field, errorMessage }"
+      <div class="inputs">
+        <div class="permission-row">
+          <Field
+            v-slot="{ field, errorMessage }"
+            name="name"
+            :rules="{
+              required: true,
+              max_len: 32,
+            }"
+          >
+            <InputField
+              v-bind="field"
+              v-model="permission.name"
               name="name"
-              :rules="{
-                required: true,
-                max_len: 32,
-              }"
-            >
-              <InputField
-                v-bind="field"
-                v-model="permission.name"
-                name="name"
-                :label="$t('pages.permissions.custom-name')"
-                :placeholder="$t('pages.permissions.enter-custom-name')"
-                :text-limit="32"
-                :message="errorMessage"
-              />
-            </Field>
-          </div>
-
-          <div class="permission-row">
-            <Field
-              v-slot="{ field, errorMessage }"
-              name="url"
-              :rules="{
-                required: true,
-                url: permissionHostValidation,
-              }"
-            >
-              <InputField
-                v-bind="field"
-                v-model="permission.host"
-                type="url"
-                name="url"
-                :label="$t('pages.permissions.permissions-for-url')"
-                :placeholder="$t('pages.permissions.enter-url')"
-                :message="errorMessage"
-              />
-            </Field>
-          </div>
-        </div>
-        <div class="permission-row switch">
-          <SwitchButton
-            v-model="permission.address"
-            :label="$t('pages.permissions.login')"
-          />
+              :label="$t('pages.permissions.custom-name')"
+              :placeholder="$t('pages.permissions.enter-custom-name')"
+              :text-limit="32"
+              :message="errorMessage"
+            />
+          </Field>
         </div>
 
-        <div class="permission-row switch">
-          <SwitchButton
-            v-model="permission.addressList"
-            :label="$t('pages.permissions.addressList')"
-          />
+        <div class="permission-row">
+          <Field
+            v-slot="{ field, errorMessage }"
+            name="url"
+            :rules="{
+              required: true,
+              url: permissionHostValidation,
+            }"
+          >
+            <InputField
+              v-bind="field"
+              v-model="permission.host"
+              type="url"
+              name="url"
+              :label="$t('pages.permissions.permissions-for-url')"
+              :placeholder="$t('pages.permissions.enter-url')"
+              :message="errorMessage"
+            />
+          </Field>
         </div>
+      </div>
+      <div class="permission-row switch">
+        <SwitchButton
+          v-model="permission.address"
+          :label="$t('pages.permissions.login')"
+        />
+      </div>
 
-        <div class="permission-row switch">
-          <SwitchButton
-            v-model="permission.messageSign"
-            :label="$t('pages.permissions.message-sign')"
-          />
-        </div>
+      <div class="permission-row switch">
+        <SwitchButton
+          v-model="permission.addressList"
+          :label="$t('pages.permissions.addressList')"
+        />
+      </div>
 
-        <div class="permission-row switch">
-          <SwitchButton
-            v-model="permission.dailySpendLimit"
-            :label="$t('pages.permissions.daily-spending-limit')"
-          />
-        </div>
+      <div class="permission-row switch">
+        <SwitchButton
+          v-model="permission.messageSign"
+          :label="$t('pages.permissions.message-sign')"
+        />
+      </div>
+
+      <div class="permission-row switch">
+        <SwitchButton
+          v-model="permission.dailySpendLimit"
+          :label="$t('pages.permissions.daily-spending-limit')"
+        />
+      </div>
 
-        <transition
-          name="fade-transition"
-          mode="out-in"
+      <transition
+        name="fade-transition"
+        mode="out-in"
+      >
+        <div
+          v-if="permission.dailySpendLimit"
+          class="transaction-sign-limit"
         >
-          <div
-            v-if="permission.dailySpendLimit"
-            class="transaction-sign-limit"
+          <Field
+            v-slot="{ field }"
+            name="transactionSignLimit"
+            :rules="{
+              min_value_exclusive: 0,
+              does_not_exceed_decimals: selectedAsset.decimals,
+            }"
           >
-            <Field
-              v-slot="{ field }"
+            <InputAmount
+              v-bind="field"
+              v-model="permission.transactionSignLimit"
+              class="transaction-limit-input"
               name="transactionSignLimit"
-              :rules="{
-                min_value_exclusive: 0,
-                does_not_exceed_decimals: selectedAsset.decimals,
-              }"
-            >
-              <InputAmount
-                v-bind="field"
-                v-model="permission.transactionSignLimit"
-                class="transaction-limit-input"
-                name="transactionSignLimit"
-                label=" "
-                :selected-asset="selectedAsset"
-                :protocol="PROTOCOLS.aeternity"
-                readonly
-              />
-            </Field>
-
-            <DetailsItem :label="$t('pages.permissions.spent-today')">
-              <TokenAmount
-                class="transaction-limit-amount"
-                :amount="permission.transactionSignSpent"
-                :protocol="PROTOCOLS.aeternity"
-              />
-            </DetailsItem>
-            <DetailsItem :label="$t('pages.permissions.left-today')">
-              <TokenAmount
-                class="transaction-limit-amount"
-                :amount="permission.transactionSignLimit - permission.transactionSignSpent"
-                :protocol="PROTOCOLS.aeternity"
-              />
-            </DetailsItem>
-            <DetailsItem :label="$t('pages.account.balance')">
-              <TokenAmount
-                class="transaction-limit-amount"
-                :amount="+balance"
-                :protocol="PROTOCOLS.aeternity"
-              />
-            </DetailsItem>
-          </div>
-        </transition>
-
-        <div class="bottom">
-          <div class="actions">
-            <BtnMain
-              variant="muted"
-              :text="$t('common.cancel')"
-              :to="{ name: ROUTE_PERMISSIONS_SETTINGS, replace: true }"
+              label=" "
+              :selected-asset="selectedAsset"
+              :protocol="PROTOCOLS.aeternity"
+              readonly
             />
-            <BtnMain
-              class="confirm"
-              extra-padded
-              :text="$t('common.confirm')"
-              :disabled="!permissionChanged"
-              @click="savePermission"
+          </Field>
+
+          <DetailsItem :label="$t('pages.permissions.spent-today')">
+            <TokenAmount
+              class="transaction-limit-amount"
+              :amount="permission.transactionSignSpent"
+              :protocol="PROTOCOLS.aeternity"
+            />
+          </DetailsItem>
+          <DetailsItem :label="$t('pages.permissions.left-today')">
+            <TokenAmount
+              class="transaction-limit-amount"
+              :amount="permission.transactionSignLimit - permission.transactionSignSpent"
+              :protocol="PROTOCOLS.aeternity"
             />
-          </div>
+          </DetailsItem>
+          <DetailsItem :label="$t('pages.account.balance')">
+            <TokenAmount
+              class="transaction-limit-amount"
+              :amount="+balance"
+              :protocol="PROTOCOLS.aeternity"
+            />
+          </DetailsItem>
+        </div>
+      </transition>
+
+      <div class="bottom">
+        <div class="actions">
           <BtnMain
-            v-if="editView"
-            extend
             variant="muted"
-            :text="$t('pages.permissions.delete')"
-            :icon="DeleteIcon"
-            @click="removePermissionAndRedirect()"
+            :text="$t('common.cancel')"
+            :to="{ name: ROUTE_PERMISSIONS_SETTINGS, replace: true }"
+          />
+          <BtnMain
+            class="confirm"
+            extra-padded
+            :text="$t('common.confirm')"
+            :disabled="!permissionChanged"
+            @click="savePermission"
           />
         </div>
+        <BtnMain
+          v-if="editView"
+          extend
+          variant="muted"
+          :text="$t('pages.permissions.delete')"
+          :icon="DeleteIcon"
+          @click="removePermissionAndRedirect()"
+        />
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -170,7 +170,6 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useForm, Field } from 'vee-validate';
-import { IonPage, IonContent } from '@ionic/vue';
 
 import type { IPermission } from '@/types';
 import {
@@ -181,6 +180,7 @@ import { useBalances, useCurrencies, usePermissions } from '@/composables';
 import { ROUTE_NOT_FOUND, ROUTE_PERMISSIONS_SETTINGS } from '@/popup/router/routeNames';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import DetailsItem from '../components/DetailsItem.vue';
 import SwitchButton from '../components/SwitchButton.vue';
 import InputAmount from '../components/InputAmount.vue';
@@ -191,13 +191,12 @@ import DeleteIcon from '../../icons/trash.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     BtnMain,
     DetailsItem,
     Field,
     InputAmount,
     InputField,
-    IonContent,
-    IonPage,
     SwitchButton,
     TokenAmount,
   },
diff --git a/src/popup/pages/PermissionsSettings.vue b/src/popup/pages/PermissionsSettings.vue
index e38a2cbe3..bca871d6e 100644
--- a/src/popup/pages/PermissionsSettings.vue
+++ b/src/popup/pages/PermissionsSettings.vue
@@ -1,44 +1,42 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="permissions-settings">
-        <i18n-t
-          keypath="pages.permissions.description"
-          tag="div"
-          class="text-description"
-          scope="global"
-        >
-          <LinkButton href="https://superhero.com/">superhero.com</LinkButton>
-        </i18n-t>
+  <PageWrapper :page-title="$t('pages.titles.permissionsSettings')">
+    <div class="permissions-settings">
+      <i18n-t
+        keypath="pages.permissions.description"
+        tag="div"
+        class="text-description"
+        scope="global"
+      >
+        <LinkButton href="https://superhero.com/">superhero.com</LinkButton>
+      </i18n-t>
 
-        <div class="hosts">
-          <PanelItem
-            v-for="permission in permissions"
-            :key="permission.host"
-            class="host"
-            :to="{ name: ROUTE_PERMISSIONS_DETAILS, params: { host: permission.host } }"
-            :title="permission.name"
-          />
-        </div>
-
-        <BtnMain
-          extend
-          variant="muted"
-          :text="$t('pages.permissions.add')"
-          :to="{ name: ROUTE_PERMISSIONS_ADD }"
-          :icon="PlusIcon"
+      <div class="hosts">
+        <PanelItem
+          v-for="permission in permissions"
+          :key="permission.host"
+          class="host"
+          :to="{ name: ROUTE_PERMISSIONS_DETAILS, params: { host: permission.host } }"
+          :title="permission.name"
         />
       </div>
-    </IonContent>
-  </IonPage>
+
+      <BtnMain
+        extend
+        variant="muted"
+        :text="$t('pages.permissions.add')"
+        :to="{ name: ROUTE_PERMISSIONS_ADD }"
+        :icon="PlusIcon"
+      />
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 import { usePermissions } from '@/composables/permissions';
 import { ROUTE_PERMISSIONS_ADD, ROUTE_PERMISSIONS_DETAILS } from '@/popup/router/routeNames';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import LinkButton from '@/popup/components/LinkButton.vue';
 import PanelItem from '../components/PanelItem.vue';
 import BtnMain from '../components/buttons/BtnMain.vue';
@@ -46,11 +44,10 @@ import PlusIcon from '../../icons/plus-circle-fill.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     LinkButton,
     PanelItem,
     BtnMain,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { permissions } = usePermissions();
diff --git a/src/popup/pages/PrivacyPolicy.vue b/src/popup/pages/PrivacyPolicy.vue
index 0985f87eb..fddb7e611 100644
--- a/src/popup/pages/PrivacyPolicy.vue
+++ b/src/popup/pages/PrivacyPolicy.vue
@@ -1,347 +1,345 @@
 <!-- eslint-disable vue/max-len -->
 <template>
-  <IonPage>
-    <IonContent
-      class="ion-padding ion-content-bg"
-      data-cy="privacy-policy"
-    >
-      <div class="privacy-policy">
-        <p><em>The present Privacy Policy is effective since on 9th April 2020.</em></p>
-        <ol class="policy-list">
-          <li class="first">
-            <h3><strong>Introduction</strong></h3>
-            <p>
-              <strong>Superhero.com Establishment (&ldquo;Superhero&rdquo;, &ldquo;we&rdquo;,
-                &ldquo;us&rdquo;, &ldquo;our&rdquo; </strong>or<strong> &ldquo;the company&rdquo;
-              </strong>) is a company with seat and registered
-              address at: Dr. Grass Str. 12, 9490 Vaduz, Liechtenstein, with email address for
-              communication related to the <strong>{{ APP_NAME }}</strong>:
-              superherowallet@protonmail.com. <strong>Superhero</strong> is the company, which created
-              and developed <strong>{{ APP_NAME }}</strong>.
-            </p>
-            <p>
-              <strong>Superhero </strong>takes your privacy and the security of your information as a
-              <strong>USER</strong> very seriously.&nbsp;&nbsp;&nbsp;
-            </p>
-            <p>
-              This <strong>Privacy Policy</strong> (&ldquo;<strong>Policy</strong>&rdquo;) is applicable
-              for the <strong>Superhero </strong>developed software program
-              <strong>{{ APP_NAME }}</strong> (the <strong>&ldquo;Wallet&rdquo;</strong> or the
-              <strong>&ldquo;application&rdquo;</strong>), designed for end users, which allows
-              supporters to send value to content creators, causes, charities, groups or regular
-              individuals online as a reward for contributing accurate information, relevant insights,
-              quality content. The <strong>application</strong> can be downloaded or used from the
-              following places:
-            </p>
-            <p>
-              1) downloaded as an add-on (extension) to Firefox:
-              <LinkButton :href="APP_LINK_FIREFOX">{{ APP_LINK_FIREFOX }}</LinkButton>
-              ; to Chrome, Brave and Opera:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-              <LinkButton :href="APP_LINK_CHROME">{{ APP_LINK_CHROME }}</LinkButton>;
-            </p>
-            <p>
-              2) accessed from any Browser at the address:
-              <LinkButton :href="APP_LINK_WEB">{{ APP_LINK_WEB }}</LinkButton>;
-            </p>
-            <p>
-              3) downloaded from Google Play:&nbsp;&nbsp;&nbsp;&nbsp;
-              <LinkButton :href="APP_LINK_ANDROID">{{ APP_LINK_ANDROID }}</LinkButton>
-              and
-            </p>
-            <p>
-              from App Store:
-              <LinkButton :href="APP_LINK_IOS">{{ APP_LINK_IOS }}</LinkButton>.
-            </p>
-            <p>
-              If you have any questions regarding this <strong>Policy</strong>, please contact us at
-              superherowallet@protonmail.com. If you do not agree to the terms of this
-              <strong>Policy</strong>, please do not use <strong>the application</strong>.&nbsp;
-            </p>
-            <p>
-              Each time you use <strong>the application</strong>, the current version of this
-              <strong>Policy</strong> will apply. The new version of the
-              <strong>Privacy Policy</strong> becomes effective from the day it is announced publicly on
-              <strong>the application</strong> unless stated otherwise. Accordingly, when
-              <strong>YOU</strong> use <strong>the application</strong>, <strong>YOU</strong> should
-              check the date of this <strong>Policy</strong> (which appears at the top). If
-              <strong>YOU</strong> continue to use the <strong>application</strong> after the changes
-              have been enforced, <strong>We</strong> shall consider this a given consent and acceptance
-              to the modified content. If <strong>YOU</strong> do not agree to the new modifications,
-              please contact <strong>Us</strong> for further assistance via the above-mentioned in the
-              previous paragraph email address.
-            </p>
-            <p>
-              All abbreviations and definitions of the <strong>TERMS</strong> shall be applicable for
-              the present <strong>Privacy Policy</strong>.
-            </p>
-          </li>
-          <li class="second">
-            <h3><strong>Definitions</strong></h3>
-            <p>
-              For the purposes of this <strong>Privacy Policy</strong>, the terms have the following
-              meaning:
-            </p>
-            <ul>
-              <li>
-                <strong>&bdquo;Data Controller&ldquo;</strong> means the person or body which, alone or
-                jointly with others, determines the purposes and means of the processing of personal
-                data;
-              </li>
-              <li>
-                <strong>&bdquo;Personal Data&ldquo;</strong> means any information relating to an
-                identified or identifiable natural person &ndash; data subject
-                (&lsquo;<strong>USER&rsquo;</strong>);
-              </li>
-              <li>
-                <strong>&bdquo;Processing&ldquo;</strong> means any operation or set of operations which
-                is performed on personal data;
-              </li>
-              <li>
-                <strong>&bdquo;Recipient&ldquo;</strong> means a natural or legal person, public
-                authority, agency or another body, to which the personal data are disclosed, whether a
-                third party or not;
-              </li>
-            </ul>
-            <p>
-              <strong>&bdquo;Personal data breach&ldquo;</strong> means a breach of security leading to
-              the accidental or unlawful destruction, loss, alteration, unauthorized disclosure of, or
-              access to, personal data transmitted, stored or otherwise processed.
-            </p>
-          </li>
-          <li class="third">
-            <h3><strong>Personal data collection disclaimer</strong></h3>
-            <p>
-              <strong>Please bear in mind that once the information or personal data under any form is
-                submitted and written on the &AElig;ternity blockchain, it cannot be amended, corrected
-                or deleted. Superhero cannot change, restore, delete or amend in any way the
-                above-mentioned information and therefore, shall not be held liable in any way for the
-                collection of the information on the blockchain.</strong>
-            </p>
-            <p>
-              <strong>The Wallet is a software solution which facilitates the peer-to-peer transfer
-                of tokens between USERS and their interaction with &AElig;ternity blockchain.</strong>
-              <strong>USERS</strong> understand and agree that <strong>Superhero</strong> does not
-              determine the purposes and means of <strong>processing</strong> of
-              <strong>personal data</strong> and does not conduct any
-              <strong>processing</strong> activities. Due to the decentralized character of the business
-              model, <strong>USERS</strong> are solely responsible for the actions they conduct and the
-              information they provide. <strong>Superhero </strong>does not, independently or with
-              others, conduct any operations or set of operations which is performed on
-              <strong>personal data</strong> or sets of <strong>personal data</strong> in connection to
-              the use of the <strong>application.</strong>
-            </p>
-            <p>
-              &nbsp;The <strong>Wallet</strong> is a <strong>blockchain</strong> based application on
-              which an <strong>account address</strong> is generated or an <strong>account</strong>
-              <strong>name</strong> can be claimed through the
-              <strong>&AElig;ternity Naming System</strong> for <strong>USER</strong> identification.
-            </p>
-            <p>
-              The <strong>account addresses</strong> and the <strong>names</strong> can be treated as
-              indirect identifiers. An indirect identifier is a value which cannot be used alone to
-              identify a data subject, however, could be identifying if combined with other indirect
-              identifiers.
-            </p>
-            <p>
-              <strong>The &AElig;ternity</strong> network is a public and permissionless blockchain, in
-              which everyone can participate and validate (see definition for
-              <strong>Validator</strong> in <strong>TERMS OF USE</strong>).
-              <strong>USERS</strong> understand and accept that all persons can see in the
-              <strong>Wallet</strong> and the <strong>blockchain</strong> the indirect identifiers
-              related to transactions &ndash; namely <strong>account addresses</strong> and
-              <strong>names</strong> generated via <strong>&AElig;ternity</strong>
-              <strong>Naming System</strong>. The above-mentioned information might be used to identify
-              a natural person. Therefore, <strong>USERS</strong> accept and agree that
-              <strong>Superhero</strong> does not act in full capacity as
-              <strong>Data Controller</strong> in the meaning established in Regulation (EU) 2016/679 of
-              the European Parliament and of the Council of 27 April 2016 on the protection of natural
-              persons with regard to the processing of personal data and on the free movement of such
-              data (&ldquo;<strong>GDPR</strong>&rdquo;). <strong>USERS</strong> understand and accept
-              that by using the open-source blockchain technology incorporated in
-              <strong>the application</strong>, they provide their personal data- identifiable or
-              non-identifiable- to unlimited circle of persons and they bear the risk of these actions.
-            </p>
-            <p>
-              For more information about the <strong>account address</strong> and
-              <strong>name of account</strong>, please refer to the <strong>TERMS</strong> of the
-              application- Article 3- <strong><u>USERS IDENTIFICATION.</u></strong>
-            </p>
-            <p>&nbsp;</p>
-            <p>The <strong>application</strong> does not use Cookies.</p>
-          </li>
-          <li class="fourth">
-            <h3><strong>USERS personal data collection</strong></h3>
-            <p>
-              <strong>Superhero</strong> as the developer of the <strong>application</strong> reserves
-              the right to process <strong>personal data</strong> for technical support and maintenance
-              purposes.
-            </p>
-            <p>
-              During the use of our <strong>application</strong>, <strong>USERS</strong> may decide to
-              contact the team in relation to <strong>application</strong> support, connection problems,
-              questions, etc. The collection of the <strong>personal data</strong> is initiated by
-              <strong>USERS</strong> and they decide what type of <strong>personal data</strong> to
-              include in the communication. Moreover, for the provision of support services,
-              <strong>USERS</strong> might be asked to provide additional information.
-            </p>
-            <p>
-              The legal basis for <strong>processing</strong> is legitimate interest of
-              <strong>Superhero</strong> &ndash; the provision of responses to your
-              questions/signals/requests with the purpose of the <strong>Wallet</strong> improvement.
-              The retention period is until the final provision of a response to the
-              <strong>USER&rsquo;s</strong> signal/question/request.
-            </p>
-          </li>
-          <li class="fifth">
-            <h3><strong>Storage of personal data:</strong></h3>
-            <p>
-              <strong>We</strong> collect and store your <strong>personal data</strong> on the territory
-              of the European Economic Area. In case the <strong>personal data</strong> is transferred
-              to a country outside the EEA, <strong>We</strong> shall enforce all necessary measures for
-              the protection and guaranty of the <strong>personal data&rsquo;s</strong> safety.
-            </p>
-          </li>
-          <li class="sixth">
-            <h3><strong>Your rights:</strong></h3>
-            <p><strong>YOU</strong> have the right to:</p>
-            <ul>
-              <li>
-                Request from <strong>Superhero </strong>access to the
-                <strong>personal data</strong> that we hold about <strong>YOU</strong> in a portable
-                format.
-              </li>
-              <li>
-                Request from <strong>Superhero </strong>correction of any collected
-                <strong>personal data</strong>. The information may include only your
-                <strong>personal data</strong>
-              </li>
-              <li>Receive a copy of your <strong>personal data</strong> in electronic format.</li>
-              <li>
-                &ldquo;The right to be forgotten&rdquo;- <strong>YOU</strong> have the right to request
-                the deletion of your <strong>personal</strong> <strong>data</strong> at any time where
-                the retention of such data infringes relevant legislation (the right is not absolute).
-              </li>
-              <li>
-                Receive information from <strong>Us</strong> about <strong>Our</strong> activities in
-                connection to your <strong>personal data</strong>, including the purposes of collection
-                and storage, the period of time for storage, the methods of collecting, the presence of
-                automated processing.
-              </li>
-              <li>
-                Receive your <strong>data</strong> and transfer them to another
-                <strong>controller</strong>.
-              </li>
-              <li>
-                <strong>YOU</strong> have the right to lodge a complaint with a supervisory authority,
-                in particular in the Member State of your habitual residence, place of work or place of
-                the alleged infringement if <strong>YOU</strong> consider that there is personal data
-                breach.
-              </li>
-            </ul>
-          </li>
-          <li class="seventh">
-            <h3><strong>Sharing of Personal Information with Third Parties - Recipients</strong></h3>
-            <p>
-              We may disclose <strong>USERS&rsquo;</strong> identifiable personal information to third
-              parties &ndash; <strong>recipients</strong>, under special circumstances:
-            </p>
-            <ol class="sharing-terms">
-              <li>
-                to comply with a legal requirement, judicial proceeding, court order, or
-                legal process served on <strong>Superhero </strong>or its affiliates,
-              </li>
-              <li>
-                to investigate a possible crime, such as fraud or identity theft;
-              </li>
-              <li>
-                to Public Authorities in accordance with their legal obligation for the
-                exercise of their official mission, such as tax and customs authorities, financial
-                investigation units, independent administrative authorities, or financial marker
-                authorities responsible for supervision of securities markets;
-              </li>
-              <li>
-                in connection with the sale, purchase, business transition under any
-                form, merger, dissolution, reorganization, liquidation of
-                <strong>Superhero</strong>; <strong>We</strong> may have to disclose the information
-                <strong>YOU</strong> have given us to the successor, who is part of the transition,
-              </li>
-              <li>
-                when <strong>WE</strong> believe it is necessary to protect the rights,
-                property, or safety of <strong>Superhero </strong>or other persons, or
-              </li>
-              <li>
-                as otherwise required or permitted by law, including any contractual
-                obligations of
-                <strong>Superhero</strong>.
-              </li>
-            </ol>
-          </li>
-          <li class="eighth">
-            <h3><strong>Children and Privacy</strong></h3>
-            <ul>
-              <li>
-                <strong>Superhero</strong> does not process information of persons under the age of
-                obtaining full legal capacity (in most countries 18 years old) due to the character of
-                the <strong>Wallet</strong>.
-              </li>
-              <li>
-                <strong>Superhero</strong> will immediately delete any
-                <strong>personal data</strong> referring to persons under the age of full legal
-                capacity if <strong>Superhero</strong> receives such information.
-              </li>
-              <li>
-                We are not liable in any way if <strong>YOU</strong> provide false information about
-                your age or use the <strong>application</strong> before <strong>YOU</strong> have
-                turned the above-mentioned age.
-              </li>
-            </ul>
-          </li>
-          <li class="ninth">
-            <h3><strong>Measures for protection</strong></h3>
-            <p>
-              We undertake all necessary technological, technical and organizational measures to protect
-              your <strong>personal data</strong>. Your <strong>personal data</strong> is stored on
-              protected servers with a strictly controlled access.
-            </p>
-            <p>
-              Some of the above-mentioned information is stored in such a form that could not be used to
-              identify <strong>YOU</strong> directly.
-            </p>
-          </li>
-          <li class="tenth">
-            <h3><strong>Breach measures</strong></h3>
-            <p>
-              In case of <strong>breach</strong> in the software, disruptive interference in the
-              <strong>Wallet</strong>, the <strong>&AElig;ternity</strong> Network, malware, spyware,
-              virus attacks and any other harmful cyber-attacks, <strong>We</strong> will undertake
-              every possible action in an appropriate and timely manner, to avoid any material or
-              non-material damage to <strong>USERS</strong>. As soon as
-              <strong>Superhero</strong> becomes aware of any <strong>breach</strong>,
-              <strong>USERS</strong> and the competent authorities will be notified immediately.
-              <strong>YOU</strong> may be asked to follow certain instructions for prevention of
-              <strong>breaches</strong>.
-            </p>
-          </li>
-          <li class="eleventh">
-            <h3><strong>How Do I contact Æternity?</strong></h3>
-            <p>
-              To contact us with your questions or comments regarding this <strong>Policy</strong>,
-              please email us at&nbsp;
-              <LinkButton href="mailto:superherowallet@protonmail.com">
-                superherowallet@protonmail.com
-              </LinkButton>.
-            </p>
-          </li>
-        </ol>
-      </div>
-      <BackToTop />
-    </IonContent>
-  </IonPage>
+  <PageWrapper
+    :page-title="$t('pages.titles.privacy')"
+    data-cy="privacy-policy"
+  >
+    <div class="privacy-policy">
+      <p><em>The present Privacy Policy is effective since on 9th April 2020.</em></p>
+      <ol class="policy-list">
+        <li class="first">
+          <h3><strong>Introduction</strong></h3>
+          <p>
+            <strong>Superhero.com Establishment (&ldquo;Superhero&rdquo;, &ldquo;we&rdquo;,
+              &ldquo;us&rdquo;, &ldquo;our&rdquo; </strong>or<strong> &ldquo;the company&rdquo;
+            </strong>) is a company with seat and registered
+            address at: Dr. Grass Str. 12, 9490 Vaduz, Liechtenstein, with email address for
+            communication related to the <strong>{{ APP_NAME }}</strong>:
+            superherowallet@protonmail.com. <strong>Superhero</strong> is the company, which created
+            and developed <strong>{{ APP_NAME }}</strong>.
+          </p>
+          <p>
+            <strong>Superhero </strong>takes your privacy and the security of your information as a
+            <strong>USER</strong> very seriously.&nbsp;&nbsp;&nbsp;
+          </p>
+          <p>
+            This <strong>Privacy Policy</strong> (&ldquo;<strong>Policy</strong>&rdquo;) is applicable
+            for the <strong>Superhero </strong>developed software program
+            <strong>{{ APP_NAME }}</strong> (the <strong>&ldquo;Wallet&rdquo;</strong> or the
+            <strong>&ldquo;application&rdquo;</strong>), designed for end users, which allows
+            supporters to send value to content creators, causes, charities, groups or regular
+            individuals online as a reward for contributing accurate information, relevant insights,
+            quality content. The <strong>application</strong> can be downloaded or used from the
+            following places:
+          </p>
+          <p>
+            1) downloaded as an add-on (extension) to Firefox:
+            <LinkButton :href="APP_LINK_FIREFOX">{{ APP_LINK_FIREFOX }}</LinkButton>
+            ; to Chrome, Brave and Opera:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <LinkButton :href="APP_LINK_CHROME">{{ APP_LINK_CHROME }}</LinkButton>;
+          </p>
+          <p>
+            2) accessed from any Browser at the address:
+            <LinkButton :href="APP_LINK_WEB">{{ APP_LINK_WEB }}</LinkButton>;
+          </p>
+          <p>
+            3) downloaded from Google Play:&nbsp;&nbsp;&nbsp;&nbsp;
+            <LinkButton :href="APP_LINK_ANDROID">{{ APP_LINK_ANDROID }}</LinkButton>
+            and
+          </p>
+          <p>
+            from App Store:
+            <LinkButton :href="APP_LINK_IOS">{{ APP_LINK_IOS }}</LinkButton>.
+          </p>
+          <p>
+            If you have any questions regarding this <strong>Policy</strong>, please contact us at
+            superherowallet@protonmail.com. If you do not agree to the terms of this
+            <strong>Policy</strong>, please do not use <strong>the application</strong>.&nbsp;
+          </p>
+          <p>
+            Each time you use <strong>the application</strong>, the current version of this
+            <strong>Policy</strong> will apply. The new version of the
+            <strong>Privacy Policy</strong> becomes effective from the day it is announced publicly on
+            <strong>the application</strong> unless stated otherwise. Accordingly, when
+            <strong>YOU</strong> use <strong>the application</strong>, <strong>YOU</strong> should
+            check the date of this <strong>Policy</strong> (which appears at the top). If
+            <strong>YOU</strong> continue to use the <strong>application</strong> after the changes
+            have been enforced, <strong>We</strong> shall consider this a given consent and acceptance
+            to the modified content. If <strong>YOU</strong> do not agree to the new modifications,
+            please contact <strong>Us</strong> for further assistance via the above-mentioned in the
+            previous paragraph email address.
+          </p>
+          <p>
+            All abbreviations and definitions of the <strong>TERMS</strong> shall be applicable for
+            the present <strong>Privacy Policy</strong>.
+          </p>
+        </li>
+        <li class="second">
+          <h3><strong>Definitions</strong></h3>
+          <p>
+            For the purposes of this <strong>Privacy Policy</strong>, the terms have the following
+            meaning:
+          </p>
+          <ul>
+            <li>
+              <strong>&bdquo;Data Controller&ldquo;</strong> means the person or body which, alone or
+              jointly with others, determines the purposes and means of the processing of personal
+              data;
+            </li>
+            <li>
+              <strong>&bdquo;Personal Data&ldquo;</strong> means any information relating to an
+              identified or identifiable natural person &ndash; data subject
+              (&lsquo;<strong>USER&rsquo;</strong>);
+            </li>
+            <li>
+              <strong>&bdquo;Processing&ldquo;</strong> means any operation or set of operations which
+              is performed on personal data;
+            </li>
+            <li>
+              <strong>&bdquo;Recipient&ldquo;</strong> means a natural or legal person, public
+              authority, agency or another body, to which the personal data are disclosed, whether a
+              third party or not;
+            </li>
+          </ul>
+          <p>
+            <strong>&bdquo;Personal data breach&ldquo;</strong> means a breach of security leading to
+            the accidental or unlawful destruction, loss, alteration, unauthorized disclosure of, or
+            access to, personal data transmitted, stored or otherwise processed.
+          </p>
+        </li>
+        <li class="third">
+          <h3><strong>Personal data collection disclaimer</strong></h3>
+          <p>
+            <strong>Please bear in mind that once the information or personal data under any form is
+              submitted and written on the &AElig;ternity blockchain, it cannot be amended, corrected
+              or deleted. Superhero cannot change, restore, delete or amend in any way the
+              above-mentioned information and therefore, shall not be held liable in any way for the
+              collection of the information on the blockchain.</strong>
+          </p>
+          <p>
+            <strong>The Wallet is a software solution which facilitates the peer-to-peer transfer
+              of tokens between USERS and their interaction with &AElig;ternity blockchain.</strong>
+            <strong>USERS</strong> understand and agree that <strong>Superhero</strong> does not
+            determine the purposes and means of <strong>processing</strong> of
+            <strong>personal data</strong> and does not conduct any
+            <strong>processing</strong> activities. Due to the decentralized character of the business
+            model, <strong>USERS</strong> are solely responsible for the actions they conduct and the
+            information they provide. <strong>Superhero </strong>does not, independently or with
+            others, conduct any operations or set of operations which is performed on
+            <strong>personal data</strong> or sets of <strong>personal data</strong> in connection to
+            the use of the <strong>application.</strong>
+          </p>
+          <p>
+            &nbsp;The <strong>Wallet</strong> is a <strong>blockchain</strong> based application on
+            which an <strong>account address</strong> is generated or an <strong>account</strong>
+            <strong>name</strong> can be claimed through the
+            <strong>&AElig;ternity Naming System</strong> for <strong>USER</strong> identification.
+          </p>
+          <p>
+            The <strong>account addresses</strong> and the <strong>names</strong> can be treated as
+            indirect identifiers. An indirect identifier is a value which cannot be used alone to
+            identify a data subject, however, could be identifying if combined with other indirect
+            identifiers.
+          </p>
+          <p>
+            <strong>The &AElig;ternity</strong> network is a public and permissionless blockchain, in
+            which everyone can participate and validate (see definition for
+            <strong>Validator</strong> in <strong>TERMS OF USE</strong>).
+            <strong>USERS</strong> understand and accept that all persons can see in the
+            <strong>Wallet</strong> and the <strong>blockchain</strong> the indirect identifiers
+            related to transactions &ndash; namely <strong>account addresses</strong> and
+            <strong>names</strong> generated via <strong>&AElig;ternity</strong>
+            <strong>Naming System</strong>. The above-mentioned information might be used to identify
+            a natural person. Therefore, <strong>USERS</strong> accept and agree that
+            <strong>Superhero</strong> does not act in full capacity as
+            <strong>Data Controller</strong> in the meaning established in Regulation (EU) 2016/679 of
+            the European Parliament and of the Council of 27 April 2016 on the protection of natural
+            persons with regard to the processing of personal data and on the free movement of such
+            data (&ldquo;<strong>GDPR</strong>&rdquo;). <strong>USERS</strong> understand and accept
+            that by using the open-source blockchain technology incorporated in
+            <strong>the application</strong>, they provide their personal data- identifiable or
+            non-identifiable- to unlimited circle of persons and they bear the risk of these actions.
+          </p>
+          <p>
+            For more information about the <strong>account address</strong> and
+            <strong>name of account</strong>, please refer to the <strong>TERMS</strong> of the
+            application- Article 3- <strong><u>USERS IDENTIFICATION.</u></strong>
+          </p>
+          <p>&nbsp;</p>
+          <p>The <strong>application</strong> does not use Cookies.</p>
+        </li>
+        <li class="fourth">
+          <h3><strong>USERS personal data collection</strong></h3>
+          <p>
+            <strong>Superhero</strong> as the developer of the <strong>application</strong> reserves
+            the right to process <strong>personal data</strong> for technical support and maintenance
+            purposes.
+          </p>
+          <p>
+            During the use of our <strong>application</strong>, <strong>USERS</strong> may decide to
+            contact the team in relation to <strong>application</strong> support, connection problems,
+            questions, etc. The collection of the <strong>personal data</strong> is initiated by
+            <strong>USERS</strong> and they decide what type of <strong>personal data</strong> to
+            include in the communication. Moreover, for the provision of support services,
+            <strong>USERS</strong> might be asked to provide additional information.
+          </p>
+          <p>
+            The legal basis for <strong>processing</strong> is legitimate interest of
+            <strong>Superhero</strong> &ndash; the provision of responses to your
+            questions/signals/requests with the purpose of the <strong>Wallet</strong> improvement.
+            The retention period is until the final provision of a response to the
+            <strong>USER&rsquo;s</strong> signal/question/request.
+          </p>
+        </li>
+        <li class="fifth">
+          <h3><strong>Storage of personal data:</strong></h3>
+          <p>
+            <strong>We</strong> collect and store your <strong>personal data</strong> on the territory
+            of the European Economic Area. In case the <strong>personal data</strong> is transferred
+            to a country outside the EEA, <strong>We</strong> shall enforce all necessary measures for
+            the protection and guaranty of the <strong>personal data&rsquo;s</strong> safety.
+          </p>
+        </li>
+        <li class="sixth">
+          <h3><strong>Your rights:</strong></h3>
+          <p><strong>YOU</strong> have the right to:</p>
+          <ul>
+            <li>
+              Request from <strong>Superhero </strong>access to the
+              <strong>personal data</strong> that we hold about <strong>YOU</strong> in a portable
+              format.
+            </li>
+            <li>
+              Request from <strong>Superhero </strong>correction of any collected
+              <strong>personal data</strong>. The information may include only your
+              <strong>personal data</strong>
+            </li>
+            <li>Receive a copy of your <strong>personal data</strong> in electronic format.</li>
+            <li>
+              &ldquo;The right to be forgotten&rdquo;- <strong>YOU</strong> have the right to request
+              the deletion of your <strong>personal</strong> <strong>data</strong> at any time where
+              the retention of such data infringes relevant legislation (the right is not absolute).
+            </li>
+            <li>
+              Receive information from <strong>Us</strong> about <strong>Our</strong> activities in
+              connection to your <strong>personal data</strong>, including the purposes of collection
+              and storage, the period of time for storage, the methods of collecting, the presence of
+              automated processing.
+            </li>
+            <li>
+              Receive your <strong>data</strong> and transfer them to another
+              <strong>controller</strong>.
+            </li>
+            <li>
+              <strong>YOU</strong> have the right to lodge a complaint with a supervisory authority,
+              in particular in the Member State of your habitual residence, place of work or place of
+              the alleged infringement if <strong>YOU</strong> consider that there is personal data
+              breach.
+            </li>
+          </ul>
+        </li>
+        <li class="seventh">
+          <h3><strong>Sharing of Personal Information with Third Parties - Recipients</strong></h3>
+          <p>
+            We may disclose <strong>USERS&rsquo;</strong> identifiable personal information to third
+            parties &ndash; <strong>recipients</strong>, under special circumstances:
+          </p>
+          <ol class="sharing-terms">
+            <li>
+              to comply with a legal requirement, judicial proceeding, court order, or
+              legal process served on <strong>Superhero </strong>or its affiliates,
+            </li>
+            <li>
+              to investigate a possible crime, such as fraud or identity theft;
+            </li>
+            <li>
+              to Public Authorities in accordance with their legal obligation for the
+              exercise of their official mission, such as tax and customs authorities, financial
+              investigation units, independent administrative authorities, or financial marker
+              authorities responsible for supervision of securities markets;
+            </li>
+            <li>
+              in connection with the sale, purchase, business transition under any
+              form, merger, dissolution, reorganization, liquidation of
+              <strong>Superhero</strong>; <strong>We</strong> may have to disclose the information
+              <strong>YOU</strong> have given us to the successor, who is part of the transition,
+            </li>
+            <li>
+              when <strong>WE</strong> believe it is necessary to protect the rights,
+              property, or safety of <strong>Superhero </strong>or other persons, or
+            </li>
+            <li>
+              as otherwise required or permitted by law, including any contractual
+              obligations of
+              <strong>Superhero</strong>.
+            </li>
+          </ol>
+        </li>
+        <li class="eighth">
+          <h3><strong>Children and Privacy</strong></h3>
+          <ul>
+            <li>
+              <strong>Superhero</strong> does not process information of persons under the age of
+              obtaining full legal capacity (in most countries 18 years old) due to the character of
+              the <strong>Wallet</strong>.
+            </li>
+            <li>
+              <strong>Superhero</strong> will immediately delete any
+              <strong>personal data</strong> referring to persons under the age of full legal
+              capacity if <strong>Superhero</strong> receives such information.
+            </li>
+            <li>
+              We are not liable in any way if <strong>YOU</strong> provide false information about
+              your age or use the <strong>application</strong> before <strong>YOU</strong> have
+              turned the above-mentioned age.
+            </li>
+          </ul>
+        </li>
+        <li class="ninth">
+          <h3><strong>Measures for protection</strong></h3>
+          <p>
+            We undertake all necessary technological, technical and organizational measures to protect
+            your <strong>personal data</strong>. Your <strong>personal data</strong> is stored on
+            protected servers with a strictly controlled access.
+          </p>
+          <p>
+            Some of the above-mentioned information is stored in such a form that could not be used to
+            identify <strong>YOU</strong> directly.
+          </p>
+        </li>
+        <li class="tenth">
+          <h3><strong>Breach measures</strong></h3>
+          <p>
+            In case of <strong>breach</strong> in the software, disruptive interference in the
+            <strong>Wallet</strong>, the <strong>&AElig;ternity</strong> Network, malware, spyware,
+            virus attacks and any other harmful cyber-attacks, <strong>We</strong> will undertake
+            every possible action in an appropriate and timely manner, to avoid any material or
+            non-material damage to <strong>USERS</strong>. As soon as
+            <strong>Superhero</strong> becomes aware of any <strong>breach</strong>,
+            <strong>USERS</strong> and the competent authorities will be notified immediately.
+            <strong>YOU</strong> may be asked to follow certain instructions for prevention of
+            <strong>breaches</strong>.
+          </p>
+        </li>
+        <li class="eleventh">
+          <h3><strong>How Do I contact Æternity?</strong></h3>
+          <p>
+            To contact us with your questions or comments regarding this <strong>Policy</strong>,
+            please email us at&nbsp;
+            <LinkButton href="mailto:superherowallet@protonmail.com">
+              superherowallet@protonmail.com
+            </LinkButton>.
+          </p>
+        </li>
+      </ol>
+    </div>
+
+    <BackToTop />
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonContent, IonPage } from '@ionic/vue';
 import {
   APP_LINK_WEB,
   APP_LINK_CHROME,
@@ -350,15 +348,16 @@ import {
   APP_LINK_IOS,
   APP_NAME,
 } from '@/constants';
+
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import LinkButton from '@/popup/components/LinkButton.vue';
 import BackToTop from '@/popup/components/BackToTop.vue';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     LinkButton,
     BackToTop,
-    IonContent,
-    IonPage,
   },
   setup() {
     return {
diff --git a/src/popup/pages/ResetWallet.vue b/src/popup/pages/ResetWallet.vue
index 496b02b21..b838a2800 100644
--- a/src/popup/pages/ResetWallet.vue
+++ b/src/popup/pages/ResetWallet.vue
@@ -1,54 +1,55 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="reset-wallet-settings">
-        <p class="text-description">
-          {{ $t('pages.resetWallet.description') }}
-        </p>
-        <i18n-t
-          keypath="pages.resetWallet.description2"
-          tag="p"
-          class="text-description"
-          scope="global"
-        >
-          <RouterLink :to="{ name: ROUTE_SEED_PHRASE_SETTINGS }">
-            {{ $t('pages.resetWallet.seedPhrase') }}
-          </RouterLink>
-          <RouterLink :to="{ name: ROUTE_ADDRESS_BOOK }">
-            {{ $t('pages.resetWallet.addressBook') }}
-          </RouterLink>
-        </i18n-t>
+  <PageWrapper
+    :page-title="$t('pages.resetWallet.title')"
+  >
+    <div class="reset-wallet-settings">
+      <p
+        class="text-description"
+        v-text="$t('pages.resetWallet.description')"
+      />
 
-        <BtnMain
-          variant="danger"
-          class="reset-wallet-button"
-          extend
-          :text="$t('pages.resetWallet.title')"
-          :icon="ResetWalletIcon"
-          @click="onResetWallet"
-        />
-      </div>
-    </IonContent>
-  </IonPage>
+      <i18n-t
+        keypath="pages.resetWallet.description2"
+        tag="p"
+        class="text-description"
+        scope="global"
+      >
+        <RouterLink :to="{ name: ROUTE_SEED_PHRASE_SETTINGS }">
+          {{ $t('pages.resetWallet.seedPhrase') }}
+        </RouterLink>
+        <RouterLink :to="{ name: ROUTE_ADDRESS_BOOK }">
+          {{ $t('pages.resetWallet.addressBook') }}
+        </RouterLink>
+      </i18n-t>
+
+      <BtnMain
+        variant="danger"
+        class="reset-wallet-button"
+        extend
+        :text="$t('pages.resetWallet.title')"
+        :icon="ResetWalletIcon"
+        @click="onResetWallet"
+      />
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 
 import { MODAL_RESET_WALLET } from '@/constants';
 import { ROUTE_ADDRESS_BOOK, ROUTE_SEED_PHRASE_SETTINGS } from '@/popup/router/routeNames';
 import { useModals } from '@/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import BtnMain from '@/popup/components/buttons/BtnMain.vue';
 
 import ResetWalletIcon from '@/icons/reset-wallet.svg?vue-component';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     BtnMain,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { openModal } = useModals();
diff --git a/src/popup/pages/SecureLoginSettings.vue b/src/popup/pages/SecureLoginSettings.vue
index 787e6f64b..eeb2edbf2 100644
--- a/src/popup/pages/SecureLoginSettings.vue
+++ b/src/popup/pages/SecureLoginSettings.vue
@@ -1,157 +1,152 @@
 <template>
-  <IonPage>
-    <IonContent
-      ref="infoBoxEl"
-      class="ion-padding ion-content-bg"
-    >
-      <div class="secure-login-settings">
-        <!--
-          Enable secure login option
-        -->
-        <div
-          v-if="IS_MOBILE_APP"
-          class="form-group"
-        >
-          <p
-            class="text-description"
-            v-text="$t('pages.secureLogin.description')"
+  <PageWrapper ref="wrapper" :page-title="$t('pages.titles.secureLogin')">
+    <div class="secure-login-settings">
+      <!--
+        Enable secure login option
+      -->
+      <div
+        v-if="IS_MOBILE_APP"
+        class="form-group"
+      >
+        <p
+          class="text-description"
+          v-text="$t('pages.secureLogin.description')"
+        />
+
+        <div class="form-group-fields">
+          <SwitchButton
+            :label="$t('pages.secureLogin.enableSecureLogin')"
+            :model-value="isBiometricLoginEnabled"
+            :disabled="!isBiometricLoginAvailable"
+            @update:modelValue="setBiometricLoginEnabled"
           />
+        </div>
 
-          <div class="form-group-fields">
-            <SwitchButton
-              :label="$t('pages.secureLogin.enableSecureLogin')"
-              :model-value="isBiometricLoginEnabled"
-              :disabled="!isBiometricLoginAvailable"
-              @update:modelValue="setBiometricLoginEnabled"
-            />
-          </div>
+        <hr>
+      </div>
 
-          <hr>
+      <!--
+        Auto-lock wallet time options
+      -->
+      <div class="form-group">
+        <div :class="{ dimmed: IS_MOBILE_APP && !isBiometricLoginEnabled }">
+          <p class="text-heading-5" v-text="$t('pages.secureLogin.autoLock.title')" />
+          <p class="text-description" v-text="$t('pages.secureLogin.autoLock.descriptionPart1')" />
+          <p class="text-description" v-text="$t('pages.secureLogin.autoLock.descriptionPart2')" />
         </div>
 
-        <!--
-          Auto-lock wallet time options
-        -->
-        <div class="form-group">
-          <div :class="{ dimmed: IS_MOBILE_APP && !isBiometricLoginEnabled }">
-            <p class="text-heading-5" v-text="$t('pages.secureLogin.autoLock.title')" />
-            <p class="text-description" v-text="$t('pages.secureLogin.autoLock.descriptionPart1')" />
-            <p class="text-description" v-text="$t('pages.secureLogin.autoLock.descriptionPart2')" />
-          </div>
+        <div class="form-group-fields">
+          <RadioButton
+            v-for="(ms) in AUTHENTICATION_TIMEOUTS"
+            :key="`timeout-${ms}`"
+            :value="+secureLoginTimeoutDecrypted === ms"
+            :class="{ active: +secureLoginTimeoutDecrypted === ms }"
+            :label="$t('pages.secureLogin.authenticationTimeout', msToMinutes(ms))"
+            class="timeout"
+            has-label-effect
+            @input="secureLoginTimeoutDecrypted = ms.toString()"
+          />
+        </div>
 
-          <div class="form-group-fields">
-            <RadioButton
-              v-for="(ms) in AUTHENTICATION_TIMEOUTS"
-              :key="`timeout-${ms}`"
-              :value="+secureLoginTimeoutDecrypted === ms"
-              :class="{ active: +secureLoginTimeoutDecrypted === ms }"
-              :label="$t('pages.secureLogin.authenticationTimeout', msToMinutes(ms))"
-              class="timeout"
-              has-label-effect
-              @input="secureLoginTimeoutDecrypted = ms.toString()"
-            />
-          </div>
+        <hr>
+      </div>
 
-          <hr>
+      <!--
+        Change password options
+      -->
+      <div
+        v-if="!IS_MOBILE_APP"
+        class="form-group"
+      >
+        <div>
+          <p
+            class="text-heading-5"
+            v-text="$t('pages.secureLogin.changePassword.title')"
+          />
+          <p
+            class="text-description"
+            v-text="$t('pages.secureLogin.changePassword.description')"
+          />
         </div>
 
-        <!--
-          Change password options
-        -->
-        <div
-          v-if="!IS_MOBILE_APP"
-          class="form-group"
+        <Form
+          v-slot="{ errors }"
+          @submit="setNewPassword()"
         >
-          <div>
-            <p
-              class="text-heading-5"
-              v-text="$t('pages.secureLogin.changePassword.title')"
-            />
-            <p
-              class="text-description"
-              v-text="$t('pages.secureLogin.changePassword.description')"
+          <InputPassword
+            v-model="currentPassword"
+            data-cy="current-password"
+            :placeholder="$t('pages.secureLogin.changePassword.currentPasswordPlaceholder')"
+            :label="$t('pages.secureLogin.changePassword.currentPassword')"
+            :message="isAuthFailed ? $t('pages.secureLogin.login.error') : null"
+            @input="isAuthFailed = false; isPasswordChangedSuccessfully = false"
+          />
+          <Field
+            v-slot="{ field, errorMessage }"
+            key="newPassword"
+            name="newPassword"
+            :validate-on-blur="true"
+            :validate-on-model-update="!!errors.password"
+            :rules="{
+              password_min_len: 4,
+            }"
+          >
+            <InputPassword
+              v-bind="field"
+              v-model="newPassword"
+              data-cy="new-password"
+              :placeholder="$t('pages.secureLogin.changePassword.newPasswordPlaceholder')"
+              :label="$t('pages.secureLogin.changePassword.newPassword')"
+              :message="errorMessage ?? errors.confirmNewPassword"
+              show-password-strength
             />
-          </div>
-
-          <Form
-            v-slot="{ errors }"
-            @submit="setNewPassword()"
+          </Field>
+          <Field
+            v-slot="{ field, errorMessage }"
+            key="confirmNewPassword"
+            name="confirmNewPassword"
+            :rules="{
+              passwords_match: newPassword,
+            }"
           >
             <InputPassword
-              v-model="currentPassword"
-              data-cy="current-password"
-              :placeholder="$t('pages.secureLogin.changePassword.currentPasswordPlaceholder')"
-              :label="$t('pages.secureLogin.changePassword.currentPassword')"
-              :message="isAuthFailed ? $t('pages.secureLogin.login.error') : null"
-              @input="isAuthFailed = false; isPasswordChangedSuccessfully = false"
+              v-bind="field"
+              v-model="confirmNewPassword"
+              data-cy="confirm-new-password"
+              :placeholder="$t('pages.secureLogin.setPassword.confirmPlaceholder')"
+              :label="$t('pages.secureLogin.changePassword.confirmNewPassword')"
+              :message="errorMessage"
+              hide-eye-icon
             />
-            <Field
-              v-slot="{ field, errorMessage }"
-              key="newPassword"
-              name="newPassword"
-              :validate-on-blur="true"
-              :validate-on-model-update="!!errors.password"
-              :rules="{
-                password_min_len: 4,
-              }"
-            >
-              <InputPassword
-                v-bind="field"
-                v-model="newPassword"
-                data-cy="new-password"
-                :placeholder="$t('pages.secureLogin.changePassword.newPasswordPlaceholder')"
-                :label="$t('pages.secureLogin.changePassword.newPassword')"
-                :message="errorMessage ?? errors.confirmNewPassword"
-                show-password-strength
-              />
-            </Field>
-            <Field
-              v-slot="{ field, errorMessage }"
-              key="confirmNewPassword"
-              name="confirmNewPassword"
-              :rules="{
-                passwords_match: newPassword,
-              }"
-            >
-              <InputPassword
-                v-bind="field"
-                v-model="confirmNewPassword"
-                data-cy="confirm-new-password"
-                :placeholder="$t('pages.secureLogin.setPassword.confirmPlaceholder')"
-                :label="$t('pages.secureLogin.changePassword.confirmNewPassword')"
-                :message="errorMessage"
-                hide-eye-icon
-              />
-            </Field>
+          </Field>
 
-            <BtnMain
-              class="btn-reset-password"
-              variant="primary"
-              type="submit"
-              extend
-              :disabled="(
-                !newPassword
-                || !currentPassword
-                || !confirmNewPassword
-                || !!errors.newPassword
-                || !!errors.confirmNewPassword
-              )"
-              :text="$t('pages.secureLogin.changePassword.reset')"
-            />
-          </Form>
+          <BtnMain
+            class="btn-reset-password"
+            variant="primary"
+            type="submit"
+            extend
+            :disabled="(
+              !newPassword
+              || !currentPassword
+              || !confirmNewPassword
+              || !!errors.newPassword
+              || !!errors.confirmNewPassword
+            )"
+            :text="$t('pages.secureLogin.changePassword.reset')"
+          />
+        </Form>
 
-          <Transition name="fade-transition">
-            <InfoBox
-              v-if="isPasswordChangedSuccessfully"
-              class="info-box"
-              type="success"
-              :text="$t('pages.secureLogin.changePassword.success')"
-            />
-          </Transition>
-        </div>
+        <Transition name="fade-transition">
+          <InfoBox
+            v-if="isPasswordChangedSuccessfully"
+            class="info-box"
+            type="success"
+            :text="$t('pages.secureLogin.changePassword.success')"
+          />
+        </Transition>
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -161,13 +156,13 @@ import {
   onMounted,
   ref,
 } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 import { Form, Field } from 'vee-validate';
 
 import { AUTHENTICATION_TIMEOUTS, IS_MOBILE_APP } from '@/constants';
 import { ComponentRef } from '@/types';
 import { useAuth, useModals, useUi } from '@/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import RadioButton from '@/popup/components/RadioButton.vue';
 import SwitchButton from '@/popup/components/SwitchButton.vue';
 import InputPassword from '@/popup/components/InputPassword.vue';
@@ -177,12 +172,11 @@ import InfoBox from '@/popup/components/InfoBox.vue';
 export default defineComponent({
   name: 'SecureLoginSettings',
   components: {
+    PageWrapper,
     InputPassword,
     BtnMain,
     RadioButton,
     SwitchButton,
-    IonPage,
-    IonContent,
     Form,
     Field,
     InfoBox,
@@ -196,6 +190,7 @@ export default defineComponent({
     const currentPassword = ref('');
     const newPassword = ref('');
     const confirmNewPassword = ref('');
+    const wrapper = ref();
 
     const {
       checkBiometricLoginAvailability,
@@ -219,7 +214,8 @@ export default defineComponent({
         await updatePassword(currentPassword.value, newPassword.value);
         isPasswordChangedSuccessfully.value = true;
         await nextTick();
-        infoBoxEl.value?.$el?.scrollBy(0, infoBoxEl.value?.$el?.scrollWidth);
+        const scrollEl: HTMLElement = wrapper.value?.contentEl?.$el;
+        scrollEl?.scrollBy(0, scrollEl?.scrollWidth);
       } catch (error) {
         isAuthFailed.value = true;
         isPasswordChangedSuccessfully.value = false;
@@ -243,6 +239,7 @@ export default defineComponent({
     });
 
     return {
+      wrapper,
       AUTHENTICATION_TIMEOUTS,
       IS_MOBILE_APP,
       infoBoxEl,
diff --git a/src/popup/pages/SeedPhraseDetailsSettings.vue b/src/popup/pages/SeedPhraseDetailsSettings.vue
index 761f76d2a..7e7168f12 100644
--- a/src/popup/pages/SeedPhraseDetailsSettings.vue
+++ b/src/popup/pages/SeedPhraseDetailsSettings.vue
@@ -1,72 +1,70 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="seed-phrase-details">
-        <div class="text-heading-3">
-          {{ $t('pages.seed-phrase-settings.this-your-seed-phrase') }}
-        </div>
-
-        <CardMnemonic class="mnemonics">
-          <p class="mnemonics-text">
-            {{ mnemonicDecrypted }}
-          </p>
-          <BtnMain
-            variant="dark"
-            class="copy-btn"
-            big-icon
-            :icon="copied ? CheckSuccessCircle : CopyOutlined"
-            @click="copy(mnemonicDecrypted)"
-          >
-            <template v-if="!copied">
-              {{ $t('pages.seed-phrase-settings.copy') }}
-            </template>
-
-            <template v-else>
-              {{ $t('common.addressCopied') }}
-            </template>
-          </BtnMain>
-        </CardMnemonic>
-
-        <i18n-t
-          keypath="pages.seedPhrase.backUpYourSeedPhrase"
-          tag="p"
-          class="text-description"
-          scope="global"
+  <PageWrapper :page-title="$t('pages.titles.seedPhrase')">
+    <div class="seed-phrase-details">
+      <div
+        class="text-heading-3"
+        v-text="$t('pages.seed-phrase-settings.this-your-seed-phrase')"
+      />
+
+      <CardMnemonic class="mnemonics">
+        <p class="mnemonics-text">
+          {{ mnemonicDecrypted }}
+        </p>
+        <BtnMain
+          variant="dark"
+          class="copy-btn"
+          big-icon
+          :icon="copied ? CheckSuccessCircle : CopyOutlined"
+          @click="copy(mnemonicDecrypted)"
         >
-          <strong>{{ $t('pages.seedPhrase.inCorrectOrder') }}</strong>
-        </i18n-t>
-        <i18n-t
-          keypath="pages.seedPhrase.toBeSureYouGotItRight"
-          tag="p"
-          class="text-description"
-          scope="global"
-        >
-          <strong>{{ $t('pages.seedPhrase.verifyYourSeedPhrase') }}</strong>
-        </i18n-t>
-
-        <div class="buttons">
-          <BtnMain
-            class="button"
-            extend
-            :text="$t('pages.seedPhrase.verifySeed')"
-            :to="{ name: ROUTE_SEED_PHRASE_VERIFY }"
-          />
-          <BtnMain
-            variant="muted"
-            extend
-            :text="$t('pages.seedPhrase.doneThis')"
-            @click="markSeedPhraseAsBackedUp()"
-          />
-        </div>
+          <template v-if="!copied">
+            {{ $t('pages.seed-phrase-settings.copy') }}
+          </template>
+
+          <template v-else>
+            {{ $t('common.addressCopied') }}
+          </template>
+        </BtnMain>
+      </CardMnemonic>
+
+      <i18n-t
+        keypath="pages.seedPhrase.backUpYourSeedPhrase"
+        tag="p"
+        class="text-description"
+        scope="global"
+      >
+        <strong>{{ $t('pages.seedPhrase.inCorrectOrder') }}</strong>
+      </i18n-t>
+      <i18n-t
+        keypath="pages.seedPhrase.toBeSureYouGotItRight"
+        tag="p"
+        class="text-description"
+        scope="global"
+      >
+        <strong>{{ $t('pages.seedPhrase.verifyYourSeedPhrase') }}</strong>
+      </i18n-t>
+
+      <div class="buttons">
+        <BtnMain
+          class="button"
+          extend
+          :text="$t('pages.seedPhrase.verifySeed')"
+          :to="{ name: ROUTE_SEED_PHRASE_VERIFY }"
+        />
+        <BtnMain
+          variant="muted"
+          extend
+          :text="$t('pages.seedPhrase.doneThis')"
+          @click="markSeedPhraseAsBackedUp()"
+        />
       </div>
-    </IonContent>
-  </IonPage>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useRouter } from 'vue-router';
-import { IonPage, IonContent } from '@ionic/vue';
 import {
   useAuth,
   useCopy,
@@ -75,6 +73,7 @@ import {
 } from '@/composables';
 import { ROUTE_ACCOUNT, ROUTE_SEED_PHRASE_VERIFY } from '@/popup/router/routeNames';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import BtnMain from '../components/buttons/BtnMain.vue';
 import CardMnemonic from '../components/CardMnemonic.vue';
 import CopyOutlined from '../../icons/copy-outlined.svg?vue-component';
@@ -83,9 +82,8 @@ import CheckSuccessCircle from '../../icons/check-success-circle.svg?vue-compone
 export default defineComponent({
   name: 'SeedPhraseDetailsSettings',
   components: {
+    PageWrapper,
     BtnMain,
-    IonPage,
-    IonContent,
     CardMnemonic,
   },
   setup() {
diff --git a/src/popup/pages/SeedPhraseSettings.vue b/src/popup/pages/SeedPhraseSettings.vue
index 877940c6d..ea699f26d 100644
--- a/src/popup/pages/SeedPhraseSettings.vue
+++ b/src/popup/pages/SeedPhraseSettings.vue
@@ -1,64 +1,61 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="seed-phrase-settings">
-        <i18n-t
-          keypath="pages.seed-phrase-settings.seedRecoverySmall"
-          tag="p"
-          class="text-description"
-          scope="global"
-        />
-        <i18n-t
-          keypath="pages.seed-phrase-settings.seedRecoverySmall-2"
-          tag="p"
-          class="text-description"
-          scope="global"
-        />
-        <i18n-t
-          keypath="pages.seed-phrase-settings.seedRecoverySmall-3"
-          tag="p"
-          class="text-description"
-          scope="global"
-        />
-        <i18n-t
-          keypath="pages.seed-phrase-settings.seedRecoverySmall-4"
-          tag="p"
-          class="text-description"
-          scope="global"
-        >
-          <strong>
-            {{ $t('pages.seed-phrase-settings.seedRecoverySmallBackItUp') }}
-          </strong>
-        </i18n-t>
-        <p class="text-description">
-          <strong>
-            {{ $t('pages.seed-phrase-settings.seedRecoverySmall-5') }}
-          </strong>
-        </p>
-        <BtnMain
-          class="button"
-          extend
-          :to="{ name: ROUTE_SEED_PHRASE_DETAILS }"
-        >
-          {{ $t('pages.seed-phrase-settings.seedRecoveryBtn') }}
-        </BtnMain>
-      </div>
-    </IonContent>
-  </IonPage>
+  <PageWrapper :page-title="$t('pages.titles.seedPhrase')">
+    <div class="seed-phrase-settings">
+      <i18n-t
+        keypath="pages.seed-phrase-settings.seedRecoverySmall"
+        tag="p"
+        class="text-description"
+        scope="global"
+      />
+      <i18n-t
+        keypath="pages.seed-phrase-settings.seedRecoverySmall-2"
+        tag="p"
+        class="text-description"
+        scope="global"
+      />
+      <i18n-t
+        keypath="pages.seed-phrase-settings.seedRecoverySmall-3"
+        tag="p"
+        class="text-description"
+        scope="global"
+      />
+      <i18n-t
+        keypath="pages.seed-phrase-settings.seedRecoverySmall-4"
+        tag="p"
+        class="text-description"
+        scope="global"
+      >
+        <strong>
+          {{ $t('pages.seed-phrase-settings.seedRecoverySmallBackItUp') }}
+        </strong>
+      </i18n-t>
+      <p class="text-description">
+        <strong>
+          {{ $t('pages.seed-phrase-settings.seedRecoverySmall-5') }}
+        </strong>
+      </p>
+      <BtnMain
+        class="button"
+        extend
+        :to="{ name: ROUTE_SEED_PHRASE_DETAILS }"
+      >
+        {{ $t('pages.seed-phrase-settings.seedRecoveryBtn') }}
+      </BtnMain>
+    </div>
+  </PageWrapper>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
 import { ROUTE_SEED_PHRASE_DETAILS } from '@/popup/router/routeNames';
 
+import PageWrapper from '../components/PageWrapper.vue';
 import BtnMain from '../components/buttons/BtnMain.vue';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     BtnMain,
-    IonPage,
-    IonContent,
   },
   setup() {
     return {
diff --git a/src/popup/pages/SeedPhraseVerifySettings.vue b/src/popup/pages/SeedPhraseVerifySettings.vue
index 14cc834b6..ed3e8da5f 100644
--- a/src/popup/pages/SeedPhraseVerifySettings.vue
+++ b/src/popup/pages/SeedPhraseVerifySettings.vue
@@ -1,95 +1,94 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="seed-phrase-verify-settings">
-        <div class="seed-phrase-verify-settings-body">
-          <div
-            class="text-heading-3"
-            v-text="$t('pages.seed-phrase-settings.verifyYourSeedPhrase')"
+  <PageWrapper :page-title="$t('pages.titles.seedPhrase')">
+    <div class="seed-phrase-verify-settings">
+      <div class="seed-phrase-verify-settings-body">
+        <div
+          class="text-heading-3"
+          v-text="$t('pages.seed-phrase-settings.verifyYourSeedPhrase')"
+        />
+
+        <div
+          class="text-description"
+          v-text="$t('pages.seed-phrase-settings.confirm-that-you-save-your-seed-phrase')"
+        />
+        <i18n-t
+          keypath="pages.seed-phrase-settings.compose-your-seed-phrase"
+          tag="div"
+          class="text-description"
+          scope="global"
+        >
+          <strong>
+            {{ $t('pages.seed-phrase-settings.in-correct-order') }}
+          </strong>
+        </i18n-t>
+
+        <div class="source-phrases">
+          <SeedPhraseBadge
+            v-for="(word, index) in mnemonicShuffled"
+            :key="index"
+            :text="word"
+            :selected="selectedWordIds.includes(index)"
+            @click="onSelectWord(index)"
           />
-
-          <div
-            class="text-description"
-            v-text="$t('pages.seed-phrase-settings.confirm-that-you-save-your-seed-phrase')"
-          />
-          <i18n-t
-            keypath="pages.seed-phrase-settings.compose-your-seed-phrase"
-            tag="div"
-            class="text-description"
-            scope="global"
-          >
-            <strong>
-              {{ $t('pages.seed-phrase-settings.in-correct-order') }}
-            </strong>
-          </i18n-t>
-
-          <div class="source-phrases">
-            <SeedPhraseBadge
-              v-for="(word, index) in mnemonicShuffled"
-              :key="index"
-              :text="word"
-              :selected="selectedWordIds.includes(index)"
-              @click="onSelectWord(index)"
-            />
-          </div>
-
-          <div class="selected-phrases">
-            <SeedPhraseNotification
-              v-if="showNotification"
-              class="selected-phrases-notification"
-              :has-error="hasError"
-            />
-            <CardMnemonic class="selected-phrases-list">
-              <template v-if="!selectedWordIds.length">
-                <SeedPhraseBadge
-                  v-for="(word, index) in examplePhrase"
-                  :key="index"
-                  :text="word"
-                  selected
-                  editable
-                />
-              </template>
-              <template v-else>
-                <SeedPhraseBadge
-                  v-for="(id, index) in selectedWordIds"
-                  :key="id"
-                  :text="mnemonicShuffled[id]"
-                  editable
-                  @click="selectedWordIds.splice(index, 1)"
-                />
-              </template>
-            </CardMnemonic>
-          </div>
         </div>
 
-        <FixedScreenFooter>
-          <BtnMain
-            v-if="hasError || !showNotification"
-            class="verify-button"
-            :disabled="isVerifyButtonDisabled"
-            :text="$t('pages.seedPhrase.verify')"
-            @click="verifyLastStep"
-          />
-          <BtnMain
-            v-else
-            :text="$t('common.backToHome')"
-            :to="{ name: ROUTE_ACCOUNT }"
+        <div class="selected-phrases">
+          <SeedPhraseNotification
+            v-if="showNotification"
+            class="selected-phrases-notification"
+            :has-error="hasError"
           />
-        </FixedScreenFooter>
+          <CardMnemonic class="selected-phrases-list">
+            <template v-if="!selectedWordIds.length">
+              <SeedPhraseBadge
+                v-for="(word, index) in examplePhrase"
+                :key="index"
+                :text="word"
+                selected
+                editable
+              />
+            </template>
+            <template v-else>
+              <SeedPhraseBadge
+                v-for="(id, index) in selectedWordIds"
+                :key="id"
+                :text="mnemonicShuffled[id]"
+                editable
+                @click="selectedWordIds.splice(index, 1)"
+              />
+            </template>
+          </CardMnemonic>
+        </div>
       </div>
-    </IonContent>
-  </IonPage>
+
+      <FixedScreenFooter>
+        <BtnMain
+          v-if="hasError || !showNotification"
+          class="verify-button"
+          :disabled="isVerifyButtonDisabled"
+          :text="$t('pages.seedPhrase.verify')"
+          @click="verifyLastStep"
+        />
+        <BtnMain
+          v-else
+          :text="$t('common.backToHome')"
+          :to="{ name: ROUTE_ACCOUNT }"
+        />
+      </FixedScreenFooter>
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue';
 import { shuffle } from 'lodash-es';
 import { useI18n } from 'vue-i18n';
-import { IonPage, IonContent, onIonViewWillLeave } from '@ionic/vue';
+import { onIonViewWillLeave } from '@ionic/vue';
 
 import { useAuth, useNotifications, useUi } from '@/composables';
 import { ROUTE_ACCOUNT } from '@/popup/router/routeNames';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import BtnMain from '../components/buttons/BtnMain.vue';
 import CardMnemonic from '../components/CardMnemonic.vue';
 import FixedScreenFooter from '../components/FixedScreenFooter.vue';
@@ -98,13 +97,12 @@ import SeedPhraseBadge from '../components/SeedPhraseBadge.vue';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     SeedPhraseBadge,
     SeedPhraseNotification,
     FixedScreenFooter,
     BtnMain,
     CardMnemonic,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { t } = useI18n();
diff --git a/src/popup/pages/Settings.vue b/src/popup/pages/Settings.vue
index f9dd49246..74f5031ae 100644
--- a/src/popup/pages/Settings.vue
+++ b/src/popup/pages/Settings.vue
@@ -1,55 +1,54 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="settings">
-        <PanelItem
-          :to="{ name: ROUTE_SEED_PHRASE_SETTINGS }"
-          :title="$t('pages.index.seedPhrase')"
-        />
-        <PanelItem
-          :to="{ name: ROUTE_SECURE_LOGIN_SETTINGS }"
-          :info="secureLoginSettingsInfo"
-          :title="$t('pages.titles.secureLogin')"
-        />
-        <PanelItem
-          :to="{ name: ROUTE_NETWORK_SETTINGS }"
-          :title="$t('pages.titles.networks')"
-          :info="activeNetwork.name"
-          data-cy="networks-settings"
-        />
-        <PanelItem
-          :to="{ name: ROUTE_PERMISSIONS_SETTINGS }"
-          :title="$t('pages.titles.permissionsSettings')"
-        />
-        <PanelItem
-          :to="{ name: 'notification-settings' }"
-          :title="$t('pages.titles.notifications')"
-        />
-        <PanelItem
-          :to="{ name: 'settings-language' }"
-          :title="$t('pages.titles.language')"
-        />
-        <PanelItem
-          :to="{ name: 'settings-currency' }"
-          :title="$t('pages.titles.currency')"
-          :info="activeCurrency"
-        />
-        <PanelItem
-          :to="{ name: 'settings-errors-log' }"
-          :title="$t('pages.titles.saveErrorsLog')"
-          :info="saveErrorLog ? $t('common.on') : $t('common.off')"
-        />
-        <PanelItem
-          :to="{ name: 'settings-reset-wallet' }"
-          :title="$t('pages.titles.resetWallet')"
-        />
-      </div>
-    </IonContent>
-  </IonPage>
+  <PageWrapper
+    :page-title="$t('pages.titles.settings')"
+  >
+    <div class="settings">
+      <PanelItem
+        :to="{ name: ROUTE_SEED_PHRASE_SETTINGS }"
+        :title="$t('pages.index.seedPhrase')"
+      />
+      <PanelItem
+        :to="{ name: ROUTE_SECURE_LOGIN_SETTINGS }"
+        :info="secureLoginSettingsInfo"
+        :title="$t('pages.titles.secureLogin')"
+      />
+      <PanelItem
+        :to="{ name: ROUTE_NETWORK_SETTINGS }"
+        :title="$t('pages.titles.networks')"
+        :info="activeNetwork.name"
+        data-cy="networks-settings"
+      />
+      <PanelItem
+        :to="{ name: ROUTE_PERMISSIONS_SETTINGS }"
+        :title="$t('pages.titles.permissionsSettings')"
+      />
+      <PanelItem
+        :to="{ name: 'notification-settings' }"
+        :title="$t('pages.titles.notifications')"
+      />
+      <PanelItem
+        :to="{ name: 'settings-language' }"
+        :title="$t('pages.titles.language')"
+      />
+      <PanelItem
+        :to="{ name: 'settings-currency' }"
+        :title="$t('pages.titles.currency')"
+        :info="activeCurrency"
+      />
+      <PanelItem
+        :to="{ name: 'settings-errors-log' }"
+        :title="$t('pages.titles.saveErrorsLog')"
+        :info="saveErrorLog ? $t('common.on') : $t('common.off')"
+      />
+      <PanelItem
+        :to="{ name: 'settings-reset-wallet' }"
+        :title="$t('pages.titles.resetWallet')"
+      />
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonPage, IonContent } from '@ionic/vue';
 import { computed, defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -66,14 +65,14 @@ import {
   ROUTE_SEED_PHRASE_SETTINGS,
 } from '@/popup/router/routeNames';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import PanelItem from '@/popup/components/PanelItem.vue';
 
 export default defineComponent({
   name: 'Settings',
   components: {
+    PageWrapper,
     PanelItem,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { t } = useI18n();
diff --git a/src/popup/pages/TermsOfService.vue b/src/popup/pages/TermsOfService.vue
index 94a0174b6..6c5be1ec1 100644
--- a/src/popup/pages/TermsOfService.vue
+++ b/src/popup/pages/TermsOfService.vue
@@ -1,854 +1,854 @@
 <!-- eslint-disable vue/max-len -->
 <template>
-  <IonPage>
-    <IonContent
-      class="ion-padding ion-content-bg"
+  <PageWrapper
+    :page-title="$t('pages.titles.terms')"
+  >
+    <div
+      class="terms-of-service"
       data-cy="terms-of-service"
     >
-      <div class="terms-of-service">
-        <!-- header -->
-        <p class="italic">
-          The present <b>TERMS OF USE</b> are effective since 9th April 2020.
-        </p>
-        <p class="italic">
-          <b>Superhero.com LVC</b> reserves its right to modify and update these
-          <b>TERMS OF USE</b> according to the policy and practice of the <b>company</b>. The new
-          version of the <b>TERMS OF USE</b> becomes effective from the day it is announced on
-          <b>Our Superhero Wallet</b> unless stated otherwise.
-        </p>
-        <hr>
-        <p class="bolder">
-          THE SOFTWARE IS PROVIDED BY SUPERHERO.COM LVC “AS IS” WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-          IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
-          PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY
-          CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
-          ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-          SOFTWARE.
-        </p>
-        <p>
-          These <b>TERMS OF USE („TERMS“)</b> apply exclusively for the
-          <b>Superhero Wallet</b> (hereinafter referred to as the “<b>Wallet</b>” or the
-          “<b>application</b>”) and all the content available on the website extension. Please make sure
-          that you have carefully read the <b>TERMS</b> before using the <b>application</b>. Otherwise,
-          by using it, we consider these actions implicit agreement to the <b>TERMS OF USE</b>. These
-          <b>TERMS OF USE</b> represent a binding agreement between you, the legal entity you represent
-          and the legal entity that registered you (collectively „<b>YOU</b>“) and
-          <b>Superhero.com LVC (“Superhero”, “we”, “us”</b> or <b>“our”)</b> in connection to your use
-          of the <b>Superhero Wallet application.</b>.
-        </p>
-        <p>
-          Please, do not use the application provided by <b>Superhero</b>, if you do not agree to the
-          <b>TERMS</b> applied within this document.
-        </p>
-        <p>
-          <b>WE</b> preserve our right to modify the <b>TERMS</b> at any time in our sole discretion.
-          <b>USERS</b> will be notified of such changes by posting information for the new Effective
-          Date of the <b>TERMS</b> on the <b>application</b>. <b>YOU</b> may be required to read and
-          accept the updated <b>TERMS</b> in order to continue your use of the <b>Wallet</b>. If
-          <b>YOU</b> continue to use the <b>Wallet</b> after a notification for the amended
-          <b>TERMS</b>, <b>YOU</b> are agreeing to be bound by the modifications. If you don’t agree to
-          be bound by the modified <b>TERMS</b>, then you should discontinue any use of the
-          <b>Wallet</b>. Please contact <b>Superhero</b> via an email to
-          <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton>
-          for the provision of information about the steps for termination of your use. Please check the
-          Effective Date above to determine if there have been any changes since <b>YOU</b> have last
-          reviewed these <b>TERMS</b>.
-        </p>
-        <p class="italic underline">
-          Once you agree to the <b>TERMS OF USE</b>, we consider this an explicit consent to the
-          following:
-        </p>
+      <!-- header -->
+      <p class="italic">
+        The present <b>TERMS OF USE</b> are effective since 9th April 2020.
+      </p>
+      <p class="italic">
+        <b>Superhero.com LVC</b> reserves its right to modify and update these
+        <b>TERMS OF USE</b> according to the policy and practice of the <b>company</b>. The new
+        version of the <b>TERMS OF USE</b> becomes effective from the day it is announced on
+        <b>Our Superhero Wallet</b> unless stated otherwise.
+      </p>
+      <hr>
+      <p class="bolder">
+        THE SOFTWARE IS PROVIDED BY SUPERHERO.COM LVC “AS IS” WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+        PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY
+        CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+        ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+      </p>
+      <p>
+        These <b>TERMS OF USE („TERMS“)</b> apply exclusively for the
+        <b>Superhero Wallet</b> (hereinafter referred to as the “<b>Wallet</b>” or the
+        “<b>application</b>”) and all the content available on the website extension. Please make sure
+        that you have carefully read the <b>TERMS</b> before using the <b>application</b>. Otherwise,
+        by using it, we consider these actions implicit agreement to the <b>TERMS OF USE</b>. These
+        <b>TERMS OF USE</b> represent a binding agreement between you, the legal entity you represent
+        and the legal entity that registered you (collectively „<b>YOU</b>“) and
+        <b>Superhero.com LVC (“Superhero”, “we”, “us”</b> or <b>“our”)</b> in connection to your use
+        of the <b>Superhero Wallet application.</b>.
+      </p>
+      <p>
+        Please, do not use the application provided by <b>Superhero</b>, if you do not agree to the
+        <b>TERMS</b> applied within this document.
+      </p>
+      <p>
+        <b>WE</b> preserve our right to modify the <b>TERMS</b> at any time in our sole discretion.
+        <b>USERS</b> will be notified of such changes by posting information for the new Effective
+        Date of the <b>TERMS</b> on the <b>application</b>. <b>YOU</b> may be required to read and
+        accept the updated <b>TERMS</b> in order to continue your use of the <b>Wallet</b>. If
+        <b>YOU</b> continue to use the <b>Wallet</b> after a notification for the amended
+        <b>TERMS</b>, <b>YOU</b> are agreeing to be bound by the modifications. If you don’t agree to
+        be bound by the modified <b>TERMS</b>, then you should discontinue any use of the
+        <b>Wallet</b>. Please contact <b>Superhero</b> via an email to
+        <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton>
+        for the provision of information about the steps for termination of your use. Please check the
+        Effective Date above to determine if there have been any changes since <b>YOU</b> have last
+        reviewed these <b>TERMS</b>.
+      </p>
+      <p class="italic underline">
+        Once you agree to the <b>TERMS OF USE</b>, we consider this an explicit consent to the
+        following:
+      </p>
 
-        <AccordionItem :label="$t('pages.termsOfService.section1Title')">
-          <div>
-            <p>
-              1.1.
-              <strong>Superhero.com Establishment (&ldquo;Superhero&rdquo;, &ldquo;we&rdquo;,
-                &ldquo;us&rdquo;, &ldquo;our&rdquo;</strong> or <strong>&ldquo;the company&rdquo;
-              </strong>) is a company with seat and registered
-              address at: Dr. Grass Str. 12, 9490 Vaduz, Liechtenstein, with email address for
-              communication related to the <strong>Superhero Wallet</strong>:
-              <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton>.
-              <strong>Superhero</strong> is the company, which created and developed <strong>Superhero Wallet</strong>.
-            </p>
-            <p>
-              1.2. &ldquo;<strong>USER</strong>&ldquo; or &ldquo;<strong>YOU</strong>&ldquo; means a
-              natural or legal person, who has downloaded and uses the
-              <strong>Superhero Wallet</strong> <strong>application</strong>.
-            </p>
-            <p>
-              1.3. &ldquo;<strong>Blockchain</strong>&ldquo; means the list of records, also known as
-              <em>blocks</em>, which are linked with the method of cryptography. The technology allows
-              large groups of people to connect and reach agreement on data, which is afterwards
-              permanently recorded without the presence of central authority. <strong>USERS</strong> can
-              access, create and save information on the <strong>Aeternity blockchain</strong>. The
-              decentralized, distributed and public digital ledger is used for the purpose of recording
-              transactions in blocks of information with the help of <strong>Validators</strong>, which
-              cannot be altered retroactively.
-            </p>
-            <p>
-              1.4. &ldquo;<strong>Superhero Wallet</strong>&rdquo;
-              (&ldquo;<strong>Wallet</strong>&rdquo; or &ldquo;<strong>application</strong>&rdquo;) is a
-              software program designed for end users, which allows supporters to send value to content
-              creators, causes, charities, groups or regular individuals online as a reward for
-              contributing accurate information, relevant insights, quality content. The
-              <strong>application</strong> is a piece of software which is available for
-              downloading/access and use as it follows:
-            </p>
-            <p>
-              1) the <strong>application</strong> can act &nbsp;as an add-on to the web browsers
-              Firefox, Chrome, Brave and Opera and contributes to the browsers&rsquo; additional
-              functionalities. For Firefox:
-              <LinkButton :href="APP_LINK_FIREFOX">{{ APP_LINK_FIREFOX }}</LinkButton>; for Chrome, Brave and Opera:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-              <LinkButton :href="APP_LINK_CHROME">{{ APP_LINK_CHROME }}</LinkButton>;
-            </p>
-            <p>
-              2) the <strong>application</strong> can be accessed and used from any Browser at the
-              address: <LinkButton :href="APP_LINK_WEB">{{ APP_LINK_WEB }}</LinkButton>;
-            </p>
-            <p>
-              3) the <strong>application</strong> can be downloaded from Google Play and/or App Store.
-              For Google Play:
-              <LinkButton :href="APP_LINK_ANDROID">{{ APP_LINK_ANDROID }}</LinkButton>
-              and for App Store:
-              <LinkButton :href="APP_LINK_IOS">{{ APP_LINK_IOS }}</LinkButton>;
-            </p>
-            <p>
-              The results of the donations and comments are published on the website
-              <LinkButton :href="AGGREGATOR_URL">superhero.com</LinkButton>.
-            </p>
-            <p>
-              1.5<strong>. &ldquo;&AElig;id&ldquo;, &ldquo;&AElig;ternity token&rdquo;</strong> or
-              &ldquo;<strong>&AElig; token</strong>&rdquo; are the
-              <strong>&AElig;ternity </strong>digital assets, which can be tracked or transferred on the
-              <strong>&AElig;ternity blockchain. </strong>
-            </p>
-            <p>
-              1.6. &ldquo;<strong>Validators</strong>&rdquo; are independent physical persons or
-              entities, which are not in any way part of <strong>Superhero</strong>. Their function in
-              the system includes responsibility for <em>blocks</em> constitution and broadcast of these
-              <em>blocks</em> with the <strong>Aeternity</strong> <strong>blockchain</strong>.
-            </p>
-            <p>
-              1.7. &ldquo;<strong>Account address</strong>&rdquo; or
-              &ldquo;<strong>Wallet address</strong>&rdquo; is a hashed version of the
-              <strong>USER&rsquo;s public key</strong>, used to
-              identify <strong>USERS</strong> on the <strong>application</strong>.
-            </p>
-            <p>
-              1.8. &ldquo;<strong>Keys</strong>&rdquo; represent uniquely related private and public
-              cryptographic keys of random numbers used for encryption and decryption of information.
-            </p>
-            <p>
-              1.9. &ldquo;<strong>&AElig;ternity Naming System</strong>&rdquo; allows
-              <strong>USERS</strong> to claim names and associate them with one or more
-              <strong>&AElig;ternity</strong> accounts.
-            </p>
-            <p>
-              1.10. &ldquo;<strong>Name of account</strong>&rdquo; is a domain-like identification
-              string, which allows <strong>USERS</strong> control over its creation, development and
-              alienation.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section1Title')">
+        <div>
+          <p>
+            1.1.
+            <strong>Superhero.com Establishment (&ldquo;Superhero&rdquo;, &ldquo;we&rdquo;,
+              &ldquo;us&rdquo;, &ldquo;our&rdquo;</strong> or <strong>&ldquo;the company&rdquo;
+            </strong>) is a company with seat and registered
+            address at: Dr. Grass Str. 12, 9490 Vaduz, Liechtenstein, with email address for
+            communication related to the <strong>Superhero Wallet</strong>:
+            <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton>.
+            <strong>Superhero</strong> is the company, which created and developed <strong>Superhero Wallet</strong>.
+          </p>
+          <p>
+            1.2. &ldquo;<strong>USER</strong>&ldquo; or &ldquo;<strong>YOU</strong>&ldquo; means a
+            natural or legal person, who has downloaded and uses the
+            <strong>Superhero Wallet</strong> <strong>application</strong>.
+          </p>
+          <p>
+            1.3. &ldquo;<strong>Blockchain</strong>&ldquo; means the list of records, also known as
+            <em>blocks</em>, which are linked with the method of cryptography. The technology allows
+            large groups of people to connect and reach agreement on data, which is afterwards
+            permanently recorded without the presence of central authority. <strong>USERS</strong> can
+            access, create and save information on the <strong>Aeternity blockchain</strong>. The
+            decentralized, distributed and public digital ledger is used for the purpose of recording
+            transactions in blocks of information with the help of <strong>Validators</strong>, which
+            cannot be altered retroactively.
+          </p>
+          <p>
+            1.4. &ldquo;<strong>Superhero Wallet</strong>&rdquo;
+            (&ldquo;<strong>Wallet</strong>&rdquo; or &ldquo;<strong>application</strong>&rdquo;) is a
+            software program designed for end users, which allows supporters to send value to content
+            creators, causes, charities, groups or regular individuals online as a reward for
+            contributing accurate information, relevant insights, quality content. The
+            <strong>application</strong> is a piece of software which is available for
+            downloading/access and use as it follows:
+          </p>
+          <p>
+            1) the <strong>application</strong> can act &nbsp;as an add-on to the web browsers
+            Firefox, Chrome, Brave and Opera and contributes to the browsers&rsquo; additional
+            functionalities. For Firefox:
+            <LinkButton :href="APP_LINK_FIREFOX">{{ APP_LINK_FIREFOX }}</LinkButton>; for Chrome, Brave and Opera:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <LinkButton :href="APP_LINK_CHROME">{{ APP_LINK_CHROME }}</LinkButton>;
+          </p>
+          <p>
+            2) the <strong>application</strong> can be accessed and used from any Browser at the
+            address: <LinkButton :href="APP_LINK_WEB">{{ APP_LINK_WEB }}</LinkButton>;
+          </p>
+          <p>
+            3) the <strong>application</strong> can be downloaded from Google Play and/or App Store.
+            For Google Play:
+            <LinkButton :href="APP_LINK_ANDROID">{{ APP_LINK_ANDROID }}</LinkButton>
+            and for App Store:
+            <LinkButton :href="APP_LINK_IOS">{{ APP_LINK_IOS }}</LinkButton>;
+          </p>
+          <p>
+            The results of the donations and comments are published on the website
+            <LinkButton :href="AGGREGATOR_URL">superhero.com</LinkButton>.
+          </p>
+          <p>
+            1.5<strong>. &ldquo;&AElig;id&ldquo;, &ldquo;&AElig;ternity token&rdquo;</strong> or
+            &ldquo;<strong>&AElig; token</strong>&rdquo; are the
+            <strong>&AElig;ternity </strong>digital assets, which can be tracked or transferred on the
+            <strong>&AElig;ternity blockchain. </strong>
+          </p>
+          <p>
+            1.6. &ldquo;<strong>Validators</strong>&rdquo; are independent physical persons or
+            entities, which are not in any way part of <strong>Superhero</strong>. Their function in
+            the system includes responsibility for <em>blocks</em> constitution and broadcast of these
+            <em>blocks</em> with the <strong>Aeternity</strong> <strong>blockchain</strong>.
+          </p>
+          <p>
+            1.7. &ldquo;<strong>Account address</strong>&rdquo; or
+            &ldquo;<strong>Wallet address</strong>&rdquo; is a hashed version of the
+            <strong>USER&rsquo;s public key</strong>, used to
+            identify <strong>USERS</strong> on the <strong>application</strong>.
+          </p>
+          <p>
+            1.8. &ldquo;<strong>Keys</strong>&rdquo; represent uniquely related private and public
+            cryptographic keys of random numbers used for encryption and decryption of information.
+          </p>
+          <p>
+            1.9. &ldquo;<strong>&AElig;ternity Naming System</strong>&rdquo; allows
+            <strong>USERS</strong> to claim names and associate them with one or more
+            <strong>&AElig;ternity</strong> accounts.
+          </p>
+          <p>
+            1.10. &ldquo;<strong>Name of account</strong>&rdquo; is a domain-like identification
+            string, which allows <strong>USERS</strong> control over its creation, development and
+            alienation.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section2Title')">
-          <div>
-            <p><strong>2.1. The application </strong></p>
-            <p>
-              <strong>Superhero</strong> designed and built the <strong>application</strong> as a
-              cryptocurrency wallet which is connected with the <strong>&AElig;ternity</strong>
-              <strong>blockchain</strong>.Through it, <strong>USERS</strong> can store, send and collect
-              <strong>&AElig; tokens.</strong> &nbsp;The purpose is to conduct donations to creators,
-              causes, charities, groups, or regular individuals online as a reward for contributing
-              accurate information, relevant insights and quality content. <strong>USERS</strong> can
-              donate to different platforms through the <strong>application</strong>.
-            </p>
-            <p>
-              The <strong>Wallet</strong> is a software solution, the interface is provided with the
-              purpose of facilitating the interaction between the <strong>USERS</strong> and the
-              protocols of the <strong>Aeternity blockchain,</strong> to manage your
-              <strong>account</strong> and your <strong>&AElig; tokens. </strong>The Protocols represent
-              a system that is implemented with the purpose of reaching consensus between
-              <strong>USERS</strong> and validating transactions on the
-              <strong>Aeternity blockchain. Superhero</strong> does not in any way
-              control the blockchain due to the fact it is decentralized and all transactions are
-              executed between <strong>USERS</strong> in a peer-to-peer manner in which
-              <strong>Superhero</strong> is not involved.
-            </p>
-            <p>
-              <strong>USERS</strong> can use a variety of options to download and access the
-              <strong>Wallet</strong>. They can download the <strong>Wallet</strong> as a browser
-              extension, access it on an Internet address or download a mobile application.
-              <strong>USERS</strong> should be aware that they can use all the options mentioned with
-              the same <strong>account</strong> only when they have created a seed phrase and they use
-              it to link their <strong>accounts</strong> on the <strong>Wallet</strong>.
-            </p>
-            <p><strong>2.2. Sending tips</strong></p>
-            <p>
-              The <strong>application</strong> when downloaded and used as an extension only,
-              automatically finds the URL of a website for the purpose of the donation. Once
-              <strong>YOU</strong> are on the URL address that<strong> YOU </strong>want to tip, you
-              have to:
-            </p>
-            <ul>
-              <li>
-                Open your Superhero wallet extension. The button should be in the upper right of your
-                browser tool bar.
-              </li>
-              <li>Click &ldquo;Send <strong>&AElig;</strong>&rdquo;.</li>
-              <li>
-                On the next screen, fill in the required fields. Enter the amount of tips
-                <strong>YOU</strong> want to send, and add a message telling the receiver why
-                they&rsquo;re awesome.
-              </li>
-              <li>Click &ldquo;Send Tips&rdquo;.</li>
-              <li>On the next screen, review the details of your tip.</li>
-              <li>Click &ldquo;Confirm&rdquo; to complete the transaction.</li>
-            </ul>
-            <p>
-              When the&nbsp;<strong>application</strong> is accessed from the Web or as a mobile
-              application, <strong>YOU</strong> have to choose and copy the URL address of the website
-              <strong>YOU</strong> would like to tip and afterwards:
-            </p>
-            <ul>
-              <li>Click &ldquo;Send <strong>&AElig;</strong>&rdquo;.</li>
-              <li>
-                On the next screen, fill in the required fields. Enter the URL address, amount of tips
-                <strong>YOU</strong> want to send, and add a message telling the receiver why
-                they&rsquo;re awesome.
-              </li>
-              <li>Click &ldquo;Send Tips&rdquo;.</li>
-              <li>On the next screen, review the details of your tip.</li>
-              <li>Click &ldquo;Confirm&rdquo; to complete the transaction.</li>
-            </ul>
-            <p>
-              Please bear in mind that the transactions are irreversible when completed &ndash; meaning
-              that <strong>YOU </strong>cannot change the URL address you sent the tip to, the amount or
-              comment sent.
-            </p>
-            <p>
-              The donations can be oriented in two flows as it follows - <strong>USERS</strong> can tip
-              the owner of the whole website/platform or the specific creator/author on the platform who
-              has written/prepared the news/article/section/material.
-            </p>
-            <p>
-              After that, the website -
-              <LinkButton :href="AGGREGATOR_URL">superhero.com</LinkButton>, reflects the
-              <strong>USERS&rsquo;</strong> donations and comments and gives the possibility for other
-              <strong>USERS</strong> to actively donate and comment on the newsfeed of the Website.
-            </p>
-            <p><strong>2.3. Collecting tips</strong></p>
-            <p>
-              If <strong>YOU</strong> want to receive such tips yourself, copy your
-              <strong>Wallet address </strong>and paste it onto your web page or profile &ndash; it
-              could be a blog, a social media account or any other online profile. Save the change and
-              refresh the page. <strong>YOU</strong> can also add your<strong> Wallet address</strong>
-              in the source code of the web page. Then, <strong>YOU</strong> should open your
-              <strong>Superhero Wallet</strong> to access the tips received. Please bear in mind that
-              there may be slight delays in collecting tips, we advise that you wait for a few minutes
-              and open the <strong>Wallet </strong>again. Do not hesitate to contact us if
-              <strong>YOU</strong> experience any difficulties.
-            </p>
-            <p><strong>2.4. Loading your wallet</strong></p>
-            <p>
-              In order to load your <strong>Wallet </strong>with <strong>&AElig; tokens,</strong>
-              <strong>YOU</strong> should click Button &ldquo;Top Up&rdquo; of the
-              <strong>application</strong> and <strong>YOU</strong> can exchange other cryptocurrencies
-              or fiat currencies with <strong>&AElig; tokens</strong> through partnering third-party
-              platforms. A full list of these platforms, you can see in our Superhero Tutorial. Our team
-              is also ready to provide detailed information when contacted through email at
-              <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton>.
-            </p>
-            <p>
-              Please bear in mind that the third-party platforms may collect fees. They are unilaterally
-              determined and are not an object of control by <strong>Superhero</strong>.
-            </p>
-            <p><strong>2.5. Withdrawing tips</strong></p>
-            <p>
-              To withdraw your tips, <strong>YOU</strong> can use one of the third-party crypto
-              exchanges that supports <strong>&AElig; tokens. </strong>Again, additional information
-              about the platforms can be seen in our Superhero Tutorial and <strong>WE</strong> are at
-              disposal for further assistance.
-            </p>
-            <p>
-              <strong>2.6. Transactions on the application and &AElig; claims</strong>
-            </p>
-            <p>
-              <strong><u>Transactions on the application</u>: USERS</strong>
-              can browse through their transaction history.
-              <strong>The Wallet</strong> displays the <strong>USER&rsquo;s</strong> tokens.
-              <strong>USERS</strong> are in charge of the safe storage, sending and receiving of funds.
-              The application is built for small transactions. High volume transactions or storage can
-              be undertaken via the application at the <strong>USER&rsquo;s</strong> own risk.
-            </p>
-            <p>
-              <strong><u>&AElig; claims:</u></strong> Please bear in mind that for the present moment
-              the <strong><u>&AElig; claims function is not possible, </u></strong>however,
-              Superhero&rsquo;s intention is to constantly develop and improve the
-              <strong>application</strong> for all<strong> USERS</strong> and once this function is
-              available on the <strong>Wallet</strong>, the following will be applicable:
-            </p>
-            <p>
-              The tips are sent to the <strong>Superhero Wallet</strong> of the URL address entered when
-              there is such <strong>Wallet</strong> created. Donations can also be made to
-              websites/platforms/organizations/people who have not downloaded and used the
-              <strong>Superhero Wallet</strong> before or during the moment of tipping.
-            </p>
-            <p>
-              The <strong>&AElig;ternity blockchain </strong>manages <u>smart contracts</u> &ndash; they
-              are self-enforcing agreements which are embedded in the source code. Therefore, the
-              <u>smart contracts</u> are independent, with incorporated set of rules when and how to act
-              without any control or interference conducted by <strong>Superhero</strong> under any
-              form. The <u>smart contracts</u> are a specific feature of the decentralized public
-              ledger. If the websites/platforms/organizations/people who are tipped, do not have a
-              <strong>Superhero Wallet, </strong>the sent tip is stored in the so called
-              &ldquo;<u>Tipping Smart Contract</u>&rdquo;. The <u>Oracles</u> &ndash; also
-              a function of the decentralized blockchain
-              &ndash; follows when the receiver of the tip will generate a <strong>Wallet</strong>. If
-              the receiver of the tip creates a <strong>Wallet,</strong> they can claim the
-              <strong>&AElig; tokens </strong>initially tipped and stored in the
-              &ldquo;<u>Tipping Smart Contract</u>&rdquo;.
-              The receiver of the tip has the right to access and claim the
-              <strong>&AElig; tokens</strong> in a time frame of 1 (one) year from the moment of
-              tipping. After the lapse of this 1 (one) year, the receiver loses their right to gain the
-              <strong>&AElig; tokens</strong>. Within the second year from the moment of tipping, only
-              the tipping <strong>USER</strong> can claim its <strong>&AElig; tokens</strong> back.
-              After the lapse of the second year, the tipping <strong>USER</strong> loses its right to
-              regain back the <strong>&AElig; tokens</strong> he has sent. Due to the decentralized
-              character of the blockchain, <strong>Superhero</strong> cannot control the
-              accumulation/receipt of the tips and to return them back when they are not received. Only
-              the <u>smart contract </u>and the <strong>USERS </strong>themselves can affect the
-              <strong>tokens</strong> due to the peer-to-peer method. <strong>USERS</strong> understand
-              that if the <strong>tokens</strong> are not claimed, they can be stored in the
-              <u>smart contract</u> without limitation of time and without any purpose. This is why,
-              after the lapse of the two years in which the receiver and the sender of the tips could
-              claim the <strong>tokens</strong> but have not<strong>,</strong> the
-              &ldquo;<u>Tipping Smart Contract</u>&rdquo; sends the <strong>&AElig; tokens</strong>
-              to an <strong>address</strong> of
-              <strong>Superhero</strong>. Once the <strong>tokens</strong> are received by
-              <strong>Superhero</strong>, receivers and senders of the tip accept and agree that they
-              shall not have any claims over the <strong>tokens</strong> and
-              <strong>Superhero</strong> shall not be held liable for their receipt provided it is
-              caused by the receiver and the sender&rsquo;s inactivity from their side during the
-              above-mentioned periods of time. The tips will then be used by
-              <strong>Superhero</strong> for the further development of the
-              <strong>blockchain</strong> ecosystem, the development of the <strong>Wallet</strong> or
-              any other project or activity it finds suitable and reasonable.
-              <strong>Superhero</strong> shall make such decisions at its own estimation.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section2Title')">
+        <div>
+          <p><strong>2.1. The application </strong></p>
+          <p>
+            <strong>Superhero</strong> designed and built the <strong>application</strong> as a
+            cryptocurrency wallet which is connected with the <strong>&AElig;ternity</strong>
+            <strong>blockchain</strong>.Through it, <strong>USERS</strong> can store, send and collect
+            <strong>&AElig; tokens.</strong> &nbsp;The purpose is to conduct donations to creators,
+            causes, charities, groups, or regular individuals online as a reward for contributing
+            accurate information, relevant insights and quality content. <strong>USERS</strong> can
+            donate to different platforms through the <strong>application</strong>.
+          </p>
+          <p>
+            The <strong>Wallet</strong> is a software solution, the interface is provided with the
+            purpose of facilitating the interaction between the <strong>USERS</strong> and the
+            protocols of the <strong>Aeternity blockchain,</strong> to manage your
+            <strong>account</strong> and your <strong>&AElig; tokens. </strong>The Protocols represent
+            a system that is implemented with the purpose of reaching consensus between
+            <strong>USERS</strong> and validating transactions on the
+            <strong>Aeternity blockchain. Superhero</strong> does not in any way
+            control the blockchain due to the fact it is decentralized and all transactions are
+            executed between <strong>USERS</strong> in a peer-to-peer manner in which
+            <strong>Superhero</strong> is not involved.
+          </p>
+          <p>
+            <strong>USERS</strong> can use a variety of options to download and access the
+            <strong>Wallet</strong>. They can download the <strong>Wallet</strong> as a browser
+            extension, access it on an Internet address or download a mobile application.
+            <strong>USERS</strong> should be aware that they can use all the options mentioned with
+            the same <strong>account</strong> only when they have created a seed phrase and they use
+            it to link their <strong>accounts</strong> on the <strong>Wallet</strong>.
+          </p>
+          <p><strong>2.2. Sending tips</strong></p>
+          <p>
+            The <strong>application</strong> when downloaded and used as an extension only,
+            automatically finds the URL of a website for the purpose of the donation. Once
+            <strong>YOU</strong> are on the URL address that<strong> YOU </strong>want to tip, you
+            have to:
+          </p>
+          <ul>
+            <li>
+              Open your Superhero wallet extension. The button should be in the upper right of your
+              browser tool bar.
+            </li>
+            <li>Click &ldquo;Send <strong>&AElig;</strong>&rdquo;.</li>
+            <li>
+              On the next screen, fill in the required fields. Enter the amount of tips
+              <strong>YOU</strong> want to send, and add a message telling the receiver why
+              they&rsquo;re awesome.
+            </li>
+            <li>Click &ldquo;Send Tips&rdquo;.</li>
+            <li>On the next screen, review the details of your tip.</li>
+            <li>Click &ldquo;Confirm&rdquo; to complete the transaction.</li>
+          </ul>
+          <p>
+            When the&nbsp;<strong>application</strong> is accessed from the Web or as a mobile
+            application, <strong>YOU</strong> have to choose and copy the URL address of the website
+            <strong>YOU</strong> would like to tip and afterwards:
+          </p>
+          <ul>
+            <li>Click &ldquo;Send <strong>&AElig;</strong>&rdquo;.</li>
+            <li>
+              On the next screen, fill in the required fields. Enter the URL address, amount of tips
+              <strong>YOU</strong> want to send, and add a message telling the receiver why
+              they&rsquo;re awesome.
+            </li>
+            <li>Click &ldquo;Send Tips&rdquo;.</li>
+            <li>On the next screen, review the details of your tip.</li>
+            <li>Click &ldquo;Confirm&rdquo; to complete the transaction.</li>
+          </ul>
+          <p>
+            Please bear in mind that the transactions are irreversible when completed &ndash; meaning
+            that <strong>YOU </strong>cannot change the URL address you sent the tip to, the amount or
+            comment sent.
+          </p>
+          <p>
+            The donations can be oriented in two flows as it follows - <strong>USERS</strong> can tip
+            the owner of the whole website/platform or the specific creator/author on the platform who
+            has written/prepared the news/article/section/material.
+          </p>
+          <p>
+            After that, the website -
+            <LinkButton :href="AGGREGATOR_URL">superhero.com</LinkButton>, reflects the
+            <strong>USERS&rsquo;</strong> donations and comments and gives the possibility for other
+            <strong>USERS</strong> to actively donate and comment on the newsfeed of the Website.
+          </p>
+          <p><strong>2.3. Collecting tips</strong></p>
+          <p>
+            If <strong>YOU</strong> want to receive such tips yourself, copy your
+            <strong>Wallet address </strong>and paste it onto your web page or profile &ndash; it
+            could be a blog, a social media account or any other online profile. Save the change and
+            refresh the page. <strong>YOU</strong> can also add your<strong> Wallet address</strong>
+            in the source code of the web page. Then, <strong>YOU</strong> should open your
+            <strong>Superhero Wallet</strong> to access the tips received. Please bear in mind that
+            there may be slight delays in collecting tips, we advise that you wait for a few minutes
+            and open the <strong>Wallet </strong>again. Do not hesitate to contact us if
+            <strong>YOU</strong> experience any difficulties.
+          </p>
+          <p><strong>2.4. Loading your wallet</strong></p>
+          <p>
+            In order to load your <strong>Wallet </strong>with <strong>&AElig; tokens,</strong>
+            <strong>YOU</strong> should click Button &ldquo;Top Up&rdquo; of the
+            <strong>application</strong> and <strong>YOU</strong> can exchange other cryptocurrencies
+            or fiat currencies with <strong>&AElig; tokens</strong> through partnering third-party
+            platforms. A full list of these platforms, you can see in our Superhero Tutorial. Our team
+            is also ready to provide detailed information when contacted through email at
+            <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton>.
+          </p>
+          <p>
+            Please bear in mind that the third-party platforms may collect fees. They are unilaterally
+            determined and are not an object of control by <strong>Superhero</strong>.
+          </p>
+          <p><strong>2.5. Withdrawing tips</strong></p>
+          <p>
+            To withdraw your tips, <strong>YOU</strong> can use one of the third-party crypto
+            exchanges that supports <strong>&AElig; tokens. </strong>Again, additional information
+            about the platforms can be seen in our Superhero Tutorial and <strong>WE</strong> are at
+            disposal for further assistance.
+          </p>
+          <p>
+            <strong>2.6. Transactions on the application and &AElig; claims</strong>
+          </p>
+          <p>
+            <strong><u>Transactions on the application</u>: USERS</strong>
+            can browse through their transaction history.
+            <strong>The Wallet</strong> displays the <strong>USER&rsquo;s</strong> tokens.
+            <strong>USERS</strong> are in charge of the safe storage, sending and receiving of funds.
+            The application is built for small transactions. High volume transactions or storage can
+            be undertaken via the application at the <strong>USER&rsquo;s</strong> own risk.
+          </p>
+          <p>
+            <strong><u>&AElig; claims:</u></strong> Please bear in mind that for the present moment
+            the <strong><u>&AElig; claims function is not possible, </u></strong>however,
+            Superhero&rsquo;s intention is to constantly develop and improve the
+            <strong>application</strong> for all<strong> USERS</strong> and once this function is
+            available on the <strong>Wallet</strong>, the following will be applicable:
+          </p>
+          <p>
+            The tips are sent to the <strong>Superhero Wallet</strong> of the URL address entered when
+            there is such <strong>Wallet</strong> created. Donations can also be made to
+            websites/platforms/organizations/people who have not downloaded and used the
+            <strong>Superhero Wallet</strong> before or during the moment of tipping.
+          </p>
+          <p>
+            The <strong>&AElig;ternity blockchain </strong>manages <u>smart contracts</u> &ndash; they
+            are self-enforcing agreements which are embedded in the source code. Therefore, the
+            <u>smart contracts</u> are independent, with incorporated set of rules when and how to act
+            without any control or interference conducted by <strong>Superhero</strong> under any
+            form. The <u>smart contracts</u> are a specific feature of the decentralized public
+            ledger. If the websites/platforms/organizations/people who are tipped, do not have a
+            <strong>Superhero Wallet, </strong>the sent tip is stored in the so called
+            &ldquo;<u>Tipping Smart Contract</u>&rdquo;. The <u>Oracles</u> &ndash; also
+            a function of the decentralized blockchain
+            &ndash; follows when the receiver of the tip will generate a <strong>Wallet</strong>. If
+            the receiver of the tip creates a <strong>Wallet,</strong> they can claim the
+            <strong>&AElig; tokens </strong>initially tipped and stored in the
+            &ldquo;<u>Tipping Smart Contract</u>&rdquo;.
+            The receiver of the tip has the right to access and claim the
+            <strong>&AElig; tokens</strong> in a time frame of 1 (one) year from the moment of
+            tipping. After the lapse of this 1 (one) year, the receiver loses their right to gain the
+            <strong>&AElig; tokens</strong>. Within the second year from the moment of tipping, only
+            the tipping <strong>USER</strong> can claim its <strong>&AElig; tokens</strong> back.
+            After the lapse of the second year, the tipping <strong>USER</strong> loses its right to
+            regain back the <strong>&AElig; tokens</strong> he has sent. Due to the decentralized
+            character of the blockchain, <strong>Superhero</strong> cannot control the
+            accumulation/receipt of the tips and to return them back when they are not received. Only
+            the <u>smart contract </u>and the <strong>USERS </strong>themselves can affect the
+            <strong>tokens</strong> due to the peer-to-peer method. <strong>USERS</strong> understand
+            that if the <strong>tokens</strong> are not claimed, they can be stored in the
+            <u>smart contract</u> without limitation of time and without any purpose. This is why,
+            after the lapse of the two years in which the receiver and the sender of the tips could
+            claim the <strong>tokens</strong> but have not<strong>,</strong> the
+            &ldquo;<u>Tipping Smart Contract</u>&rdquo; sends the <strong>&AElig; tokens</strong>
+            to an <strong>address</strong> of
+            <strong>Superhero</strong>. Once the <strong>tokens</strong> are received by
+            <strong>Superhero</strong>, receivers and senders of the tip accept and agree that they
+            shall not have any claims over the <strong>tokens</strong> and
+            <strong>Superhero</strong> shall not be held liable for their receipt provided it is
+            caused by the receiver and the sender&rsquo;s inactivity from their side during the
+            above-mentioned periods of time. The tips will then be used by
+            <strong>Superhero</strong> for the further development of the
+            <strong>blockchain</strong> ecosystem, the development of the <strong>Wallet</strong> or
+            any other project or activity it finds suitable and reasonable.
+            <strong>Superhero</strong> shall make such decisions at its own estimation.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section3Title')">
-          <div>
-            <p>
-              The application gives two possibilities for identification of <strong>USERS</strong> as it
-              follows:
-            </p>
-            <ul>
-              <li><strong>Account address</strong></li>
-              <li><strong>Name of account </strong></li>
-            </ul>
-            <p>
-              The <strong>Account address</strong> consists of random string of numbers and letters that
-              starts with &ldquo;ak_&rdquo;. <strong>USERS</strong> can find their
-              <strong>Wallet addresses</strong> on the dashboard, right above the balance. The
-              <strong>Account address</strong> is the public ID other <strong>USERS</strong> see by
-              default. Once a <strong>USER</strong> has downloaded the <strong>application</strong>, the
-              <strong>Wallet </strong>automatically generates the account address.<strong>&nbsp;
-              </strong>
-            </p>
-            <p>
-              In addition, <strong>USERS</strong> are given the option to claim a
-              <strong>name</strong> for their account(s) via the
-              <strong>&AElig;ternity Naming System</strong>. If a <strong>USER</strong> claims a
-              <strong>name</strong> on the <strong>application</strong>, other
-              <strong>USERS</strong> may associate it with the corresponding account.
-              <strong>USERS</strong> are free to choose the <strong>name</strong>. The only requirement
-              is that the <strong>USER</strong> must have a minimum amount of
-              <strong>&AElig; tokens </strong>in the
-              <strong>WALLET depending on the number of letters of the domain to be claimed</strong>.
-              <strong>We</strong> request from <strong>USERS</strong> not to use any offensive, racist,
-              misleading, provocative or any other inappropriate wording.
-            </p>
-            <p>
-              The idea behind account <strong>names</strong> is to serve as an alternative to the
-              <strong>Account address</strong>, making it much easier for other
-              <strong>USERS</strong> to send a tip.
-            </p>
-            <p>
-              <strong>USERS</strong> can claim <strong>names</strong> via a set of
-              <u>smart contracts</u>. The name establishment to a person can be an object of an auction.
-            </p>
-            <p>
-              In Section &ldquo;Names&rdquo; every <strong>USER</strong> can freely claim a
-              <strong>name</strong>. The <strong>name</strong> pre-claim requires the payment of a
-              transaction fee in micro <strong>&AElig; tokens</strong> and the commitment of the fee to
-              the <strong>USER</strong> owned account. Once a person has set up a <strong>name</strong>,
-              the <strong>&AElig;ternity Naming System</strong> launches an auction within which all
-              <strong>USERS</strong> of the <strong>WALLET</strong> can bid and within which a final
-              <strong>name</strong> fee is paid. Please bear in mind that <strong>names</strong> with 13
-              (thirteen) or more characters are claimed directly without undergoing an auction and after
-              the payment of the <strong>name</strong> fee. The period of time during which the auction
-              is available (for names with less than 13 characters) cannot be specified - it is based on
-              the length of the name and the number of bids. Each bid resets the auction counter on the
-              ongoing auction. The highest bid after the time has passed, receives the
-              <strong>name</strong>. Please bear in mind that the person who has suggested the
-              <strong>name</strong> and the person who has received the <strong>name</strong> can be two
-              separate people and the claim of the <strong>name</strong> solely depends on the bids in
-              the auctions. <strong>Superhero</strong> does not regulate or control the auctions. The
-              claim is only available for 100 (one hundred) days.
-            </p>
-            <p>
-              Before the lapse of 100 (one hundred) days, if the <strong>USER</strong> wants to preserve
-              the <strong>name</strong>, they should update the claim and pay for the same. Each update
-              is for one more period of 100 (one hundred) days with an option for reservation for an
-              additional period of 100 (one hundred) days. Once it reaches the expiration date on the
-              claim, the <strong>name</strong> is released, i.e. transition into the unclaimed state,
-              after which it can be claimed again. During the claim, if the
-              <strong>USER</strong> decides to extend the account related <strong>name</strong>, they
-              shall only pay the transaction fee without paying additional <strong>name</strong> fees.
-              The extension possibility is available within the above-mentioned period of 100 (one
-              hundred) days and is not a prerequisite for renewal of the period.&nbsp;
-            </p>
-            <p>
-              The <strong>&AElig;ternity Naming System</strong> gives the possibility for
-              <strong>USERS</strong> to exchange and transfer their <strong>names</strong>. The
-              <strong>USER</strong> who has received the <strong>name</strong> can transfer it to an
-              account of another <strong>USER </strong>- third party, or another
-              <strong>&AElig; Wallet address</strong> the <strong>USER</strong> owns.
-              <strong>USERS</strong> understand and accept that <strong>Superhero</strong> does not
-              control in any way the assignment and alienation of <strong>names</strong>. The decisions
-              undertaken during the claim period of the <strong>name</strong> are a result of the
-              <strong>USER&rsquo;s</strong> sole estimation.
-            </p>
-            <p>
-              The <strong>name</strong> can also be used as your profile name on the Superhero website
-              <LinkButton :href="AGGREGATOR_URL">superhero.com</LinkButton>.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section3Title')">
+        <div>
+          <p>
+            The application gives two possibilities for identification of <strong>USERS</strong> as it
+            follows:
+          </p>
+          <ul>
+            <li><strong>Account address</strong></li>
+            <li><strong>Name of account </strong></li>
+          </ul>
+          <p>
+            The <strong>Account address</strong> consists of random string of numbers and letters that
+            starts with &ldquo;ak_&rdquo;. <strong>USERS</strong> can find their
+            <strong>Wallet addresses</strong> on the dashboard, right above the balance. The
+            <strong>Account address</strong> is the public ID other <strong>USERS</strong> see by
+            default. Once a <strong>USER</strong> has downloaded the <strong>application</strong>, the
+            <strong>Wallet </strong>automatically generates the account address.<strong>&nbsp;
+            </strong>
+          </p>
+          <p>
+            In addition, <strong>USERS</strong> are given the option to claim a
+            <strong>name</strong> for their account(s) via the
+            <strong>&AElig;ternity Naming System</strong>. If a <strong>USER</strong> claims a
+            <strong>name</strong> on the <strong>application</strong>, other
+            <strong>USERS</strong> may associate it with the corresponding account.
+            <strong>USERS</strong> are free to choose the <strong>name</strong>. The only requirement
+            is that the <strong>USER</strong> must have a minimum amount of
+            <strong>&AElig; tokens </strong>in the
+            <strong>WALLET depending on the number of letters of the domain to be claimed</strong>.
+            <strong>We</strong> request from <strong>USERS</strong> not to use any offensive, racist,
+            misleading, provocative or any other inappropriate wording.
+          </p>
+          <p>
+            The idea behind account <strong>names</strong> is to serve as an alternative to the
+            <strong>Account address</strong>, making it much easier for other
+            <strong>USERS</strong> to send a tip.
+          </p>
+          <p>
+            <strong>USERS</strong> can claim <strong>names</strong> via a set of
+            <u>smart contracts</u>. The name establishment to a person can be an object of an auction.
+          </p>
+          <p>
+            In Section &ldquo;Names&rdquo; every <strong>USER</strong> can freely claim a
+            <strong>name</strong>. The <strong>name</strong> pre-claim requires the payment of a
+            transaction fee in micro <strong>&AElig; tokens</strong> and the commitment of the fee to
+            the <strong>USER</strong> owned account. Once a person has set up a <strong>name</strong>,
+            the <strong>&AElig;ternity Naming System</strong> launches an auction within which all
+            <strong>USERS</strong> of the <strong>WALLET</strong> can bid and within which a final
+            <strong>name</strong> fee is paid. Please bear in mind that <strong>names</strong> with 13
+            (thirteen) or more characters are claimed directly without undergoing an auction and after
+            the payment of the <strong>name</strong> fee. The period of time during which the auction
+            is available (for names with less than 13 characters) cannot be specified - it is based on
+            the length of the name and the number of bids. Each bid resets the auction counter on the
+            ongoing auction. The highest bid after the time has passed, receives the
+            <strong>name</strong>. Please bear in mind that the person who has suggested the
+            <strong>name</strong> and the person who has received the <strong>name</strong> can be two
+            separate people and the claim of the <strong>name</strong> solely depends on the bids in
+            the auctions. <strong>Superhero</strong> does not regulate or control the auctions. The
+            claim is only available for 100 (one hundred) days.
+          </p>
+          <p>
+            Before the lapse of 100 (one hundred) days, if the <strong>USER</strong> wants to preserve
+            the <strong>name</strong>, they should update the claim and pay for the same. Each update
+            is for one more period of 100 (one hundred) days with an option for reservation for an
+            additional period of 100 (one hundred) days. Once it reaches the expiration date on the
+            claim, the <strong>name</strong> is released, i.e. transition into the unclaimed state,
+            after which it can be claimed again. During the claim, if the
+            <strong>USER</strong> decides to extend the account related <strong>name</strong>, they
+            shall only pay the transaction fee without paying additional <strong>name</strong> fees.
+            The extension possibility is available within the above-mentioned period of 100 (one
+            hundred) days and is not a prerequisite for renewal of the period.&nbsp;
+          </p>
+          <p>
+            The <strong>&AElig;ternity Naming System</strong> gives the possibility for
+            <strong>USERS</strong> to exchange and transfer their <strong>names</strong>. The
+            <strong>USER</strong> who has received the <strong>name</strong> can transfer it to an
+            account of another <strong>USER </strong>- third party, or another
+            <strong>&AElig; Wallet address</strong> the <strong>USER</strong> owns.
+            <strong>USERS</strong> understand and accept that <strong>Superhero</strong> does not
+            control in any way the assignment and alienation of <strong>names</strong>. The decisions
+            undertaken during the claim period of the <strong>name</strong> are a result of the
+            <strong>USER&rsquo;s</strong> sole estimation.
+          </p>
+          <p>
+            The <strong>name</strong> can also be used as your profile name on the Superhero website
+            <LinkButton :href="AGGREGATOR_URL">superhero.com</LinkButton>.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section4Title')">
-          <div>
-            <p>
-              As a <strong>USER</strong>, <strong>YOU</strong> agree to the following rules applicable
-              for the<strong> Superhero Wallet</strong> :
-            </p>
-            <ul>
-              <li>
-                <strong>YOU</strong> shall comply with the rules set within the present
-                <strong>TERMS</strong> and perform any actions on the <strong>application</strong> in
-                good faith and according to the applicable legislation;
-              </li>
-              <li>
-                <strong>YOU</strong> are an adult and <strong>YOU</strong> are not persons under
-                judicial disability (<strong>YOU</strong> have obtained full legal capacity);
-              </li>
-              <li>
-                <strong>YOU</strong> shall not try to obtain or gain access over any personal or
-                identifiable information, including but not limited to seed phrases, private keys, from
-                other <strong>USERS</strong>, nor shall <strong>YOU</strong> disclose such information
-                about yourself;
-              </li>
-              <li>
-                <strong>YOU</strong> shall not in any way compromise or exploit the
-                <strong>application</strong> or use the <strong>application</strong> for any illegal
-                activity or outside the purpose for its creation;
-              </li>
-              <li>
-                <strong>Your</strong> actions do not in any manner mislead into thinking that
-                <strong>YOU</strong> are another person or company; <strong>YOU</strong> shall not
-                purposefully provide information by using another person&rsquo;s seed phrases,
-                <strong>account addresses</strong>, <strong>account</strong> <strong>names</strong> with
-                the purpose of representing as somebody else. <strong>Superhero</strong> shall undertake
-                any possible action against such identity thefts and frauds in case the
-                <strong>company</strong> suspects a <strong>USER</strong>;
-              </li>
-              <li>
-                the device <strong>YOU</strong> use does not contain or install any viruses, worms,
-                malware, Trojan horses or other harmful or destructive content.
-              </li>
-            </ul>
-            <p>
-              <strong>USERS</strong> shall be liable for any action undertaken in violation of the
-              present article.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section4Title')">
+        <div>
+          <p>
+            As a <strong>USER</strong>, <strong>YOU</strong> agree to the following rules applicable
+            for the<strong> Superhero Wallet</strong> :
+          </p>
+          <ul>
+            <li>
+              <strong>YOU</strong> shall comply with the rules set within the present
+              <strong>TERMS</strong> and perform any actions on the <strong>application</strong> in
+              good faith and according to the applicable legislation;
+            </li>
+            <li>
+              <strong>YOU</strong> are an adult and <strong>YOU</strong> are not persons under
+              judicial disability (<strong>YOU</strong> have obtained full legal capacity);
+            </li>
+            <li>
+              <strong>YOU</strong> shall not try to obtain or gain access over any personal or
+              identifiable information, including but not limited to seed phrases, private keys, from
+              other <strong>USERS</strong>, nor shall <strong>YOU</strong> disclose such information
+              about yourself;
+            </li>
+            <li>
+              <strong>YOU</strong> shall not in any way compromise or exploit the
+              <strong>application</strong> or use the <strong>application</strong> for any illegal
+              activity or outside the purpose for its creation;
+            </li>
+            <li>
+              <strong>Your</strong> actions do not in any manner mislead into thinking that
+              <strong>YOU</strong> are another person or company; <strong>YOU</strong> shall not
+              purposefully provide information by using another person&rsquo;s seed phrases,
+              <strong>account addresses</strong>, <strong>account</strong> <strong>names</strong> with
+              the purpose of representing as somebody else. <strong>Superhero</strong> shall undertake
+              any possible action against such identity thefts and frauds in case the
+              <strong>company</strong> suspects a <strong>USER</strong>;
+            </li>
+            <li>
+              the device <strong>YOU</strong> use does not contain or install any viruses, worms,
+              malware, Trojan horses or other harmful or destructive content.
+            </li>
+          </ul>
+          <p>
+            <strong>USERS</strong> shall be liable for any action undertaken in violation of the
+            present article.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section5Title')">
-          <div>
-            <p>
-              As mentioned above, the <strong>Wallet</strong> is only a software solution, which
-              facilitates the interaction between <strong>USERS</strong> and the decentralized, public
-              ledger. Therefore, <strong>YOU</strong> are solely responsible and liable for any and all
-              of your actions and inactions on the <strong>application</strong> and all gains and losses
-              sustained from your use of it. <strong>YOU</strong> indemnify <strong>Superhero</strong>,
-              its employees and affiliates in full for any and all negative consequences that might
-              arise from the use of the <strong>application</strong> due to the lack of control over the
-              peer-to-peer activities.
-            </p>
-            <p>
-              <strong><u>General Disclaimer:</u></strong> The
-              <strong>&AElig;ternity blockchain</strong> is open-source, public and permissionless
-              ledger, meaning that anyone can download, participate, develop, improve and validate
-              transactions on the <strong>blockchain</strong>. <strong>Superhero</strong> cannot and
-              does not control in any way the transactions conducted by <strong>USERS</strong>.
-              <strong>Superhero</strong> does not ensure the trustworthiness and validity of the same.
-              Please, bear in mind that every <strong>USER</strong> is solely responsible for the
-              actions undertaken on the <strong>application</strong> and the information presented by
-              them.
-            </p>
-            <p>
-              <strong><u>Password and Seed Phrase Security Disclaimer:</u></strong>
-              <strong>USERS</strong> take responsibility for their digital security. The
-              <strong>application</strong> gives the possibility to set up a seed phrase, consisting of
-              random unique combination of words. The purpose of the seed phrase is to restore the
-              access to the <strong>account</strong>, once the <strong>USER</strong> has lost access to
-              the original <strong>Wallet</strong> for any reason (migrating to a new device,
-              reinstalling browser, etc.). <strong>Superhero</strong>
-              <strong>does not collect the private keys or the seed phrases and shall not be treated
-                under any circumstances as a custodian wallet provider. WE HIGHLY RECOMMEND ALL USERS TO
-                SET UP A SEED PHRASE AND PROTECT IT.</strong>
-              <strong>USERS</strong> should store their seed phrase offline safely. Please bear in mind
-              that if a <strong>USER</strong> has not set up a seed phrase for backup or they have
-              forgotten the seed phrase and its exact wording, the access to their
-              <strong>accounts</strong> can be permanently restricted. The lack of access does not mean
-              in any way that the <strong>&AElig; tokens</strong> are lost. The
-              <strong>&AElig; tokens</strong> remain available, however, they cannot be
-              controlled, transferred and any other action with them cannot be undertaken.
-              <strong>Superhero</strong> shall not be held liable in any case of lost, forgotten or
-              misspelled seed phrases. In addition, <strong>USERS</strong> must not share their seed
-              phrase with anyone. <strong>Superhero</strong> should not be liable for any claim, damages
-              or other liability, tort or otherwise, arising from, out of or in connection with the
-              impossibility of <strong>USERS</strong> to regain access to their account on the
-              <strong>Wallet</strong>.
-            </p>
-            <p>
-              Please bear in mind that the option &ldquo;Retrieve existing account&rdquo; is applicable
-              only in case the <strong>USER</strong> has a seed phrase.
-            </p>
-            <p>
-              <strong><u>Decentralization and Control </u><u>Transparency Disclaimer</u></strong>:
-              <strong>Blockchain</strong> technology is decentralized by nature - which means that
-              the makers of the <strong>Wallet</strong> cannot access or freeze your
-              <strong>account</strong>; recover or reset your seed phrase; reverse, cancel or refund
-              transactions. Only <strong>USERS</strong> are in charge of the safe storage and sending of
-              their funds. By agreeing to the present <strong>TERMS</strong>,
-              <strong>USERS</strong> accept and guarantee to defend, indemnify and hold
-              <strong>Superhero</strong> harmless from and against any and all claims, costs, expenses,
-              including but not limited to attorneys&rsquo; fees, damages, etc., related to or arising
-              from the use of the <strong>application</strong>.
-            </p>
-            <p>
-              <strong><u>Access and Connectivity Disclaimer</u></strong>: The
-              <strong>application</strong> can be downloaded or used from the following places:
-            </p>
-            <p>
-              1) downloaded as an add-on (extension) to Firefox:
-              <LinkButton :href="APP_LINK_FIREFOX">{{ APP_LINK_FIREFOX }}</LinkButton>
-              ; to Chrome, Brave and Opera:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-              <LinkButton :href="APP_LINK_CHROME">{{ APP_LINK_CHROME }}</LinkButton>;
-            </p>
-            <p>
-              2) accessed from any Browser at the address:
-              <LinkButton :href="APP_LINK_WEB">{{ APP_LINK_WEB }}</LinkButton>;
-            </p>
-            <p>
-              3) downloaded from Google Play:&nbsp;&nbsp;&nbsp;&nbsp;
-              <LinkButton :href="APP_LINK_ANDROID">{{ APP_LINK_ANDROID }}</LinkButton>
-              and
-            </p>
-            <p>
-              from App Store:
-              <LinkButton :href="APP_LINK_IOS">{{ APP_LINK_IOS }}</LinkButton>.
-            </p>
-            <p>
-              Please bear in mind that the marketplaces for downloading are third-party owned and
-              therefore, can cease the supporting of the <strong>application</strong> in their own
-              estimation, making it difficult or impossible to receive any functionality from the
-              <strong>application</strong> or updates.
-            </p>
-            <p>
-              Moreover, please bear in mind that the source code to the <strong>application</strong> is
-              uploaded on GitHub. When any modifications/updates, etc. are conducted on the source code,
-              they are automatically reflected on the browser extension option and the web browser due
-              to the fact they are Internet connected <strong>application</strong> access points.
-              However, for <strong>USERS</strong> who use the mobile options from Google Play or App
-              Store, for them to receive updates, modifications, etc. of the
-              <strong>application</strong>, they should download the new version of the
-              <strong>Wallet</strong> from the same marketplaces. <strong>USERS</strong> understand and
-              agree that if they do not download the newest versions from Google Play or App Store, they
-              will not receive the latest features, improvements, etc.
-            </p>
-            <p>
-              It is possible that devices on which the <strong>Wallet</strong> is installed to be harmed
-              by malware/spyware/viruses/cyber-attacks, etc. or during technical support. Damage or loss
-              of the device can possibly result in loss of funds or endanger them. Therefore, please
-              refer to section <strong><u>Password and Seed Phrase Security Disclaimer</u></strong> in
-              regard to seed phrases. <strong>Superhero</strong> is not responsible for any of the
-              above-mentioned access and connectivity troubleshooting. Therefore,
-              <strong>WE</strong> shall not be held liable for any loss of data on the
-              <strong>application</strong> caused in these cases.
-            </p>
-            <p>
-              <strong><u>Cryptocurrency Guidance Disclaimer:</u></strong> The content presented on the
-              <strong>application</strong> is not intended to be used as guide for cryptocurrency
-              investments or signing of other legal agreements in connection to cryptocurrencies.
-              <strong>Superhero</strong> does not offer business advices, which can be used as a legal
-              basis for any investments or agreements in the sphere. <strong>Superhero</strong> shall
-              not be held liable in any case of negative consequences from transactions or
-              non-compliance with obligations of legal agreements signed by <strong>YOU</strong>,
-              including but not only losses, tort, revenue, income or profits loss arising out of the
-              contracts/ transactions/investment acts/agreements.
-            </p>
-            <p>
-              <strong><u>Jurisdiction and Regulatory Disclaimer:</u></strong> The access to the
-              <strong>application</strong> is granted worldwide. The use of the
-              <strong>Wallet </strong>may be technically restricted or prohibited in certain territories
-              and countries depending on the different legal acts. Please, bear in mind that
-              <strong>YOU</strong> have to inform yourself about such legal restrictions and
-              <strong>YOU</strong> are liable solely in case of a breach of any legal norms. The access
-              to our <strong>application</strong> is prohibited provided the access point is in a
-              territory where the content is illegal. <strong>Superhero</strong> does not have the
-              obligation to control the legislation applicability according to each access point of
-              <strong>USERS</strong> and shall not be held liable in these circumstances.
-            </p>
-            <p>
-              <strong>USERS</strong> understand and accept that the legislation on a national, regional
-              and international levels can introduce new regulations with an object- blockchain
-              technology, tokens, blockchain technology based applications, etc. Therefore, in case of
-              regulatory restrictions, bans and prohibitions, the
-              <strong>&AElig;ternity blockchain&rsquo;s</strong> or the
-              <strong>Wallet&rsquo;s </strong>development shall be immensely influenced, probably
-              causing its termination. Taking into account the above-mentioned,
-              <strong>USERS</strong> understand that there is no assurance that they will constantly or
-              for indefinite period of time receive any functionality through the
-              <strong>application</strong> or the <strong>&AElig;</strong> <strong>tokens</strong> held
-              by them.
-            </p>
-            <p>
-              <strong><u>Risks</u></strong>: <strong>USERS</strong> understand and
-              agree with the risks related to the
-              <strong>&AElig;ternity blockchain</strong> contribution and/or with the allocation, use
-              and ownership of <strong>&AElig; tokens</strong> and guarantee to relieve
-              of responsibility <strong>Superhero</strong> in these cases.
-            </p>
-            <p>The risks mentioned within the present <strong>TERMS</strong> are not comprehensive:</p>
-            <ul>
-              <li>
-                <u>Risk of software weaknesses: </u><strong>USERS</strong> understand and accept that
-                due to the open-source, decentralized, public, permissionless cloud concept, the
-                software, the blockchain technology, incorporating all elements and the
-                <strong>application</strong> are in a constant development process. There is no warranty
-                that the receipt and transfer of <strong>&AElig; tokens</strong> shall
-                be uninterrupted or error-free at all times. <strong>USERS</strong> accept and guarantee
-                to dispense of responsibility <strong>Superhero</strong> for any software or technology
-                weaknesses, malfunctions, vulnerabilities or bugs, which can cause complete or partial
-                loss of <strong>&AElig; tokens</strong>.
-              </li>
-              <li>
-                <u>Risk of theft:</u> <strong>USERS</strong> understand and accept that due to the
-                open-source, decentralized, public, permissionless cloud concept, the software, the
-                <strong>application</strong>, the <strong>&AElig;ternity blockchain</strong> and the
-                other blockchain technology related elements may be exposed to hacker attacks or other
-                harmful individuals. These actions could result including but not limited to theft or
-                loss of <strong>&AElig; tokens</strong>.
-              </li>
-              <li>
-                <u>Risk of mining attacks</u>: <strong>USERS</strong> understand and accept that due to
-                <strong>the application&rsquo;s</strong> blockchain based system, it may be susceptible
-                to mining attacks, including but not limited to double-spend attacks, majority mining
-                power attacks, 'selfish-mining' attacks, and race condition attacks. Any of the
-                above-mentioned attacks could for example result in disturbance of the transactions on
-                the <strong>application</strong>.
-              </li>
-            </ul>
-            <p>
-              <u>Risk of phishing attacks and <strong>forks</strong>:</u>
-              <strong>USERS</strong> understand and accept that the <strong>application</strong> can be
-              an object of phishing attacks. Highly possible results are the steal of data and
-              credentials. The phishing attacks represent masquerade of an attacker as an authentic and
-              trusted entity and the creation of an <strong>application</strong>/
-              <strong>website</strong> with high percentage of resemblance with the original one.
-              <strong>USERS</strong> should be careful when they download and use the original
-              <strong>application</strong>. <strong>USERS</strong> can identity the authentic
-              <strong>Wallet</strong> by verifying that the developer on the marketplace is
-              <strong>Superhero.com / Superhero.com LVC</strong> and can use the hyperlinks for
-              downloading, incorporated in the present Terms. Due to the fact
-              <strong>&AElig;ternity blockchain</strong> is public and permissionless, any person has
-              the possibility to create a &ldquo;<strong>fork</strong>&rdquo;. Any developer can copy
-              and develop the source code resulting in the formation of a distinct and separate
-              software. <strong>USERS</strong> understand and accept that
-              <strong>Superhero</strong> cannot avoid the creation of such <strong>forks</strong> and is
-              not responsible for them. <strong>Superhero</strong> shall not be held liable for any
-              losses and/or damages resulted from the use of <strong>forks</strong>.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section5Title')">
+        <div>
+          <p>
+            As mentioned above, the <strong>Wallet</strong> is only a software solution, which
+            facilitates the interaction between <strong>USERS</strong> and the decentralized, public
+            ledger. Therefore, <strong>YOU</strong> are solely responsible and liable for any and all
+            of your actions and inactions on the <strong>application</strong> and all gains and losses
+            sustained from your use of it. <strong>YOU</strong> indemnify <strong>Superhero</strong>,
+            its employees and affiliates in full for any and all negative consequences that might
+            arise from the use of the <strong>application</strong> due to the lack of control over the
+            peer-to-peer activities.
+          </p>
+          <p>
+            <strong><u>General Disclaimer:</u></strong> The
+            <strong>&AElig;ternity blockchain</strong> is open-source, public and permissionless
+            ledger, meaning that anyone can download, participate, develop, improve and validate
+            transactions on the <strong>blockchain</strong>. <strong>Superhero</strong> cannot and
+            does not control in any way the transactions conducted by <strong>USERS</strong>.
+            <strong>Superhero</strong> does not ensure the trustworthiness and validity of the same.
+            Please, bear in mind that every <strong>USER</strong> is solely responsible for the
+            actions undertaken on the <strong>application</strong> and the information presented by
+            them.
+          </p>
+          <p>
+            <strong><u>Password and Seed Phrase Security Disclaimer:</u></strong>
+            <strong>USERS</strong> take responsibility for their digital security. The
+            <strong>application</strong> gives the possibility to set up a seed phrase, consisting of
+            random unique combination of words. The purpose of the seed phrase is to restore the
+            access to the <strong>account</strong>, once the <strong>USER</strong> has lost access to
+            the original <strong>Wallet</strong> for any reason (migrating to a new device,
+            reinstalling browser, etc.). <strong>Superhero</strong>
+            <strong>does not collect the private keys or the seed phrases and shall not be treated
+              under any circumstances as a custodian wallet provider. WE HIGHLY RECOMMEND ALL USERS TO
+              SET UP A SEED PHRASE AND PROTECT IT.</strong>
+            <strong>USERS</strong> should store their seed phrase offline safely. Please bear in mind
+            that if a <strong>USER</strong> has not set up a seed phrase for backup or they have
+            forgotten the seed phrase and its exact wording, the access to their
+            <strong>accounts</strong> can be permanently restricted. The lack of access does not mean
+            in any way that the <strong>&AElig; tokens</strong> are lost. The
+            <strong>&AElig; tokens</strong> remain available, however, they cannot be
+            controlled, transferred and any other action with them cannot be undertaken.
+            <strong>Superhero</strong> shall not be held liable in any case of lost, forgotten or
+            misspelled seed phrases. In addition, <strong>USERS</strong> must not share their seed
+            phrase with anyone. <strong>Superhero</strong> should not be liable for any claim, damages
+            or other liability, tort or otherwise, arising from, out of or in connection with the
+            impossibility of <strong>USERS</strong> to regain access to their account on the
+            <strong>Wallet</strong>.
+          </p>
+          <p>
+            Please bear in mind that the option &ldquo;Retrieve existing account&rdquo; is applicable
+            only in case the <strong>USER</strong> has a seed phrase.
+          </p>
+          <p>
+            <strong><u>Decentralization and Control </u><u>Transparency Disclaimer</u></strong>:
+            <strong>Blockchain</strong> technology is decentralized by nature - which means that
+            the makers of the <strong>Wallet</strong> cannot access or freeze your
+            <strong>account</strong>; recover or reset your seed phrase; reverse, cancel or refund
+            transactions. Only <strong>USERS</strong> are in charge of the safe storage and sending of
+            their funds. By agreeing to the present <strong>TERMS</strong>,
+            <strong>USERS</strong> accept and guarantee to defend, indemnify and hold
+            <strong>Superhero</strong> harmless from and against any and all claims, costs, expenses,
+            including but not limited to attorneys&rsquo; fees, damages, etc., related to or arising
+            from the use of the <strong>application</strong>.
+          </p>
+          <p>
+            <strong><u>Access and Connectivity Disclaimer</u></strong>: The
+            <strong>application</strong> can be downloaded or used from the following places:
+          </p>
+          <p>
+            1) downloaded as an add-on (extension) to Firefox:
+            <LinkButton :href="APP_LINK_FIREFOX">{{ APP_LINK_FIREFOX }}</LinkButton>
+            ; to Chrome, Brave and Opera:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <LinkButton :href="APP_LINK_CHROME">{{ APP_LINK_CHROME }}</LinkButton>;
+          </p>
+          <p>
+            2) accessed from any Browser at the address:
+            <LinkButton :href="APP_LINK_WEB">{{ APP_LINK_WEB }}</LinkButton>;
+          </p>
+          <p>
+            3) downloaded from Google Play:&nbsp;&nbsp;&nbsp;&nbsp;
+            <LinkButton :href="APP_LINK_ANDROID">{{ APP_LINK_ANDROID }}</LinkButton>
+            and
+          </p>
+          <p>
+            from App Store:
+            <LinkButton :href="APP_LINK_IOS">{{ APP_LINK_IOS }}</LinkButton>.
+          </p>
+          <p>
+            Please bear in mind that the marketplaces for downloading are third-party owned and
+            therefore, can cease the supporting of the <strong>application</strong> in their own
+            estimation, making it difficult or impossible to receive any functionality from the
+            <strong>application</strong> or updates.
+          </p>
+          <p>
+            Moreover, please bear in mind that the source code to the <strong>application</strong> is
+            uploaded on GitHub. When any modifications/updates, etc. are conducted on the source code,
+            they are automatically reflected on the browser extension option and the web browser due
+            to the fact they are Internet connected <strong>application</strong> access points.
+            However, for <strong>USERS</strong> who use the mobile options from Google Play or App
+            Store, for them to receive updates, modifications, etc. of the
+            <strong>application</strong>, they should download the new version of the
+            <strong>Wallet</strong> from the same marketplaces. <strong>USERS</strong> understand and
+            agree that if they do not download the newest versions from Google Play or App Store, they
+            will not receive the latest features, improvements, etc.
+          </p>
+          <p>
+            It is possible that devices on which the <strong>Wallet</strong> is installed to be harmed
+            by malware/spyware/viruses/cyber-attacks, etc. or during technical support. Damage or loss
+            of the device can possibly result in loss of funds or endanger them. Therefore, please
+            refer to section <strong><u>Password and Seed Phrase Security Disclaimer</u></strong> in
+            regard to seed phrases. <strong>Superhero</strong> is not responsible for any of the
+            above-mentioned access and connectivity troubleshooting. Therefore,
+            <strong>WE</strong> shall not be held liable for any loss of data on the
+            <strong>application</strong> caused in these cases.
+          </p>
+          <p>
+            <strong><u>Cryptocurrency Guidance Disclaimer:</u></strong> The content presented on the
+            <strong>application</strong> is not intended to be used as guide for cryptocurrency
+            investments or signing of other legal agreements in connection to cryptocurrencies.
+            <strong>Superhero</strong> does not offer business advices, which can be used as a legal
+            basis for any investments or agreements in the sphere. <strong>Superhero</strong> shall
+            not be held liable in any case of negative consequences from transactions or
+            non-compliance with obligations of legal agreements signed by <strong>YOU</strong>,
+            including but not only losses, tort, revenue, income or profits loss arising out of the
+            contracts/ transactions/investment acts/agreements.
+          </p>
+          <p>
+            <strong><u>Jurisdiction and Regulatory Disclaimer:</u></strong> The access to the
+            <strong>application</strong> is granted worldwide. The use of the
+            <strong>Wallet </strong>may be technically restricted or prohibited in certain territories
+            and countries depending on the different legal acts. Please, bear in mind that
+            <strong>YOU</strong> have to inform yourself about such legal restrictions and
+            <strong>YOU</strong> are liable solely in case of a breach of any legal norms. The access
+            to our <strong>application</strong> is prohibited provided the access point is in a
+            territory where the content is illegal. <strong>Superhero</strong> does not have the
+            obligation to control the legislation applicability according to each access point of
+            <strong>USERS</strong> and shall not be held liable in these circumstances.
+          </p>
+          <p>
+            <strong>USERS</strong> understand and accept that the legislation on a national, regional
+            and international levels can introduce new regulations with an object- blockchain
+            technology, tokens, blockchain technology based applications, etc. Therefore, in case of
+            regulatory restrictions, bans and prohibitions, the
+            <strong>&AElig;ternity blockchain&rsquo;s</strong> or the
+            <strong>Wallet&rsquo;s </strong>development shall be immensely influenced, probably
+            causing its termination. Taking into account the above-mentioned,
+            <strong>USERS</strong> understand that there is no assurance that they will constantly or
+            for indefinite period of time receive any functionality through the
+            <strong>application</strong> or the <strong>&AElig;</strong> <strong>tokens</strong> held
+            by them.
+          </p>
+          <p>
+            <strong><u>Risks</u></strong>: <strong>USERS</strong> understand and
+            agree with the risks related to the
+            <strong>&AElig;ternity blockchain</strong> contribution and/or with the allocation, use
+            and ownership of <strong>&AElig; tokens</strong> and guarantee to relieve
+            of responsibility <strong>Superhero</strong> in these cases.
+          </p>
+          <p>The risks mentioned within the present <strong>TERMS</strong> are not comprehensive:</p>
+          <ul>
+            <li>
+              <u>Risk of software weaknesses: </u><strong>USERS</strong> understand and accept that
+              due to the open-source, decentralized, public, permissionless cloud concept, the
+              software, the blockchain technology, incorporating all elements and the
+              <strong>application</strong> are in a constant development process. There is no warranty
+              that the receipt and transfer of <strong>&AElig; tokens</strong> shall
+              be uninterrupted or error-free at all times. <strong>USERS</strong> accept and guarantee
+              to dispense of responsibility <strong>Superhero</strong> for any software or technology
+              weaknesses, malfunctions, vulnerabilities or bugs, which can cause complete or partial
+              loss of <strong>&AElig; tokens</strong>.
+            </li>
+            <li>
+              <u>Risk of theft:</u> <strong>USERS</strong> understand and accept that due to the
+              open-source, decentralized, public, permissionless cloud concept, the software, the
+              <strong>application</strong>, the <strong>&AElig;ternity blockchain</strong> and the
+              other blockchain technology related elements may be exposed to hacker attacks or other
+              harmful individuals. These actions could result including but not limited to theft or
+              loss of <strong>&AElig; tokens</strong>.
+            </li>
+            <li>
+              <u>Risk of mining attacks</u>: <strong>USERS</strong> understand and accept that due to
+              <strong>the application&rsquo;s</strong> blockchain based system, it may be susceptible
+              to mining attacks, including but not limited to double-spend attacks, majority mining
+              power attacks, 'selfish-mining' attacks, and race condition attacks. Any of the
+              above-mentioned attacks could for example result in disturbance of the transactions on
+              the <strong>application</strong>.
+            </li>
+          </ul>
+          <p>
+            <u>Risk of phishing attacks and <strong>forks</strong>:</u>
+            <strong>USERS</strong> understand and accept that the <strong>application</strong> can be
+            an object of phishing attacks. Highly possible results are the steal of data and
+            credentials. The phishing attacks represent masquerade of an attacker as an authentic and
+            trusted entity and the creation of an <strong>application</strong>/
+            <strong>website</strong> with high percentage of resemblance with the original one.
+            <strong>USERS</strong> should be careful when they download and use the original
+            <strong>application</strong>. <strong>USERS</strong> can identity the authentic
+            <strong>Wallet</strong> by verifying that the developer on the marketplace is
+            <strong>Superhero.com / Superhero.com LVC</strong> and can use the hyperlinks for
+            downloading, incorporated in the present Terms. Due to the fact
+            <strong>&AElig;ternity blockchain</strong> is public and permissionless, any person has
+            the possibility to create a &ldquo;<strong>fork</strong>&rdquo;. Any developer can copy
+            and develop the source code resulting in the formation of a distinct and separate
+            software. <strong>USERS</strong> understand and accept that
+            <strong>Superhero</strong> cannot avoid the creation of such <strong>forks</strong> and is
+            not responsible for them. <strong>Superhero</strong> shall not be held liable for any
+            losses and/or damages resulted from the use of <strong>forks</strong>.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section6Title')">
-          <div>
-            <p>
-              The <strong>Wallet</strong> does not collect any fees or taxes for its use
-              <strong>application </strong>- it is free of charge. However, taxes and fees are payable
-              for the transactions on the <strong>&AElig;ternity blockchain</strong> including but not
-              limited to miner fees, gas tax, transaction fee. The amounts of the taxes and fees are
-              fixed unilaterally.
-            </p>
-            <p>
-              In addition, depending on the territory access point, the transfer and receipt of funds
-              through the <strong>application</strong> may be an object of tax and fee payments to
-              public authorities in different countries depending on the legal regulations.
-              <strong>USERS</strong> are obliged to inform themselves about such requirements and are
-              solely responsible for their donations.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section6Title')">
+        <div>
+          <p>
+            The <strong>Wallet</strong> does not collect any fees or taxes for its use
+            <strong>application </strong>- it is free of charge. However, taxes and fees are payable
+            for the transactions on the <strong>&AElig;ternity blockchain</strong> including but not
+            limited to miner fees, gas tax, transaction fee. The amounts of the taxes and fees are
+            fixed unilaterally.
+          </p>
+          <p>
+            In addition, depending on the territory access point, the transfer and receipt of funds
+            through the <strong>application</strong> may be an object of tax and fee payments to
+            public authorities in different countries depending on the legal regulations.
+            <strong>USERS</strong> are obliged to inform themselves about such requirements and are
+            solely responsible for their donations.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section7Title')">
-          <div>
-            <p>
-              To send someone a tip, please make sure that <strong>YOU</strong> are no the URL that
-              <strong>YOU</strong> want to tip or <strong>YOU</strong> have copied and pasted the right
-              URL (depending on the option for access to the <strong>Wallet</strong>).
-              <strong>Superhero</strong> does not participate or control in any way the tips and shall
-              not be held liable for any mistakes and wrong donations. The tips cannot be modified.
-              Please bear in mind that the <strong>application</strong> is created in order for people
-              to stimulate the full, transparent, useful and accurate information worldwide. Therefore,
-              <strong>USERS</strong> shall be fully liable for any use of the <strong>Wallet</strong> in
-              violation of its purpose and the present <strong>TERMS</strong>.
-              <strong>Superhero</strong> does not control the platforms the donations are sent to.
-              <strong>Superhero</strong> is not responsible for the content on the third-party platforms
-              in any way.
-            </p>
-            <p>
-              In addition, any use of third-party platforms for the purpose of exchanging
-              <strong>&AElig;</strong> <strong>tokens</strong> with other cryptocurrencies or fiat
-              currencies is subject to compliance with the third-party platform&rsquo;s Terms of use and
-              other compulsory documentation. It is solely your responsibility to comply duly with the
-              rules, applicable for these platforms. <strong>Superhero</strong> is not responsible in
-              any way for the use of these third-party platforms in relation to loading the
-              <strong>USERS&rsquo;</strong> wallets and the withdrawal of <strong>&AElig;</strong>
-              <strong>tokens</strong>.
-            </p>
-            <p>
-              Moreover, the platforms from which the <strong>Wallet</strong> can be downloaded are owned
-              by third parties. Therefore, <strong>USERS</strong> should comply their behaviour with the
-              rules applicable for these third-party platforms.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section7Title')">
+        <div>
+          <p>
+            To send someone a tip, please make sure that <strong>YOU</strong> are no the URL that
+            <strong>YOU</strong> want to tip or <strong>YOU</strong> have copied and pasted the right
+            URL (depending on the option for access to the <strong>Wallet</strong>).
+            <strong>Superhero</strong> does not participate or control in any way the tips and shall
+            not be held liable for any mistakes and wrong donations. The tips cannot be modified.
+            Please bear in mind that the <strong>application</strong> is created in order for people
+            to stimulate the full, transparent, useful and accurate information worldwide. Therefore,
+            <strong>USERS</strong> shall be fully liable for any use of the <strong>Wallet</strong> in
+            violation of its purpose and the present <strong>TERMS</strong>.
+            <strong>Superhero</strong> does not control the platforms the donations are sent to.
+            <strong>Superhero</strong> is not responsible for the content on the third-party platforms
+            in any way.
+          </p>
+          <p>
+            In addition, any use of third-party platforms for the purpose of exchanging
+            <strong>&AElig;</strong> <strong>tokens</strong> with other cryptocurrencies or fiat
+            currencies is subject to compliance with the third-party platform&rsquo;s Terms of use and
+            other compulsory documentation. It is solely your responsibility to comply duly with the
+            rules, applicable for these platforms. <strong>Superhero</strong> is not responsible in
+            any way for the use of these third-party platforms in relation to loading the
+            <strong>USERS&rsquo;</strong> wallets and the withdrawal of <strong>&AElig;</strong>
+            <strong>tokens</strong>.
+          </p>
+          <p>
+            Moreover, the platforms from which the <strong>Wallet</strong> can be downloaded are owned
+            by third parties. Therefore, <strong>USERS</strong> should comply their behaviour with the
+            rules applicable for these third-party platforms.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section8Title')">
-          <div>
-            <p>
-              The <strong>application</strong> is developed under the open-source, permissive free
-              software ISC License (&ldquo;ISC&rdquo;). Under this license other developers have the
-              right to use, copy, modify and distribute the source code of the
-              <strong>Wallet</strong> for any purpose without a fee. The license only requires
-              preservation of the copyright and license notice below. <strong>Superhero</strong> is not
-              liable in any way for the diffusion and public access to the amended/modified by other
-              developers source code files due to the open source character of the software.
-            </p>
-            <p>The notice is as it follows:</p>
-            <p>&ldquo;ISC License</p>
-            <p>Copyright (c) 2019, Superhero</p>
-            <p>
-              Permission to use, copy, modify, and/or distribute this software for any purpose with or
-              without fee is hereby granted, provided that the above copyright notice and this
-              permission notice appear in all copies.
-            </p>
-            <p>
-              THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO
-              THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT
-              SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR
-              ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
-              OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE
-              USE OR PERFORMANCE OF THIS SOFTWARE.&rdquo;
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section8Title')">
+        <div>
+          <p>
+            The <strong>application</strong> is developed under the open-source, permissive free
+            software ISC License (&ldquo;ISC&rdquo;). Under this license other developers have the
+            right to use, copy, modify and distribute the source code of the
+            <strong>Wallet</strong> for any purpose without a fee. The license only requires
+            preservation of the copyright and license notice below. <strong>Superhero</strong> is not
+            liable in any way for the diffusion and public access to the amended/modified by other
+            developers source code files due to the open source character of the software.
+          </p>
+          <p>The notice is as it follows:</p>
+          <p>&ldquo;ISC License</p>
+          <p>Copyright (c) 2019, Superhero</p>
+          <p>
+            Permission to use, copy, modify, and/or distribute this software for any purpose with or
+            without fee is hereby granted, provided that the above copyright notice and this
+            permission notice appear in all copies.
+          </p>
+          <p>
+            THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO
+            THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT
+            SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR
+            ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
+            OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE
+            USE OR PERFORMANCE OF THIS SOFTWARE.&rdquo;
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section9Title')">
-          <div>
-            <p>
-              The <strong>application</strong> is developed by <strong>Superhero. </strong>The
-              <strong>application</strong> may display or include elements which are subject of
-              intellectual property regulation including but not limited to logos, trademarks, domain
-              names, etc. &nbsp;It is prohibited to use any intellectual property of
-              <strong>Superhero</strong> before a prior explicit consent from the latter.
-            </p>
-            <p>
-              None of the elements mentioned above can be edited, downloaded, reproduced, used for
-              commercial purposes, distributed and transmitted in any manner and/or any medium
-              whatsoever, partially or in whole, without the explicit prior written consent of
-              <strong>Superhero</strong>.
-            </p>
-            <p>
-              <strong>Superhero</strong> reserves its right to take any necessary legal action against
-              intellectual property infringement.
-            </p>
-            <p>
-              The present article does not in any way exclude or interfere with the rights granted
-              according to article 8- <strong><u>LICENSE</u></strong>, of the present Terms.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section9Title')">
+        <div>
+          <p>
+            The <strong>application</strong> is developed by <strong>Superhero. </strong>The
+            <strong>application</strong> may display or include elements which are subject of
+            intellectual property regulation including but not limited to logos, trademarks, domain
+            names, etc. &nbsp;It is prohibited to use any intellectual property of
+            <strong>Superhero</strong> before a prior explicit consent from the latter.
+          </p>
+          <p>
+            None of the elements mentioned above can be edited, downloaded, reproduced, used for
+            commercial purposes, distributed and transmitted in any manner and/or any medium
+            whatsoever, partially or in whole, without the explicit prior written consent of
+            <strong>Superhero</strong>.
+          </p>
+          <p>
+            <strong>Superhero</strong> reserves its right to take any necessary legal action against
+            intellectual property infringement.
+          </p>
+          <p>
+            The present article does not in any way exclude or interfere with the rights granted
+            according to article 8- <strong><u>LICENSE</u></strong>, of the present Terms.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section10Title')">
-          <div>
-            <p>
-              <strong>USERS</strong> understand and accept <strong>the application</strong> can be
-              periodically modified, updated, maintained or technically supported, which could to some
-              extent influence the use of the <strong>Wallet</strong>, the visual representation of the
-              <strong>application</strong> or could result in malfunction. In the latter case, if
-              <strong>YOU</strong> as a <strong>USER</strong> notice any change in the
-              <strong>tokens</strong>, settings, accounts or any other information on the application,
-              please contact
-              <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton> for assistance.
-            </p>
-          </div>
-        </AccordionItem>
+      <AccordionItem :label="$t('pages.termsOfService.section10Title')">
+        <div>
+          <p>
+            <strong>USERS</strong> understand and accept <strong>the application</strong> can be
+            periodically modified, updated, maintained or technically supported, which could to some
+            extent influence the use of the <strong>Wallet</strong>, the visual representation of the
+            <strong>application</strong> or could result in malfunction. In the latter case, if
+            <strong>YOU</strong> as a <strong>USER</strong> notice any change in the
+            <strong>tokens</strong>, settings, accounts or any other information on the application,
+            please contact
+            <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton> for assistance.
+          </p>
+        </div>
+      </AccordionItem>
 
-        <AccordionItem :label="$t('pages.termsOfService.section11Title')">
-          <div>
-            <p>
-              These <strong>TERMS</strong> set forth the entire understanding and agreement as to the
-              subject matter hereof and supersedes any and all prior discussions, agreements, and
-              understandings of any kind and every nature between <strong>USERS</strong> and
-              <strong>Superhero</strong>.
-            </p>
-            <p>
-              The legislation and jurisdiction of Liechtenstein is applied for the issues outstanding
-              the present <strong>TERMS</strong> without regard to possible conflict of law provisions.
-              The invalidity of one or more clauses/ provisions in the <strong>TERMS</strong> does not
-              lead to the invalidity of the whole agreement.
-            </p>
-            <p>
-              <strong><u>The Privacy Policy</u></strong> is an inseparable part of the present
-              <strong>TERMS</strong> and should be considered as a complementary document with
-              compulsory character. Unless explicitly stated otherwise in the
-              <strong>Privacy Policy</strong>, all rules from the <strong>TERMS</strong> apply
-              respectively.
-            </p>
-            <p>
-              For more information regarding our Services and the present <strong>TERMS</strong>, please
-              do not hesitate to contact the <strong>Superhero</strong> team at:
-              <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton>.
-            </p>
-          </div>
-        </AccordionItem>
-      </div>
-      <BackToTop />
-    </IonContent>
-  </IonPage>
+      <AccordionItem :label="$t('pages.termsOfService.section11Title')">
+        <div>
+          <p>
+            These <strong>TERMS</strong> set forth the entire understanding and agreement as to the
+            subject matter hereof and supersedes any and all prior discussions, agreements, and
+            understandings of any kind and every nature between <strong>USERS</strong> and
+            <strong>Superhero</strong>.
+          </p>
+          <p>
+            The legislation and jurisdiction of Liechtenstein is applied for the issues outstanding
+            the present <strong>TERMS</strong> without regard to possible conflict of law provisions.
+            The invalidity of one or more clauses/ provisions in the <strong>TERMS</strong> does not
+            lead to the invalidity of the whole agreement.
+          </p>
+          <p>
+            <strong><u>The Privacy Policy</u></strong> is an inseparable part of the present
+            <strong>TERMS</strong> and should be considered as a complementary document with
+            compulsory character. Unless explicitly stated otherwise in the
+            <strong>Privacy Policy</strong>, all rules from the <strong>TERMS</strong> apply
+            respectively.
+          </p>
+          <p>
+            For more information regarding our Services and the present <strong>TERMS</strong>, please
+            do not hesitate to contact the <strong>Superhero</strong> team at:
+            <LinkButton :href="`mailto:${CONTACT_EMAIL}`">{{ CONTACT_EMAIL }}</LinkButton>.
+          </p>
+        </div>
+      </AccordionItem>
+    </div>
+
+    <BackToTop />
+  </PageWrapper>
 </template>
 
 <script lang="ts">
-import { IonPage, IonContent } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import {
   APP_LINK_WEB,
@@ -859,16 +859,17 @@ import {
   AGGREGATOR_URL,
   CONTACT_EMAIL,
 } from '@/constants';
+
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import AccordionItem from '../components/AccordionItem.vue';
 import LinkButton from '../components/LinkButton.vue';
 import BackToTop from '../components/BackToTop.vue';
 
 export default defineComponent({
   components: {
+    PageWrapper,
     AccordionItem,
     LinkButton,
-    IonPage,
-    IonContent,
     BackToTop,
   },
   setup() {
diff --git a/src/popup/pages/TipsClaim.vue b/src/popup/pages/TipsClaim.vue
index 6f1aa8f60..02f72054e 100644
--- a/src/popup/pages/TipsClaim.vue
+++ b/src/popup/pages/TipsClaim.vue
@@ -1,45 +1,43 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="tips-claim">
-        <AccountInfo
-          :account="activeAccount"
-        />
-
-        <div class="header">
-          <p class="text-description">
-            {{ $t('pages.claimTips.header') }}
-          </p>
-
-          <BtnHelp
-            class="help-button"
-            :title="$t('modals.verify.title')"
-            :msg="$t('modals.verify.msg')"
-            :option="{
-              attrs: {
-                href: AE_BLOG_CLAIM_TIP_URL,
-                target: '_blank',
-              },
-            }"
-            icon="success"
-          />
-        </div>
-
-        <InputField
-          v-model="tipUrl"
-          :label="$t('pages.claimTips.urlToClaim')"
-          :error="!normalizedUrl"
-        />
-
-        <BtnMain
-          :disabled="!normalizedUrl || !isTippingSupported"
-          :text="$t('common.confirm')"
-          extend
-          @click="handleClaimTips()"
+  <PageWrapper :page-title="$t('pages.claimTips.title')">
+    <div class="tips-claim">
+      <AccountInfo
+        :account="activeAccount"
+      />
+
+      <div class="header">
+        <p class="text-description">
+          {{ $t('pages.claimTips.header') }}
+        </p>
+
+        <BtnHelp
+          class="help-button"
+          :title="$t('modals.verify.title')"
+          :msg="$t('modals.verify.msg')"
+          :option="{
+            attrs: {
+              href: AE_BLOG_CLAIM_TIP_URL,
+              target: '_blank',
+            },
+          }"
+          icon="success"
         />
       </div>
-    </IonContent>
-  </IonPage>
+
+      <InputField
+        v-model="tipUrl"
+        :label="$t('pages.claimTips.urlToClaim')"
+        :error="!normalizedUrl"
+      />
+
+      <BtnMain
+        :disabled="!normalizedUrl || !isTippingSupported"
+        :text="$t('common.confirm')"
+        extend
+        @click="handleClaimTips()"
+      />
+    </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts">
@@ -51,7 +49,6 @@ import {
 } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { IonContent, IonPage } from '@ionic/vue';
 import { isUrlValid, toURL } from '@/utils';
 import { IS_EXTENSION, MODAL_CLAIM_SUCCESS } from '@/constants';
 import {
@@ -67,6 +64,7 @@ import { AE_BLOG_CLAIM_TIP_URL } from '@/protocols/aeternity/config';
 import { aettosToAe } from '@/protocols/aeternity/helpers';
 import { useAeTippingBackend } from '@/protocols/aeternity/composables';
 
+import PageWrapper from '@/popup/components/PageWrapper.vue';
 import InputField from '../components/InputField.vue';
 import BtnMain from '../components/buttons/BtnMain.vue';
 import BtnHelp from '../components/buttons/BtnHelp.vue';
@@ -75,12 +73,11 @@ import AccountInfo from '../components/AccountInfo.vue';
 export default defineComponent({
   name: 'TipsClaim',
   components: {
+    PageWrapper,
     InputField,
     BtnMain,
     BtnHelp,
     AccountInfo,
-    IonPage,
-    IonContent,
   },
   setup() {
     const { t } = useI18n();
diff --git a/src/popup/router/routes.ts b/src/popup/router/routes.ts
index ccfda7101..c4416023f 100644
--- a/src/popup/router/routes.ts
+++ b/src/popup/router/routes.ts
@@ -125,84 +125,75 @@ export const routes: WalletAppRouteConfig[] = [
     name: ROUTE_INDEX,
     component: Index,
     meta: {
-      title: '',
       hideHeader: true,
       ifNotAuthOnly: true,
       notPersist: true,
     },
   },
   {
-    path: '/',
-    component: DefaultPagesRouter,
-    redirect: { name: ROUTE_ACCOUNT },
+    path: '/account',
+    name: ROUTE_ACCOUNT,
+    component: Dashboard,
+  },
+  {
+    path: '/account-details',
+    component: ProtocolSpecificView,
+    props: { viewComponentName: PROTOCOL_VIEW_ACCOUNT_DETAILS },
     children: [
       {
-        path: 'account',
-        name: ROUTE_ACCOUNT,
-        component: Dashboard,
+        path: '',
+        name: ROUTE_ACCOUNT_DETAILS,
+        component: AccountDetailsTransactions,
+        meta: {
+          showFilterBar: true,
+        },
+      },
+      {
+        path: 'assets',
+        name: ROUTE_ACCOUNT_DETAILS_ASSETS,
+        component: ProtocolSpecificView,
+        props: { viewComponentName: PROTOCOL_VIEW_ACCOUNT_DETAILS_ASSETS },
+        meta: {
+          redirectIfNull: ROUTE_ACCOUNT_DETAILS,
+          showFilterBar: true,
+          hideHeader: true,
+          hideFilterButton: true,
+        },
       },
       {
-        path: 'account-details/',
+        path: 'names',
         component: ProtocolSpecificView,
-        props: { viewComponentName: PROTOCOL_VIEW_ACCOUNT_DETAILS },
+        props: { viewComponentName: PROTOCOL_VIEW_ACCOUNT_DETAILS_NAMES },
+        meta: {
+          redirectIfNull: ROUTE_ACCOUNT_DETAILS,
+        },
         children: [
           {
-            path: 'assets',
-            name: ROUTE_ACCOUNT_DETAILS_ASSETS,
-            component: ProtocolSpecificView,
-            props: { viewComponentName: PROTOCOL_VIEW_ACCOUNT_DETAILS_ASSETS },
+            path: '',
+            name: ROUTE_ACCOUNT_DETAILS_NAMES,
+            component: NamesList,
+            props: true,
             meta: {
-              redirectIfNull: ROUTE_ACCOUNT_DETAILS,
-              showFilterBar: true,
               hideHeader: true,
-              hideFilterButton: true,
             },
           },
           {
-            path: '',
-            name: ROUTE_ACCOUNT_DETAILS,
-            component: AccountDetailsTransactions,
+            path: 'auctions',
+            component: AuctionList,
+            props: true,
+            name: ROUTE_ACCOUNT_DETAILS_NAMES_AUCTIONS,
             meta: {
               hideHeader: true,
-              showFilterBar: true,
             },
           },
           {
-            path: 'names',
-            component: ProtocolSpecificView,
-            props: { viewComponentName: PROTOCOL_VIEW_ACCOUNT_DETAILS_NAMES },
+            path: 'claim',
+            component: NameClaim,
+            props: true,
+            name: ROUTE_ACCOUNT_DETAILS_NAMES_CLAIM,
             meta: {
-              redirectIfNull: ROUTE_ACCOUNT_DETAILS,
+              hideHeader: true,
             },
-            children: [
-              {
-                path: '',
-                name: ROUTE_ACCOUNT_DETAILS_NAMES,
-                component: NamesList,
-                props: true,
-                meta: {
-                  hideHeader: true,
-                },
-              },
-              {
-                path: 'auctions',
-                component: AuctionList,
-                props: true,
-                name: ROUTE_ACCOUNT_DETAILS_NAMES_AUCTIONS,
-                meta: {
-                  hideHeader: true,
-                },
-              },
-              {
-                path: 'claim',
-                component: NameClaim,
-                props: true,
-                name: ROUTE_ACCOUNT_DETAILS_NAMES_CLAIM,
-                meta: {
-                  hideHeader: true,
-                },
-              },
-            ],
           },
         ],
       },
@@ -214,8 +205,6 @@ export const routes: WalletAppRouteConfig[] = [
     component: ProtocolSpecificView,
     props: { viewComponentName: PROTOCOL_VIEW_TRANSACTION_DETAILS },
     meta: {
-      title: 'txDetails',
-      showHeaderNavigation: true,
       backRoute: { name: ROUTE_ACCOUNT_DETAILS },
     },
   },
@@ -271,8 +260,6 @@ export const routes: WalletAppRouteConfig[] = [
         component: TransactionDetails,
         props: { multisigDashboard: true },
         meta: {
-          title: 'txDetails',
-          showHeaderNavigation: true,
           backRoute: { name: ROUTE_MULTISIG_DETAILS },
         },
       },
@@ -282,9 +269,7 @@ export const routes: WalletAppRouteConfig[] = [
         component: MultisigProposalDetails,
         props: true,
         meta: {
-          title: 'multisigProposalDetails',
           backRoute: { name: ROUTE_MULTISIG_DETAILS },
-          showHeaderNavigation: true,
         },
       },
       {
@@ -311,9 +296,7 @@ export const routes: WalletAppRouteConfig[] = [
             component: AccountDetailsMultisigTransactions,
             props: true,
             meta: {
-              title: 'coinDetails',
               backRoute: { name: ROUTE_MULTISIG_DETAILS_ASSETS },
-              showHeaderNavigation: true,
               showFilterBar: true,
               hideSearchBar: true,
               isMultisig: true,
@@ -325,9 +308,7 @@ export const routes: WalletAppRouteConfig[] = [
             component: AssetDetailsInfo,
             props: true,
             meta: {
-              title: 'coinDetails',
               backRoute: { name: ROUTE_MULTISIG_DETAILS_ASSETS },
-              showHeaderNavigation: true,
               isMultisig: true,
             },
           },
@@ -397,138 +378,80 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/more/settings',
     name: 'settings',
     component: Settings,
-    meta: {
-      title: 'settings',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/reset-wallet',
     name: 'settings-reset-wallet',
     component: ResetWallet,
-    meta: {
-      title: 'resetWallet',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/errors-log',
     name: 'settings-errors-log',
     component: ErrorLogSettings,
-    meta: {
-      title: 'saveErrorsLog',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/language',
     name: 'settings-language',
     component: LanguageSettings,
-    meta: {
-      title: 'language',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/currency',
     name: 'settings-currency',
     component: CurrencySettings,
-    meta: {
-      title: 'currency',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/seed-phrase',
     name: ROUTE_SEED_PHRASE_SETTINGS,
     component: SeedPhraseSettings,
-    meta: {
-      title: 'seedPhrase',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/seed-phrase/details',
     name: ROUTE_SEED_PHRASE_DETAILS,
     component: SeedPhraseDetailsSettings,
-    meta: {
-      title: 'seedPhrase',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/seed-phrase/details/verify',
     name: ROUTE_SEED_PHRASE_VERIFY,
     component: SeedPhraseVerifySettings,
-    meta: {
-      title: 'seedPhrase',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/secure-login',
     component: SecureLoginSettings,
     name: ROUTE_SECURE_LOGIN_SETTINGS,
-    meta: {
-      title: 'secureLogin',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/networks',
     name: ROUTE_NETWORK_SETTINGS,
     component: Networks,
     props: true,
-    meta: {
-      title: 'networks',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/networks/add',
     name: ROUTE_NETWORK_ADD,
     component: NetworkForm,
     props: true,
-    meta: {
-      title: 'networkAdd',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/networks/:name',
     name: ROUTE_NETWORK_EDIT,
     component: NetworkForm,
     props: true,
-    meta: {
-      title: 'networkEdit',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/permissions',
     component: PermissionsSettings,
     name: ROUTE_PERMISSIONS_SETTINGS,
-    meta: {
-      title: 'permissionsSettings',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/permissions/add',
     component: PermissionManager,
     name: ROUTE_PERMISSIONS_ADD,
-    meta: {
-      title: 'permissionsAdd',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/permissions/:host',
     component: PermissionManager,
     name: ROUTE_PERMISSIONS_DETAILS,
     meta: {
-      title: 'permissionsEdit',
-      showHeaderNavigation: true,
       isEdit: true,
     },
   },
@@ -536,18 +459,12 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/more/about',
     component: About,
     name: 'about',
-    meta: {
-      title: 'about',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/about/terms',
     component: TermsOfService,
     name: 'about-terms',
     meta: {
-      title: 'terms',
-      showHeaderNavigation: true,
       showScrollbar: true,
       ifNotAuth: true,
     },
@@ -557,9 +474,7 @@ export const routes: WalletAppRouteConfig[] = [
     component: PrivacyPolicy,
     name: 'about-privacy',
     meta: {
-      title: 'privacy',
       ifNotAuth: true,
-      showHeaderNavigation: true,
       showScrollbar: true,
     },
   },
@@ -567,10 +482,6 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/more/tips-claim',
     name: 'tips-claim',
     component: TipsClaim,
-    meta: {
-      title: 'claimTips',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/tips',
@@ -580,46 +491,30 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/retip',
     component: Retip,
     meta: {
-      title: 'sendTip',
       notPersist: true,
-      showHeaderNavigation: true,
     },
   },
   {
     path: '/more',
     component: More,
     name: 'more',
-    meta: {
-      title: 'more',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/invite',
     name: ROUTE_INVITE,
     component: Invite,
-    meta: {
-      title: 'giftCards',
-      showHeaderNavigation: true,
-    },
   },
   {
     path: '/more/settings/notifications',
     name: 'notification-settings',
     component: NotificationSettings,
-    meta: {
-      title: 'notifications',
-      showHeaderNavigation: true,
-    },
   },
   {
     name: ROUTE_ADDRESS_BOOK,
     path: '/more/address-book',
     component: AddressBook,
     meta: {
-      title: 'addressBook',
       notPersist: true,
-      showHeaderNavigation: true,
     },
   },
   {
@@ -627,19 +522,13 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/more/address-book/add',
     component: AddressBookForm,
     props: true,
-    meta: {
-      title: 'addressBookAdd',
-      showHeaderNavigation: true,
-    },
   },
   {
     name: ROUTE_ADDRESS_BOOK_EDIT,
     path: '/more/address-book/:id',
     component: AddressBookForm,
     meta: {
-      title: 'addressBookEdit',
       notPersist: true,
-      showHeaderNavigation: true,
     },
   },
   {
@@ -652,10 +541,6 @@ export const routes: WalletAppRouteConfig[] = [
         component: AuctionBid,
         props: true,
         name: ROUTE_AUCTION_BID,
-        meta: {
-          title: 'auction',
-          showHeaderNavigation: true,
-        },
       },
       {
         path: 'history',
@@ -663,9 +548,7 @@ export const routes: WalletAppRouteConfig[] = [
         props: true,
         name: ROUTE_AUCTION_HISTORY,
         meta: {
-          title: 'auction',
           backRoute: { name: ROUTE_ACCOUNT_DETAILS_NAMES_AUCTIONS },
-          showHeaderNavigation: true,
         },
       },
     ],
@@ -674,9 +557,7 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/comment',
     component: CommentNew,
     meta: {
-      title: 'commentNew',
       notPersist: true,
-      showHeaderNavigation: true,
     },
   },
   {
@@ -685,7 +566,6 @@ export const routes: WalletAppRouteConfig[] = [
     component: DonateError,
     props: true,
     meta: {
-      title: 'donateError',
       notPersist: true,
       ifNotAuth: true,
     },
@@ -695,7 +575,6 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/address',
     component: Address,
     meta: {
-      title: 'address',
       notPersist: true,
       hideHeader: true,
     },
@@ -718,9 +597,7 @@ export const routes: WalletAppRouteConfig[] = [
         component: AssetDetailsTransactions,
         props: true,
         meta: {
-          title: 'coinDetails',
           backRoute: { name: ROUTE_ACCOUNT_DETAILS_ASSETS },
-          showHeaderNavigation: true,
           showFilterBar: true,
           hideSearchBar: true,
         },
@@ -731,9 +608,7 @@ export const routes: WalletAppRouteConfig[] = [
         component: AssetDetailsInfo,
         props: true,
         meta: {
-          title: 'coinDetails',
           backRoute: { name: ROUTE_ACCOUNT_DETAILS_ASSETS },
-          showHeaderNavigation: true,
         },
       },
     ],
@@ -756,9 +631,7 @@ export const routes: WalletAppRouteConfig[] = [
         component: AssetDetailsTransactions,
         props: true,
         meta: {
-          title: 'tokenDetails',
           backRoute: { name: ROUTE_ACCOUNT_DETAILS_ASSETS },
-          showHeaderNavigation: true,
           showFilterBar: true,
           hideSearchBar: true,
         },
@@ -769,9 +642,7 @@ export const routes: WalletAppRouteConfig[] = [
         component: AssetDetailsInfo,
         props: true,
         meta: {
-          title: 'tokenDetails',
           backRoute: { name: ROUTE_ACCOUNT_DETAILS_ASSETS },
-          showHeaderNavigation: true,
         },
       },
     ],
@@ -781,7 +652,6 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/sign-message',
     component: SignMessage,
     meta: {
-      title: 'signMessage',
       notPersist: true,
       hideHeader: true,
     },
@@ -791,7 +661,6 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/sign-transaction',
     component: SignTransaction,
     meta: {
-      title: 'signTransaction',
       notPersist: true,
       hideHeader: true,
     },
@@ -801,7 +670,6 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/sign-jwt',
     component: JwtSign,
     meta: {
-      title: 'signMessage',
       notPersist: true,
       hideHeader: true,
     },
@@ -811,7 +679,6 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/apps-browser',
     component: AppsBrowser,
     meta: {
-      title: 'appsBrowser',
       hideHeader: true,
       notPersist: true,
     },
@@ -822,7 +689,6 @@ export const routes: WalletAppRouteConfig[] = [
     component: InviteClaim,
     props: true,
     meta: {
-      title: 'invite',
       notPersist: true,
     },
   },
@@ -831,8 +697,6 @@ export const routes: WalletAppRouteConfig[] = [
     path: '/notifications',
     component: Notifications,
     meta: {
-      title: 'notifications',
-      showHeaderNavigation: true,
       notPersist: true,
     },
   },
@@ -844,8 +708,6 @@ export const routes: WalletAppRouteConfig[] = [
     meta: {
       ifNotAuth: true,
       notPersist: true,
-      showHeaderNavigation: true,
-      title: 'notFound',
     },
   },
   {
@@ -855,8 +717,6 @@ export const routes: WalletAppRouteConfig[] = [
     meta: {
       ifNotAuth: true,
       notPersist: true,
-      showHeaderNavigation: true,
-      title: 'notFound',
     },
   },
 ];
diff --git a/src/protocols/aeternity/views/AccountDetails.vue b/src/protocols/aeternity/views/AccountDetails.vue
index f80b2c38b..40a01af20 100644
--- a/src/protocols/aeternity/views/AccountDetails.vue
+++ b/src/protocols/aeternity/views/AccountDetails.vue
@@ -1,44 +1,39 @@
 <template>
-  <IonPage>
-    <IonContent class="account-ion-content">
-      <AccountDetailsBase
-        v-if="pageDidEnter"
-        class="account-details"
-      >
-        <template #buttons>
-          <BtnBox
-            v-if="IS_MOBILE_APP && (isNodeMainnet || isNodeTestnet) || UNFINISHED_FEATURES"
-            :icon="GlobeSmallIcon"
-            :text="$t('common.browser')"
-            :to="{ name: ROUTE_APPS_BROWSER }"
-          />
-          <BtnBox
-            v-if="isNodeMainnet && UNFINISHED_FEATURES"
-            :icon="CreditCardIcon"
-            :text="$t('common.buy')"
-            :href="activeAccountSimplexLink"
-            :disabled="!isOnline"
-          />
-          <BtnBox
-            v-if="isNodeTestnet"
-            :icon="FaucetIcon"
-            :text="$t('common.faucet')"
-            :href="activeAccountFaucetUrl"
-          />
-        </template>
+  <AccountDetailsBase
+    class="account-details-aeternity"
+  >
+    <template #buttons>
+      <BtnBox
+        v-if="IS_MOBILE_APP && (isNodeMainnet || isNodeTestnet) || UNFINISHED_FEATURES"
+        :icon="GlobeSmallIcon"
+        :text="$t('common.browser')"
+        :to="{ name: ROUTE_APPS_BROWSER }"
+      />
+      <BtnBox
+        v-if="isNodeMainnet && UNFINISHED_FEATURES"
+        :icon="CreditCardIcon"
+        :text="$t('common.buy')"
+        :href="activeAccountSimplexLink"
+        :disabled="!isOnline"
+      />
+      <BtnBox
+        v-if="isNodeTestnet"
+        :icon="FaucetIcon"
+        :text="$t('common.faucet')"
+        :href="activeAccountFaucetUrl"
+      />
+    </template>
 
-        <template #navigation>
-          <AccountDetailsNavigation
-            :route-names="[
-              ROUTE_ACCOUNT_DETAILS,
-              ROUTE_ACCOUNT_DETAILS_ASSETS,
-              ROUTE_ACCOUNT_DETAILS_NAMES,
-            ]"
-          />
-        </template>
-      </AccountDetailsBase>
-    </IonContent>
-  </IonPage>
+    <template #navigation>
+      <AccountDetailsNavigation
+        :route-names="[
+          ROUTE_ACCOUNT_DETAILS,
+          ROUTE_ACCOUNT_DETAILS_ASSETS,
+          ROUTE_ACCOUNT_DETAILS_NAMES,
+        ]"
+      />
+    </template>
+  </AccountDetailsBase>
 </template>
 
 <script lang="ts">
@@ -46,7 +41,6 @@ import {
   computed,
   defineComponent,
 } from 'vue';
-import { IonContent, IonPage } from '@ionic/vue';
 import {
   IS_MOBILE_APP,
   IS_IOS,
@@ -82,11 +76,6 @@ export default defineComponent({
     BtnBox,
     AccountDetailsNavigation,
     AccountDetailsBase,
-    IonPage,
-    IonContent,
-  },
-  props: {
-    pageDidEnter: Boolean,
   },
   setup() {
     const { isOnline } = useConnection();
@@ -119,12 +108,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-@use '@/styles/variables' as *;
-
-.account-ion-content {
-  overflow: hidden;
-  background-color: $color-bg-4;
-}
-</style>
diff --git a/src/protocols/aeternity/views/TransactionDetails.vue b/src/protocols/aeternity/views/TransactionDetails.vue
index 3891b99de..2e9cb68a4 100644
--- a/src/protocols/aeternity/views/TransactionDetails.vue
+++ b/src/protocols/aeternity/views/TransactionDetails.vue
@@ -1,166 +1,162 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="transaction-details">
-        <template v-if="transaction && !transaction.incomplete">
-          <TransactionDetailsBase
-            :transaction="transaction"
-            :amount="amount"
-            :amount-total="amountTotal"
-            :fee="transactionFee"
-            :is-error-transaction="isErrorTransaction"
-            :payload="getTransactionPayload(transaction)!"
-            :show-header="!isDexAllowance"
-            :hide-amount-total="(
-              isDex
-              || isDexAllowance
-              || isAex9
-            )"
-            :hide-fiat="isAex9"
-            :hash="hash"
+  <div class="transaction-details">
+    <template v-if="transaction && !transaction.incomplete">
+      <TransactionDetailsBase
+        :transaction="transaction"
+        :amount="amount"
+        :amount-total="amountTotal"
+        :fee="transactionFee"
+        :is-error-transaction="isErrorTransaction"
+        :payload="getTransactionPayload(transaction)!"
+        :show-header="!isDexAllowance"
+        :hide-amount-total="(
+          isDex
+          || isDexAllowance
+          || isAex9
+        )"
+        :hide-fiat="isAex9"
+        :hash="hash"
+        :protocol="PROTOCOLS.aeternity"
+      >
+        <template #tokens>
+          <TransactionAssetRows
+            :assets="transactionAssets"
+            :error="isErrorTransaction"
+            :is-reversed="isDexPool"
             :protocol="PROTOCOLS.aeternity"
-          >
-            <template #tokens>
-              <TransactionAssetRows
-                :assets="transactionAssets"
-                :error="isErrorTransaction"
-                :is-reversed="isDexPool"
-                :protocol="PROTOCOLS.aeternity"
-                icon-size="rg"
-                multiple-rows
-              />
-            </template>
+            icon-size="rg"
+            multiple-rows
+          />
+        </template>
+
+        <template
+          v-if="isDexSwap"
+          #swap-data
+        >
+          <SwapRates :transaction="transaction" />
+          <SwapRoute :transaction="transaction" />
+        </template>
 
-            <template
-              v-if="isDexSwap"
-              #swap-data
-            >
-              <SwapRates :transaction="transaction" />
-              <SwapRoute :transaction="transaction" />
+        <template #additional-content>
+          <TransactionDetailsPoolTokens
+            v-if="(isDexPool || isDexAllowance)"
+            :transaction="transaction"
+            :tokens="transactionAssets"
+            :reversed="isDexPool"
+          />
+
+          <DetailsItem
+            v-if="tipUrl"
+            :label="$t('pages.transactionDetails.tipUrl')"
+            class="tip-url"
+            data-cy="tip-url"
+          >
+            <template #value>
+              <CopyText :value="tipUrl">
+                <LinkButton :href="tipLink">
+                  <Truncate
+                    :str="tipUrl"
+                    fixed
+                  />
+                </LinkButton>
+              </CopyText>
             </template>
+          </DetailsItem>
+        </template>
 
-            <template #additional-content>
-              <TransactionDetailsPoolTokens
-                v-if="(isDexPool || isDexAllowance)"
-                :transaction="transaction"
-                :tokens="transactionAssets"
-                :reversed="isDexPool"
+        <template #multisig-content>
+          <DetailsItem
+            v-if="multisigTransactionFeePaidBy"
+            :label="$t('pages.transactionDetails.feePaidBy')"
+            small
+          >
+            <div class="row payer-id">
+              <Avatar
+                :address="multisigTransactionFeePaidBy"
+                size="sm"
               />
-
-              <DetailsItem
-                v-if="tipUrl"
-                :label="$t('pages.transactionDetails.tipUrl')"
-                class="tip-url"
-                data-cy="tip-url"
+              <div>
+                <DialogBox
+                  v-if="isLocalAccountAddress(multisigTransactionFeePaidBy)"
+                  class="dialog-box"
+                  dense
+                  position="bottom"
+                >
+                  {{ $t('common.you') }}
+                </DialogBox>
+                <CopyText
+                  hide-icon
+                  :value="multisigTransactionFeePaidBy"
+                  :copied-text="$t('common.addressCopied')"
+                >
+                  <span class="text-address">
+                    {{ splitAddress(multisigTransactionFeePaidBy) }}
+                  </span>
+                </CopyText>
+              </div>
+            </div>
+          </DetailsItem>
+
+          <DetailsItem
+            v-if="multisigContractId"
+            :label="$t('pages.transactionDetails.vaultContractId')"
+            small
+          >
+            <div class="row">
+              <Avatar
+                :address="multisigContractId"
+                size="sm"
+              />
+              <CopyText
+                hide-icon
+                :value="multisigContractId"
+                :copied-text="$t('common.addressCopied')"
               >
-                <template #value>
-                  <CopyText :value="tipUrl">
-                    <LinkButton :href="tipLink">
-                      <Truncate
-                        :str="tipUrl"
-                        fixed
-                      />
-                    </LinkButton>
-                  </CopyText>
-                </template>
-              </DetailsItem>
-            </template>
+                <span class="text-address">
+                  {{ splitAddress(multisigContractId) }}
+                </span>
+              </CopyText>
+            </div>
+          </DetailsItem>
+        </template>
 
-            <template #multisig-content>
-              <DetailsItem
-                v-if="multisigTransactionFeePaidBy"
-                :label="$t('pages.transactionDetails.feePaidBy')"
-                small
-              >
-                <div class="row payer-id">
-                  <Avatar
-                    :address="multisigTransactionFeePaidBy"
-                    size="sm"
-                  />
-                  <div>
-                    <DialogBox
-                      v-if="isLocalAccountAddress(multisigTransactionFeePaidBy)"
-                      class="dialog-box"
-                      dense
-                      position="bottom"
-                    >
-                      {{ $t('common.you') }}
-                    </DialogBox>
-                    <CopyText
-                      hide-icon
-                      :value="multisigTransactionFeePaidBy"
-                      :copied-text="$t('common.addressCopied')"
-                    >
-                      <span class="text-address">
-                        {{ splitAddress(multisigTransactionFeePaidBy) }}
-                      </span>
-                    </CopyText>
-                  </div>
-                </div>
-              </DetailsItem>
-
-              <DetailsItem
-                v-if="multisigContractId"
-                :label="$t('pages.transactionDetails.vaultContractId')"
-                small
-              >
-                <div class="row">
-                  <Avatar
-                    :address="multisigContractId"
-                    size="sm"
-                  />
-                  <CopyText
-                    hide-icon
-                    :value="multisigContractId"
-                    :copied-text="$t('common.addressCopied')"
-                  >
-                    <span class="text-address">
-                      {{ splitAddress(multisigContractId) }}
-                    </span>
-                  </CopyText>
-                </div>
-              </DetailsItem>
+        <template #gas>
+          <DetailsItem
+            v-if="gasUsed"
+            :value="gasUsed"
+            :label="$t('pages.transactionDetails.gasUsed')"
+            data-cy="gas"
+          />
+          <DetailsItem
+            v-if="gasPrice"
+            :label="$t('pages.transactionDetails.gasPrice')"
+            data-cy="gas-price"
+          >
+            <template #value>
+              <TokenAmount
+                :amount="+aettosToAe(gasPrice)"
+                :symbol="AE_SYMBOL"
+                :protocol="PROTOCOLS.aeternity"
+              />
             </template>
-
-            <template #gas>
-              <DetailsItem
-                v-if="gasUsed"
-                :value="gasUsed"
-                :label="$t('pages.transactionDetails.gasUsed')"
-                data-cy="gas"
+          </DetailsItem>
+          <DetailsItem
+            v-if="gasCost"
+            :label="$t('transaction.gasCost')"
+            data-cy="gas-price"
+          >
+            <template #value>
+              <TokenAmount
+                :amount="+aettosToAe(gasCost)"
+                :symbol="AE_SYMBOL"
+                :protocol="PROTOCOLS.aeternity"
               />
-              <DetailsItem
-                v-if="gasPrice"
-                :label="$t('pages.transactionDetails.gasPrice')"
-                data-cy="gas-price"
-              >
-                <template #value>
-                  <TokenAmount
-                    :amount="+aettosToAe(gasPrice)"
-                    :symbol="AE_SYMBOL"
-                    :protocol="PROTOCOLS.aeternity"
-                  />
-                </template>
-              </DetailsItem>
-              <DetailsItem
-                v-if="gasCost"
-                :label="$t('transaction.gasCost')"
-                data-cy="gas-price"
-              >
-                <template #value>
-                  <TokenAmount
-                    :amount="+aettosToAe(gasCost)"
-                    :symbol="AE_SYMBOL"
-                    :protocol="PROTOCOLS.aeternity"
-                  />
-                </template>
-              </DetailsItem>
             </template>
-          </TransactionDetailsBase>
+          </DetailsItem>
         </template>
-      </div>
-    </IonContent>
-  </IonPage>
+      </TransactionDetailsBase>
+    </template>
+  </div>
 </template>
 
 <script lang="ts">
@@ -174,7 +170,6 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { Encoded, Tag } from '@aeternity/aepp-sdk';
-import { IonContent, IonPage } from '@ionic/vue';
 
 import type { ITransaction, ITx } from '@/types';
 import { PROTOCOLS, TX_DIRECTION } from '@/constants';
@@ -229,13 +224,13 @@ export default defineComponent({
     CopyText,
     LinkButton,
     Truncate,
-    IonContent,
-    IonPage,
   },
   props: {
     multisigDashboard: Boolean,
   },
   setup(props) {
+    console.log('Tx Details: Setup');
+
     const router = useRouter();
     const route = useRoute();
 
@@ -324,6 +319,8 @@ export default defineComponent({
     });
 
     onMounted(async () => {
+      console.log('Tx Details: Mounted');
+
       let rawTransaction: ITransaction | undefined = transactionsLoaded.value
         .find((tx) => tx.hash === hash) as ITransaction;
 
diff --git a/src/protocols/bitcoin/views/AccountDetails.vue b/src/protocols/bitcoin/views/AccountDetails.vue
index a15408b05..af8b554ce 100644
--- a/src/protocols/bitcoin/views/AccountDetails.vue
+++ b/src/protocols/bitcoin/views/AccountDetails.vue
@@ -1,40 +1,19 @@
 <template>
-  <IonPage>
-    <IonContent class="account-ion-content">
-      <AccountDetailsBase
-        v-if="pageDidEnter"
-        class="account-details"
-      />
-    </IonContent>
-  </IonPage>
+  <AccountDetailsBase
+    class="account-details-bitcoin"
+  />
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-} from 'vue';
-import { IonContent, IonPage } from '@ionic/vue';
+import { defineComponent } from 'vue';
 import { PROTOCOL_VIEW_ACCOUNT_DETAILS } from '@/constants';
+
 import AccountDetailsBase from '@/popup/components/AccountDetailsBase.vue';
 
 export default defineComponent({
   name: PROTOCOL_VIEW_ACCOUNT_DETAILS,
   components: {
     AccountDetailsBase,
-    IonPage,
-    IonContent,
-  },
-  props: {
-    pageDidEnter: Boolean,
   },
 });
 </script>
-
-<style lang="scss" scoped>
-@use '@/styles/variables' as *;
-
-.account-ion-content {
-  overflow: hidden;
-  background-color: $color-bg-4;
-}
-</style>
diff --git a/src/protocols/bitcoin/views/TransactionDetails.vue b/src/protocols/bitcoin/views/TransactionDetails.vue
index 3d2ea531d..4b0c2d263 100644
--- a/src/protocols/bitcoin/views/TransactionDetails.vue
+++ b/src/protocols/bitcoin/views/TransactionDetails.vue
@@ -1,31 +1,27 @@
 <template>
-  <IonPage>
-    <IonContent class="ion-padding ion-content-bg">
-      <div class="transaction-details">
-        <template v-if="transaction">
-          <TransactionDetailsBase
-            :transaction="transaction"
-            :amount="amount"
-            :amount-total="amountTotal"
-            :fee="fee"
-            :hash="hash"
+  <div class="transaction-details">
+    <template v-if="transaction">
+      <TransactionDetailsBase
+        :transaction="transaction"
+        :amount="amount"
+        :amount-total="amountTotal"
+        :fee="fee"
+        :hash="hash"
+        :protocol="PROTOCOLS.bitcoin"
+        show-header
+      >
+        <template #tokens>
+          <TransactionAssetRows
+            :assets="assets"
+            :is-rounded="!!assets"
             :protocol="PROTOCOLS.bitcoin"
-            show-header
-          >
-            <template #tokens>
-              <TransactionAssetRows
-                :assets="assets"
-                :is-rounded="!!assets"
-                :protocol="PROTOCOLS.bitcoin"
-                icon-size="rg"
-                multiple-rows
-              />
-            </template>
-          </TransactionDetailsBase>
+            icon-size="rg"
+            multiple-rows
+          />
         </template>
-      </div>
-    </IonContent>
-  </IonPage>
+      </TransactionDetailsBase>
+    </template>
+  </div>
 </template>
 
 <script lang="ts">
@@ -37,7 +33,6 @@ import {
   watch,
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { IonContent, IonPage } from '@ionic/vue';
 
 import type { ITokenResolved, ITransaction } from '@/types';
 import { TX_DIRECTION, PROTOCOLS } from '@/constants';
@@ -54,8 +49,6 @@ export default defineComponent({
   components: {
     TransactionDetailsBase,
     TransactionAssetRows,
-    IonContent,
-    IonPage,
   },
   setup() {
     const router = useRouter();
diff --git a/src/protocols/ethereum/views/AccountDetails.vue b/src/protocols/ethereum/views/AccountDetails.vue
index 8287d3e55..9cb420dd8 100644
--- a/src/protocols/ethereum/views/AccountDetails.vue
+++ b/src/protocols/ethereum/views/AccountDetails.vue
@@ -1,26 +1,20 @@
 <template>
-  <IonPage>
-    <IonContent class="account-ion-content">
-      <AccountDetailsBase
-        v-if="pageDidEnter"
-        class="account-details"
-      >
-        <template #navigation>
-          <AccountDetailsNavigation
-            :route-names="[
-              ROUTE_ACCOUNT_DETAILS,
-              ROUTE_ACCOUNT_DETAILS_ASSETS,
-            ]"
-          />
-        </template>
-      </AccountDetailsBase>
-    </IonContent>
-  </IonPage>
+  <AccountDetailsBase
+    class="account-details-ethereum"
+  >
+    <template #navigation>
+      <AccountDetailsNavigation
+        :route-names="[
+          ROUTE_ACCOUNT_DETAILS,
+          ROUTE_ACCOUNT_DETAILS_ASSETS,
+        ]"
+      />
+    </template>
+  </AccountDetailsBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IonContent, IonPage } from '@ionic/vue';
 import { PROTOCOL_VIEW_ACCOUNT_DETAILS } from '@/constants';
 import { ROUTE_ACCOUNT_DETAILS, ROUTE_ACCOUNT_DETAILS_ASSETS } from '@/popup/router/routeNames';
 
@@ -31,13 +25,8 @@ export default defineComponent({
   name: PROTOCOL_VIEW_ACCOUNT_DETAILS,
   components: {
     AccountDetailsBase,
-    IonPage,
-    IonContent,
     AccountDetailsNavigation,
   },
-  props: {
-    pageDidEnter: Boolean,
-  },
   setup() {
     return {
       ROUTE_ACCOUNT_DETAILS,
@@ -46,12 +35,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-@use '@/styles/variables' as *;
-
-.account-ion-content {
-  overflow: hidden;
-  background-color: $color-bg-4;
-}
-</style>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 40bfbd8c7..a590abe5e 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -112,22 +112,25 @@ body {
   }
 }
 
-ion-content {
-  /** hide scrollbar **/
-  --offset-bottom: auto !important;
-  --overflow: hidden;
+ion-router-outlet {
+  ion-content {
+    /** hide scrollbar **/
+    --offset-bottom: auto !important;
+    --overflow: hidden;
 
-  overflow: auto;
+    overflow: auto;
+    transition: padding-top 10s;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
-  /** remove left-right padding **/
-  &::part(scroll) {
-    --padding-end: 0;
-    --padding-start: 0;
-    --padding-top: 0;
+    /** remove left-right padding **/
+    &::part(scroll) {
+      --padding-end: 0;
+      --padding-start: 0;
+      --padding-top: env(safe-area-inset-top);
+    }
   }
 }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 9814a6724..56409d363 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,6 +1,7 @@
 $extension-width: 360px;
 $extension-height: 600px;
 $phone-width: 480px;
+$header-default-height: 40px;
 
 $border-radius-app: 10px;
 $border-radius-interactive: 10px;
diff --git a/src/types/router.ts b/src/types/router.ts
index 2316dda83..4c6668271 100644
--- a/src/types/router.ts
+++ b/src/types/router.ts
@@ -32,16 +32,6 @@ export interface WalletRouteMeta {
    * See the `RouteLastUsedRoutes` for the reference.
    */
   notPersist?: boolean;
-  /**
-   * Part of the translation string that point to the translated page title
-   * 'pages.title[title]`
-   */
-  title?: string;
-  /**
-   * Decide if the header should display the logo and more button
-   * or the back and close buttons.
-   */
-  showHeaderNavigation?: boolean;
   /**
    * Decide if the header should hide back button
    */