diff --git a/sheet.css b/sheet.css
index ae09e09..855937c 100644
--- a/sheet.css
+++ b/sheet.css
@@ -26,7 +26,7 @@ main {
 	justify-content: center;
 }
 
-div.flex {
+.flex {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
diff --git a/sheet.js b/sheet.js
index eaa6052..1829b3d 100644
--- a/sheet.js
+++ b/sheet.js
@@ -279,23 +279,28 @@ let features = [
 	
 ]
 
+let spellSlots = 20
+
 function init () {
 	buildModifiers("#combat-modifiers", combatModifiers);
 	buildModifiers("#rp-modifiers", rpModifiers);
 	buildFeatures("#features", features);
+	buildSpells("#spellcasting-spells", spellSlots);
 
 	let data = getData();
 	deserializeFormData("#character-data", data);
 
-	calculateModifiers(combatModifiers)
+	calculateModifiers(combatModifiers);
 	calculateModifiers(rpModifiers)
+	calculateSpellCasting();;
 
 	data = serializeFormData("#character-data");
 	storeData(data);
 
 	window.setInterval(() => { 
-		calculateModifiers(combatModifiers)
-		calculateModifiers(rpModifiers)
+		calculateModifiers(combatModifiers);
+		calculateModifiers(rpModifiers);
+		calculateSpellCasting();
 
 		data = serializeFormData("#character-data");
 		storeData(data);
@@ -350,6 +355,18 @@ function buildFeatures (container) {
 	}
 }
 
+function buildSpells (container, numSpells) {
+	let area = document.querySelector(container);
+	for (let i = 0; i < numSpells; i++) {
+		area.innerHTML += `
+			<input id="spell-${i}-prep" name="spell-${i}-prep" aria-label="Spell ${i} Prepared" type="checkbox" style="margin-left: auto; margin-right: auto;">
+			<div class="grow-wrap">
+				<textarea id="spell-${i}-info" name="spell-${i}-info" placeholder="Spell Name & Description" onInput="this.parentNode.dataset.replicatedValue = this.value" rows="1"></textarea>
+			</div>
+		`;
+	}
+}
+
 function calculateModifiers (data) {
 	for (let i in data) {
 		let category = data[i];
@@ -360,6 +377,19 @@ function calculateModifiers (data) {
 	}
 }
 
+function calculateSpellCasting () {
+	let attribute = document.querySelector("#spellcasting-attribute").value;
+	let baseVal = 0;
+	if (attribute === "int") { baseVal =  Number(document.querySelector("#int").value); }
+	else if (attribute === "cha") { baseVal =  Number(document.querySelector("#cha").value); }
+	let training = Number(document.querySelector("#spellcasting-training").value);
+	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}`;
+}
+
 function setModifierVal (category, name, value) {
 	let e = {};
 	e.STR = Number(document.querySelector("#str").value);
diff --git a/songs.html b/songs.html
index fc22348..a379557 100644
--- a/songs.html
+++ b/songs.html
@@ -102,7 +102,7 @@
 						<input aria-label="Debt 4" id="debts-4" name="debts-4" type="text">
 					</div>
 				</section>
-				<section class="mobile grid" style="grid-template-columns: auto auto auto auto; align-items: start;">
+				<section class="mobile grid" style="grid-template-columns: auto auto auto auto;">
 					<p style="grid-column: 1 / span 4;">Weapons</p>
 					<p>Name</p>
 					<p>Attack Bonus</p>
@@ -129,6 +129,34 @@
 					<textarea id="inventory" name="inventory" placeholder="Inventory" onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
 				</section>
 			</div>
+			<div class="page w3-container w3-card-4 w3-padding-16" style="padding-left: 32px; padding-right: 32px;">
+				<h2>Spellcasting</h2>
+				<section class="grid mobile" style="grid-template-columns: auto auto auto; align-items: start;">
+					<label class="mobile" style="flex-direction: column; align-items: flex-start;">Spellcasting Attribute
+						<select id="spellcasting-attribute" name="spellcasting-attribute">
+							<option value="none"></option>
+							<option value="int">INT</option>
+							<option value="cha">CHA</option>
+						</select>
+					</label>
+					<div class="flex mobile" style="flex-direction: column; align-items: flex-start;">
+						<p>Spellcasting Modifier</p>
+						<div class="flex mobile">
+							<label>Training<input id="spellcasting-training" name="spellcasting-training" type="number"></label>
+							<label>MB<input id="spellcasting-mb" name="spellcasting-mb" type="checkbox"></label>						
+							<output id="spellcasting-modifier"></output>
+						</div>
+					</div>
+					<div class="flex mobile" style="flex-direction: column; align-items: flex-start;">
+						<p>Spell Save DC</p>
+						<output class="w3-center" id="spellcasting-dc"></output>
+					</div>
+				</section>
+				<section id="spellcasting-spells" class="grid mobile" style="grid-template-columns: auto 1fr;">
+					<p>Prep</p>
+					<p>Spell Name & Description</p>
+				</section>
+			</div>
 			</form>
 		</main>
 	</body>