diff --git a/src/main/webapp/src/assets/main.scss b/src/main/webapp/src/assets/main.scss
index cf3ccb6c..3f15d0f0 100644
--- a/src/main/webapp/src/assets/main.scss
+++ b/src/main/webapp/src/assets/main.scss
@@ -43,6 +43,10 @@
   .modal-flex-item {
     width: 50%;
   }
+
+  .account-filter {
+    max-width: 30em;
+  }
 }
 
 .v-move,
diff --git a/src/main/webapp/src/components/filter/SelectFilter.vue b/src/main/webapp/src/components/filter/SelectFilter.vue
index 5608480d..28dccee7 100644
--- a/src/main/webapp/src/components/filter/SelectFilter.vue
+++ b/src/main/webapp/src/components/filter/SelectFilter.vue
@@ -28,19 +28,21 @@ const modelValue = computed<Array<number | string>>({
     rounded="xl"
     variant="solo"
     density="compact"
+    prepend-inner-icon="fas fa-filter"
     flat
     chips
     multiple
     hide-details
     class="select-filter"
   >
-    <template #prepend-inner>
-      <v-badge v-if="modelValue.length > 0" :content="modelValue.length" color="info">
-        <v-icon icon="fas fa-filter" />
-      </v-badge>
-      <v-icon v-else icon="fas fa-filter" />
+    <template #chip="{ props, item }">
+      <v-chip v-bind="props" rounded>
+        <div class="d-flex flex-row align-center">
+          <v-icon v-if="item.raw.color" icon="fas fa-circle" :color="item.raw.color" class="mr-2" />
+          <div>{{ t(item.raw.i18n) }}</div>
+        </div>
+      </v-chip>
     </template>
-    <template #chip />
     <template #item="{ props, item }">
       <v-list-item v-bind="props" title="">
         <div class="d-flex flex-row align-center">
diff --git a/src/main/webapp/src/views/structure/AdministrativeView.vue b/src/main/webapp/src/views/structure/AdministrativeView.vue
index 645b1459..b31be49c 100644
--- a/src/main/webapp/src/views/structure/AdministrativeView.vue
+++ b/src/main/webapp/src/views/structure/AdministrativeView.vue
@@ -19,7 +19,9 @@ const accountStates = ref<Array<string>>([Etat.Valide]);
 <template>
   <v-container fluid>
     <div class="d-flex align-center justify-end mb-4 mb-sm-0">
-      <select-filter v-if="filterAccountStates" v-model="accountStates" :items="filterAccountStates" />
+      <div class="account-filter">
+        <select-filter v-if="filterAccountStates" v-model="accountStates" :items="filterAccountStates" />
+      </div>
     </div>
     <filieres-layout :filieres="administrative" :account-states="accountStates" />
 
diff --git a/src/main/webapp/src/views/structure/TeachingView.vue b/src/main/webapp/src/views/structure/TeachingView.vue
index 3c55c49c..85f09d21 100644
--- a/src/main/webapp/src/views/structure/TeachingView.vue
+++ b/src/main/webapp/src/views/structure/TeachingView.vue
@@ -19,7 +19,9 @@ const accountStates = ref<Array<string>>([Etat.Valide]);
 <template>
   <v-container fluid>
     <div class="d-flex justify-end mb-4 mb-sm-0">
-      <select-filter v-if="filterAccountStates" v-model="accountStates" :items="filterAccountStates" />
+      <div class="account-filter">
+        <select-filter v-if="filterAccountStates" v-model="accountStates" :items="filterAccountStates" />
+      </div>
     </div>
     <filieres-layout :filieres="teaching" :account-states="accountStates" />