diff --git a/src/components/layouts/AccountOverview.vue b/src/components/layouts/AccountOverview.vue
index 2994d58aa..5e4ca64ac 100644
--- a/src/components/layouts/AccountOverview.vue
+++ b/src/components/layouts/AccountOverview.vue
@@ -31,7 +31,6 @@
                 <MenuIcon/>
                 <AttentionDot v-if="updateAvailable"/>
             </button>
-            <DevBar v-if="isMobile" />
             <button class="reset consensus" @click="$router.push('/network').catch(() => {})">
                 <ConsensusIcon/>
             </button>
@@ -139,8 +138,6 @@ import { CryptoCurrency } from '../../lib/Constants';
 import { useBtcNetworkStore } from '../../stores/BtcNetwork';
 import { useSettingsStore } from '../../stores/Settings';
 
-import DevBar from '../widgets/DevBar.vue';
-
 const BTC_ACTIVATION_SHOWN_STORAGE_KEY = 'btc-activation-modal-shown';
 
 export default defineComponent({
@@ -253,7 +250,6 @@ export default defineComponent({
         Amount,
         FiatConvertedAmount,
         AttentionDot,
-        DevBar,
         StakingSummary,
     },
 });
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
index e222f36be..72b60878d 100644
--- a/src/components/layouts/AddressOverview.vue
+++ b/src/components/layouts/AddressOverview.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="address-overview"
         :class="{ 'no-accounts flex-column': !activeAddressInfo && activeCurrency !== CryptoCurrency.BTC }">
-        <DevBar v-if="!isMobile" />
         <template v-if="activeAddressInfo || activeCurrency === CryptoCurrency.BTC">
             <div class="actions-mobile flex-row">
                 <button class="reset icon-button" @click="$router.back()"><ArrowLeftIcon/></button>
@@ -206,7 +205,6 @@ import StakeButtonPartial from '../stake/partials/StakeButtonPartial.vue';
 
 import RenameIcon from '../icons/AccountMenu/RenameIcon.vue';
 import RefreshIcon from '../icons/RefreshIcon.vue';
-import DevBar from '../widgets/DevBar.vue';
 
 import { useAccountStore } from '../../stores/Account';
 import { useAddressStore } from '../../stores/Address';
@@ -262,7 +260,6 @@ export default defineComponent({
         });
 
         const { width: windowWidth } = useWindowSize();
-        const isMobile = computed(() => windowWidth.value <= 700);
 
         const addressMaskedWidth = computed(() => windowWidth.value > 1160
             ? 396
@@ -313,7 +310,6 @@ export default defineComponent({
             promoBoxVisible,
             setPromoBoxVisible,
             onTransactionListScroll,
-            isMobile,
         };
     },
     components: {
@@ -337,7 +333,6 @@ export default defineComponent({
         EventIcon,
         CrossIcon,
         CrossCloseButton,
-        DevBar,
         StakePreviewPartial,
         StakeButtonPartial,
     },
diff --git a/src/components/stake/StakeAmountSlider.vue b/src/components/stake/StakeAmountSlider.vue
index c4ce308f8..001a7b7e3 100644
--- a/src/components/stake/StakeAmountSlider.vue
+++ b/src/components/stake/StakeAmountSlider.vue
@@ -39,15 +39,12 @@
             <div class="slider-controls" ref="$slide" @click="onMove($event, true);">
                 <div class="slider-controls-wrapper">
                     <div class="slider-progress-bar" ref="$progressBar" />
-                    <div class="slider-dual"
-                        v-if="ENABLED.dualSlider"
-                        ref="$dualSlider" />
                     <div class="slider-knob"
                         ref="$knob"
                         @touchstart="atClick"
                         @mousedown="atClick">
-                        <OneLeafStakingIcon v-if="currentPercentage < 50 && !ENABLED.dualSlider" />
-                        <StakingIcon v-else-if="currentPercentage < 75 && !ENABLED.dualSlider" />
+                        <OneLeafStakingIcon v-if="currentPercentage < 50" />
+                        <StakingIcon v-else-if="currentPercentage < 75" />
                         <ThreeLeafStakingIcon v-else />
                     </div>
                 </div>
@@ -60,7 +57,6 @@
 import { Ref, defineComponent, ref, computed, onMounted } from '@vue/composition-api';
 import { Amount } from '@nimiq/vue-components';
 import { useAddressStore } from '../../stores/Address';
-import { ENABLED_FEATURES as ENABLED } from '../widgets/DevBar.vue';
 import { calculateDisplayedDecimals, formatAmount } from '../../lib/NumberFormatting';
 
 import StakingIcon from '../icons/Staking/StakingIcon.vue';
@@ -115,6 +111,12 @@ const extractEventPosition = (e: MouseEvent | TouchEvent):Point => {
 };
 
 export default defineComponent({
+    props: {
+        stakedAmount: {
+            type: Number,
+            required: true,
+        },
+    },
     setup(props, context) {
         const { activeAddressInfo } = useAddressStore();
 
@@ -161,7 +163,6 @@ export default defineComponent({
         const $container = ref<HTMLElement>(null);
         const $knob = ref<HTMLElement>(null);
         const $slide = ref<HTMLElement>(null);
-        const $dualSlider = ref<HTMLElement>(null);
         const $backgroundLinesLeft = ref<HTMLElement>(null);
         const $backgroundMiddlePlant = ref<HTMLElement>(null);
         const $backgroundLinesRight = ref<HTMLElement>(null);
@@ -249,31 +250,13 @@ export default defineComponent({
             const offsetX = getPointAtPercent(percent);
             currentAmount.value = (percent / 100) * availableAmount.value!;
 
-            if (alreadyStaked.value === true) {
+            if (alreadyStaked.value) {
                 if (percent < alreadyStakedPercentage.value) {
                     if (!skipSignals) {
                         context.emit('amount-unstaked', alreadyStakedAmount.value - currentAmount.value);
                     }
-                    if (ENABLED.dualSlider) {
-                        $dualSlider.value!.style.display = 'inline-block';
-                        $dualSlider.value!.style.width = `${(initialX + knobBox.width) - offsetX}px`;
-                        $dualSlider.value!.style.left = `${offsetX}px`;
-                        $dualSlider.value!.style.border = '0.25rem solid var(--nimiq-gold)';
-                        $dualSlider.value!.style.background = 'radial-gradient(100% 100% at 100% 100%'
-                        + ', rgba(33, 186, 163, 0.1) 0%, rgba(33, 186, 163, 0.9) 100%)';
-                    }
-                } else {
-                    if (ENABLED.dualSlider && percent > alreadyStakedPercentage.value) {
-                        $dualSlider.value!.style.display = 'inline-block';
-                        $dualSlider.value!.style.width = `${(offsetX - initialX) + knobBox.width}px`;
-                        $dualSlider.value!.style.left = `${initialX}px`;
-                        $dualSlider.value!.style.border = '0';
-                        $dualSlider.value!.style.background = 'radial-gradient(100% 100% at 100% 100%'
-                        + ', #15a2da 0%, #0582ca 100%)';
-                    }
-                    if (!skipSignals) {
-                        context.emit('amount-unstaked', 0);
-                    }
+                } else if (!skipSignals) {
+                    context.emit('amount-unstaked', 0);
                 }
             }
             if (!skipSignals) {
@@ -351,16 +334,13 @@ export default defineComponent({
             if (alreadyStaked.value) {
                 $dotIndicator.value!.style.left = `${getPointAtPercent(alreadyStakedPercentage.value!)
                         + (knobBox.width / 2) - 5}px`;
-                if (!ENABLED.dualSlider) {
-                    fillBackground(0, alreadyStakedPercentage.value);
-                }
+                fillBackground(0, alreadyStakedPercentage.value);
             }
         });
         return {
             NIM_DECIMALS,
             STAKING_CURRENCY: CryptoCurrency.NIM,
             DISPLAYED_DECIMALS: calculateDisplayedDecimals(availableAmount.value!, CryptoCurrency.NIM),
-            ENABLED,
             readonly,
             atClick,
             onMove,
@@ -383,16 +363,9 @@ export default defineComponent({
             $backgroundRightPlant,
             $progressBar,
             $dotIndicator,
-            $dualSlider,
             buildSVG,
         };
     },
-    props: {
-        stakedAmount: {
-            type: Number,
-            required: true,
-        },
-    },
     components: {
         Amount,
         StakingIcon,
@@ -550,16 +523,6 @@ export default defineComponent({
                     height: 100%;
                     border-radius: 3rem;
                 }
-                .slider-dual {
-                    display: none;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    background: none;
-                    height: 100%;
-                    border: 0.25rem solid var(--nimiq-gold);
-                    border-radius: 3rem;
-                }
                 .slider-knob {
                     display: flex;
                     position: absolute;
diff --git a/src/components/stake/StakeInfoPage.vue b/src/components/stake/StakeInfoPage.vue
index 848730ec2..56a487a35 100644
--- a/src/components/stake/StakeInfoPage.vue
+++ b/src/components/stake/StakeInfoPage.vue
@@ -15,16 +15,11 @@
         </PageHeader>
         <PageBody>
             <div class="staking-rounded-background">
-                <div class="staking-icons-lace" :class="{ necklace: ENABLED.necklace }">
+                <div class="staking-icons-lace">
                     <img v-for="(icon, index) in orderOfValidators"
                         :key="index"
                         :src="`/img/staking/providers/${icon}`"
-                        :style="{
-                            top: `${((Math.sin((index + 1) * (Math.PI / 10))) * 25)
-                            + (ENABLED.necklace ? progression(index, orderOfValidators.length)*28 : 0)}px`,
-                            width: ENABLED.necklace?`${progression(index, orderOfValidators.length) * 7.0}rem`:'',
-                            height: ENABLED.necklace?`${progression(index, orderOfValidators.length) * 7.0}rem`:'',
-                        }"
+                        :style="{top: `${((Math.sin((index + 1) * (Math.PI / 10))) * 25)}px`}"
                     />
                 </div>
                 <div class="staking-under-icons-text">
@@ -43,7 +38,6 @@
 import { defineComponent } from '@vue/composition-api';
 import { PageHeader, PageBody } from '@nimiq/vue-components';
 import { ValidatorData } from '../../stores/Staking';
-import { ENABLED_FEATURES as ENABLED } from '../widgets/DevBar.vue';
 import StakingHeroIcon from '../icons/Staking/StakingHeroIcon.vue';
 
 const progression = (i:number, n:number) => {
@@ -61,7 +55,6 @@ export default defineComponent({
             (validator: ValidatorData) => validator.icon,
         );
         return {
-            ENABLED,
             progression,
             orderOfValidators: sortedSequence.reverse().concat(
                 sortedSequence.filter((item, index) => (index > 0)),
@@ -132,10 +125,7 @@ export default defineComponent({
                 white-space: nowrap;
                 width: 95%;
                 margin: auto;
-                &.necklace {
-                    top: -3.5rem;
-                    left: -2.5rem;
-                }
+
                 img {
                     position: relative;
                     width: 5.375rem;
diff --git a/src/components/stake/partials/StakeButtonPartial.vue b/src/components/stake/partials/StakeButtonPartial.vue
index 0788a403a..f2834532d 100644
--- a/src/components/stake/partials/StakeButtonPartial.vue
+++ b/src/components/stake/partials/StakeButtonPartial.vue
@@ -8,7 +8,6 @@
             <div slot="trigger">
                 <button class="stake"
                     :class="{
-                        stackattack: stackattack,
                         disabled: !activeAddressInfo || !activeAddressInfo.balance,
                         inverse: inversePalette,
                     }" @click="$router.push('/stake')"
@@ -24,7 +23,6 @@
         <div class="stake"
             v-if="!asButton"
             :class="{
-                stackattack: stackattack,
                 inverse: inversePalette,
             }">
             <StakingHeroIcon />
@@ -38,13 +36,11 @@ import { Tooltip } from '@nimiq/vue-components';
 import { useAddressStore } from '../../../stores/Address';
 import { useAccountStore } from '../../../stores/Account';
 import { useStakingStore } from '../../../stores/Staking';
-import { ENABLED_FEATURES as ENABLED } from '../../widgets/DevBar.vue';
 
 import StakingHeroIcon from '../../icons/Staking/StakingHeroIcon.vue';
 
 export default defineComponent({
     setup() {
-        const stackattack = computed(() => ENABLED.stackattack);
         const { activeAddressInfo } = useAddressStore();
         const { activeCurrency } = useAccountStore();
         const { activeValidator } = useStakingStore();
@@ -53,7 +49,6 @@ export default defineComponent({
 
         return {
             visible,
-            stackattack,
             activeCurrency,
             activeAddressInfo,
         };
@@ -85,27 +80,26 @@ export default defineComponent({
     padding: 0;
     margin-left: 0.5rem;
     transition: opacity 1s ease-in-out;
+
     svg {
         width: 6.75rem;
         height: 6.75rem;
-    }
-    &.stackattack {
-        svg {
-            animation: flicker 15s ease alternate infinite;
-            path:nth-child(1), path:nth-child(2), path:nth-child(4) {
-                animation: fastwave 3s ease alternate infinite;
-            }
-            path:nth-child(1) {
-                animation-delay: .5s;
-            }
-            path:nth-child(2) {
-                animation-delay: .7s;
-            }
-            path:nth-child(4) {
-                animation-delay: .9s;
-            }
+
+        animation: flicker 15s ease alternate infinite;
+        path:nth-child(1), path:nth-child(2), path:nth-child(4) {
+            animation: fastwave 3s ease alternate infinite;
+        }
+        path:nth-child(1) {
+            animation-delay: .5s;
+        }
+        path:nth-child(2) {
+            animation-delay: .7s;
+        }
+        path:nth-child(4) {
+            animation-delay: .9s;
         }
     }
+
     &.disabled {
         svg {
             animation: initial;
diff --git a/src/components/widgets/DevBar.vue b/src/components/widgets/DevBar.vue
deleted file mode 100644
index b8bbfe220..000000000
--- a/src/components/widgets/DevBar.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-    <div v-if="visible && ENABLED" class="dev-bar">
-        <span class="features">
-            <FeatureToggler featureName="necklace" :ENABLED="ENABLED" />
-            <FeatureToggler featureName="stackattack" :ENABLED="ENABLED" />
-            <FeatureToggler featureName="dualSlider" :ENABLED="ENABLED" />
-        </span>
-        <span>
-            <Mockpare />
-        </span>
-    </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { defineComponent, ref } from '@vue/composition-api';
-import FeatureToggler from './FeatureToggler.vue';
-import Mockpare from './Mockpare.vue';
-
-// This section and dev-tools are also useful for the community as they might find it easier to present the
-// difference between their feature improvement/proposal and existing wallet functionality
-
-export const ENABLED_FEATURES = Vue.observable({
-    necklace: false,
-    stackattack: false,
-    dualSlider: false,
-});
-
-export default defineComponent({
-    setup() {
-        const visible = ref(process.env.NODE_ENV === 'development'
-        || /https:\/\/wallet\.nimiq-testnet.com/.test(window.location.href));
-
-        return {
-            ENABLED: ENABLED_FEATURES,
-            visible,
-        };
-    },
-    components: {
-        FeatureToggler,
-        Mockpare,
-    },
-});
-</script>
-
-<style lang="scss" scoped>
-    .dev-bar {
-        white-space: nowrap;
-        pointer-events: initial;
-        .features {
-            display: inline-flex;
-            flex-direction: row;
-            height: 100%;
-        }
-    }
-    @media (max-width: 960px) and (min-width: 701px) { // Tablet breakpoint
-    }
-
-    @media (max-width: 700px) { // Full mobile breakpoint
-        .dev-bar {
-            position: absolute;
-            top: 1.5rem;
-            right: calc((100vw - 230px) / 2.0);
-            .features {
-                position: relative;
-                left: -1rem;
-                flex-direction: column;
-                .flicker {
-                    width: 1.5rem;
-                    height: 1.5rem;
-                    /deep/ svg {
-                        position: relative;
-                        top: -.5rem;
-                        width: 1.5rem;
-                        height: 1.5rem;
-                    }
-                }
-            }
-            /deep/ select, /deep/ button {
-                font-size: .75rem;
-            }
-        }
-    }
-</style>
diff --git a/src/components/widgets/FeatureToggler.vue b/src/components/widgets/FeatureToggler.vue
deleted file mode 100644
index 37ecefcb8..000000000
--- a/src/components/widgets/FeatureToggler.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-    <div class="flicker"
-        @click="toggle(featureName)"
-        :class="{ disabled: !active }"
-        :title="featureName">
-        <StakingHeroIcon />
-    </div>
-</template>
-
-<script type="ts">
-import { defineComponent, computed } from '@vue/composition-api';
-import StakingHeroIcon from '../icons/Staking/StakingHeroIcon.vue';
-
-export default defineComponent({
-    setup(props) {
-        const active = computed(() => props.ENABLED[props.featureName]);
-        const toggle = (featureName) => {
-            props.ENABLED[featureName] = !props.ENABLED[featureName];
-        };
-
-        return {
-            active,
-            toggle,
-        };
-    },
-    props: {
-        featureName: {
-            type: String,
-            required: true,
-        },
-        ENABLED: {
-            type: Object,
-            required: true,
-        },
-    },
-    components: {
-        StakingHeroIcon,
-    },
-});
-</script>
-
-<style lang="scss" scoped>
-    .flicker {
-        display: inline-block;
-        cursor: pointer;
-        width: 3rem;
-        height: 3rem;
-
-        /deep/ svg {
-            width: 3rem;
-            height: 3rem;
-            animation: flicker 5s ease alternate infinite;
-            path:nth-child(1), path:nth-child(2), path:nth-child(4) {
-                animation: fastwave 1s ease alternate infinite;
-            }
-        }
-
-        &.disabled {
-            /deep/ svg {
-                animation: none;
-                path:nth-child(1), path:nth-child(2), path:nth-child(4) {
-                    animation: none;
-                }
-                path {
-                    fill: grey;
-                }
-            }
-        }
-    }
-    @keyframes flicker {
-        0% {
-            opacity: 1.0;
-        }
-        97% {
-            opacity: 0.9;
-        }
-        98% {
-            opacity: 0.0;
-        }
-        100% {
-            opacity: 1.0;
-        }
-    }
-    @keyframes fastwave {
-        0% {
-            opacity: 1.0;
-        }
-        50% {
-            opacity: 0.15;
-        }
-        100% {
-            opacity: 0.0;
-        }
-    }
-</style>
diff --git a/src/components/widgets/Mockpare.vue b/src/components/widgets/Mockpare.vue
deleted file mode 100644
index 6d974ee83..000000000
--- a/src/components/widgets/Mockpare.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<template>
-    <span>
-        <select v-model="screenName" @change="screenChange()" >
-            <option v-for="screen in screens" :key="screen">
-                {{ screen }}
-            </option>
-        </select>
-        <button
-            @click="toggleMock"
-            class="mockpare-button"
-            :class="{ active: isActive }">Mock</button>
-        <Tooltip
-            preferredPosition="bottom right"
-            :container="this.$parent">
-            <div slot="trigger">
-                <InfoCircleSmallIcon />
-            </div>
-            <span class="dev-documentation">
-                <h1>
-                    Key bindings
-                </h1>
-                <ul>
-                    <li>
-                        <h2>M(shift + m)</h2>
-                        <h3>Mock / UnMock current selected image</h3>
-                    </li>
-                    <li>
-                        <h2>+ / -</h2>
-                        <h3>Increase / Decrease opacity of the projected image</h3>
-                    </li>
-                    <li>
-                        <h2>PageUp / PageDown</h2>
-                        <h3>Navigate through the available images</h3>
-                    </li>
-                    <li>
-                        <h2>X(shift + x)</h2>
-                        <h3>Fit on the X axis</h3>
-                    </li>
-                    <li>
-                        <h2>Y(shift + y)</h2>
-                        <h3>Fit on the Y axis</h3>
-                    </li>
-                    <li>
-                        <h2>Arrow keys</h2>
-                        <h3>Manually adjust projection's position</h3>
-                    </li>
-                </ul>
-            </span>
-        </Tooltip>
-    </span>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, computed } from '@vue/composition-api';
-import { InfoCircleSmallIcon, Tooltip } from '@nimiq/vue-components';
-import { useWindowSize } from '../../composables/useWindowSize';
-
-export default defineComponent({
-    setup() {
-        const { width: windowWidth } = useWindowSize();
-        const isMobile = computed(() => windowWidth.value <= 700);
-        const $screens = ref<HTMLSelectElement>();
-        const screens = computed(() => isMobile.value
-            ? ['[mobile]Intro', '[mobile]Validators', '[mobile]Graph', '[mobile]ValidatorConfirm',
-                '[mobile]GraphCenterTooltip', '[mobile]AccountOverview']
-            : ['Welcome', 'Choose Validator', 'Set Amount', 'Staking Details', 'Overview']);
-        const state = ref(false);
-        const opacity = ref(0.5);
-        const screenName = ref(screens.value[0]);
-        // const numericID = Math.random() * Number.MAX_SAFE_INTEGER;
-        const numericID = 1;
-        const mockContainerID = `mock-container-${numericID}`;
-        let offsetX = 0;
-        let offsetY = 0;
-
-        const toggleMock = () => {
-            state.value = !state.value;
-            const el = document.getElementById(mockContainerID) as HTMLImageElement;
-            if (state.value) {
-                el.src = `/mockups/${screenName.value}.png`;
-                if (!opacity.value) {
-                    adjustOpacity();
-                }
-            }
-            el!.style.display = state.value ? 'block' : 'none';
-        };
-
-        const updateSource = () => {
-            const el = document.getElementById(mockContainerID) as HTMLImageElement;
-            if (state.value) {
-                el.src = `/mockups/${screenName.value}.png`;
-            }
-        };
-
-        const fitCenter = (img:HTMLImageElement) => {
-            offsetX = (window.innerWidth - img.width) / 2.0;
-            offsetY = (window.innerHeight - img.height) / 2.0;
-        };
-
-        const fitToScreenW = () => {
-            const el = document.getElementById(mockContainerID) as HTMLImageElement;
-            if (!el.style.width) {
-                el.style.width = `${window.innerWidth}px`;
-                offsetX = 0;
-                offsetY = 0;
-            } else {
-                el.style.width = '';
-                fitCenter(el);
-            }
-            el.style.top = `${offsetY}px`;
-            el.style.left = `${offsetX}px`;
-        };
-
-        const fitToScreenH = () => {
-            const el = document.getElementById(mockContainerID) as HTMLImageElement;
-            if (!el.style.height) {
-                el.style.height = `${window.innerHeight}px`;
-                offsetX = 0;
-                offsetY = 0;
-            } else {
-                el.style.height = '';
-                fitCenter(el);
-            }
-            el.style.top = `${offsetY}px`;
-            el.style.left = `${offsetX}px`;
-        };
-
-        const adjustOpacity = (adjustment = 0.1) => {
-            opacity.value += adjustment;
-            opacity.value = Math.min(1.0, Math.max(0.0, opacity.value));
-            const el = document.getElementById(mockContainerID) as HTMLImageElement;
-            el!.style.opacity = opacity.value.toFixed(1);
-        };
-
-        const adjustPosition = () => {
-            const el = document.getElementById(mockContainerID) as HTMLImageElement;
-            el.style.top = `${offsetY}px`;
-            el.style.left = `${offsetX}px`;
-        };
-
-        const screenChange = () => {
-            updateSource();
-        };
-
-        const keyboardControl = (e:KeyboardEvent) => {
-            if (e.key === 'M') {
-                toggleMock();
-            } else if (e.key === '+') {
-                adjustOpacity(.1);
-            } else if (e.key === '-') {
-                adjustOpacity(-.1);
-            } else if (e.key === 'PageUp') {
-                const pos = screens.value.indexOf(screenName.value);
-                screenName.value = screens.value[(pos + 1) % screens.value.length];
-                updateSource();
-            } else if (e.key === 'PageDown') {
-                const pos = screens.value.indexOf(screenName.value);
-                screenName.value = screens.value[(pos + screens.value.length - 1) % screens.value.length];
-                updateSource();
-            } else if (e.key === 'X') {
-                fitToScreenW();
-            } else if (e.key === 'Y') {
-                fitToScreenH();
-            } else if (e.key === 'ArrowUp') {
-                offsetY -= 1;
-                adjustPosition();
-            } else if (e.key === 'ArrowDown') {
-                offsetY += 1;
-                adjustPosition();
-            } else if (e.key === 'ArrowRight') {
-                offsetX += 1;
-                adjustPosition();
-            } else if (e.key === 'ArrowLeft') {
-                offsetX -= 1;
-                adjustPosition();
-            }
-        };
-
-        onMounted(() => {
-            document.body.style.overflow = 'hidden';
-            const imgNode = document.createElement('IMG') as HTMLImageElement;
-            imgNode.onload = () => {
-                fitCenter(imgNode);
-                imgNode.style.top = `${offsetY.toFixed(2)}px`;
-                imgNode.style.left = `${offsetX.toFixed(2)}px`;
-            };
-            imgNode.style.pointerEvents = 'none';
-            imgNode.style.display = 'none';
-            imgNode.style.position = 'absolute';
-            imgNode.style.zIndex = '9001';
-            imgNode.style.opacity = opacity.value.toFixed(1);
-            imgNode.id = mockContainerID;
-            document.body.appendChild(imgNode);
-            window.addEventListener('keydown', keyboardControl);
-        });
-
-        onUnmounted(() => {
-            window.removeEventListener('keydown', keyboardControl);
-        });
-
-        return {
-            isActive: state,
-            screens,
-            $screens,
-            screenName,
-            screenChange,
-            toggleMock,
-        };
-    },
-    components: {
-        InfoCircleSmallIcon,
-        Tooltip,
-    },
-});
-</script>
-
-<style lang="scss" scoped>
-/deep/ .tooltip-box {
-    width: 57rem;
-}
-.mockpare-button {
-    width: 9rem;
-    cursor: pointer;
-    border: 1px solid var(--nimiq-green);
-    border-radius: 1rem;
-    padding: .5rem .5rem;
-    margin: 0rem .5rem;
-    &.active {
-        background-color: var(--nimiq-green);
-        color: white;
-        font-weight: bold;
-        border: 1px solid black;
-    }
-}
-.dev-documentation {
-    h1 {
-        font-size: 2.5rem;
-    }
-    ul {
-        padding-left: .5rem;
-    }
-    h2 {
-        display: inline-block;
-        font-size: 1.75rem;
-        padding: .5rem .75rem;
-        margin-right: .75rem;
-        background: var(--nimiq-gold);
-        border: .125rem solid #f8f8f8;
-        border-radius: 0.375rem;
-    }
-    h3 {
-        display: inline-block;
-        font-size: 1.75rem;
-    }
-}
-@media (max-width: 960px) and (min-width: 701px) { // Tablet breakpoint
-}
-
-@media (max-width: 700px) { // Full mobile breakpoint
-    svg {
-        position: relative;
-        top: 0.5rem;
-        left: 0.5rem;
-    }
-}
-</style>