diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.html b/src/app/modules/shared/components/details-fields/details-fields.component.html
index 5a04f4b87..a876cb26a 100644
--- a/src/app/modules/shared/components/details-fields/details-fields.component.html
+++ b/src/app/modules/shared/components/details-fields/details-fields.component.html
@@ -99,8 +99,8 @@
             [format]="24"
             formControlName="start_hour"
             id="start_hour"
-            [disabled]="!(project_name.value && project_id.value)"
             class="timepicker-input"
+            [class.timepicker-input--disabled]="!(project_id.value && project_name.value)"
           ></ngx-timepicker-field>
         </div>
       </div>
@@ -126,8 +126,8 @@
             [format]="24"
             formControlName="end_hour"
             id="end_hour"
-            [disabled]="!(project_name.value && project_id.value)"
             class="timepicker-input"
+            [class.timepicker-input--disabled]="!(project_id.value && project_name.value)"
             ></ngx-timepicker-field>
         </div>
       </div>
diff --git a/src/app/modules/shared/components/details-fields/details-fields.component.scss b/src/app/modules/shared/components/details-fields/details-fields.component.scss
index 88b00d6e7..25dd0337a 100644
--- a/src/app/modules/shared/components/details-fields/details-fields.component.scss
+++ b/src/app/modules/shared/components/details-fields/details-fields.component.scss
@@ -103,3 +103,8 @@ input[type="date"]::-webkit-clear-button {
   border-radius: 0.25rem;
 }
 
+.timepicker-input--disabled ::ng-deep div{
+  pointer-events: none;
+  background-color: #e9ecef;
+  opacity: 1;
+}