diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css
index 36a77d6..0a0c2fc 100644
--- a/blocks/gmo-program-details/gmo-program-details.css
+++ b/blocks/gmo-program-details/gmo-program-details.css
@@ -454,6 +454,7 @@ body {
                 max-width: 100%; /* Adjusts the width to leave space for the group count */
                 display: inline-block; /* Ensures the element respects the max-width */
                 vertical-align: middle; /* Aligns it properly with other inline elements */
+                min-width: 52px; /* Ensure at least 5 characters show */
             }
             & .group-count {
                 position: absolute;
@@ -596,8 +597,8 @@ body {
                     background-color: #9D64E1;
                 }
             }
-            &#group5 {
-                background-color: #168a4a;
+            &.color5 {
+                background-color: #95dfb696;
                 border: 1px solid #24a25d;
                 & .group-header {
                     background-color: #137941;
diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js
index 36c5f29..f575122 100644
--- a/blocks/gmo-program-details/gmo-program-details.js
+++ b/blocks/gmo-program-details/gmo-program-details.js
@@ -929,8 +929,7 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
         });
 
         contentWrapper.appendChild(groupEl);
-        groupIndex +=1;
-
+        groupIndex = (groupIndex === 5) ? 1 : groupIndex + 1;
     };
 
     calendarEl.appendChild(contentWrapper);