diff --git a/src/App.js b/src/App.js
index 84959a6..a9107e6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -214,7 +214,7 @@ function App() {
         {!isAuthReady && !error && <p>Authenticating...</p>} 
       </main>
        <footer className="bg-slate-900 p-4 text-center text-sm text-slate-400 mt-8">
-        TTRPG Initiative Tracker v0.1.32 
+        TTRPG Initiative Tracker v0.1.33
       </footer>
     </div>
   );
@@ -354,8 +354,8 @@ function AdminView({ userId }) {
 }
 
 // --- CreateCampaignForm, CharacterManager, EncounterManager, CreateEncounterForm, ParticipantManager, EditParticipantModal, InitiativeControls, DisplayView, Modal, Icons ---
-// The rest of the components are identical to the previous version (v0.1.28) and are included below for completeness.
-// Only ParticipantManager and DisplayView have minor changes for monster color.
+// The rest of the components are identical to the previous version (v0.1.29) and are included below for completeness.
+// Only DisplayView has changes for participant rendering logic.
 
 function CreateCampaignForm({ onCreate, onCancel }) {
   const [name, setName] = useState('');
@@ -737,7 +737,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
                 <label htmlFor="monsterMaxHp" className="block text-sm font-medium text-slate-300">Max HP</label>
                 <input type="number" id="monsterMaxHp" value={maxHp} onChange={(e) => setMaxHp(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" />
             </div>
-            <div className="md:col-span-2 flex items-center pt-5"> {/* Aligned with input bottom */}
+            <div className="md:col-span-2 flex items-center pt-5"> 
               <input type="checkbox" id="isNpc" checked={isNpc} onChange={(e) => setIsNpc(e.target.checked)} className="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500" />
               <label htmlFor="isNpc" className="ml-2 block text-sm text-slate-300">Is NPC?</label>
             </div>
@@ -752,7 +752,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
                     {campaignCharacters.map(c => <option key={c.id} value={c.id}>{c.name} (HP: {c.defaultMaxHp || 'N/A'}, Mod: {c.defaultInitMod >=0 ? `+${c.defaultInitMod}` : c.defaultInitMod})</option>)}
                 </select>
             </div>
-            <div className="md:col-span-2"> {/* Spans 2 cols to align with monster layout's 2nd row if needed */}
+            <div className="md:col-span-2"> 
                 <label className="block text-sm font-medium text-slate-300">Max HP (Encounter)</label>
                 <input type="number" value={maxHp} onChange={(e) => setMaxHp(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" />
             </div>
@@ -776,7 +776,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
           const isCurrentTurn = encounter.isStarted && p.id === encounter.currentTurnParticipantId;
           const isDraggable = (!encounter.isStarted || encounter.isPaused) && tiedInitiatives.includes(Number(p.initiative)); 
           const participantDisplayType = p.type === 'monster' ? (p.isNpc ? 'NPC' : 'Monster') : 'Character';
-          let bgColor = p.type === 'character' ? 'bg-sky-800' : (p.isNpc ? 'bg-slate-600' : 'bg-[#8e351c]'); // Custom hex for monster
+          let bgColor = p.type === 'character' ? 'bg-sky-800' : (p.isNpc ? 'bg-slate-600' : 'bg-[#8e351c]'); 
           if (isCurrentTurn && !encounter.isPaused) bgColor = 'bg-green-600';
 
           return (
@@ -963,13 +963,15 @@ function DisplayView() {
   const { name, participants, round, currentTurnParticipantId, isStarted, isPaused } = activeEncounterData; 
   let participantsToRender = []; 
   if (participants) { 
-    if (isStarted && activeEncounterData.turnOrderIds?.length > 0 ) {
-        const inTurnOrderAndActive = activeEncounterData.turnOrderIds.map(id => participants.find(p => p.id === id)).filter(p => p && p.isActive);
-        const notInTurnOrderButActive = participants.filter(p => p.isActive && !activeEncounterData.turnOrderIds.includes(p.id)).sort((a,b) => { if(a.initiative === b.initiative) { const indexA = participants.findIndex(op => op.id === a.id); const indexB = participants.findIndex(op => op.id === b.id); return indexA - indexB; } return b.initiative - a.initiative; });
-        participantsToRender = [...inTurnOrderAndActive, ...notInTurnOrderButActive];
-    } else { 
-      participantsToRender = [...participants].filter(p => p.isActive).sort((a, b) => { if (a.initiative === b.initiative) { const indexA = participants.findIndex(p => p.id === a.id); const indexB = participants.findIndex(p => p.id === b.id); return indexA - indexB; } return b.initiative - a.initiative; });
-    }
+    const activeParticipants = participants.filter(p => p.isActive);
+    participantsToRender = [...activeParticipants].sort((a, b) => {
+        if (a.initiative === b.initiative) {
+            const indexA = participants.findIndex(p => p.id === a.id);
+            const indexB = participants.findIndex(p => p.id === b.id);
+            return indexA - indexB;
+        }
+        return b.initiative - a.initiative; 
+    });
   }
   const displayStyles = campaignBackgroundUrl ? { backgroundImage: `url(${campaignBackgroundUrl})`, backgroundSize: 'cover', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat', minHeight: '100vh' } : { minHeight: '100vh' };
   return (
@@ -993,7 +995,7 @@ function DisplayView() {
             return (
             <div key={p.id} className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${participantBgColor} ${!p.isActive ? 'opacity-40 grayscale' : ''}`}>
               <div className="flex justify-between items-center mb-2">
-                <h3 className={`text-2xl md:text-3xl font-bold ${p.id === currentTurnParticipantId && isStarted && !isPaused ? 'text-white' : (p.type === 'character' ? 'text-sky-100' : (p.isNpc ? 'text-slate-100' : 'text-white'))}`}>{p.name}{p.id === currentTurnParticipantId && isStarted && !isPaused && <span className="text-yellow-300 animate-pulse ml-2">(Current)</span>}</h3> {/* Ensure monster text is white with new bg */}
+                <h3 className={`text-2xl md:text-3xl font-bold ${p.id === currentTurnParticipantId && isStarted && !isPaused ? 'text-white' : (p.type === 'character' ? 'text-sky-100' : (p.isNpc ? 'text-slate-100' : 'text-white'))}`}>{p.name}{p.id === currentTurnParticipantId && isStarted && !isPaused && <span className="text-yellow-300 animate-pulse ml-2">(Current)</span>}</h3>
                 <span className={`text-xl md:text-2xl font-semibold ${p.id === currentTurnParticipantId && isStarted && !isPaused ? 'text-green-200' : 'text-slate-200'}`}>Init: {p.initiative}</span>
               </div>
               <div className="flex justify-between items-center">