diff --git a/pro/src/pages/Reimbursements/Income/Income.module.scss b/pro/src/pages/Reimbursements/Income/Income.module.scss
index 3c4c168e912..028eceeb44f 100644
--- a/pro/src/pages/Reimbursements/Income/Income.module.scss
+++ b/pro/src/pages/Reimbursements/Income/Income.module.scss
@@ -2,103 +2,106 @@
 @use "styles/variables/_size.scss" as size;
 @use "styles/mixins/_rem.scss" as rem;
 
-.income-error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-grey-semi-dark);
-  text-align: center;
-
-  .icon {
-    margin-bottom: rem.torem(32px);
-  }
-}
-
-.income-filters {
-  display: flex;
-  flex-flow: row wrap;
-  margin-bottom: rem.torem(20px);
-  row-gap: rem.torem(10px);
-
-  @media (min-width: size.$tablet) {
-    margin-bottom: rem.torem(12px);
-  }
-}
-
-.income-filters-divider {
-  display: none;
-
-  @media (min-width: size.$tablet) {
-    display: block;
-    margin: rem.torem(31.75px) rem.torem(24px) 0 0;
-    width: rem.torem(1px);
-    height: rem.torem(30px);
-    background: var(--color-grey-semi-dark);
-  }
-}
-
-.income-year-filters {
-  display: flex;
-  flex-flow: row wrap;
-  flex-direction: row;
-  gap: rem.torem(8px);
+.income {
+  &-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-grey-semi-dark);
+    text-align: center;
 
-  @media (width >= 634px) {
-    height: rem.torem(66.75px);
-    align-items: end;
+    &-icon {
+      margin-bottom: rem.torem(32px);
+    }
   }
 
-  li button {
+  &-filters {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    background: none;
-    cursor: pointer;
-    padding: rem.torem(10px);
-    color: var(--color-black);
-    border: solid rem.torem(1px) var(--color-grey-dark);
-    border-radius: rem.torem(4px);
-  }
+    flex-flow: row wrap;
+    margin-bottom: rem.torem(20px);
+    row-gap: rem.torem(10px);
 
-  li button:hover, li button:focus {
-    outline: rem.torem(1px) solid var(--color-primary);
-  }
+    @media (min-width: size.$tablet) {
+      margin-bottom: rem.torem(12px);
+    }
 
-  .active-year button {
-    @include fonts.button;
+    &-divider {
+      display: none;
 
-    border-color: var(--color-black);
+      @media (min-width: size.$tablet) {
+        display: block;
+        margin: rem.torem(31.75px) 0 0 rem.torem(24px);
+        width: rem.torem(1px);
+        height: rem.torem(30px);
+        background: var(--color-grey-semi-dark);
+      }
+    }
 
-    &::before {
-      content: '';
-      display: block;
-      width: rem.torem(8px);
-      height: rem.torem(8px);
-      background-color: var(--color-secondary-light);
-      border-radius: 50%;
-      margin-right: rem.torem(8px);
+    &-by-year {
+      display: flex;
+      flex-flow: row wrap;
+      flex-direction: row;
+      gap: rem.torem(8px);
+
+      @media (width >= 634px) {
+        height: rem.torem(66.75px);
+        margin-left: rem.torem(24px);
+        align-items: end;
+      }
+
+      &-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: none;
+        cursor: pointer;
+        padding: rem.torem(10px);
+        color: var(--color-black);
+        border: solid rem.torem(1px) var(--color-grey-dark);
+        border-radius: rem.torem(4px);
+
+        &:hover, &:focus {
+          outline: rem.torem(1px) solid var(--color-primary);
+        }
+
+        &-active {
+          @include fonts.button;
+
+          border-color: var(--color-black);
+
+          &::before {
+            content: '';
+            display: block;
+            width: rem.torem(8px);
+            height: rem.torem(8px);
+            background-color: var(--color-secondary-light);
+            border-radius: 50%;
+            margin-right: rem.torem(8px);
+          }
+        }
+      }
     }
   }
-}
 
-.income-no-data {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  &-no-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-  .icon {
-    margin-bottom: rem.torem(20px);
-  }
+    &-icon {
+      margin-bottom: rem.torem(20px);
+    }
 
-  .text-with-link {
-    display: flex;
-    margin-top: rem.torem(10px);
-    flex-wrap: wrap;
-    justify-content: center;
-  }
+    &-text-with-link {
+      display: flex;
+      margin-top: rem.torem(10px);
+      flex-wrap: wrap;
+      justify-content: center;
 
-  .link {
-    margin: 0 rem.torem(10px);
+      &-buttonlink {
+        margin: 0 rem.torem(10px);
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/pro/src/pages/Reimbursements/Income/Income.tsx b/pro/src/pages/Reimbursements/Income/Income.tsx
index c808b49d2ad..0b047299f7e 100644
--- a/pro/src/pages/Reimbursements/Income/Income.tsx
+++ b/pro/src/pages/Reimbursements/Income/Income.tsx
@@ -1,3 +1,4 @@
+import classnames from 'classnames'
 import isEqual from 'lodash.isequal'
 import { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
@@ -113,7 +114,7 @@ export const Income = () => {
     return (
       <div className={styles['income-error']}>
         <SvgIcon
-          className={styles['icon']}
+          className={styles['income-error-icon']}
           src={strokePageNotFoundIcon}
           viewBox="0 0 130 100"
           alt=""
@@ -142,20 +143,21 @@ export const Income = () => {
           </>
         )}
         <ul
-          className={styles['income-year-filters']}
+          className={styles['income-filters-by-year']}
           aria-label="Filtrage par année"
         >
           {years.map((year) => (
-            <li
-              key={year}
-              className={year === activeYear ? styles['active-year'] : ''}
-            >
+            <li key={year}>
               <button
                 type="button"
                 onClick={() => setActiveYear(year)}
                 aria-label={`Afficher les revenus de l'année ${year}`}
                 aria-controls="income-results"
                 aria-current={year === activeYear}
+                className={classnames(styles['income-filters-by-year-button'], {
+                  [styles['income-filters-by-year-button-active']]:
+                    year === activeYear,
+                })}
               >
                 {year}
               </button>
@@ -178,19 +180,19 @@ export const Income = () => {
         ) : (
           <div className={styles['income-no-data']}>
             <SvgIcon
-              className={styles['icon']}
+              className={styles['income-no-data-icon']}
               src={strokeBookingHoldIcon}
               alt=""
               width="128"
             />
             Vous n’avez aucune réservation sur cette période.
-            <div className={styles['text-with-link']}>
+            <div className={styles['income-no-data-text-with-link']}>
               Découvrez nos
               <ButtonLink
                 isExternal
                 opensInNewTab
                 to="https://passcultureapp.notion.site/pass-Culture-Documentation-323b1a0ec309406192d772e7d803fbd0"
-                className={styles['link']}
+                className={styles['income-no-data-text-with-link-buttonlink']}
                 onClick={() =>
                   logEvent(Events.CLICKED_BEST_PRACTICES_STUDIES, {
                     from: location.pathname,
diff --git a/pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.module.scss b/pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.module.scss
index 89ed6c9ab9d..ab1c7a1887d 100644
--- a/pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.module.scss
+++ b/pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.module.scss
@@ -8,41 +8,33 @@
   @media (min-width: size.$tablet) {
     min-width: rem.torem(300px);
   }
-}
-
-.income-results-block-title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  text-align: left;
-  margin-bottom: rem.torem(10px);
-}
 
-.income-results-block-tooltip {
-  margin-left: rem.torem(10px);
-  min-height: auto;
-  border: 0;
-  padding: 0;
-  background: none;
-
-  svg {
-    color: var(--color-primary) !important;
+  &-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+    margin-bottom: rem.torem(10px);
   }
 
-  &:hover {
+  &-tooltip {
+    margin-left: rem.torem(10px);
+    min-height: auto;
+    border: 0;
+    padding: 0;
     background: none;
-  }
-}
 
-.income-results-block-tooltip-content {
-  top: calc(100% - rem.torem(10px));
-}
+    &-content {
+      top: calc(100% - rem.torem(10px));
+    }
+  }
 
-.income-results-block-number {
-  @include fonts.bold;
+  &-number {
+    @include fonts.bold;
 
-  font-size: rem.torem(21px);
-  text-align: left;
+    font-size: rem.torem(21px);
+    text-align: left;
+  }
 }
 
 .income-results-box {
@@ -53,10 +45,10 @@
   &:first-child {
     margin-bottom: rem.torem(24px);
   }
-}
 
-.income-results-subbox {
-  display: flex;
-  flex-flow: row wrap;
-  row-gap: rem.torem(20px);
+  &-subbox {
+    display: flex;
+    flex-flow: row wrap;
+    row-gap: rem.torem(20px);
+  }
 }
\ No newline at end of file
diff --git a/pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.tsx b/pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.tsx
index f3a1789d92b..8d8c8e2af38 100644
--- a/pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.tsx
+++ b/pro/src/pages/Reimbursements/Income/IncomeResultsBox/IncomeResultsBox.tsx
@@ -1,6 +1,7 @@
 import fullHelpIcon from 'icons/full-help.svg'
 import { BoxRounded } from 'ui-kit/BoxRounded/BoxRounded'
 import { Button } from 'ui-kit/Button/Button'
+import { ButtonVariant } from 'ui-kit/Button/types'
 
 import { IncomeType, IncomeResults } from '../types'
 
@@ -29,6 +30,7 @@ const IncomeResultsSubBox = ({ title, number, help }: IncomeSubBoxProps) => {
             iconAlt="À propos"
             type="button"
             hasTooltip
+            variant={ButtonVariant.SECONDARY}
           >
             {help}
           </Button>
@@ -70,7 +72,7 @@ export const IncomeResultsBox = ({ type, income }: IncomeResultsBoxProps) => {
         help={totalHelp}
       />
       {shouldDisplayIncomeDetails && (
-        <div className={styles['income-results-subbox']}>
+        <div className={styles['income-results-box-subbox']}>
           {income.individual && (
             <IncomeResultsSubBox
               title="Part individuelle"
diff --git a/pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.module.scss b/pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.module.scss
index 1729bbfa8ae..db15bc1bfe1 100644
--- a/pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.module.scss
+++ b/pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.module.scss
@@ -1,19 +1,18 @@
 @use "styles/mixins/_rem.scss" as rem;
 @use "styles/variables/_size.scss" as size;
 
-.income-venue-selector {
+.income-venue-select-autocomplete {
   max-width: rem.torem(300px);
-  margin-right: rem.torem(24px);
+}
 
-  ul {
-    width: calc(100vw - rem.torem(24px) * 2);
+.income-venue-selected-tags {
+  width: calc(100vw - rem.torem(24px) * 2);
 
-    @media (min-width: size.$mobile) {
-      width: calc(100vw - (size.$main-content-padding) * 2)
-    }
+  @media (min-width: size.$mobile) {
+    width: calc(100vw - (size.$main-content-padding) * 2)
+  }
 
-    @media (min-width: size.$laptop) {
-      width: calc(100vw - (size.$main-content-padding * 2) - 16.75rem)
-    }
+  @media (min-width: size.$laptop) {
+    width: calc(100vw - (size.$main-content-padding * 2) - 16.75rem)
   }
 }
\ No newline at end of file
diff --git a/pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.tsx b/pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.tsx
index ff1ad4584eb..b903e51d44b 100644
--- a/pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.tsx
+++ b/pro/src/pages/Reimbursements/Income/IncomeVenueSelector/IncomeVenueSelector.tsx
@@ -34,7 +34,8 @@ export const IncomeVenueSelector = ({
   return (
     <FormikProvider value={formik}>
       <SelectAutocomplete
-        className={styles['income-venue-selector']}
+        className={styles['income-venue-select-autocomplete']}
+        selectedValuesTagsClassName={styles['income-venue-selected-tags']}
         name="selectedVenues"
         label="Partenaire(s) sélectionné(s)"
         options={venues}
diff --git a/pro/src/ui-kit/form/SelectAutoComplete/SelectAutocomplete.tsx b/pro/src/ui-kit/form/SelectAutoComplete/SelectAutocomplete.tsx
index 9085c4c0db6..749f6f9529d 100644
--- a/pro/src/ui-kit/form/SelectAutoComplete/SelectAutocomplete.tsx
+++ b/pro/src/ui-kit/form/SelectAutoComplete/SelectAutocomplete.tsx
@@ -31,10 +31,12 @@ export type SelectAutocompleteProps = FieldLayoutBaseProps & {
   type?: 'text' | 'search'
   leftIcon?: string
   maxDisplayedOptions?: number
+  selectedValuesTagsClassName?: string
 }
 
 export const SelectAutocomplete = ({
   className,
+  selectedValuesTagsClassName,
   disabled = false,
   name,
   hideArrow,
@@ -340,6 +342,7 @@ export const SelectAutocomplete = ({
       </div>
       {Array.isArray(field.value) && !hideTags && field.value.length > 0 && (
         <SelectedValuesTags
+          className={selectedValuesTagsClassName}
           disabled={disabled}
           fieldName={name}
           optionsLabelById={optionsLabelById}
diff --git a/pro/src/ui-kit/form/SelectAutoComplete/SelectedValuesTags/SelectedValuesTags.tsx b/pro/src/ui-kit/form/SelectAutoComplete/SelectedValuesTags/SelectedValuesTags.tsx
index 77b6003fce8..3305687974f 100644
--- a/pro/src/ui-kit/form/SelectAutoComplete/SelectedValuesTags/SelectedValuesTags.tsx
+++ b/pro/src/ui-kit/form/SelectAutoComplete/SelectedValuesTags/SelectedValuesTags.tsx
@@ -12,6 +12,7 @@ interface TagsProps {
   optionsLabelById: Record<string, string>
   selectedOptions: string[]
   removeOption: (value: string) => void
+  className?: string
 }
 
 export const SelectedValuesTags = ({
@@ -20,6 +21,7 @@ export const SelectedValuesTags = ({
   optionsLabelById,
   selectedOptions,
   removeOption,
+  className,
 }: TagsProps): JSX.Element => {
   const tagListRef = useRef<HTMLUListElement>(null)
 
@@ -35,7 +37,10 @@ export const SelectedValuesTags = ({
   }
 
   return (
-    <ul className={styles['multi-select-autocomplete-tags']} ref={tagListRef}>
+    <ul
+      className={cn(styles['multi-select-autocomplete-tags'], className)}
+      ref={tagListRef}
+    >
       {selectedOptions.map((value: string, i) => (
         <li key={`tag-${fieldName}-${value}`} className={styles['tag']}>
           <button