diff --git a/packages/mapviewer/src/modules/menu/components/LayerDescription.vue b/packages/mapviewer/src/modules/menu/components/LayerDescription.vue
new file mode 100644
index 0000000000..172671f470
--- /dev/null
+++ b/packages/mapviewer/src/modules/menu/components/LayerDescription.vue
@@ -0,0 +1,212 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import AbstractLayer from '@/api/layers/AbstractLayer.class'
+import { getLayerDescription } from '@/api/layers/layers.api'
+import { getGenerateQRCodeUrl } from '@/api/qrcode.api.js'
+
+const { layer, layerId, transformUrlIntoQrcode } = defineProps({
+    layer: {
+        type: AbstractLayer,
+        required: true,
+    },
+    layerId: {
+        type: String || null,
+        default: null,
+    },
+    transformUrlIntoQrcode: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emits = defineEmits(['loaded'])
+
+const htmlContent = ref('')
+
+const { t } = useI18n()
+const store = useStore()
+
+const currentLang = computed(() => store.state.i18n.lang)
+const body = computed(() => layer?.abstract ?? '')
+const attributionName = computed(() => layer?.attributions[0].name ?? '')
+const attributionUrl = computed(() => layer?.attributions[0].url ?? '')
+const legends = computed(() => layer?.legends ?? [])
+const isExternal = computed(() => layer?.isExternal ?? false)
+
+watch(
+    () => layer,
+    async (newLayer) => {
+        if (!isExternal.value && layer) {
+            htmlContent.value = await getLayerDescription(currentLang.value, newLayer.id)
+        }
+    }
+)
+
+watch(
+    () => layerId,
+    async (newLayerId) => {
+        if (!isExternal.value && layerId) {
+            htmlContent.value = await getLayerDescription(currentLang.value, newLayerId)
+        }
+    }
+)
+watch(htmlContent, () => {
+    nextTick(() => {
+        transformATagIntoQRCodes()
+    })
+})
+
+onMounted(async () => {
+    if (!isExternal.value && layer) {
+        htmlContent.value = await getLayerDescription(currentLang.value, layer.id)
+    } else if (!isExternal.value && layerId) {
+        htmlContent.value = await getLayerDescription(currentLang.value, layerId)
+    }
+})
+
+function transformATagIntoQRCodes() {
+    if (transformUrlIntoQrcode) {
+        document.querySelectorAll('a').forEach((a) => {
+            a.innerHTML = `<img width="90" src="${getGenerateQRCodeUrl(a.href)}" alt="">`
+        })
+    }
+    emits('loaded')
+}
+</script>
+
+<template>
+    <div
+        class="layer-description"
+        data-cy="layer-description-popup"
+    >
+        <h4
+            v-if="!isExternal && !htmlContent"
+            class="mb-0"
+        >
+            <font-awesome-icon
+                spin
+                :icon="['fa', 'spinner']"
+            />
+        </h4>
+        <div v-else-if="isExternal">
+            <h6
+                v-if="body"
+                data-cy="layer-description-popup-description-title"
+            >
+                {{ t('description') }}
+            </h6>
+            <div
+                v-if="body"
+                data-cy="layer-description-popup-description-body"
+            >
+                {{ body }}
+            </div>
+            <div
+                v-if="legends.length"
+                class="mt-4"
+            >
+                <h6 data-cy="layer-description-popup-legends-title">
+                    {{ t('legend') }}
+                </h6>
+                <div
+                    v-for="legend in legends"
+                    :key="legend.url"
+                    :data-cy="`layer-description-popup-legends-body-${legend.url}`"
+                >
+                    <img
+                        v-if="legend.format.startsWith('image/')"
+                        :src="legend.url"
+                    />
+                    <iframe
+                        v-else-if="legend.format === 'text/html'"
+                        :src="legend.url"
+                    />
+                    <a
+                        v-else
+                        :href="legend.url"
+                        target="_blank"
+                    >
+                        {{ legend.url }}
+                    </a>
+                </div>
+            </div>
+
+            <div
+                class="mt-2 text-primary text-end"
+                data-cy="layer-description-popup-attributions"
+            >
+                <span class="me-1">{{ t('copyright_data') }}</span>
+                <a
+                    v-if="attributionUrl"
+                    :href="attributionUrl"
+                    target="_blank"
+                >
+                    {{ attributionName }}
+                </a>
+                <span v-else>{{ attributionName }}</span>
+            </div>
+        </div>
+        <!-- eslint-disable vue/no-v-html-->
+        <div
+            v-else
+            data-cy="layer-description"
+            v-html="htmlContent"
+        />
+        <!-- eslint-enable vue/no-v-html-->
+    </div>
+</template>
+<style lang="scss">
+// No scoping here as we need to apply styles to the markup we included with v-html.
+@import '@/scss/variables.module';
+@import '@/scss/webmapviewer-bootstrap-theme';
+
+$spacing: 8px;
+
+.layer-description {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 1.42857143;
+    line-break: auto;
+    text-align: start;
+
+    // allow user selection
+    @extend .clear-no-ios-long-press;
+}
+
+.legend-header {
+    // Negative margin to overcome padding from the parent.
+    // Removing the padding from the parent and adding the spacing on all
+    // possible child elements would be a mess.
+    margin: -0.5rem;
+    margin-bottom: 0;
+
+    padding: $spacing;
+    background-color: #eee;
+    .bod-title {
+        color: $primary;
+        margin-bottom: $spacing;
+    }
+    .legend-abstract {
+        margin-bottom: 0;
+    }
+}
+
+.legend-footer {
+    padding: $spacing;
+    span {
+        font-weight: 700;
+    }
+    table {
+        font-size: 100%;
+        width: fit-content;
+        border: 0;
+    }
+    td {
+        padding-right: 2rem;
+    }
+}
+</style>
diff --git a/packages/mapviewer/src/modules/menu/components/LayerDescriptionPopup.vue b/packages/mapviewer/src/modules/menu/components/LayerDescriptionPopup.vue
index d14ca4804d..d85a2891fd 100644
--- a/packages/mapviewer/src/modules/menu/components/LayerDescriptionPopup.vue
+++ b/packages/mapviewer/src/modules/menu/components/LayerDescriptionPopup.vue
@@ -1,10 +1,8 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useStore } from 'vuex'
+import { computed } from 'vue'
 
 import AbstractLayer from '@/api/layers/AbstractLayer.class'
-import { getLayerDescription } from '@/api/layers/layers.api'
+import LayerDescription from '@/modules/menu/components/LayerDescription.vue'
 import SimpleWindow from '@/utils/components/SimpleWindow.vue'
 
 const { layer, layerId, layerName } = defineProps({
@@ -22,45 +20,8 @@ const { layer, layerId, layerName } = defineProps({
     },
 })
 const emit = defineEmits(['close'])
-const store = useStore()
-const { t } = useI18n()
 
-const htmlContent = ref('')
-
-const currentLang = computed(() => store.state.i18n.lang)
 const title = computed(() => layer?.name ?? layerName)
-const body = computed(() => layer?.abstract ?? '')
-
-const attributionName = computed(() => layer?.attributions[0].name ?? '')
-const attributionUrl = computed(() => layer?.attributions[0].url ?? '')
-const isExternal = computed(() => layer?.isExternal ?? false)
-
-const legends = computed(() => layer?.legends ?? [])
-watch(
-    () => layer,
-    async (newLayer) => {
-        if (!isExternal.value && layer) {
-            htmlContent.value = await getLayerDescription(currentLang.value, newLayer.id)
-        }
-    }
-)
-
-watch(
-    () => layerId,
-    async (newLayerId) => {
-        if (!isExternal.value && layerId) {
-            htmlContent.value = await getLayerDescription(currentLang.value, newLayerId)
-        }
-    }
-)
-
-onMounted(async () => {
-    if (!isExternal.value && layer) {
-        htmlContent.value = await getLayerDescription(currentLang.value, layer.id)
-    } else if (!isExternal.value && layerId) {
-        htmlContent.value = await getLayerDescription(currentLang.value, layerId)
-    }
-})
 </script>
 
 <template>
@@ -73,137 +34,9 @@ onMounted(async () => {
         initial-position="top-left"
         @close="emit('close', layerId)"
     >
-        <div
-            class="layer-description"
-            data-cy="layer-description-popup"
-        >
-            <h4
-                v-if="!isExternal && !htmlContent"
-                class="mb-0"
-            >
-                <font-awesome-icon
-                    spin
-                    :icon="['fa', 'spinner']"
-                />
-            </h4>
-            <div v-else-if="isExternal">
-                <h6
-                    v-if="body"
-                    data-cy="layer-description-popup-description-title"
-                >
-                    {{ t('description') }}
-                </h6>
-                <div
-                    v-if="body"
-                    data-cy="layer-description-popup-description-body"
-                >
-                    {{ body }}
-                </div>
-                <div
-                    v-if="legends.length"
-                    class="mt-4"
-                >
-                    <h6 data-cy="layer-description-popup-legends-title">
-                        {{ t('legend') }}
-                    </h6>
-                    <div
-                        v-for="legend in legends"
-                        :key="legend.url"
-                        :data-cy="`layer-description-popup-legends-body-${legend.url}`"
-                    >
-                        <img
-                            v-if="legend.format.startsWith('image/')"
-                            :src="legend.url"
-                        />
-                        <iframe
-                            v-else-if="legend.format === 'text/html'"
-                            :src="legend.url"
-                        />
-                        <a
-                            v-else
-                            :href="legend.url"
-                            target="_blank"
-                        >
-                            {{ legend.url }}
-                        </a>
-                    </div>
-                </div>
-
-                <div
-                    class="mt-2 text-primary text-end"
-                    data-cy="layer-description-popup-attributions"
-                >
-                    <span class="me-1">{{ t('copyright_data') }}</span>
-                    <a
-                        v-if="attributionUrl"
-                        :href="attributionUrl"
-                        target="_blank"
-                    >
-                        {{ attributionName }}
-                    </a>
-                    <span v-else>{{ attributionName }}</span>
-                </div>
-            </div>
-            <!-- eslint-disable vue/no-v-html-->
-            <div
-                v-else
-                data-cy="layer-description"
-                v-html="htmlContent"
-            />
-            <!-- eslint-enable vue/no-v-html-->
-        </div>
+        <LayerDescription
+            :layer="layer"
+            :layer-id="layerId"
+        />
     </SimpleWindow>
 </template>
-
-<style lang="scss">
-// No scoping here as we need to apply styles to the markup we included with v-html.
-@import '@/scss/variables.module';
-@import '@/scss/webmapviewer-bootstrap-theme';
-
-$spacing: 8px;
-
-.layer-description {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 1.42857143;
-    line-break: auto;
-    text-align: start;
-
-    // allow user selection
-    @extend .clear-no-ios-long-press;
-}
-
-.legend-header {
-    // Negative margin to overcome padding from the parent.
-    // Removing the padding from the parent and adding the spacing on all
-    // possible child elements would be a mess.
-    margin: -0.5rem;
-    margin-bottom: 0;
-
-    padding: $spacing;
-    background-color: #eee;
-    .bod-title {
-        color: $primary;
-        margin-bottom: $spacing;
-    }
-    .legend-abstract {
-        margin-bottom: 0;
-    }
-}
-
-.legend-footer {
-    padding: $spacing;
-    span {
-        font-weight: 700;
-    }
-    table {
-        font-size: 100%;
-        width: fit-content;
-        border: 0;
-    }
-    td {
-        padding-right: 2rem;
-    }
-}
-</style>
diff --git a/packages/mapviewer/src/modules/menu/components/debug/DebugToolbar.vue b/packages/mapviewer/src/modules/menu/components/debug/DebugToolbar.vue
index 4eae7ab8c0..056a0bc5c8 100644
--- a/packages/mapviewer/src/modules/menu/components/debug/DebugToolbar.vue
+++ b/packages/mapviewer/src/modules/menu/components/debug/DebugToolbar.vue
@@ -17,6 +17,7 @@ const route = useRoute()
 const store = useStore()
 
 const showDebugTool = ref(false)
+const showViewSelector = ref(false)
 const showBaseUrlOverride = ref(false)
 const showLayerFinder = ref(false)
 const showPrint = ref(false)
@@ -49,6 +50,9 @@ function toggleShowLayerExtents() {
 function toggleShowBaseUrlOverride() {
     showBaseUrlOverride.value = !showBaseUrlOverride.value
 }
+function toggleShowViewSelector() {
+    showViewSelector.value = !showViewSelector.value
+}
 function toggleShowLayerFinder() {
     showLayerFinder.value = !showLayerFinder.value
 }
@@ -82,7 +86,19 @@ function toggleShowPrint() {
                         id="debug-tools-menu"
                         class="d-flex gap-2 justify-content-center flex-wrap"
                     >
-                        <DebugViewSelector />
+                        <div
+                            class="d-flex flex-column align-items-center"
+                        >
+                            <button
+                                class="toolbox-button"
+                                type="button"
+                                :class="{ active: showViewSelector }"
+                                @click="toggleShowViewSelector"
+                            >
+                                <FontAwesomeIcon :icon="['fas', 'folder-tree']" />
+                            </button>
+                            <label class="toolbox-button-label">Views</label>
+                        </div>
 
                         <div
                             v-if="route.name === PRINT_VIEW"
@@ -171,6 +187,10 @@ function toggleShowPrint() {
                 </div>
             </div>
         </div>
+        <DebugViewSelector
+            v-if="showViewSelector"
+            @close="toggleShowViewSelector"
+        />
         <BaseUrlOverrideModal
             v-if="showBaseUrlOverride"
             @close="toggleShowBaseUrlOverride"
diff --git a/packages/mapviewer/src/modules/menu/components/debug/DebugViewSelector.vue b/packages/mapviewer/src/modules/menu/components/debug/DebugViewSelector.vue
index 2cdd22d516..69090f647b 100644
--- a/packages/mapviewer/src/modules/menu/components/debug/DebugViewSelector.vue
+++ b/packages/mapviewer/src/modules/menu/components/debug/DebugViewSelector.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { MAP_VIEWS } from '@/router/viewNames'
+import SimpleWindow from '@/utils/components/SimpleWindow.vue'
 
 const router = useRouter()
 
@@ -18,24 +19,30 @@ function onRouteChange(routeName) {
 </script>
 
 <template>
-    <div class="btn-group btn-group-sm">
-        <template
-            v-for="name in views"
-            :key="name"
-        >
-            <input
-                type="radio"
-                class="btn-check"
-                :name="name"
-                :checked="name === currentView"
-            />
-            <label
-                class="btn btn-outline-secondary"
-                :for="name"
-                @click="onRouteChange(name)"
+    <SimpleWindow
+        title="View selector"
+        movable
+        initial-position="top-left"
+    >
+        <div class="btn-group">
+            <template
+                v-for="name in views"
+                :key="name"
             >
-                {{ name.replace('View', '') }}
-            </label>
-        </template>
-    </div>
+                <input
+                    type="radio"
+                    class="btn-check"
+                    :name="name"
+                    :checked="name === currentView"
+                />
+                <label
+                    class="btn btn-outline-secondary"
+                    :for="name"
+                    @click="onRouteChange(name)"
+                >
+                    {{ name.replace('View', '') }}
+                </label>
+            </template>
+        </div>
+    </SimpleWindow>
 </template>
diff --git a/packages/mapviewer/src/modules/menu/components/header/ConfederationFullLogo.vue b/packages/mapviewer/src/modules/menu/components/header/ConfederationFullLogo.vue
index 195498def5..ad3997bfdb 100644
--- a/packages/mapviewer/src/modules/menu/components/header/ConfederationFullLogo.vue
+++ b/packages/mapviewer/src/modules/menu/components/header/ConfederationFullLogo.vue
@@ -36,8 +36,11 @@ const hasDevSiteWarning = computed(() => store.getters.hasDevSiteWarning)
             data-cy="swiss-flag"
         />
         <div
-            class="swiss-confederation-text position-relative flex-column text-nowrap"
-            :class="{ 'd-none d-lg-flex': renderForDpi === null, 'd-flex': renderForDpi !== null }"
+            class="swiss-confederation-text position-relative flex-column"
+            :class="{
+                'd-none d-lg-flex': renderForDpi === null,
+                'd-flex': renderForDpi !== null,
+            }"
             data-cy="swiss-confederation-text"
         >
             <div class="d-flex flex-column">
@@ -117,14 +120,21 @@ $letterSpacing: calc((78 / 1000) * 1em);
         $printFontSizeRelToHeight: 0.8vh;
         $printFontSize: max(max($printFontSizeRelToWidth, $printFontSizeRelToHeight), $minFontSize);
 
-        // forcing the length of the logo to the 55mm expressed in the CD-Bund PDF guide.
-        width: 55mm;
-
         @include confederation-logo(
             calc(0.66 * $printFontSize),
             $printFontSize,
             calc(1.2 * $printFontSize)
         );
+
+        .swiss-confederation-text {
+            /* Prevent shrinking and ensure the width matches the content */
+            flex: 0 0 auto;
+            width: fit-content;
+        }
+        & {
+            // ensuring the logo and text have enough space
+            width: 100%;
+        }
     }
 
     .swiss-flag {
diff --git a/packages/mapviewer/src/router/index.js b/packages/mapviewer/src/router/index.js
index c787db2570..b85468f572 100644
--- a/packages/mapviewer/src/router/index.js
+++ b/packages/mapviewer/src/router/index.js
@@ -17,8 +17,9 @@ import EmbedView from '@/views/EmbedView.vue'
 import LegacyParamsView from '@/views/LegacyParamsView.vue'
 import MapView from '@/views/MapView.vue'
 
+import PrintLegendView from '../views/PrintLegendView.vue'
 import PrintView from '../views/PrintView.vue'
-import { PRINT_VIEW } from './viewNames.js'
+import { PRINT_LEGEND_VIEW, PRINT_VIEW } from './viewNames'
 
 const history = createWebHashHistory()
 
@@ -59,6 +60,14 @@ const router = createRouter({
                 requiresAppReady: true,
             },
         },
+        {
+            path: '/print-legend',
+            name: PRINT_LEGEND_VIEW,
+            component: PrintLegendView,
+            meta: {
+                requiresAppReady: true,
+            },
+        },
         {
             path: '/legacy',
             name: LEGACY_PARAM_VIEW,
diff --git a/packages/mapviewer/src/router/viewNames.js b/packages/mapviewer/src/router/viewNames.js
index 8b73d66e16..43480a2394 100644
--- a/packages/mapviewer/src/router/viewNames.js
+++ b/packages/mapviewer/src/router/viewNames.js
@@ -2,7 +2,8 @@
 export const MAP_VIEW = 'MapView'
 export const EMBED_VIEW = 'EmbedView'
 export const PRINT_VIEW = 'PrintView'
-export const MAP_VIEWS = [MAP_VIEW, EMBED_VIEW, PRINT_VIEW]
+export const PRINT_LEGEND_VIEW = 'PrintLegendView'
+export const MAP_VIEWS = [MAP_VIEW, EMBED_VIEW, PRINT_VIEW, PRINT_LEGEND_VIEW]
 
 /** Legacy URL views used for startup */
 export const LEGACY_PARAM_VIEW = 'LegacyParamsView'
diff --git a/packages/mapviewer/src/setup-fontawesome.js b/packages/mapviewer/src/setup-fontawesome.js
index b53f85cccd..a2201ab5a7 100644
--- a/packages/mapviewer/src/setup-fontawesome.js
+++ b/packages/mapviewer/src/setup-fontawesome.js
@@ -49,6 +49,7 @@ import {
     faEnvelope,
     faExpand,
     faFilm,
+    faFolderTree,
     faFont,
     faGlobe,
     faGripLinesVertical,
@@ -126,6 +127,7 @@ library.add(
     faEnvelope,
     faExpand,
     faFilm,
+    faFolderTree,
     faFont,
     faGlobe,
     faGripLinesVertical,
diff --git a/packages/mapviewer/src/views/PrintLegendView.vue b/packages/mapviewer/src/views/PrintLegendView.vue
new file mode 100644
index 0000000000..9a74d44d09
--- /dev/null
+++ b/packages/mapviewer/src/views/PrintLegendView.vue
@@ -0,0 +1,61 @@
+<script setup>
+import log from '@geoadmin/log'
+import { computed, ref, watch } from 'vue'
+import { useStore } from 'vuex'
+
+import { sendMapReadyEventToParent } from '@/api/iframePostMessageEvent.api'
+import LayerDescription from '@/modules/menu/components/LayerDescription.vue'
+import usePrintViewCommons from '@/views/usePrintViewCommons.composable'
+
+const { printLayout, printContainerStyle } = usePrintViewCommons()
+
+const loadedLayerDescriptions = ref(0)
+
+const store = useStore()
+const visibleLayers = computed(() => store.getters.visibleLayers)
+const visibleLayersCount = computed(() => visibleLayers.value.length)
+
+watch(visibleLayersCount, () => {
+    loadedLayerDescriptions.value = 0
+})
+watch(loadedLayerDescriptions, () => {
+    if (loadedLayerDescriptions.value === visibleLayersCount.value) {
+        log.debug('All layer descriptions loaded. Sending map ready event to parent window.')
+        sendMapReadyEventToParent()
+    }
+})
+</script>
+
+<template>
+    <div
+        class="print-legend-view w-100"
+        :class="printLayout"
+        :style="printContainerStyle"
+    >
+        <LayerDescription
+            v-for="layer in visibleLayers"
+            :key="layer.id"
+            :layer="layer"
+            :layer-id="layer.id"
+            transform-url-into-qrcode
+            @loaded="loadedLayerDescriptions++"
+        />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.print-legend-view {
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+@media print {
+    .print-legend-view {
+        break-inside: avoid;
+        & > * {
+            page-break-inside: avoid;
+        }
+    }
+}
+</style>
diff --git a/packages/mapviewer/src/views/PrintView.vue b/packages/mapviewer/src/views/PrintView.vue
index eaaf606910..db2af523a3 100644
--- a/packages/mapviewer/src/views/PrintView.vue
+++ b/packages/mapviewer/src/views/PrintView.vue
@@ -1,6 +1,5 @@
 <script setup>
 import log from '@geoadmin/log'
-import { getPointResolution } from 'ol/proj'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
@@ -8,11 +7,6 @@ import { useStore } from 'vuex'
 
 import { getGenerateQRCodeUrl } from '@/api/qrcode.api'
 import { createShortLink } from '@/api/shortlink.api'
-import {
-    PRINT_DEFAULT_DPI,
-    PRINT_DIMENSIONS,
-    PRINT_MARGIN_IN_MILLIMETERS,
-} from '@/config/print.config'
 import InfoboxModule from '@/modules/infobox/InfoboxModule.vue'
 import MapFooter from '@/modules/map/components/footer/MapFooter.vue'
 import OpenLayersPrintResolutionEnforcer from '@/modules/map/components/openlayers/OpenLayersPrintResolutionEnforcer.vue'
@@ -20,6 +14,7 @@ import OpenLayersScale from '@/modules/map/components/openlayers/OpenLayersScale
 import MapModule from '@/modules/map/MapModule.vue'
 import ConfederationFullLogo from '@/modules/menu/components/header/ConfederationFullLogo.vue'
 import { stringifyQuery } from '@/utils/url-router'
+import usePrintViewCommons from '@/views/usePrintViewCommons.composable'
 
 const dispatcher = { dispatcher: 'PrintView.vue' }
 
@@ -27,48 +22,18 @@ const route = useRoute()
 const store = useStore()
 const { t } = useI18n()
 
-const inchToMillimeter = 25.4
-
 const shortLink = ref(null)
 const qrCodeUrl = computed(() => getGenerateQRCodeUrl(shortLink.value))
 
 const now = new Date()
 
-const printLayout = computed(() => store.state.print.config.layout ?? 'A4_L')
-const isLayerLandscape = computed(() => printLayout.value.endsWith('_L'))
-const printDPI = computed(() => store.state.print.config.dpi ?? PRINT_DEFAULT_DPI)
-const layoutIdentifier = computed(() => printLayout.value.replace('_L', '').replace('_P', ''))
-const layoutDimensions = computed(() => {
-    const dimensions = PRINT_DIMENSIONS[layoutIdentifier.value]
-    if (!isLayerLandscape.value) {
-        return dimensions.toReversed()
-    }
-    return dimensions
-})
 const mapResolution = computed(() => store.getters.resolution)
 const mapRotation = computed(() => store.state.position.rotation)
 const currentProjection = computed(() => store.state.position.projection)
-const mapCenter = computed(() => store.state.position.center)
 const currentLang = computed(() => store.state.i18n.lang)
-const printContainerSize = computed(() => {
-    if (!layoutDimensions.value) {
-        return null
-    }
-    return {
-        width: Math.round((layoutDimensions.value[0] * printDPI.value) / inchToMillimeter),
-        height: Math.round((layoutDimensions.value[1] * printDPI.value) / inchToMillimeter),
-    }
-})
-const printContainerStyle = computed(() => {
-    if (!printContainerSize.value) {
-        return null
-    }
-    return {
-        width: `${printContainerSize.value.width}px`,
-        height: `${printContainerSize.value.height}px`,
-        padding: `${(PRINT_MARGIN_IN_MILLIMETERS * printDPI.value) / inchToMillimeter}px`,
-    }
-})
+
+const { printDPI, printResolution, printContainerSize, printContainerStyle } = usePrintViewCommons()
+
 const mapScaleWidth = computed(() => {
     if (!printContainerSize.value) {
         return null
@@ -102,16 +67,6 @@ const matchingResolutionStepWithLabel = computed(() =>
         })
 )
 
-const printResolution = computed(
-    () =>
-        mapResolution.value /
-        getPointResolution(
-            currentProjection.value.epsg,
-            printDPI.value / inchToMillimeter,
-            mapCenter.value
-        )
-)
-
 onMounted(() => {
     log.info(`Print map view mounted`)
     store.dispatch('setPrintMode', { mode: true, ...dispatcher })
@@ -143,7 +98,7 @@ async function generateShareLink() {
         :style="printContainerStyle"
     >
         <MapModule class="flex-grow-1">
-            <div class="north-arrow position-absolute top-0 end-0 m-4 m-xl-5 z-3">
+            <div class="north-arrow position-absolute m-xl-5 z-3 end-0 top-0 m-4">
                 <img
                     src="@/modules/map/assets/north_arrow.png"
                     :style="northArrowStyle"
@@ -156,7 +111,7 @@ async function generateShareLink() {
                     <template #top-right>
                         <div
                             v-if="shortLink"
-                            class="print-scale-line d-flex flex-column m-2 me-3 me-xl-3 bg-white p-3 border border-2 border-black"
+                            class="print-scale-line d-flex flex-column me-xl-3 m-2 me-3 border border-2 border-black bg-white p-3"
                         >
                             <div class="scale d-flex justify-content-center m-1 mb-3">
                                 <OpenLayersScale
@@ -192,7 +147,7 @@ async function generateShareLink() {
                         <img
                             v-if="shortLink"
                             :src="qrCodeUrl"
-                            class="qr-code position-relative bottom-0 end-0 z-3 bg-white p-2 m-n1"
+                            class="qr-code position-relative z-3 m-n1 bottom-0 end-0 bg-white p-2"
                             alt="QR Code"
                         />
                     </template>
@@ -202,9 +157,9 @@ async function generateShareLink() {
                 </MapFooter>
             </template>
         </MapModule>
-        <div class="print-footer d-flex pt-3 px-3 pb-1 gap-3">
+        <div class="print-footer d-flex gap-3 p-1">
             <ConfederationFullLogo :render-for-dpi="printDPI" />
-            <div class="print-disclaimer flew-grow-1 px-1 px-md-3 px-xl-5 d-flex flex-column">
+            <div class="print-disclaimer flex-grow-1 px-md-3 px-xl-5 d-flex flex-column px-1">
                 <span class="text-justify">{{ t('print_footer_description') }}</span>
                 <span class="text-justify">{{ t('print_footer_disclaimer') }}</span>
                 <span class="mt-1">&copy; swisstopo</span>
diff --git a/packages/mapviewer/src/views/usePrintViewCommons.composable.js b/packages/mapviewer/src/views/usePrintViewCommons.composable.js
new file mode 100644
index 0000000000..fdb0ca71b3
--- /dev/null
+++ b/packages/mapviewer/src/views/usePrintViewCommons.composable.js
@@ -0,0 +1,70 @@
+import { getPointResolution } from 'ol/proj'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+import {
+    PRINT_DEFAULT_DPI,
+    PRINT_DIMENSIONS,
+    PRINT_MARGIN_IN_MILLIMETERS,
+} from '@/config/print.config'
+
+const inchToMillimeter = 25.4
+
+export default function usePrintSizedView() {
+    const store = useStore()
+
+    const printLayout = computed(() => store.state.print.config.layout ?? 'A4_L')
+    const layoutIdentifier = computed(() => printLayout.value.replace('_L', '').replace('_P', ''))
+    const printDPI = computed(() => store.state.print.config.dpi ?? PRINT_DEFAULT_DPI)
+    const isLayerLandscape = computed(() => printLayout.value.endsWith('_L'))
+
+    const mapCenter = computed(() => store.state.position.center)
+    const mapResolution = computed(() => store.getters.resolution)
+    const currentProjection = computed(() => store.state.position.projection)
+
+    const layoutDimensions = computed(() => {
+        const dimensions = PRINT_DIMENSIONS[layoutIdentifier.value]
+        if (!isLayerLandscape.value) {
+            return dimensions.toReversed()
+        }
+        return dimensions
+    })
+    const printContainerSize = computed(() => {
+        if (!layoutDimensions.value) {
+            return null
+        }
+        return {
+            width: Math.round((layoutDimensions.value[0] * printDPI.value) / inchToMillimeter),
+            height: Math.round((layoutDimensions.value[1] * printDPI.value) / inchToMillimeter),
+        }
+    })
+    const printContainerStyle = computed(() => {
+        if (!printContainerSize.value) {
+            return null
+        }
+        return {
+            width: `${printContainerSize.value.width}px`,
+            height: `${printContainerSize.value.height}px`,
+            padding: `${(PRINT_MARGIN_IN_MILLIMETERS * printDPI.value) / inchToMillimeter}px`,
+        }
+    })
+
+    const printResolution = computed(
+        () =>
+            mapResolution.value /
+            getPointResolution(
+                currentProjection.value.epsg,
+                printDPI.value / inchToMillimeter,
+                mapCenter.value
+            )
+    )
+
+    return {
+        printLayout,
+        printLayoutDimension: layoutDimensions,
+        printDPI,
+        printContainerSize,
+        printContainerStyle,
+        printResolution,
+    }
+}