diff --git a/web/src/routes/ips/+page.svelte b/web/src/routes/ips/+page.svelte
index 8cc83ce..862b256 100644
--- a/web/src/routes/ips/+page.svelte
+++ b/web/src/routes/ips/+page.svelte
@@ -37,10 +37,23 @@
 
 		map = leaflet.map(mapEl, { zoomControl: true });
 		map.setView([20, 0], 2);
+
+		const isDark =
+			typeof document !== 'undefined' &&
+			document.documentElement.classList.contains('dark');
+
+		// Тёмные тайлы лучше ложатся на основной dark-дизайн панели.
+		const tileUrl = isDark
+			? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
+			: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+
 		leaflet
-			.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			.tileLayer(tileUrl, {
 				maxZoom: 19,
-				attribution: '© OpenStreetMap contributors'
+				subdomains: ['a', 'b', 'c', 'd'],
+				attribution: isDark
+					? '© OpenStreetMap contributors © CARTO'
+					: '© OpenStreetMap contributors'
 			})
 			.addTo(map);
 		markersLayer = leaflet.layerGroup().addTo(map);
@@ -318,3 +331,30 @@
 		</Card.Content>
 	</Card.Root>
 {/if}
+
+<style>
+	/* Leaflet в shadcn/tailwind теме: подгоняем фон, радиус и контролы */
+	:global(.leaflet-container) {
+		background: transparent;
+		border-radius: inherit;
+	}
+	:global(.leaflet-control-zoom) {
+		border-radius: calc(var(--radius) * 0.5);
+	}
+	:global(.leaflet-control-zoom a),
+	:global(.leaflet-control-zoom a:hover) {
+		background: var(--card);
+		color: var(--card-foreground);
+		border: 1px solid var(--border);
+	}
+	:global(.leaflet-control-attribution) {
+		background: transparent;
+		color: var(--muted-foreground);
+	}
+	:global(.leaflet-control-attribution a) {
+		color: var(--muted-foreground);
+	}
+	:global(.leaflet-control-attribution a:hover) {
+		color: var(--foreground);
+	}
+</style>