diff --git a/dialogBuilder.html b/dialogBuilder.html
index 63e8057..48dcc56 100644
--- a/dialogBuilder.html
+++ b/dialogBuilder.html
@@ -182,7 +182,8 @@
 
         const selectedPart = getSelectedDialoguePart();
         dialogue[selectedPart].push({
-            speaker: speakerName,
+            // Wrap the speaker name with <b> tags for JSON output
+            speaker: `<b>${speakerName}</b>`,
             text: lineText
         });
 
@@ -240,18 +241,19 @@
                     p.dataset.part = partKey; // Store the part key
                     p.dataset.index = index;   // Store the index within the part array
 
-                    // Apply different styles based on the speaker
-                    if (line.speaker === party1NameInput.value) {
+                    // Apply different styles based on the speaker (checking against un-bolded names for comparison)
+                    if (line.speaker.replace(/<\/?b>/g, '') === party1NameInput.value) { // Remove <b> tags for comparison
                         p.classList.add('bg-blue-100', 'self-start', 'mr-auto');
-                    } else if (line.speaker === party2NameInput.value) {
+                    } else if (line.speaker.replace(/<\/?b>/g, '') === party2NameInput.value) { // Remove <b> tags for comparison
                         p.classList.add('bg-green-100', 'self-end', 'ml-auto');
                         lineWrapper.classList.add('justify-end'); // Align wrapper to end for party 2
                     } else {
-                        // Fallback for speaker names that might not match inputs
+                        // Fallback for speaker names that might not match inputs or have other formatting
                         p.classList.add('bg-gray-100');
                     }
 
-                    p.innerHTML = `<span class="font-bold text-gray-700">${line.speaker}:</span> <span class="line-text">${line.text}</span>`;
+                    // Set innerHTML directly, allowing the <b> tag from the 'speaker' property to render
+                    p.innerHTML = `${line.speaker}: <span class="line-text">${line.text}</span>`;
 
                     // Add blur event listener for editing
                     p.addEventListener('blur', (event) => {
@@ -388,6 +390,7 @@
 
     // Event Listeners
     addParty1Btn.addEventListener('click', () => addDialogueLine(party1NameInput.value));
+    // Corrected: changed party22NameInput to party2NameInput
     addParty2Btn.addEventListener('click', () => addDialogueLine(party2NameInput.value));
     generateJsonBtn.addEventListener('click', generateJson);
     copyJsonBtn.addEventListener('click', copyJsonToClipboard);