diff --git a/app/assets/stylesheets/new_design/_tabs.scss b/app/assets/stylesheets/new_design/_tabs.scss
index 446830629..3a3e23441 100644
--- a/app/assets/stylesheets/new_design/_tabs.scss
+++ b/app/assets/stylesheets/new_design/_tabs.scss
@@ -27,12 +27,30 @@
       a {
         color: $blue;
       }
+
+      .badge {
+        color: $blue;
+      }
     }
 
     &:hover {
       a {
         color: $blue;
       }
+
+      .badge {
+        color: $blue;
+      }
+    }
+
+    .badge {
+      background-color: rgba(0, 0, 0, 0.08);
+      padding-left: 5px;
+      padding-right: 5px;
+      border-radius: 100px;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 0.6);
+      font-size: 14px;
     }
   }
 }
diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml
index 7398e17ca..03912e26f 100644
--- a/app/views/root/patron.html.haml
+++ b/app/views/root/patron.html.haml
@@ -93,12 +93,14 @@
     .container
       Titre
       %ul.tabs
-        %li{ class: "active" }
-          = link_to "Onglet 1", "#"
+        %li.active
+          = link_to "Onglet actif", "#"
         %li
-          = link_to "Onglet 2", "#"
+          = link_to "Onglet inactif", "#"
         %li
-          = link_to "Onglet 3", "#"
+          = link_to "#" do
+            Onglet avec badge
+            %span.badge 2
 
   .container
     %h1 Breadcrumbs