diff --git a/docs/_layouts/practicehack.html b/docs/_layouts/practicehack.html
new file mode 100644
index 0000000..453ba9d
--- /dev/null
+++ b/docs/_layouts/practicehack.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en-US">
+	<head>
+		<title>{{ page.title }}</title>
+		<meta charset="utf-8">
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<link rel="stylesheet" href="hack.css">
+		<link rel="stylesheet" href="https://spannerisms.github.io/assets/base.css">
+		<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Courier+Prime&display=swap" rel="stylesheet">
+		<link rel="shortcut icon" type="image/x-icon" href="https://spannerisms.github.io/assets/lj.ico">
+	</head>
+
+	<body id="page-top">
+		<nav class="navbar sitenav">
+			<div class="metaLinks">
+				<a href="#top" title="Page top">Top</a>
+				<a href="#null" title="Clear definition hilite">Clr</a>
+			</div>
+			<div class="Home"><a href="index">Home</a></div>
+			<div class="Links">
+				<ul>
+					<li><a href="updates" target="_blank">Change log</a></li>
+					<li><a href="https://spannerisms.github.io/" target="_blank">Blog</a></li>
+
+				</ul>
+			</div>
+		</nav>
+
+		<div id="top" class="content {{ page.background }}">
+			<div class="contentstuff">
+				{{ content }}
+			</div>
+		</div>
+
+
+	<footer>
+		<div class="footerList">
+			<ul>
+				<li><a target="_blank" href="https://github.com/spannerisms/lttphack/">Source</a></li>
+				<li><a target="_blank" href="https://strats.alttp.run">Strat Hub</a></li>
+				<li><a target="_blank" href="https://alttp-wiki.net/">ALttP Wiki</a></li>
+				<li><a target="_blank" href="https://discord.gg/W69UcDpup8">Discord</a></li>
+			</ul>
+		</div>
+	</footer>
+
+	</body>
+</html>
\ No newline at end of file
diff --git a/docs/hack.css b/docs/hack.css
index 46502ca..4c90c49 100644
--- a/docs/hack.css
+++ b/docs/hack.css
@@ -584,4 +584,61 @@ ul.colorList > li.colorDefine > .colorBlock {
 	width: 90px;
 	text-align: center;
 	height: 20px;
-}
\ No newline at end of file
+}
+
+/**************************************
+
+**************************************/
+div#patcher-app {
+	margin: auto;
+	width: 40%;
+	min-width: 300px;
+	font-size: .9em;
+	background: #EEEEFF;
+	border: 3px solid #A0A0FF;
+	border-radius: 20px 20px 0 0;
+}
+
+div#patcher-app div.patch-header {
+	text-align: center;
+	margin: auto;
+	background: #CCCCFF;
+	font-weight: bold;
+	font-size: 1.4em;
+	padding: 7px 0;
+	border-radius: 16px 16px 0 0;
+}
+
+div#patcher-app div.patch-body {
+    padding: 13px;
+}
+
+div#patcher-app div.patch-body > p {
+	text-align: center;
+	margin: 0 2px 9px 2px;
+}
+
+div#patcher-app div.patch-body > div.custom-file {
+    width: 70%;
+    margin: 10px auto;
+}
+
+div#patcher-app div.patch-body > div.custom-file input {
+	   cursor: pointer;
+}
+
+div#patcher-app div.patch-body > button {
+	display: block;
+	margin: auto;
+	width: 70%
+}
+
+div#patcher-app div.patch-body div.choosev {
+	margin: 0 auto 10px;
+	width: 70%;
+	text-align: center;
+}
+
+div#patcher-app div.patch-body div.choosev label {
+	font-weight: bold;
+}
diff --git a/docs/index.html b/docs/index.html
index 8e63820..718cd44 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,7 +5,7 @@
 <section id="download">
 
 <h2>Download</h2>
-<div id="patcher-app" class="col-md-12" >
+<div id="patcher-app" >
 	<patcher id="prachack" manifest-path="patcher/manifest.json" />
 </div>
 
@@ -943,3 +943,14 @@ <h2>Shoutouts</h2>
 	<li>tewtal - JavaScript patcher</li>
 </ul>
 </section>
+
+	<!-- Scripts for the JS patcher -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.11/core.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.8.4/babel.min.js"></script>
+	<script src="https://cdn.polyfill.io/v2/polyfill.js?features=fetch"></script>
+	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/localforage@1.7.3/dist/localforage.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
+	<script type="text/babel" data-presets="env" src="patcher/js/patcher.js"></script>
+	<script type="text/babel" data-presets="env, typescript" src="patcher/js/bps.ts"></script>
+	<!-- // Scripts for the JS patcher -->
\ No newline at end of file
diff --git a/docs/patcher/js/patcher.js b/docs/patcher/js/patcher.js
index 33ec49d..00af9c5 100644
--- a/docs/patcher/js/patcher.js
+++ b/docs/patcher/js/patcher.js
@@ -108,23 +108,15 @@ Vue.component('file-uploader', {
 	},
 	props: ['manifest'],
 	template: `
-	<div>
+	<div class="patchdiv">
 		<template v-if="manifest !== null">
-			<div class="card">
-				<div class="card-header bg-dark text-white">{{ manifest.name }} - {{ manifest.version }}</div>
-				<div class="card-body">
-					<p>Select your <strong>{{ manifest.base.name }}</strong> ROM with CRC <i>{{ manifest.base.crc }}</i><br />
-					<div class="input-group mb-3">
-						<div class="input-group-prepend">
-							<span class="input-group-text">Select ROM</span>
-						</div>
-						<div class="custom-file">
-							<input type="file" style="text-indent: -999px; cursor: pointer;" class="custom-file-input" id="selected-file" @change="fileSelected" />
-							<label class="custom-file-label" for="selected-file">{{ selectedFile ? selectedFile.name : "" }}</label>
-						</div>
-					</div>
-					<button type="button" v-on:click="upload" class="btn btn-primary">Use selected ROM</button>
+			<div class="patch-header">{{ manifest.name }} - {{ manifest.version }}</div>
+			<div class="patch-body">
+				<p>Select your <i>{{ manifest.base.name }}</i> ROM with CRC <strong>{{ manifest.base.crc }}</strong>
+				<div class="custom-file">
+						<input type="file" class="chooserom" id="selected-file" @change="fileSelected" />
 				</div>
+				<button type="button" v-on:click="upload">Use selected ROM</button>
 			</div>
 		</template>
 	</div>
@@ -186,27 +178,19 @@ Vue.component('file-downloader', {
 		}
 	},
 	template: `
-	<div>
+	<div class="patchdiv">
 		<template v-if="manifest !== null">
-			<div class="card">
-				<div class="card-header bg-dark text-white">{{ manifest.name }} - {{ manifest.version }}</div>
-				<div class="card-body">
-					<template v-for="configuration in manifest.configurations">
-						<div class="row">
-							<div class="col">
-								<div class="input-group mb-3">
-									<div class="input-group-prepend"><span class="input-group-text">{{ configuration.name }}</span></div>
-									<select v-model="options[configuration.id]" class="form-control" style="cursor: pointer;" :id="configuration.id" >
-										<option v-for="option in configuration.options" :id="option.id" :value="option.id">{{ option.name }}</option>
-									</select>
-								</div>
-							</div>
-						</div>
-					</template>
-					<div class="input-group mb-3">
-						<button v-on:click="download" type="button" class="btn btn-primary">Save ROM</button>
+			<div class="patch-header">{{ manifest.name }} v{{ manifest.version }}</div>
+			<div class="patch-body">
+				<template v-for="configuration in manifest.configurations">
+					<div class="choosev">
+						<label for="version">Version:</label>
+						<select name="version" v-model="options[configuration.id]" :id="configuration.id" >
+							<option v-for="option in configuration.options" :id="option.id" :value="option.id">{{ option.name }}</option>
+						</select>
 					</div>
-				</div>
+				</template>
+				<button v-on:click="download" type="button">Save ROM</button>
 			</div>
 		</template>
 	</div>
@@ -236,15 +220,13 @@ Vue.component('patcher', {
 	props: ['manifest-path'],
 	template: `
 		<div>
-			<br />
-				<template v-if="manifest">
-					<file-downloader v-if="file" :manifest="manifest" />
-					<file-uploader v-else-if="file == null" :manifest="manifest" v-on:file-uploaded="fileUploaded" />
-				</template>
-				<template v-else-if="manifest == null">
-					<h3>Loading patch information...</h3>
+			<template v-if="manifest">
+				<file-downloader v-if="file" :manifest="manifest" />
+				<file-uploader v-else-if="file == null" :manifest="manifest" v-on:file-uploaded="fileUploaded" />
 				</template>
-			<br />
+			<template v-else-if="manifest == null">
+				<h3>Loading patch information...</h3>
+			</template>
 		</div>
 	`
 });
diff --git a/docs/patcher/manifest.json b/docs/patcher/manifest.json
index 8d01bd7..2d9fd92 100644
--- a/docs/patcher/manifest.json
+++ b/docs/patcher/manifest.json
@@ -14,11 +14,11 @@
                 { "id": "rando", "name": "Randomizer (SA-1)" },
                 { "id": "old", "name": "v13.6.0 (Old)"}
             ]
-        },
+        }
     ],
     "patches": [
         { "version": "current", "file": "patcher/files/sa1.bps"},
         { "version": "rando", "file": "patcher/files/sa1rando.bps"},
-        { "version": "old", "file": "patcher/files/old13.bps"},
+        { "version": "old", "file": "patcher/files/old13.bps"}
     ]
 }
\ No newline at end of file
