diff --git a/resources/assets/js/annotations/annotatorContainer.vue b/resources/assets/js/annotations/annotatorContainer.vue
index 04aa8e7a03..ade05d6de9 100644
--- a/resources/assets/js/annotations/annotatorContainer.vue
+++ b/resources/assets/js/annotations/annotatorContainer.vue
@@ -23,6 +23,8 @@ import {CrossOriginTiffError} from './stores/images.js';
 import {debounce} from '@/core/utils.js';
 import {handleErrorResponse} from '@/core/messages/store.js';
 import {urlParams as UrlParams} from '@/core/utils.js';
+import {LawnmowerSaveState} from './components/annotationCanvas/lawnmower.vue';
+import {useVolareMode} from './components/annotationCanvas/volare.js';
 
 const asyncAnnotationCanvas = defineAsyncComponent({
     loader: function () {
@@ -73,7 +75,6 @@ export default {
             mapResolution: undefined,
             selectedLabel: null,
             annotationMode: 'default',
-            focussedAnnotationIndex: null,
             // For lawnmower and sampling modes: When switching images, this determines
             // if the first (0) or the last (Infinity) image section/sampling location
             // should be shown.
@@ -89,13 +90,15 @@ export default {
             preferredUnit: 'auto',
             imagesArea: null,
             openTab: null,
-            userUpdatedVolareResolution: false,
             userId: null,
             crossOriginError: false,
             maybeCorsTiffError: false,
             imageFilenames: {},
             labelTrees: [],
             projectIds: [],
+            lawnmowerSaveState: "",
+            volare: null,
+            pauseLawnmowerAutomatically: false,
         };
     },
     provide() {
@@ -131,14 +134,8 @@ export default {
         selectedAnnotations() {
             return this.filteredAnnotations.filter((a) => a.selected);
         },
-        focussedAnnotation() {
-            return this.filteredAnnotations[this.focussedAnnotationIndex];
-        },
         isDefaultAnnotationMode() {
-            return this.annotationMode === 'default';
-        },
-        isVolareAnnotationMode() {
-            return this.annotationMode === 'volare';
+            return this.annotationMode === 'default' || this.annotationMode === 'volarePaused' || this.annotationMode === 'lawnmowerPaused';
         },
         isLawnmowerAnnotationMode() {
             return this.annotationMode === 'lawnmower';
@@ -206,20 +203,8 @@ export default {
                 return;
             }
 
-            if (this.isVolareAnnotationMode) {
-                if (this.focussedAnnotationIndex < (this.filteredAnnotations.length - 1)) {
-                    this.focussedAnnotationIndex++;
-                    return;
-                } else if (this.focussedAnnotationIndex === Infinity) {
-                    // This may happen if the volume has only one image and we can't
-                    // switch to the next image. Here, we want to go to the second
-                    // annotation of the image.
-                    this.focussedAnnotationIndex = Math.min(1, this.filteredAnnotations.length - 1);
-                } else {
-                    // Show the first annotation of the next image in this case, so
-                    // don't return.
-                    this.focussedAnnotationIndex = -Infinity;
-                }
+            if (this.volare.handleNextAnnotation()) {
+                return;
             } else if (this.isLawnmowerAnnotationMode) {
                 // This returns false if the image section can't be advanced (i.e.
                 // the last section is shown).
@@ -246,20 +231,8 @@ export default {
                 return;
             }
 
-            if (this.isVolareAnnotationMode) {
-                if (this.focussedAnnotationIndex > 0) {
-                    this.focussedAnnotationIndex--;
-                    return;
-                } else if (this.focussedAnnotationIndex === -Infinity) {
-                    // This may happen if the volume has only one image and we can't
-                    // switch to the next image. Here, we want to go to the second to
-                    // last annotation of the image.
-                    this.focussedAnnotationIndex = Math.max(this.filteredAnnotations.length - 2, 0);
-                } else {
-                    // Show the last annotation of the previous image in this case,
-                    // so don't return.
-                    this.focussedAnnotationIndex = Infinity;
-                }
+            if (this.volare.handlePreviousAnnotation()) {
+                return;
             } else if (this.isLawnmowerAnnotationMode) {
                 // This returns false if the image section can't be reversed (i.e.
                 // the first section is shown).
@@ -282,26 +255,6 @@ export default {
             // Show previous image.
             this.imageIndex = this.getPreviousIndex(this.imageIndex);
         },
-        maybeUpdateFocussedAnnotation() {
-            if (this.isVolareAnnotationMode) {
-                if (this.filteredAnnotations.length > 0) {
-                    if (this.focussedAnnotationIndex === Infinity) {
-                        // Show the last annotation if the previous image is shown.
-                        this.focussedAnnotationIndex = this.filteredAnnotations.length - 1;
-                    } else {
-                        // Show the first annotation if the next image is shown or
-                        // the annotation filter changed.
-                        this.focussedAnnotationIndex = 0;
-                    }
-                } else {
-                    // Show the whole image if there are no annotations.
-                    this.focussedAnnotationIndex = null;
-                    this.$refs.canvas.fitImage();
-                }
-            } else {
-                this.focussedAnnotationIndex = null;
-            }
-        },
         maybeUpdateShownImageSection() {
             if (this.isLawnmowerAnnotationMode) {
                 if (this.annotationModeCarry === Infinity) {
@@ -325,7 +278,6 @@ export default {
             }
         },
         maybeUpdateAnnotationMode(data) {
-            this.maybeUpdateFocussedAnnotation();
             this.maybeUpdateShownImageSection();
             this.maybeUpdateShownSampling(data);
         },
@@ -338,6 +290,9 @@ export default {
                 y: Math.round(viewport.center[1]),
             });
         },
+        handleMapMovestart() {
+            this.pauseLawnmowerAfterViewportChanged();
+        },
         // Handler for the select event fired by the global event bus.
         handleSelectAnnotation(annotation, shift) {
             // Handle the case where the second argument is an event object for
@@ -370,9 +325,6 @@ export default {
                 });
             }
         },
-        focusAnnotation(annotation, fast, keepResolution) {
-            this.$refs.canvas.focusAnnotation(annotation, fast, keepResolution);
-        },
         handleDetachAnnotationLabel(annotation, annotationLabel) {
             if (this.isEditor) {
                 if (annotation.labels.length > 1) {
@@ -411,13 +363,6 @@ export default {
                     .catch(handleErrorResponse);
             }
         },
-        selectAndFocusAnnotation(annotation, keepResolution) {
-            this.selectedAnnotations.forEach(function (a) {
-                a.selected = false;
-            });
-            annotation.selected = true;
-            this.focusAnnotation(annotation, true, keepResolution);
-        },
         handleFilter(filter) {
             this.annotationFilter = filter;
         },
@@ -471,7 +416,7 @@ export default {
                     confidence: 1,
                 };
 
-                if (this.isVolareAnnotationMode) {
+                if (this.annotationMode === 'volare') {
                     this.$refs.canvas.blinkAnnotation(annotation);
                 }
 
@@ -596,6 +541,31 @@ export default {
                     break;
             }
         },
+        enableAutomaticLawnmowerPausing() {
+            this.pauseLawnmowerAutomatically = true;
+        },
+        disableAutomaticLawnmowerPausing() {
+            this.pauseLawnmowerAutomatically = false;
+        },
+        pauseLawnmowerAfterViewportChanged() {
+            if (!this.isLawnmowerAnnotationMode || !this.pauseLawnmowerAutomatically) {
+                return;
+            }
+
+            this.$refs.annotationModesTab.pauseLawnmower();
+        },
+        pauseLawnmower(timestamp) {
+            this.$refs.annotationModesTab.pauseLawnmower(timestamp);
+        },
+        pauseVolare(timestamp) {
+            this.$refs.annotationModesTab.pauseVolare(timestamp);
+        },
+        showImageWithId(imageId) {
+            const index = this.imagesIds.indexOf(imageId);
+            if (index !== -1) {
+                this.imageIndex = index;
+            }
+        },
         handleAnnotationModeChange(mode, data) {
             this.annotationMode = mode;
             this.annotationModeCarry = null;
@@ -663,6 +633,9 @@ export default {
         openSidebarLabels() {
             this.openTab = 'labels';
         },
+        focusAnnotation(annotation, fast, keepResolution) {
+            this.$refs.canvas.focusAnnotation(annotation, fast, keepResolution);
+        }
     },
     watch: {
         async imageId(id) {
@@ -677,6 +650,11 @@ export default {
                 let [image, annotations] = await Promise.all(this.getImageAndAnnotationsPromises(id));
                 this.image = image;
                 this.annotations = annotations;
+
+                // Wait for the canvas to be updated, otherwise lawnmower mode
+                // may compute the current section using the old viewport
+                await this.$nextTick();
+
                 this.maybeUpdateAnnotationMode();
                 this.maybeShowTilingInProgressMessage();
             } catch (e) {
@@ -702,14 +680,6 @@ export default {
             // Twice the count because the next and previous images are cached.
             ImagesStore.setMaxCacheSize(count * 2);
         },
-        focussedAnnotation(annotation) {
-            if (annotation) {
-                this.selectAndFocusAnnotation(annotation, this.userUpdatedVolareResolution);
-            }
-        },
-        annotationFilter() {
-            this.maybeUpdateFocussedAnnotation();
-        },
         showScaleLine(show) {
             if (show) {
                 this.fetchImagesArea();
@@ -720,16 +690,6 @@ export default {
                 this.fetchImagesArea();
             }
         },
-        isVolareAnnotationMode(enabled) {
-            if (!enabled) {
-                this.userUpdatedVolareResolution = false;
-            }
-        },
-        mapResolution() {
-            if (this.isVolareAnnotationMode) {
-                this.userUpdatedVolareResolution = true;
-            }
-        },
         image(image) {
             this.crossOriginError = image?.crossOrigin;
         },
@@ -738,6 +698,15 @@ export default {
                 this.openTab = '';
             }
         },
+        annotationMode(newMode, oldMode) {
+            if (newMode === 'lawnmowerPaused') {
+                this.lawnmowerSaveState = LawnmowerSaveState.SAVE;
+            } else if (oldMode === 'lawnmowerPaused' && newMode === 'lawnmower') {
+                this.lawnmowerSaveState = LawnmowerSaveState.LOAD;
+            } else {
+                this.lawnmowerSaveState = LawnmowerSaveState.DISCARD;
+            }
+        }
     },
     created() {
         this.allImagesIds = biigle.$require('annotations.imagesIds');
@@ -789,7 +758,7 @@ export default {
                         // Use $nextTick so the annotationCanvas component has time to
                         // render the image.
                         this.$nextTick(
-                            () => this.selectAndFocusAnnotation(annotations[i])
+                            () => this.volare.selectAndFocusAnnotation(annotations[i])
                         );
                         return;
                     }
@@ -813,6 +782,19 @@ export default {
         Keyboard.on('C', this.selectLastAnnotation, 0, this.listenerSet);
 
         this.initLabelBot();
+
+        this.volare = useVolareMode({
+            filteredAnnotations: computed(() => this.filteredAnnotations),
+            selectedAnnotations: computed(() => this.selectedAnnotations),
+            focusAnnotationInCanvas: this.focusAnnotation,
+            fitImageInCanvas: (...args) => this.$refs.canvas.fitImage(...args),
+            annotationFilter: this.annotationFilter,
+            image: computed(() => this.image),
+            mapResolution: computed(() => this.mapResolution),
+            showImageWithId: this.showImageWithId,
+            annotationMode: computed(() => this.annotationMode),
+            restoreVolarePauseState: (timestamp) => this.$refs.annotationModesTab.pauseVolare(timestamp)
+        });
     },
 };
 </script>
diff --git a/resources/assets/js/annotations/components/annotationCanvas.vue b/resources/assets/js/annotations/components/annotationCanvas.vue
index a5d6801960..2e55e5f020 100644
--- a/resources/assets/js/annotations/components/annotationCanvas.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas.vue
@@ -60,6 +60,7 @@ export default {
     template: '#annotation-canvas-template',
     emits: [
         'moveend',
+        'movestart',
         'update',
         'select',
         'previous',
@@ -910,6 +911,7 @@ export default {
 
         this.map.on('change:size', this.updateMapSize);
         this.map.on('moveend', this.updateMapView);
+        this.map.on('movestart', () => this.$emit('movestart'));
         this.map.on('pointermove', this.updateMousePosition);
 
         this.selectInteraction.on('select', this.handleFeatureSelect);
diff --git a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue
index 3127c28636..da04e9a2de 100644
--- a/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue
+++ b/resources/assets/js/annotations/components/annotationCanvas/lawnmower.vue
@@ -1,10 +1,28 @@
 <script>
+export const LawnmowerSaveState = Object.freeze({
+    SAVE: 'save',
+    LOAD: 'load',
+    DISCARD: 'discard'
+});
+
 /**
  * Mixin for the annotationCanvas component that contains logic for Lawnmower Mode.
  *
  * @type {Object}
  */
 export default {
+    emits: [
+        'restore-lawnmower-image',
+        'lawnmower-pre-viewport-change',
+        'lawnmower-post-viewport-change',
+        'restore-lawnmower-pause-state',
+    ],
+    props: {
+        lawnmowerSaveState: {
+            type: String,
+            required: true
+        }
+    },
     data() {
         return {
             // The image section information is needed for the lawnmower cycling mode
@@ -12,6 +30,8 @@ export default {
             imageSection: [0, 0],
             // Actual center point of the current image section.
             imageSectionCenter: [0, 0],
+            restoringLawnmowerImageInProgress: false,
+            pageReloaded: true,
         };
     },
     computed: {
@@ -78,6 +98,7 @@ export default {
         },
         showImageSection(section) {
             if (section[0] < this.imageSectionSteps[0] && section[1] < this.imageSectionSteps[1] && section[0] >= 0 && section[1] >= 0) {
+                this.$emit('lawnmower-pre-viewport-change');
                 this.imageSection = section;
                 // Don't make imageSectionCenter a computed property because it
                 // would automatically update when the resolution changes. But we
@@ -85,6 +106,9 @@ export default {
                 // resolution watcher first!
                 this.imageSectionCenter = this.getImageSectionCenter(section);
                 this.map.getView().setCenter(this.imageSectionCenter);
+                this.map.once('rendercomplete', () => {
+                    this.$emit('lawnmower-post-viewport-change');
+                });
                 return true;
             }
 
@@ -118,33 +142,104 @@ export default {
                 return this.showImageSection([0, this.imageSection[1] + 1]);
             }
         },
-    },
-    watch: {
-        // Update the current image section if either the resolution or the map size
-        // changed. viewExtent depends on both so we can use it as watcher.
-        viewExtent() {
-            if (!this.isLawnmowerAnnotationMode || !Number.isInteger(this.imageSectionSteps[0]) || !Number.isInteger(this.imageSectionSteps[1])) {
+        getLawnmowerStorageKey() {
+            const volumeId = biigle.$require('annotations.volumeId');
+            return `lawnmower-state-${volumeId}`;
+        },
+        saveCurrentLawnmowerState() {
+            if (this.getSavedLawnmowerState()) {
                 return;
             }
-            let distance = function (p1, p2) {
-                return Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2));
+            const view = this.map.getView();
+            const state = {
+                imageId: this.image.id,
+                center: view.getCenter(),
+                resolution: view.getResolution(),
+                imageSection: [...this.imageSection],
+                timestamp: Date.now(),
             };
 
-            let nearest = Infinity;
-            let current = 0;
-            let nearestStep = [0, 0];
-            for (let y = 0; y < this.imageSectionSteps[1]; y++) {
-                for (let x = 0; x < this.imageSectionSteps[0]; x++) {
-                    current = distance(this.imageSectionCenter, this.getImageSectionCenter([x, y]));
-                    if (current < nearest) {
-                        nearestStep[0] = x;
-                        nearestStep[1] = y;
-                        nearest = current;
-                    }
+            localStorage.setItem(
+                this.getLawnmowerStorageKey(),
+                JSON.stringify(state)
+            );
+        },
+        discardSavedLawnmowerState() {
+            localStorage.removeItem(this.getLawnmowerStorageKey());
+        },
+        getSavedLawnmowerState() {
+            const raw = localStorage.getItem(this.getLawnmowerStorageKey());
+            if (!raw) {
+                return null;
+            }
+            return JSON.parse(raw);
+        },
+        loadSavedLawnmowerState() {
+            const state = this.getSavedLawnmowerState();
+            if (!state) {
+                return;
+            }
+
+            if (state.imageId !== this.image?.id) {
+                this.restoringLawnmowerImageInProgress = true;
+                this.$emit('restore-lawnmower-image', state.imageId);
+                return;
+            }
+
+            this.applySavedLawnmowerState();
+        },
+        applySavedLawnmowerState() {
+            const state = this.getSavedLawnmowerState();
+            if (!state || !this.image || state.imageId !== this.image.id) {
+                return;
+            }
+
+            this.$emit('lawnmower-pre-viewport-change');
+
+            const view = this.map.getView();
+            view.setResolution(state.resolution);
+
+            this.$nextTick(() => {
+                this.imageSectionCenter = state.center;
+                this.imageSection = state.imageSection;
+                view.setCenter(state.center);
+                this.discardSavedLawnmowerState();
+                this.map.once('rendercomplete', () => {
+                    this.$emit('lawnmower-post-viewport-change');
+                });
+            });
+
+        },
+    },
+    watch: {
+        image() {
+            const state = this.getSavedLawnmowerState();
+            if (this.pageReloaded) {
+                if (state) {
+                    this.$emit('restore-lawnmower-pause-state', state.timestamp);
                 }
+                this.pageReloaded = false;
+
+                return;
             }
 
-            this.showImageSection(nearestStep);
+            if (state && this.restoringLawnmowerImageInProgress) {
+                this.$nextTick(() => this.applySavedLawnmowerState());
+                this.restoringLawnmowerImageInProgress = false;
+            }
+        },
+        lawnmowerSaveState(newState) {
+            switch(newState) {
+                case LawnmowerSaveState.SAVE:
+                    this.saveCurrentLawnmowerState();
+                    break;
+                case LawnmowerSaveState.LOAD:
+                    this.loadSavedLawnmowerState();
+                    break;
+                case LawnmowerSaveState.DISCARD:
+                    this.discardSavedLawnmowerState();
+                    break;
+            }
         },
     },
 };
diff --git a/resources/assets/js/annotations/components/annotationCanvas/volare.js b/resources/assets/js/annotations/components/annotationCanvas/volare.js
new file mode 100644
index 0000000000..c979bdc80a
--- /dev/null
+++ b/resources/assets/js/annotations/components/annotationCanvas/volare.js
@@ -0,0 +1,209 @@
+import { ref, computed, watch, nextTick } from 'vue';
+import { required } from '@/utils.js';
+
+
+export function useVolareMode({
+    filteredAnnotations = required('filteredAnnotations'),
+    selectedAnnotations = required('selectedAnnotations'),
+    focusAnnotationInCanvas = required('focusAnnotationInCanvas'),
+    fitImageInCanvas = required('fitImageInCanvas'),
+    annotationFilter = required('annotationFilter'),
+    image = required('image'),
+    mapResolution = required('mapResolution'),
+    showImageWithId = required('showImageWithId'),
+    annotationMode = required('annotationMode'),
+    restoreVolarePauseState = required('restoreVolarePauseState'),
+}) {
+    const focussedAnnotationIndex = ref(null);
+    const resolutionWasChangedByUser = ref(false);
+    let resuming = false;
+    let pageReloaded = true;
+
+    const focussedAnnotation = computed(() => {
+        return filteredAnnotations.value[focussedAnnotationIndex.value];
+    });
+
+    const volareModeIsActive = computed(() => {
+        return annotationMode.value === 'volare';
+    });
+
+    function getVolareStorageKey() {
+        const volumeId = biigle.$require('annotations.volumeId');
+        return `volare-state-${volumeId}`;
+    }
+
+    function saveCurrentVolareState() {
+        if (getSavedVolareState()) {
+            return;
+        }
+
+        const state = {
+            imageId: image.value.id,
+            focussedAnnotationId: focussedAnnotation.value?.id,
+            timestamp: Date.now(),
+        };
+
+        localStorage.setItem(
+            getVolareStorageKey(),
+            JSON.stringify(state)
+        );
+    }
+
+    function discardSavedVolareState() {
+        localStorage.removeItem(getVolareStorageKey());
+    }
+
+    function getSavedVolareState() {
+        const raw = localStorage.getItem(getVolareStorageKey());
+        if (!raw) {
+            return null;
+        }
+        return JSON.parse(raw);
+    }
+
+    function selectAndFocusAnnotation(annotation, keepResolution = false) {
+        selectedAnnotations.value.forEach(a => {
+            a.selected = false;
+        });
+        annotation.selected = true;
+        focusAnnotationInCanvas(annotation, true, keepResolution);
+    }
+
+    function updateFocussedAnnotation() {
+        if (getSavedVolareState()) {
+            return;
+        } else if (!volareModeIsActive.value) {
+            focussedAnnotationIndex.value = null;
+            return;
+        } else if (filteredAnnotations.value.length === 0) {
+            // Show the whole image if there are no annotations.
+            focussedAnnotationIndex.value = null;
+            fitImageInCanvas();
+            return;
+        }
+
+        if (focussedAnnotationIndex.value === Infinity) {
+            // Show the last annotation if the previous image is shown.
+            focussedAnnotationIndex.value = filteredAnnotations.value.length - 1;
+        } else {
+            // Show the first annotation if the next image is shown or
+            // the annotation filter changed.
+            focussedAnnotationIndex.value = 0;
+        }
+    }
+
+    function handleNextAnnotation() {
+        if (!volareModeIsActive.value) {
+            return false;
+        }
+
+        if (focussedAnnotationIndex.value < (filteredAnnotations.value.length - 1)) {
+            focussedAnnotationIndex.value++;
+            return true;
+        } else if (focussedAnnotationIndex.value === Infinity) {
+            // This may happen if the volume has only one image and we can't
+            // switch to the next image. Here, we want to go to the second
+            // annotation of the image.
+            focussedAnnotationIndex.value = Math.min(1, filteredAnnotations.value.length - 1);
+        } else {
+            // Show the first annotation of the next image in this case
+            focussedAnnotationIndex.value = -Infinity;
+        }
+
+        return false;
+    }
+
+    function handlePreviousAnnotation() {
+        if (!volareModeIsActive.value) {
+            return false;
+        }
+
+        if (focussedAnnotationIndex.value > 0) {
+            focussedAnnotationIndex.value--;
+            return true;
+        } else if (focussedAnnotationIndex.value === -Infinity) {
+            // This may happen if the volume has only one image and we can't
+            // switch to the next image. Here, we want to go to the second to
+            // last annotation of the image.
+            focussedAnnotationIndex.value = Math.max(filteredAnnotations.value.length - 2, 0);
+        } else {
+            // Show the last annotation of the previous image in this case
+            focussedAnnotationIndex.value = Infinity;
+        }
+
+        return false;
+    }
+
+    function loadSavedVolareState() {
+        const state = getSavedVolareState();
+        if (!state) {
+            return;
+        }
+
+        resuming = true;
+        if (state.imageId !== image.value.id) {
+            showImageWithId(state.imageId);
+            return;
+        }
+
+        const savedID = state.focussedAnnotationId;
+        discardSavedVolareState();
+        resuming = false;
+
+        focussedAnnotationIndex.value = null;
+        nextTick(() => {
+            const index = filteredAnnotations.value.findIndex(a => a.id === savedID);
+            focussedAnnotationIndex.value = index === -1 ? 0 : index;
+        });
+    }
+
+    watch(focussedAnnotation, (annotation) => {
+        if (volareModeIsActive.value && annotation) {
+            selectAndFocusAnnotation(annotation, resolutionWasChangedByUser.value);
+        }
+    });
+    watch(() => annotationFilter?.value, updateFocussedAnnotation);
+    watch(annotationMode, (newMode, oldMode) => {
+        if (newMode === 'volarePaused') {
+            saveCurrentVolareState();
+        } else if (oldMode === 'volarePaused' && newMode === 'volare') {
+            loadSavedVolareState();
+        } else {
+            discardSavedVolareState();
+        }
+    });
+    watch(volareModeIsActive, (enabled) => {
+        if (enabled) {
+            updateFocussedAnnotation();
+        } else {
+            resolutionWasChangedByUser.value = false;
+        }
+    });
+    watch(() => image?.value, () => {
+        const state = getSavedVolareState();
+        if (pageReloaded) {
+            if (state) {
+                restoreVolarePauseState(state.timestamp);
+            }
+            pageReloaded = false;
+            return;
+        }
+
+        if (resuming) {
+            nextTick(loadSavedVolareState);
+        } else if (volareModeIsActive.value) {
+            nextTick(updateFocussedAnnotation);
+        }
+    });
+    watch(mapResolution, () => {
+        if (volareModeIsActive.value) {
+            resolutionWasChangedByUser.value = true;
+        }
+    });
+
+    return {
+        selectAndFocusAnnotation,
+        handleNextAnnotation,
+        handlePreviousAnnotation,
+    };
+}
\ No newline at end of file
diff --git a/resources/assets/js/annotations/components/annotationModesTab.vue b/resources/assets/js/annotations/components/annotationModesTab.vue
index 975d55f655..e6809d8179 100644
--- a/resources/assets/js/annotations/components/annotationModesTab.vue
+++ b/resources/assets/js/annotations/components/annotationModesTab.vue
@@ -2,6 +2,8 @@
 import Events from '@/core/events.js';
 import Keyboard from '@/core/keyboard.js';
 import PowerToggle from '@/core/components/powerToggle.vue';
+import PlayPause from '@/core/components/playPause.vue';
+import { PlayPauseState } from '@/core/components/playPause.vue';
 import Settings from '../stores/settings.js';
 import {urlParams as UrlParams} from '@/core/utils.js';
 
@@ -14,11 +16,12 @@ export default {
     template: '#annotation-modes-tab-template',
     emits: [
         'attach-label',
-        'change',
+        'annotation-mode-changed',
         'create-sample',
     ],
     components: {
         powerToggle: PowerToggle,
+        playPause: PlayPause
     },
     data() {
         return {
@@ -26,7 +29,9 @@ export default {
             modes: [
                 'default',
                 'volare',
+                'volarePaused',
                 'lawnmower',
+                'lawnmowerPaused',
                 'randomSampling',
                 'regularSampling',
             ],
@@ -38,6 +43,8 @@ export default {
             randomSamplingNumber: 9,
             regularSamplingRows: 3,
             regularSamplingColumns: 3,
+            lawnmowerPausedAt: null,
+            volarePausedAt: null,
         };
     },
     computed: {
@@ -53,27 +60,63 @@ export default {
         isRegularSamplingActive() {
             return this.mode === 'regularSampling';
         },
+        lawnmowerPausedAtText() {
+            return this.lawnmowerPausedAt ? this.timeAgo(this.lawnmowerPausedAt) : null;
+        },
+        volarePausedAtText() {
+            return this.volarePausedAt ? this.timeAgo(this.volarePausedAt) : null;
+        },
+        currentLawnmowerState() {
+            if (this.mode === 'lawnmower') {
+                return PlayPauseState.ACTIVE;
+            } else if (this.mode === 'lawnmowerPaused') {
+                return PlayPauseState.PAUSED;
+            } else {
+                return PlayPauseState.INACTIVE;
+            }
+        },
+        currentVolareState() {
+            if (this.mode === 'volare') {
+                return PlayPauseState.ACTIVE;
+            } else if (this.mode === 'volarePaused') {
+                return PlayPauseState.PAUSED;
+            } else {
+                return PlayPauseState.INACTIVE;
+            }
+        }
     },
     methods: {
         startVolare() {
             this.setMode('volare');
         },
+        pauseVolare(timestamp) {
+            this.setMode('volarePaused');
+            this.volarePausedAt = timestamp;
+        },
         startLawnmower() {
             this.setMode('lawnmower');
         },
+        pauseLawnmower(timestamp) {
+            this.setMode('lawnmowerPaused');
+            this.lawnmowerPausedAt = timestamp;
+        },
         startRandomSampling() {
             this.setMode('randomSampling');
         },
         startRegularSampling() {
             this.setMode('regularSampling');
         },
-        setMode(mode) {
-            if (this.modes.indexOf(mode) !== -1) {
-                this.mode = mode;
+        setMode(newMode) {
+            if (this.modes.indexOf(newMode) === -1) {
+                return;
             }
+
+            this.mode = newMode;
+            this.lawnmowerPausedAt = null;
+            this.volarePausedAt = null;
         },
         resetMode() {
-            this.mode = 'default';
+            this.setMode('default');
         },
         emitAttachLabel() {
             this.$emit('attach-label');
@@ -81,9 +124,39 @@ export default {
         emitCreateSample() {
             this.$emit('create-sample');
         },
-    },
-    watch: {
-        mode(mode, oldMode) {
+        updateLawnmowerState(targetState) {
+            switch (targetState) {
+                case PlayPauseState.INACTIVE:
+                    this.resetMode();
+                    break;
+                case PlayPauseState.ACTIVE:
+                    this.startLawnmower();
+                    break;
+                case PlayPauseState.PAUSED:
+                    this.pauseLawnmower();
+                    break;
+            }
+        },
+        onLawnmowerPlayPauseTransitionRequested(targetState) {
+            this.updateLawnmowerState(targetState);
+        },
+        updateVolareState(targetState) {
+            switch (targetState) {
+                case PlayPauseState.INACTIVE:
+                    this.resetMode();
+                    break;
+                case PlayPauseState.ACTIVE:
+                    this.startVolare();
+                    break;
+                case PlayPauseState.PAUSED:
+                    this.pauseVolare();
+                    break;
+            }
+        },
+        onVolarePlayPauseTransitionRequested(targetState) {
+            this.updateVolareState(targetState);
+        },
+        updateKeyBinds(newMode, oldMode) {
             switch (oldMode) {
                 case 'volare':
                     Keyboard.off('Enter', this.emitAttachLabel);
@@ -94,7 +167,7 @@ export default {
                     break;
             }
 
-            switch (mode) {
+            switch (newMode) {
                 case 'volare':
                     Keyboard.on('Enter', this.emitAttachLabel);
                     break;
@@ -103,19 +176,46 @@ export default {
                     Keyboard.on('Enter', this.emitCreateSample);
                     break;
             }
-
-            // Emit event.
-            switch (mode) {
+        },
+        emitModeSignals(newMode) {
+            switch (newMode) {
                 case 'randomSampling':
-                    this.$emit('change', mode, this.randomSamplingNumber);
+                    this.$emit('annotation-mode-changed', newMode, this.randomSamplingNumber);
                     break;
                 case 'regularSampling':
-                    this.$emit('change', mode, [this.regularSamplingRows, this.regularSamplingColumns]);
+                    this.$emit('annotation-mode-changed', newMode, [this.regularSamplingRows, this.regularSamplingColumns]);
                     break;
                 default:
-                    this.$emit('change', mode);
+                    this.$emit('annotation-mode-changed', newMode);
             }
         },
+        timeAgo(timestamp) {
+            const seconds = Math.floor((Date.now() - timestamp) / 1000);
+            const secondsPerDay = 86400;
+
+            const units = [
+                { name: 'y', seconds: secondsPerDay * 365},
+                { name: 'd', seconds: secondsPerDay },
+                { name: 'h', seconds: 3600 },
+                { name: 'min', seconds: 60 },
+                { name: 's', seconds: 1 },
+            ];
+
+            for (const unit of units) {
+                if (seconds >= unit.seconds) {
+                    const value = Math.round(seconds / unit.seconds);
+                    return `${value}${unit.name} ago`;
+                }
+            }
+
+            return '0s ago';
+        },
+    },
+    watch: {
+        mode(newMode, oldMode) {
+            this.updateKeyBinds(newMode, oldMode);
+            this.emitModeSignals(newMode);
+        },
         randomSamplingNumber(number) {
             Settings.set('randomSamplingNumber', number);
         },
diff --git a/resources/assets/js/core/components/playPause.vue b/resources/assets/js/core/components/playPause.vue
new file mode 100644
index 0000000000..486d231277
--- /dev/null
+++ b/resources/assets/js/core/components/playPause.vue
@@ -0,0 +1,84 @@
+<template>
+    <button
+        type="button"
+        class="btn btn-default"
+        :class="playButtonClass"
+        :title="playButtonTitle"
+        @click="playButtonClicked"
+    ><i class="fa fa-fw" :class="playButtonIconClass"></i></button>
+
+    <button
+        type="button"
+        class="btn btn-default"
+        :title="pauseButtonTitleText"
+        :disabled="pauseButtonDisabled"
+        :class="pauseButtonClass"
+        @click="pauseButtonClicked"
+    ><i class="fa fa-fw fa-pause"></i></button>
+</template>
+
+<script>
+export const PlayPauseState = Object.freeze({
+    INACTIVE: 'inactive',
+    ACTIVE: 'active',
+    PAUSED: 'paused'
+});
+
+const INACTIVE = PlayPauseState.INACTIVE;
+const ACTIVE = PlayPauseState.ACTIVE;
+const PAUSED = PlayPauseState.PAUSED;
+
+export default {
+    emits: [
+        'transition-requested'
+    ],
+    props: {
+        state: {
+            type: String,
+            required: true
+        },
+        playButtonTitleText: {
+            type: String,
+            required: true
+        },
+        stopButtonTitleText: {
+            type: String,
+            required: true
+        },
+        pauseButtonTitleText: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        playButtonIconClass() {
+            return this.is(ACTIVE) ? 'fa-stop' : 'fa-play';
+        },
+        playButtonClass() {
+            return this.is(ACTIVE) ? 'active btn-info' : '';
+        },
+        pauseButtonClass() {
+            return this.is(PAUSED) ? 'active btn-info' : '';
+        },
+        playButtonTitle() {
+            return this.is(ACTIVE) ? this.stopButtonTitleText : this.playButtonTitleText;
+        },
+        pauseButtonDisabled() {
+            return this.is(INACTIVE);
+        },
+    },
+    methods: {
+        is(state) {
+            return this.state === state;
+        },
+        playButtonClicked() {
+            const targetState = this.is(ACTIVE) ? INACTIVE : ACTIVE;
+            this.$emit('transition-requested', targetState);
+        },
+        pauseButtonClicked() {
+            const targetState = this.is(ACTIVE) ? PAUSED : INACTIVE;
+            this.$emit('transition-requested', targetState);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/core/components/powerToggle.vue b/resources/assets/js/core/components/powerToggle.vue
index 49ff2cc5aa..3345eb6924 100644
--- a/resources/assets/js/core/components/powerToggle.vue
+++ b/resources/assets/js/core/components/powerToggle.vue
@@ -48,10 +48,14 @@ export default {
             type: String,
             default: 'info',
         },
-        icon: {
+        iconOn: {
             type: String,
             default: 'power-off',
         },
+        iconOff: {
+            type: String,
+            default: 'power-off'
+        },
         disabled: {
             type: Boolean,
             default: false,
@@ -72,7 +76,11 @@ export default {
             return obj;
         },
         iconClass() {
-            return `fa-${this.icon}`;
+            if (this.active) {
+                return `fa-${this.iconOn}`;
+            } else {
+                return `fa-${this.iconOff}`;
+            }
         },
     },
     methods: {
diff --git a/resources/assets/js/utils.js b/resources/assets/js/utils.js
index 8f4b45e354..9c39edae08 100644
--- a/resources/assets/js/utils.js
+++ b/resources/assets/js/utils.js
@@ -62,6 +62,10 @@ let declare = function (namespace, object) {
     return object;
 };
 
+function required(name) {
+    throw new Error(`Missing required parameter '${name}'`);
+}
+
 function setOrUnsetProperty(feature, property, value) {
     if (!feature) {
         return;
@@ -74,4 +78,4 @@ function setOrUnsetProperty(feature, property, value) {
     }
 }
 
-export {mount, require, declare, setOrUnsetProperty};
+export { mount, require, required, declare, setOrUnsetProperty };
diff --git a/resources/assets/sass/annotations/sidebar/_main.scss b/resources/assets/sass/annotations/sidebar/_main.scss
index 7032e658dc..ab97ea6395 100644
--- a/resources/assets/sass/annotations/sidebar/_main.scss
+++ b/resources/assets/sass/annotations/sidebar/_main.scss
@@ -14,9 +14,15 @@
             margin-top: 0;
         }
     }
+
+    .sidebar-tab__timestamp {
+        padding-left: 2px;
+        color: $text-muted;
+        font-size: $font-size-small;
+    }
 }
 
 @import "labels";
 @import "annotation-modes";
 @import "image-labels";
-@import "settingsTab";
+@import "settingsTab";
\ No newline at end of file
diff --git a/resources/views/annotations/show.blade.php b/resources/views/annotations/show.blade.php
index 18ec249ce4..6aa4d36463 100644
--- a/resources/views/annotations/show.blade.php
+++ b/resources/views/annotations/show.blade.php
@@ -100,9 +100,11 @@
             :focused-popup-key="focusedPopupKey"
             :labelbot-timeout="labelbotTimeout"
             :draft-annotation-uses-label-color="draftAnnotationUsesLabelColor"
+            :lawnmower-save-state="lawnmowerSaveState"
             v-on:change-labelbot-focused-popup="changeLabelbotFocusedPopup"
             v-on:close-labelbot-popup="closeLabelbotPopup"
             v-on:moveend="handleMapMoveend"
+            v-on:movestart="handleMapMovestart"
             v-on:previous="handlePrevious"
             v-on:next="handleNext"
             v-on:new="handleNewAnnotation"
@@ -115,6 +117,10 @@
             v-on:measuring="fetchImagesArea"
             v-on:requires-selected-label="handleRequiresSelectedLabel"
             v-on:is-invalid-shape="handleInvalidShape"
+            v-on:restore-lawnmower-image="showImageWithId"
+            v-on:lawnmower-pre-viewport-change="disableAutomaticLawnmowerPausing"
+            v-on:lawnmower-post-viewport-change="enableAutomaticLawnmowerPausing"
+            v-on:restore-lawnmower-pause-state="pauseLawnmower"
             ref="canvas"
             ></annotation-canvas>
     </div>
diff --git a/resources/views/annotations/show/tabs/annotationModes.blade.php b/resources/views/annotations/show/tabs/annotationModes.blade.php
index 3b61240737..d42eacc01c 100644
--- a/resources/views/annotations/show/tabs/annotationModes.blade.php
+++ b/resources/views/annotations/show/tabs/annotationModes.blade.php
@@ -1,5 +1,9 @@
 <sidebar-tab name="annotation-modes" icon="th" title="Annotation modes" :highlight="!isDefaultAnnotationMode">
-    <annotation-modes-tab v-on:attach-label="handleAttachAllSelected" v-on:change="handleAnnotationModeChange" v-on:create-sample="createSampledAnnotation"></annotation-modes-tab>
+    <annotation-modes-tab
+        ref="annotationModesTab"
+        v-on:attach-label="handleAttachAllSelected"
+        v-on:annotation-mode-changed="handleAnnotationModeChange"
+        v-on:create-sample="createSampledAnnotation"></annotation-modes-tab>
 </sidebar-tab>
 
 @push('scripts')
@@ -7,27 +11,55 @@
     <div class="annotator-tab annotator-tab--annotation-modes">
         <div class="sidebar-tab__section">
             <h5 title="Cycle through all annotations">Volume Label Review<br><small>cycle through annotations</small></h5>
-            <power-toggle :active="isVolareActive" title-off="Start cycling through all annotations" title-on="Stop cycling through all annotations 𝗘𝘀𝗰" v-on:on="startVolare" v-on:off="resetMode"></power-toggle>
+            <play-pause
+                playButtonTitleText="Start cycling through all annotations"
+                stopButtonTitleText="Stop cycling through all annotations 𝗘𝘀𝗰"
+                pauseButtonTitleText="Pause Volare"
+                :state="currentVolareState"
+                @transition-requested="onVolarePlayPauseTransitionRequested"
+            ></play-pause>
             @can('add-annotation', $image)
                 <button class="btn btn-default" :disabled="!isVolareActive || null" v-on:click="emitAttachLabel" title="Attach the currently selected label to the selected annotation 𝗘𝗻𝘁𝗲𝗿"><span class="fa fa-plus" aria-hidden="true"></span></button>
             @endcan
+            <span class="sidebar-tab__timestamp" v-text="volarePausedAtText"></span>
         </div>
 
         <div class="sidebar-tab__section">
             <h5 title="Cycle through image sections">Lawnmower Mode<br><small>cycle through image sections</small></h5>
-            <power-toggle :active="isLawnmowerActive" title-off="Start cycling through image sections" title-on="Stop cycling through image sections 𝗘𝘀𝗰" v-on:on="startLawnmower" v-on:off="resetMode"></power-toggle>
+            <play-pause
+                playButtonTitleText="Start cycling through image sections"
+                stopButtonTitleText="Stop cycling through image sections 𝗘𝘀𝗰"
+                pauseButtonTitleText="Pause Lawnmower"
+                :state="currentLawnmowerState"
+                @transition-requested="onLawnmowerPlayPauseTransitionRequested"
+            ></play-pause>
+            <span class="sidebar-tab__timestamp" v-text="lawnmowerPausedAtText"></span>
         </div>
         @can('add-annotation', $image)
             <div class="sidebar-tab__section">
                 <h5 title="Randomly sample annotations">Random Sampling<br><small>randomly sample annotations</small></h5>
-                <power-toggle :active="isRandomSamplingActive" title-off="Start random sampling of annotations" title-on="Stop random sampling of annotations 𝗘𝘀𝗰" v-on:on="startRandomSampling" v-on:off="resetMode"></power-toggle>
+                <power-toggle
+                    :active="isRandomSamplingActive"
+                    title-off="Start random sampling of annotations"
+                    title-on="Stop random sampling of annotations 𝗘𝘀𝗰"
+                    v-on:on="startRandomSampling"
+                    v-on:off="resetMode"
+                    icon-on="stop"
+                    icon-off="play"></power-toggle>
                 <button class="btn btn-default" :disabled="!isRandomSamplingActive || null" v-on:click="emitCreateSample" title="Create a new annotation at the current location 𝗘𝗻𝘁𝗲𝗿"><span class="fa fa-plus" aria-hidden="true"></span></button>
                 <input type="number" class="form-control form-control--small" min="1" step="1" title="Number of random samples per image" v-model="randomSamplingNumber" v-bind:disabled="isRandomSamplingActive || null">
             </div>
 
             <div class="sidebar-tab__section">
                 <h5 title="Regularly sample annotations">Regular Sampling<br><small>regularly sample annotations</small></h5>
-                <power-toggle :active="isRegularSamplingActive" title-off="Start regular sampling of annotations" title-on="Stop regular sampling of annotations 𝗘𝘀𝗰" v-on:on="startRegularSampling" v-on:off="resetMode"></power-toggle>
+                <power-toggle
+                    :active="isRegularSamplingActive"
+                    title-off="Start regular sampling of annotations"
+                    title-on="Stop regular sampling of annotations 𝗘𝘀𝗰"
+                    v-on:on="startRegularSampling"
+                    v-on:off="resetMode"
+                    icon-on="stop"
+                    icon-off="play"></power-toggle>
                 <button class="btn btn-default" :disabled="!isRegularSamplingActive || null" v-on:click="emitCreateSample" title="Create a new annotation at the current location 𝗘𝗻𝘁𝗲𝗿"><span class="fa fa-plus" aria-hidden="true"></span></button>
                 <input type="number" class="form-control form-control--small" min="1" step="1" title="Number of regular sample rows per image" v-model="regularSamplingRows" v-bind:disabled="isRegularSamplingActive || null">
                 &times;