diff --git a/staticfiles/js/supplier-crud.js b/staticfiles/js/supplier-crud.js
index c746971..42e647b 100644
--- a/staticfiles/js/supplier-crud.js
+++ b/staticfiles/js/supplier-crud.js
@@ -218,11 +218,22 @@ document.addEventListener('DOMContentLoaded', function () {
 
     suppliersData.forEach(function (supplier) {
         let card = $('<div class="supplier-card"></div>');
-        card.append('<h5 class="card-title">' + supplier.name + '</h5>');
-        card.append('<p>Contact: ' + supplier.contact_name + '</p>');
-        card.append('<p>Country: ' + supplier.supplier_country + '</p>');
-        card.append('<p>Phone: ' + supplier.phone_number + '</p>');
-        card.append('<p>Email: <a href="mailto:' + supplier.email + '">' + supplier.email + '</a></p>');
+
+        card.append($('<h5 class="card-title"></h5>').text(supplier.name));
+        card.append($('<p></p>').text('Contact: ' + supplier.contact_name));
+        card.append($('<p></p>').text('Country: ' + supplier.supplier_country));
+        card.append($('<p></p>').text('Phone: ' + supplier.phone_number));
+
+        const emailParagraph = $('<p></p>').text('Email: ');
+        const rawEmail = String(supplier.email || '').trim();
+        const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(rawEmail);
+        const safeEmail = isValidEmail ? rawEmail : '';
+
+        const emailLink = $('<a></a>')
+            .attr('href', safeEmail ? ('mailto:' + encodeURIComponent(safeEmail)) : '#')
+            .text(safeEmail || rawEmail);
+        emailParagraph.append(emailLink);
+        card.append(emailParagraph);
 
         card.on('click', function () {
             showEditForm(supplier.id, supplier.name, supplier.contact_name, supplier.supplier_country, supplier.phone_number, supplier.email);