diff --git a/index.html b/index.html
index f76c5c7..b4875d0 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,11 @@
 			</nav>
 		</header>
 		<main>
-			<div class="w3-large w3-bar flex hidden"><a class="w3-bar-item w3-mobile w3-button">&hearts;</a></div>
+			<div class="w3-large w3-bar flex hidden">
+				<a class="w3-bar-item w3-mobile w3-button">&hearts;</a>
+				<a class="w3-bar-item w3-mobile w3-button">&hearts;</a>
+				<a class="w3-bar-item w3-mobile w3-button">&hearts;</a>
+			</div>
 			<form id="character-data" style="display: contents;">
 			<div class="page w3-container w3-card-4 w3-padding-16">
 				<h1 class="w3-center">Songs of the Second Age: Character Sheet</h1>
@@ -77,7 +81,7 @@
 			</div>
 			<div class="page w3-container w3-card-4 w3-padding-16">
 				<h2 class="w3-center">Character Features</h2>
-				<section class="grid" id="features" style="grid-template-columns: auto auto 1fr; column-gap: 20px; padding: 0px 16px;"></section>
+				<section class="mobile grid" id="features" style="grid-template-columns: auto auto 1fr; column-gap: 20px; padding: 0px 16px;"></section>
 			</div>
 			<div class="page w3-container w3-card-4 w3-padding-16" style="padding-left: 32px; padding-right: 32px;">
 				<h2 class="w3-center">Character Inventory</h2>
@@ -161,7 +165,7 @@
 						<output class="w3-center" id="spellcasting-dc"></output>
 					</div>
 				</section>
-				<section id="spellcasting-spells" class="grid mobile" style="grid-template-columns: auto 1fr;">
+				<section id="spellcasting-spells" class="grid" style="grid-template-columns: auto 1fr;">
 					<p>Prep</p>
 					<p>Spell Name & Description</p>
 				</section>
diff --git a/sheet.css b/sheet.css
index 2626cb7..6245b5a 100644
--- a/sheet.css
+++ b/sheet.css
@@ -102,6 +102,7 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
 
 input[type=number] {
 	-moz-appearance: textfield;
+	min-width: 2ch;
 }
 
 input[type="checkbox"] {
@@ -130,6 +131,13 @@ h1 {
 	display: grid;
 }
 
+@media (max-width: 600px) {
+	.grow-wrap {
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+}
+
 .grow-wrap::after {
 	content: attr(data-replicated-value) " ";
 	white-space: pre-wrap;
@@ -147,4 +155,8 @@ h1 {
 	font: inherit;
 	background-color: var(--page-color);
 	grid-area: 1 / 1 / 2 / 2;
+}
+
+output {
+	min-width: 4ch;
 }
\ No newline at end of file
diff --git a/songs.js b/songs.js
index 615d2ed..2a0a403 100644
--- a/songs.js
+++ b/songs.js
@@ -70,8 +70,8 @@ function buildFeatures (container) {
 	for (let i in features) {
 		let feature = features[i];
 		area.innerHTML += `
-			<p>${feature.name}</p>
-			<p>${feature.level}</p>
+			<p class="w3-hide-small">${feature.name}</p>
+			<p class="w3-hide-small">${feature.level}</p>
 			<div class="grow-wrap">
 				<textarea id="features-${i}" name="features-${i}" placeholder="Feature Name & Description" onInput="this.parentNode.dataset.replicatedValue = this.value" rows="1"></textarea>
 			</div>
@@ -110,8 +110,8 @@ function calculateSpellCasting () {
 	let mb = Number(document.querySelector("#spellcasting-mb").checked);
 	let mastery = Number(document.querySelector("#mastery").value);
 	let modifier = baseVal + training + (mb * mastery);
-	document.querySelector("#spellcasting-modifier").innerText = ` = ${modifier}`;
-	document.querySelector("#spellcasting-dc").innerText = ` = ${8 + modifier}`;
+	document.querySelector("#spellcasting-modifier").innerHTML = `=&nbsp;${modifier}`;
+	document.querySelector("#spellcasting-dc").innerHTML = `=&nbsp;${8 + modifier}`;
 }
 
 function setModifierVal (category, name, value) {
@@ -125,5 +125,5 @@ function setModifierVal (category, name, 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)}`;
+	document.querySelector(`#${category}-${name}-result`).innerHTML = `=&nbsp;${value(e)}`;
 }
\ No newline at end of file