diff --git a/server.py b/server.py
index 57ee457..fb5732b 100755
--- a/server.py
+++ b/server.py
@@ -133,6 +133,12 @@ def rounds():
     # display outcome
     # display map
 
+@app.route("/balance-tool")
+def balanceTool():
+    return flask.render_template("json_builder.html", 
+                                    positions=["Top", "Jungle", "Mid", "Support", "Bottom"],
+                                    sides=["left", "right"])
+
 @app.route("/player")
 def player():
     '''Show Info about Player'''
@@ -295,4 +301,5 @@ if __name__ == "__main__":
     
     args = parser.parse_args()
     app.config["DB_PATH"] = args.skillbird_db
+    app.config["TEMPLATES_AUTO_RELOAD"] = True
     app.run(host=args.interface, port=args.port)
diff --git a/static/balance.js b/static/balance.js
new file mode 100644
index 0000000..3086d57
--- /dev/null
+++ b/static/balance.js
@@ -0,0 +1,92 @@
+positions = [ "Top", "Jungle", "Mid", "Support" , "Bottom" ]
+
+function fastPosChanged() {
+
+	accepted = [ "top", "jungle", "mid", "sup" , "bot" ]
+	uniqArr  = []
+	prioArray = [5, 5, 5, 5, 5]
+
+	/* commence cleanup */
+	clean = this.value.replaceAll(" ", "").toLocaleLowerCase()
+	clean = clean.replace("support", "sup")
+	clean = clean.replace("adc", "bot")
+	clean = clean.replace("bottom", "bot")
+
+	retVal = true
+	if(clean.includes("<")){
+		console.log("Not accepted (includes <)")
+		retVal = false
+	}
+
+  	list = clean.split(">")
+	cur = 1
+	list.forEach(el => {
+		if(el.includes("=")){
+			listEq = el.split("=")
+			listEq.forEach(sub => {
+				if(accepted.includes(sub) && !uniqArr.includes(sub)){
+					prioArray[accepted.indexOf(sub)] = cur
+					uniqArr += [sub]
+				}else{
+					console.log("Not accepted (=): " + sub)
+					retVal = false
+				}
+			})
+			cur++
+		}else{
+			if(accepted.includes(el) && !uniqArr.includes(el)){
+				prioArray[accepted.indexOf(el)] = cur
+				uniqArr += [el]
+				cur++
+			}else{
+				console.log("Not accepted (>): " + el)
+				retVal = false
+			}
+		}
+	})
+	for(i = 0; i<5; i++){
+		arr = this.id.split("-")
+		pNr = arr[arr.length-1]
+		side = this.id.includes("left") ? "left" : "right"
+		string = "prio-" + side + "-" + accepted[i] + "-" + pNr
+
+		string = string.replace("top","Top")
+		string = string.replace("jungle","Jungle")
+		string = string.replace("mid","Mid")
+		string = string.replace("sup","Support")
+		string = string.replace("bot","Bottom")
+
+		selector = document.getElementById(string)
+		selector.value = prioArray[i]
+		selector.style.background = "lightblue"
+	}
+
+	if(retVal){
+		this.style.background = "green"
+	}else{
+		this.style.background = "red"
+	}
+}
+
+function balance(){
+	sides  = ["left", "right"]
+	var prioList = [5, 5, 5, 5, 5]
+	var pname = "undef"
+	for(sid = 0; sid < 2; sid++){
+		for(id = 0; id < 5; id++){
+			stringPid = `playername-${sides[sid]}-${id}`
+			pnameObj = document.getElementById(stringPid)
+			pname = pnameObj.value
+			for(acc = 0; acc < 5; acc++){
+				stringSelectorId = `prio-${sides[sid]}-${positions[acc]}-${id}`
+				selObj = document.getElementById(stringSelectorId)
+				prioList[acc] = selObj.value
+			}
+		}
+	}
+	console.log(pname, prioList)
+}
+
+fastPosFields = document.getElementsByClassName("fastpos")
+fastPosFields.forEach(el => el.addEventListener('input', fastPosChanged));
+fastPosFields.forEach(el => el.addEventListener('focus', fastPosChanged));
diff --git a/templates/json_builder.html b/templates/json_builder.html
new file mode 100644
index 0000000..e88a2fc
--- /dev/null
+++ b/templates/json_builder.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Balance and Submission Tool</title>
+        <meta name="Description" content="Sheppy is awesome?">
+	<script defer src="/static/balance.js"></script>
+        {% include 'default_head_content.html' %}
+    </head>
+    <body class="bg-special">
+        {% include 'navbar.html' %}
+        <div class="container mt-3 mb-3" role="main">
+            
+            <div class="row">
+                <div class="col-sm">
+			<h1>Balance Tool</h1>
+                </div>
+            </div>
+            
+            <hr>
+            <div class="row">
+            </div>
+
+            <div class="row">
+	    {% for side in sides %}
+                <div class="col-sm">
+                    {% for field in range(5) %}
+                    <div id="{{ side }}-{{ field }}" class="row mt-2 mb-2">
+			<div class="col-sm">
+
+				<!-- player name field -->
+				<input class="form-control" type="text" placeholder="Player"
+					id="playername-{{ side }}-{{ field }}">
+					
+				<!-- fast postition slection field -->
+				<input class="form-control fastpos" type="text" 
+					placeholder="top > mid = bot"
+					id="check-{{ side }}-fastpos-{{ field }}">
+
+
+                        </div>
+			<div class="col-sm">
+				<!-- checkboxes for pos -->
+				{% for pos in positions %}
+				<select id="prio-{{ side }}-{{ pos }}-{{ field }}"
+					class="form-select">
+					<option selected>{{ pos }}</option>
+  					<option value="1">1</option>
+  					<option value="2">2</option>
+  					<option value="3">3</option>
+  					<option value="4">4</option>
+  					<option value="5">5</option>
+				</select>
+				{% endfor %}
+                        </div>
+                    </div>
+	    	    <hr>
+                    {% endfor %}
+                </div>
+	    {% endfor %}
+            </div>
+            <hr>
+        </div>
+        {% include 'footer.html' %}
+    </body>
+</html>
