diff --git a/main.php b/main.php
index 1dad653..b314ee4 100644
--- a/main.php
+++ b/main.php
@@ -28,91 +28,117 @@ function redirect($path)
 	exit(0); // TERMINATE CURRENT SCRIPT!
 }
 
-if (isset($_GET["rescan"]))
+$te = new template_engine();
+if ($display == "main")
 {
-	$lib->rescan_library(json_decode(file_get_contents("session/settings.json"), true)["osu_folder"]);
-	$lib->save_db();
-	redirect("./");
-}
-
-if (isset($_GET["scan"]))
-{
-	$lib->scan_library(json_decode(file_get_contents("session/settings.json"), true)["osu_folder"]);
-	$lib->save_db();
-	redirect("./");
-}
-
-if (isset($_GET["blacken"]))
-{
-	@optimizer::blacken_backgrounds($lib);
-	redirect("./");
-}
-
-if (isset($_GET["nosb"]))
-{
-	@optimizer::remove_storyboards($lib);
-	redirect("./");
-}
-
-if (isset($_GET["novid"]))
-{
-	@optimizer::remove_videos($lib);
-	redirect("./");
-}
-
-if (isset($_GET["noskin"]))
-{
-	@optimizer::remove_skins($lib);
-	redirect("./");
-}
-
-if (isset($_GET["nohit"]))
-{
-	@optimizer::remove_hitsounds($lib);
-	redirect("./");
-}
-
-if (isset($_GET["purify"]))
-{
-	@optimizer::remove_other($lib);
-	redirect("./");
-}
-
-if (isset($_GET["nuke"]))
-{
-	@optimizer::full_nuke($lib);
-	redirect("./");
-}
-
-$start = file_get_contents("resources/start.html");
-$start = str_replace("{{ STYLE }}", file_get_contents("resources/style.css"), $start);
-echo $start;
-// dump($lib, "lib");
-echo '<a href="./?scan">[Scan]</a>&nbsp;&nbsp; ';
-echo '<a href="./?rescan">[Force rescan]</a>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;';
-echo '<a href="./?blacken">[Remove backgrounds]</a>&nbsp;&nbsp; ';
-echo '<a href="./?novid">[Remove videos]</a>&nbsp;&nbsp; ';
-echo '<a href="./?nosb">[Remove storyboards]</a>&nbsp;&nbsp; ';
-echo '<a href="./?noskin">[Remove beatmap skins]</a>&nbsp;&nbsp; ';
-echo '<a href="./?nohit">[Remove custom hitsounds]</a>&nbsp;&nbsp; ';
-echo '<a href="./?purify">[Remove junk files]</a>&nbsp;&nbsp; ';
-echo '<a href="./?nuke">[NUKE]</a>&nbsp;&nbsp; ';
-echo '<br /><br /><br /><a href="./splitter.php?page=1">[Explore]</a>&nbsp;&nbsp; ';
-echo "<h2>" . count($lib->get_library()) . " mapsets loaded.</h2>";
-echo "<h3>osu! folder: " . $lib->get_root() . "</h3>";
-
-$proc_time = 0;
-foreach ($lib->get_library() as $set)
-{
-	foreach ($set["difficulties"] as $map)
+	if (isset($_GET["rescan"]))
 	{
-		$proc_time += $map["parsing_time"] ?? 0;
+		$lib->rescan_library(json_decode(file_get_contents("session/settings.json"), true)["osu_folder"]);
+		$lib->save_db();
+		redirect("./");
 	}
+
+	if (isset($_GET["scan"]))
+	{
+		$lib->scan_library(json_decode(file_get_contents("session/settings.json"), true)["osu_folder"]);
+		$lib->save_db();
+		redirect("./");
+	}
+
+	if (isset($_GET["blacken"]))
+	{
+		@optimizer::blacken_backgrounds($lib);
+		redirect("./");
+	}
+
+	if (isset($_GET["nosb"]))
+	{
+		@optimizer::remove_storyboards($lib);
+		redirect("./");
+	}
+
+	if (isset($_GET["novid"]))
+	{
+		@optimizer::remove_videos($lib);
+		redirect("./");
+	}
+
+	if (isset($_GET["noskin"]))
+	{
+		@optimizer::remove_skins($lib);
+		redirect("./");
+	}
+
+	if (isset($_GET["nohit"]))
+	{
+		@optimizer::remove_hitsounds($lib);
+		redirect("./");
+	}
+
+	if (isset($_GET["purify"]))
+	{
+		@optimizer::remove_other($lib);
+		redirect("./");
+	}
+
+	if (isset($_GET["nuke"]))
+	{
+		@optimizer::full_nuke($lib);
+		redirect("./");
+	}
+
+	$options = array(
+		[ "./?scan", "Scan", "Only scan for changes." ],
+		[ "./?rescan", "Force rescan", "Fully rescan the library. <i>(cached)</i>" ],
+		[ "./?blacken", "Remove backgrounds", "Replace the background files with 1x1 black images." ],
+		[ "./?novid", "Remove videos", "" ],
+		[ "./?nosb", "Remove storyboards", "" ],
+		[ "./?noskin", "Remove beatmap skins", "Does not remove hitsounds &amp; storyboard elements." ],
+		[ "./?nohit", "Remove custom hitsounds", "Does not remove storyboard elements." ],
+		[ "./?purify", "Remove junk files", "Remove everything that isn't referenced in .osu or .osb files." ],
+		[ "./?nuke", "NUKE", "Remove everything that isn't .osu or a referenced audio/background file. Note: old/bad maps might lose vital elements!" ],
+		[ "./splitter.php?page=1", "Explore", "TBD" ],
+	);
+	
+	$parse_time = 0;
+	foreach ($lib->get_library() as $set)
+	{
+		foreach ($set["difficulties"] as $map)
+		{
+			$parse_time += $map["parsing_time"] ?? 0;
+		}
+	}
+	
+	$mapset_count = count($lib->get_library());
+	$osu_root = $lib->get_root();
+	$parse_time = round($parse_time, 3);
+	$scan_time = round($lib->get_scan_time(), 3);
+	
+	$te->set_block_template("CONTENT", "MAIN");
+	$te->set_block("MAIN_MAPSET_COUNT", $mapset_count);
+	$te->set_block("MAIN_FOLDER_LOCATION", $osu_root);
+	$te->set_block("MAIN_PARSE_TIME", $parse_time);
+	$te->set_block("MAIN_SCAN_TIME", $scan_time);
+	
+	foreach ($options as list($link, $name, $description))
+	{
+		$te->append_argumented_block("MAIN_OPTIONS", "MAIN_OPTION", [
+			"MAIN_OPTION_LINK" => $link,
+			"MAIN_OPTION_NAME" => $name,
+			"MAIN_OPTION_DESCRIPTION" => $description,
+		]);
+	}
+	
+	echo $te->get_html();
+	
+	// dump($lib, "lib");
 }
-$proc_time = round($proc_time, 3);
-$scan_time = round($lib->get_scan_time(), 3);
-echo "<h3>Total parse time: " . $proc_time . " seconds</h3>";
-echo "<h3>Scan time: " . $scan_time . " seconds</h3>";
+else if ($display == "start")
+{
+	
+}
+
+
 // foreach ($lib->get_library() as $mapset)
 // {
 	// echo '<div class="beatmapset">';
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..263a0bb
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1 @@
+<html><head>{{ HEAD }}</head>{{ BODY }}</html>
\ No newline at end of file
diff --git a/templates/body.html b/templates/body.html
new file mode 100644
index 0000000..b108db0
--- /dev/null
+++ b/templates/body.html
@@ -0,0 +1,3 @@
+<body id="body">
+{{ CONTENT }}
+</body>
\ No newline at end of file
diff --git a/templates/head.html b/templates/head.html
new file mode 100644
index 0000000..62f239d
--- /dev/null
+++ b/templates/head.html
@@ -0,0 +1,3 @@
+<title>osu! Optimizer by Thayol</title>
+<style>{{ STYLE }}</style>
+<meta charset="UTF-8">
\ No newline at end of file
diff --git a/templates/main-browser-script.js b/templates/main-browser-script.js
new file mode 100644
index 0000000..d5ff95e
--- /dev/null
+++ b/templates/main-browser-script.js
@@ -0,0 +1,30 @@
+var xmlhttp = new XMLHttpRequest();
+var page = 1;
+var url = "./splitter.php?format=json&page=" + page.toString();
+
+xmlhttp.onreadystatechange = function() {
+	// done & success
+	if (this.readyState == 4 && this.status == 200) {
+		var result = JSON.parse(this.responseText);
+		alert(result);
+		changeBrowser(result);
+	}
+};
+
+xmlhttp.open("GET", url, true);
+xmlhttp.send();
+
+function changeBrowser(mapsets)
+{
+	var browser = document.getElementById("browser");
+	
+	var output = "";
+	
+	var template = "<div class=\"map\"><p class=\"map-title\">{{ MAP_TITLE }}</p></div>";
+	for (var beatmap of mapsets.entries)
+	{
+		output += template.replaceAll(/\{\{ MAP_TITLE \}\}/g, beatmap.Metadata.Title);
+	}
+	
+	browser.innerHTML = output;
+}
diff --git a/templates/main-option.html b/templates/main-option.html
new file mode 100644
index 0000000..faaa271
--- /dev/null
+++ b/templates/main-option.html
@@ -0,0 +1,5 @@
+<div class="option">
+	<p class="option-title"><b>{{ MAIN_OPTION_NAME }}</b></p>
+	<p class="option-description">{{ MAIN_OPTION_DESCRIPTION }}</p>
+	<p class="option-link-spacer"><br /></p><p class="option-link"><a href="{{ MAIN_OPTION_LINK }}">[ Do it! ]</a></p>
+</div>
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
new file mode 100644
index 0000000..868ea7b
--- /dev/null
+++ b/templates/main.html
@@ -0,0 +1,24 @@
+<div class="main-container">
+	<h1>osu! optimizer (PHP)</h1>
+	<h3>by Thayol</h3>
+	<div class="main-item">
+		<h2>Stats</h2>
+		<h3>
+			{{ MAIN_MAPSET_COUNT }} mapsets loaded.<br />
+			osu! folder: {{ MAIN_FOLDER_LOCATION }}<br />
+			Sum of individual file parse times: {{ MAIN_PARSE_TIME }}<br />
+			Last scan took {{ MAIN_SCAN_TIME }} seconds.<br />
+		</h3>
+	</div>
+	<div class="main-item">
+		<h2>Actions</h2>
+		<div class="options">{{ MAIN_OPTIONS }}</div>
+	</div>
+	<div class="main-item">
+		<h2>Browser</h2>
+		<div id="browser" class="browser">
+			<!-- todo JS -->
+		</div>
+		<script>{{ MAIN_BROWSER_SCRIPT }}</script>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/style.css b/templates/style.css
new file mode 100644
index 0000000..77676e9
--- /dev/null
+++ b/templates/style.css
@@ -0,0 +1,67 @@
+html {
+	font-family: Roboto, sans-serif;
+	background-color: #111111;
+	color: White;
+}
+.beatmapset, .beatmap {
+	border: 1px solid white;
+}
+
+.beatmap {
+	margin: 5px 0;
+	padding: 10px;
+}
+a:link, a:hover, a:active, a:visited {
+	color: HotPink;
+	text-decoration: inherit;
+}
+.small-background {
+	max-height: 100px;
+}
+.option-description {
+	font-size: 0.9em;
+	text-decoration: italics;
+	color: #dddddd;
+}
+.option-title, .option-description, .option-link {
+	margin: 0;
+}
+.option-link {
+	position: absolute;
+	right: 10px; bottom: 10px;
+}
+.options {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: flex-start;
+}
+.option {
+	position: relative;
+	flex: 1;
+	min-width: 300px;
+	margin: 5px;
+	padding: 10px;
+	border: 1px solid white;
+}
+.main-container {
+	display: flex;
+	flex-flow: column nowrap;
+}
+.main-item {
+	flex: 1;
+	border: 1px solid white;
+	padding: 10px;
+	margin: 5px;
+}
+.main-container>h1, .main-container>h3 {
+	text-align: center;
+	margin: 0;
+	padding: 0;
+}
+.main-item>h2 {
+	border-bottom: 1px solid white;
+}
+.main-item>h2, .main-item>h3 {
+	margin: 5px;
+	padding: 5px;
+}
\ No newline at end of file