diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index 31224cbb7..0a183f907 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -393,6 +393,7 @@ td.monthview-primary-with-event {
 
 
 .currente-date-timelien{
+  cursor: pointer;
   padding: 10px 20px;
   .timeline-date{
     font-size: 15px;
@@ -436,6 +437,7 @@ td.monthview-primary-with-event {
       }
       li.active{
         background-color: var(--mat-selected);
+        color: white;
       }
     }
   }
@@ -739,13 +741,13 @@ app-approve-event{
   }
   
   li.active {
-    background-color: #42b9fe !important;
+    background-color: var(--mat-selected) !important;
     color: white;
   }
 
   li:hover{
     cursor: pointer;
-    background-color: #e6f6ff75 ;
+    background-color: var(--mat-selected-hover) ;
   }
 }
 
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 2b4f299cb..08561a8b5 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -721,6 +721,7 @@ body {
   --font-awesome: #ffb81c;
   --font-awesome-1: #c63527;
   --mat-selected: #c63527;
+  --mat-selected-hover: #c634277e;
   --mat-calendar-body-selected: #c63527;
   --monthview-selected: rgb(198 53 39 / 49%);
 
@@ -788,6 +789,7 @@ body {
   --header-tab-top-border: white;
   --header-tab-text-white: white;
   --mat-selected: #87cefa;
+  --mat-selected-hover: #c63527;
   --mat-calendar-body-selected: #42b9fe ;
   --monthview-selected: lightskyblue;
   --header-container-background: linear-gradient(