diff --git a/public/pin-icon.svg b/public/pin-icon.svg
new file mode 100644
index 0000000..7e0dd58
--- /dev/null
+++ b/public/pin-icon.svg
@@ -0,0 +1,4 @@
+<svg width="29" height="41" viewBox="0 0 29 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="14.5" cy="15.4219" rx="7" ry="7.5" fill="white"/>
+<path d="M28.4657 14.2917C28.0051 7.02103 21.6168 0.921875 14.4905 0.921875H14.3875C10.6918 0.953431 7.21825 2.46022 4.60475 5.1691C1.95692 7.90755 0.5 11.5404 0.5 15.3981C0.5 27.7434 13.1728 40.0827 13.7115 40.6014C13.9336 40.8154 14.2178 40.9219 14.501 40.9219C14.7841 40.9219 15.0673 40.8154 15.2885 40.6014C15.8416 40.0669 28.5 27.7414 28.5 15.4031C28.5 15.0313 28.4895 14.6615 28.4657 14.2927V14.2917ZM14.501 21.9065C11.0293 21.9065 8.2051 18.9856 8.2051 15.3952C8.2051 11.8047 11.0293 8.88381 14.501 8.88381C17.9726 8.88381 20.7949 11.8047 20.7949 15.3952C20.7949 18.9856 17.9707 21.9065 14.501 21.9065Z" fill="#CADAE4"/>
+</svg>
diff --git a/src/back/jdd-components/components.ts b/src/back/jdd-components/components.ts
index f34e64b..35cee56 100644
--- a/src/back/jdd-components/components.ts
+++ b/src/back/jdd-components/components.ts
@@ -6,5 +6,8 @@ export const registry = new Registry();
 import { ImageDemo } from "./image-demo/image-demo.jdd.js";
 registry.add("image-demo", ImageDemo);
 
+import { MapWithPins } from "./map-with-pins/map-with-pins.jdd.js";
+registry.add("map-with-pins", MapWithPins);
+
 import { NiceBox } from "./nice-box/nice-box.jdd.js";
 registry.add("nice-box", NiceBox);
diff --git a/src/back/jdd-components/map-with-pins/map-with-pins.css b/src/back/jdd-components/map-with-pins/map-with-pins.css
new file mode 100644
index 0000000..4fb7421
--- /dev/null
+++ b/src/back/jdd-components/map-with-pins/map-with-pins.css
@@ -0,0 +1,50 @@
+.map-with-pins {
+	#map {
+		height: 534px;
+	}
+	.popup {
+		.leaflet-popup-content-wrapper,
+		.leaflet-popup-tip {
+			background: #0d4d69;
+			color: #ffffff;
+			text-align: center;
+		}
+		.leaflet-popup-content {
+			margin: 0;
+		}
+		.leaflet-popup-content-wrapper {
+			padding: 22px;
+		}
+	}
+
+	.title,
+	.address {
+		margin: 0 0 8px 0;
+	}
+
+	.title {
+		text-transform: uppercase;
+		font-size: 22px;
+		line-height: 26px;
+	}
+
+	.address {
+		font-size: 12px;
+		line-height: 21px;
+	}
+	.button {
+		display: inline-block;
+		margin: 0 auto;
+		text-align: center;
+		text-decoration: none;
+		border-radius: 25px;
+		text-transform: uppercase;
+		padding: 4px 25px;
+		border: 1px solid #ffffff;
+		color: #ffffff;
+		min-width: 170px;
+		line-height: 18px;
+		font-size: 12px;
+		background-color: #0d4d69;
+	}
+}
diff --git a/src/back/jdd-components/map-with-pins/map-with-pins.jdd.tsx b/src/back/jdd-components/map-with-pins/map-with-pins.jdd.tsx
new file mode 100644
index 0000000..27bac7b
--- /dev/null
+++ b/src/back/jdd-components/map-with-pins/map-with-pins.jdd.tsx
@@ -0,0 +1,126 @@
+import { FlatTemplatable, TempstreamJSX } from "tempstream";
+import {
+	Component,
+	ComponentArguments,
+	ExtractStructuredComponentArgumentsValues,
+	JDDContext,
+} from "@sealcode/jdd";
+
+const coordinates = new ComponentArguments.ShortText();
+coordinates.setExampleValues([
+	"52.39706859245613, 16.898251247012197",
+	"52.8, 16.6",
+	"52.5, 16.1",
+	"52.1, 16.35",
+]);
+
+const component_arguments = {
+	pins: new ComponentArguments.List(
+		new ComponentArguments.Structured({
+			title: new ComponentArguments.ShortText(),
+			address: new ComponentArguments.ShortText(),
+			coordinates,
+			button: new ComponentArguments.Structured({
+				text: new ComponentArguments.ShortText(),
+				link: new ComponentArguments.ShortText(),
+			}),
+		})
+	),
+} as const;
+
+export class MapWithPins extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	toHTML(
+		{ pins }: ExtractStructuredComponentArgumentsValues<typeof component_arguments>,
+		{ render_markdown }: JDDContext
+	): FlatTemplatable {
+		return (
+			<div class="map-with-pins">
+				<link
+					rel="stylesheet"
+					href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+					integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+					crossorigin=""
+				/>
+				<script
+					onload="loadMap()"
+					src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+					integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+					crossorigin=""
+				></script>
+				{
+					/* HTML */ `<script>
+						function loadMap() {
+							const mapDiv = document.getElementById("map");
+							const resizeObserver = new ResizeObserver(() => {
+								map.invalidateSize();
+							});
+
+							resizeObserver.observe(mapDiv);
+							var map = L.map("map");
+							L.tileLayer(
+								"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+								{
+									maxZoom: 19,
+									attribution:
+										'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+								}
+							).addTo(map);
+
+							const pins = ${JSON.stringify(pins)};
+							pins.forEach((pin) => addPin(pin, map));
+						}
+
+						function addPin(pin, map) {
+							var pinIcon = L.icon({
+								iconUrl: "/pin-icon.svg",
+								iconSize: [29, 41],
+								iconAnchor: [14, 40],
+								popupAnchor: [-3, 14],
+							});
+
+							var marker = L.marker(
+								pin.coordinates.split(", ").map((x) => parseFloat(x)),
+								{
+									icon: pinIcon,
+								}
+							).addTo(map);
+
+							var popup = L.popup({
+								closeButton: false,
+								autoClose: false,
+								closeOnEscapeKey: false,
+								closeOnClick: false,
+								className: "popup",
+								offset: [0, -32],
+								maxWidth: "auto",
+							})
+								.setLatLng(
+									pin.coordinates.split(", ").map((x) => parseFloat(x))
+								)
+								.setContent(
+									/* HTML */ \`<div class="popup-content">
+										<p class="title">\${pin.title}</p>
+										<p class="address">\${pin.address}</p>
+										<a class="button" href="\${pin.button.link}">
+											\${pin.button.text}
+										</a>
+									</div> \`
+								)
+								.addTo(map);
+							map.setView(
+								pin.coordinates.split(", ").map((x) => parseFloat(x)),
+								13
+							);
+						}
+					</script>`
+				}
+
+				<div id="map"></div>
+			</div>
+		);
+	}
+}
diff --git a/src/back/routes/components.sreact.tsx b/src/back/routes/components.sreact.tsx
index 29bb709..6c97f6b 100644
--- a/src/back/routes/components.sreact.tsx
+++ b/src/back/routes/components.sreact.tsx
@@ -156,7 +156,7 @@ export default new (class ComponentsPage extends StatefulPage<
 
 	wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
 		return html(ctx, "Components", content, {
-			morphing: true,
+			morphing: false,
 			preserveScroll: true,
 			autoRefreshCSS: true,
 			navbar: () => ``,
diff --git a/src/includes.css b/src/includes.css
index c56a2d5..047eef4 100644
--- a/src/includes.css
+++ b/src/includes.css
@@ -2,6 +2,7 @@
 
 @import "../node_modules/@sealcode/sealgen/src/forms/forms.css";
 @import "back/jdd-components/image-demo/image-demo.css";
+@import "back/jdd-components/map-with-pins/map-with-pins.css";
 @import "back/routes/common/ui/input.css";
 @import "back/routes/components.css";
 @import "colors.css";