diff --git a/README.md b/README.md
index 9466a7f..0a2b161 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,8 @@ viewer.goToHomeView();
 - Markups
 ![markups.gif](public/demo/images/snapshots/markups.gif)
 - Comparison
-![markups.gif](public/demo/images/snapshots/dxf_compare.png)
+![dxf_compare_2_viewports.gif](public/demo/images/snapshots/dxf_compare_2_viewports.gif)
+![dxf_compare.gif](public/demo/images/snapshots/dxf_compare.png)
 - Undo/redo
 
 ## DxfViewer limitations
@@ -91,7 +92,7 @@ viewer.goToHomeView();
 
 ## Features for BimViewer
 - Load and view BIM model
-![load_and_view.gif](public/demo/images/snapshots/bim_view_model.png)
+![bim_view_model.png](public/demo/images/snapshots/bim_view_model.png)
 - Orthographic view
 ![bim_ortho_camera.png](public/demo/images/snapshots/bim_ortho_camera.png)
 - Selection
@@ -107,8 +108,8 @@ viewer.goToHomeView();
 
 ## Features for VRViewer
 - Load and view a panorama
-![load_and_view.gif](public/demo/images/snapshots/pano_load_and_view.gif)
+![pano_load_and_view.gif](public/demo/images/snapshots/pano_load_and_view.gif)
 - Switch to another panorama
-![bim_ortho_camera.png](public/demo/images/snapshots/pano_switch_panos.gif)
+![pano_switch_panos.gif](public/demo/images/snapshots/pano_switch_panos.gif)
 - Switch between decorations
-![bim_ortho_camera.png](public/demo/images/snapshots/pano_switch_decorations.gif)
+![pano_switch_decorations.gif](public/demo/images/snapshots/pano_switch_decorations.gif)
diff --git a/public/demo/dxf_8.html b/public/demo/dxf_8.html
index 6a926f5..0f3afaa 100644
--- a/public/demo/dxf_8.html
+++ b/public/demo/dxf_8.html
@@ -10,8 +10,8 @@
       body {
         font-size: 0;
       }
-      #viewer1,
-      #viewer2 {
+      #myCanvas1,
+      #myCanvas2 {
         width: calc(50% - 1px);
         height: 100%;
         margin: 0;
@@ -28,7 +28,12 @@
       }
 
       #syncCamera {
+        position: absolute;
+        text-align: center;
+        top: 20px;
+        left: calc(50% - 40px);
         height: 40px;
+        width: 80px;
         font-size: 16px;
         line-height: 40px;
         color: #fff;
@@ -44,13 +49,12 @@
 
   <body>
     <div id="app" class="app">
-      <div id="viewer1" class="container"></div>
+      <div id="myCanvas1" class="container"></div>
       <div class="split"></div>
-      <div id="viewer2" class="container"></div>
-    </div>
-    <div class="upload-containter">
-      <button id="syncCamera" title="Click to sync or unsync cameras">unsynced</button>
+      <div id="myCanvas2" class="container"></div>
     </div>
+    <button id="syncCamera" title="Click to sync or unsync cameras">unsynced</button>
+
     <script type="module">
       import {
         DxfCompareHelper,
@@ -60,43 +64,43 @@
       import DxfSettingsPanel from "./demo/settings/DxfSettingsPanel.js";
       import LayerManager from "./demo/layerManager/LayerManager.js";
 
-      const compareViewer = new DxfCompareHelper(
+      const url1 = "./demo/models/dxf/doors_and_windows.dxf";
+      const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
+      const compareHelper = new DxfCompareHelper(
         {
-          containerId: "viewer1",
+          containerId: "myCanvas1",
           enableAxisGizmo: true,
-          enableStats: true,
           enableToolbar: true,
           enableBottomBar: true,
           enableSelection: true,
         },
         {
-          containerId: "viewer2",
-          enableAxisGizmo: true,
-          enableStats: true,
+          containerId: "myCanvas2",
+          enableAxisGizmo: false,
           enableToolbar: true,
-          enableBottomBar: true,
-          enableSelection: true,
+          enableBottomBar: false,
+          enableSelection: false,
         }
       );
-      window.compareViewer = compareViewer;
-      const fontFiles = ["./demo/three/fonts/hztxt.shx", "./demo/three/fonts/simplex.shx"];
-      await compareViewer.setFont(fontFiles);
+      window.compareHelper = compareHelper;
+      const fontFiles = ["three/fonts/hztxt.shx", "three/fonts/simplex.shx"];
+      await compareHelper.setFont(fontFiles);
 
-      compareViewer.viewer1.toolbar?.updateMenus(
-        overrideToolbarConfig(compareViewer.viewer1)
+      compareHelper.viewer1.toolbar?.updateMenus(
+        overrideToolbarConfig(compareHelper.viewer1)
       );
-      compareViewer.viewer2.toolbar?.updateMenus(
-        overrideToolbarConfig(compareViewer.viewer2)
+      compareHelper.viewer2.toolbar?.updateMenus(
+        overrideToolbarConfig(compareHelper.viewer2)
       );
 
       const syncCameraBtn = document.getElementById("syncCamera");
       let enableSyncCamera = false;
       syncCameraBtn.onclick = function () {
         if (!enableSyncCamera) {
-          compareViewer.enableSyncCamera(true);
+          compareHelper.enableSyncCamera(true);
           syncCameraBtn.innerText = "synced";
         } else {
-          compareViewer.enableSyncCamera(false);
+          compareHelper.enableSyncCamera(false);
           syncCameraBtn.innerText = "unsynced";
         }
         enableSyncCamera = !enableSyncCamera;
@@ -107,17 +111,12 @@
         console.log(`[Demo] Compare progress: ${progress}%`);
       };
 
-      const url1 = "./demo/models/dxf/doors_and_windows.dxf";
-      const url2 = "./demo/models/dxf/doors_and_windows_mopdified.dxf";
-      const modelConfig1 = { modelId: "doors_and_windows", name: "dxf 1", src: url1 };
-      const modelConfig2 = { modelId: "doors_and_windows_mopdified", name: "dxf 2", src: url2 };
-      compareViewer.compare(modelConfig1, modelConfig2, onProgress).then(() => {
+      // compare two specific dxf by default
+      compareHelper.compare({ src: url1, modelId: "dxf_3" }, { src: url2, modelId: "dxf_3_1" }, undefined, onProgress).then(() => {
         console.log(`[Demo] Compared models: ${url1}, ${url2}`);
-        new DxfComparePanel(compareViewer, compareViewer.container);
+        new DxfComparePanel(compareHelper, compareHelper.container);
       }).catch((reason) => {
-        console.error(
-          `[Demo] Failed to compare models: ${url1}, ${url2}. reason: ${reason}`
-        );
+        console.error(`[Demo] Failed to compare models: ${url1}, ${url2}. reason: ${reason}`);
       });
 
       function overrideToolbarConfig(viewer) {
@@ -182,7 +181,7 @@
                   document.exitFullscreen();
                   window.removeEventListener("resize", onResize);
                 } else {
-                  compareViewer.container.requestFullscreen();
+                  compareHelper.container.requestFullscreen();
                 }
                 window.addEventListener("resize", onResize);
               },
diff --git a/public/demo/images/snapshots/dxf_compare_2_viewports.gif b/public/demo/images/snapshots/dxf_compare_2_viewports.gif
new file mode 100644
index 0000000..ba3af12
Binary files /dev/null and b/public/demo/images/snapshots/dxf_compare_2_viewports.gif differ
