diff --git a/loko/controls/static/controls/controls_index.css b/loko/controls/static/controls/controls_index.css
index e17b5c0..018f645 100644
--- a/loko/controls/static/controls/controls_index.css
+++ b/loko/controls/static/controls/controls_index.css
@@ -711,6 +711,42 @@
     width: 180px;
 }
 
+.controls-table th.col-category_names,
+.controls-table td.col-category_names {
+    min-width: 240px;
+}
+
+.controls-table th.col-project_name,
+.controls-table td.col-project_name {
+    min-width: 140px;
+}
+
+/* Alignement de l'icône avec le premier mot dans la colonne Projet */
+.project-cell-link {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 0.35rem;
+    max-width: 100%;
+    line-height: 1.35;
+    vertical-align: middle;
+}
+
+.project-cell-icon {
+    flex-shrink: 0;
+    margin-top: 0.15rem;
+    font-size: 0.85rem;
+}
+
+.project-cell-name {
+    word-break: normal;
+    overflow-wrap: break-word;
+}
+
+a.project-cell-link:hover .project-cell-name {
+    color: #2563eb;
+    text-decoration: underline;
+}
+
 .controls-table td.col-thematics .thematic-content {
     display: inline-block;
     max-width: 100%;
diff --git a/loko/controls/static/controls/controls_index.js b/loko/controls/static/controls/controls_index.js
index 0c60061..3805860 100644
--- a/loko/controls/static/controls/controls_index.js
+++ b/loko/controls/static/controls/controls_index.js
@@ -572,10 +572,11 @@ function renderRowHtml(row) {
 	const themIcon = row.thematic_icon ? `<i class="bi ${escapeHtml(row.thematic_icon)} me-1"></i>` : '';
 	const typeIcon = typeMeta.icon ? `<i class="bi ${typeMeta.icon} me-1"></i>` : '';
 
-	const projectHtml = row.project_name && row.project_name !== '-'
+	const projectName = (row.project_name || '').trim();
+	const projectHtml = (projectName && projectName !== '-')
 		? (row.project_id && typeof projectsDetailBaseUrl !== 'undefined'
-			? `<a href="${projectsDetailBaseUrl}${row.project_id}/" class="text-decoration-none text-dark fw-medium"><i class="bi bi-folder me-1 text-primary"></i>${escapeHtml(row.project_name)}</a>`
-			: `<i class="bi bi-folder me-1 text-muted"></i>${escapeHtml(row.project_name)}`)
+			? `<a href="${projectsDetailBaseUrl}${row.project_id}/" class="project-cell-link text-decoration-none text-dark fw-medium" title="${escapeHtml(projectName)}"><i class="bi bi-folder text-primary project-cell-icon"></i><span class="project-cell-name">${escapeHtml(projectName)}</span></a>`
+			: `<span class="project-cell-link text-dark fw-medium" title="${escapeHtml(projectName)}"><i class="bi bi-folder text-muted project-cell-icon"></i><span class="project-cell-name">${escapeHtml(projectName)}</span></span>`)
 		: '<span class="text-muted">-</span>';
 
 	const remarksCount = parseInt(row.remarks_count, 10) || 0;