diff --git a/packages/react-coverage-heatmap/src/components/Renderer/index.jsx b/packages/react-coverage-heatmap/src/components/Renderer/index.jsx
index a704e6b..8c2410b 100644
--- a/packages/react-coverage-heatmap/src/components/Renderer/index.jsx
+++ b/packages/react-coverage-heatmap/src/components/Renderer/index.jsx
@@ -6,7 +6,7 @@ const Renderer = ({
   textCoordScale,
   textCoordSoffset,
   isPointcloud,
-  isIsoSurface,
+  isIsosurface,
   isoValue,
   isHeatmapColor,
   isSignalIndex,
@@ -32,8 +32,8 @@ const Renderer = ({
   }, [isPointcloud]);
 
   useEffect(() => {
-    ThreeApp.setIsIsoSurface(isIsoSurface);
-  }, [isIsoSurface]);
+    ThreeApp.setIsIsosurface(isIsosurface);
+  }, [isIsosurface]);
 
   useEffect(() => {
     ThreeApp.setIsoValue(isoValue);
diff --git a/packages/three-coverage-heatmap/src/IsoSurface/UniformSampler3D.js b/packages/three-coverage-heatmap/src/Isosurface/UniformSampler3D.js
similarity index 100%
rename from packages/three-coverage-heatmap/src/IsoSurface/UniformSampler3D.js
rename to packages/three-coverage-heatmap/src/Isosurface/UniformSampler3D.js
diff --git a/packages/three-coverage-heatmap/src/IsoSurface/index.js b/packages/three-coverage-heatmap/src/Isosurface/index.js
similarity index 80%
rename from packages/three-coverage-heatmap/src/IsoSurface/index.js
rename to packages/three-coverage-heatmap/src/Isosurface/index.js
index 23f8fbb..0314bb7 100644
--- a/packages/three-coverage-heatmap/src/IsoSurface/index.js
+++ b/packages/three-coverage-heatmap/src/Isosurface/index.js
@@ -1,14 +1,12 @@
 import * as THREE from "three";
 import { MarchingCubes } from "three/addons/objects/MarchingCubes.js";
 
-class IsoSurface extends MarchingCubes {
+class Isosurface extends MarchingCubes {
   constructor(samplesY, samplesXZ, scale) {
     const material = new THREE.MeshBasicMaterial({
-      color: "red",
-      side: THREE.DoubleSide,
-      opacity: 0.5,
+      side: THREE.BackSide,
+      opacity: 0.3,
       transparent: true,
-      // depthTest: false,
     });
     super(samplesXZ, material, true, true, 100000);
     this._samplesY = samplesY;
@@ -49,11 +47,14 @@ class IsoSurface extends MarchingCubes {
             this._samplesXZ ** 2 +
           z * this._samplesXZ +
           x;
-        this.setCell(x, y, z, colors[index * 4]);
+        const isBoundary = [x, y, z].some(
+          (index) => index <= 1 || index >= this._samplesXZ - 2
+        );
+        this.setCell(x, y, z, !isBoundary ? colors[index * 4] : 0);
       });
 
     this.update();
   }
 }
 
-export default IsoSurface;
+export default Isosurface;
diff --git a/packages/three-coverage-heatmap/src/app.js b/packages/three-coverage-heatmap/src/app.js
index 8d306ae..4321e12 100644
--- a/packages/three-coverage-heatmap/src/app.js
+++ b/packages/three-coverage-heatmap/src/app.js
@@ -2,8 +2,8 @@ import * as THREE from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import HeatmapMaterial from "./Material/HeatmapMaterial";
 import RoomBufferGeometry from "./Geometry/RoomBufferGeometry";
-import IsoSurface from "./IsoSurface";
-import UniformSampler3D from "./IsoSurface/UniformSampler3D";
+import Isosurface from "./Isosurface";
+import UniformSampler3D from "./Isosurface/UniformSampler3D";
 
 /** @class */
 class App {
@@ -14,15 +14,15 @@ class App {
     const sizeXZ = 20;
     const sizeY = 3;
 
-    const samplesY = 3 ** 2;
-    const samplesXZ = 50;
+    const samplesY = 4 ** 2;
+    const samplesXZ = 25;
     const samplesScale = [sizeXZ, sizeY, sizeXZ];
     this.uniformSampler3D = new UniformSampler3D(
       samplesY,
       samplesXZ,
       samplesScale
     );
-    this.isoSurface = new IsoSurface(samplesY, samplesXZ, samplesScale);
+    this.isosurface = new Isosurface(samplesY, samplesXZ, samplesScale);
 
     this.heatmapMaterial = new HeatmapMaterial();
     this.roomGeometry = new RoomBufferGeometry();
@@ -37,7 +37,7 @@ class App {
   _updateSamples() {
     if (!this._renderer) return;
     const colors = this.uniformSampler3D.sample(this._renderer);
-    this.isoSurface.updateFromColors(colors);
+    this.isosurface.updateFromColors(colors);
   }
 
   _updateConfig(data) {
@@ -135,24 +135,24 @@ class App {
    * Sets whether to show the isoSurface or not.
    * @param {boolean} data A boolean value indicating whether to show the isoSurface.
    * @example
-   * app.setIsIsoSurface(true);
+   * app.setIsIsosurface(true);
    */
-  setIsIsoSurface(data) {
+  setIsIsosurface(data) {
     if (data) {
-      this._scene.add(this.isoSurface);
+      this._scene.add(this.isosurface);
     } else {
-      this.isoSurface.parent?.remove(this.isoSurface);
+      this.isosurface.parent?.remove(this.isosurface);
     }
   }
 
   /**
-   * Sets visuilizeation isoValue to show the isoSurface.
-   * @param {number} value A number in the range [0, 1.0] for the marching cubes algorithm to reconstruct the isoSurface.
+   * Sets visuilizeation isoValue to show the isosurface.
+   * @param {number} value A number in the range [0, 1.0] for the marching cubes algorithm to reconstruct the isosurface.
    * @example
    * app.setIsoValue(true);
    */
   setIsoValue(value) {
-    this.isoSurface.setIsoValue(value);
+    this.isosurface.setIsoValue(value);
   }
 
   /**
diff --git a/src/App.jsx b/src/App.jsx
index 474a4dc..7cc71b2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -118,7 +118,7 @@ const getPlanes = (percentage) => {
 };
 const App = () => {
   const [isPointcloud, setIsPointcloud] = useState(false);
-  const [isIsoSurface, setIsIsoSurface] = useState(false);
+  const [isIsosurface, setIsIsosurface] = useState(false);
   const [isHeatmapColor, setIsHeatmapColor] = useState(false);
   const [isSignalIndex, setIsSignalIndex] = useState(false);
   const [hasFurniture, setHasFurniture] = useState(true);
@@ -198,17 +198,17 @@ const App = () => {
         <br />
         <input
           type="checkbox"
-          id={"isoSurface"}
-          onChange={(e) => setIsIsoSurface(e.target.checked)}
-          checked={isIsoSurface}
+          id={"isosurface"}
+          onChange={(e) => setIsIsosurface(e.target.checked)}
+          checked={isIsosurface}
         />
-        <label htmlFor="isoSurface">show isoSurface</label>
+        <label htmlFor="isosurface">show isosurface</label>
         <br />
         <label htmlFor="isoValue">isoValue</label>
         <input
           type="range"
           id={"isoValue"}
-          min={1e-3}
+          min={0.2}
           max={1}
           step={1e-2}
           onChange={(e) => setIsoValue(e.target.value)}
@@ -274,7 +274,7 @@ const App = () => {
         textCoordScale={[1 / 20, 1 / 20]}
         textCoordSoffset={[0.5, 0.5]}
         isPointcloud={isPointcloud}
-        isIsoSurface={isIsoSurface}
+        isIsosurface={isIsosurface}
         isoValue={isoValue}
         isHeatmapColor={isHeatmapColor}
         isSignalIndex={isSignalIndex}
diff --git a/src/stories/Renderer.stories.js b/src/stories/Renderer.stories.js
index aecf46f..4268048 100644
--- a/src/stories/Renderer.stories.js
+++ b/src/stories/Renderer.stories.js
@@ -19,7 +19,7 @@ const args = {
   textCoordSoffset: [0.5, 0.5],
   isSignalIndex: false,
   isPointcloud: false,
-  isIsoSurface: false,
+  isIsosurface: false,
   isoValue: 0.5,
   isHeatmapColor: true,
   signalIntensities: [10, 10],
@@ -49,7 +49,7 @@ export const Pointcloud = {
 export const Isosurface = {
   args: {
     ...args,
-    isIsoSurface: true,
+    isIsourface: true,
     isoValue: 0.5,
     isHeatmapColor: false,
   },