diff --git a/addons/hr_homeworking/static/src/calendar/common/calendar_common_renderer.js b/addons/hr_homeworking/static/src/calendar/common/calendar_common_renderer.js
index fdef67f320b..7c4c4f66558 100644
--- a/addons/hr_homeworking/static/src/calendar/common/calendar_common_renderer.js
+++ b/addons/hr_homeworking/static/src/calendar/common/calendar_common_renderer.js
@@ -93,8 +93,8 @@ patch(AttendeeCalendarCommonRenderer.prototype, {
     onDayRender(info){
         const parsedDate = DateTime.fromJSDate(info.date).toISODate();
         if (this.props.model.scale === 'week' || this.props.model.scale === 'day'){
-            const button = info.view.context.calendar.el.querySelector(`.fc-day-header[data-date='${parsedDate}'] .o_month`)
-            const line = info.view.context.calendar.el.querySelector(`.fc-day-header[data-date='${parsedDate}'] .line`)
+            const button = info.view.context.calendar.el.querySelector(`.fc-day-header[data-date='${parsedDate}'] o_worklocation_text`)
+            const line = info.view.context.calendar.el.querySelector(`.fc-day-header[data-date='${parsedDate}'] .o_worklocation_line`)
             if (!button || !line)
                 return;
             info.homework = true;
@@ -180,7 +180,7 @@ patch(AttendeeCalendarCommonRenderer.prototype, {
         }
     },
     onDateClick(info){
-        if (info.jsEvent && info.jsEvent.target.closest(".btnWorklocation")) {
+        if (info.jsEvent && info.jsEvent.target.closest(".o_worklocation_btn")) {
             info.homework = true
             this.props.createRecord(this.fcEventToRecord(info));
         } else {
diff --git a/addons/hr_homeworking/static/src/calendar/common/calendar_common_renderer.scss b/addons/hr_homeworking/static/src/calendar/common/calendar_common_renderer.scss
index e764d799b24..c3e78ad3657 100644
--- a/addons/hr_homeworking/static/src/calendar/common/calendar_common_renderer.scss
+++ b/addons/hr_homeworking/static/src/calendar/common/calendar_common_renderer.scss
@@ -1,29 +1,17 @@
-.btnWorklocation{
-    display:flex ;
-    align-items: center;
-    opacity: 0;
-    &:hover {
-      opacity: 100;
+.o_worklocation_btn {
+    margin: 2px;
+
+    .o_worklocation_text, .o_worklocation_line {
+        box-shadow: 0 1px 0 rgba(0,0,0, 0.3)
     }
-    .o_month{
-      box-shadow: 0.1em 0.1em 0.1em rgb(131, 126, 126);
-      border-radius: 100px;
-      font-size: 0.75em;
-      width: 50%;
-      border-color: transparent;
-    }
-    
-    .line{
-      box-shadow: 0.1em 0.1em 0.1em rgb(131, 126, 126);
-      border: none;
-      border-color: transparent;
-      height: 0.3px;
-      width:100%;
+
+    .o_worklocation_text {
+        font-size: $o-font-size-base-smaller;
     }
 }
 
-.fc-event {
-    box-shadow: none !important;
+.o_worklocation_line {
+    height: 3px;
 }
 
 .fc-event.o_homework_event {
@@ -31,59 +19,59 @@
     border-color: transparent;
     box-shadow: none;
     cursor: pointer;
-    .o_homework_single {
-        display:flex;
-        align-items: center;
-        width: 100%;
-        .fc-content {
-            margin: 0 !important;
-            padding: 3px 6px 3px 6px;
-            border-radius: 100px;
-            width: auto;
-            overflow: visible;
-            opacity: 1;
-            font-weight: 600;
-        }
-        .line{
-            height: 0.3em;
-            width: 100%;
-          }
-    }
 
-    .o_homework_multi {
-        display: flex;
-        .fc-content .fa-2x {
-            display: flex;
-            align-content: center;
-            flex-wrap: wrap;
-            justify-content: center;
-            height: 20px;
-            width: 20px;
-            border-radius: 100%;
-            font-size: 1.2em;
-            &.fa-building {
-                font-size: 1.0em;
-            }
+    .o_homework_multi .o_homeworking_content .fa {
+        height: var(--o-homework-icon-size, 20px);
+        aspect-ratio: 1;
+        font-size: var(--o-homework-icon-size, 1.2rem);
+
+        &.fa-building:before {
+            transform: scale(.8);
         }
     }
 }
 
-@for $i from 1 through length($o-colors-complete) {
-    $color: nth($o-colors-complete, $i);
-    .o_popover{
-        .wl_color_#{$i - 1} {
-            color: $color;
+// ----- View specific
+.fc-timeGridDay-view {
+    .o_worklocation_btn .o_worklocation_line{
+        display: none;
+    }
+}
+
+@include media-breakpoint-down(md) {
+
+
+    .fc-timeGridWeek-view .o_homework_multi {
+        --o-homework-icon-size: 1rem;
+
+        > span {
+            display: none !important;
         }
     }
+
+    .fc-dayGridMonth-view .o_homework_multi {
+        --o-homework-icon-size: .75rem;
+
+        > span {
+            display: none !important;
+        }
+    }
+}
+
+@for $-i from 1 through length($o-colors-complete) {
+    $-color: nth($o-colors-complete, $-i);
+    $-color-subtle: tint-color($-color, 65%);
+
     .o_homework_multi {
-        .wl_color_#{$i - 1} {
-            color: $color;
-            background-color: scale-color($color, $lightness: 85%);
+        .wl_color_#{$-i - 1} {
+            color: shade-color($-color, 10%);
+            background-color: $-color-subtle;
+            border-color:  $-color-subtle !important;
         }
     }
     .o_homework_single {
-        .wl_color_#{$i - 1} {
-            background-color: scale-color($color, $lightness: 50%);
+        .wl_color_#{$-i - 1} {
+            background-color: $-color-subtle;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/addons/hr_homeworking/static/src/calendar/common/calender_common_renderer.xml b/addons/hr_homeworking/static/src/calendar/common/calender_common_renderer.xml
index 40517b6a681..ac6121c9e19 100644
--- a/addons/hr_homeworking/static/src/calendar/common/calender_common_renderer.xml
+++ b/addons/hr_homeworking/static/src/calendar/common/calender_common_renderer.xml
@@ -3,30 +3,30 @@
 <templates>
     <t t-name="hr.homeworking.CalendarCommonRenderer.worklocation">
         <t t-if="multiCalendar">
-            <div class="o_homework_multi">
+            <div class="o_homework_multi d-flex align-items-center gap-1">
                 <t t-foreach="records" t-as="record" t-key="record.id">
-                    <div class="fc-content">
-                        <i class="o_homework_content me-0" t-att-class="`fa ${iconStr} fa-2x wl_color_${record.colorIndex}`" t-att-data-id="record.id"/>
+                    <div class="o_homeworking_content">
+                        <i class="o_homework_content d-flex align-items-center justify-content-center flex-wrap border border-1 rounded-circle me-0" t-att-class="`fa ${iconStr} wl_color_${record.colorIndex}`" t-att-data-id="record.id"/>
                     </div>
                 </t>
-                <span class="d-flex align-items-center fw-bolder" t-esc="records[0].title"/>
+                <span class="fw-bolder" t-esc="records[0].title"/>
             </div>
         </t>
         <t t-else="">
-            <div class="o_homework_single">
-                <div class="fc-content text-nowrap" t-att-class="`wl_color_${colorIndex}`">
+            <div class="o_homework_single d-flex align-items-center w-100">
+                <div class="o_homeworking_content overflow-visible opacity-100 rounded-pill m-0 px-2 text-nowrap" t-att-class="`wl_color_${colorIndex}`">
                     <t t-if="icon === 'office'">
-                        <div class="fa fa-building me-1"/>
+                        <div class="fa fa-building me-lg-1"/>
                     </t>
                     <t t-elif="icon === 'home'">
-                        <div class="fa fa-home me-1"/>
+                        <div class="fa fa-home me-lg-1"/>
                     </t>
                     <t t-else="">
-                        <div class="fa fa-map-marker me-1"/>
+                        <div class="fa fa-map-marker me-lg-1"/>
                     </t>
-                    <t class="fw-bolder" t-esc="title"/>
+                    <span class="d-none d-lg-inline fw-bold" t-esc="title"/>
                 </div>
-                <span class="line" t-att-class="`wl_color_${colorIndex}`"/>
+                <span class="o_worklocation_line w-100" t-att-class="`wl_color_${colorIndex}`"/>
             </div>
         </t>
     </t>
@@ -38,12 +38,12 @@
     </t>
 
     <t t-name="hr.homeworking.CalendarCommonRenderer.buttonWorklocation">
-        <div class="btnWorklocation w-100">
-            <button class='rounded-pill o_month text-nowrap bg-info-light'>
-                <i class="fa fa-map-marker" aria-hidden="true"></i>
-                Add Location
+        <div class="o_worklocation_btn d-flex align-items-center opacity-0 opacity-100-hover">
+            <button class='o_worklocation_text bg-info bg-opacity-25 border-0 rounded-pill px-lg-2 py-0 text-nowrap'>
+                <i class="fa fa-map-marker me-lg-1" aria-hidden="true"></i>
+                <span class="d-none d-lg-inline fw-bold">Add Location</span>
             </button>
-            <button class="line bg-info-light"/>
+            <button class="o_worklocation_line d-none d-lg-block w-100 bg-info bg-opacity-25 border-0 p-0"/>
         </div>
     </t>
-</templates>
\ No newline at end of file
+</templates>