diff --git a/src/panels/config/zha/functions.ts b/src/panels/config/zha/functions.ts
index e5475280ea..72ce4d8bdf 100644
--- a/src/panels/config/zha/functions.ts
+++ b/src/panels/config/zha/functions.ts
@@ -1,3 +1,5 @@
+import { ZHADevice } from "../../../data/zha";
+
 export const formatAsPaddedHex = (value: string | number): string => {
   let hex = value;
   if (typeof value === "string") {
@@ -5,3 +7,9 @@ export const formatAsPaddedHex = (value: string | number): string => {
   }
   return "0x" + hex.toString(16).padStart(4, "0");
 };
+
+export const sortZHADevices = (a: ZHADevice, b: ZHADevice): number => {
+  const nameA = a.user_given_name ? a.user_given_name : a.name;
+  const nameb = b.user_given_name ? b.user_given_name : b.name;
+  return nameA.localeCompare(nameb);
+};
diff --git a/src/panels/config/zha/ha-config-zha.ts b/src/panels/config/zha/ha-config-zha.ts
index 0c96d858a5..b3e505d956 100755
--- a/src/panels/config/zha/ha-config-zha.ts
+++ b/src/panels/config/zha/ha-config-zha.ts
@@ -20,6 +20,7 @@ import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { Cluster, fetchBindableDevices, ZHADevice } from "../../../data/zha";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { sortZHADevices } from "./functions";
 import { ZHAClusterSelectedParams, ZHADeviceSelectedParams } from "./types";
 
 export class HaConfigZha extends LitElement {
@@ -99,9 +100,7 @@ export class HaConfigZha extends LitElement {
       this._bindableDevices = (await fetchBindableDevices(
         this.hass,
         this._selectedDevice!.ieee
-      )).sort((a, b) => {
-        return a.name.localeCompare(b.name);
-      });
+      )).sort(sortZHADevices);
     }
   }
 
diff --git a/src/panels/config/zha/zha-binding.ts b/src/panels/config/zha/zha-binding.ts
index a2bc43c247..d95e1ce6da 100644
--- a/src/panels/config/zha/zha-binding.ts
+++ b/src/panels/config/zha/zha-binding.ts
@@ -22,6 +22,7 @@ import { bindDevices, unbindDevices, ZHADevice } from "../../../data/zha";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { ItemSelectedEvent } from "./types";
+import "@polymer/paper-item/paper-item";
 
 @customElement("zha-binding-control")
 export class ZHABindingControl extends LitElement {
@@ -64,7 +65,11 @@ export class ZHABindingControl extends LitElement {
               >
                 ${this.bindableDevices.map(
                   (device) => html`
-                    <paper-item>${device.name}</paper-item>
+                    <paper-item
+                      >${device.user_given_name
+                        ? device.user_given_name
+                        : device.name}</paper-item
+                    >
                   `
                 )}
               </paper-listbox>
diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts
index 39ab5a1181..70fcf5f41d 100644
--- a/src/panels/config/zha/zha-node.ts
+++ b/src/panels/config/zha/zha-node.ts
@@ -24,6 +24,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { fetchDevices, ZHADevice } from "../../../data/zha";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { sortZHADevices } from "./functions";
 import { ItemSelectedEvent, ZHADeviceRemovedEvent } from "./types";
 
 declare global {
@@ -141,9 +142,7 @@ export class ZHANode extends LitElement {
   }
 
   private async _fetchDevices() {
-    this._nodes = (await fetchDevices(this.hass!)).sort((a, b) => {
-      return a.name.localeCompare(b.name);
-    });
+    this._nodes = (await fetchDevices(this.hass!)).sort(sortZHADevices);
   }
 
   private _onDeviceRemoved(event: ZHADeviceRemovedEvent): void {