diff --git a/footer.html b/footer.html
index 0a52902..9d95a75 100644
--- a/footer.html
+++ b/footer.html
@@ -12,62 +12,8 @@
 				</small>
 			</footer>
 			<script src="https://siphalor.de/assets/js/main.js" defer="defer"></script>
-			<script src="/Nginx-Fancyindex-Theme/marked.min.js"></script>
-			<script>
-				let directoryHeading = document.getElementById("directory");
-				let directory = directoryHeading.innerHTML;
-				document.title = "Directory Listing for " + directory;
-
-				let table = document.getElementById("list");
-
-				if (table.tBodies[0].rows[0].cells[0].children[0].innerHTML == "Parent directory/") {
-					directoryHeading.innerHTML = directory.replaceAll(/[^/]+/g, (match, offset) =>
-						`<a href="${directory.substr(0, offset+match.length+1)}">${match}</a>`
-					);
-				}
-
-				let searchContainer = document.getElementById("search-container");
-				searchContainer.remove();
-				table.before(searchContainer);
-				searchContainer.hidden = false;
-				let searchInput = document.getElementById("search-input");
-				searchInput.addEventListener("input", filterTable);
-				filterTable();
-
-				function filterTable() {
-					let value = searchInput.value.toLowerCase();
-					let rows = table.tBodies[0].rows;
-					if (value) {
-						for (let row of rows) {
-							row.hidden = row.cells[0].children[0].innerHTML.toLowerCase()
-									.indexOf(value) < 0;
-						}
-					} else {
-						for (let row of rows) {
-							row.hidden = false;
-						}
-					}
-				}
-
-				fetch("README.md").then(response => {
-					if (response.ok) {
-						response.text().then(text => {
-							let description = document.createElement("details");
-							description.innerHTML = marked.parse(text);
-							let summary = document.createElement("summary");
-							summary.innerHTML = "Description";
-							description.prepend(summary);
-							directoryHeading.after(description);
-						});
-					}
-				});
-
-				[...document.querySelectorAll(".link a")].forEach(link => {
-					if (link.href.endsWith(".ics")) {
-						link.href = link.href.replace(/https?/, "webcal");
-					}
-				})
-			</script>
+			<script src="/Nginx-Fancyindex-Theme/marked.min.js" defer="defer"></script>
+			<script src="/Nginx-Fancyindex-Theme/index.js" defer="defer"></script>
 		</div>
 	</body>
 </html>
diff --git a/header.html b/header.html
index 5019da0..342f87f 100644
--- a/header.html
+++ b/header.html
@@ -2,6 +2,7 @@
 <html>
 	<head>
 		<link rel="stylesheet" href="https://siphalor.de/assets/css/style.css">
+		<link rel="stylesheet" href="/Nginx-Fancyindex-Theme/index.css">
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -19,39 +20,8 @@
 		<link rel="icon" type="image/png" sizes="32x32" href="https://siphalor.de/assets/favicons/favicon-32x32.png">
 		<link rel="icon" type="image/png" sizes="96x96" href="https://siphalor.de/assets/favicons/favicon-96x96.png">
 		<link rel="icon" type="image/png" sizes="16x16" href="https://siphalor.de/assets/favicons/favicon-16x16.png">
-		<style>
-			h1 {
-				text-align: center
-			}
-			summary {
-				text-align: center;
-			}
-			#search-container hr {
-				margin-top: 10px;
-				margin-bottom: 20px;
-			}
-		</style>
 	</head>
 	<body data-theme="dark">
-		<script>
-			const body = document.body;
-			const data = body.getAttribute("data-theme");
-
-			const initTheme = (state) => {
-				if (state === "dark") {
-					body.setAttribute("data-theme", "dark");
-				} else if (state === "light") {
-					body.removeAttribute("data-theme");
-				} else {
-					localStorage.setItem("theme", data);
-				}
-			};
-
-			initTheme(localStorage.getItem("theme"));
-
-			setTimeout(() => body.classList.remove("notransition"), 75);
-		</script>
-
 		<div class="navbar" role="navigation">
 			<nav class="menu">
 				<input type="checkbox" id="menu-trigger" class="menu-trigger" />
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..73842b8
--- /dev/null
+++ b/index.css
@@ -0,0 +1,10 @@
+h1 {
+	text-align: center
+}
+summary {
+	text-align: center;
+}
+#search-container hr {
+	margin-top: 10px;
+	margin-bottom: 20px;
+}
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..e96d44f
--- /dev/null
+++ b/index.js
@@ -0,0 +1,71 @@
+const body = document.body;
+const data = body.getAttribute("data-theme");
+
+const initTheme = (state) => {
+	if (state === "dark") {
+		body.setAttribute("data-theme", "dark");
+	} else if (state === "light") {
+		body.removeAttribute("data-theme");
+	} else {
+		localStorage.setItem("theme", data);
+	}
+};
+
+initTheme(localStorage.getItem("theme"));
+
+setTimeout(() => body.classList.remove("notransition"), 75);
+
+
+let directoryHeading = document.getElementById("directory");
+let directory = directoryHeading.innerHTML;
+document.title = "Directory Listing for " + directory;
+
+let table = document.getElementById("list");
+
+if (table.tBodies[0].rows[0].cells[0].children[0].innerHTML == "Parent directory/") {
+	directoryHeading.innerHTML = directory.replaceAll(/[^/]+/g, (match, offset) =>
+		`<a href="${directory.substr(0, offset+match.length+1)}">${match}</a>`
+	);
+}
+
+let searchContainer = document.getElementById("search-container");
+searchContainer.remove();
+table.before(searchContainer);
+searchContainer.hidden = false;
+let searchInput = document.getElementById("search-input");
+searchInput.addEventListener("input", filterTable);
+filterTable();
+
+function filterTable() {
+	let value = searchInput.value.toLowerCase();
+	let rows = table.tBodies[0].rows;
+	if (value) {
+		for (let row of rows) {
+			row.hidden = row.cells[0].children[0].innerHTML.toLowerCase()
+					.indexOf(value) < 0;
+		}
+	} else {
+		for (let row of rows) {
+			row.hidden = false;
+		}
+	}
+}
+
+fetch("README.md").then(response => {
+	if (response.ok) {
+		response.text().then(text => {
+			let description = document.createElement("details");
+			description.innerHTML = marked.parse(text);
+			let summary = document.createElement("summary");
+			summary.innerHTML = "Description";
+			description.prepend(summary);
+			directoryHeading.after(description);
+		});
+	}
+});
+
+[...document.querySelectorAll(".link a")].forEach(link => {
+	if (link.href.endsWith(".ics")) {
+		link.href = link.href.replace(/https?/, "webcal");
+	}
+})
