diff --git a/package-lock.json b/package-lock.json
index 6e78c867..3a4a41cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "exponential-backoff": "^3.1.1",
         "file-saver": "^2.0.5",
         "html-loader": "4.2.0",
+        "html2canvas": "^1.4.1",
         "inquirer": "^8.2.0",
         "jszip": "^3.7.1",
         "jszip-utils": "^0.1.0",
@@ -74,7 +75,6 @@
         "stylelint": "^16.6.1",
         "stylelint-config-property-sort-order-smacss": "^10.0.0",
         "stylelint-config-standard": "^36.0.1",
-        "ts-node": "^10.9.2",
         "vue-cli-plugin-vuetify": "^2.4.3",
         "vue-template-compiler": "^2.6.11",
         "vuetify-loader": "^1.9.2"
@@ -6413,6 +6413,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -8433,6 +8442,15 @@
         "node": ">=12 || >=16"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -12604,6 +12622,19 @@
         "object-assign": "^4.0.1"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -46888,6 +46919,15 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -47854,6 +47894,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
diff --git a/package.json b/package.json
index 86a9a70a..7135329f 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "exponential-backoff": "^3.1.1",
     "file-saver": "^2.0.5",
     "html-loader": "4.2.0",
+    "html2canvas": "^1.4.1",
     "inquirer": "^8.2.0",
     "jszip": "^3.7.1",
     "jszip-utils": "^0.1.0",
diff --git a/public/translations/en.json b/public/translations/en.json
index ceb8cc12..962a8630 100644
--- a/public/translations/en.json
+++ b/public/translations/en.json
@@ -95,5 +95,6 @@
   "whatIsYourEmail": "What is your email?",
   "whoAreYou": "Who are you?",
   "wmsLayer": "WMS layer",
-  "wmsUrl": "WMS url"
+  "wmsUrl": "WMS url",
+  "screenshot": "Take a snapshot of the current view and save it to png"
 }
diff --git a/public/translations/nl.json b/public/translations/nl.json
index 3cce7dbb..9d32f2f1 100644
--- a/public/translations/nl.json
+++ b/public/translations/nl.json
@@ -95,5 +95,6 @@
   "whatIsYourEmail": "Wat is uw e-mailadres?",
   "whoAreYou": "Wie bent u?",
   "wmsLayer": "WMS laag",
-  "wmsUrl": "WMS url"
+  "wmsUrl": "WMS url",
+  "screenshot": "Maak een snapshot van het huidige weergave en sla deze op naar png"
 }
diff --git a/src/App.vue b/src/App.vue
index af016fb6..c7bb9dc3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,7 @@
         :items="localeItems"
         @input="switchLocaleAndAddViewerData($event.title)"
       />
+      <screenshot-button  :map="mapInstance" />
       <burger-menu
         :loadingburger="localeIsLoading"
         @open-contact-form="onOpenContactForm"
@@ -59,6 +60,7 @@
     />
 
     <v-mapbox
+      ref="mapbox"
       slot="map"
       :access-token="accessToken"
       map-style="mapbox://styles/siggyf/ckww2c33f0xlf15nujlx41fe2"
@@ -66,6 +68,7 @@
       :zoom="mapZoom"
       class="mapbox-map"
       :style="`--sidebar-width: ${appNavigationWidth}px`"
+      :map-options="{ preserveDrawingBuffer: true }" 
       @mb-load="setMapLoaded"
     >
       <time-slider
@@ -141,6 +144,7 @@
   import FeedbackDialog from './components/FeedbackDialog/FeedbackDialog.vue'
   import AcknowledgmentsDialog from '~/components/AcknowledgmentsDialog/AcknowledgmentsDialog.vue'
   import { getCookie, setCookie } from './lib/cookies'
+  import ScreenshotButton from '~/components/ScreenshotButton/ScreenshotButton'
 
   const removeRegion = locale => locale.replace(/-.+/, '')
   const localeIsAvailable = locale => availableLocales.includes(locale)
@@ -166,6 +170,7 @@
       UserAgreementDialog,
       FeedbackDialog,
       AcknowledgmentsDialog,
+      ScreenshotButton
     },
 
     data: () => ({
@@ -188,6 +193,7 @@
       feedbackDialogOpen: false,
       clickedUserAgreementOpen: false,
       acknowledgmentsDialogOpen: false,
+      mapInstance: null
     }),
 
     computed: {
@@ -220,6 +226,14 @@
     },
 
     mounted() {
+      this.$nextTick(() => {
+        if (this.$refs.mapbox && this.$refs.mapbox.map) {
+          this.mapInstance = this.$refs.mapbox.map;
+        } else {
+          console.error("Mapbox instance is not available");
+        }
+      });
+
       this.$router.onReady(async (route) => {
         const savedLocale = window.localStorage.getItem('locale')
         let browserLocales = []
diff --git a/src/components/ScreenshotButton/ScreenshotButton.vue b/src/components/ScreenshotButton/ScreenshotButton.vue
new file mode 100644
index 00000000..b3b77e70
--- /dev/null
+++ b/src/components/ScreenshotButton/ScreenshotButton.vue
@@ -0,0 +1,167 @@
+<template>
+  <v-tooltip bottom max-width="200px">
+    <template v-slot:activator="{ on }">
+      <v-btn
+        class="ma-auto"
+        v-on="on"
+        icon
+        @click="snapShot"
+      >
+        <v-icon> mdi-content-save </v-icon>
+      </v-btn>
+    </template>
+    <span>
+      {{ $t('screenshot') }}
+    </span>
+  </v-tooltip>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  import html2canvas from 'html2canvas';
+
+  export default {
+    props: {
+      map: Object
+    },
+    computed: {
+      ...mapGetters('app', [ 'viewerName' ]),
+    },
+    methods: {
+      async snapShot() {
+        if (!this.map) {
+          console.error("Map instance is not available");
+          return;
+        }
+      
+        // Ensure the Layer Order component is expanded before capturing
+        const layerOrderElement = document.querySelector(".layer-order");
+        if (!layerOrderElement) {
+          console.error("Layer order UI not found");
+          return;
+        }
+        layerOrderElement.classList.add("layer-order--open");
+      
+        // Ensure the Mapbox Legend component is expanded before capturing
+        const mapLegendElement = document.querySelector(".map-legend");
+        if (!mapLegendElement) {
+          console.error("Map legend UI not found");
+          return;
+        }
+        mapLegendElement.classList.add("map-legend--open");
+      
+        // Expand all legend items
+        document.querySelectorAll(".map-legend .v-expansion-panel").forEach(panel => {
+          panel.classList.add("v-expansion-panel--active");
+          const panelContent = panel.querySelector(".v-expansion-panel-content");
+          if (panelContent) {
+            panelContent.style.display = "block";
+            panelContent.style.maxHeight = "none";
+          }
+        });
+      
+        // Clone the Layer Order component
+        const clonedLayerOrder = layerOrderElement.cloneNode(true);
+        clonedLayerOrder.style.position = "absolute";
+        clonedLayerOrder.style.left = "-9999px";
+        document.body.appendChild(clonedLayerOrder);
+      
+        // Clone the Mapbox Legend component
+        const clonedMapLegend = mapLegendElement.cloneNode(true);
+        clonedMapLegend.style.position = "absolute";
+        clonedMapLegend.style.left = "-9999px";
+        document.body.appendChild(clonedMapLegend);
+      
+        // Convert legend images to Base64 before capturing
+        await this.convertImagesToBase64(clonedMapLegend);
+      
+        this.map.once('render', async () => {
+          const mapCanvas = this.map.getCanvas();
+          const mapImage = mapCanvas.toDataURL("image/png");
+        
+          // Capture cloned components with html2canvas
+          const layerOrderCanvas = await html2canvas(clonedLayerOrder, { backgroundColor: null });
+          const mapLegendCanvas = await html2canvas(clonedMapLegend, { backgroundColor: null });
+        
+          document.body.removeChild(clonedLayerOrder);
+          document.body.removeChild(clonedMapLegend);
+        
+          // Merge Map Image, Layer Order, and Map Legend
+          const finalCanvas = document.createElement("canvas");
+          finalCanvas.width = mapCanvas.width;
+          finalCanvas.height = mapCanvas.height;
+          const ctx = finalCanvas.getContext("2d");
+        
+          // Draw the map first
+          const mapImg = new Image();
+          mapImg.src = mapImage;
+          await new Promise((resolve) => (mapImg.onload = resolve));
+          ctx.drawImage(mapImg, 0, 0);
+        
+          // Draw a white box with a grey border for the date and time
+          const timestamp = new Date().toLocaleString();
+          const text = this.viewerName + " - " + "Image generated at " + timestamp;
+          ctx.font = "16px Arial";
+          const textWidth = ctx.measureText(text).width + 20;
+          const textHeight = 30;
+          ctx.fillStyle = "white";
+          ctx.fillRect(5, 5, textWidth, textHeight);
+          ctx.strokeStyle = "grey";
+          ctx.strokeRect(5, 5, textWidth, textHeight);
+        
+          // Draw the timestamp text inside the box
+          ctx.fillStyle = "black";
+          ctx.fillText(text, 15, 25);
+        
+          // Draw the cloned layer order UI in the bottom left corner
+          const layerX = 10;
+          const layerY = finalCanvas.height - layerOrderCanvas.height - 10;
+          ctx.drawImage(layerOrderCanvas, layerX, layerY);
+        
+          // Draw the cloned map legend UI in the bottom right corner
+          const legendX = finalCanvas.width - mapLegendCanvas.width - 10;
+          const legendY = finalCanvas.height - mapLegendCanvas.height - 10;
+          ctx.drawImage(mapLegendCanvas, legendX, legendY);
+        
+          // Convert to an image and trigger download
+          finalCanvas.toBlob((blob) => {
+            const link = document.createElement("a");
+            link.href = URL.createObjectURL(blob);
+            link.download = "map_with_layer_order_and_legend.png";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          }, "image/png");
+        });
+      
+        this.map.triggerRepaint();
+      },
+
+      async convertImagesToBase64(container) {
+        const images = container.querySelectorAll("img");
+        const promises = Array.from(images).map(async (img) => {
+          if (!img.src.startsWith("data:image")) {
+            const base64 = await this.imageToBase64(img.src);
+            if (base64) {
+              img.src = base64;
+            }
+          }
+        });
+        await Promise.all(promises);
+      },
+
+      imageToBase64(url) {
+        return new Promise((resolve) => {
+          fetch(url)
+            .then(response => response.blob())
+            .then(blob => {
+              const reader = new FileReader();
+              reader.onloadend = () => resolve(reader.result);
+              reader.readAsDataURL(blob);
+            })
+            .catch(() => resolve(null));
+        });
+      }
+    }
+  };
+</script>