diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index a0efae380..96d2163b7 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -99,12 +99,14 @@
       
               <!-- Adding a customized ng-template -->
               <ng-template #template let-view="view" let-row="row" let-col="col">
-                <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
-                   
-                  <div class="day">
-                    {{ view.dates[row*7+col].label }}
-                  </div>  
-                   
+                <div class="day-container">
+                  <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
+                  
+                    <div class="day">
+                      {{ view.dates[row*7+col].label }}
+                    </div>  
+                     
+                  </div>
                 </div>
               </ng-template>
             </div>
diff --git a/src/global.scss b/src/global.scss
index b88a41c69..a8c92260c 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -579,18 +579,23 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 .calendar-component {
     td {
-        padding: 7.5px !important;
+        padding: 8.1px !important;
         div {
             padding-left: 0px;
         }
+        display: flex;
+        align-content: center;
+        justify-content: center;
 
     }
-
-    td div:not(.day) {
-        background-color: red;
+    td div:not(.day, .day-container) {
         width: 30px !important;
         height: 30px;
     }
+    tr {
+        display: flex;
+        justify-content: space-around;
+    }
 }