diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
index 527ea561c..ca6cd2900 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
@@ -104,7 +104,7 @@ const CalendarDataView = ({ data, t }: { data?: GroupedTimesheet[], t: Translati
                                                 <div className="flex  px-3 justify-between items-center w-full">
                                                     <div className="flex items-center gap-x-1">
                                                         <EmployeeAvatar
-                                                            imageUrl={task.employee.user.imageUrl!}
+                                                            imageUrl={task.employee.user.imageUrl ?? ''}
                                                         />
                                                         <span className=" font-normal text-[#3D5A80] dark:text-[#7aa2d8]">{task.employee.fullName}</span>
                                                     </div>
@@ -125,7 +125,9 @@ const CalendarDataView = ({ data, t }: { data?: GroupedTimesheet[], t: Translati
                                                     dash
                                                     taskNumberClassName="text-sm"
                                                 />
-                                                <span className="flex-1">{task.project && task.project.name}</span>
+                                                <div>
+                                                    <span className="flex-1">{task.project && task.project.name}</span>
+                                                </div>
                                             </div>
                                         ))}
                                     </AccordionContent>
@@ -134,7 +136,6 @@ const CalendarDataView = ({ data, t }: { data?: GroupedTimesheet[], t: Translati
                         </Accordion>
                     </div>
                 }
-
                 )}
             </div>
 
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx
index 764a1e50e..03f80d818 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx
@@ -7,26 +7,7 @@ export const EmployeeAvatar = ({ imageUrl }: { imageUrl: string }) => {
         <div className="relative w-6 h-6">
             {isLoading && (
                 <div className="absolute inset-0 flex items-center justify-center bg-gray-200 rounded-full">
-                    <svg
-                        className="w-4 h-4 animate-spin text-gray-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                    >
-                        <circle
-                            className="opacity-25"
-                            cx="12"
-                            cy="12"
-                            r="10"
-                            stroke="currentColor"
-                            strokeWidth="4"
-                        ></circle>
-                        <path
-                            className="opacity-75"
-                            fill="currentColor"
-                            d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
-                        ></path>
-                    </svg>
+                    <LoadingSpinner className="w-4 h-4" />
                 </div>
             )}
             <img
@@ -39,3 +20,27 @@ export const EmployeeAvatar = ({ imageUrl }: { imageUrl: string }) => {
         </div>
     );
 };
+
+
+const LoadingSpinner = ({ className }: { className?: string }) => (
+    <svg
+        className={`animate-spin text-gray-500 ${className}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+        ></circle>
+        <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+        ></path>
+    </svg>
+);