diff --git a/README.md b/README.md
index de9add5cca2f9dacca588b499fc0d4dd6dd7cc50..7e4697b55aa70b49c54616f50602d3787dc089d7 100644
--- a/README.md
+++ b/README.md
@@ -2,3 +2,4 @@
 
 This project contains an application use case to demonstrate the framework/ infrastructure of urban digital twins.
 
+![Demo](public/img/demo.jpg "A protytype application")
\ No newline at end of file
diff --git a/public/dashboard/assets/js/cesium_00_Main.js b/public/dashboard/assets/js/cesium_00_Main.js
index 11dfaa0b20db97ff0164a65095657f4591d263dd..63322b989cb122181b63e5c14d98f384268d5cb3 100644
--- a/public/dashboard/assets/js/cesium_00_Main.js
+++ b/public/dashboard/assets/js/cesium_00_Main.js
@@ -127,7 +127,7 @@ var load_utility_line = function () {
                 entity.polyline.classificationType = Cesium.ClassificationType.TERRAIN;
                 entity.polyline.material = Cesium.Color.HOTPINK;
             }
-        $("#util_nw_line_loading").hide()
+            $("#util_nw_line_loading").hide()
 
         })
     } else {
@@ -144,7 +144,25 @@ var hide_utiltiy_line = function () {
     }
 }
 
-viewer.camera.setView({"destination":{"x":-3447610.163256134,"y":4035558.08021155,"z":3526721.814467922},"orientation":{"direction":{"x":-0.3228353906545565,"y":-0.9232459949887203,"z":0.2083126095036207},"up":{"x":-0.663817634371156,"y":0.3777599007354034,"z":0.6454793611683185}}})
+viewer.camera.setView({
+    "destination": {
+        "x": -3447610.163256134,
+        "y": 4035558.08021155,
+        "z": 3526721.814467922
+    },
+    "orientation": {
+        "direction": {
+            "x": -0.3228353906545565,
+            "y": -0.9232459949887203,
+            "z": 0.2083126095036207
+        },
+        "up": {
+            "x": -0.663817634371156,
+            "y": 0.3777599007354034,
+            "z": 0.6454793611683185
+        }
+    }
+})
 
 var building_style = []
 var addBuilding = function () {
@@ -218,7 +236,6 @@ var addBuilding = function () {
         }
     });
     building_style["ElecDemand"] = new Cesium.Cesium3DTileStyle({
-        pointSize: '3.0',
         show: true,
         color: {
             "conditions": [
@@ -232,7 +249,22 @@ var addBuilding = function () {
             ]
         }
     });
-    tileset_3Dbuildings.style = building_style["AllWhite"];
+    building_style["height"] = new Cesium.Cesium3DTileStyle({
+        show: true,
+        color: {
+            "conditions": [
+                ["Number(${計測高さ}) < 5", "color('#ffffcc')"],
+                ["Number(${計測高さ}) < 10", "color('#a1dab4')"],
+                ["Number(${計測高さ}) < 20", "color('#41b6c4')"],
+                ["Number(${計測高さ}) < 30", "color('#2c7fb8')"],
+                ["Number(${計測高さ}) >= 30", "color('#253494')"],
+                ["true", "color('#E8F1F2', 0.5)"]
+            ]
+        }
+    });
+
+    // tileset_3Dbuildings.style = building_style["AllWhite"];
+    tileset_3Dbuildings.style = building_style["height"];
 };
 addBuilding();
 
@@ -365,6 +397,4 @@ $("#shadow_check").change(function () {
 //             utility_Point_Entities[i].label.show = false;
 //         }
 //     }
-// });
-
-
+// });
\ No newline at end of file
diff --git a/public/dashboard/assets/style/style.xlsx b/public/dashboard/assets/style/style.xlsx
new file mode 100644
index 0000000000000000000000000000000000000000..fa7ba1978cb770ceeb91c9da189327dec40d1d3e
Binary files /dev/null and b/public/dashboard/assets/style/style.xlsx differ
diff --git a/public/img/demo.jpg b/public/img/demo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..77160659e9070e352aab6dc1e06f2e9ea5fbeade
Binary files /dev/null and b/public/img/demo.jpg differ