diff --git a/src/js/index/constant.js b/src/js/index/constant.js
index 6ccb791..74383ae 100644
--- a/src/js/index/constant.js
+++ b/src/js/index/constant.js
@@ -230,6 +230,7 @@ const TREM = {
     },
   },
   class: {
+    CrossManager: null,
     ReportManager: null,
     FocusManager: null,
     EewAreaManager: null,
diff --git a/src/js/index/core/cross.js b/src/js/index/core/cross.js
index 2d663c5..c062308 100644
--- a/src/js/index/core/cross.js
+++ b/src/js/index/core/cross.js
@@ -1,125 +1,148 @@
 const TREM = require('../constant');
 
-let clean = false;
-
-TREM.variable.events.on('MapLoad', (map) => {
-  map.addSource('cross-geojson', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
-  map.addLayer({
-    id: 'cross',
-    type: 'symbol',
-    source: 'cross-geojson',
-    layout: {
-      'symbol-sort-key': ['get', 'no'],
-      'symbol-z-order': 'source',
-      'icon-image': [
-        'case',
-        ['==', ['get', 'markerType'], 'dot'], 'dot',
-        [
-          'match',
-          ['get', 'no'],
-          1, 'cross1',
-          2, 'cross2',
-          3, 'cross3',
-          4, 'cross4',
-          'cross',
-        ],
-      ],
-      'icon-size': [
-        'interpolate',
-        ['linear'],
-        ['zoom'],
-        5, 0.02,
-        10, 0.1,
-      ],
-      'icon-allow-overlap': true,
-      'icon-ignore-placement': true,
-    },
-  });
-});
-
-function refresh_cross(show) {
-  const markerFeatures = [];
-  const eew_list = [];
-
-  if (!TREM.variable.data.eew?.length) {
-    if (clean) {
-      TREM.variable.map.getSource('cross-geojson').setData({ type: 'FeatureCollection', features: [] });
-      clean = false;
+class CrossManager {
+  static instance = null;
+  clean = false;
+
+  constructor() {
+    if (CrossManager.instance) {
+      return CrossManager.instance;
     }
-    return;
+    this.bindEvents();
+    CrossManager.instance = this;
   }
 
-  clean = true;
-
-  for (const eew of TREM.variable.data.eew) {
-    if (!TREM.constant.SHOW_TREM_EEW && eew.author == 'trem') {
-      continue;
-    }
-    const sWaveSource = TREM.variable.map.getSource(`${eew.id}-s-wave`);
-    const pWaveSource = TREM.variable.map.getSource(`${eew.id}-p-wave`);
-    if (sWaveSource && pWaveSource) {
-      eew_list.push(eew);
+  static getInstance() {
+    if (!CrossManager.instance) {
+      new CrossManager();
     }
+    return CrossManager.instance;
+  }
+
+  bindEvents() {
+    TREM.variable.events.on('MapLoad', (map) => {
+      map.addSource('cross-geojson', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
+      map.addLayer({
+        id: 'cross',
+        type: 'symbol',
+        source: 'cross-geojson',
+        layout: {
+          'symbol-sort-key': ['get', 'no'],
+          'symbol-z-order': 'source',
+          'icon-image': [
+            'case',
+            ['==', ['get', 'markerType'], 'dot'], 'dot',
+            [
+              'match',
+              ['get', 'no'],
+              1, 'cross1',
+              2, 'cross2',
+              3, 'cross3',
+              4, 'cross4',
+              'cross',
+            ],
+          ],
+          'icon-size': [
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            5, 0.02,
+            10, 0.1,
+          ],
+          'icon-allow-overlap': true,
+          'icon-ignore-placement': true,
+        },
+      });
+    });
   }
 
-  for (const eew of eew_list) {
-    const sWaveSource = TREM.variable.map.getSource(`${eew.id}-s-wave`);
-    const pWaveSource = TREM.variable.map.getSource(`${eew.id}-p-wave`);
+  refresh_cross(show) {
+    const markerFeatures = [];
+    const eew_list = [];
 
-    if (sWaveSource && pWaveSource) {
-      const existingIndex = eew_list.findIndex((item) => item.id === eew.id);
-      let no = existingIndex;
-      if (eew_list.length > 1) {
-        no++;
+    if (!TREM.variable.data.eew?.length) {
+      if (this.clean) {
+        TREM.variable.map.getSource('cross-geojson').setData({ type: 'FeatureCollection', features: [] });
+        this.clean = false;
       }
+      return;
+    }
+
+    this.clean = true;
 
-      if (no < 5) {
-        if (show || eew.status == 3) {
-          const opacity = eew.status == 3 ? 0.5 : 1;
-          markerFeatures.push({
-            type: 'Feature',
-            geometry: {
-              type: 'Point',
-              coordinates: [eew.eq.lon, eew.eq.lat],
-            },
-            properties: {
-              no,
-              markerType: eew.eq.mag === 1 ? 'dot' : 'cross',
-              maxIntensity: eew.eq.max,
-              fillColor: TREM.constant.COLOR.INTENSITY[eew.eq.max],
-              strokeColor: TREM.constant.COLOR.INTENSITY_TEXT[eew.eq.max],
-              opacity: opacity,
-            },
-          });
+    for (const eew of TREM.variable.data.eew) {
+      if (!TREM.constant.SHOW_TREM_EEW && eew.author == 'trem') {
+        continue;
+      }
+      const sWaveSource = TREM.variable.map.getSource(`${eew.id}-s-wave`);
+      const pWaveSource = TREM.variable.map.getSource(`${eew.id}-p-wave`);
+      if (sWaveSource && pWaveSource) {
+        eew_list.push(eew);
+      }
+    }
+
+    for (const eew of eew_list) {
+      const sWaveSource = TREM.variable.map.getSource(`${eew.id}-s-wave`);
+      const pWaveSource = TREM.variable.map.getSource(`${eew.id}-p-wave`);
+
+      if (sWaveSource && pWaveSource) {
+        const existingIndex = eew_list.findIndex((item) => item.id === eew.id);
+        let no = existingIndex;
+        if (eew_list.length > 1) {
+          no++;
+        }
+
+        if (no < 5) {
+          if (show || eew.status == 3) {
+            const opacity = eew.status == 3 ? 0.5 : 1;
+            markerFeatures.push({
+              type: 'Feature',
+              geometry: {
+                type: 'Point',
+                coordinates: [eew.eq.lon, eew.eq.lat],
+              },
+              properties: {
+                no,
+                markerType: eew.eq.mag === 1 ? 'dot' : 'cross',
+                maxIntensity: eew.eq.max,
+                fillColor: TREM.constant.COLOR.INTENSITY[eew.eq.max],
+                strokeColor: TREM.constant.COLOR.INTENSITY_TEXT[eew.eq.max],
+                opacity: opacity,
+              },
+            });
+          }
         }
       }
     }
-  }
 
-  TREM.variable.map.getSource('cross-geojson').setData({
-    type: 'FeatureCollection',
-    features: markerFeatures,
-  });
-
-  if (!TREM.variable.map.getLayer('dots')) {
-    TREM.variable.map.addLayer({
-      id: 'dots',
-      type: 'circle',
-      source: 'cross-geojson',
-      filter: ['==', ['get', 'markerType'], 'dot'],
-      paint: {
-        'circle-radius': 10,
-        'circle-color': ['get', 'fillColor'],
-        'circle-stroke-width': 4,
-        'circle-stroke-color': ['get', 'strokeColor'],
-        'circle-opacity': ['get', 'opacity'],
-        'circle-stroke-opacity': ['get', 'opacity'],
-      },
+    TREM.variable.map.getSource('cross-geojson').setData({
+      type: 'FeatureCollection',
+      features: markerFeatures,
     });
-  }
 
-  TREM.variable.map.moveLayer('cross');
-  TREM.variable.map.moveLayer('dots');
+    if (!TREM.variable.map.getLayer('dots')) {
+      TREM.variable.map.addLayer({
+        id: 'dots',
+        type: 'circle',
+        source: 'cross-geojson',
+        filter: ['==', ['get', 'markerType'], 'dot'],
+        paint: {
+          'circle-radius': 10,
+          'circle-color': ['get', 'fillColor'],
+          'circle-stroke-width': 4,
+          'circle-stroke-color': ['get', 'strokeColor'],
+          'circle-opacity': ['get', 'opacity'],
+          'circle-stroke-opacity': ['get', 'opacity'],
+        },
+      });
+    }
+
+    TREM.variable.map.moveLayer('cross');
+    TREM.variable.map.moveLayer('dots');
+  }
 }
 
-module.exports = refresh_cross;
+TREM.class.CrossManager = CrossManager;
+
+const crossManager = CrossManager.getInstance();
+module.exports = crossManager;
diff --git a/src/js/index/core/eew.js b/src/js/index/core/eew.js
index fe0f76a..ad55cbd 100644
--- a/src/js/index/core/eew.js
+++ b/src/js/index/core/eew.js
@@ -2,7 +2,7 @@ const TREM = require('../constant');
 const EEWCalculator = require('../utils/eewCalculator');
 const now = require('../utils/ntp');
 const { formatTime } = require('../utils/utils');
-const refresh_cross = require('./cross');
+const cross = require('./cross');
 const { ipcRenderer } = require('electron');
 
 const calculator = new EEWCalculator(require('../../../resource/data/time.json'));
@@ -109,7 +109,7 @@ TREM.variable.events.on('EewAlert', (ans) => {
 TREM.variable.events.on('EewUpdate', (ans) => {
   eew_cache[ans.data.id] = ans.data;
   show_eew(false);
-  refresh_cross(false);
+  cross.refresh_cross(false);
 });
 TREM.variable.events.on('EewEnd', (ans) => {
   removeEewLayersAndSources(ans.data.id);
diff --git a/src/js/index/core/loop.js b/src/js/index/core/loop.js
index 2d978d0..c36df65 100644
--- a/src/js/index/core/loop.js
+++ b/src/js/index/core/loop.js
@@ -2,7 +2,7 @@ const TREM = require('../constant');
 
 const { formatTime } = require('../utils/utils');
 const now = require('../utils/ntp');
-const refresh_cross = require('./cross');
+const cross = require('./cross');
 const refresh_box = require('./box');
 const fetchData = require('../../core/utils/fetch');
 
@@ -40,7 +40,7 @@ setInterval(() => {
 TREM.variable.events.on('MapLoad', () => {
   setInterval(() => {
     flash = !flash;
-    refresh_cross(flash);
+    cross.refresh_cross(flash);
     refresh_box(flash);
   }, 500);
 });