diff --git a/astro.config.mjs b/astro.config.mjs
index 87aec31..dee2192 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,4 +1,10 @@
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-export default defineConfig({});
\ No newline at end of file
+export default defineConfig({
+    vite: {
+    optimizeDeps: {
+      include: ['astro-leaflet > leaflet'],
+    }
+  },
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 77251c7..c5b4b54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "astro": "^5.16.0",
+        "astro-leaflet": "^1.10.0",
         "gsap": "^3.12.7",
-        "leaflet": "^1.9.4",
         "tiny-slider": "^2.9.4"
       },
       "devDependencies": {
@@ -1793,7 +1793,6 @@
       "version": "7946.0.16",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
       "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/hast": {
@@ -1806,10 +1805,9 @@
       }
     },
     "node_modules/@types/leaflet": {
-      "version": "1.9.17",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.17.tgz",
-      "integrity": "sha512-IJ4K6t7I3Fh5qXbQ1uwL3CFVbCi6haW9+53oLWgdKlLP7EaS21byWFJxxqOx9y8I0AP0actXSJLVMbyvxhkUTA==",
-      "dev": true,
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
       "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
@@ -2082,6 +2080,16 @@
         "sharp": "^0.34.0"
       }
     },
+    "node_modules/astro-leaflet": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/astro-leaflet/-/astro-leaflet-1.10.0.tgz",
+      "integrity": "sha512-jTV3YDhlupTiINBw6trpRgEKeeTjEncI/WKUoFPblIBVDxsMtndBTEJjn2v/swbj9X6KtSvLyM4nKESNOS2Wqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/leaflet": "^1.9.20",
+        "leaflet": "^1.9.4"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
diff --git a/package.json b/package.json
index f393eb4..84944cb 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "astro": "^5.16.0",
+    "astro-leaflet": "^1.10.0",
     "gsap": "^3.12.7",
-    "leaflet": "^1.9.4",
     "tiny-slider": "^2.9.4"
   },
   "devDependencies": {
diff --git a/src/components/Index/IndexMap.astro b/src/components/Index/IndexMap.astro
index cc612ea..e64b198 100644
--- a/src/components/Index/IndexMap.astro
+++ b/src/components/Index/IndexMap.astro
@@ -1,19 +1,15 @@
 ---
----
-
-<section id="index-map">
-</section>
-
-<style>
-
-  /*---------- to 767px -----------*/
+import { Leaflet, Marker, Popup, OpenPopup } from "astro-leaflet";
 
-  @media all and (max-width: 767px) {
-
-    #index-map {
-      max-height: 45vh;
-    }
-
-  }
+---
 
-</style>
\ No newline at end of file
+<Leaflet id="index-map" options={{
+  tileByName: 'OSM',
+  center: [-31.42658, -64.18461],
+  zoom: 14,
+}}>
+  <Marker latlng={[-31.42658, -64.18461]}>
+    <Popup content="Bakery"/>
+    <OpenPopup />
+  </Marker>
+</Leaflet>
diff --git a/src/layouts/ContactLayout.astro b/src/layouts/ContactLayout.astro
index caddbab..50d932f 100644
--- a/src/layouts/ContactLayout.astro
+++ b/src/layouts/ContactLayout.astro
@@ -31,7 +31,5 @@ const { title } = Astro.props as Props;
 		<slot />
 		<!---- Ham Menu ---->
 		<script src="../utils/hamMenu.ts"></script>
-		<!---- Index Leaflet Map ---->
-		<script src="../utils/siteMap.ts"></script>
 	</body>
 </html>
diff --git a/src/layouts/IndexLayout.astro b/src/layouts/IndexLayout.astro
index 63bbfa9..da152ef 100644
--- a/src/layouts/IndexLayout.astro
+++ b/src/layouts/IndexLayout.astro
@@ -33,7 +33,5 @@ const { title } = Astro.props as Props;
 		 <script src="../utils/hamMenu.ts"></script>
 		<!---- Index slider JS ---->
 		 <script src="../helpers/indexSlider.ts"></script>
-		<!---- Leaflet Map ---->
-		 <script src="../utils/siteMap.ts"></script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/src/utils/siteMap.ts b/src/utils/siteMap.ts
deleted file mode 100644
index a399aa2..0000000
--- a/src/utils/siteMap.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import L, { Map as LeafletMap, TileLayer, Marker } from "leaflet"
-import "leaflet/dist/leaflet.css"
-import { Icon } from "leaflet";
-
-const markerIcon: string = "/icons/marker-icon.png"
-const markerShadow: string = "/icons/marker-shadow.png"
-
-document.addEventListener("DOMContentLoaded", ()=> {
-
-  const mapElement = document.getElementById("index-map")
-  if(!mapElement) {
-    console.error("Map container not found.")
-    return;
-  }
-
-  const map: LeafletMap = L.map("index-map").setView([-31.42658, -64.18461], 14)
-
-  const tileLayer: TileLayer = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-  })
-
-  tileLayer.addTo(map)
-
-  const customIcon = new Icon({
-    iconUrl: markerIcon,
-    shadowUrl: markerShadow,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    shadowSize: [41, 41],
-  })
-
-  const marker: Marker = L.marker([-31.42658, -64.18461], { icon: customIcon })
-    .addTo(map)
-    .bindPopup("Bakery")
-    .openPopup()
-})
\ No newline at end of file