diff --git a/src/Place.ts b/src/Place.ts
index 8ee7cc0..dae8a87 100644
--- a/src/Place.ts
+++ b/src/Place.ts
@@ -62,7 +62,7 @@ export class Place extends LitElement {
     <div @click="${this.addSpell}">
       <h3>${this.location}</h3>
       <div class="place-spells">
-        ${this.spells.sort(spellSort).map(spell => spell ? html`<dd-spell .spellRemover="${(name: string) => this.removeSpell(name)}" name="${spell.name}" cost=${spell.cost} color="${spell.color}" category="${spell.category}" cantripMagic="${spell.cantripMagic}" reserveMagic="${spell.reserveMagic}" description="${spell.description}"></dd-spell>` : '')}
+        ${this.spells.sort(spellSort).map(spell => spell ? html`<dd-spell .spellRemover="${(name: string) => this.removeSpell(name)}" name="${spell.name}" cost=${spell.cost} color="${spell.color}" category="${spell.category}" ?cantripMagic="${spell.cantripMagic ?? false}" ?reserveMagic="${spell.reserveMagic ?? false}" description="${spell.description}"></dd-spell>` : '')}
       </div>
     </div>
     `;
diff --git a/src/Spell.ts b/src/Spell.ts
index 0e555f3..76038b4 100644
--- a/src/Spell.ts
+++ b/src/Spell.ts
@@ -28,4 +28,4 @@ export const spellSort = (a: Spell, b: Spell) => {
   }
 
   return compareValue;
-}
\ No newline at end of file
+};
diff --git a/src/SpellCard.ts b/src/SpellCard.ts
index f528814..6874762 100644
--- a/src/SpellCard.ts
+++ b/src/SpellCard.ts
@@ -10,8 +10,8 @@ export class SpellCard extends LitElement {
   color: string = '';
   category: string = '';
   description: string = '';
-  cantripMagic: boolean | null = false;
-  reserveMagic: boolean | null = false;
+  cantripMagic: boolean = false;
+  reserveMagic: boolean = false;
   @property() spellRemover: any = null;
   @property() selectSpell: any = null;
 
diff --git a/src/SpellList.ts b/src/SpellList.ts
index 35a27cd..aadaea6 100644
--- a/src/SpellList.ts
+++ b/src/SpellList.ts
@@ -280,7 +280,7 @@ export class SpellList extends LitElement {
       <h2 style="text-align: center;">Spells</h2>
       <input type="text" @keyup="${(event: any) => this.filterText(event)}" />
       <div class="spells">
-        ${this.filteredSpells.sort(spellSort).map(spell => html`<dd-spell name="${spell.name}" cost=${spell.cost} color="${spell.color}" category="${spell.category}" cantripMagic="${spell.cantripMagic}" reserveMagic="${spell.reserveMagic}" description="${spell.description}" .selectSpell="${() => this.selectASpell(spell)}"></dd-spell>`)}
+        ${this.filteredSpells.sort(spellSort).map(spell => html`<dd-spell name="${spell.name}" cost=${spell.cost} color="${spell.color}" category="${spell.category}" ?cantripMagic="${spell.cantripMagic ?? false}" ?reserveMagic="${spell.reserveMagic ?? false}" description="${spell.description}" .selectSpell="${() => this.selectASpell(spell)}"></dd-spell>`)}
       </div>
       `;
   }