diff --git a/assets/css/src/_generic.scss b/assets/css/src/_generic.scss
new file mode 100644
index 0000000..344eaef
--- /dev/null
+++ b/assets/css/src/_generic.scss
@@ -0,0 +1,20 @@
+.bottom-tab {
+  font-size: 1rem;
+  width: fit-content;
+  padding: 1.5rem 0.9rem 0.5rem 0.9rem;
+  margin-top: -1rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+
+  font-family: "SancySlab", serif;
+}
+
+.bottom-tab--invert {
+  background-color: var(--color-beige);
+  color: #000;
+  border: 3px solid #000;
+}
+
+.bottom-tab:not(.bottom-tab--invert) {
+  background-color: #000;
+  color: #fff;
+}
diff --git a/assets/css/src/_header.scss b/assets/css/src/_header.scss
index e591b85..923fcc3 100644
--- a/assets/css/src/_header.scss
+++ b/assets/css/src/_header.scss
@@ -77,31 +77,23 @@
     width: 100%;
     display: flex;
     justify-content: center;
-    gap: 0.5rem;
-    bottom: -8rem;
+    gap: 0.7rem;
+    bottom: calc(-8.5rem);
 
     button {
-      font-size: 1rem;
-      width: fit-content;
-      padding: 1.5rem 0.8rem 0.5rem 0.8rem;
-      margin-top: -1rem;
-      border-radius: 0 0 0.5rem 0.5rem;
-
-      background-color: #000;
-      color: #fff;
-      font-family: "SancySlab", serif;
-
       transform: translateY(0rem);
-      transition: all 0.2s var(--curve);
+      transition: background-color 0.2s var(--curve),
+        transform 0.3s var(--curve);
 
-      &:hover,
-      &.active {
-        transform: translateY(0.5rem);
+      &:hover {
+        transform: translateY(0.5rem) !important;
       }
 
       &.active {
-        background-color: var(--color-green);
-        color: #000;
+        transform: translateY(0rem);
+        background-color: #000;
+        color: #fff;
+        outline: 2px solid var(--color-beige);
       }
     }
   }
diff --git a/assets/css/src/pages/_events.scss b/assets/css/src/pages/_events.scss
index 45d4aca..c1e7fff 100644
--- a/assets/css/src/pages/_events.scss
+++ b/assets/css/src/pages/_events.scss
@@ -8,7 +8,7 @@
     grid-template-columns: repeat(3, 1fr);
     align-items: flex-end;
     gap: 3rem;
-    background-color: #fff;
+    background-color: var(--color-beige);
 
     .event-card {
       h2 {
@@ -48,17 +48,6 @@
           }
         }
       }
-
-      .infos {
-        width: fit-content;
-        padding: 1.5rem 0.8rem 0.5rem 0.8rem;
-        margin-top: -1rem;
-        border-radius: 0 0 0.5rem 0.5rem;
-
-        background-color: #000;
-        color: #fff;
-        font-family: "SancySlab", serif;
-      }
     }
   }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 26ba581..21f29a7 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -2,6 +2,7 @@
 @import "src/fonts";
 @import "src/variables";
 @import "src/global";
+@import "src/generic";
 @import "src/header";
 @import "src/strip";
 @import "src/pages/home";
diff --git a/site/snippets/header.php b/site/snippets/header.php
index 4889a30..f435fe4 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -28,8 +28,8 @@
     </div>
 
     <div class="filters">
-      <button class="filter" data-target="inside-company" title="filtrer">compagnie</button>
-      <button class="filter" data-target="outside-company" title="filtrer">hors-compagnie</button>
+      <button class="filter bottom-tab bottom-tab--invert" data-target="inside-company" title="filtrer">compagnie</button>
+      <button class="filter bottom-tab bottom-tab--invert" data-target="outside-company" title="filtrer">hors-compagnie</button>
     </div>
   </header>
   <main>
diff --git a/site/templates/events.php b/site/templates/events.php
index 734ed98..4bac6a1 100644
--- a/site/templates/events.php
+++ b/site/templates/events.php
@@ -17,7 +17,7 @@
               'alt'        => $event->title()->value(),
             ]) ?>
           </div>
-          <div class="infos">
+          <div class="infos bottom-tab">
             <?php if ($event->isFromCompany()->isTrue()): ?>
               <p>Compagnie</p>
               <?php else: ?>