diff --git a/resources/views/approvals/create.blade.php b/resources/views/approvals/create.blade.php
index e772f874..3f759d55 100644
--- a/resources/views/approvals/create.blade.php
+++ b/resources/views/approvals/create.blade.php
@@ -172,6 +172,13 @@ class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm fon
 const formBodyTemplates = @json($forms->pluck('body_template', 'id'));
 const linesData = @json($lines);
 
+function escapeHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+}
+
 function toggleEditor() {
     const useEditor = document.getElementById('useEditor').checked;
     const textarea = document.getElementById('body');
@@ -274,9 +281,9 @@ function updateApprovalLineSummary() {
 
         cards.push(
             '<div class="step-card text-center px-3 py-2 rounded-lg border ' + bg + '" data-index="' + i + '" style="min-width: 72px;">' +
-            '<div class="text-xs font-medium ' + labelColor + '">' + stepLabel + '</div>' +
-            (position ? '<div class="text-xs text-gray-400 mt-0.5">' + position + '</div>' : '') +
-            '<div class="text-sm font-semibold text-gray-800 mt-0.5">' + s.user_name + '</div>' +
+            '<div class="text-xs font-medium ' + labelColor + '">' + escapeHtml(stepLabel) + '</div>' +
+            (position ? '<div class="text-xs text-gray-400 mt-0.5">' + escapeHtml(position) + '</div>' : '') +
+            '<div class="text-sm font-semibold text-gray-800 mt-0.5">' + escapeHtml(s.user_name) + '</div>' +
             '</div>'
         );
     });
diff --git a/resources/views/approvals/edit.blade.php b/resources/views/approvals/edit.blade.php
index d9fc7515..fed2e480 100644
--- a/resources/views/approvals/edit.blade.php
+++ b/resources/views/approvals/edit.blade.php
@@ -206,6 +206,13 @@ class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm fon
 const formBodyTemplates = @json($forms->pluck('body_template', 'id'));
 const linesData = @json($lines);
 
+function escapeHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.appendChild(document.createTextNode(str));
+    return div.innerHTML;
+}
+
 function toggleEditor() {
     const useEditor = document.getElementById('useEditor').checked;
     const textarea = document.getElementById('body');
@@ -308,9 +315,9 @@ function updateApprovalLineSummary() {
 
         cards.push(
             '<div class="step-card text-center px-3 py-2 rounded-lg border ' + bg + '" data-index="' + i + '" style="min-width: 72px;">' +
-            '<div class="text-xs font-medium ' + labelColor + '">' + stepLabel + '</div>' +
-            (position ? '<div class="text-xs text-gray-400 mt-0.5">' + position + '</div>' : '') +
-            '<div class="text-sm font-semibold text-gray-800 mt-0.5">' + s.user_name + '</div>' +
+            '<div class="text-xs font-medium ' + labelColor + '">' + escapeHtml(stepLabel) + '</div>' +
+            (position ? '<div class="text-xs text-gray-400 mt-0.5">' + escapeHtml(position) + '</div>' : '') +
+            '<div class="text-sm font-semibold text-gray-800 mt-0.5">' + escapeHtml(s.user_name) + '</div>' +
             '</div>'
         );
     });