diff --git a/addons/hr_holidays/static/src/scss/time_off.scss b/addons/hr_holidays/static/src/scss/time_off.scss
index b32aae50df8..eb726b9d0eb 100644
--- a/addons/hr_holidays/static/src/scss/time_off.scss
+++ b/addons/hr_holidays/static/src/scss/time_off.scss
@@ -1,4 +1,22 @@
 .o_content {
+    .o_timeoff_container {
+        height: 10%;
+    }
+
+    .o_calendar_container {
+      height: 89.5%;
+    }
+
+    @include media-breakpoint-down(sm) {
+        .o_timeoff_container {
+             height: 15%;
+        }
+
+        .o_calendar_container {
+          height: 85%;
+        }
+    }
+
     .o_timeoff_card {
         border-right: #adb5bd solid 2px;
         text-align: center;
@@ -13,7 +31,7 @@
     }
 
     .o_timeoff_big {
-        font-size: 50px;
+        font-size: 20px;
     }
 
     .o_timeoff_purple {