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 0df6b0aab7..eb869a53a0 100644
--- a/marlo-web/src/main/webapp/crp/css/home/dashboard.css
+++ b/marlo-web/src/main/webapp/crp/css/home/dashboard.css
@@ -342,7 +342,7 @@ span.timelineControl:hover {
     height: 40px;
     border-radius: 50%;
     position: absolute;
-    top: 50%;
+    top: 15%;
     transform: translateY(-50%);
     font-size: 27px;
     font-weight: bold;
@@ -352,11 +352,11 @@ span.timelineControl:hover {
   }
   
   .buttonLeftTimeline {
-    left: 2.5%;
+    left: 39%;
   }
   
   .buttonRightTimeline {
-    right: 2.5%;
+    right: 39%;
   }
   
   .timelineBackSuccess {
@@ -415,11 +415,10 @@ span.timelineControl:hover {
   
   #timelineContainer {
 	  position: relative;
-	  margin: 18px 30px 18px 30px;
 	  overflow-x: scroll;
 	  overflow-y: hidden;
-	  height: 36vh;
-	  width: 80%;
+	  height: 31vh;
+	  width: 95%;
 	  margin: 0 auto;
 	}
 	
@@ -458,16 +457,16 @@ span.timelineControl:hover {
 	
 	#timeline_activities {
 		position: relative;
-		font-size: 14px;
+		font-size: 13.5px;
 	}
 	
 	@media only screen and (min-width:1545px){
 		#timeline_activities {
-			font-size: 20px;
+			font-size: 19.5px;
 		}
 		
 		#timelineContainer{
-			height: 30vh;
+			height: 26vh;
 		}
 	}
 	
@@ -497,7 +496,8 @@ span.timelineControl:hover {
 
   .timebox_information {
     position: absolute;
-    bottom: -24px;    
+    top: -12px;
+    left: 6px;  
   }
 	
 	.timeNumber{
@@ -518,6 +518,7 @@ span.timelineControl:hover {
 		border-radius: 0.75rem;
 		background: #E8F4FF;
 		margin-bottom: 1rem;
+    z-index: 4;
 	}
 	
 	.activityCard_content{
@@ -529,6 +530,7 @@ span.timelineControl:hover {
     padding: 4px 6px;
     position: sticky;
     max-width: max-content;
+    z-index: 8;
 	}
 	
 	.activityCard_description {
@@ -581,46 +583,83 @@ span.timelineControl:hover {
 		margin: 0;
 		color: #000;
 	}
+
+  .activityCard_details--1{
+    display: flex;
+    max-width: max-content;
+    gap: 0.5rem;
+    flex-direction: column;
+    z-index: 4;
+  }
+
+  .activityCard_details--1 div{
+		display: flex;
+    align-items: center;
+    gap: 0 0.5rem;
+    flex-wrap: wrap;
+	}
+
+  .activityCard_viewMore p{
+    font-size: 9px;
+    color: #000;
+    cursor: pointer;
+  }
+
+  .activityCard_details--1 div b{
+    font-size: 1rem;
+    color: #000;
+    line-height: 1.2em;
+  }
+	
+	.activityCard_details--1 p{
+		font-size: 1rem;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 0.75rem;
+		margin: 0;
+		color: #000;
+	}
 	
 	.activityCard:nth-child(n+1){
-		top: 0em;
+		top: 1.5em;
 	}
 	
 	.activityCard:nth-child(2n+2){
-		top: 4.5em;
+		top: 6em;
 	}
 	
 	
 	.activityCard:nth-child(3n+3){
-		top: 8.7em;
+		top: 10.5em;
 
 	}
 
   #timeline_activities .activityFlexTop--1{
-    top: 0em;
+    top: 1.5em;
   }
 
   #timeline_activities .activityFlexTop--2{
-    top: 4.5em;
+    top: 6em;
   }
 
   #timeline_activities .activityFlexTop--3{
-    top: 9em;
+    top: 10.5em;
   }
 
   #timeline_activities .activityUnique{
-    top: 2.1em;
+    top: 2.5em;
   }
 	
 	#timelineAlert{
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
 		justify-content: flex-end;
     gap: 0.5rem;
     align-items: end;
     padding-bottom: 6px;
     position: absolute;
     right: 2.5%;
+    bottom: 2.5%;
 	}
 	
 	#timelineAlert_container{
@@ -632,7 +671,7 @@ span.timelineControl:hover {
 	.timelineAlert_item{
 		display: flex;
 		flex-direction: row;
-		align-items: flex-end;
+		align-items: center;
 		gap: 0.5rem;
 	}
 	
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 29031ace16..d7a9231483 100644
--- a/marlo-web/src/main/webapp/crp/js/home/dashboard.js
+++ b/marlo-web/src/main/webapp/crp/js/home/dashboard.js
@@ -33,10 +33,26 @@ function initDashboard() {
 
   $('.circleMap').hover(itemMapHover, itemMap);
 
+  $(".activityCard_toggle").on("click", function(){
+    let $x = $(this).parents(':has(.activityCard_details--1)').first().find('.activityCard_details--1');
+    console.log($x);
+    if ($x.css("display") === "none") {
+      $x.css("display", "flex");
+      $(this).find('.activityCard_toggle--deactive').css("display", "none");
+      $(this).find('.activityCard_toggle--active').css("display", "block");
+      $(this).closest('.activityCard').css("z-index", 8);
+    } else {
+      $x.css("display", "none");  
+      $(this).find('.activityCard_toggle--deactive').css("display", "block");
+      $(this).find('.activityCard_toggle--active').css("display", "none");
+      $(this).closest('.activityCard').css("z-index");
+    }
+  });
+
   $('.activityCard_container').hover(function(){
     const $info = $(this).find('.activityCard_description');
     $info.tooltip();
-  })	
+  })
 }
 
 function itemMapHover() {
@@ -160,7 +176,7 @@ function moveScrollRight() {
   const element = document.getElementById("timelineContainer");
 
   const widthContainer = $('.sectionMap').width();
-  const containerSize = widthContainer * 0.8;
+  const containerSize = widthContainer * 0.95;
 
   element.style.scrollBehavior = "smooth"
   element.scrollLeft += (containerSize);
@@ -175,7 +191,7 @@ function moveScrollLeft() {
   const element = document.getElementById("timelineContainer");
 
   const widthContainer = $('.sectionMap').width();
-  const containerSize = widthContainer * 0.8;
+  const containerSize = widthContainer * 0.95;
 
   element.style.scrollBehavior = "smooth"
   element.scrollLeft -= (containerSize);
@@ -274,7 +290,6 @@ function getIntersectedActivities() {
       $(activity).parent().removeClass("activityFlexTop--2");
       $(activity).parent().removeClass("activityFlexTop--3");
     });
-    console.log(activitiesIntersected)
     activitiesIntersected.sort((a, b) => {
       const rectA = a.getBoundingClientRect();
       const rectB = b.getBoundingClientRect();
@@ -309,7 +324,7 @@ function getIntersectedActivities() {
         break;
       case 2:
         if(document.documentElement.getBoundingClientRect().width > 1500){
-          timelineContainer.style.height = "22vh";
+          timelineContainer.style.height = "24.5vh";
         } else {
           timelineContainer.style.height = "30vh";
         }
@@ -323,9 +338,9 @@ function getIntersectedActivities() {
       case 6:
       case 7:
         if(document.documentElement.getBoundingClientRect().width > 1500){
-          timelineContainer.style.height = "30vh";
+          timelineContainer.style.height = "31vh";
         } else {
-          timelineContainer.style.height = "36vh";
+          timelineContainer.style.height = "37vh";
         }
         list_activities.forEach(activity => {
           $(activity).parent().removeClass("activityUnique");
@@ -379,34 +394,37 @@ function createDivActivities(activity, weeks, id) {
   const card = document.createElement('div');
   card.className = 'activityCard';
   card.id = `activityCard_${id}`;
+  const width = calculateAmountForWidth(activity.startDate, activity.endDate, weeks);
   card.innerHTML = `
-			<div class="activityCard_container" 
-			style="left: ${setDistances(weeks,activity.startDate, activity.endDate,false )}; 
-			width: ${setWidth(calculateAmountForWidth(activity.startDate, activity.endDate, weeks))}; 
-			background: ${setStatusColor(status)}
-			" >
-			
-				<div class="activityCard_content"> 
-					<h3 class="user-badge activityCard_description" title="${activity.description}">${activity.description}</h3>
-			    <div class="activityCard_details">
-			    		<div>
-			    			<img src=${baseURL + "/global/images/start_date.png"} alt="start_icon" />
-			    			<p><b>Start date:</b> ${convertDateToText(activity.startDate)}</p>
-			    		</div>
-              <div>
-                <b>Status:</b>
-                <p> ${status} </p>
-              </div>
-			    		
-			    		<div>
-			    			<img src=${baseURL + "/global/images/end_date.png"} alt="end_icon" />
-			    			<p><b>End date:</b> ${convertDateToText(activity.endDate)}</p>
-			    		</div>
-			    </div>
-				</div>
-			</div>
+    <div class="activityCard_container" 
+    style="left: ${setDistances(weeks,activity.startDate, activity.endDate,false )}; 
+    width: ${setWidth(width)}; 
+    background: ${setStatusColor(status)}
+    " >
+    
+      <div class="activityCard_content"> 
+        <h3 class="user-badge activityCard_description" title="${activity.description}">${activity.description}</h3>
+        <div class="${width === (1/7)?"activityCard_details--1":"activityCard_details"}" id="activityCardDetails" style="${width === (1/7)? "display: none;": ""}">
+          <div>
+            <p><b>Start date:</b> ${convertDateToText(activity.startDate)}</p>
+          </div>
+          <div>
+            <b>Status:</b>
+            <p> ${status} </p>
+          </div>
+          
+          <div>
+            <p><b>End date:</b> ${convertDateToText(activity.endDate)}</p>
+          </div>
+        </div>
+        <div class="activityCard_viewMore" style="display:${width === (1/7)? "block;": "none"}">
+          <p class="activityCard_toggle">
+            <u class="activityCard_toggle--deactive">View more</u>
+            <u class="activityCard_toggle--active" style="display:none">View less</u>
+          </p>
+      </div>
+    </div>
   `;
-
   return card;
 }
 
@@ -454,9 +472,9 @@ function calculateAmountForWidth(startDate, endDate, weeks) {
 
 function setWidth(amount) {
 
-  const extraAmount = amount < 0.3 ? 2.9/7 : amount > 1.5 ? -1.5/7 : 0;
+  const extraAmount = amount > 1.5 ? -1/7 : 0;
   const widthContainer = $('.sectionMap').width();
-  const widthInPx = `${widthContainer * 0.8}px`;
+  const widthInPx = `${widthContainer * 0.95}px`;
   return `calc(${amount !== undefined ? (amount + extraAmount) + "*(" + widthInPx + " / 2)" : "calc(" + widthInPx + " / 2)"} )  `;
 }
 function setDistances(weeks, startDate, endDate, isToday) {
@@ -470,7 +488,7 @@ function setDistances(weeks, startDate, endDate, isToday) {
   const percentageCompletion = ((currentHour / 24)/7)/2;
 
   const widthContainer = $('.sectionMap').width();
-  const containerSize = widthContainer * 0.8;
+  const containerSize = widthContainer * 0.95;
 
   const getWeekDistance = getWeekBasedOnDay(startDate, weeks);
   const getDayDistance = (getAbsoluteDays(startDate, getFirstDateOfTheWeek(startDate))) / 7;
@@ -492,7 +510,7 @@ function setTimelinePosition() {
   const timelineContainer = document.getElementById("timelineContainer");
 
   const widthContainer = $('.sectionMap').width();
-  const containerSize = widthContainer * 0.8;
+  const containerSize = widthContainer * 0.95;
 
   timelineContainer.scrollLeft += ((getWeekBasedOnDay(today, getWeeksArray)/2) * (containerSize));
 
@@ -513,23 +531,6 @@ 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">
@@ -542,6 +543,23 @@ function createTimeline2() {
       </div>
       <div id="timeline_today" style="left: ${setDistances(getWeeksArray,null,null, true)}"></div>
     </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>
 	`
 }