diff --git a/index.html b/index.html
index e4e127d..60ceabd 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,17 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="stylesheet" href="src/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Frontend Mentor | IP Address Tracker</title>
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-  <body class="bg-gray-400">
+  <body class="grid h-screen grid-rows-[auto_1fr]">
     <header
       class="bg-[url('/pattern-bg-mobile.png')] bg-cover bg-no-repeat px-4 py-8 sm:bg-[url('/pattern-bg-desktop.png')]"
     >
@@ -39,7 +45,7 @@ <h1 class="text-center text-2xl font-bold text-white">
         </form>
 
         <ul
-          class="absolute top-[calc(100%+1rem)] mx-auto mt-4 grid w-full gap-4 rounded-xl bg-white p-6 text-center font-bold sm:grid-flow-col sm:text-left"
+          class="absolute top-[calc(100%+1rem)] z-[1000] mx-auto mt-4 grid w-full gap-4 rounded-xl bg-white p-6 text-center font-bold sm:grid-flow-col sm:text-left"
         >
           <li>
             <p class="text-xs uppercase text-gray-400">IP address</p>
@@ -67,7 +73,9 @@ <h1 class="text-center text-2xl font-bold text-white">
       </div>
     </header>
 
-    <main></main>
+    <main>
+      <div id="map" class="h-full w-full"></div>
+    </main>
 
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/package-lock.json b/package-lock.json
index 698a9e6..678373a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
       "name": "fem-ip-address-tracker",
       "version": "0.0.0",
       "dependencies": {
-        "@netlify/functions": "^2.6.0"
+        "@netlify/functions": "^2.6.0",
+        "leaflet": "^1.9.4"
       },
       "devDependencies": {
+        "@types/leaflet": "^1.9.8",
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
@@ -716,6 +718,21 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "dev": true
+    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.8",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
+      "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.11.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
@@ -1322,6 +1339,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
diff --git a/package.json b/package.json
index ddafb4c..3e7265c 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.8",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
@@ -18,6 +19,7 @@
     "vite": "^5.2.0"
   },
   "dependencies": {
-    "@netlify/functions": "^2.6.0"
+    "@netlify/functions": "^2.6.0",
+    "leaflet": "^1.9.4"
   }
 }
diff --git a/src/main.ts b/src/main.ts
index 3b4d39e..383aaba 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,5 @@
+import L from "leaflet";
+
 type LocationDataError = { code: number; messages: string };
 type LocationData = {
   ip: number;
@@ -13,6 +15,17 @@ type LocationData = {
 type LocationDataResponse = LocationDataError | LocationData;
 
 const searchForm = document.querySelector<HTMLFormElement>("#js-search");
+const map = L.map("map", { zoomControl: false }).setView([51.505, -0.09], 13);
+L.control
+  .zoom({
+    position: "bottomleft",
+  })
+  .addTo(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 pIp = document.querySelector("#js-ip")!;
 const pLocation = document.querySelector("#js-location")!;
