diff --git a/package.json b/package.json
index c302c2124..bbec7f231 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "serve": "yarn pre && yarn vue-cli-service serve --port 8081",
     "build": "yarn pre && yarn vue-cli-service build",
     "lint": "vue-cli-service lint --no-fix",
+    "lint:fix": "vue-cli-service lint",
     "build:bitcoinjs": "yarn --silent browserify bitcoinjs-parts.js -p common-shakeify -s BitcoinJS | yarn terser --compress --mangle --source-map --output public/bitcoin/BitcoinJS.min.js",
     "build:ci": "yarn pre && build=testnet yarn vue-cli-service build",
     "i18n:extract": "node ./node_modules/webpack-i18n-tools/index.js ./src/i18n/en.po",
diff --git a/src/components/AnnouncementBox.vue b/src/components/AnnouncementBox.vue
index 97a806459..032902862 100644
--- a/src/components/AnnouncementBox.vue
+++ b/src/components/AnnouncementBox.vue
@@ -11,6 +11,7 @@
 import { defineComponent, ref } from '@vue/composition-api';
 import { ArrowRightSmallIcon } from '@nimiq/vue-components';
 import { LocaleMessage } from 'vue-i18n';
+import { RouteName } from '@/router';
 import BlueLink from './BlueLink.vue';
 import CrossCloseButton from './CrossCloseButton.vue';
 
@@ -27,7 +28,7 @@ export default defineComponent({
         // text = () => context.root.$t('Buy NIM & BTC with OASIS!');
         text = () => ''; // Disables AnnouncementBox
         cta = () => context.root.$t('Try it now');
-        action = () => context.root.$router.push('buy');
+        action = () => context.root.$router.push({ name: RouteName.Buy });
         storageKey = 'buy-with-oasis-1';
 
         const wasDismissed = ref(window.localStorage.getItem(STORAGE_KEY) === storageKey);
diff --git a/src/components/MobileActionBar.vue b/src/components/MobileActionBar.vue
index 34db4dbe5..1ea89aa60 100644
--- a/src/components/MobileActionBar.vue
+++ b/src/components/MobileActionBar.vue
@@ -9,7 +9,7 @@
         >
             <ArrowRightSmallIcon />{{ $t('Send') }}
         </button>
-        <button class="reset scan-qr" @click="$router.push('/scan')">
+        <button class="reset scan-qr" @click="$router.push({ name: RouteName.Scan })">
             <ScanQrCodeIcon/>
         </button>
     </div>
@@ -19,6 +19,7 @@
 import { defineComponent, computed } from '@vue/composition-api';
 import { ArrowRightSmallIcon, ScanQrCodeIcon } from '@nimiq/vue-components';
 import { useConfig } from '@/composables/useConfig';
+import { RouteName } from '@/router';
 import { AddressType, useAddressStore } from '../stores/Address';
 import { useAccountStore } from '../stores/Account';
 import { CryptoCurrency } from '../lib/Constants';
@@ -58,9 +59,11 @@ export default defineComponent({
                 && (hasMultipleReceivableAddresses.value || hasBitcoinAddresses.value)
             ) {
                 // redirect to the address selector
-                context.root.$router.push('/receive');
+                context.root.$router.push({ name: RouteName.Receive });
             } else {
-                context.root.$router.push(nimOrBtcOrStable('/receive/nim', '/receive/btc', '/receive/usdc'));
+                context.root.$router.push({
+                    name: nimOrBtcOrStable(RouteName.ReceiveNim, RouteName.ReceiveBtc, RouteName.ReceiveUsdc),
+                });
             }
         }
 
@@ -73,9 +76,11 @@ export default defineComponent({
                 && (hasMultipleSendableAddresses.value || hasBitcoinAddresses.value)
             ) {
                 // redirect to the address selector
-                context.root.$router.push('/send');
+                context.root.$router.push({ name: RouteName.Send });
             } else {
-                context.root.$router.push(nimOrBtcOrStable('/send/nim', '/send/btc', '/send/usdc'));
+                context.root.$router.push({
+                    name: nimOrBtcOrStable(RouteName.SendNim, RouteName.SendBtc, RouteName.SendUsdc),
+                });
             }
         }
 
@@ -98,6 +103,7 @@ export default defineComponent({
             receive,
             send,
             sendDisabled,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/WalletStatusButton.vue b/src/components/WalletStatusButton.vue
index d102dc0c2..8d93ca1fa 100644
--- a/src/components/WalletStatusButton.vue
+++ b/src/components/WalletStatusButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button @click="$router.push('/wallet-status')" class="wallet-status-button nq-button-pill">
+    <button @click="$router.push({ name: RouteName.WalletStatus })" class="wallet-status-button nq-button-pill">
         <CircledQuestionMark />
         <span>{{ $t('Help') }}</span>
     </button>
@@ -7,10 +7,16 @@
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
+import { RouteName } from '@/router';
 import CircledQuestionMark from './icons/CircledQuestionMark.vue';
 
 export default defineComponent({
     props: {},
+    setup() {
+        return {
+            RouteName,
+        };
+    },
     components: {
         CircledQuestionMark,
     },
diff --git a/src/components/layouts/AccountOverview.vue b/src/components/layouts/AccountOverview.vue
index 60e88d237..2685fcda3 100644
--- a/src/components/layouts/AccountOverview.vue
+++ b/src/components/layouts/AccountOverview.vue
@@ -33,7 +33,7 @@
                 <MenuIcon/>
                 <AttentionDot v-if="updateAvailable"/>
             </button>
-            <button class="reset consensus" @click="$router.push('/network').catch(() => {})">
+            <button class="reset consensus" @click="$router.push({ name: RouteName.Network }).catch(() => {})">
                 <ConsensusIcon/>
             </button>
         </div>
@@ -150,7 +150,7 @@
                         </div>
                         <button v-else
                             class="nq-button-pill light-blue"
-                            @click.stop="$router.push('/btc-activation')" @mousedown.prevent
+                            @click.stop="$router.push({ name: RouteName.BtcActivation })" @mousedown.prevent
                         >{{ $t('Activate') }}</button>
                     </div>
                 </button>
@@ -264,7 +264,7 @@
                         </div>
                         <button v-else
                             class="nq-button-pill light-blue"
-                            @click.stop="$router.push('/usdc-activation')" @mousedown.prevent
+                            @click.stop="$router.push({ name: RouteName.UsdcActivation })" @mousedown.prevent
                         >{{ $t('Activate') }}</button>
                     </div>
                 </button>
@@ -332,6 +332,7 @@
 import { defineComponent, computed, ref, watch, onMounted, onUnmounted, onActivated } from '@vue/composition-api';
 import { SwapAsset } from '@nimiq/fastspot-api';
 import { ArrowRightSmallIcon, AlertTriangleIcon, CircleSpinner, Tooltip } from '@nimiq/vue-components';
+import router, { RouteName } from '@/router';
 import AccountBalance from '../AccountBalance.vue';
 import AddressList from '../AddressList.vue';
 import BitcoinIcon from '../icons/BitcoinIcon.vue';
@@ -364,7 +365,6 @@ import LinkedDoubleArrowIcon from '../icons/LinkedDoubleArrowIcon.vue';
 import AddressListBackgroundSvg from '../AddressListBackgroundSvg.vue';
 import { useAddressStore } from '../../stores/Address';
 import { useConfig } from '../../composables/useConfig';
-import router from '../../router';
 import { useAccountSettingsStore } from '../../stores/AccountSettings';
 // import { useStakingStore } from '../../stores/Staking';
 // import AccountStake from '../staking/AccountStake.vue';
@@ -604,6 +604,7 @@ export default defineComponent({
             nimAccountBgCutouts,
             onSwapButtonPointerDown,
             isMobile,
+            RouteName,
             // totalAccountStake,
         };
     },
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
index 6433e549e..09d169e16 100644
--- a/src/components/layouts/AddressOverview.vue
+++ b/src/components/layouts/AddressOverview.vue
@@ -35,7 +35,7 @@
                             </button>
                             <button v-if="activeCurrency === CryptoCurrency.NIM"
                                 class="reset flex-row"
-                                @mousedown="$router.push('/staking')"
+                                @mousedown="$router.push({ name: RouteName.Staking })"
                             >
                                 <TwoLeafStakingIcon/>{{ $t('Staking') }}
                             </button>
@@ -47,7 +47,9 @@
                             </button>
                             <button
                                 class="reset flex-row"
-                                @pointerdown="$router.push('/export-history/address')"
+                                @pointerdown="$router.push({
+                                    name: RouteName.ExportHistory, params: { type: address } }
+                                )"
                             >
                                 <BoxedArrowUpIcon />{{ $t('Export History') }}
                             </button>
@@ -93,7 +95,9 @@
                             </button>
                             <button
                                 class="reset flex-row"
-                                @pointerdown="$router.push('/export-history/address')"
+                                @pointerdown="$router.push(
+                                    { name: RouteName.ExportHistory, params: { type: 'address'}}
+                                )"
                             >
                                 <BoxedArrowUpIcon />{{ $t('Export History') }}
                             </button>
@@ -310,6 +314,7 @@ import { BigNumber } from 'ethers';
 import { SignPolygonTransactionRequest } from '@nimiq/hub-api';
 import { RelayRequest } from '@opengsn/common/dist/EIP712/RelayRequest';
 import { ForwardRequest } from '@opengsn/common/dist/EIP712/ForwardRequest';
+import { RouteName } from '@/router';
 
 import BitcoinIcon from '../icons/BitcoinIcon.vue';
 import UsdcIcon from '../icons/UsdcIcon.vue';
@@ -634,6 +639,7 @@ export default defineComponent({
             windowWidth,
             showStakingButton,
             isMobile,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/layouts/Settings.vue b/src/components/layouts/Settings.vue
index adfef1e59..a490b6d6f 100644
--- a/src/components/layouts/Settings.vue
+++ b/src/components/layouts/Settings.vue
@@ -5,7 +5,7 @@
                 <MenuIcon/>
             </button>
 
-            <CrossCloseButton @click="$router.push('/').catch(() => {})"/>
+            <CrossCloseButton @click="$router.push({ name: RouteName.Root }).catch(() => {})"/>
         </div>
 
         <div class="column left-column flex-column">
@@ -293,6 +293,7 @@
 import { defineComponent, ref } from '@vue/composition-api';
 import { CircleSpinner } from '@nimiq/vue-components';
 import { ValidationUtils } from '@nimiq/utils';
+import { RouteName } from '@/router';
 
 import MenuIcon from '../icons/MenuIcon.vue';
 import CrossCloseButton from '../CrossCloseButton.vue';
@@ -453,6 +454,7 @@ export default defineComponent({
             disconnectKyc,
             copyrightYear,
             VERSION: process.env.VERSION,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/AccountMenuModal.vue b/src/components/modals/AccountMenuModal.vue
index 4304a77ae..1071e7622 100644
--- a/src/components/modals/AccountMenuModal.vue
+++ b/src/components/modals/AccountMenuModal.vue
@@ -25,7 +25,9 @@
 
             <button
                 class="item reset flex-row"
-                @mousedown="$router.push('/export-history/account')"
+                @mousedown="$router.push({
+                    name: RouteName.ExportHistory, params: { type: 'account' },
+                })"
             >
                 <BoxedArrowUpIcon />{{ $t('Export History') }}
             </button>
@@ -55,6 +57,7 @@
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import { AlertTriangleIcon } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 
 import AccountMenuItem from '../AccountMenuItem.vue';
 import Modal from './Modal.vue';
@@ -86,9 +89,9 @@ export default defineComponent({
             selectAccount(id);
 
             if (isMobile.value) {
-                context.root.$router.replace('/');
+                context.root.$router.replace({ name: RouteName.Root });
             } else {
-                context.root.$router.push('/').catch(() => { /* ignore */ });
+                context.root.$router.push({ name: RouteName.Root }).catch(() => { /* ignore */ });
             }
         }
 
diff --git a/src/components/modals/BtcActivationModal.vue b/src/components/modals/BtcActivationModal.vue
index 50f7bccd4..2e0b6fdd8 100644
--- a/src/components/modals/BtcActivationModal.vue
+++ b/src/components/modals/BtcActivationModal.vue
@@ -34,6 +34,7 @@
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api';
 import { PageBody } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import Modal from './Modal.vue';
 import BitcoinIcon from '../icons/BitcoinIcon.vue';
 import { activateBitcoin } from '../../hub';
@@ -84,7 +85,7 @@ export default defineComponent({
 
                 if (shouldOpenWelcomeModal) {
                     // Open welcome modal with additional BTC and USDC info if not shown yet.
-                    await context.root.$router.push('/welcome');
+                    await context.root.$router.push({ name: RouteName.Welcome });
                 }
             }
         }
diff --git a/src/components/modals/BtcSendModal.vue b/src/components/modals/BtcSendModal.vue
index a2f49e524..b39f7c226 100644
--- a/src/components/modals/BtcSendModal.vue
+++ b/src/components/modals/BtcSendModal.vue
@@ -23,7 +23,7 @@
                             @input="resetRecipient"
                             @address="onAddressEntered"
                             @domain-address="onDomainEntered"
-                            @scan="$router.push('/scan')"
+                            @scan="$router.push({ name: RouteName.Scan })"
                             ref="addressInput$"/>
                     </template>
                 </DoubleInput>
@@ -143,6 +143,7 @@ import {
     InfoCircleSmallIcon,
 } from '@nimiq/vue-components';
 import { parseRequestLink, Currency, CurrencyInfo } from '@nimiq/utils';
+import { RouteName } from '@/router';
 import Modal, { disableNextModalTransition } from './Modal.vue';
 import BtcAddressInput from '../BtcAddressInput.vue';
 import BtcLabelInput from '../BtcLabelInput.vue';
@@ -601,6 +602,7 @@ export default defineComponent({
             onCloseOverlay,
 
             back,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/BtcTransactionModal.vue b/src/components/modals/BtcTransactionModal.vue
index 267487199..02c846756 100644
--- a/src/components/modals/BtcTransactionModal.vue
+++ b/src/components/modals/BtcTransactionModal.vue
@@ -238,7 +238,9 @@
                         <button v-if="swapData.asset === SwapAsset.NIM && swapTransaction
                             && (!usesNimSwapProxy || swapTransaction.relatedTransactionHash)"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace(
+                                { name: RouteName.Transaction, params: { hash: swapTransaction.transactionHash } })
+                            "
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -253,7 +255,9 @@
                         <button v-if="(swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)
                             && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/usdc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace(
+                                { name: RouteName.UsdcTransaction, params: { hash: swapTransaction.transactionHash } }
+                            )"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -267,7 +271,9 @@
                         </button>
                         <button v-if="swapData.asset === SwapAsset.USDT_MATIC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/usdt-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace(
+                                { name: RouteName.UsdtTransaction, params: { hash: swapTransaction.transactionHash } }
+                            )"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -340,6 +346,7 @@ import { TransactionState } from '@nimiq/electrum-client';
 import { RefundSwapRequest, SignedBtcTransaction } from '@nimiq/hub-api';
 import { SwapAsset, getAssets } from '@nimiq/fastspot-api';
 import { SettlementStatus } from '@nimiq/oasis-api';
+import { RouteName } from '@/router';
 import Amount from '../Amount.vue';
 import FiatConvertedAmount from '../FiatConvertedAmount.vue';
 import Modal from './Modal.vue';
@@ -564,7 +571,10 @@ export default defineComponent({
             if (!tx) return;
             const plainTx = await sendTransaction(tx as SignedBtcTransaction);
             await context.root.$nextTick();
-            context.root.$router.replace(`/btc-transaction/${plainTx.transactionHash}`);
+            context.root.$router.replace({
+                name: RouteName.BtcTransaction,
+                params: { transactionHash: plainTx.transactionHash },
+            });
         }
 
         return {
@@ -602,6 +612,7 @@ export default defineComponent({
             refundHtlc,
             SettlementStatus,
             assetToCurrency,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/PolygonActivationModal.vue b/src/components/modals/PolygonActivationModal.vue
index 035236c82..375bcc518 100644
--- a/src/components/modals/PolygonActivationModal.vue
+++ b/src/components/modals/PolygonActivationModal.vue
@@ -52,6 +52,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from '@vue/composition-api';
 import { PageBody } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import Modal from './Modal.vue';
 import { activatePolygon } from '../../hub';
 import {
@@ -99,7 +100,7 @@ export default defineComponent({
             if (!hasPolygonAddresses.value) return;
             await close(true);
             if (!props.redirect) {
-                context.root.$router.push('/stablecoin-selection');
+                context.root.$router.push({ name: RouteName.StablecoinSelection });
             }
         }
 
@@ -120,10 +121,10 @@ export default defineComponent({
 
                 if (shouldOpenWelcomeStakingModal.value) {
                     // Open welcome staking modal if not shown yet
-                    await context.root.$router.push('/welcome-staking');
+                    await context.root.$router.push({ name: RouteName.WelcomeStaking });
                 } else if (shouldOpenWelcomeModal.value) {
                     // Open welcome modal with additional BTC and USDC info if not shown yet
-                    await context.root.$router.push('/welcome');
+                    await context.root.$router.push({ name: RouteName.Welcome });
                 }
             }
         }
diff --git a/src/components/modals/SendModal.vue b/src/components/modals/SendModal.vue
index 5a7c99c78..912b66ba2 100644
--- a/src/components/modals/SendModal.vue
+++ b/src/components/modals/SendModal.vue
@@ -51,7 +51,7 @@
                         {{ $t('Create a Cashlink') }}
                     </button>
                 </section>
-                <button class="reset scan-qr-button" @click="$router.push('/scan')">
+                <button class="reset scan-qr-button" @click="$router.push({ name: RouteName.Scan })">
                     <ScanQrCodeIcon/>
                 </button>
             </PageBody>
@@ -265,6 +265,7 @@ import {
     InfoCircleSmallIcon,
 } from '@nimiq/vue-components';
 import { parseRequestLink, AddressBook, Utf8Tools, Currency, CurrencyInfo, ValidationUtils } from '@nimiq/utils';
+import { RouteName } from '@/router';
 import Modal, { disableNextModalTransition } from './Modal.vue';
 import ContactShortcuts from '../ContactShortcuts.vue';
 import ContactBook from '../ContactBook.vue';
@@ -938,6 +939,7 @@ export default defineComponent({
             onCloseOverlay,
 
             back,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/StablecoinSendModal.vue b/src/components/modals/StablecoinSendModal.vue
index 5cebe02d3..2914bbef7 100644
--- a/src/components/modals/StablecoinSendModal.vue
+++ b/src/components/modals/StablecoinSendModal.vue
@@ -55,7 +55,7 @@
                 </section>
             </PageBody>
             <PolygonWarningFooter type="sending" level="info"/>
-            <button class="reset scan-qr-button" @click="$router.push('/scan')">
+            <button class="reset scan-qr-button" @click="$router.push({ name: RouteName.Scan })">
                 <ScanQrCodeIcon/>
             </button>
         </div>
@@ -250,6 +250,7 @@ import {
     CircleSpinner,
 } from '@nimiq/vue-components';
 import { computed, defineComponent, onBeforeUnmount, ref, Ref, watch } from '@vue/composition-api';
+import { RouteName } from '@/router';
 import { useConfig } from '../../composables/useConfig';
 import { useWindowSize } from '../../composables/useWindowSize';
 import { sendPolygonTransaction } from '../../hub';
@@ -866,6 +867,7 @@ export default defineComponent({
 
             back,
             config,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/TransactionModal.vue b/src/components/modals/TransactionModal.vue
index 0f3b1e1f3..fdc9ae433 100644
--- a/src/components/modals/TransactionModal.vue
+++ b/src/components/modals/TransactionModal.vue
@@ -247,7 +247,10 @@
                         </svg>
                         <button v-if="swapData.asset === SwapAsset.BTC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/btc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.BtcTransaction,
+                                params: { transactionHash: swapTransaction.transactionHash } },
+                            )"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -262,7 +265,10 @@
                         <button v-if="(swapData.asset === SwapAsset.USDC || swapData.asset === SwapAsset.USDC_MATIC)
                             && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/usdc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.UsdcTransaction,
+                                params: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -276,7 +282,10 @@
                         </button>
                         <button v-if="swapData.asset === SwapAsset.USDT_MATIC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/usdt-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.USDTTransaction,
+                                params: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -357,6 +366,7 @@ import { BrowserDetection } from '@nimiq/utils';
 import { RefundSwapRequest, SignedTransaction } from '@nimiq/hub-api';
 import { SwapAsset, getAssets } from '@nimiq/fastspot-api';
 import { SettlementStatus } from '@nimiq/oasis-api';
+import { RouteName } from '@/router';
 import Config from 'config';
 import Amount from '../Amount.vue';
 import FiatConvertedAmount from '../FiatConvertedAmount.vue';
@@ -676,7 +686,10 @@ export default defineComponent({
             if (!tx) return;
             const plainTx = await sendTransaction(tx as SignedTransaction);
             await context.root.$nextTick();
-            context.root.$router.replace(`/transaction/${plainTx.transactionHash}`);
+            context.root.$router.replace({
+                name: RouteName.Transaction,
+                params: { transactionHash: plainTx.transactionHash },
+            });
         }
 
         return {
@@ -709,6 +722,7 @@ export default defineComponent({
             refundHtlc,
             SettlementStatus,
             assetToCurrency,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/UsdcTransactionModal.vue b/src/components/modals/UsdcTransactionModal.vue
index d341d9126..e56b51139 100644
--- a/src/components/modals/UsdcTransactionModal.vue
+++ b/src/components/modals/UsdcTransactionModal.vue
@@ -202,7 +202,10 @@
                         <button v-if="swapData.asset === SwapAsset.NIM && swapTransaction
                             && (!usesNimSwapProxy || swapTransaction.relatedTransactionHash)"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.Transaction,
+                                params: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -216,7 +219,10 @@
                         </button>
                         <button v-if="swapData.asset === SwapAsset.BTC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/btc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.BtcTransaction,
+                                params: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -298,6 +304,7 @@ import { useAccountStore } from '@/stores/Account';
 import { useUsdcTransactionsStore, TransactionState } from '@/stores/UsdcTransactions';
 import { useUsdcContactsStore } from '@/stores/UsdcContacts';
 import { usePolygonNetworkStore } from '@/stores/PolygonNetwork';
+import { RouteName } from '@/router';
 import Amount from '../Amount.vue';
 import BlueLink from '../BlueLink.vue';
 import Modal from './Modal.vue';
@@ -557,7 +564,10 @@ export default defineComponent({
                     relayUrl!,
                 );
                 await context.root.$nextTick();
-                context.root.$router.replace(`/transaction/${plainTx.transactionHash}`);
+                context.root.$router.replace({
+                    name: RouteName.Transaction,
+                    params: { transactionHash: plainTx.transactionHash },
+                });
             } catch (e) {
                 const errorMessage = e instanceof Error ? e.message : String(e);
                 alert(context.root.$t('Refund failed: ') + errorMessage); // eslint-disable-line no-alert
diff --git a/src/components/modals/UsdtAddedModal.vue b/src/components/modals/UsdtAddedModal.vue
index fa48e9b4c..0b38e5b9c 100644
--- a/src/components/modals/UsdtAddedModal.vue
+++ b/src/components/modals/UsdtAddedModal.vue
@@ -13,7 +13,8 @@
             <UsdtIconPadded />
         </PageBody>
         <PageFooter>
-            <button class="nq-button light-blue" @click="$router.push('/stablecoin-selection')" @mousedown.prevent>
+            <button class="nq-button light-blue" @click="$router.push({ name: RouteName.StablecoinSelection })"
+            @mousedown.prevent>
                 {{ $t('Learn more') }}
             </button>
             <a class="nq-link" @click="stickWithUsdc">
@@ -26,6 +27,7 @@
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api';
 import { PageBody, PageHeader, PageFooter } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import Modal from './Modal.vue';
 import { CryptoCurrency } from '../../lib/Constants';
 import { useAccountSettingsStore } from '../../stores/AccountSettings';
@@ -55,6 +57,7 @@ export default defineComponent({
         return {
             modal$,
             stickWithUsdc,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/UsdtTransactionModal.vue b/src/components/modals/UsdtTransactionModal.vue
index 8bfac3f71..e29470033 100644
--- a/src/components/modals/UsdtTransactionModal.vue
+++ b/src/components/modals/UsdtTransactionModal.vue
@@ -183,7 +183,10 @@
                         <button v-if="swapData.asset === SwapAsset.NIM && swapTransaction
                             && (!usesNimSwapProxy || swapTransaction.relatedTransactionHash)"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.Transaction,
+                                params: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -197,7 +200,10 @@
                         </button>
                         <button v-if="swapData.asset === SwapAsset.BTC && swapTransaction"
                             class="swap-other-side reset flex-row" :class="{'incoming': !isIncoming}"
-                            @click="$router.replace(`/btc-transaction/${swapTransaction.transactionHash}`)"
+                            @click="$router.replace({
+                                name: RouteName.BtcTransaction,
+                                params: { transactionHash: swapTransaction.transactionHash }
+                            })"
                         >
                             <div class="icon">
                                 <GroundedArrowUpIcon v-if="isIncoming"/>
@@ -279,6 +285,7 @@ import { useAccountStore } from '@/stores/Account';
 import { useUsdtTransactionsStore, TransactionState } from '@/stores/UsdtTransactions';
 import { useUsdtContactsStore } from '@/stores/UsdtContacts';
 import { usePolygonNetworkStore } from '@/stores/PolygonNetwork';
+import { RouteName } from '@/router';
 import Amount from '../Amount.vue';
 import BlueLink from '../BlueLink.vue';
 import Modal from './Modal.vue';
@@ -526,7 +533,10 @@ export default defineComponent({
                     relayUrl!,
                 );
                 await context.root.$nextTick();
-                context.root.$router.replace(`/transaction/${plainTx.transactionHash}`);
+                context.root.$router.replace({
+                    name: RouteName.UsdtTransaction,
+                    params: { transactionHash: plainTx.transactionHash },
+                });
             } catch (e) {
                 const errorMessage = e instanceof Error ? e.message : String(e);
                 alert(context.root.$t('Refund failed: ') + errorMessage); // eslint-disable-line no-alert
@@ -563,6 +573,7 @@ export default defineComponent({
             refundHtlc,
             ticker,
             assetToCurrency,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/modals/overlays/BuyCryptoBankCheckOverlay.vue b/src/components/modals/overlays/BuyCryptoBankCheckOverlay.vue
index 1e4c5af3d..dea7a2abb 100644
--- a/src/components/modals/overlays/BuyCryptoBankCheckOverlay.vue
+++ b/src/components/modals/overlays/BuyCryptoBankCheckOverlay.vue
@@ -21,7 +21,7 @@
         </PageBody>
         <PageFooter>
             <span>{{ $t('Your bank is not eligible?') }}</span>
-            <button class="nq-button-s" @click="$router.replace('/moonpay')" @mousedown.prevent>
+            <button class="nq-button-s" @click="$router.replace({ name: RouteName.Moonpay })" @mousedown.prevent>
                 {{ $t('Buy with Credit Card') }}
             </button>
         </PageFooter>
@@ -31,6 +31,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from '@vue/composition-api';
 import { PageHeader, PageBody, PageFooter } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import BankCheckInput from '../../BankCheckInput.vue';
 
 export default defineComponent({
@@ -49,6 +50,7 @@ export default defineComponent({
             bankCheckInput$,
             bankName,
             writing,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/staking/StakingButton.vue b/src/components/staking/StakingButton.vue
index cba544c04..9e9a24955 100644
--- a/src/components/staking/StakingButton.vue
+++ b/src/components/staking/StakingButton.vue
@@ -19,7 +19,7 @@
             <template #trigger>
                 <button class="stake"
                     :disabled="!canStake"
-                    @click="$router.push('/staking')"
+                    @click="$router.push({ name: RouteName.Staking })"
                     @mousedown.prevent
                 >
                     <HeroIcon :pulsing="!totalAccountStake && canStake" :disabled="$config.disableNetworkInteraction" />
@@ -35,6 +35,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from '@vue/composition-api';
 import { Tooltip } from '@nimiq/vue-components';
+import { RouteName } from '@/router';
 import { useAddressStore } from '../../stores/Address';
 import { useStakingStore } from '../../stores/Staking';
 import { useConfig } from '../../composables/useConfig';
@@ -70,7 +71,7 @@ export default defineComponent({
             if (canStake.value) {
                 e.stopPropagation();
                 e.preventDefault();
-                context.root.$router.push('/staking');
+                context.root.$router.push({ name: RouteName.Staking });
             }
         }
 
@@ -122,6 +123,7 @@ export default defineComponent({
             canStake,
             customClickHandler,
             isCTATooltipDisabled,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/staking/StakingPreview.vue b/src/components/staking/StakingPreview.vue
index a5b851e89..f16c634cf 100644
--- a/src/components/staking/StakingPreview.vue
+++ b/src/components/staking/StakingPreview.vue
@@ -1,7 +1,7 @@
 <template>
     <button class="staking-preview nq-button-pill green flex-row"
         :disabled="$config.disableNetworkInteraction"
-        @click="$router.push('/staking')" @mousedown.prevent>
+        @click="$router.push({ name: RouteName.Staking })" @mousedown.prevent>
         <!-- The percentages below should also match in AmountSlider.vue -->
         <OneLeafStakingIcon v-if="currentPercentage < 50"/>
         <TwoLeafStakingIcon v-else-if="currentPercentage < 75"/>
@@ -22,6 +22,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api';
+import { RouteName } from '@/router';
 import Amount from '../Amount.vue';
 import { useStakingStore } from '../../stores/Staking';
 import OneLeafStakingIcon from '../icons/Staking/OneLeafStakingIcon.vue';
@@ -50,6 +51,7 @@ export default defineComponent({
             stake,
             currentPercentage,
             restakingRewards,
+            RouteName,
         };
     },
     components: {
diff --git a/src/components/staking/StakingSummaryMobile.vue b/src/components/staking/StakingSummaryMobile.vue
index 68a4700fb..45934a1f7 100644
--- a/src/components/staking/StakingSummaryMobile.vue
+++ b/src/components/staking/StakingSummaryMobile.vue
@@ -4,7 +4,7 @@
         <span class="staking-projection-text">
             {{ $t('Earn NIM every month by staking your NIM') }}
         </span>
-        <button @click="$router.push('/staking')" class="nq-button-s inverse staking-action">
+        <button @click="$router.push({ name: RouteName.Staking })" class="nq-button-s inverse staking-action">
             {{ $t('Stake now') }}
         </button>
     </div>
@@ -12,11 +12,14 @@
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
+import { RouteName } from '@/router';
 import StakingButton from './StakingButton.vue';
 
 export default defineComponent({
     setup() {
-        return {};
+        return {
+            RouteName,
+        };
     },
     components: {
         StakingButton,
diff --git a/src/components/swap/SwapModal.vue b/src/components/swap/SwapModal.vue
index c009e2592..30a391799 100644
--- a/src/components/swap/SwapModal.vue
+++ b/src/components/swap/SwapModal.vue
@@ -296,6 +296,7 @@ import type { BigNumber } from 'ethers';
 import type { RelayRequest } from '@opengsn/common/dist/EIP712/RelayRequest';
 import type { ForwardRequest } from '@opengsn/common/dist/EIP712/ForwardRequest';
 import { CurrencyInfo } from '@nimiq/utils';
+import { RouteName } from '@/router';
 
 import Modal from '../modals/Modal.vue';
 import Amount from '../Amount.vue';
@@ -2193,7 +2194,10 @@ export default defineComponent({
                 rightAsset.value = leftAsset.value;
             }
             leftAsset.value = asset;
-            context.root.$router.replace(`/swap/${leftAsset.value}-${rightAsset.value}`);
+            context.root.$router.replace({
+                name: RouteName.Swap,
+                params: { pair: `${leftAsset.value}-${rightAsset.value}` },
+            });
         }
 
         function setRightAsset(asset: SupportedSwapAsset) {
@@ -2201,7 +2205,10 @@ export default defineComponent({
                 leftAsset.value = rightAsset.value;
             }
             rightAsset.value = asset;
-            context.root.$router.replace(`/swap/${leftAsset.value}-${rightAsset.value}`);
+            context.root.$router.replace({
+                name: RouteName.Swap,
+                params: { pair: `${leftAsset.value}-${rightAsset.value}` },
+            });
         }
 
         const swapIsNotSupported = computed(() => activeAccountInfo.value?.type === AccountType.LEDGER
diff --git a/src/components/swap/SwapNotification.vue b/src/components/swap/SwapNotification.vue
index 60990a07c..380f39a71 100644
--- a/src/components/swap/SwapNotification.vue
+++ b/src/components/swap/SwapNotification.vue
@@ -66,6 +66,7 @@ import {
 import { SwapHandler, Swap as GenericSwap, SwapAsset, Client, Transaction } from '@nimiq/libswap';
 import type { ForwardRequest } from '@opengsn/common/dist/EIP712/ForwardRequest';
 import { Event as PolygonEvent, EventType as PolygonEventType } from '@nimiq/libswap/dist/src/Erc20AssetAdapter';
+import { RouteName } from '@/router';
 import MaximizeIcon from '../icons/MaximizeIcon.vue';
 import { useSwapsStore, SwapState, ActiveSwap, SwapEurData, SwapErrorAction } from '../../stores/Swaps';
 import { useNetworkStore } from '../../stores/Network';
@@ -946,11 +947,11 @@ export default defineComponent({
             const toAsset = activeSwap.value.to.asset as SwapAsset;
 
             if (cryptoCurrencies.includes(fromAsset) && cryptoCurrencies.includes(toAsset)) {
-                context.root.$router.push('/swap');
+                context.root.$router.push({ name: RouteName.Swap });
             } else if (fiatCurrencies.includes(fromAsset)) {
-                context.root.$router.push('/buy-crypto');
+                context.root.$router.push({ name: RouteName.BuyCrypto });
             } else if (fiatCurrencies.includes(toAsset)) {
-                context.root.$router.push('/sell-crypto');
+                context.root.$router.push({ name: RouteName.SellCrypto });
             } else {
                 throw new Error('Unhandled swap type, cannot open correct swap modal');
             }
diff --git a/src/hub.ts b/src/hub.ts
index ad6f3937a..33f9495c8 100644
--- a/src/hub.ts
+++ b/src/hub.ts
@@ -30,7 +30,7 @@ import { sendTransaction as sendTx } from './network';
 import { sendTransaction as sendBtcTx } from './electrum';
 import { createTransactionRequest, sendTransaction as sendPolygonTx } from './ethers';
 import { isProxyData, ProxyTransactionDirection } from './lib/ProxyDetection';
-import router from './router';
+import router, { RouteName } from './router';
 import { useSettingsStore } from './stores/Settings';
 import { useFiatStore } from './stores/Fiat';
 import { useKycStore } from './stores/Kyc';
@@ -135,7 +135,7 @@ hubApi.on(HubApi.RequestType.ONBOARD, async (accounts) => {
             // Signup of a Keyguard account
             if (!welcomeModalAlreadyShown && config.enableBitcoin && config.polygon.enabled) {
                 // Show regular first-time welcome flow which talks about Bitcoin and USDC.
-                router.push('/welcome');
+                router.push({ name: RouteName.Welcome });
             }
             break;
         case HubApi.RequestType.LOGIN:
@@ -146,7 +146,7 @@ hubApi.on(HubApi.RequestType.ONBOARD, async (accounts) => {
                 // Ledger logins where Bitcoin is not automatically activated as it requires the Bitcoin app; for
                 // Keyguard accounts it's automatically activated on login), offer to activate it. After activation, the
                 // Bitcoin activation modal leads into the Welcome modal if not shown yet.
-                router.push('/btc-activation');
+                router.push({ name: RouteName.BtcActivation });
             }
             // We currently don't need to handle the case that USDC is not activated yet after logins, because for
             // Legacy and Ledger accounts it's currently not supported yet, and for Keyguard accounts it's automatically
@@ -162,7 +162,7 @@ hubApi.on(HubApi.RequestType.ONBOARD, async (accounts) => {
 });
 
 hubApi.on(HubApi.RequestType.MIGRATE, () => {
-    router.onReady(() => router.push('/migration-welcome'));
+    router.onReady(() => router.push({ name: RouteName.MigrationWelcome }));
 });
 
 hubApi.on(HubApi.RequestType.SIGN_TRANSACTION, async (tx) => {
@@ -398,7 +398,7 @@ export async function syncFromHub() {
         && config.polygon.enabled
     ) {
         // Prompt for USDC activation, which then leads into the new welcome modal if not shown yet.
-        router.push('/usdc-activation');
+        router.push({ name: RouteName.UsdcActivation });
     } else {
         // Check if the WelcomeStakingModal should be shown
         const welcomeStakingModalAlreadyShown = window.localStorage.getItem(
@@ -407,7 +407,7 @@ export async function syncFromHub() {
 
         if (!welcomeStakingModalAlreadyShown) {
             // Show WelcomeStakingModal if not shown before
-            router.push('/welcome-staking');
+            router.push({ name: RouteName.WelcomeStaking });
         }
     }
 }
@@ -442,7 +442,7 @@ export async function onboard(asRedirect = false) {
         && !activeAccountInfo.value.btcAddresses?.external.length
         && config.enableBitcoin
     ) {
-        router.push('/btc-activation');
+        router.push({ name: RouteName.BtcActivation });
     }
     return true;
 }
diff --git a/src/router.ts b/src/router.ts
index 7aeb7ee80..d4d8609fc 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -14,8 +14,8 @@ import { AccountType, useAccountStore } from './stores/Account';
 import { CryptoCurrency } from './lib/Constants';
 
 // Main views
-const Settings = () => import(/* webpackChunkName: "settings" */ './components/layouts/Settings.vue');
-const Network = () =>
+const SettingsLayout = () => import(/* webpackChunkName: "settings" */ './components/layouts/Settings.vue');
+const NetworkLayout = () =>
     import(/* webpackChunkName: "network" */ './components/layouts/Network.vue');
 
 // Modals
@@ -97,8 +97,57 @@ export enum Columns {
     ADDRESS,
 }
 
+export enum RouteName {
+    Root = 'root',
+    Transactions = 'transactions',
+    RootAccounts = 'root-accounts',
+    Send = 'send',
+    SendNim = 'send-nim',
+    SendBtc = 'send-btc',
+    SendUsdc = 'send-usdc',
+    Receive = 'receive',
+    ReceiveNim = 'receive-nim',
+    ReceiveBtc = 'receive-btc',
+    ReceiveUsdc = 'receive-usdc',
+    Transaction = 'transaction',
+    Trade = 'trade',
+    Buy = 'buy',
+    BuyCrypto = 'buy-crypto',
+    SellCrypto = 'sell-crypto',
+    Scan = 'scan',
+    SendViaUri = 'send-via-uri',
+    Welcome = 'welcome',
+    WelcomeStaking = 'welcome-staking',
+    MigrationWelcome = 'migration-welcome',
+    BtcActivation = 'btc-activation',
+    BtcTransaction = 'btc-transaction',
+    SendViaBtcUri = 'send-via-btc-uri',
+    UsdcActivation = 'usdc-activation',
+    UsdcTransaction = 'usdc-transaction',
+    UsdtTransaction = 'usdt-transaction',
+    SendViaPolygonUri = 'send-via-polygon-uri',
+    UsdtAdded = 'usdt-added',
+    StablecoinSelection = 'stablecoin-selection',
+    Swap = 'swap',
+    MoonpaySellInfo = 'moonpay-sell-info',
+    Moonpay = 'moonpay',
+    Simplex = 'simplex',
+    RootReleaseNotes = 'root-release-notes',
+    ExportHistory = 'export-history',
+    Staking = 'staking',
+    WalletStatus = 'wallet-status',
+    Settings = 'settings',
+    SettingsAccounts = 'settings-accounts',
+    Disclaimer = 'disclaimer',
+    SettingsReleaseNotes = 'settings-release-notes',
+    Network = 'network',
+    NetworkAccounts = 'network-accounts',
+    NetworkReleaseNotes = 'network-release-notes',
+}
+
 const routes: RouteConfig[] = [{
     path: '/',
+    name: RouteName.Root,
     components: {
         groundfloor: Groundfloor,
     },
@@ -108,7 +157,7 @@ const routes: RouteConfig[] = [{
             accountOverview: AccountOverview,
             addressOverview: AddressOverview,
         },
-        name: 'root',
+        name: RouteName.Transactions,
         alias: '/transactions',
         meta: { column: Columns.DYNAMIC },
         children: [{
@@ -116,28 +165,28 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: AccountMenuModal,
             },
-            name: 'root-accounts',
+            name: RouteName.RootAccounts,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/send',
             components: {
                 modal: AddressSelectorModal,
             },
-            name: 'send',
+            name: RouteName.Send,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/send/nim',
             components: {
                 modal: SendModal,
             },
-            name: 'send-nim',
+            name: RouteName.SendNim,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/send/btc',
             components: {
                 modal: BtcSendModal,
             },
-            name: 'send-btc',
+            name: RouteName.SendBtc,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/send/usdc',
@@ -145,7 +194,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: StablecoinSendModal,
             },
-            name: 'send-usdc',
+            name: RouteName.SendUsdc,
             props: { modal: true },
             meta: { column: Columns.DYNAMIC },
         }, {
@@ -153,21 +202,21 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: AddressSelectorModal,
             },
-            name: 'receive',
+            name: RouteName.Receive,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/receive/nim',
             components: {
                 modal: ReceiveModal,
             },
-            name: 'receive-nim',
+            name: RouteName.ReceiveNim,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/receive/btc',
             components: {
                 modal: BtcReceiveModal,
             },
-            name: 'receive-btc',
+            name: RouteName.ReceiveBtc,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/receive/usdc',
@@ -175,14 +224,14 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: StablecoinReceiveModal,
             },
-            name: 'receive-usdc',
+            name: RouteName.ReceiveUsdc,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/transaction/:hash',
             components: {
                 modal: TransactionModal,
             },
-            name: 'transaction',
+            name: RouteName.Transaction,
             props: { modal: true },
             meta: { column: Columns.ADDRESS },
         }, {
@@ -190,42 +239,42 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: TradeModal,
             },
-            name: 'trade',
+            name: RouteName.Trade,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/buy',
             components: {
                 modal: BuyOptionsModal,
             },
-            name: 'buy',
+            name: RouteName.Buy,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/buy-crypto',
             components: {
                 modal: BuyCryptoModal,
             },
-            name: 'buy-crypto',
+            name: RouteName.BuyCrypto,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/sell-crypto',
             components: {
                 modal: SellCryptoModal,
             },
-            name: 'sell-crypto',
+            name: RouteName.SellCrypto,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/scan',
             components: {
                 modal: ScanQrModal,
             },
-            name: 'scan',
+            name: RouteName.Scan,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/:requestUri(nimiq:.+)',
             components: {
                 modal: SendModal,
             },
-            name: 'send-via-uri',
+            name: RouteName.SendViaUri,
             props: {
                 // Pass full path including query parameters.
                 modal: (route: Route) => ({ requestUri: route.fullPath.substring(1) }),
@@ -236,28 +285,28 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: WelcomeModal,
             },
-            name: 'welcome',
+            name: RouteName.Welcome,
             meta: { column: Columns.ACCOUNT },
         }, {
             path: '/welcome-staking',
             components: {
                 modal: WelcomeStakingModal,
             },
-            name: 'welcome-staking',
+            name: RouteName.WelcomeStaking,
             meta: { column: Columns.ACCOUNT },
         }, {
             path: '/migration-welcome',
             components: {
                 modal: MigrationWelcomeModal,
             },
-            name: 'migration-welcome',
+            name: RouteName.MigrationWelcome,
             meta: { column: Columns.ACCOUNT },
         }, {
             path: '/btc-activation',
             components: {
                 modal: BtcActivationModal,
             },
-            name: 'btc-activation',
+            name: RouteName.BtcActivation,
             props: {
                 modal: parseActivationRedirect,
             },
@@ -267,7 +316,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: BtcTransactionModal,
             },
-            name: 'btc-transaction',
+            name: RouteName.BtcTransaction,
             props: { modal: true },
             meta: { column: Columns.ADDRESS },
         }, {
@@ -275,7 +324,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: BtcSendModal,
             },
-            name: 'send-via-btc-uri',
+            name: RouteName.SendViaBtcUri,
             props: {
                 // Pass full path including query parameters.
                 modal: (route: Route) => ({ requestUri: route.fullPath.substring(1) }),
@@ -287,7 +336,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: PolygonActivationModal,
             },
-            name: 'usdc-activation',
+            name: RouteName.UsdcActivation,
             props: {
                 modal: parseActivationRedirect,
             },
@@ -297,7 +346,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: UsdcTransactionModal,
             },
-            name: 'usdc-transaction',
+            name: RouteName.UsdcTransaction,
             props: { modal: true },
             meta: { column: Columns.ADDRESS },
         }, {
@@ -305,7 +354,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: UsdtTransactionModal,
             },
-            name: 'usdt-transaction',
+            name: RouteName.UsdtTransaction,
             props: { modal: true },
             meta: { column: Columns.ADDRESS },
         }, {
@@ -315,7 +364,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: StablecoinSendModal,
             },
-            name: 'send-via-polygon-uri',
+            name: RouteName.SendViaPolygonUri,
             props: {
                 // Pass full path including query parameters.
                 modal: (route: Route) => ({ requestUri: route.fullPath.substring(1) }),
@@ -326,21 +375,21 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: UsdtAddedModal,
             },
-            name: 'usdt-added',
+            name: RouteName.UsdtAdded,
             meta: { column: Columns.ACCOUNT },
         }, {
             path: '/stablecoin-selection',
             components: {
                 modal: StablecoinSelectionModal,
             },
-            name: 'stablecoin-selection',
+            name: RouteName.StablecoinSelection,
             meta: { column: Columns.ACCOUNT },
         }, {
             path: '/swap/:pair?',
             components: {
                 modal: SwapModal,
             },
-            name: 'swap',
+            name: RouteName.Swap,
             props: { modal: true },
             meta: { column: Columns.ACCOUNT },
         }, {
@@ -348,14 +397,14 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: MoonpaySellInfoModal,
             },
-            name: 'moonpay-sell-info',
+            name: RouteName.MoonpaySellInfo,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/moonpay',
             components: {
                 modal: MoonpayModal,
             },
-            name: 'moonpay',
+            name: RouteName.Moonpay,
             props: { modal: true },
             meta: { column: Columns.DYNAMIC },
         }, {
@@ -363,21 +412,21 @@ const routes: RouteConfig[] = [{
             components: {
                 'persistent-modal': SimplexModal,
             },
-            name: 'simplex',
+            name: RouteName.Simplex,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/release-notes',
             components: {
                 modal: ReleaseNotesModal,
             },
-            name: 'root-release-notes',
+            name: RouteName.RootReleaseNotes,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/export-history/:type',
             components: {
                 modal: HistoryExportModal,
             },
-            name: 'export-history',
+            name: RouteName.ExportHistory,
             props: { modal: true },
             meta: { column: Columns.ADDRESS },
         }, {
@@ -385,7 +434,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: StakingModal,
             },
-            name: 'staking',
+            name: RouteName.Staking,
             props: { modal: true },
             meta: { column: Columns.DYNAMIC },
         }, {
@@ -393,7 +442,7 @@ const routes: RouteConfig[] = [{
             components: {
                 modal: WalletStatusModal,
             },
-            name: 'wallet-status',
+            name: RouteName.WalletStatus,
             meta: { column: Columns.DYNAMIC },
         }],
         beforeEnter: (to, from, next) => {
@@ -411,53 +460,53 @@ const routes: RouteConfig[] = [{
     }, {
         path: '/settings',
         components: {
-            settings: Settings,
+            settings: SettingsLayout,
         },
-        name: 'settings',
+        name: RouteName.Settings,
         meta: { column: Columns.ACCOUNT },
         children: [{
             path: '/accounts',
             components: {
                 modal: AccountMenuModal,
             },
-            name: 'settings-accounts',
+            name: RouteName.SettingsAccounts,
             meta: { column: Columns.DYNAMIC },
         }, {
             path: '/disclaimer',
             components: {
                 modal: DisclaimerModal,
             },
-            name: 'disclaimer',
+            name: RouteName.Disclaimer,
             meta: { column: Columns.ACCOUNT },
         }, {
             path: '/release-notes',
             components: {
                 modal: ReleaseNotesModal,
             },
-            name: 'settings-release-notes',
+            name: RouteName.SettingsReleaseNotes,
             meta: { column: Columns.DYNAMIC },
         }],
     }],
 }, {
     path: '/network',
     components: {
-        basement: Network,
+        basement: NetworkLayout,
     },
-    name: 'network',
+    name: RouteName.Network,
     meta: { column: Columns.ACCOUNT },
     children: [{
         path: '/accounts',
         components: {
             modal: AccountMenuModal,
         },
-        name: 'network-accounts',
+        name: RouteName.NetworkAccounts,
         meta: { column: Columns.DYNAMIC },
     }, {
         path: '/release-notes',
         components: {
             modal: ReleaseNotesModal,
         },
-        name: 'network-release-notes',
+        name: RouteName.NetworkReleaseNotes,
         meta: { column: Columns.DYNAMIC },
     }],
 }];
diff --git a/src/scss/themes.scss b/src/scss/themes.scss
index 6ea48fbf5..bba8ad348 100644
--- a/src/scss/themes.scss
+++ b/src/scss/themes.scss
@@ -207,3 +207,11 @@ button.reset:disabled {
         line-height: unset;
     }
 }
+
+h1, h2, h3, h4, h5, h6 {
+    text-wrap: pretty;
+}
+
+p, li {
+    text-wrap: balance;
+}