diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index 10698bcf7..74a82d83d 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;
@@ -435,7 +436,12 @@ td.monthview-primary-with-event {
         font-weight: normal;
       }
       li.active{
-        background-color: rgba(66, 185, 254, 0.1);
+        background-color: var(--mat-selected) !important;
+        color: white;
+      }
+      li:hover:not(.active){
+        background-color: var(--mat-selected-hover);
+
       }
     }
   }
@@ -739,13 +745,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/global.scss b/src/global.scss
index 9b9ecfed5..983721549 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1012,7 +1012,7 @@ background: rgb(92, 92, 92);
 // }
 
 .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    background-color: #42b9fe36 !important;
+    background-color: var(--mat-selected-hover) !important;
 }
 
 .mat-form-field-underline.ng-tns-c193-6.ng-star-inserted, .mat-form-field-underline {
@@ -1282,3 +1282,8 @@ ngx-mat-datetime-content{
 .modal-background {
     background: #0000006b;
 }
+
+
+.mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {
+    background: var(--mat-selected-hover);
+}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 2b4f299cb..b55c558b3 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: rgb(216 240 255);
   --mat-calendar-body-selected: #42b9fe ;
   --monthview-selected: lightskyblue;
   --header-container-background: linear-gradient(