diff --git a/addons/hr_recruitment/views/hr_recruitment_views.xml b/addons/hr_recruitment/views/hr_recruitment_views.xml
index 018eae494cf..b84b3fba806 100644
--- a/addons/hr_recruitment/views/hr_recruitment_views.xml
+++ b/addons/hr_recruitment/views/hr_recruitment_views.xml
@@ -113,7 +113,7 @@
                 </div>
                 <widget name="web_ribbon" title="Refused" bg_color="bg-danger" attrs="{'invisible': ['|', ('active', '=', True), ('refuse_reason_id', '=', False)]}"/>
                 <widget name="web_ribbon" title="Hired" attrs="{'invisible': [('date_closed', '=', False)]}" />
-                <field name="kanban_state" widget="kanban_state_selection"/>
+                <field name="kanban_state" widget="state_selection"/>
                 <field name="active" invisible="1"/>
                 <field name="legend_normal" invisible="1"/>
                 <field name="legend_blocked" invisible="1"/>
@@ -387,7 +387,7 @@
                                             </span>
                                         </a>
                                         <div class="o_kanban_state_with_padding ms-1 me-2" >
-                                            <field name="kanban_state" widget="kanban_state_selection"/>
+                                            <field name="kanban_state" widget="state_selection"/>
                                             <field name="legend_normal" invisible="1"/>
                                             <field name="legend_blocked" invisible="1"/>
                                             <field name="legend_done" invisible="1"/>
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.js b/addons/web/static/src/views/fields/state_selection/state_selection_field.js
index 447ba6e7c76..94972ab4d4b 100644
--- a/addons/web/static/src/views/fields/state_selection/state_selection_field.js
+++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.js
@@ -15,7 +15,6 @@ export class StateSelectionField extends Component {
         if (this.props.record.activeFields[this.props.name].viewType === "form") {
             this.initiateCommand();
         }
-        this.excludedValues = [];
         this.colorPrefix = "o_status_";
         this.colors = {
             blocked: "red",
@@ -23,15 +22,20 @@ export class StateSelectionField extends Component {
         };
     }
     get options() {
-        return Array.from(this.props.record.fields[this.props.name].selection);
+        return this.props.record.fields[this.props.name].selection.map(([state, label]) => {
+            return [state, this.props.record.data[`legend_${state}`] || label];
+        });
     }
     get availableOptions() {
-        return this.options.filter((o) => !this.excludedValues.includes(o[0]));
+        return this.options.filter((o) => o[0] !== this.currentValue);
     }
     get currentValue() {
         return this.props.value || this.options[0][0];
     }
     get label() {
+        if (this.props.value && this.props.record.data[`legend_${this.props.value[0]}`]) {
+            return this.props.record.data[`legend_${this.props.value[0]}`];
+        }
         return formatSelection(this.currentValue, { selection: this.options });
     }
     get showLabel() {
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.scss b/addons/web/static/src/views/fields/state_selection/state_selection_field.scss
new file mode 100644
index 00000000000..f04590a12c7
--- /dev/null
+++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.scss
@@ -0,0 +1,10 @@
+.o_form_sheet > .o_field_state_selection {
+    > .dropdown {
+        float: right;
+    }
+
+    .dropdown-toggle .o_status {
+        height: $h3-font-size;
+        width: $h3-font-size;
+    }
+}
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
index 8ece1ad9637..b1956b10ebd 100644
--- a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
+++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
@@ -17,7 +17,7 @@
                     </div>
                 </t>
                 <t t-foreach="availableOptions" t-as="option" t-key="option[0]">
-                    <DropdownItem t-if="option[0] != currentValue" onSelected="() => props.update(option[0])">
+                    <DropdownItem onSelected="() => props.update(option[0])">
                         <div class="d-flex align-items-center">
                             <span t-attf-class="o_status {{ statusColor(option[0]) }} "/>
                             <span class="ms-2" t-esc="option[1]"/>
diff --git a/addons/web/static/tests/views/fields/state_selection_field_tests.js b/addons/web/static/tests/views/fields/state_selection_field_tests.js
index ce71d056717..b0e9a59c64d 100644
--- a/addons/web/static/tests/views/fields/state_selection_field_tests.js
+++ b/addons/web/static/tests/views/fields/state_selection_field_tests.js
@@ -468,4 +468,44 @@ QUnit.module("Fields", (hooks) => {
             assert.containsOnce(target, ".o_status_green");
         }
     );
+
+    QUnit.test("StateSelectionField uses legend_* fields", async function (assert) {
+        serverData.models.partner.fields.legend_normal = { type: "char" };
+        serverData.models.partner.fields.legend_blocked = { type: "char" };
+        serverData.models.partner.fields.legend_done = { type: "char" };
+        serverData.models.partner.records[0].legend_normal = "Custom normal";
+        serverData.models.partner.records[0].legend_blocked = "Custom blocked";
+        serverData.models.partner.records[0].legend_done = "Custom done";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="legend_normal" invisible="1" />
+                            <field name="legend_blocked" invisible="1" />
+                            <field name="legend_done" invisible="1" />
+                            <field name="selection" widget="state_selection"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await click(target, ".o_status");
+        let dropdownItemTexts = [...target.querySelectorAll(".dropdown-item")].map(
+            (el) => el.textContent
+        );
+        assert.deepEqual(dropdownItemTexts, ["Custom normal", "Custom done"]);
+
+        await click(target.querySelector(".dropdown-item .o_status"));
+        await click(target, ".o_status");
+        dropdownItemTexts = [...target.querySelectorAll(".dropdown-item")].map(
+            (el) => el.textContent
+        );
+        assert.deepEqual(dropdownItemTexts, ["Custom blocked", "Custom done"]);
+    });
 });