diff --git a/marlo-web/src/main/webapp/crp/css/home/dashboard.css b/marlo-web/src/main/webapp/crp/css/home/dashboard.css
index dec06dbae6..8f80b4452b 100644
--- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css
+++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css
@@ -352,11 +352,11 @@ span.timelineControl:hover {
   }
   
   .buttonLeftTimeline {
-    left: 0.75rem;
+    left: 2.5%;
   }
   
   .buttonRightTimeline {
-    right: 0.75rem;
+    right: 2.5%;
   }
   
   .timelineBackSuccess {
@@ -416,11 +416,10 @@ span.timelineControl:hover {
   #timelineContainer {
 	  position: relative;
 	  margin: 18px 30px 18px 30px;
-	  scroll-behavior: smooth;
 	  overflow-x: scroll;
 	  overflow-y: hidden;
 	  height: 36vh;
-	  width: 80vw;
+	  width: 80%;
 	  margin: 0 auto;
 	}
 	
@@ -433,7 +432,7 @@ span.timelineControl:hover {
 		justify-content: space-between;
     padding: 18px 30px 18px 30px;
     width: 100%;
-    align-items: baseline;
+    align-items: end;
 	}
 	
 	#timelineDescription_title{
@@ -453,10 +452,24 @@ span.timelineControl:hover {
 	  margin-bottom: 10px;
 	  padding: 5px 0;
 	  position: absolute;
+	  height: 100%;
 	}
 	
 	#timeline_activities {
 		position: relative;
+		font-size: 14px;
+	}
+	
+	@media only screen and (min-height:975px){
+		#timeline_activities {
+			font-size: 18px;
+		}
+	}
+	
+	@media only screen and (min-height:1170px){
+		#timeline_activities {
+			font-size: 20px;
+		}
 	}
 	
 	#timeline_today {
@@ -464,13 +477,13 @@ span.timelineControl:hover {
 	  top: 0;
 	  left: 0;
 	  width: 2px;
-	  height: 100%;
+	  height: 80%;
 	  background-color: red;
 	  border-radius: 5px;
 	}
 	
 	.timebox {
-	  height: 198px;
+	  height: 80%;
 	  position: relative;
     text-align: center;
     border-right: 1px dashed #CCCCCC;
@@ -513,7 +526,7 @@ span.timelineControl:hover {
 		color: #000;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		font-size: 1.5rem;
+		font-size: 1.4rem;
 		font-style: normal;
 		font-weight: 400;
 		margin: 0;
@@ -539,23 +552,67 @@ span.timelineControl:hover {
 		font-weight: 400;
 		line-height: 0.75rem;
 		margin: 0;
+		color: #000;
 	}
 	
 	.activityCard:nth-child(n+1){
-		top: 48px;
+		top: 3.4em;
 	}
 	
 	.activityCard:nth-child(2n+2){
-		top: 108px;
+		top: 7.8em;
 	}
 	
 	
 	.activityCard:nth-child(3n+3){
-		top: 168px;
+		top: 12.1em;
 
 	}
+	
+	#timelineAlert{
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+    gap: 0.5rem;
+    align-items: end;
+    padding-bottom: 6px;
+	}
+	
+	#timelineAlert_container{
+		display: flex;
+		flex-direction: row;
+		gap: 2rem;
+	}
+	
+	.timelineAlert_item{
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+	
+	.timelineAlert_item p{
+		font-size: 10px;
+	}
+	
+	.timelineAlert_item_color{
+		width: 10px;
+		height: 10px;
+		border-radius: 12.5px;
+		background-color: #0377a3;
+	}
 
-
+	.timelineAlert_item_color--1{
+		background-color: #F9C786;
+	}
+	
+	.timelineAlert_item_color--2{
+		background-color: #81B8C1;
+	}
+	
+	.timelineAlert_item_color--3{
+		background-color: #B5D08B;
+	}
   /*************** sectionMap ********************/
 
   .sectionMap{
diff --git a/marlo-web/src/main/webapp/crp/js/home/dashboard.js b/marlo-web/src/main/webapp/crp/js/home/dashboard.js
index 4ae16732d1..96d75c4be0 100644
--- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js
+++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js
@@ -152,18 +152,22 @@ function locateContentDialog(id){
 
 function moveScrollRight() {
   const element = document.getElementById("timelineContainer");
-    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-	const containerSize = vw * 0.8;
+  
+  const widthContainer = $('.sectionMap').width();
+	const containerSize = widthContainer * 0.8;
 	
-  element.scrollLeft += containerSize;
+	element.style.scrollBehavior = "smooth"
+  element.scrollLeft += (containerSize+(containerSize* (2/5)));
 }
 
 function moveScrollLeft() {
   const element = document.getElementById("timelineContainer");
-  const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-	const containerSize = vw * 0.8;
+  
+	const widthContainer = $('.sectionMap').width();
+	const containerSize = widthContainer * 0.8;
 	
-  element.scrollLeft -= containerSize;
+	element.style.scrollBehavior = "smooth"
+  element.scrollLeft -= (containerSize+(containerSize* (2/5)));
 }
 
 const convertDateToAfricanDate = (date) => {
@@ -230,12 +234,12 @@ function createDivActivities(activity, id){
 			    <div class="activityCard_details">
 			    		<div>
 			    			<img src=${baseURL +"/global/images/start_date.png"} alt="start_icon" />
-			    			<p><b>Start date:</b> ${activity.startDate}</p>
+			    			<p><b>Start date:</b> ${convertDateToText(activity.startDate,true)}</p>
 			    		</div>
 			    		<p><b>Status:</b> ${status} </p>
 			    		<div>
 			    			<img src=${baseURL +"/global/images/end_date.png"} alt="end_icon" />
-			    			<p><b>End date:</b> ${activity.endDate}</p>
+			    			<p><b>End date:</b> ${convertDateToText(activity.endDate,true)}</p>
 			    		</div>
 			    </div>
 				</div>
@@ -273,8 +277,9 @@ const setStatusColor = (status) => {
 }
 
 function setWidth(amount) {
-
-	return `calc(${amount !==undefined? (amount === 0? 3: amount)+"*(80vw / 7))": "calc(80vw / 7)"}`;
+	const widthContainer = $('.sectionMap').width();
+	const widthInPx = `${widthContainer * 0.8}px`;
+	return `calc(${amount !==undefined? (amount === 0? 3: amount)+"*("+widthInPx+" / 5) - 10px)": "calc("+widthInPx+" / 5)"}`;
 }
 
 function setDistances(startDate,isToday, isJS,endDate) {
@@ -287,25 +292,27 @@ function setDistances(startDate,isToday, isJS,endDate) {
 	const currentHour = today.getHours();
 	const percentageCompletion = (currentHour / 24);
   
-  const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-	let containerSize = vw * 0.8;
+  
+	const widthContainer = $('.sectionMap').width();
+	const widthInPx = `${widthContainer * 0.8}px`;
+	const containerSize = widthContainer*0.8;
 	
 	const isFinalActivity = new Date(lastDate).getTime() === new Date(endDate).getTime();
   
   if(isJS){
 		
 		if(isToday){
-			return (getAbsoluteDays(firstDate,today,1) * ((containerSize/7) + ((containerSize/7)*percentageCompletion)) )
+			return (getAbsoluteDays(firstDate,today,1) * ((containerSize/5) + ((containerSize/5)*percentageCompletion)) )
 		}
 		
-		return ((isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate) ) * (containerSize/7))
+		return ((isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate) ) * (containerSize/5))
 		
 	} else {
 		
 		if(isToday){
-			return `calc(${getAbsoluteDays(firstDate, today,1)} * (80vw / 7) + ((80vw / 7)* ${percentageCompletion}) )`;
+			return `calc(${getAbsoluteDays(firstDate, today,1)} * (${widthInPx} / 5) + ((${widthInPx} / 5)* ${percentageCompletion}) )`;
 		} 
-  	return `calc((${isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate)}) * (80vw / 7))`;
+  	return `calc((${isFinalActivity? getAbsoluteDays(firstDate,startDate)-2:getAbsoluteDays(firstDate,startDate)}) * (${widthInPx} / 5))`;
 	}
 }
 
@@ -332,6 +339,23 @@ function createTimeline2() {
 	  	<div id="timelineDescription_title">
 	  		<b>Schedule</b>
 	  	</div>
+	  	<div id="timelineAlert">
+	    	<b>Progress status:</b>
+	    	<section id="timelineAlert_container">
+	    		<article class="timelineAlert_item">
+	    			<div class="timelineAlert_item_color timelineAlert_item_color--1"></div>
+	    			<p>Not started</p>
+	    		</article>
+	    		<article class="timelineAlert_item">
+	    			<div class="timelineAlert_item_color timelineAlert_item_color--2"></div>
+	    			<p>In progress</p>
+	    		</article>
+	    		<article class="timelineAlert_item">
+	    			<div class="timelineAlert_item_color timelineAlert_item_color--3"></div>
+	    			<p>Completed</p>
+	    		</article>
+	    	</section>
+    	</div>
 	  </div>
     <div id="timelineContainer">
       <div id="timeline_times">