diff --git a/public/config.json b/public/config.json
index db3d6a0..990887e 100644
--- a/public/config.json
+++ b/public/config.json
@@ -30,6 +30,9 @@
   }, {
     "title": "多屏图纸对比",
     "url": "./demo/dxf_4.html"
+  }, {
+    "title": "批注",
+    "url": "./demo/dxf_5.html"
   }]
 }, {
   "title": "全景图",
diff --git a/public/demo/dxf_5.html b/public/demo/dxf_5.html
new file mode 100644
index 0000000..c7f9aa2
--- /dev/null
+++ b/public/demo/dxf_5.html
@@ -0,0 +1,143 @@
+<html>
+
+<head>
+    <link rel="icon" href="./demo/favicon.ico">
+    <link rel="stylesheet" type="text/css" href="./demo/global.css">
+    <link rel="stylesheet" type="text/css" href="./demo/iconfont/iconfont.css">
+    <link rel="stylesheet" href="./demo/layerManager/layerManager.css">
+    <link rel="stylesheet" href="./demo/settings/SettingsPanel.css">
+    <style>
+        #myCanvas {
+            position: absolute;
+            width: calc(100% - 100px);
+            width: -moz-calc(100% - 100px);
+            width: -webkit-calc(100% - 100px);
+            height: calc(100% - 80px);
+            height: -moz-calc(100% - 80px);
+            height: -webkit-calc(100vh - 80px);
+            left: 50px;
+            top: 40px;
+        }
+        .markup-toolbar {
+            position: absolute;
+            right: 60px;
+            top: 10%;
+        }
+        .markup-toolbar-btn {
+            min-width: 50px;
+            height: 30px;
+            cursor: pointer;
+            padding: 2px;
+        }
+        .btn-active {
+            background-color: cornflowerblue;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="viewerContainer">
+        <div id="myCanvas" class="renderer-container"></div>
+        <div class="markup-toolbar">
+            <button id="ArrowMarkup" class="markup-toolbar-btn">Arrow</button>
+            <button id="RectMarkup" class="markup-toolbar-btn">Rect</button>
+            <button id="CircleMarkup" class="markup-toolbar-btn">Circle</button>
+            <button id="DotMarkup" class="markup-toolbar-btn">Dot</button>
+            <button id="ClearMarkups" class="markup-toolbar-btn" title="Clear all markups">Clear</button>
+        </div>
+    </div>
+    <script type="module">
+        import { DxfViewer } from "./demo/libs/gemini-viewer.esm.min.js";
+        import DxfSettingsPanel from './demo/settings/DxfSettingsPanel.js';
+        import LayerManager from './demo/layerManager/LayerManager.js';
+
+        const models= [{
+            modelId: "dxf_0",
+            name: "dxf_0",
+            src: "./demo/models/dxf/rac_basic_sample_project.dxf",
+            merge: true,
+            visible: true,
+        }];
+        const config = {
+            containerId: "myCanvas",
+            enableAxisGizmo: true,
+            enableStats: true,
+            enableToolbar: false,
+            enableSpinner: true,
+            enableProgressBar: true,
+            enableBottomBar: true,
+            enableLayoutBar: true,
+            enableSelection: true,
+        };
+        const viewer = new DxfViewer(config);
+        // const fontFiles = ["three/fonts/Microsoft_YaHei_Regular.typeface.json"];
+        const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
+        await viewer.setFont(fontFiles);
+
+        window.viewer = viewer;
+
+        // loadProjectModel
+        let counter = 0; // to indicate how many models are loading
+        models.forEach((modelCfg) => {
+            if (modelCfg.visible === false) {
+                // visible is true by default
+                return; // only load visible ones
+            }
+            counter++;
+            const onProgress = (event) => {
+                let type = "Loading progress";
+                if (event.type === "parseProgress") {
+                    type = "Parsing progress";
+                }
+                const progress = ((event.loaded * 100) / event.total).toFixed(2);
+                console.log(`[Demo] ${type}: ${progress}%`);
+            };
+            try {
+                viewer.loadModelAsync(modelCfg, onProgress).then(() => {
+                    console.log(`[Demo] Loaded model ${modelCfg.src}`);
+                    if (!viewer.layerManager) {
+                        viewer.layerManager = new LayerManager(viewer);
+                    }
+                }).finally(() => {
+                    counter--;
+                });
+            } catch (ex) {
+                console.log(ex);
+            }
+        });
+
+        // as a demo page, add dxfSettingsPanel to window!
+        window.dxfSettingsPanel = new DxfSettingsPanel(viewer);
+
+        const markupButtonClicked = (markupType, btn) => {
+            // deactive current markup
+            const activeMarkupType = viewer.getActiveMarkupType();
+            if (activeMarkupType) {
+                let activeBtn = document.getElementById(activeMarkupType);
+                activeBtn.classList.remove("btn-active");
+                viewer.deactivateMarkup(activeMarkupType);
+            }
+            if (markupType === "ClearMarkups") {
+                viewer.clearMarkups();
+                return;
+            }
+            // active new markup if a different type is clicked
+            if (activeMarkupType !== markupType) {
+                btn.classList.add("btn-active");
+                viewer.activateMarkup(markupType);
+            }
+        };
+        const registerClickEvent = (markupType) => {
+            let btn = document.getElementById(markupType);
+            btn.onclick = () => markupButtonClicked(markupType, btn);
+        };
+
+        registerClickEvent("ArrowMarkup");
+        registerClickEvent("RectMarkup");
+        registerClickEvent("CircleMarkup");
+        registerClickEvent("DotMarkup");
+        registerClickEvent("ClearMarkups");
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/demo/images/snapshots/load_and_view.gif b/public/demo/images/snapshots/load_and_view.gif
index 1c5de97..ced289b 100644
Binary files a/public/demo/images/snapshots/load_and_view.gif and b/public/demo/images/snapshots/load_and_view.gif differ
diff --git a/public/demo/layerManager/LayerManager.js b/public/demo/layerManager/LayerManager.js
index 10d4409..e09787e 100644
--- a/public/demo/layerManager/LayerManager.js
+++ b/public/demo/layerManager/LayerManager.js
@@ -135,7 +135,7 @@ export default class LayerManager {
         this.closeBtn?.addEventListener("click", this.hide.bind(this));
 
         const layersBtn = document.querySelector("#Layers");
-        layersBtn.addEventListener("click", () => {
+        layersBtn && layersBtn.addEventListener("click", () => {
             if (layersBtn.classList.contains("active")) {
                 if (!this.viewer.layerManager) {
                     this.viewer.layerManager = new LayerManager(this.viewer);
diff --git a/public/demo/settings/DxfSettingsPanel.js b/public/demo/settings/DxfSettingsPanel.js
index be41cef..3174e33 100644
--- a/public/demo/settings/DxfSettingsPanel.js
+++ b/public/demo/settings/DxfSettingsPanel.js
@@ -105,7 +105,7 @@ export default class DxfSettingsPanel {
         });
 
         const settingsToolbarBtn = document.querySelector("#Settings");
-        settingsToolbarBtn.addEventListener("click", () => {
+        settingsToolbarBtn && settingsToolbarBtn.addEventListener("click", () => {
             if (settingsToolbarBtn.classList.contains("active")) {
                 if (!window.dxfSettingsPanel) {
                     window.dxfSettingsPanel = new DxfSettingsPanel(this.viewer);
