diff --git a/loko/inspections/models.py b/loko/inspections/models.py
index 3f745f9..fbc8fe6 100644
--- a/loko/inspections/models.py
+++ b/loko/inspections/models.py
@@ -19,7 +19,7 @@ INSPECTION_RESULT_CONFIG = {
     'non_compliant': {
         'label': _('Non conforme'),
         'badge_class': 'bg-warning text-dark',
-        'btn_class': 'btn-outline-warning text-dark',
+        'btn_class': 'btn-outline-warning',
         'icon': 'bi-exclamation-triangle-fill',
         'color_hex': '#ffc107',
     },
@@ -39,7 +39,7 @@ INSPECTION_RESULT_CONFIG = {
     },
     'cancelled': {
         'label': _('Annulé'),
-        'badge_class': 'bg-secondary text-white',
+        'badge_class': 'bg-secondary',
         'btn_class': 'btn-outline-secondary',
         'icon': 'bi-slash-circle',
         'color_hex': '#6c757d',
diff --git a/loko/inspections/static/inspections/inspections_index.css b/loko/inspections/static/inspections/inspections_index.css
index 403b328..33b801f 100644
--- a/loko/inspections/static/inspections/inspections_index.css
+++ b/loko/inspections/static/inspections/inspections_index.css
@@ -89,36 +89,75 @@
 
 /* Contextual color badges - inactive state */
 .filter-option label.context-badge {
-	border-color: currentColor;
-	color: inherit;
-	background-color: transparent;
+	background-color: #ffffff;
+	border-width: 1.5px;
+	border-style: solid;
+	cursor: pointer;
+	user-select: none;
+	font-weight: 600;
+	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
-.filter-option label.btn-outline-primary   { border-color: #0c5cc9; color: #0c5cc9; }
-.filter-option label.btn-outline-danger    { border-color: #dc3545; color: #dc3545; }
-.filter-option label.btn-outline-warning   { border-color: #ffc107; color: #ffc107; }
-.filter-option label.btn-outline-success   { border-color: #28a745; color: #28a745; }
-.filter-option label.btn-outline-info      { border-color: #17a2b8; color: #17a2b8; }
-.filter-option label.btn-outline-dark      { border-color: #343a40; color: #343a40; }
-.filter-option label.btn-outline-secondary { border-color: #6c757d; color: #6c757d; }
+.filter-option label.btn-outline-primary,
+.filter-option label.status-primary        { border-color: #0c5cc9; color: #0c5cc9; background-color: #ffffff; }
+.filter-option label.btn-outline-danger,
+.filter-option label.status-damaged        { border-color: #dc3545; color: #dc3545; background-color: #ffffff; }
+.filter-option label.btn-outline-warning,
+.filter-option label.status-non_compliant  { border-color: #ffc107; color: #997404; background-color: #ffffff; }
+.filter-option label.btn-outline-success,
+.filter-option label.status-compliant      { border-color: #198754; color: #198754; background-color: #ffffff; }
+.filter-option label.btn-outline-info      { border-color: #17a2b8; color: #17a2b8; background-color: #ffffff; }
+.filter-option label.btn-outline-dark,
+.filter-option label.status-missing        { border-color: #212529; color: #212529; background-color: #ffffff; }
+.filter-option label.btn-outline-secondary,
+.filter-option label.status-cancelled      { border-color: #6c757d; color: #6c757d; background-color: #ffffff; }
 
 /* Default badges - checked state */
 .filter-option input[type="checkbox"]:checked + label:not(.context-badge) {
-	background-color: #0c5cc9; color: white; border-color: #0c5cc9;
+	background-color: #0c5cc9 !important; color: white !important; border-color: #0c5cc9 !important;
 }
 
 /* Contextual badges - checked state */
-.filter-option input[type="checkbox"]:checked + label.context-badge { color: white; }
-.filter-option input[type="checkbox"]:checked + label.btn-outline-primary   { background-color: #0c5cc9; border-color: #0c5cc9; }
-.filter-option input[type="checkbox"]:checked + label.btn-outline-danger    { background-color: #dc3545; border-color: #dc3545; }
-.filter-option input[type="checkbox"]:checked + label.btn-outline-warning   { background-color: #ffc107; border-color: #ffc107; }
-.filter-option input[type="checkbox"]:checked + label.btn-outline-success   { background-color: #28a745; border-color: #28a745; }
-.filter-option input[type="checkbox"]:checked + label.btn-outline-info      { background-color: #17a2b8; border-color: #17a2b8; }
-.filter-option input[type="checkbox"]:checked + label.btn-outline-dark      { background-color: #343a40; border-color: #343a40; }
-.filter-option input[type="checkbox"]:checked + label.btn-outline-secondary { background-color: #6c757d; border-color: #6c757d; }
+.filter-option input[type="checkbox"]:checked + label.btn-outline-primary,
+.filter-option input[type="checkbox"]:checked + label.status-primary {
+	background-color: #0c5cc9 !important; border-color: #0c5cc9 !important; color: #ffffff !important;
+}
+.filter-option input[type="checkbox"]:checked + label.btn-outline-danger,
+.filter-option input[type="checkbox"]:checked + label.status-damaged {
+	background-color: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important;
+}
+.filter-option input[type="checkbox"]:checked + label.btn-outline-warning,
+.filter-option input[type="checkbox"]:checked + label.status-non_compliant {
+	background-color: #ffc107 !important; border-color: #ffc107 !important; color: #000000 !important;
+}
+.filter-option input[type="checkbox"]:checked + label.btn-outline-success,
+.filter-option input[type="checkbox"]:checked + label.status-compliant {
+	background-color: #198754 !important; border-color: #198754 !important; color: #ffffff !important;
+}
+.filter-option input[type="checkbox"]:checked + label.btn-outline-info {
+	background-color: #17a2b8 !important; border-color: #17a2b8 !important; color: #ffffff !important;
+}
+.filter-option input[type="checkbox"]:checked + label.btn-outline-dark,
+.filter-option input[type="checkbox"]:checked + label.status-missing {
+	background-color: #212529 !important; border-color: #212529 !important; color: #ffffff !important;
+}
+.filter-option input[type="checkbox"]:checked + label.btn-outline-secondary,
+.filter-option input[type="checkbox"]:checked + label.status-cancelled {
+	background-color: #6c757d !important; border-color: #6c757d !important; color: #ffffff !important;
+}
 
-/* Default badges - hover */
+/* Hover states */
 .filter-option input[type="checkbox"]:hover + label:not(.context-badge) { background-color: #cfe2f3; }
+.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-success,
+.filter-option input[type="checkbox"]:not(:checked):hover + label.status-compliant { background-color: #d1e7dd; color: #0f5132; }
+.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-warning,
+.filter-option input[type="checkbox"]:not(:checked):hover + label.status-non_compliant { background-color: #fff3cd; color: #664d03; }
+.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-danger,
+.filter-option input[type="checkbox"]:not(:checked):hover + label.status-damaged { background-color: #f8d7da; color: #842029; }
+.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-dark,
+.filter-option input[type="checkbox"]:not(:checked):hover + label.status-missing { background-color: #e2e3e5; color: #141619; }
+.filter-option input[type="checkbox"]:not(:checked):hover + label.btn-outline-secondary,
+.filter-option input[type="checkbox"]:not(:checked):hover + label.status-cancelled { background-color: #e9ecef; color: #495057; }
 
 .filter-option.subcategory-option label {
 	font-size: 0.875em;
diff --git a/loko/inspections/static/inspections/inspections_index.js b/loko/inspections/static/inspections/inspections_index.js
index 66b28bc..65988bc 100644
--- a/loko/inspections/static/inspections/inspections_index.js
+++ b/loko/inspections/static/inspections/inspections_index.js
@@ -12,11 +12,11 @@ function truncateText(text, limit) {
 }
 
 const RESULT_STATUS_METADATA = {
-	compliant: { label: gettext('Conforme'), badge: 'bg-success', color: '#198754', icon: 'bi-check-circle' },
-	non_compliant: { label: gettext('Non conforme'), badge: 'bg-warning text-dark', color: '#ffc107', icon: 'bi-exclamation-circle' },
-	damaged: { label: gettext('Endommagé'), badge: 'bg-danger', color: '#dc3545', icon: 'bi-x-circle' },
-	missing: { label: gettext('Disparu / Absent'), badge: 'bg-dark', color: '#212529', icon: 'bi-question-circle' },
-	cancelled: { label: gettext('Annulée'), badge: 'bg-secondary', color: '#6c757d', icon: 'bi-slash-circle' }
+	compliant: { label: gettext('Conforme'), badge: 'bg-success', color: '#198754', icon: 'bi-check-circle-fill' },
+	non_compliant: { label: gettext('Non conforme'), badge: 'bg-warning text-dark', color: '#ffc107', icon: 'bi-exclamation-triangle-fill' },
+	damaged: { label: gettext('Endommagé'), badge: 'bg-danger', color: '#dc3545', icon: 'bi-x-circle-fill' },
+	missing: { label: gettext('Absent / Retiré'), badge: 'bg-dark', color: '#212529', icon: 'bi-dash-circle-fill' },
+	cancelled: { label: gettext('Annulé'), badge: 'bg-secondary', color: '#6c757d', icon: 'bi-slash-circle' }
 };
 
 function getResultStatusMetadata(status) {
diff --git a/loko/inspections/templates/inspections/inspections_index.html b/loko/inspections/templates/inspections/inspections_index.html
index 4001c1a..35f58f0 100644
--- a/loko/inspections/templates/inspections/inspections_index.html
+++ b/loko/inspections/templates/inspections/inspections_index.html
@@ -72,10 +72,10 @@
                             </div>
                         </div>
                         <div class="filter-options" data-field="result_status">
-                            {% for key, label, badge, color_hex, icon in result_status_choices %}
+                            {% for key, label, badge, icon in result_status_choices %}
                             <div class="filter-option">
                                 <input type="checkbox" name="result_status" id="result_status_{{ key }}" value="{{ key }}" {% if key in selected_result_statuses %}checked{% endif %}>
-                                <label for="result_status_{{ key }}" class="context-badge btn-outline-{{ badge }}">
+                                <label for="result_status_{{ key }}" class="context-badge status-{{ key }} btn-outline-{{ badge }}">
                                     <i class="bi {{ icon }} me-1"></i>{{ label }}
                                 </label>
                             </div>
diff --git a/loko/inspections/tests.py b/loko/inspections/tests.py
index ce385ff..2b7e1f7 100644
--- a/loko/inspections/tests.py
+++ b/loko/inspections/tests.py
@@ -440,8 +440,7 @@ class InspectionModelAndViewsTestCase(TestCase):
 
         insp.refresh_from_db()
         self.assertTrue(insp.is_cancelled)
-        self.assertEqual(insp.result_status, 'cancelled')
-        self.assertEqual(insp.status_badge_class, 'bg-secondary text-white')
+        self.assertEqual(insp.status_badge_class, 'bg-secondary')
 
         # Restore inspection
         resp_restore = self.client.post(url, {'action': 'restore'})
diff --git a/loko/inspections/views.py b/loko/inspections/views.py
index 7bae3fb..e651524 100644
--- a/loko/inspections/views.py
+++ b/loko/inspections/views.py
@@ -322,8 +322,15 @@ def inspections_list(request):
     )
 
     result_choices_config = Inspection.get_result_choices_config()
+    _insp_status_color_map = {
+        'compliant': 'success',
+        'non_compliant': 'warning',
+        'damaged': 'danger',
+        'missing': 'dark',
+        'cancelled': 'secondary',
+    }
     result_status_choices = [
-        (cfg['code'], cfg['label'], cfg.get('badge_class', ''), cfg.get('color_hex', ''), cfg.get('icon', ''))
+        (cfg['code'], cfg['label'], _insp_status_color_map.get(cfg['code'], 'secondary'), cfg.get('icon', 'bi-question-circle'))
         for cfg in result_choices_config
     ]