diff --git a/src/panels/config/zha/functions.ts b/src/panels/config/zha/functions.ts
new file mode 100644
index 0000000000..e5475280ea
--- /dev/null
+++ b/src/panels/config/zha/functions.ts
@@ -0,0 +1,7 @@
+export const formatAsPaddedHex = (value: string | number): string => {
+  let hex = value;
+  if (typeof value === "string") {
+    hex = parseInt(value, 16);
+  }
+  return "0x" + hex.toString(16).padStart(4, "0");
+};
diff --git a/src/panels/config/zha/zha-cluster-attributes.ts b/src/panels/config/zha/zha-cluster-attributes.ts
index fb48bf5006..dcde362e43 100644
--- a/src/panels/config/zha/zha-cluster-attributes.ts
+++ b/src/panels/config/zha/zha-cluster-attributes.ts
@@ -28,6 +28,7 @@ import {
   ItemSelectedEvent,
   SetAttributeServiceData,
 } from "./types";
+import { formatAsPaddedHex } from "./functions";
 
 export class ZHAClusterAttributes extends LitElement {
   public hass?: HomeAssistant;
@@ -102,7 +103,10 @@ export class ZHAClusterAttributes extends LitElement {
                 ${this._attributes.map(
                   (entry) => html`
                     <paper-item
-                      >${entry.name + " (id: " + entry.id + ")"}</paper-item
+                      >${entry.name +
+                        " (id: " +
+                        formatAsPaddedHex(entry.id) +
+                        ")"}</paper-item
                     >
                   `
                 )}
diff --git a/src/panels/config/zha/zha-cluster-commands.ts b/src/panels/config/zha/zha-cluster-commands.ts
index 14429982f9..ccd2291051 100644
--- a/src/panels/config/zha/zha-cluster-commands.ts
+++ b/src/panels/config/zha/zha-cluster-commands.ts
@@ -24,6 +24,7 @@ import {
   IssueCommandServiceData,
   ItemSelectedEvent,
 } from "./types";
+import { formatAsPaddedHex } from "./functions";
 
 export class ZHAClusterCommands extends LitElement {
   public hass?: HomeAssistant;
@@ -94,7 +95,10 @@ export class ZHAClusterCommands extends LitElement {
                 ${this._commands.map(
                   (entry) => html`
                     <paper-item
-                      >${entry.name + " (id: " + entry.id + ")"}</paper-item
+                      >${entry.name +
+                        " (id: " +
+                        formatAsPaddedHex(entry.id) +
+                        ")"}</paper-item
                     >
                   `
                 )}
diff --git a/src/panels/config/zha/zha-clusters.ts b/src/panels/config/zha/zha-clusters.ts
index c45772c510..881026b218 100644
--- a/src/panels/config/zha/zha-clusters.ts
+++ b/src/panels/config/zha/zha-clusters.ts
@@ -16,6 +16,7 @@ import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import { ItemSelectedEvent } from "./types";
+import { formatAsPaddedHex } from "./functions";
 
 declare global {
   // for fire event
@@ -27,9 +28,9 @@ declare global {
 }
 
 const computeClusterKey = (cluster: Cluster): string => {
-  return `${cluster.name} (Endpoint id: ${cluster.endpoint_id}, Id: ${
-    cluster.id
-  }, Type: ${cluster.type})`;
+  return `${cluster.name} (Endpoint id: ${
+    cluster.endpoint_id
+  }, Id: ${formatAsPaddedHex(cluster.id)}, Type: ${cluster.type})`;
 };
 
 export class ZHAClusters extends LitElement {