diff --git a/src/App.vue b/src/App.vue
index 4d73cf6..0a47aa8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,41 @@
-<script setup></script>
-
 <template>
   <router-view></router-view>
+  <my-modal type="info" icon="warning"
+    v-model:visible="deviceAlert.visible"
+    :content="deviceAlert.content"
+    @ok="actionDeviceAlertOk"
+  ></my-modal>
 </template>
+<script setup>
+import { useWebSocketStore } from '@/store'
+import { onMounted, ref } from 'vue';
+/** @var {webSocketStore} */
+const webSocketStore = useWebSocketStore();
+/** @var {Object} */
+const deviceAlert = ref({
+    visible: false,
+    content: '',
+    key : null,
+});
+// on mounted
+onMounted(mounted);
+
+// on mounted
+function mounted() {
+    webSocketStore.registerEventHandler('AlertEvent', handleAlertEvent);
+}
+
+// handle alert event
+async function handleAlertEvent(data) {
+    deviceAlert.value.visible = true;
+    deviceAlert.value.content = data.displayInfo;
+    deviceAlert.value.key = data.alertContext;
+    await webSocketStore.call('AlertEventFrontEndConfirm', {alertContext:data.alertContext});
+}
+
+// action device alert ok
+async function actionDeviceAlertOk() {
+    await webSocketStore.call('AlertEventUsrConfirm', {alertContext:deviceAlert.value.key});
+}
 
-<style scoped></style>
+</script>