diff --git a/src/lib/components/Map.svelte b/src/lib/components/Map.svelte
new file mode 100644
index 0000000..41c205e
--- /dev/null
+++ b/src/lib/components/Map.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+
+	import { MapLibre, Marker, Popup } from 'svelte-maplibre';
+	import Spinner from './Spinner.svelte';
+
+	import * as conf from '$lib/config';
+	import EmailObfuscated from './EmailObfuscated.svelte';
+	export let clazz = 'absolute inset-0';
+
+	export let lngLat = { lng: 49.317881, lat: 14.104978 };
+	let hasWebGL = false;
+	let isLoading = true;
+
+	onMount(async () => {
+		try {
+			const canvas = document.createElement('canvas');
+			hasWebGL = !!(
+				window.WebGLRenderingContext &&
+				(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
+			);
+		} catch (e) {
+			hasWebGL = false;
+		}
+		isLoading = false;
+	});
+</script>
+
+{#if !browser}
+	<div>
+		Pokud chcete zobrazit mapu, zvažte použití prohlížeče, pokud jste bot či scraper, jděte se
+		vycpat.
+	</div>
+{:else if isLoading}
+	<Spinner />
+{:else if hasWebGL}
+	<section class="relative">
+		<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
+			<div
+				class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative"
+			>
+				<MapLibre
+					center={[49.317881, 14.104978]}
+					zoom={2}
+					class="map"
+					standardControls
+					style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json {clazz}"
+				>
+					<Marker
+						{lngLat}
+						class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-red-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
+					>
+						<span> KKosmetickySalon Oldřichov </span>
+						<Popup openOn="hover" offset={[0, -10]}>
+							<div class="text-lg font-bold">Přijeďte ke mně :)</div>
+						</Popup>
+					</Marker>
+				</MapLibre>
+				<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
+					<div class="lg:w-1/2 px-6">
+						<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">Adresa</h2>
+						<p class="mt-1">{conf.address}</p>
+					</div>
+					<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
+						<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">Email</h2>
+						<EmailObfuscated />
+						<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">
+							{conf.socialLinks[1].title}
+						</h2>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+{:else}
+	<div class="map">
+		Omlouváme se, mapy na tomto webu vyžadují funkci WebGL, pro zobrazení map ji v prohlížeči
+		povolte.
+	</div>
+{/if}
+
+<style>
+	:global(.map) {
+		height: 500px;
+	}
+</style>
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
index 48a2d8a..7d9dde7 100644
--- a/src/routes/(home)/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import HeroSection from "$lib/components/hero/HeroSection.svelte";
+	import Map from '$lib/components/Map.svelte';
+	import HeroSection from '$lib/components/hero/HeroSection.svelte';
 </script>
 
 <HeroSection />
@@ -24,12 +25,7 @@
 		</figure>
 		<!-- / -->
 		<div class="flex justify-center space-x-2">
-			<a
-				class="btn variant-filled"
-				href="https://skeleton.dev/"
-				target="_blank"
-				rel="noreferrer"
-			>
+			<a class="btn variant-filled" href="https://skeleton.dev/" target="_blank" rel="noreferrer">
 				O mně
 			</a>
 		</div>
@@ -38,28 +34,8 @@
 			<p><code class="code">/src/routes/+layout.svelte</code></p>
 			<p><code class="code">/src/routes/+page.svelte</code></p>
 		</div>
-		<section class="relative">
-			<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
-				<div class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
-					<iframe class="absolute inset-0" width="100%" height="100%" src="https://www.openstreetmap.org/export/embed.html?bbox=14.10176753997803%2C49.31640483169278%2C14.10820484161377%2C49.319359677506206&amp;layer=mapnik&amp;marker=49.31788227675921%2C14.104986190795898" title="map" marginheight="0" marginwidth="0" scrolling="no" style="filter: grayscale(1) contrast(1.2) opacity(0.4);" frameborder="0"></iframe>
-					<br/><small><a href="https://www.openstreetmap.org/?mlat=49.31788&amp;mlon=14.10499#map=18/49.31788/14.10499">View Larger Map</a></small>
-					<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
-						<div class="lg:w-1/2 px-6">
-							<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
-							<p class="mt-1">Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter</p>
-						</div>
-						<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
-							<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
-							<a class="text-indigo-500 leading-relaxed">example@email.com</a>
-							<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
-							<p class="leading-relaxed">123-456-7890</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
+		<Map />
 	</div>
-	
 </div>
 
 <style lang="postcss">
@@ -72,8 +48,7 @@
 	}
 	.img-bg {
 		@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
-		animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
-			glow 5s linear infinite;
+		animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite, glow 5s linear infinite;
 	}
 	@keyframes glow {
 		0% {
diff --git a/src/routes/kontakt/+page.svelte b/src/routes/kontakt/+page.svelte
index aca5f64..d9d21e0 100644
--- a/src/routes/kontakt/+page.svelte
+++ b/src/routes/kontakt/+page.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-import { PUBLIC_MAPBOX_ACCESS_TOKEN } from '$env/static/public';
-
+    import Map from "$lib/components/Map.svelte";
 
 </script>
+
+ <svelte:head>
+   <title>Kde mě najdete? Kde mě můžete kontaktovat?</title>
+ </svelte:head>
+
+<Map></Map>