diff --git a/gtav-interactive-map/index.html b/gtav-interactive-map/index.html
index 9a7cb0b..ecdd16b 100644
--- a/gtav-interactive-map/index.html
+++ b/gtav-interactive-map/index.html
@@ -41,11 +41,14 @@
     <script defer src="./lib/path.js"></script>
     <script defer src="./lib/gui.js"></script>
     <script defer src="./lib/fetching.js"></script>
+
     <script defer src="./menus/tools/timers.js"></script>
+    <script defer src="./menus/settings/mapStyle.js"></script>
     <script defer src="./menus/settings/debug.js"></script>
     <script defer src="./menus/settings/data.js"></script>
     <script defer src="./menus/changelog.js"></script>
     <script defer src="./menus/faq.js"></script>
+
     <script defer src="./loadScripts/counties.js"></script>
     <script defer src="./loadScripts/mapStyle.js"></script>
     <script defer src="./loadScripts/figurines.js"></script>
@@ -67,6 +70,7 @@
     <script defer src="./loadScripts/vincentHeistHitAndRun.js"></script>
     <script defer src="./loadScripts/vincentHeistDisorganizedCrime.js"></script>
     <script defer src="./loadScripts/vincentHeistSceneOfTheCrime.js"></script>
+
     <script defer src="./script.js"></script>
 </head>
 <body>
diff --git a/gtav-interactive-map/menus/settings/mapStyle.js b/gtav-interactive-map/menus/settings/mapStyle.js
new file mode 100644
index 0000000..9d2a47a
--- /dev/null
+++ b/gtav-interactive-map/menus/settings/mapStyle.js
@@ -0,0 +1,43 @@
+function mapStyleSettings() {
+    resetContentPart2();
+    const names = ["game", "render", "print"];
+    const namesDisp = ["In Game", "Satellite", "Game Manual"];
+
+    let optionDiv = document.createElement("div");
+    optionDiv.innerHTML = "Map Style";
+
+    let interactiveDiv = document.createElement("div");
+
+    let img1 = document.createElement("img");
+    img1.src = "./websiteIcons/small_arr_left.svg";
+    interactiveDiv.appendChild(img1);
+
+    interactiveDiv.innerHTML += `<p>${
+        namesDisp[names.indexOf(saveData.selectedTileLayer)]
+    }</p>`;
+
+    let img2 = document.createElement("img");
+    img2.src = "./websiteIcons/small_arr_right.svg";
+    interactiveDiv.appendChild(img2);
+
+    interactiveDiv.style = "display: flex; align-items: center;";
+    optionDiv.appendChild(interactiveDiv);
+
+    contentPart2.append(optionDiv);
+
+    function refreshMap(idx) {
+        interactiveDiv.children[1].innerHTML = namesDisp[idx];
+        constantData.tileLayers.mainMap[saveData.selectedTileLayer].remove();
+        saveData.selectedTileLayer = names[idx];
+        saveDataSave();
+        constantData.tileLayers.mainMap[saveData.selectedTileLayer].addTo(map);
+        document.getElementById("map").style.background =
+            constantData.oceanColors.mainMap[saveData.selectedTileLayer];
+    }
+
+    optionDiv.addEventListener("click", function () {
+        let idx = names.indexOf(saveData.selectedTileLayer) + 1;
+        if (idx === 3) idx = 0;
+        refreshMap(idx);
+    });
+}
diff --git a/gtav-interactive-map/script.js b/gtav-interactive-map/script.js
index e2a8c0b..1c97685 100644
--- a/gtav-interactive-map/script.js
+++ b/gtav-interactive-map/script.js
@@ -233,56 +233,10 @@ Array.from(document.getElementById("menuScroll").children).forEach((r) =>
             mainContent.classList.add("styleClassic");
 
             /* Map Style Options */
-            let mapStyleButton = addToContentPart1List("Map Style");
-            mapStyleButton.addEventListener("click", function () {
-                resetContentPart2();
-                const names = ["game", "render", "print"];
-                const namesDisp = ["In Game", "Satellite", "Game Manual"];
-
-                let optionDiv = document.createElement("div");
-                optionDiv.innerHTML = "Map Style";
-
-                let interactiveDiv = document.createElement("div");
-
-                let img1 = document.createElement("img");
-                img1.src = "./websiteIcons/small_arr_left.svg";
-                interactiveDiv.appendChild(img1);
-
-                interactiveDiv.innerHTML += `<p>${
-                    namesDisp[names.indexOf(saveData.selectedTileLayer)]
-                }</p>`;
-
-                let img2 = document.createElement("img");
-                img2.src = "./websiteIcons/small_arr_right.svg";
-                interactiveDiv.appendChild(img2);
-
-                interactiveDiv.style = "display: flex; align-items: center;";
-                optionDiv.appendChild(interactiveDiv);
-
-                contentPart2.append(optionDiv);
-
-                function refreshMap(idx) {
-                    interactiveDiv.children[1].innerHTML = namesDisp[idx];
-                    constantData.tileLayers.mainMap[
-                        saveData.selectedTileLayer
-                    ].remove();
-                    saveData.selectedTileLayer = names[idx];
-                    saveDataSave();
-                    constantData.tileLayers.mainMap[
-                        saveData.selectedTileLayer
-                    ].addTo(map);
-                    document.getElementById("map").style.background =
-                        constantData.oceanColors.mainMap[
-                            saveData.selectedTileLayer
-                        ];
-                }
-
-                optionDiv.addEventListener("click", function () {
-                    let idx = names.indexOf(saveData.selectedTileLayer) + 1;
-                    if (idx === 3) idx = 0;
-                    refreshMap(idx);
-                });
-            });
+            addToContentPart1List("Map Style").addEventListener(
+                "click",
+                mapStyleSettings
+            );
 
             /* Debug Options */
             addToContentPart1List("Debug").addEventListener(
