diff --git a/public/scripts/kh3/pro-codes-sim.js b/public/scripts/kh3/pro-codes-sim.js
index 10a52ef..79a9226 100644
--- a/public/scripts/kh3/pro-codes-sim.js
+++ b/public/scripts/kh3/pro-codes-sim.js
@@ -5,18 +5,80 @@ const STAR_MULTIPLIER = 1.25;
 let selectionAllState = false;
 let stars = 0;
 let totalMerit = 0;
+let fightMerit = [];
 
-document.addEventListener("DOMContentLoaded", (event) => {});
+document.addEventListener("DOMContentLoaded", (event) => {
+	const codes = document.querySelectorAll("#codes .slot input");
+	const fights = document.querySelectorAll("#fights .slot button");
+
+	// Loading enabled codes
+	for (let code of codes) {
+		const hasCodeToggled =
+			localStorage.getItem(CODES_STORAGE_NAME + code.id) === "true"
+				? true
+				: false;
+		if (hasCodeToggled) {
+			// Normally the toggleCode gets called after the checkbox is checked,
+			// since we don't interact with it at this point we mark it as checked manually here
+			code.checked = true;
+			toggleCode(code);
+		}
+	}
+
+	// Loading marked fights and their merit
+	for (let fight of fights) {
+		const source = fight.dataset["meritSource"];
+		const merit =
+			Number(localStorage.getItem(MERIT_STORAGE_NAME + source)) ?? 0;
+		if (merit > 0) {
+			markFight(fight);
+		}
+	}
+});
+
+function markFight(data) {
+	const source = data.dataset["meritSource"];
+	const baseMerit = data.dataset["baseMerit"];
+	const isMarked = data.dataset["marked"] === "true" ? true : false;
+	const fightLabel = data.parentNode.querySelector("span");
+
+	if (isMarked) {
+		data.dataset["marked"] = false;
+		totalMerit -= fightMerit[source];
+		updateMeritCounter();
+		fightMerit[source] = 0;
+
+		localStorage.removeItem(MERIT_STORAGE_NAME + source);
+
+		data.innerText = "Mark";
+		data.classList.remove("danger");
+		fightLabel.innerText = source;
+	} else {
+		let merit = baseMerit * (stars * STAR_MULTIPLIER);
+		data.dataset["marked"] = true;
+		totalMerit += merit;
+		updateMeritCounter();
+		fightMerit[source] = merit;
+
+		localStorage.setItem(MERIT_STORAGE_NAME + source, merit);
+
+		data.innerText = "Unmark";
+		data.classList.add("danger");
+		fightLabel.innerText = source + " | " + merit + " Merit";
+	}
+}
 
 function toggleCode(code) {
 	let codeStars = Number(code.dataset["stars"]);
 
 	if (code.checked) {
 		stars += codeStars;
+		localStorage.setItem(CODES_STORAGE_NAME + code.id, true);
 	} else {
 		stars -= codeStars;
 		selectionAllState = false;
 		updateAllButton();
+		localStorage.removeItem(CODES_STORAGE_NAME + code.id);
 	}
 	updateStarsCounter();
 }
@@ -33,6 +95,7 @@ function toggleAllCodes() {
 			}
 			code.checked = true;
 			stars += Number(code.dataset["stars"]);
+			localStorage.setItem(CODES_STORAGE_NAME + code.id, true);
 		}
 	} else {
 		selectionAllState = false;
@@ -43,6 +106,7 @@ function toggleAllCodes() {
 			}
 			code.checked = false;
 			stars -= Number(code.dataset["stars"]);
+			localStorage.removeItem(CODES_STORAGE_NAME + code.id);
 		}
 	}
 
@@ -54,6 +118,11 @@ function updateStarsCounter() {
 	counter.innerText = "Stars: " + stars;
 }
 
+function updateMeritCounter() {
+	let counter = document.getElementById("totalMerit");
+	counter.innerText = "Merit: " + totalMerit;
+}
+
 function updateAllButton() {
 	const btn = document.querySelector("#codes .slot button");
 	if (selectionAllState) {
@@ -63,4 +132,4 @@ function updateAllButton() {
 	}
 }
 
-Object.assign(window, { toggleCode, toggleAllCodes });
+Object.assign(window, { markFight, toggleCode, toggleAllCodes });
diff --git a/public/styles/kh3/pro-codes-sim.css b/public/styles/kh3/pro-codes-sim.css
index 1dbdf5b..4d87c5e 100644
--- a/public/styles/kh3/pro-codes-sim.css
+++ b/public/styles/kh3/pro-codes-sim.css
@@ -8,10 +8,11 @@
 #fights {
 	display: flex;
 	flex-direction: column;
-	flex-grow: 1;
 	max-height: 80vh;
-	overflow: auto;
 	margin-top: 2rem;
+	width: 33%;
+	position: relative;
+	overflow: hidden;
 
 	.slot {
 		display: flex;
@@ -19,4 +20,20 @@
 		margin-bottom: 0.5rem;
 		gap: 0.5rem;
 	}
+
+	.inset-box-shadow {
+		box-shadow: inset 0px 0px 40px 40px var(--bg-color);
+		width: 200%;
+		height: 100%;
+		position: absolute;
+		margin-left: -200px;
+		pointer-events: none;
+	}
+
+	.scrollable {
+		width: 100%;
+		height: 100%;
+		overflow: scroll;
+		padding: 60px 0px;
+	}
 }
diff --git a/templates/pages/kh3/pro-codes-sim.html b/templates/pages/kh3/pro-codes-sim.html
index 25d09e2..c97f870 100644
--- a/templates/pages/kh3/pro-codes-sim.html
+++ b/templates/pages/kh3/pro-codes-sim.html
@@ -12,7 +12,7 @@
 
 {% block content %}
 	<div id="score">
-		<h1 id="totalMerit">Merit: 365000</h1>
+		<h1 id="totalMerit">Merit: 0</h1>
 		<h2 id="totalStars">Stars: 0</h2>
 	</div>
 	<div id="codes">
@@ -32,11 +32,14 @@
 		{% endfor %}
 	</div>
 	<div id="fights">
-	{% for fight in fights %}
-		<div class="slot">
-			<button onclick="" data-base-merit="{{fight.merit}}">Mark</button>
-			<span>{{fight.enemy}}</span>
+		<div class="inset-box-shadow"></div>
+		<div class="scrollable">
+		{% for fight in fights %}
+			<div class="slot">
+				<button onclick="markFight(this)" data-merit-source="{{fight.enemy}}" data-base-merit="{{fight.merit}}">Mark</button>
+				<span>{{fight.enemy}}</span>
+			</div>
+		{% endfor %}
 		</div>
-	{% endfor %}
 	</div>
 {% endblock %}