diff --git a/module/program/css/index.css b/module/program/css/index.css
index 495e65be45..42bc88fd60 100644
--- a/module/program/css/index.css
+++ b/module/program/css/index.css
@@ -4,7 +4,7 @@
 #mainMenu .pull-right > .btn-group > .btn-icon:hover {background: #fff;}
 
 #cards {margin: 0 10px;}
-#cards > .col {width: 25%;}
+#cards > .col {width: 20%;}
 #cards .panel {margin: 10px 0; border: 1px solid #DCDCDC; border-radius: 2px; box-shadow: none; height: 146px; cursor: pointer;}
 #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;}
diff --git a/module/program/js/index.js b/module/program/js/index.js
index e4e9b47b34..ef8b6f73f7 100644
--- a/module/program/js/index.js
+++ b/module/program/js/index.js
@@ -34,8 +34,8 @@ $(function()
     })
 
     $('#programTableList').on('sort.sortable', function(e, data)
-    {   
-        var list = ''; 
+    {
+        var list = '';
         for(i = 0; i < data.list.length; i++) list += $(data.list[i].item).attr('data-id') + ',';
         $.post(createLink('project', 'updateOrder'), {'projects' : list, 'orderBy' : orderBy});
     });
diff --git a/module/program/view/index.html.php b/module/program/view/index.html.php
index ae2bb755cd..e534590c23 100644
--- a/module/program/view/index.html.php
+++ b/module/program/view/index.html.php
@@ -45,7 +45,7 @@
   <?php else:?>
   <div class='main-col'>
     <?php if($programType == 'bygrid'):?>
-    <div class='row cell' id='cards'>
+    <div class='row cell auto-fade-in fade' id='cards'>
       <?php foreach ($projectList as $projectID => $project):?>
       <div class='col' data-id='<?php echo $projectID?>'>
         <div class='panel' data-url='<?php echo $this->createLink('project', 'task', "projectID=$project->id");?>'>