diff --git a/assets/js/main.js b/assets/js/main.js
index 7ad28dc..b79be0f 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -211,6 +211,8 @@ const app = {
         this.el.btnReset.addEventListener('click', () => this.resetTimer());
         this.el.btnLap.addEventListener('click', () => this.recordLap());
         this.el.btnNext.addEventListener('click', () => this.recordRelaySplit());
+        this.el.btnAddParticipant = document.getElementById('btn-add-participant');
+        if (this.el.btnAddParticipant) this.el.btnAddParticipant.addEventListener('click', () => this.addParticipant());
         this.el.btnRelaySplit.addEventListener('click', () => this.recordRelaySplit());
         this.el.btnSaveMain.addEventListener('click', () => this.saveCurrentTimer());
         this.el.btnSaveBuilder.addEventListener('click', () => this.saveCurrentTimer());
@@ -229,7 +231,7 @@ const app = {
         this.el.settingIsCountdown.addEventListener('change', () => this.resetTimer());
         this.el.lapSort.addEventListener('change', () => this.renderHistory());
 
-        this.el.participantCount.addEventListener('input', () => this.renderParticipantInputs());
+        // this.el.participantCount.addEventListener('input', () => this.renderParticipantInputs());
 
         this.el.savedTimersDropdown.addEventListener('change', (e) => {
             if (e.target.value) {
@@ -373,7 +375,7 @@ const app = {
         } else if (mode.hasRelay) {
             this.el.listTitle.textContent = 'Relay Splits';
             this.el.listHead.innerHTML = '<tr><th>Participant</th><th>Start Time</th><th>Split Time</th><th class="text-end">Total Time</th></tr>';
-            this.renderParticipantInputs();
+            const count = 2; this.renderParticipantInputs();
         } else if (mode.isCustom) {
             this.el.listTitle.textContent = 'Activities';
             this.el.listHead.innerHTML = '<tr><th>Activity</th><th>Duration</th><th class="text-end">Status</th></tr>';
@@ -396,22 +398,42 @@ const app = {
     },
 
     renderParticipantInputs() {
-        const count = Math.min(12, Math.max(1, parseInt(this.el.participantCount.value) || 1));
-        this.el.participantCount.value = count;
+        const participantInputs = document.querySelectorAll(".participant-name-input");
+        const count = participantInputs.length;
         
-        let html = '';
+        let html = "";
         for (let i = 1; i <= count; i++) {
+            const input = participantInputs[i - 1];
+            const nameValue = input.value;
             const defaultColor = this.relayColors[(i - 1) % this.relayColors.length];
             html += `
                 <div class="input-group input-group-sm">
                     <span class="input-group-text fs-tiny">#${i}</span>
-                    <input type="text" class="form-control form-control-precise participant-name-input" data-index="${i}" placeholder="Participant Name">
+                    <input type="text" class="form-control form-control-precise participant-name-input" data-index="${i}" value="${nameValue}" placeholder="Participant Name">
                     <input type="color" class="form-control form-control-color form-control-precise p-1 participant-color-input" data-index="${i}" value="${defaultColor}" style="width: 40px; height: 31px;">
                 </div>
             `;
         }
         this.el.participantNamesContainer.innerHTML = html;
-    },
+        if (this.el.btnAddParticipant) this.el.btnAddParticipant.disabled = count >= 12;
+    }
+
+    addParticipant() {
+        const count = document.querySelectorAll(".participant-name-input").length;
+        if (count >= 12) return;
+        
+        const i = count + 1;
+        const defaultColor = this.relayColors[(i - 1) % this.relayColors.length];
+        const newHtml = `
+            <div class="input-group input-group-sm">
+                <span class="input-group-text fs-tiny">#${i}</span>
+                <input type="text" class="form-control form-control-precise participant-name-input" data-index="${i}" placeholder="Participant Name">
+                <input type="color" class="form-control form-control-color form-control-precise p-1 participant-color-input" data-index="${i}" value="${defaultColor}" style="width: 40px; height: 31px;">
+            </div>
+        `;
+        this.el.participantNamesContainer.insertAdjacentHTML("beforeend", newHtml);
+        if (this.el.btnAddParticipant) this.el.btnAddParticipant.disabled = i >= 12;
+    }
 
     handleStartClick() {
         if (!this.el.sessionTitle.value.trim()) {
@@ -908,7 +930,7 @@ const app = {
     },
 
     updateRelayActiveDisplay() {
-        const maxParticipants = parseInt(this.el.participantCount.value) || 1;
+        const maxParticipants = document.querySelectorAll(".participant-name-input").length;
         if (this.currentParticipant > maxParticipants) {
             this.el.relayActiveParticipantContainer.classList.add('d-none');
             this.el.relayParticipantTimer.classList.add('d-none');
@@ -930,7 +952,7 @@ const app = {
         const now = this.elapsedTime;
         const lastTime = this.history.length > 0 ? this.history[this.history.length - 1].time : 0;
         const delta = now - lastTime;
-        const maxParticipants = parseInt(this.el.participantCount.value) || 1;
+        const maxParticipants = document.querySelectorAll(".participant-name-input").length;
 
         if (this.currentParticipant > maxParticipants && !isFinal) return;
 
diff --git a/index.php b/index.php
index a746724..02cc7fc 100644
--- a/index.php
+++ b/index.php
@@ -249,10 +249,9 @@ $projectImage = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
 
                         <!-- Relay Configuration Section -->
                         <div id="relay-config" class="d-none text-start">
-                            <h4 class="fs-6 fw-bold text-uppercase tracking-widest mb-3 border-bottom pb-2">Participants</h4>
-                            <div id="relay-participant-count-box" class="mb-3">
-                                <label class="small text-muted mb-1 d-block">Participant Count (Max 12)</label>
-                                <input type="number" id="participant-count" class="form-control form-control-precise" value="4" min="1" max="12" style="width: 80px;">
+                            <h4 id="relay-participants-title" class="fs-6 fw-bold text-uppercase tracking-widest mb-3 border-bottom pb-2" contenteditable="true">Participants</h4>
+                            <div class="mb-3">
+                                <button id="btn-add-participant" class="btn btn-outline-primary btn-sm btn-precise">Add Participant</button>
                             </div>
                             <div id="participant-names-container" class="d-flex flex-column gap-2">
                                 <!-- Name inputs injected here -->