diff --git a/public/scripts/common/mat-kind-filter.js b/public/scripts/common/mat-kind-filter.js
index 44135e3..00f9026 100644
--- a/public/scripts/common/mat-kind-filter.js
+++ b/public/scripts/common/mat-kind-filter.js
@@ -1,7 +1,7 @@
 export let showOnlyTracked = false;
 export let kindFilter = new Set();
 
-document.addEventListener("DOMContentLoaded", (event) => {
+export function init() {
 	const onlyTrackedFilter = document.querySelector(
 		'input[name="onlyTracked"]',
 	);
@@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 			filter();
 		});
 	});
-});
+}
 
 function filter() {
 	const categories = document.querySelectorAll(".category-wrapper");
diff --git a/public/scripts/kh1/drops.js b/public/scripts/kh1/drops.js
index aa16e94..dab40ad 100644
--- a/public/scripts/kh1/drops.js
+++ b/public/scripts/kh1/drops.js
@@ -1,7 +1,12 @@
 import {
+	init,
 	kindFilter,
 	showOnlyTracked,
 	track,
 } from "../common/mat-kind-filter.js";
 
+document.addEventListener("DOMContentLoaded", (event) => {
+	init();
+});
+
 Object.assign(window, { track });
diff --git a/public/scripts/kh2/drops.js b/public/scripts/kh2/drops.js
index aa16e94..dab40ad 100644
--- a/public/scripts/kh2/drops.js
+++ b/public/scripts/kh2/drops.js
@@ -1,7 +1,12 @@
 import {
+	init,
 	kindFilter,
 	showOnlyTracked,
 	track,
 } from "../common/mat-kind-filter.js";
 
+document.addEventListener("DOMContentLoaded", (event) => {
+	init();
+});
+
 Object.assign(window, { track });
diff --git a/templates/components/bbs/style.css b/public/styles/bbs/melding.css
similarity index 100%
rename from templates/components/bbs/style.css
rename to public/styles/bbs/melding.css
diff --git a/templates/components/core/style.css b/public/styles/common/base.css
similarity index 90%
rename from templates/components/core/style.css
rename to public/styles/common/base.css
index 5a018ef..96b0c80 100644
--- a/templates/components/core/style.css
+++ b/public/styles/common/base.css
@@ -1,8 +1,10 @@
+@import url("./colors.css");
+
 body {
 	position: relative;
 	min-height: 98vh;
-	background-color: #333;
-	color: #fff;
+	background-color: var(--bg-color);
+	color: var(--text-color);
 }
 
 footer {
diff --git a/public/styles/common/colors.css b/public/styles/common/colors.css
new file mode 100644
index 0000000..c976c02
--- /dev/null
+++ b/public/styles/common/colors.css
@@ -0,0 +1,4 @@
+:root {
+	--bg-color: #333;
+	--text-color: #fff;
+}
diff --git a/templates/components/kh2/style.css b/public/styles/common/drops.css
similarity index 100%
rename from templates/components/kh2/style.css
rename to public/styles/common/drops.css
diff --git a/templates/components/ddd/style.css b/public/styles/ddd/boards.css
similarity index 100%
rename from templates/components/ddd/style.css
rename to public/styles/ddd/boards.css
diff --git a/public/styles/kh1/drops.css b/public/styles/kh1/drops.css
new file mode 100644
index 0000000..ca58394
--- /dev/null
+++ b/public/styles/kh1/drops.css
@@ -0,0 +1 @@
+@import url("../common/drops.css");
diff --git a/templates/components/kh1/style.css b/public/styles/kh1/synth.css
similarity index 100%
rename from templates/components/kh1/style.css
rename to public/styles/kh1/synth.css
diff --git a/public/styles/kh2/drops.css b/public/styles/kh2/drops.css
new file mode 100644
index 0000000..ca58394
--- /dev/null
+++ b/public/styles/kh2/drops.css
@@ -0,0 +1 @@
+@import url("../common/drops.css");
diff --git a/templates/components/kh3/style.css b/public/styles/kh3/food-sim.css
similarity index 100%
rename from templates/components/kh3/style.css
rename to public/styles/kh3/food-sim.css
diff --git a/src/main.rs b/src/main.rs
index b4c2de9..64821c3 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -26,6 +26,7 @@ mod kh3;
 pub const VERSION: &str = env!("CARGO_PKG_VERSION");
 pub const ASSETS_FOLDER_PATH: &str = "./public/assets";
 pub const SCRIPTS_FOLDER_PATH: &str = "./public/scripts";
+pub const STYLES_FOLDER_PATH: &str = "./public/styles";
 static FILE_HASHES: LazyLock<HashMap<String, Hash>> = LazyLock::new(|| {
 	let mut map = HashMap::new();
 
@@ -56,6 +57,7 @@ static FILE_HASHES: LazyLock<HashMap<String, Hash>> = LazyLock::new(|| {
 	}
 
 	parse_path(SCRIPTS_FOLDER_PATH.into(), &mut map);
+	parse_path(STYLES_FOLDER_PATH.into(), &mut map);
 
 	map
 });
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 6fde02b..428b3e0 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -3,7 +3,7 @@
 	<head>
 		<title>{% block title %}{% endblock %}</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<style>{% include "components/core/style.css"%} </style>
+		<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/common/base.css") }}"></link>
 
 		{% block head %}{% endblock %}
 	</head>
diff --git a/templates/pages/bbs/melding.html b/templates/pages/bbs/melding.html
index 11e30c7..d952d8b 100644
--- a/templates/pages/bbs/melding.html
+++ b/templates/pages/bbs/melding.html
@@ -3,7 +3,7 @@
 {% block title %}BBS - Command Melding{% endblock %}
 
 {% block head %}
-	<style> {% include "components/bbs/style.css" %}</style>
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/bbs/melding.css") }}"></link>
 	<script
 		type="module"
 		src="{{ crate::find_hash("/public/scripts/bbs/melding.js") }}"
diff --git a/templates/pages/ddd/boards.html b/templates/pages/ddd/boards.html
index e01bf18..da0ecf5 100644
--- a/templates/pages/ddd/boards.html
+++ b/templates/pages/ddd/boards.html
@@ -3,7 +3,7 @@
 {% block title %}DDD - Spirit Boards{% endblock %}
 
 {% block head %}
-	<style>{% include "components/ddd/style.css" %}</style>
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/ddd/boards.css") }}"></link>
 {% endblock %}
 
 {% block content %}
diff --git a/templates/pages/kh1/drops.html b/templates/pages/kh1/drops.html
index 49da11b..bf3fe05 100644
--- a/templates/pages/kh1/drops.html
+++ b/templates/pages/kh1/drops.html
@@ -4,7 +4,7 @@
 {% block title %}KH1 - Drops{% endblock %}
 
 {% block head %}
-	<style>{% include "components/kh2/style.css" %}</style>
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/kh1/drops.css") }}"></link>
 	<script
 		type="module"
 		src="{{ crate::find_hash("/public/scripts/kh1/drops.js") }}"
diff --git a/templates/pages/kh1/synth.html b/templates/pages/kh1/synth.html
index 593c5cb..479f085 100644
--- a/templates/pages/kh1/synth.html
+++ b/templates/pages/kh1/synth.html
@@ -4,7 +4,7 @@
 {% block title %}KH1 - Sythensis{% endblock %}
 
 {% block head %}
-	<style>{% include "components/kh1/style.css" %}</style>
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/kh1/synth.css") }}"></link>
 	<script
 		type="module"
 		src="{{ crate::find_hash("/public/scripts/kh1/synth.js") }}"
diff --git a/templates/pages/kh2/drops.html b/templates/pages/kh2/drops.html
index d11ce7c..a10ffbc 100644
--- a/templates/pages/kh2/drops.html
+++ b/templates/pages/kh2/drops.html
@@ -4,7 +4,7 @@
 {% block title %}KH2 - Drops{% endblock %}
 
 {% block head %}
-	<style>{% include "components/kh2/style.css" %}</style>
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/kh2/drops.css") }}"></link>
 	<script
 		type="module"
 		src="{{ crate::find_hash("/public/scripts/kh2/drops.js") }}"
diff --git a/templates/pages/kh3/food-sim.html b/templates/pages/kh3/food-sim.html
index a0d5bea..407a9b6 100644
--- a/templates/pages/kh3/food-sim.html
+++ b/templates/pages/kh3/food-sim.html
@@ -3,7 +3,7 @@
 {% block title %}KH3 - Food Simulator{% endblock %}
 
 {% block head %}
-	<style>{% include "components/kh3/style.css" %}</style>
+	<link rel="stylesheet" href="{{ crate::find_hash("/public/styles/kh3/food-sim.css") }}"></link>
 	<script
 		type="module"
 		src="{{ crate::find_hash("/public/scripts/kh3/food-sim.js") }}"