diff --git a/src/main/resources/templates/meshes.html b/src/main/resources/templates/meshes.html
index d3185fb..cbbf989 100644
--- a/src/main/resources/templates/meshes.html
+++ b/src/main/resources/templates/meshes.html
@@ -15,6 +15,8 @@
 var __lineLayer = null;
 
 function loadMap() {
+
+	// ICON のスタイル
 	style = new ol.style.Style({
 	    image: new ol.style.Icon({
 	        src: '/task-bldg/img/osm_200x200.png',
@@ -24,6 +26,49 @@
 	    stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
 	});
 	
+	var status1 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: '/task-bldg/img/PREPARATION.png',
+	        anchor: [0.5, 0.5],
+	        scale: 1
+	    })
+	});
+	var status2 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: '/task-bldg/img/ACCEPTING.png',
+	        anchor: [0.5, 0.5],
+	        scale: 1
+	    })
+	});
+	var status3 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: '/task-bldg/img/RESERVED.png',
+	        anchor: [0.5, 0.5],
+	        scale: 1
+	    })
+	});
+	var status4 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: '/task-bldg/img/EDITING.png',
+	        anchor: [0.5, 0.5],
+	        scale: 1
+	    })
+	});
+	var status5 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: '/task-bldg/img/NG.png',
+	        anchor: [0.5, 0.5],
+	        scale: 1
+	    })
+	});
+	var status6 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: '/task-bldg/img/OK.png',
+	        anchor: [0.5, 0.5],
+	        scale: 1
+	    })
+	});
+	
 	// マップの作成
 	__map = new ol.Map({
 		target: 'map',
@@ -53,16 +98,6 @@
         positioning: 'bottom-center'
     });
     
-	// ICON のスタイル
-	style = new ol.style.Style({
-	    image: new ol.style.Icon({
-	        src: '/task-bldg/img/osm_200x200.png',
-	        anchor: [0.5, 0.5],
-	        scale: 0.2
-	    }),
-	    stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
-	});
-
 	{
 	    $(meshes).each(function() {
 			
@@ -72,8 +107,30 @@
 		        code: this.meshcode
 		    });
 		    feature.information = this;
-		    feature.setStyle(style);
+		    if (this.status == "PREPARATION") {
+		    	feature.setStyle(status1);
+		    }
+		    else if (this.status == "ACCEPTING") {
+		    	feature.setStyle(status2);
+		    }
+		    else if (this.status == "RESERVED") {
+		    	feature.setStyle(status3);
+		    }
+		    else if (this.status == "EDITING") {
+		    	feature.setStyle(status4);
+		    }
+		    else if (this.status == "NG") {
+		    	feature.setStyle(status5);
+		    }
+		    else if (this.status == "OK") {
+		    	feature.setStyle(status6);
+		    }
+		    else {
+		    	feature.setStyle(style);
+		    }
+
 		    __markerLayer.getSource().addFeature(feature);
+		    __map.getView().setCenter(ol.proj.fromLonLat([Number(this.lng),Number(this.lat)]));
 		    
 		    // LineString
 			if (this.line != null) {
diff --git a/src/main/resources/templates/tasks.html b/src/main/resources/templates/tasks.html
index 6c97479..5a5b7c8 100644
--- a/src/main/resources/templates/tasks.html
+++ b/src/main/resources/templates/tasks.html
@@ -63,13 +63,77 @@
 	    stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
 	});
 	
+	var status1 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: './img/PREPARATION.png',
+	        anchor: [0.5, 0.5],
+	        scale: 2
+	    })
+	});
+	var status2 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: './img/ACCEPTING.png',
+	        anchor: [0.5, 0.5],
+	        scale: 2
+	    })
+	});
+	var status3 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: './img/RESERVED.png',
+	        anchor: [0.5, 0.5],
+	        scale: 2
+	    })
+	});
+	var status4 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: './img/EDITING.png',
+	        anchor: [0.5, 0.5],
+	        scale: 2
+	    })
+	});
+	var status5 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: './img/NG.png',
+	        anchor: [0.5, 0.5],
+	        scale: 2
+	    })
+	});
+	var status6 = new ol.style.Style({
+	    image: new ol.style.Icon({
+	        src: './img/OK.png',
+	        anchor: [0.5, 0.5],
+	        scale: 2
+	    })
+	});
+	
 	// マーカーの表示
     featurePoint = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.fromLonLat([Number(mesh.lng),Number(mesh.lat)])),
         code: mesh.meshcode
     });
     featurePoint.information = mesh;
-    featurePoint.setStyle(style);
+    if (mesh.status == "PREPARATION") {
+    	featurePoint.setStyle(status1);
+    }
+    else if (mesh.status == "ACCEPTING") {
+    	featurePoint.setStyle(status2);
+    }
+    else if (mesh.status == "RESERVED") {
+    	featurePoint.setStyle(status3);
+    }
+    else if (mesh.status == "EDITING") {
+    	featurePoint.setStyle(status4);
+    }
+    else if (mesh.status == "NG") {
+    	featurePoint.setStyle(status5);
+    }
+    else if (mesh.status == "OK") {
+    	featurePoint.setStyle(status6);
+    }
+    else {
+    	featurePoint.setStyle(style);
+    }
+
     __markerLayer.getSource().addFeature(featurePoint);
     __map.getView().setCenter(ol.proj.fromLonLat([Number(mesh.lng),Number(mesh.lat)]));