diff --git a/index.html b/index.html
index 26cc8be..ab2da30 100644
--- a/index.html
+++ b/index.html
@@ -369,6 +369,7 @@
          const inputCharacterName = document.getElementById("character-name");
          const inputCampaignName = document.getElementById("campaign-name");
          const inputMaxEffort = document.getElementById("max-effort");
+         const characterSelector = document.getElementById("character-roster");
 
          var characterRoster = {};
          var currentCharacter = null;
@@ -443,6 +444,113 @@
              localStorage.setItem("character-roster", JSON.stringify())
          };
 
+         const loadCharacterRoster = (noSkipLocalStorageCheck) => {
+             if (!noSkipLocalStorageCheck && !checkLocalStorage()) {
+                 alert("Local storage is not available, cannot load roster.")
+             }
+
+             var newRoster = localStorage.getItem("character-roster");
+
+             characterRoster = (newRoster === null) ? {} : JSON.parse(newRoster);
+
+             characterRoster = {
+                 deadBeef: {
+                     campaign: "Campaign One",
+                     name: "Character One",
+                 },
+                 otherChr: {
+                     campaign: "Campaign Two",
+                     name: "Character Two",
+                 },
+                 thirdChr: {
+                     campaign: "Campaign One",
+                     name: "Character Three",
+                 }
+             }
+
+             while (characterSelector.firstChild) {
+                 characterSelector.removeChild(characterSelector.lastChild);
+             }
+
+             let placeHolder = document.createElement("option");
+             placeHolder.appendChild(document.createTextNode("Choose a character to load"));
+             characterSelector.appendChild(placeHolder);
+
+             let characterList = new Array();
+
+             for (let [characterID, characterData] of Object.entries(characterRoster)) {
+                 if (characterRoster.hasOwnProperty(characterID)) {
+                     characterList.push([characterID, characterData.campaign, characterData.name]);
+                 }
+             }
+
+             if (characterList.length == 0) {
+                 return;
+             }
+
+             characterList.sort((a, b) => {
+                 const campaignA = a[1].toUpperCase();
+                 const campaignB = b[1].toUpperCase();
+                 const nameA = a[2].toUpperCase();
+                 const nameB = b[2].toUpperCase();
+
+                 // Sort by campaign name first
+                 if (campaignA < campaignB) {
+                     return -1;
+                 }
+
+                 if (campaignA > campaignB) {
+                     return 1;
+                 }
+
+                 // Sort by character name within the same campaign
+                 if (nameA < nameB) {
+                     return -1;
+                 }
+
+                 if (nameA > nameB) {
+                     return 1;
+                 }
+
+                 // If all else fails, sort by the character ID
+                 if (a[0] < b[0]) {
+                     return -1;
+                 }
+
+                 if (a[0] > b[0]) {
+                     return 1;
+                 }
+
+                 return 0;
+             });
+
+             let currentGroup = null;
+             let previousCampaign = null;
+
+             characterList.forEach(([characterID, campaignName, characterName]) => {
+                 if ((previousCampaign !== null) && (previousCampaign !== campaignName)) {
+                     console.log("Found a new campaign", campaignName);
+                     characterSelector.appendChild(currentGroup);
+                     currentGroup = null;
+                 }
+
+                 if (currentGroup === null) {
+                     currentGroup = document.createElement("optgroup");
+                     currentGroup.label = campaignName;
+                 }
+
+                 let newOption = document.createElement("option");
+                 newOption.value = characterID;
+                 newOption.appendChild(document.createTextNode(characterName));
+                 currentGroup.appendChild(newOption);
+                 previousCampaign = campaignName;
+             });
+
+             if (currentGroup !== null) {
+                 characterSelector.appendChild(currentGroup);
+             }
+         };
+
          document.addEventListener(
              "DOMContentLoaded",
              () => {
@@ -451,9 +559,7 @@
                      alert("Local Storage is not available, saving and loading data will be unavailable.");
                  }
 
-                 var newRoster = localStorage.getItem("character-roster");
-
-                 characterRoster = (newRoster === null) ? {} : JSON.parse(newRoster);
+                 loadCharacterRoster(true);
              },
          );