diff --git a/src/js/HKCheckCompletion.js b/src/js/HKCheckCompletion.js
index a280e9a..bfd4f53 100644
--- a/src/js/HKCheckCompletion.js
+++ b/src/js/HKCheckCompletion.js
@@ -8,6 +8,7 @@ import HK from "./hk-database.js";
 
 import {
     PrefillHTML,
+    CompletionHTML,
     CheckboxHintsToggle,
     CheckboxSpoilersToggle,
     StorageAvailable
@@ -242,66 +243,6 @@ function HKCheckCompletion(jsonObject) {
     return true;
 }
 
-/**
- * Replaces the h2 titles with a current percent/max percent values as read from the save file
- * @param {object} jsObj Object with HTML data to fill
- */
-function CompletionHTML(jsObj, hkGameCompletion) {
-
-    let h2 = "";
-    let h2id = "";
-    let cl = "";
-    let clGreen = "box-green";
-    let clRed = "box-red";
-    let cp = 0; // current Percent
-    let mp = 0; // max Percent
-    let fillText = "";
-
-    for (let i in jsObj) {
-        h2 = jsObj[i].h2;
-        h2id = "h2-" + jsObj[i].id;
-
-        (jsObj[i].hasOwnProperty("percent")) ? cp = jsObj[i].percent: cp = 0;
-        if (i === "intro") cp = hkGameCompletion;
-
-        // Don't use percent-box for Essentials, Achievements, Statistics
-        if (!jsObj[i].hasOwnProperty("maxPercent")) {
-            fillText = "";
-        }
-        // otherwise use percent-box with values cp/mp%
-        else {
-
-            mp = jsObj[i].maxPercent;
-
-            if (i === "maskShards") {
-                let perc = jsObj[i].percent;
-                (perc % 4) ? cp = Math.floor(perc / 4): cp = perc / 4;
-            } else if (i === "vesselFragments") {
-                let perc = jsObj[i].percent;
-                (perc % 3) ? cp = Math.floor(perc / 3): cp = perc / 3;
-            }
-
-            // switches the box to red when a section (h2) is 0
-            if (cp === 0) {
-                cl = ` ${clRed}`;
-            }
-            // switches the box to green when a section (h2) is completed
-            else if (cp === mp) {
-                cl = ` ${clGreen}`;
-            }
-            // default is blue (partially completed and starting value)
-            else cl = "";
-
-            // needed for Game Status to show percentage properly (adds a slash for all boxes except the Game Status one)
-            if (jsObj[i].hasOwnProperty("percent")) cp += "/";
-
-            fillText = `<div class='percent-box${cl}'>${(i === "intro") ? cp: cp + jsObj[i].maxPercent}%</div>`;
-        }
-
-        document.getElementById(h2id).innerHTML = h2 + fillText;
-    }
-}
-
 /**
  * Generates and appends a new entry inside the HTML of a given ID
  * @param {object} divId object containing div ID and h2 title of the HTML element
diff --git a/src/js/page-functions.js b/src/js/page-functions.js
index 705d189..4b9870b 100644
--- a/src/js/page-functions.js
+++ b/src/js/page-functions.js
@@ -73,6 +73,67 @@ function PrefillHTML(jsObj, element = "generated") {
     domElement.innerHTML = sFillText;
 }
 
+/**
+ * Replaces the h2 titles with a current percent/max percent values as read from the save file
+ * @param {object} jsObj Object with HTML data to fill
+ * @param {number} hkGameCompletion Total completion percentage in a save file
+ */
+function CompletionHTML(jsObj, hkGameCompletion) {
+
+    let h2 = "";
+    let h2id = "";
+    let cl = "";
+    let clGreen = "box-green";
+    let clRed = "box-red";
+    let cp = 0; // current Percent
+    let mp = 0; // max Percent
+    let fillText = "";
+
+    for (let i in jsObj) {
+        h2 = jsObj[i].h2;
+        h2id = "h2-" + jsObj[i].id;
+
+        (jsObj[i].hasOwnProperty("percent")) ? cp = jsObj[i].percent: cp = 0;
+        if (i === "intro") cp = hkGameCompletion;
+
+        // Don't use percent-box for Essentials, Achievements, Statistics
+        if (!jsObj[i].hasOwnProperty("maxPercent")) {
+            fillText = "";
+        }
+        // otherwise use percent-box with values cp/mp%
+        else {
+
+            mp = jsObj[i].maxPercent;
+
+            if (i === "maskShards") {
+                let perc = jsObj[i].percent;
+                (perc % 4) ? cp = Math.floor(perc / 4): cp = perc / 4;
+            } else if (i === "vesselFragments") {
+                let perc = jsObj[i].percent;
+                (perc % 3) ? cp = Math.floor(perc / 3): cp = perc / 3;
+            }
+
+            // switches the box to red when a section (h2) is 0
+            if (cp === 0) {
+                cl = ` ${clRed}`;
+            }
+            // switches the box to green when a section (h2) is completed
+            else if (cp === mp) {
+                cl = ` ${clGreen}`;
+            }
+            // default is blue (partially completed and starting value)
+            else cl = "";
+
+            // needed for Game Status to show percentage properly (adds a slash for all boxes except the Game Status one)
+            if (jsObj[i].hasOwnProperty("percent")) cp += "/";
+
+            fillText = `<div class='percent-box${cl}'>${(i === "intro") ? cp: cp + jsObj[i].maxPercent}%</div>`;
+        }
+
+        document.getElementById(h2id).innerHTML = h2 + fillText;
+    }
+}
+
 /**
  * Toggles display of "hk-hints". On click with no parameters or on demand when called with a parameter
  * @param {string} param "hide", "show" or none (optional)
@@ -242,6 +303,7 @@ document.getElementById("checkbox-spoilers").addEventListener("click", CheckboxS
 
 export {
     PrefillHTML,
+    CompletionHTML,
     CheckboxHintsToggle,
     CheckboxSpoilersToggle,
     StorageAvailable