diff --git a/ganttzk/src/main/java/org/zkoss/ganttz/Planner.java b/ganttzk/src/main/java/org/zkoss/ganttz/Planner.java
index 48c65bc11..876b1edb2 100644
--- a/ganttzk/src/main/java/org/zkoss/ganttz/Planner.java
+++ b/ganttzk/src/main/java/org/zkoss/ganttz/Planner.java
@@ -330,13 +330,16 @@ public class Planner extends HtmlMacroComponent  {
     };
 
     public void showCriticalPath() {
+        Button showCriticalPathButton = (Button) getFellow("showCriticalPath");
         if (disabilityConfiguration.isCriticalPathEnabled()) {
             if (isShowingCriticalPath) {
                 context.hideCriticalPath();
                 diagramGraph.removePostGraphChangeListener(showCriticalPathOnChange);
+                showCriticalPathButton.setSclass("planner-command");
             } else {
                 context.showCriticalPath();
                 diagramGraph.addPostGraphChangeListener(showCriticalPathOnChange);
+                showCriticalPathButton.setSclass("planner-command clicked");
             }
             isShowingCriticalPath = !isShowingCriticalPath;
         }
diff --git a/navalplanner-webapp/src/main/webapp/common/css/navalpro_zk.css b/navalplanner-webapp/src/main/webapp/common/css/navalpro_zk.css
index 7435fa700..0725f1828 100644
--- a/navalplanner-webapp/src/main/webapp/common/css/navalpro_zk.css
+++ b/navalplanner-webapp/src/main/webapp/common/css/navalpro_zk.css
@@ -186,6 +186,15 @@ button.z-button {
    padding: 2px 1px 1px 2px;
 }
 
+.planner-command.clicked .z-button-cm {
+    background-color: #A1D586; /* green2 (active background)*/
+    border-right: 1px solid #439e32;
+    border-bottom: 1px solid #439e32;
+    border-top: 2px solid #3f5917;
+    border-left: 2px solid #3f5917;
+    padding: 2px 1px 1px 2px;
+}
+
 
 .sub_menu .z-button-cm {
     background-color: transparent !important;