diff --git a/src/assets/scss/_leaflet.scss b/src/assets/scss/_leaflet.scss
index cf9864b4..100f7453 100644
--- a/src/assets/scss/_leaflet.scss
+++ b/src/assets/scss/_leaflet.scss
@@ -16,121 +16,6 @@
                 .leaflet-popup-content {
                     min-width: 20rem;
                     margin: 1rem;
-
-                    figure {
-                        position: relative;
-                        margin-inline: -1.1rem;
-                        margin-top: -1.1rem;
-                        margin-bottom: .5rem;
-
-                        &.landscape {
-                            aspect-ratio: 16 / 9;
-                            min-width: 20rem;
-                        }
-
-                        &.portrait {
-                            aspect-ratio: 15 / 16;
-                            min-width: 10rem;
-                        }
-
-                        &::before {
-                            content: '';
-                            display: block;
-                            pointer-events: none;
-                            user-select: none;
-                            position: absolute;
-                            inset: 0;
-                            z-index: 10;
-                            // Make a linear gradient from top to bottom, from transparent to black
-                            background: linear-gradient(to bottom, transparent 70%, var(--black) 100%);
-                        }
-
-                        img {
-                            width: 100%;
-                            height: 100%;
-                            object-fit: cover;
-                            object-position: top;
-                        }
-
-                        figcaption cite {
-                            position: absolute;
-                            font-size: 85%;
-                            font-style: italic;
-                            font-weight: 600;
-                            bottom: .5rem;
-                            right: 1rem;
-                            color: var(--white);
-                            z-index: 20;
-                            opacity: .6;
-                            transition-property: opacity;
-                            transition-duration: .2s;
-                            transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
-
-                            a {
-                                padding-right: 0;
-                                color: var(--white);
-                                text-decoration: underline;
-                                text-underline-offset: .15rem;
-
-                                &:hover {
-                                    color: var(--blue-500);
-                                }
-
-                                &::after {
-                                    display: none;
-                                }
-                            }
-                        }
-
-                        &:hover {
-                            figcaption cite {
-                                opacity: 1;
-                            }
-                        }
-                    }
-
-                    .title {
-                        display: block;
-                        font-weight: 600;
-                    }
-
-                    strong.title {
-                        color: var(--green-500);
-                    }
-
-                    a.title,
-                    a.map-link {
-                        text-underline-offset: 2px;
-                        text-decoration: underline;
-
-                        &:hover,
-                        &:focus-visible {
-                            text-decoration: none;
-                            color: var(--green-500);
-                        }
-                    }
-
-                    .map-link {
-                        display: inline-flex;
-                        align-items: center;
-                        gap: .5ch;
-
-                        svg {
-                            width: 1rem;
-                            height: 1rem;
-                        }
-                    }
-
-                    .tooltip-content > * + * {
-                        margin: 0;
-                        margin-top: .66em;
-                    }
-
-                    .tooltip-footer {
-                        display: grid;
-                        gap: .15em;
-                        font-size: .95em;
-                    }
                 }
             }
 
@@ -139,6 +24,7 @@
                 height: .8rem;
             }
         }
+
         .leaflet-tooltip-pane {
             .leaflet-tooltip {
                 &.capital-name {
diff --git a/src/components/maps/Map.astro b/src/components/maps/Map.astro
index 812ccaed..4115249a 100644
--- a/src/components/maps/Map.astro
+++ b/src/components/maps/Map.astro
@@ -5,8 +5,7 @@ import MarkerCreator from './overlay/MarkerCreator.vue';
 import { t } from '@/i18n/store';
 import { getLangFromUrl } from '@/i18n/utils';
 import { normalizeString } from '@/utils/Strings';
-
-import CopyText from '../global/CopyText.astro';
+import MarkerContent from './MarkerContent.astro';
 
 interface Props extends MapProps {}
 
@@ -23,11 +22,6 @@ const {
     rulerHideWalkDistance = false,
     backgroundColor = 'transparent',
 } = Astro.props
-
-const lang = getLangFromUrl(Astro.url);
-
-const byText = t('common.by', lang)
-const seeMapText = t('maps.go-to-map', lang)
 ---
 
 <div class="map-wrapper">
@@ -39,39 +33,8 @@ const seeMapText = t('maps.go-to-map', lang)
 
     <div style="height: 0; width: 0; overflow: hidden; display: none;">
         {markers.map((m, index) => (
-            <div id="popup-template" data-id={`marker-${index}`} class="tooltip-content">
-                {m.cover && m.coverAuthor && m.coverLink && (
-                    <figure class={m.coverPortrait ? 'portrait' : 'landscape'}>
-                        <img src={`/images/cover/${m.cover}`} alt={m.title} width={m.coverPortrait ? 210 : 420} />
-                        <figcaption>
-                            <cite>{byText} <a href={m.coverLink} target="_blank">{m.coverAuthor}</a></cite>
-                        </figcaption>
-                    </figure>
-                )}
-                {m.link ? (
-                    <a href={m.link} target="_blank" class="title">{m.title}</a>
-                ) : (
-                    <strong class="title">{m.title}</strong>
-                )}
-                {m.description && <p>{m.description}</p>}
-
-                <div class="tooltip-footer">
-                    {m.mapId && (
-                        <div>
-                            <a href={m.mapId} class="map-link">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-
-                                <span>
-                                    { seeMapText }
-                                </span>
-                            </a>
-                        </div>
-                    )}
-
-                    <div>
-                        <CopyText text={`${Astro.url}?p=${normalizeString(m.title)}`} />
-                    </div>
-                </div>
+            <div id="popup-template" data-id={`marker-${index}`}>
+                <MarkerContent marker={m} />
             </div>
         ))}
     </div>
@@ -87,9 +50,7 @@ const seeMapText = t('maps.go-to-map', lang)
         mapWidth,
         rulerDistanceRatio,
         rulerMainUnit,
-        rulerHideWalkDistance,
-        byText,
-        seeMapText
+        rulerHideWalkDistance
     }}
     defer
 >
diff --git a/src/components/maps/MarkerContent.astro b/src/components/maps/MarkerContent.astro
new file mode 100644
index 00000000..cb6b3e28
--- /dev/null
+++ b/src/components/maps/MarkerContent.astro
@@ -0,0 +1,176 @@
+---
+import type { MapMarker } from '@/types/Leaflet';
+import { normalizeString } from '@/utils/Strings';
+import { getLangFromUrl } from '@/i18n/utils';
+import { t } from '@/i18n/store';
+
+import CopyText from '@/components/global/CopyText.astro';
+
+interface Props {
+    marker: MapMarker
+}
+
+const { marker: m } = Astro.props as Props;
+
+const lang = getLangFromUrl(Astro.url);
+
+const byText = t('common.by', lang)
+const seeMapText = t('maps.go-to-map', lang)
+---
+
+<div class="tooltip-content">
+    {m.cover && m.coverAuthor && m.coverLink && (
+        <figure class={m.coverPortrait ? 'portrait' : 'landscape'}>
+            <img src={`/images/cover/${m.cover}`} alt={m.title} width={m.coverPortrait ? 210 : 420} />
+            <figcaption>
+                <span class="author">
+                    <span>{byText}</span>
+                    <cite>
+                        <a href={m.coverLink} target="_blank">{m.coverAuthor}</a>
+                    </cite>
+                </span>
+            </figcaption>
+        </figure>
+    )}
+    {m.link ? (
+        <a href={m.link} target="_blank" class="title">{m.title}</a>
+    ) : (
+        <strong class="title">{m.title}</strong>
+    )}
+    {m.description && <p set:html={m.description} />}
+    
+    <div class="tooltip-footer">
+        {m.mapId && (
+            <div>
+                <a href={m.mapId} class="map-link">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+    
+                    <span>
+                        { seeMapText }
+                    </span>
+                </a>
+            </div>
+        )}
+    
+        <div>
+            <CopyText text={`${Astro.url}?p=${normalizeString(m.title)}`} />
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    figure {
+        position: relative;
+        margin-inline: -1.1rem;
+        margin-top: -1.1rem;
+        margin-bottom: .5rem;
+
+        &.landscape {
+            aspect-ratio: 16 / 9;
+            min-width: 20rem;
+        }
+
+        &.portrait {
+            aspect-ratio: 15 / 16;
+            min-width: 10rem;
+        }
+
+        &::before {
+            content: '';
+            display: block;
+            pointer-events: none;
+            user-select: none;
+            position: absolute;
+            inset: 0;
+            z-index: 10;
+            // Make a linear gradient from top to bottom, from transparent to black
+            background: linear-gradient(to bottom, transparent 70%, var(--black) 100%);
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: top;
+        }
+
+        figcaption .author {
+            position: absolute;
+            font-size: 85%;
+            font-style: italic;
+            font-weight: 600;
+            bottom: .5rem;
+            right: 1rem;
+            color: var(--white);
+            z-index: 20;
+            opacity: .6;
+            transition-property: opacity;
+            transition-duration: .2s;
+            transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
+
+            a {
+                padding-right: 0;
+                color: var(--white);
+                text-decoration: underline;
+                text-underline-offset: .15rem;
+
+                &:hover {
+                    color: var(--blue-500);
+                }
+
+                &::after {
+                    display: none;
+                }
+            }
+        }
+
+        &:hover {
+            figcaption .author {
+                opacity: 1;
+            }
+        }
+    }
+
+    .title {
+        display: block;
+        font-weight: 600;
+    }
+
+    strong.title {
+        color: var(--green-500);
+    }
+
+    a.title,
+    a.map-link {
+        text-underline-offset: 2px;
+        text-decoration: underline;
+
+        &:hover,
+        &:focus-visible {
+            text-decoration: none;
+            color: var(--green-500);
+        }
+    }
+
+    .map-link {
+        display: inline-flex;
+        align-items: center;
+        gap: .5ch;
+
+        svg {
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    .tooltip-content > * + * {
+        margin: 0;
+        margin-top: .66em;
+    }
+
+    .tooltip-footer {
+        display: grid;
+        gap: .15em;
+        font-size: .95em;
+    }
+</style>
\ No newline at end of file