diff --git a/packages/image/src/core/Monitor.ts b/packages/image/src/core/Monitor.ts
index 053e916d8..2d1e09c9d 100644
--- a/packages/image/src/core/Monitor.ts
+++ b/packages/image/src/core/Monitor.ts
@@ -140,11 +140,15 @@ export class Monitor {
           if (!tool.drawing.get(id)) {
             throw Error(`Annotation: ${id} is not found`);
           }
-
-          tool.drawing.get(id)!.data.order = i;
+          
+          tool.updateOrder(id, i);
         }
       }
     }
+
+    for (const tool of tools.values()) {
+      tool.refresh();
+    }
   };
 
   private _handleClear = () => {
diff --git a/packages/image/src/tools/Tool.ts b/packages/image/src/tools/Tool.ts
index 4cae1d971..fcbd1237c 100644
--- a/packages/image/src/tools/Tool.ts
+++ b/packages/image/src/tools/Tool.ts
@@ -320,6 +320,21 @@ export class Tool<Data extends BasicImageAnnotation, Style, Config extends Basic
     this.activeLabel = undefined;
   }
 
+  public updateOrder(id: string, order: number) {
+    const annotation = this.drawing?.get(id);
+
+    if (annotation) {
+      annotation.data.order = order;
+
+      for (const _data of this._data) {
+        if (annotation.id === _data.id) {
+          _data.order = order;
+          break;
+        }
+      }
+    }
+  }
+
   public get data() {
     const { drawing, draft } = this;