diff --git a/module/block/view/recentprogramblock.html.php b/module/block/view/recentprogramblock.html.php
index d8ab8169df..572dcb761d 100644
--- a/module/block/view/recentprogramblock.html.php
+++ b/module/block/view/recentprogramblock.html.php
@@ -5,10 +5,10 @@
 #cards .panel:hover {border-color: #006AF1; box-shadow: 0 0 10px 0 rgba(0,0,100,.25);}
 #cards .panel-heading {padding: 12px 24px 10px 16px;}
 #cards .panel-body {padding: 0 16px 16px;}
-#cards .panel-actions {padding: 7px 0;} 
+#cards .panel-actions {padding: 7px 0;}
 #cards .panel-actions .dropdown-menu > li > a {padding-left: 5px; text-align: left;}
 #cards .panel-actions .dropdown-menu > li > a > i {opacity: .5; display: inline-block; margin-right: 4px; width: 18px; text-align: center;}
-#cards .panel-actions .dropdown-menu > li > a:hover > i {opacity: 1;} 
+#cards .panel-actions .dropdown-menu > li > a:hover > i {opacity: 1;}
 #cards .program-type-label {padding: 1px 2px;}
 #cards .program-name {font-size: 16px; font-weight: normal; display: inline-block; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}
 #cards .program-infos {font-size: 12px;}
@@ -20,6 +20,15 @@
 #cards .program-detail .progress {height: 4px;}
 #cards .program-detail .progress-text-left .progress-text {width: 50px; left: -50px;}
 #cards .panel-heading {cursor: pointer;}
+#cards .program-stages-container {margin: 0 -16px -16px -16px; padding: 0 4px; height: 46px; overflow-x: auto; position: relative;}
+#cards .program-stages:after {content: ' '; width: 30px; display: block; right: -16px; top: 16px; bottom: -6px; z-index: 1; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); position: absolute;}
+#cards .program-stages-row {position: relative; height: 30px; z-index: 0;}
+#cards .program-stage-item {white-space: nowrap; position: absolute; top: 0; min-width: 48px; padding-top: 13px; color: #838A9D;}
+#cards .program-stage-item > div {white-space: nowrap; overflow: visible; text-align: center; text-overflow: ellipsis;}
+#cards .program-stage-item:before {content: ' '; display: block; width: 8px; height: 8px; border-radius: 50%; background: #D1D1D1; position: absolute; left: 50%; margin-left: -4px; top: 0; z-index: 1;}
+#cards .program-stage-item + .program-stage-item:after {content: ' '; display: block; left: -50%; right: 50%; height: 2px; background-color: #D1D1D1; top: 3px; position: absolute; z-index: 0;}
+#cards .program-stage-item.is-going {color: #333;}
+#cards .program-stage-item.is-going::before {background-color: #0C64EB;}
 </style>
 <div class='row' id='cards'>
   <?php foreach ($programs as $programID => $program):?>
@@ -57,7 +66,26 @@
         <?php if($program->template === 'cmmi'): ?>
         <div class='program-detail program-stages'>
           <p class='text-muted'><?php echo $lang->program->ongoingStage; ?></p>
+          <?php
+          $programProjects = array();
+          foreach($program->projects as $project)
+          {
+              if(!$project->parent) $programProjects[] = $project;
+          }
+          ?>
+          <?php if(empty($programProjects)): ?>
           <div class='label label-outline'><?php echo zget($lang->project->statusList, $program->status);?></div>
+          <?php else: ?>
+          <div class='program-stages-container scrollbar-hover'>
+            <div class='program-stages-row'>
+              <?php foreach ($programProjects as $project): ?>
+              <div class='program-stage-item is-<?php echo $project->status;?><?php if($project->status !== 'wait') echo ' is-going'; ?>'>
+                <div><?php echo $project->name; ?></div>
+              </div>
+              <?php endforeach; ?>
+            </div>
+          </div>
+          <?php endif; ?>
         </div>
         <?php else: ?>
         <?php $project = $program->projects ? current($program->projects) : '';?>
@@ -82,3 +110,18 @@
   </div>
   <?php endforeach;?>
 </div>
+<script>
+$('#cards').find('.program-stages-container').each(function()
+{
+    var $container = $(this);
+    var $row = $container.children();
+    var totalWidth = 0;
+    $row.children().each(function()
+    {
+        var $item = $(this);
+        $item.css('left', totalWidth);
+        totalWidth += $item.width();
+    });
+    $row.css('minWidth', totalWidth);
+});
+</script>