diff --git a/module/product/css/kanban.css b/module/product/css/kanban.css
index 8f36e4012d..8100681b52 100644
--- a/module/product/css/kanban.css
+++ b/module/product/css/kanban.css
@@ -1,12 +1,15 @@
 #kanban {padding: 10px;}
-.main-table tbody>tr>td {padding: 0 10px 10px;}
 .table caption {background: #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; margin-bottom: 0; font-weight: 500; padding-top: 0;}
-.table .program {writing-mode: vertical-lr; padding-left: 4px !important; color: #fff;}
-
 .table th, .table td {border-top: 2px solid #fff; border-bottom: 2px solid #fff; border-left: 3px solid #fff; border-bottom: 3px solid #fff;}
 .table tbody tr:last-child td {border-bottom: unset;}
-td.project, td.execution {padding: 10px 0 !important;}
-td.plan, td.release {vertical-align: top !important;}
+td.plan, td.release, td.project, td.execution {vertical-align: top !important;}
+
+.main-table tbody>tr>td {padding: 0 10px 10px;}
+.table .program {writing-mode: vertical-lr; padding-left: 4px !important; color: #fff;}
+td.product {padding-top: 10px !important;}
+td.project, td.execution {padding: 0 0 10px 0 !important;}
+td > div:not(.board) > .board-item:first-child {margin-top: 10px;}
+td > div.board:first-child {margin-top: 5px;}
 
 .board-item {border: 1px solid #ebebeb; padding: 3px 10px; cursor: default; border-radius: 2px; background-color: #fff; text-align: left;}
 .board-item:hover {border-color: #ccc;}
@@ -14,8 +17,10 @@ td.plan, td.release {vertical-align: top !important;}
 .board + .board {margin-top: 5px;}
 .board-item + .board-item {margin-top: 10px;}
 .project .board, .execution .board {padding-top: 5px; border-top: 2px solid #fff;}
-.project .board:first-child, .execution .board:first-child {padding-top: 0; border-top: unset;}
+.project .board:first-child, .execution .board:first-child {padding-top: 5px; border-top: unset;}
 .release .board-item {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
 .emptyBoard {padding: 3px 10px; cursor: default;}
 
 .project .table-row > .table-col:last-child, .execution .table-row > .table-col:last-child {width: 24px; padding-top: 2px;}
+
+.scroll {overflow-x: hidden;; overflow-y: auto;}
diff --git a/module/product/view/kanban.html.php b/module/product/view/kanban.html.php
index c8f65606dc..0baf449beb 100644
--- a/module/product/view/kanban.html.php
+++ b/module/product/view/kanban.html.php
@@ -39,29 +39,38 @@
         <?php foreach($programs as $programID => $programProduct):?>
         <?php $i = 0;?>
         <?php foreach($programProduct as $productID):?>
+        <?php
+        $scroll = '';
+        $doingCounts  = isset($projectProduct[$productID]) ? count($projectProduct[$productID]) : 0;
+        $planCounts   = isset($planList[$productID]) ? count($planList[$productID]) : 0;
+        $releaseCount = isset($releaseList[$productID]) ? count($releaseList[$productID]) : 0;
+        if(($doingCounts < $planCounts or $doingCounts < $releaseCount) and ($planCounts > 5 or $releaseCount > 5)) $scroll = 'scroll';
+        ?>
         <tr>
           <?php if($i == 0):?>
           <td rowspan="<?php echo count($programs[$programID])?>" class="program text-ellipsis" style="background: <?php echo $this->lang->product->kanbanColorList[$colorIndex];?>"><?php echo zget($programList, $programID);?></td>
           <?php endif;?>
-          <td title="<?php echo $productList[$productID]->name;?>">
+          <td class="product">
             <?php if(common::hasPriv('product', 'browse')):?>
-            <?php echo '<span>' . html::a($this->createLink('product', 'browse', "productID=$productID"), $productList[$productID]->name, '', "title={$productList[$productID]->name}") . '</span>';?>
+            <?php echo "<span>" . html::a($this->createLink('product', 'browse', "productID=$productID"), $productList[$productID]->name, '', "title={$productList[$productID]->name}") . '</span>';?>
             <?php else:?>
             <?php echo "<span title={$productList[$productID]->name}>{$productList[$productID]->name}</span>";?>
             <?php endif;?>
           </td>
           <td class="plan">
-            <?php if(isset($planList[$productID])):?>
-            <?php foreach($planList[$productID] as $planID => $plan):?>
-            <div class="board-item text-ellipsis">
-              <?php if(common::hasPriv('productplan', 'view')):?>
-              <?php echo html::a($this->createLink('productplan', 'view', "planID=$planID"), $plan->title, '', "title={$plan->title}");?>
-              <?php else:?>
-              <?php echo "<span title={$plan->title}>{$plan->title}</span>"?>
+            <div class="<?php echo $scroll;?>">
+              <?php if(isset($planList[$productID])):?>
+              <?php foreach($planList[$productID] as $planID => $plan):?>
+              <div class="board-item text-ellipsis">
+                <?php if(common::hasPriv('productplan', 'view')):?>
+                <?php echo html::a($this->createLink('productplan', 'view', "planID=$planID"), $plan->title, '', "title={$plan->title}");?>
+                <?php else:?>
+                <?php echo "<span title={$plan->title}>{$plan->title}</span>"?>
+                <?php endif;?>
+              </div>
+              <?php endforeach;?>
               <?php endif;?>
             </div>
-            <?php endforeach;?>
-            <?php endif;?>
           </td>
           <td class="project">
             <?php if(isset($projectProduct[$productID])):?>
@@ -133,18 +142,20 @@
             <?php endif;?>
           </td>
           <td class="release">
-            <?php if(isset($releaseList[$productID])):?>
-            <?php foreach($releaseList[$productID] as $releaseID => $release):?>
-            <div class="board-item">
-              <?php if(common::hasPriv('release', 'view')):?>
-              <?php echo html::a($this->createLink('release', 'view', "releaseID=$releaseID"), $release->name, '', "title={$release->name} class='text-ellipsis'");?>
-              <?php else:?>
-              <?php echo "<span title={$release->name}>{$release->name}</span>"?>
+            <div class="<?php echo $scroll;?>">
+              <?php if(isset($releaseList[$productID])):?>
+              <?php foreach($releaseList[$productID] as $releaseID => $release):?>
+              <div class="board-item">
+                <?php if(common::hasPriv('release', 'view')):?>
+                <?php echo html::a($this->createLink('release', 'view', "releaseID=$releaseID"), $release->name, '', "title={$release->name} class='text-ellipsis'");?>
+                <?php else:?>
+                <?php echo "<span title={$release->name}>{$release->name}</span>"?>
+                <?php endif;?>
+                <?php if($release->marker) echo "&nbsp;<span><i class='icon icon-flag red'></i></span>";?>
+              </div>
+              <?php endforeach;?>
               <?php endif;?>
-              <?php if($release->marker) echo "&nbsp;<span><i class='icon icon-flag red'></i></span>";?>
             </div>
-            <?php endforeach;?>
-            <?php endif;?>
           </td>
           <?php $i ++;?>
         </tr>
@@ -168,7 +179,14 @@ $(function()
         }
     })
 
-    $('.emptyBoard').parent().height($('.project .board').height());
+    $('.board').height($('.project .board').height());
+
+    $('.table div.scroll').each(function()
+    {
+        var count     = $(this).parent().siblings('td.project').children('.board').length >= 5 ? $(this).parent().siblings('td.project').children('.board').length : 5;
+        var preHeight = $(this).parent().siblings('td.project').children('.board').length >= 5 ? $('.board').outerHeight(true) : $(this).find('.board-item').outerHeight(true);
+        $(this).css('max-height', preHeight * count);
+    })
 })
 </script>
 <?php include '../../common/view/footer.html.php';?>