diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index 0c7d5d1b2..42c8eaefd 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -68,15 +68,18 @@
             <FeatureList />
         </CesiumPopover>
         <CesiumGeolocationFeedback v-if="viewerCreated" />
-        <CesiumToolbox
-            v-if="viewerCreated && isDesktopMode && !isFullScreenMode"
-            class="cesium-toolbox position-absolute start-50 translate-middle-x"
+
+        <cesium-compass
+            v-show="isDesktopMode && !isFullScreenMode"
+            ref="compass"
+            class="position-absolute start-50 translate-middle-x cesium-compass"
         />
         <slot />
     </div>
 </template>
 <script>
 import 'cesium/Build/Cesium/Widgets/widgets.css'
+import '@geoblocks/cesium-compass'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import * as cesium from 'cesium'
@@ -119,7 +122,6 @@ import FeatureList from '@/modules/infobox/components/FeatureList.vue'
 import CesiumGeolocationFeedback from '@/modules/map/components/cesium/CesiumGeolocationFeedback.vue'
 import CesiumInternalLayer from '@/modules/map/components/cesium/CesiumInternalLayer.vue'
 import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
-import CesiumToolbox from '@/modules/map/components/cesium/CesiumToolbox.vue'
 import {
     CAMERA_MAX_PITCH,
     CAMERA_MAX_ZOOM_DISTANCE,
@@ -144,11 +146,9 @@ import { identifyGeoJSONFeatureAt } from '@/utils/identifyOnVectorLayer'
 import log from '@/utils/logging'
 
 const dispatcher = { dispatcher: 'CesiumMap.vue' }
-
 export default {
     components: {
         CesiumGeolocationFeedback,
-        CesiumToolbox,
         FontAwesomeIcon,
         CesiumPopover,
         FeatureEdit,
@@ -400,6 +400,11 @@ export default {
                 limitCameraPitchRoll(CAMERA_MIN_PITCH, CAMERA_MAX_PITCH, 0.0, 0.0)
             )
 
+            if (this.$refs.compass) {
+                this.$refs.compass.scene = this.viewer.scene
+                this.$refs.compass.clock = this.viewer.clock
+            }
+
             this.flyToPosition()
 
             if (this.selectedFeatures.length > 0) {
@@ -490,7 +495,7 @@ export default {
             })
         },
         getCoordinateAtScreenCoordinate(x, y) {
-            const cartesian = this.viewer.scene.pickPosition(new Cartesian2(x, y))
+            const cartesian = this.viewer?.scene.pickPosition(new Cartesian2(x, y))
             let coordinates = []
             if (cartesian) {
                 const cartCoords = Cartographic.fromCartesian(cartesian)
@@ -639,8 +644,16 @@ export default {
     right: unset;
 }
 
-.cesium-toolbox {
+.cesium-compass {
     bottom: calc($footer-height + $screen-padding-for-ui-elements);
     z-index: $zindex-map + 1;
+
+    $compass-size: 95px;
+
+    position: relative;
+    width: $compass-size;
+    height: $compass-size;
+    --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
+    --cesium-compass-fill-color: rgb(224, 225, 226);
 }
 </style>
diff --git a/src/modules/map/components/cesium/CesiumToolbox.vue b/src/modules/map/components/cesium/CesiumToolbox.vue
deleted file mode 100644
index 84cd015af..000000000
--- a/src/modules/map/components/cesium/CesiumToolbox.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script setup>
-import '@geoblocks/cesium-compass'
-
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { Ray } from 'cesium'
-import { computed, inject, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
-
-import log from '@/utils/logging'
-
-const compass = ref(null)
-
-const store = useStore()
-
-const isDesktopMode = computed(() => store.getters.isDesktopMode)
-const resolution = computed(() => store.getters.resolution)
-
-const getViewer = inject('getViewer')
-
-const viewer = getViewer()
-
-onMounted(() => {
-    if (viewer) {
-        compass.value.scene = viewer.scene
-        compass.value.clock = viewer.clock
-    } else {
-        log.error('No Cesium viewer found, could not link compass')
-    }
-})
-
-const resolutionRatioForZoomInOut = 200
-const step = computed(() => resolution.value * resolutionRatioForZoomInOut)
-
-function moveCamera(distance) {
-    const camera = viewer.scene.camera
-    if (camera) {
-        camera.flyTo({
-            destination: Ray.getPoint(new Ray(camera.position, camera.direction), distance),
-            orientation: {
-                heading: camera.heading,
-                pitch: camera.pitch,
-                roll: camera.roll,
-            },
-            duration: 0.25,
-        })
-    }
-}
-
-function moveForward() {
-    moveCamera(step.value)
-}
-
-function moveBackward() {
-    moveCamera(-step.value)
-}
-</script>
-
-<template>
-    <div class="cesium-toolbox">
-        <button class="cesium-toolbox-button" @click="moveForward">
-            <FontAwesomeIcon icon="plus" />
-        </button>
-        <cesium-compass v-show="isDesktopMode" ref="compass" class="cesium-toolbox-compass" />
-        <button class="cesium-toolbox-button" @click="moveBackward">
-            <FontAwesomeIcon icon="minus" />
-        </button>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-@import '@/scss/webmapviewer-bootstrap-theme';
-
-.cesium-toolbox {
-    display: flex;
-
-    $compass-size: 95px;
-    $button-size: calc($compass-size / 2);
-    &-button {
-        width: $button-size;
-        height: $button-size;
-        border-radius: calc($button-size / 2);
-        border: 2px solid rgba(0, 0, 0, 0.4);
-        background: rgb(224, 225, 226);
-        font-size: calc($button-size / 2.5);
-        color: rgba(0, 0, 0, 0.8);
-    }
-
-    &-compass {
-        position: relative;
-        width: $compass-size;
-        height: $compass-size;
-        --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
-        --cesium-compass-fill-color: rgb(224, 225, 226);
-    }
-}
-</style>
diff --git a/src/modules/map/components/toolbox/MapToolbox.vue b/src/modules/map/components/toolbox/MapToolbox.vue
index 7e4ecdc9e..6bda05ea7 100644
--- a/src/modules/map/components/toolbox/MapToolbox.vue
+++ b/src/modules/map/components/toolbox/MapToolbox.vue
@@ -51,7 +51,7 @@ const is3dActive = computed(() => store.state.cesium.active)
     >
         <FullScreenButton v-if="fullScreenButton" />
         <GeolocButton v-if="geolocButton && !isFullscreenMode" />
-        <ZoomButtons v-if="!isFullscreenMode && !is3dActive" />
+        <ZoomButtons v-if="!isFullscreenMode" />
         <Toggle3dButton v-if="toggle3dButton && !isFullscreenMode" />
         <OpenLayersCompassButton v-if="compassButton && !is3dActive && !isFullscreenMode" />
         <slot />
diff --git a/src/modules/map/components/toolbox/ZoomButtons.vue b/src/modules/map/components/toolbox/ZoomButtons.vue
index a9e11d577..ce1fa8ecb 100644
--- a/src/modules/map/components/toolbox/ZoomButtons.vue
+++ b/src/modules/map/components/toolbox/ZoomButtons.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { Ray } from 'cesium'
+import { computed, inject } from 'vue'
 import { useStore } from 'vuex'
 
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
@@ -6,13 +8,46 @@ import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 const dispatcher = { dispatcher: 'ZoomButtons.vue' }
 
 const store = useStore()
+const is3dActive = computed(() => store.state.cesium.active)
+const resolution = computed(() => store.getters.resolution)
+
 useTippyTooltip('#zoomButtons [data-tippy-content]', { placement: 'left' })
 
+const getViewer = inject('getViewer')
+
+// The `step` variable is used with the 3D viewer. The goal was to find an increase or
+// decrease in the zoom that emulated a zoom level in an agreeable way. `200` here is a
+// magic number, found empirically, to achieve that goal.
+const step = computed(() => resolution.value * 200)
+
+function moveCamera(distance) {
+    const camera = getViewer().scene?.camera
+    if (camera) {
+        camera.flyTo({
+            destination: Ray.getPoint(new Ray(camera.position, camera.direction), distance),
+            orientation: {
+                heading: camera.heading,
+                pitch: camera.pitch,
+                roll: camera.roll,
+            },
+            duration: 0.25,
+        })
+    }
+}
+
 function increaseZoom() {
-    store.dispatch('increaseZoom', dispatcher)
+    if (is3dActive.value) {
+        moveCamera(step.value)
+    } else {
+        store.dispatch('increaseZoom', dispatcher)
+    }
 }
 function decreaseZoom() {
-    store.dispatch('decreaseZoom', dispatcher)
+    if (is3dActive.value) {
+        moveCamera(-step.value)
+    } else {
+        store.dispatch('decreaseZoom', dispatcher)
+    }
 }
 </script>