diff --git a/public/scripts/kh3/pro-codes-sim.js b/public/scripts/kh3/pro-codes-sim.js
new file mode 100644
index 0000000..10a52ef
--- /dev/null
+++ b/public/scripts/kh3/pro-codes-sim.js
@@ -0,0 +1,66 @@
+const CODES_STORAGE_NAME = "kh3/pro-codes-sim/codes/";
+const MERIT_STORAGE_NAME = "kh3/pro-codes-sim/merit/";
+const STAR_MULTIPLIER = 1.25;
+
+let selectionAllState = false;
+let stars = 0;
+let totalMerit = 0;
+
+document.addEventListener("DOMContentLoaded", (event) => {});
+
+function toggleCode(code) {
+	let codeStars = Number(code.dataset["stars"]);
+
+	if (code.checked) {
+		stars += codeStars;
+	} else {
+		stars -= codeStars;
+		selectionAllState = false;
+		updateAllButton();
+	}
+	updateStarsCounter();
+}
+
+function toggleAllCodes() {
+	const codes = document.querySelectorAll("#codes .slot input");
+
+	if (!selectionAllState) {
+		selectionAllState = true;
+		updateAllButton();
+		for (let code of codes) {
+			if (code.checked) {
+				continue;
+			}
+			code.checked = true;
+			stars += Number(code.dataset["stars"]);
+		}
+	} else {
+		selectionAllState = false;
+		updateAllButton();
+		for (let code of codes) {
+			if (!code.checked) {
+				continue;
+			}
+			code.checked = false;
+			stars -= Number(code.dataset["stars"]);
+		}
+	}
+
+	updateStarsCounter();
+}
+
+function updateStarsCounter() {
+	let counter = document.getElementById("totalStars");
+	counter.innerText = "Stars: " + stars;
+}
+
+function updateAllButton() {
+	const btn = document.querySelector("#codes .slot button");
+	if (selectionAllState) {
+		btn.classList.add("danger");
+	} else {
+		btn.classList.remove("danger");
+	}
+}
+
+Object.assign(window, { toggleCode, toggleAllCodes });
diff --git a/public/styles/bbs/melding.css b/public/styles/bbs/melding.css
index 6ed3551..7cc8e9c 100644
--- a/public/styles/bbs/melding.css
+++ b/public/styles/bbs/melding.css
@@ -17,3 +17,19 @@ table {
 		}
 	}
 }
+
+.filters {
+	display: flex;
+	flex-direction: column;
+
+	.row {
+		display: flex;
+
+		div {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			flex: 0 1 100px;
+		}
+	}
+}
diff --git a/public/styles/common/base.css b/public/styles/common/base.css
index c7ec536..2cf25a8 100644
--- a/public/styles/common/base.css
+++ b/public/styles/common/base.css
@@ -67,8 +67,8 @@ button {
 	background: var(--button-bg-color);
 	color: var(--text-color);
 	padding: 8px;
-	border-color: var(--button-border-color);
 	border-style: groove;
+	border-color: var(--button-border-color);
 	border-bottom-color: var(--primary-color);
 	transition-duration: 0.1s;
 
@@ -85,6 +85,10 @@ button {
 		opacity: 0.6;
 		cursor: not-allowed;
 	}
+
+	&.danger {
+		border-bottom-color: var(--error-color);
+	}
 }
 
 input[type="text"] {
@@ -108,7 +112,6 @@ input[type="radio"] {
 	cursor: pointer;
 	width: 24px;
 	height: 24px;
-	padding-top: 8px;
 
 	& + label {
 		cursor: pointer;
@@ -133,7 +136,7 @@ input[type="radio"] {
 		content: "\2713";
 		color: var(--primary-color);
 		font-size: 48px;
-		top: -10px;
+		top: -16px;
 		left: -4px;
 		align-content: center;
 		text-align: center;
@@ -152,7 +155,7 @@ input[type="radio"] {
 
 	&:checked:after {
 		font-size: 16px;
-		top: 10px;
+		top: 2px;
 		left: 6px;
 	}
 
diff --git a/public/styles/common/colors.css b/public/styles/common/colors.css
index f40edee..961fd1c 100644
--- a/public/styles/common/colors.css
+++ b/public/styles/common/colors.css
@@ -15,4 +15,7 @@
 
 	--primary-color: #00aa00;
 	--primary-light-color: #60de60;
+
+	--error-color: hsl(2, 68%, 53%);
+	--error-color-lighter: hsl(2, 68%, 63%);
 }
diff --git a/public/styles/common/drops.css b/public/styles/common/drops.css
index 3b752ca..0ab8de6 100644
--- a/public/styles/common/drops.css
+++ b/public/styles/common/drops.css
@@ -90,10 +90,19 @@
 	display: flex;
 	flex-wrap: wrap;
 	width: 40%;
-	row-gap: 20px;
+	row-gap: 1rem;
 	position: relative;
+
+	div {
+		align-items: center;
+		display: flex;
+		gap: 0.5rem;
+	}
 }
 
 .tracked-filter {
 	margin-bottom: 16px;
+	align-items: center;
+	display: flex;
+	gap: 0.5rem;
 }
diff --git a/public/styles/kh3/pro-codes-sim.css b/public/styles/kh3/pro-codes-sim.css
index 7866364..1dbdf5b 100644
--- a/public/styles/kh3/pro-codes-sim.css
+++ b/public/styles/kh3/pro-codes-sim.css
@@ -1,6 +1,6 @@
 #content {
 	display: flex;
-	margin: 4rem;
+	margin: 0 4rem;
 }
 
 #score,
@@ -9,10 +9,14 @@
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
-}
+	max-height: 80vh;
+	overflow: auto;
+	margin-top: 2rem;
 
-#fights {
 	.slot {
+		display: flex;
+		align-items: center;
 		margin-bottom: 0.5rem;
+		gap: 0.5rem;
 	}
 }
diff --git a/templates/components/bbs/char-filters.html b/templates/components/bbs/char-filters.html
index b0b6d54..ffb8f44 100644
--- a/templates/components/bbs/char-filters.html
+++ b/templates/components/bbs/char-filters.html
@@ -1,36 +1,44 @@
-<input
-	type="radio"
-	id="hasAny"
-	name="charFilter"
-	autocomplete="off"
-	value=""
-	checked
-/>
-<label for="hasAny">Any</label>
+<div>
+	<input
+		type="radio"
+		id="hasAny"
+		name="charFilter"
+		autocomplete="off"
+		value=""
+		checked
+	/>
+	<label for="hasAny">Any</label>
+</div>
 
-<input
-	type="radio"
-	id="hasTerra"
-	autocomplete="off"
-	value="T"
-	name="charFilter"
-/>
-<label for="hasTerra">Terra</label>
+<div>
+	<input
+		type="radio"
+		id="hasTerra"
+		autocomplete="off"
+		value="T"
+		name="charFilter"
+	/>
+	<label for="hasTerra">Terra</label>
+</div>
 
-<input
-	type="radio"
-	id="hasVentus"
-	autocomplete="off"
-	value="V"
-	name="charFilter"
-/>
-<label for="hasVentus">Ventus</label>
+<div>
+	<input
+		type="radio"
+		id="hasVentus"
+		autocomplete="off"
+		value="V"
+		name="charFilter"
+	/>
+	<label for="hasVentus">Ventus</label>
+</div>
 
-<input
-	type="radio"
-	id="hasAqua"
-	autocomplete="off"
-	value="A"
-	name="charFilter"
-/>
-<label for="hasAqua">Aqua</label>
+<div>
+	<input
+		type="radio"
+		id="hasAqua"
+		autocomplete="off"
+		value="A"
+		name="charFilter"
+	/>
+	<label for="hasAqua">Aqua</label>
+</div>
diff --git a/templates/components/bbs/search.html b/templates/components/bbs/search.html
index 1c2749d..c0de00f 100644
--- a/templates/components/bbs/search.html
+++ b/templates/components/bbs/search.html
@@ -1,29 +1,39 @@
-<input type="text" id="filter" autocomplete="off" />
-<br />
-<input
-	type="radio"
-	id="searchResult"
-	name="search"
-	autocomplete="off"
-	value="commands"
-	checked
-/>
-<label for="searchResult">Result</label>
+<div class="row">
+	<input type="text" id="filter" autocomplete="off" />
+</div>
 
-<input
-	type="radio"
-	id="searchIngredients"
-	autocomplete="off"
-	value="ingredients"
-	name="search"
-/>
-<label for="searchIngredients">Ingredients</label>
+<div class="row">
+	<div>
+		<input
+			type="radio"
+			id="searchResult"
+			name="search"
+			autocomplete="off"
+			value="commands"
+			checked
+		/>
+		<label for="searchResult">Result</label>
+	</div>
 
-<input
-	type="radio"
-	id="searchAbilities"
-	autocomplete="off"
-	value="abilities"
-	name="search"
-/>
-<label for="searchAbilities">Abilities</label>
+	<div>
+		<input
+			type="radio"
+			id="searchIngredients"
+			autocomplete="off"
+			value="ingredients"
+			name="search"
+		/>
+		<label for="searchIngredients">Ingredients</label>
+	</div>
+
+	<div>
+		<input
+			type="radio"
+			id="searchAbilities"
+			autocomplete="off"
+			value="abilities"
+			name="search"
+		/>
+		<label for="searchAbilities">Abilities</label>
+	</div>
+</div>
diff --git a/templates/components/bbs/type-filters.html b/templates/components/bbs/type-filters.html
index c0dfca5..5838726 100644
--- a/templates/components/bbs/type-filters.html
+++ b/templates/components/bbs/type-filters.html
@@ -1,45 +1,55 @@
-<input
-	type="radio"
-	id="isAny"
-	name="typeFilter"
-	autocomplete="off"
-	value=""
-	checked
-/>
-<label for="isAny">Any</label>
+<div>
+	<input
+		type="radio"
+		id="isAny"
+		name="typeFilter"
+		autocomplete="off"
+		value=""
+		checked
+	/>
+	<label for="isAny">Any</label>
+</div>
 
-<input
-	type="radio"
-	id="isAttack"
-	name="typeFilter"
-	autocomplete="off"
-	value="attack"
-/>
-<label for="isAttack">Attack</label>
+<div>
+	<input
+		type="radio"
+		id="isAttack"
+		name="typeFilter"
+		autocomplete="off"
+		value="attack"
+	/>
+	<label for="isAttack">Attack</label>
+</div>
 
-<input
-	type="radio"
-	id="isMagic"
-	name="typeFilter"
-	autocomplete="off"
-	value="magic"
-/>
-<label for="isMagic">Magic</label>
+<div>
+	<input
+		type="radio"
+		id="isMagic"
+		name="typeFilter"
+		autocomplete="off"
+		value="magic"
+	/>
+	<label for="isMagic">Magic</label>
+</div>
 
-<input
-	type="radio"
-	id="isAction"
-	name="typeFilter"
-	autocomplete="off"
-	value="action"
-/>
-<label for="isAction">Action</label>
+<div>
+	<input
+		type="radio"
+		id="isAction"
+		name="typeFilter"
+		autocomplete="off"
+		value="action"
+	/>
+	<label for="isAction">Action</label>
+</div>
 
-<input
-	type="radio"
-	id="isShotlock"
-	name="typeFilter"
-	autocomplete="off"
-	value="shotlock"
-/>
-<label for="isShotlock">Shotlock</label>
+<div>
+	<input
+		type="radio"
+		id="isShotlock"
+		name="typeFilter"
+		autocomplete="off"
+		value="shotlock"
+	/>
+	<label for="isShotlock">Shotlock</label>
+</div>
diff --git a/templates/pages/bbs/melding.html b/templates/pages/bbs/melding.html
index d952d8b..21c8bf1 100644
--- a/templates/pages/bbs/melding.html
+++ b/templates/pages/bbs/melding.html
@@ -11,11 +11,11 @@
 {% endblock %}
 
 {% block content %}
-	{% include "components/bbs/search.html" %}
-	<br />
-	{% include "components/bbs/type-filters.html" %}
-	<br />
-	{% include "components/bbs/char-filters.html" %}
+	<div class="filters">
+		{% include "components/bbs/search.html" %}
+		<div class="row">{% include "components/bbs/type-filters.html" %}</div>
+		<div class="row">{% include "components/bbs/char-filters.html" %}</div>
+	</div>
 
 	<table>
 		<thead>
diff --git a/templates/pages/kh3/pro-codes-sim.html b/templates/pages/kh3/pro-codes-sim.html
index e4408de..25d09e2 100644
--- a/templates/pages/kh3/pro-codes-sim.html
+++ b/templates/pages/kh3/pro-codes-sim.html
@@ -11,19 +11,30 @@
 {% endblock %}
 
 {% block content %}
-	<div id="score"><h1>Merit: 365000</h1></div>
+	<div id="score">
+		<h1 id="totalMerit">Merit: 365000</h1>
+		<h2 id="totalStars">Stars: 0</h2>
+	</div>
 	<div id="codes">
-	{% for code in pro_codes %}
 		<div class="slot">
-			<input type="checkbox" id="{{code.id()}}" autocomplete="off">
-			<label for="{{code.id()}}">{{code.name}}</label>
+			<button onclick="toggleAllCodes()">Toggle All</button>
 		</div>
-	{% endfor %}
+		{% for code in pro_codes %}
+			<div class="slot">
+				<input type="checkbox" id="{{code.id()}}" autocomplete="off" data-stars="{{code.stars}}" onclick="toggleCode(this)">
+				<label for="{{code.id()}}">{{code.name}}</label>
+				<span>
+				{% for star in 0..5 %}
+					{% if star < code.stars %}★{% else %}☆{% endif %}
+				{% endfor %}
+				</span>
+			</div>
+		{% endfor %}
 	</div>
 	<div id="fights">
 	{% for fight in fights %}
 		<div class="slot">
-			<button onclick="" data-base-merit="{{fight.merit}}">Track</button>
+			<button onclick="" data-base-merit="{{fight.merit}}">Mark</button>
 			<span>{{fight.enemy}}</span>
 		</div>
 	{% endfor %}