diff --git a/sheet.css b/sheet.css
index 3c52982..4c775dc 100644
--- a/sheet.css
+++ b/sheet.css
@@ -9,6 +9,10 @@
 	box-sizing: border-box;
 }
 
+p {
+	margin: 0px;
+}
+
 div.flex {
 	display: flex;
 	flex-direction: row;
@@ -23,6 +27,16 @@ div.grid {
 	gap: 10px;
 }
 
+div.nowrap {
+	flex-wrap: nowrap;
+}
+
+@media (max-width: 600px) {
+	div.mobile {
+		display: block;
+	}
+}
+
 body {
 	min-height: 100vh;
 	background-color: var(--background-color);
@@ -34,30 +48,44 @@ main {
 	margin-right: auto;
 	background-color: var(--page-color);
 	color: var(--text-color);
-	padding: 10px;
-	border: 1px solid var(--text-color);
 	border-radius: 10px;
-	box-shadow: 5px 5px 5px var(--shadow-color);
-	width: fit-content;
-	max-width: max(50%, 720px);
 }
 
 main > form > * {
-	margin-top: 10px;
+	border-bottom: 1px solid var(--text-color);
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+main > form > *:last-child {
+	border-bottom: none;
 }
 
 input, select {
-	width: fit-content;
+	border: none;
+	border-bottom: 1px dashed var(--text-color);
+	background-color: var(--page-color);
+	width: 100%;
 }
 
 input[type="number"] {
-	min-width: 6ch;
+	min-width: 4ch;
 }
 
-input[type="text"] {
-	min-width: 20ch;
+input[type="checkbox"] {
+	width: min-content;
+}
+
+label {
+	display: flex;
+	align-items: center;
+	gap: 10px;
 }
 
 h1 {
 	text-align: center;
+}
+
+.none {
+	display: none;
 }
\ No newline at end of file
diff --git a/sheet.js b/sheet.js
index e69de29..966a250 100644
--- a/sheet.js
+++ b/sheet.js
@@ -0,0 +1,274 @@
+window.addEventListener("DOMContentLoaded", init);
+
+let combatModifiers = [
+	{
+		category: "Saves",
+		items: [
+			{
+				name: "Resilience",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.END) + e.training + (e.mb * e.mastery); }
+
+			},
+			{
+				name: "Reflex",
+				type: "full",
+				value: function (e) { return Math.max(e.AGI, e.WIT) + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Resolve",
+				type: "full",
+				value: function (e) { return Math.max(e.INT, e.CHA) + e.training + (e.mb * e.mastery); }
+			}
+		]
+	},
+	{
+		category: "Weapon",
+		items: [
+			{
+				name: "Simple",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Brawl",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Bludgeon",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Axe",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Polearm",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Sword",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Archery",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Firearm",
+				type: "full",
+				value: function (e) { return Math.max(e.STR, e.AGI) + e.training + (e.mb * e.mastery); }
+			}
+		]
+	},
+	{
+		category: "Armor",
+		items: [
+			{
+				name: "Unarmored",
+				type: "training-only",
+				value: function (e) { return }
+			},
+			{
+				name: "Light",
+				type: "training-only",
+				value: function (e) { return }
+			},
+			{
+				name: "Medium",
+				type: "training-only",
+				value: function (e) { return }
+			},
+			{
+				name: "Heavy",
+				type: "training-only",
+				value: function (e) { return }
+			}
+		]
+	}
+]
+
+let rpModifiers = [
+	{
+		category: "Skills",
+		items: [
+			{
+				name: "Athletics",
+				type: "full",
+				value: function (e) { return e.STR + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Fortitude",
+				type: "full",
+				value: function (e) { return e.END + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Acrobatics",
+				type: "full",
+				value: function (e) { return e.AGI + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Stealth",
+				type: "full",
+				value: function (e) { return e.AGI + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Thievery",
+				type: "full",
+				value: function (e) { return e.AGI + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Animal_Handling",
+				type: "full",
+				value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Intuition",
+				type: "full",
+				value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Perception",
+				type: "full",
+				value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Streetwise",
+				type: "full",
+				value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Survival",
+				type: "full",
+				value: function (e) { return e.WIT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Arcana",
+				type: "full",
+				value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Crafting",
+				type: "full",
+				value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Investigation",
+				type: "full",
+				value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Medicine",
+				type: "full",
+				value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Lore",
+				type: "textarea",
+				value: function (e) { return e.INT + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Deception",
+				type: "full",
+				value: function (e) { return e.CHA + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Intimidation",
+				type: "full",
+				value: function (e) { return e.CHA + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Performance",
+				type: "full",
+				value: function (e) { return e.CHA + e.training + (e.mb * e.mastery); }
+			},
+			{
+				name: "Persuasion",
+				type: "full",
+				value: function (e) { return e.CHA + e.training + (e.mb * e.mastery); }
+			}
+		]
+	}
+]
+
+function init () {
+	populateModifiers("#combat-modifiers", combatModifiers);
+	window.setInterval(() => { setAllValues(combatModifiers) }, 250);
+	populateModifiers("#rp-modifiers", rpModifiers);
+	setAllValues(rpModifiers);
+	window.setInterval(() => { setAllValues(rpModifiers) }, 250);
+}
+
+function populateModifiers(container, data) {
+	let area = document.querySelector(container);
+	for (let i in data) {
+		let category = data[i];
+		let categoryDiv = document.createElement("div");
+		area.append(categoryDiv);
+		categoryDiv.style = "display: contents;";
+		categoryDiv.innerHTML = `<p style="grid-column: 1 / span 4;"><b>${category.category}</b></p>`;
+		for (let j in data[i].items) {
+			let item = data[i].items[j];
+			if (item.type === "full") {
+				categoryDiv.innerHTML += `
+					<div style="display: contents;">
+						<p>${item.name}</p>
+						<label>Training<input id="${category.category}-${item.name}-training" name="${category.category}-${item.name}-training" type="number"></label>
+						<label>MB<input id="${category.category}-${item.name}-mb" name="${category.category}-${item.name}-mb" type="checkbox"></label>
+						<output id="${category.category}-${item.name}-result"></output>
+					</div>
+				`;
+			}
+			else if (item.type === "training-only"){
+				categoryDiv.innerHTML += `
+					<div style="display: contents;">
+						<p>${item.name}</p>
+						<label style="grid-column: 2 / span 3;">Training<input id="${category.category}-${item.name}-training" name="${category.category}-${item.name}-training" type="checkbox"></label>
+						<input id="${category.category}-${item.name}-mb" name="${category.category}-${item.name}-mb" type="checkbox" hidden>
+						<output class="none" id="${category.category}-${item.name}-result"></output>
+					</div>
+				`;
+			}
+			else if (item.type === "textarea") {
+				categoryDiv.innerHTML += `
+					<div style="display: contents;">
+						<textarea></textarea>
+						<label>Training<input id="${category.category}-${item.name}-training" name="${category.category}-${item.name}-training" type="number"></label>
+						<label>MB<input id="${category.category}-${item.name}-mb" name="${category.category}-${item.name}-mb" type="checkbox"></label>
+						<output id="${category.category}-${item.name}-result"></output>
+					</div>
+				`;
+			}
+		}
+	}
+}
+
+function setAllValues (data) {
+	for (let i in data) {
+		let category = data[i];
+		for (let j in data[i].items) {
+			let item = data[i].items[j];
+			setModifierVal(category.category, item.name, item.value);
+		}
+	}
+}
+
+function setModifierVal (category, name, value) {
+	let e = {};
+	e.STR = Number(document.querySelector("#str").value);
+	e.END = Number(document.querySelector("#end").value);
+	e.AGI = Number(document.querySelector("#agi").value);
+	e.WIT = Number(document.querySelector("#wit").value);
+	e.INT = Number(document.querySelector("#int").value);
+	e.CHA = Number(document.querySelector("#cha").value);
+	e.training = Number(document.querySelector(`#${category}-${name}-training`).value);
+	e.mb = Number(document.querySelector(`#${category}-${name}-mb`).checked);
+	e.mastery = Number(document.querySelector("#mastery").value);
+	document.querySelector(`#${category}-${name}-result`).innerText = value(e);
+}
\ No newline at end of file
diff --git a/songs.html b/songs.html
index cab19e1..9d4200a 100644
--- a/songs.html
+++ b/songs.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
+		<title>Character Sheet - SotSA</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
@@ -11,58 +12,51 @@
 		<main class="w3-container w3-card-4 w3-padding" style="max-width: 80ch; margin-left: auto; margin-right: auto;">
 			<h1 class="w3-center">Songs of the Second Age: Character Sheet</h1>
 			<form class="w3-container">
-				<div class="w3-container">
-					<label>Player<input class="w3-input w3-border" id="player" name="player" type="text"></label>
-					<label>Name<input class="w3-input w3-border" id="name" name="name" type="text"></label>
-					<label>Level<input class="w3-input w3-border" id="level" name="level" type="text"></label>
-					<label>Species<input class="w3-input w3-border" id="species" name="species" type="text"></label>
-					<label>Background<input class="w3-input w3-border" id="background" name="background" type="text"></label>
-					<label>Class<input class="w3-input w3-border" id="class" name="class" type="text"></label>
+				<div class="mobile grid" style="grid-template-columns: auto auto auto;">
+					<label>Player<input id="player" name="player" type="text"></label>
+					<label>Name<input id="name" name="name" type="text"></label>
+					<label>Level<input id="level" name="level" type="number"></label>
+					<label>Species<input id="species" name="species" type="text"></label>
+					<label>Background<input id="background" name="background" type="text"></label>
+					<label>Class<input id="class" name="class" type="text"></label>
 				</div>
-				<div class="w3-container">
-					<label for="health">Health</label><input class="w3-input w3-border" id="health" name="health" type="number">
-					<label for="stamina">Stamina</label><input class="w3-input w3-border" id="stamina" name="stamina" type="number">
+				<div class="mobile grid" style="grid-template-columns: auto auto;">
+					<label>Health<input id="health" name="health" type="number"></label>
+					<label>Stamina<input id="stamina" name="stamina" type="number"></label>					
+					<div class="grid" style="grid-column: 1 / span 2; grid-template-columns: auto auto auto auto auto;">
+						<label>Deathrolls</label>
+						<label>W<input id="deathroll-w" name="deathroll-w" type="checkbox"></label>
+						<label>S<input id="deathroll-s" name="deathroll-s" type="checkbox"></label>
+						<label>D<input id="deathroll-d" name="deathroll-d" type="checkbox"></label>
+						<label>I<input id="deathroll-i" name="deathroll-i" type="checkbox"></label>
+					</div>				
 				</div>
-				<div class="w3-container">
-					<label>Deathrolls</label>
-					<div class="w3-container">
-						<label>W</label><input class="w3-input w3-border" type="checkbox">
-						<label>S</label><input class="w3-input w3-border" type="checkbox">
-						<label>D</label><input class="w3-input w3-border" type="checkbox">
-						<label>I</label><input class="w3-input w3-border" type="checkbox">
-					</div>
+				<div class="mobile grid" style="grid-template-columns: repeat(6, calc((100% / 6) - 10px));">
+					<label style="flex-direction: column;"><p><u>Str</u>ength</p><input id="str" name="str" type="number"></label>
+					<label style="flex-direction: column;"><p><u>End</u>urance</p><input id="end" name="end" type="number"></label>
+					<label style="flex-direction: column;"><p><u>Agi</u>lity</p><input id="agi" name="agi" type="number"></label>
+					<label style="flex-direction: column;"><p><u>Wit</u>s</p><input id="wit" name="wit" type="number"></label>
+					<label style="flex-direction: column;"><p><u>Int</u>elligence</p><input id="int" name="int" type="number"></label>
+					<label style="flex-direction: column;"><p><u>Cha</u>risma</p><input id="cha" name="cha" type="number"></label>
 				</div>
-				<div class="w3-container">
-					<label for="str"><u>Str</u>ength</label>
-					<input class="w3-input w3-border" id="str" name="str" type="number">
-					<label for="end"><u>End</u>urance</label>
-					<input class="w3-input w3-border" id="end" name="end" type="number">
-					<label for="agi"><u>Agi</u>lity</label>
-					<input class="w3-input w3-border" id="agi" name="agi" type="number">
-					<label for="wit"><u>Wit</u>s</label>
-					<input class="w3-input w3-border" id="wit" name="wit" type="number">
-					<label for="int"><u>Int</u>elligence</label>
-					<input class="w3-input w3-border" id="int" name="int" type="number">
-					<label for="cha"><u>Cha</u>risma</label>
-					<input class="w3-input w3-border" id="cha" name="cha" type="number">
+				<div class="mobile grid" style="grid-template-columns: repeat(6, calc((100% / 6) - 10px));">
+					<label style="flex-direction: column;">Armor<input id="armor" name="armor" type="number"></label>
+					<label style="flex-direction: column;">Soak<input id="soak" name="soak" type="number"></label>
+					<label style="flex-direction: column;">Speed<input id="speed" name="speed" type="number"></label>
+					<label style="flex-direction: column;">Initiative<input id="initiative" name="initiative" type="number"></label>
+					<label style="flex-direction: column;">Mastery<input id="mastery" name="mastery" type="number"></label>
+					<label for="bulk" style="flex-direction: column;">Bulk
+						<label class="none" for="max-bulk">Max Bulk</label>
+						<div class="flex" style="flex-wrap: nowrap;">
+							<input id="bulk" name="bulk" type="number">
+							<p>/</p>
+							<input id="max-bulk" name="max-bulk" type="number">
+						</div>
+					</label>
 				</div>
-				<div class="w3-container">
-					<label for="armor">Armor</label>
-					<input class="w3-input w3-border" id="armor" name="armor" type="number">
-					<label for="soak">Soak</label>
-					<input class="w3-input w3-border" id="soak" name="soak" type="number">
-					<label for="speed">Speed</label>
-					<input class="w3-input w3-border" id="speed" name="speed" type="number">
-					<label for="initiative">Initiative</label>
-					<input class="w3-input w3-border" id="initiative" name="initiative" type="number">
-					<label for="mastery">Mastery</label>
-					<input class="w3-input w3-border" id="mastery" name="mastery" type="number">
-					<label for="bulk">Bulk</label>
-					<div style="display: flex; flex-direction: row; align-items: center;">
-						<input class="w3-input w3-border" id="bulk" name="bulk" type="number">
-						<p class="w3-margin-left w3-margin-right" style="margin: 0px;">/</p>
-						<input class="w3-input w3-border" id="max-bulk" name="max-bulk" type="number">
-					</div>
+				<div class="w3-row w3-mobile w3-row-padding w3-stretch" style="margin-top: 10px; margin-bottom: 10px;">
+					<div class="w3-half mobile grid" style="grid-template-columns: auto auto auto auto;" id="combat-modifiers"></div>
+					<div class="w3-half mobile grid" style="grid-template-columns: auto auto auto auto;" id="rp-modifiers"></div>
 				</div>
 			</form>
 		</main>