diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/milestone/MilestoneResponse.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/milestone/MilestoneResponse.java
index dd0b780a..4215bf8d 100644
--- a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/milestone/MilestoneResponse.java
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/milestone/MilestoneResponse.java
@@ -6,11 +6,8 @@
 
 public record MilestoneResponse (
         UUID id,
-
         String name,
-
         String description,
-
         LocalDate date
 ) {
     public static MilestoneResponse from(ProjectMilestone milestone) {
diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/AssignmentsByEmployeeResponse.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/AssignmentsByEmployeeResponse.java
new file mode 100644
index 00000000..180facc0
--- /dev/null
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/AssignmentsByEmployeeResponse.java
@@ -0,0 +1,27 @@
+package pl.edu.agh.project_manager.controller.dto.project;
+
+import pl.edu.agh.project_manager.domain.entity.project.ProjectAssignment;
+import pl.edu.agh.project_manager.domain.entity.user.User;
+
+import java.util.List;
+import java.util.UUID;
+
+public record AssignmentsByEmployeeResponse(
+        UUID userId,
+        String name,
+        String surname,
+        String email,
+        List<ProjectAssignmentResponse> assignments
+) {
+    public static AssignmentsByEmployeeResponse from(User user, List<ProjectAssignment> userAssignments) {
+        return new AssignmentsByEmployeeResponse(
+                user.getId(),
+                user.getName(),
+                user.getSurname(),
+                user.getEmail(),
+                userAssignments.stream()
+                        .map(ProjectAssignmentResponse::from)
+                        .toList()
+        );
+    }
+}
diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/ProjectAssignmentResponse.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/ProjectAssignmentResponse.java
new file mode 100644
index 00000000..2a9723e4
--- /dev/null
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/ProjectAssignmentResponse.java
@@ -0,0 +1,26 @@
+package pl.edu.agh.project_manager.controller.dto.project;
+
+import pl.edu.agh.project_manager.domain.entity.project.ProjectAssignment;
+
+import java.time.LocalDate;
+import java.util.UUID;
+
+public record ProjectAssignmentResponse(
+        UUID id,
+        LocalDate startDate,
+        LocalDate endDate,
+        AssignmentStatusResponse status,
+        String roleName,
+        int utilizationPercentage
+) {
+    public static ProjectAssignmentResponse from(ProjectAssignment assignment) {
+        return new ProjectAssignmentResponse(
+                assignment.getId(),
+                assignment.getStartDate(),
+                assignment.getEndDate(),
+                AssignmentStatusResponse.from(assignment.getStatus()),
+                assignment.getRoleName(),
+                assignment.getUtilizationPercentage()
+        );
+    }
+}
diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/ProjectTimelineResponse.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/ProjectTimelineResponse.java
new file mode 100644
index 00000000..5a3358e3
--- /dev/null
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/dto/project/ProjectTimelineResponse.java
@@ -0,0 +1,11 @@
+package pl.edu.agh.project_manager.controller.dto.project;
+
+import pl.edu.agh.project_manager.controller.dto.milestone.MilestoneResponse;
+
+import java.util.List;
+
+public record ProjectTimelineResponse(
+        List<MilestoneResponse> milestones,
+        List<AssignmentsByEmployeeResponse> assignments
+) {
+}
diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/project/ProjectController.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/project/ProjectController.java
index 09cd69bf..1198774e 100644
--- a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/project/ProjectController.java
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/controller/project/ProjectController.java
@@ -70,6 +70,15 @@ public ResponseEntity<ProjectMembersResponse> getProjectMembers(
         ProjectMembersResponse project = projectService.getProjectMembers(projectId);
         return ResponseEntity.ok(project);
     }
+
+    @GetMapping("/{projectId}/timeline")
+    @PreAuthorize("hasAnyRole('ADMINISTRATOR', 'AUTHORITY') or @projectAccess.canAccessProject(#projectId, authentication.principal)")
+    public ResponseEntity<ProjectTimelineResponse> getTimelineData(
+            @PathVariable UUID projectId
+    ) {
+        ProjectTimelineResponse response = projectService.getTimelineData(projectId);
+        return ResponseEntity.ok(response);
+    }
 }
 
 
diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/repository/project/ProjectAssignmentRepository.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/repository/project/ProjectAssignmentRepository.java
index 675085cd..74eba985 100644
--- a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/repository/project/ProjectAssignmentRepository.java
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/repository/project/ProjectAssignmentRepository.java
@@ -21,4 +21,11 @@ public interface ProjectAssignmentRepository extends JpaRepository<ProjectAssign
             "JOIN pa.user u " +
             "WHERE pa.id = :assignmentId AND u.supervisor.id = :managerId")
     boolean isManagerForAssignment(@Param("assignmentId") UUID assignmentId, @Param("managerId") UUID managerId);
+
+    @Query("SELECT pa FROM ProjectAssignment pa " +
+            "JOIN FETCH pa.user u " +
+            "WHERE pa.project.id = :projectId " +
+            "AND pa.status IN ('PENDING', 'ACCEPTED') " +
+            "ORDER BY pa.createdAt ASC")
+    List<ProjectAssignment> findActiveAndPendingByProjectIdOrderByCreatedAtAsc(@Param("projectId") UUID projectId);
 }
diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/repository/project/ProjectRepository.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/repository/project/ProjectRepository.java
index 0ad30300..c94d8180 100644
--- a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/repository/project/ProjectRepository.java
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/repository/project/ProjectRepository.java
@@ -45,4 +45,7 @@ public interface ProjectRepository extends JpaRepository<Project, UUID> {
 
     @EntityGraph(attributePaths = {"projectManager", "projectGroup"})
     List<Project> findAll(Specification<Project> spec);
+
+    @EntityGraph(attributePaths = {"milestones"})
+    Optional<Project> findWithMilestonesById(UUID id);
 }
diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/service/project/ProjectAssignmentService.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/service/project/ProjectAssignmentService.java
index 1ae6a2e8..2091eeeb 100644
--- a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/service/project/ProjectAssignmentService.java
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/service/project/ProjectAssignmentService.java
@@ -5,6 +5,8 @@
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import pl.edu.agh.project_manager.controller.dto.project.AssignmentResponse;
+import pl.edu.agh.project_manager.controller.dto.project.AssignmentsByEmployeeResponse;
+import pl.edu.agh.project_manager.controller.dto.project.ProjectAssignmentResponse;
 import pl.edu.agh.project_manager.domain.entity.project.Project;
 import pl.edu.agh.project_manager.domain.entity.user.User;
 import pl.edu.agh.project_manager.domain.entity.project.ProjectAssignment;
@@ -15,12 +17,15 @@
 import pl.edu.agh.project_manager.domain.exception.ApiErrorCode;
 import pl.edu.agh.project_manager.domain.exception.ApplicationException;
 import pl.edu.agh.project_manager.repository.project.ProjectAssignmentRepository;
+import pl.edu.agh.project_manager.repository.project.ProjectRepository;
 import pl.edu.agh.project_manager.service.user.UserService;
 import pl.edu.agh.project_manager.service.command.project.AssignmentCommand;
 
 import java.time.LocalDate;
 import java.util.List;
+import java.util.Map;
 import java.util.UUID;
+import java.util.stream.Collectors;
 
 @Service
 @RequiredArgsConstructor
diff --git a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/service/project/ProjectService.java b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/service/project/ProjectService.java
index 1758cc2c..f5168209 100644
--- a/backend/project-manager/src/main/java/pl/edu/agh/project_manager/service/project/ProjectService.java
+++ b/backend/project-manager/src/main/java/pl/edu/agh/project_manager/service/project/ProjectService.java
@@ -1,31 +1,31 @@
 package pl.edu.agh.project_manager.service.project;
 
-import jakarta.persistence.criteria.Join;
-import jakarta.persistence.criteria.Predicate;
-import jakarta.transaction.Transactional;
 import lombok.RequiredArgsConstructor;
 import org.springframework.data.jpa.domain.Specification;
 import org.springframework.stereotype.Service;
-import pl.edu.agh.project_manager.controller.dto.project.ProjectMembersResponse;
-import pl.edu.agh.project_manager.controller.dto.project.ProjectResponse;
+import org.springframework.transaction.annotation.Transactional;
+import pl.edu.agh.project_manager.controller.dto.milestone.MilestoneResponse;
+import pl.edu.agh.project_manager.controller.dto.project.*;
 import pl.edu.agh.project_manager.domain.entity.project.Project;
+import pl.edu.agh.project_manager.domain.entity.project.ProjectAssignment;
 import pl.edu.agh.project_manager.domain.entity.project.ProjectRisk;
 import pl.edu.agh.project_manager.domain.entity.projectgroup.ProjectGroup;
 import pl.edu.agh.project_manager.domain.entity.user.User;
 import pl.edu.agh.project_manager.domain.entity.project.ProjectMilestone;
-import pl.edu.agh.project_manager.domain.enums.GroupType;
 import pl.edu.agh.project_manager.domain.exception.ApiErrorCode;
 import pl.edu.agh.project_manager.domain.exception.ApplicationException;
+import pl.edu.agh.project_manager.repository.project.ProjectAssignmentRepository;
 import pl.edu.agh.project_manager.repository.project.ProjectRepository;
-import pl.edu.agh.project_manager.security.UserPrincipal;
 import pl.edu.agh.project_manager.service.command.project.MilestoneCommand;
 import pl.edu.agh.project_manager.service.command.project.ProjectCreationCommand;
 import pl.edu.agh.project_manager.service.command.project.RiskCommand;
 
-import java.util.ArrayList;
+import java.util.LinkedHashMap;
 import java.util.List;
+import java.util.Map;
 import java.util.UUID;
-import pl.edu.agh.project_manager.domain.enums.UserRole;
+import java.util.stream.Collectors;
+
 import pl.edu.agh.project_manager.service.command.project.SearchProjectCommand;
 import pl.edu.agh.project_manager.service.projectgroup.ProjectGroupsService;
 import pl.edu.agh.project_manager.service.user.UserService;
@@ -37,6 +37,7 @@ public class ProjectService {
     private final UserService userService;
     private final ProjectGroupsService projectGroupService;
     private final ProjectRepository projectRepository;
+    private final ProjectAssignmentRepository assignmentRepository;
 
 
     @Transactional
@@ -83,6 +84,44 @@ public ProjectMembersResponse getProjectMembers(UUID projectId) {
         return ProjectMembersResponse.from(project);
     }
 
+    @Transactional(readOnly = true)
+    public ProjectTimelineResponse getTimelineData(UUID projectId) {
+        Project project = projectRepository.findWithMilestonesById(projectId)
+                .orElseThrow(() -> new ApplicationException(
+                        ApiErrorCode.PROJECT_NOT_FOUND,
+                        "Cannot find provided project - " + projectId
+                ));
+
+        List<ProjectAssignment> assignments = assignmentRepository.findActiveAndPendingByProjectIdOrderByCreatedAtAsc(projectId);
+
+        return new ProjectTimelineResponse(
+                project.getMilestones().stream().map(MilestoneResponse::from).toList(),
+                groupAssignmentsByEmployee(assignments)
+        );
+    }
+
+    private List<AssignmentsByEmployeeResponse> groupAssignmentsByEmployee(List<ProjectAssignment> assignments) {
+        Map<User, List<ProjectAssignment>> assignmentsByUser = assignments.stream()
+                .collect(Collectors.groupingBy(ProjectAssignment::getUser, LinkedHashMap::new, Collectors.toList()));
+
+        return assignmentsByUser.entrySet().stream()
+                .map(entry -> {
+                    User employee = entry.getKey();
+                    List<ProjectAssignment> userAssignments = entry.getValue();
+
+                    return new AssignmentsByEmployeeResponse(
+                            employee.getId(),
+                            employee.getName(),
+                            employee.getSurname(),
+                            employee.getEmail(),
+                            userAssignments.stream()
+                                    .map(ProjectAssignmentResponse::from)
+                                    .toList()
+                    );
+                })
+                .toList();
+    }
+
     private Project buildProject(ProjectCreationCommand command, User projectManager) {
         return Project.builder()
                 .title(command.title())
diff --git a/frontend/src/api/endpoints.ts b/frontend/src/api/endpoints.ts
index db5d9d57..0cdadf57 100644
--- a/frontend/src/api/endpoints.ts
+++ b/frontend/src/api/endpoints.ts
@@ -27,7 +27,8 @@ export const ENDPOINTS = {
             BASE: `/projects/${id}`,
             RISKS: `/projects/${id}/risks`,
             MEMBERS: `/projects/${id}/members`,
-            ASSIGNMENTS: `/projects/${id}/assignments`
+            ASSIGNMENTS: `/projects/${id}/assignments`,
+            TIMELINE: `/projects/${id}/timeline`
         }),
     },
     PROJECT_GROUP: {
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index 7413f6e3..e83a9ccd 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -30,7 +30,7 @@ function TooltipTrigger({
 
 function TooltipContent({
   className,
-  sideOffset = 0,
+  sideOffset = 8,
   children,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
@@ -46,7 +46,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+        {/* <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" /> */}
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
diff --git a/frontend/src/features/project/components/CreateAssignmentModal.tsx b/frontend/src/features/project/components/CreateAssignmentModal.tsx
index 74598aad..aa698791 100644
--- a/frontend/src/features/project/components/CreateAssignmentModal.tsx
+++ b/frontend/src/features/project/components/CreateAssignmentModal.tsx
@@ -84,7 +84,12 @@ export const CreateAssignmentModal = ({ project }: CreateAssignmentModalProps) =
     <Form {...form}>
       <Dialog open={isOpenModal} onOpenChange={open => open ? setIsOpenModal(true) : closeModal()}>
         <DialogTrigger asChild>
-          <Button variant="outline">Stwórz wniosek</Button>
+          <Button
+            variant="outline"
+            className="border-slate-900 bg-slate-900 text-white hover:bg-slate-800 hover:text-white shadow-sm"
+          >
+            Stwórz wniosek
+          </Button>
         </DialogTrigger>
 
         <DialogContent className="sm:max-w-xl max-h-[90vh] overflow-y-auto" data-project-id={project.id}>
diff --git a/frontend/src/features/project/components/ProjectTimeline.tsx b/frontend/src/features/project/components/ProjectTimeline.tsx
index 15a4fbcc..0ffdfce4 100644
--- a/frontend/src/features/project/components/ProjectTimeline.tsx
+++ b/frontend/src/features/project/components/ProjectTimeline.tsx
@@ -1,31 +1,18 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { CalendarDays, MapPin } from "lucide-react";
-
-// interface ProjectTimelineProps {
-//   projectId: string;
-// }
-
-// Dane tymczasowe
-const MOCK_DATA = {
-  projectStart: new Date("2026-04-01"),
-  projectEnd: new Date("2026-07-31"),
-  milestones: [
-    { id: "m1", name: "Faza Testów", description: "Zakończenie pierwszej iteracji programistycznej i start QA", date: new Date("2026-05-15") },
-    { id: "m2", name: "Akceptacja UAT", description: "Odbiór modułów przez klienta biznesowego", date: new Date("2026-06-20") },
-    { id: "m3", name: "Wdrożenie PROD", description: "Zrzut na środowisko produkcyjne", date: new Date("2026-07-28") },
-  ],
-  assignments: [
-    { id: "a1", userName: "Jan Kowalski", role: "Programista Java", startDate: new Date("2026-04-10"), endDate: new Date("2026-05-20"), utilization: 100 },
-    { id: "a2", userName: "Jan Kowalski", role: "Wsparcie QA", startDate: new Date("2026-06-01"), endDate: new Date("2026-07-15"), utilization: 20 },
-    { id: "a3", userName: "Anna Nowak", role: "UX Designer", startDate: new Date("2026-04-01"), endDate: new Date("2026-04-30"), utilization: 50 },
-  ]
-};
+import { CalendarDays, Check, HelpCircle, MapPin } from "lucide-react";
+import type { ProjectDetailsResponse } from "../project.types";
+import { useTimeline } from "../project.hooks";
+import { EmployeeAssignmentStatus } from "@/features/employee-assignments/employee-assignments.types";
+import { useNavigate } from "react-router-dom";
+import { PATHS } from "@/routes/paths";
+import type { ReactNode } from "react";
 
 const calculatePositionAndWidth = (start: Date, end: Date, projectStart: Date, projectEnd: Date) => {
-  const totalProjectDuration = projectEnd.getTime() - projectStart.getTime();
-  const taskDuration = end.getTime() - start.getTime();
+  const DAY_MS = 86400000; // one day in milliseconds — include end day as inclusive
+  const totalProjectDuration = projectEnd.getTime() - projectStart.getTime() + DAY_MS;
+  const taskDuration = end.getTime() - start.getTime() + DAY_MS;
   const timeOffset = start.getTime() - projectStart.getTime();
 
   const widthPercent = Math.min(Math.max((taskDuration / totalProjectDuration) * 100, 0), 100);
@@ -34,102 +21,161 @@ const calculatePositionAndWidth = (start: Date, end: Date, projectStart: Date, p
   return { left: `${leftPercent}%`, width: `${widthPercent}%` };
 };
 
-export const ProjectTimeline = (/*{ projectId }: ProjectTimelineProps*/) => {
-  const { projectStart, projectEnd, milestones, assignments } = MOCK_DATA;
+interface ProjectTimelineProps {
+  project: ProjectDetailsResponse;
+  children?: ReactNode;
+}
+
+export const ProjectTimeline = ({ project, children }: ProjectTimelineProps) => {
+  const { data: timelineData } = useTimeline(project.id);
+  const navigate = useNavigate();
 
-  const assignmentsByUser = assignments.reduce((acc, curr) => {
-    if (!acc[curr.userName]) acc[curr.userName] = [];
-    acc[curr.userName].push(curr);
-    return acc;
-  }, {} as Record<string, typeof assignments>);
+  const projectStart = new Date(project.startDate);
+  const projectEnd = new Date(project.endDate);
+
+  const milestones = timelineData?.milestones ?? [];
+  const assignmentsByUser = timelineData?.assignments ?? [];
+  const markerGuideHeight = Math.max(assignmentsByUser.length * 56, 80);
+
+  const getAssignmentStatusClasses = (status: EmployeeAssignmentStatus) => status === EmployeeAssignmentStatus.ACCEPTED
+    ? "bg-emerald-500/95 hover:bg-emerald-600 border-emerald-800/35 ring-1 ring-inset ring-white/20 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.25)]"
+    : status === EmployeeAssignmentStatus.PENDING
+      ? "bg-amber-400/95 hover:bg-amber-500 border-amber-700/30 ring-1 ring-inset ring-white/15 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.12)]"
+      : "bg-indigo-500/95 hover:bg-indigo-600 border-indigo-800/35 ring-1 ring-inset ring-white/20 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.25)]";
+
+  const getAssignmentStatusIcon = (status: EmployeeAssignmentStatus) => status === EmployeeAssignmentStatus.ACCEPTED
+    ? <Check className="h-4 w-4 text-white" />
+    : status === EmployeeAssignmentStatus.PENDING
+      ? <HelpCircle className="h-4 w-4 text-white" />
+      : null;
 
   return (
     <Card className="w-full">
-      <CardHeader className="pb-3 border-b">
+      <CardHeader className="pb-3 border-b flex flex-row items-center justify-between gap-4">
         <CardTitle className="text-lg flex items-center gap-2 text-slate-800">
           <CalendarDays className="h-5 w-5 text-indigo-500" />
-          Harmonogram Projektu (Timeline)
+          Harmonogram projektu
         </CardTitle>
+        {children}
       </CardHeader>
-      <CardContent className="pt-6 relative">
+      <CardContent className="pt-6 pb-5">
         <TooltipProvider>
-          <div className="absolute top-0 bottom-0 left-0 right-0 pointer-events-none mx-6">
-            <div className="h-full border-l border-r border-slate-200 border-dashed relative">
-              <span className="absolute -top-5 left-0 text-xs text-slate-400 font-medium">{projectStart.toLocaleDateString()}</span>
-              <span className="absolute -top-5 right-0 text-xs text-slate-400 font-medium">{projectEnd.toLocaleDateString()}</span>
-            </div>
-          </div>
-
-          <div className="space-y-8 relative z-10 mx-6">
-
-            <div className="relative h-6">
-              {milestones.map((milestone) => {
-                const position = calculatePositionAndWidth(milestone.date, milestone.date, projectStart, projectEnd);
-                return (
-                  <Tooltip key={milestone.id}>
-                    <TooltipTrigger asChild>
-                      <div
-                        className="absolute top-0 -ml-2 cursor-pointer group"
-                        style={{ left: position.left }}
-                      >
-                        <MapPin className="h-5 w-5 text-rose-500 fill-white group-hover:fill-rose-100 transition-colors" />
-                        <div className="w-px h-full bg-rose-200 absolute left-1/2 -ml-px top-5 pointer-events-none" style={{ height: '500px' }} /> {/* Pionowa linia w dół */}
-                      </div>
-                    </TooltipTrigger>
-                    <TooltipContent className="max-w-[200px] z-50 bg-white border shadow-md text-slate-800">
-                      <p className="font-semibold">{milestone.name}</p>
-                      <p className="text-xs text-slate-500 mb-1">{milestone.date.toLocaleDateString()}</p>
-                      <p className="text-sm">{milestone.description}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                );
-              })}
-            </div>
+          <div className="relative pl-0 pr-2 sm:pr-6">
+            <div className="space-y-6 relative z-10">
 
-            {Object.entries(assignmentsByUser).map(([userName, userAssignments], index) => {
-              const initials = userName.split(' ').map(n => n[0]).join('').toUpperCase();
-
-              return (
-                <div key={index} className="relative flex items-center h-10 mt-4">
-                  <div className="absolute -left-12 z-20">
-                    <Avatar className="h-8 w-8 ring-2 ring-white">
-                      <AvatarFallback className="bg-slate-100 text-slate-600 text-[10px] font-bold">
-                        {initials}
-                      </AvatarFallback>
-                    </Avatar>
-                  </div>
-
-                  <div className="relative w-full h-full bg-slate-50 rounded-md border border-slate-100">
-                    {userAssignments.map((assignment) => {
-                      const position = calculatePositionAndWidth(assignment.startDate, assignment.endDate, projectStart, projectEnd);
-
-                      return (
-                        <Tooltip key={assignment.id}>
+              <div className="grid grid-cols-[3rem_minmax(0,1fr)] items-start gap-3 sm:gap-4">
+                <div />
+                <div className="relative h-7 pr-2 sm:pr-6 border-l border-r border-slate-200 border-dashed">
+                  <span className="absolute -top-5 left-0 text-xs text-slate-400 font-medium">{projectStart.toLocaleDateString()}</span>
+                  <span className="absolute -top-5 right-0 text-xs text-slate-400 font-medium">{projectEnd.toLocaleDateString()}</span>
+                  {milestones.map((milestone, index) => {
+                    const milestoneDate = new Date(milestone.date);
+                    const position = calculatePositionAndWidth(milestoneDate, milestoneDate, projectStart, projectEnd);
+                    return (
+                        <Tooltip key={`${milestone.name}-${milestone.date}-${index}`}>
                           <TooltipTrigger asChild>
                             <div
-                              className="absolute top-1 bottom-1 bg-indigo-500 hover:bg-indigo-600 rounded-sm cursor-pointer transition-colors border border-indigo-700/20 flex items-center justify-center overflow-hidden"
-                              style={{ left: position.left, width: position.width }}
+                              className="absolute top-0 -translate-x-1/2 cursor-pointer group"
+                              style={{ left: position.left }}
                             >
-                              {/* Jeśli pasek jest dostatecznie szeroki, pokazujemy procent w środku */}
-                              {parseFloat(position.width) > 10 && (
-                                <span className="text-[10px] font-bold text-white/90">{assignment.utilization}%</span>
-                              )}
+                              <MapPin className="h-7 w-7 text-rose-500 fill-white group-hover:fill-rose-100 transition-colors" />
+                              <div className="w-px h-full bg-rose-200 absolute left-1/2 -translate-x-1/2 top-6 pointer-events-none" style={{ height: `${markerGuideHeight}px` }} />
                             </div>
                           </TooltipTrigger>
-                          <TooltipContent className="z-50 bg-white border shadow-md text-slate-800">
-                            <p className="font-semibold">{assignment.role}</p>
-                            <p className="text-xs text-slate-500 mb-1">
-                              {assignment.startDate.toLocaleDateString()} - {assignment.endDate.toLocaleDateString()}
-                            </p>
-                            <p className="text-sm">Zaangażowanie: <span className="font-bold">{assignment.utilization}%</span></p>
+                          <TooltipContent className="z-50 bg-slate-700 text-white rounded-md shadow-md px-3 py-2.5 flex flex-col space-y-2 border border-slate-500 [&_svg]:hidden">
+                            <div className="text-xs font-semibold text-amber-300">{milestone.name}</div>
+                            <div className="text-xs text-slate-300 leading-tight">{milestoneDate.toLocaleDateString()}</div>
                           </TooltipContent>
                         </Tooltip>
-                      );
-                    })}
+                    );
+                  })}
+                </div>
+              </div>
+
+              {assignmentsByUser.length === 0 ? (
+                <div className="grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-3 sm:gap-4">
+                  <div className="z-20 flex items-center justify-center">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className="group rounded-full transition-transform">
+                          <Avatar className="h-8 w-8 ring-2 ring-white shadow-sm">
+                            <AvatarFallback className="bg-slate-100 text-slate-600 text-[12px] font-bold">?</AvatarFallback>
+                          </Avatar>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent side="top" className="z-50 bg-slate-800 text-white border-0 shadow-md px-2 py-1 text-xs rounded-md" style={{ pointerEvents: 'none' }}>
+                        <p className="font-medium text-center whitespace-nowrap">Brak przypisań</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+
+                  <div className="relative h-10 w-full rounded-md border border-slate-100 bg-slate-50/80 flex items-center justify-center text-sm text-slate-500">
+                    Brak przypisań do projektu
                   </div>
                 </div>
-              );
-            })}
+              ) : assignmentsByUser.map((employee) => {
+                const userName = `${employee.name} ${employee.surname}`;
+                const initials = userName.split(' ').map(n => n[0]).join('').toUpperCase();
+
+                return (
+                  <div key={employee.userId} className="grid grid-cols-[3rem_minmax(0,1fr)] items-center gap-3 sm:gap-4">
+                    <div className="z-20 flex items-center justify-center">
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button
+                            type="button"
+                            // todo: do zmiany dla kogos kto robi profile uzytkownikow
+                            onClick={() => navigate(PATHS.ADMIN_USER_DETAILS(employee.userId))}
+                            className="group rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 transition-transform hover:scale-105"
+                          >
+                            <Avatar className="h-8 w-8 ring-2 ring-white shadow-sm transition-colors group-hover:ring-indigo-300 group-hover:shadow-md">
+                              <AvatarFallback className="bg-slate-100 text-slate-600 text-[10px] font-bold transition-colors group-hover:bg-indigo-50 group-hover:text-indigo-700">
+                                {initials}
+                              </AvatarFallback>
+                            </Avatar>
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="top" className="z-50 bg-slate-800 text-white border-0 shadow-md px-2 py-1 text-xs rounded-md" style={{ pointerEvents: 'none' }}>
+                          <p className="font-medium text-center whitespace-nowrap">{userName}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
+
+                    <div className="relative h-10 w-full rounded-md border border-slate-100 bg-slate-50/80 overflow-hidden">
+                      {employee.assignments.map((assignment) => {
+                        const assignmentStartDate = new Date(assignment.startDate);
+                        const assignmentEndDate = new Date(assignment.endDate);
+                        const position = calculatePositionAndWidth(assignmentStartDate, assignmentEndDate, projectStart, projectEnd);
+                        return (
+                          <Tooltip key={assignment.id}>
+                            <TooltipTrigger asChild>
+                              <div
+                                className={`absolute top-1 bottom-1 rounded-sm cursor-pointer transition-colors border flex items-center justify-center overflow-hidden ${getAssignmentStatusClasses(assignment.status)}`}
+                                style={{ left: position.left, width: position.width }}
+                              >
+                                {getAssignmentStatusIcon(assignment.status)}
+                                {parseFloat(position.width) > 12 && (
+                                  <span className="ml-1 text-xs font-bold text-white/90">{assignment.utilizationPercentage}%</span>
+                                )}
+                              </div>
+                            </TooltipTrigger>
+                            <TooltipContent className="z-50 bg-slate-700 text-white rounded-md shadow-md px-3 py-2.5 flex flex-col space-y-2 border border-slate-500 [&_svg]:hidden">
+                              <div className="text-xs font-semibold text-amber-300">{assignment.roleName}</div>
+                              <div className="text-xs text-slate-300 leading-tight">
+                                {assignmentStartDate.toLocaleDateString()} - {assignmentEndDate.toLocaleDateString()}
+                              </div>
+                              <div className="text-sm font-semibold text-white pt-1 border-t border-slate-600">
+                                Zaangażowanie: <span className="text-amber-300 font-bold">{assignment.utilizationPercentage}%</span>
+                              </div>
+                            </TooltipContent>
+                          </Tooltip>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
           </div>
         </TooltipProvider>
       </CardContent>
diff --git a/frontend/src/features/project/project.hooks.ts b/frontend/src/features/project/project.hooks.ts
index 335c2875..fcefa467 100644
--- a/frontend/src/features/project/project.hooks.ts
+++ b/frontend/src/features/project/project.hooks.ts
@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { projectService } from "@/features/project/project.service.ts";
 import { toast } from "sonner";
-import { PROJECT_KEYS, ROLES_KEYS } from "@/features/project/project.keys.ts";
+import {  PROJECT_KEYS  } from "@/features/project/project.keys.ts";
 import type { SearchProjectsRequest } from "@/features/project/project.types.ts";
 import { hasProjectSearchFilters } from "@/features/project/project.utils.ts";
 
@@ -23,13 +23,13 @@ export const useProjectDetails = (id: string) => {
 export const useCreateProject = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: projectService.create,
-    onSuccess: () => {
-      toast.success("Dodano projekt.");
-      queryClient.invalidateQueries({ queryKey: PROJECT_KEYS.all });
-    },
-  });
+    return useMutation({
+        mutationFn: projectService.createProject,
+        onSuccess: () => {
+            toast.success('Dodano projekt.');
+            queryClient.invalidateQueries({ queryKey: PROJECT_KEYS.all });
+        },
+    });
 };
 
 export const useProjectRisks = (id: string) => {
@@ -60,13 +60,23 @@ export const useSearchProjects = (request: SearchProjectsRequest) => {
 export const useCreateEmployeeAssignment = (projectId: string) => {
   const queryClient = useQueryClient();
 
-  const assignmentMutation = useMutation({
-    mutationFn: projectService.createEmployeeAssignment,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ROLES_KEYS.status(projectId) }),
-  });
+    const assignmentMutation = useMutation({
+        mutationFn: projectService.createEmployeeAssignment,
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: PROJECT_KEYS.timeline(projectId) });
+        }
+    });
 
   return {
     createAssignment: assignmentMutation.mutate,
     isCreatingAssignment: assignmentMutation.isPending,
   };
 };
+
+export const useTimeline = (projectId: string) => {
+    return useQuery({
+        queryKey: PROJECT_KEYS.timeline(projectId),
+        queryFn: () => projectService.getProjectTimeline(projectId),
+        enabled: !!projectId
+    });
+};
\ No newline at end of file
diff --git a/frontend/src/features/project/project.keys.ts b/frontend/src/features/project/project.keys.ts
index 57895a48..dcba6c44 100644
--- a/frontend/src/features/project/project.keys.ts
+++ b/frontend/src/features/project/project.keys.ts
@@ -6,12 +6,8 @@ export const PROJECT_KEYS = {
     details: () => [...PROJECT_KEYS.all, 'detail'] as const,
     detail: (id: string) => [...PROJECT_KEYS.details(), id] as const,
     search: (request: SearchProjectsRequest) => [...PROJECT_KEYS.all, 'search', request] as const,
+    timeline: (projectId: string) => [...PROJECT_KEYS.detail(projectId), 'timeline'] as const,
 
     risks: (projectId: string) => [...PROJECT_KEYS.detail(projectId), 'risks'] as const,
     members: (projectId: string) => [...PROJECT_KEYS.detail(projectId), 'members'] as const,
-};
-
-export const ROLES_KEYS = {
-    all: ['roles'] as const,
-    status: (projectId: string) => [...PROJECT_KEYS.detail(projectId), 'roles-status'] as const,
 };
\ No newline at end of file
diff --git a/frontend/src/features/project/project.service.ts b/frontend/src/features/project/project.service.ts
index 2f8e486e..79c7430f 100644
--- a/frontend/src/features/project/project.service.ts
+++ b/frontend/src/features/project/project.service.ts
@@ -6,6 +6,7 @@ import type {
   CreateEmployeeAssignmentRequest,
   RiskResponse,
   ProjectMembersResponse,
+  ProjectTimelineResponse,
   SearchProjectsRequest,
 } from "./project.types";
 import { buildProjectSearchParams } from "./project.utils";
@@ -16,10 +17,10 @@ export const projectService = {
     return data;
   },
 
-  create: async (projectData: ProjectCreationRequest): Promise<string> => {
-    const response = await api.post<string>(ENDPOINTS.PROJECT.BASE, projectData);
-    return response.data;
-  },
+    createProject: async (projectData: ProjectCreationRequest): Promise<string> => {
+        const response = await api.post<string>(ENDPOINTS.PROJECT.BASE, projectData);
+        return response.data;
+    },
 
   getDetails: async (id: string): Promise<ProjectDetailsResponse> => {
     const response = await api.get<ProjectDetailsResponse>(ENDPOINTS.PROJECT.DETAILS(id).BASE);
@@ -46,7 +47,11 @@ export const projectService = {
     const response = await api.get<ProjectDetailsResponse[]>(ENDPOINTS.PROJECT.BASE, {
       params,
     });
-
     return response.data;
   },
+
+    getProjectTimeline: async (projectId: string) => {
+      const response = await api.get<ProjectTimelineResponse>(ENDPOINTS.PROJECT.DETAILS(projectId).TIMELINE);
+      return response.data;
+    }
 };
diff --git a/frontend/src/features/project/project.types.ts b/frontend/src/features/project/project.types.ts
index 45d9a689..86535668 100644
--- a/frontend/src/features/project/project.types.ts
+++ b/frontend/src/features/project/project.types.ts
@@ -1,4 +1,5 @@
 import type { SimpleUserResponse, UserResponse } from "@/features/user-management";
+import type { EmployeeAssignmentStatus } from "@/features/employee-assignments/employee-assignments.types";
 import type { SingleGroupResponse } from "../project_group/project_group.types";
 
 export interface ProjectCreationRequest {
@@ -55,6 +56,28 @@ export interface ProjectDetailsResponse {
     group: SingleGroupResponse;
 }
 
+export interface ProjectTimelineResponse {
+    milestones: Milestone[];
+    assignments: EmployeeWithAssignmentsResponse[];
+}
+
+export interface EmployeeWithAssignmentsResponse {
+    userId: string;
+    name: string;
+    surname: string;
+    email: string;
+    assignments: ProjectAssignmentResponse[];
+}
+
+export interface ProjectAssignmentResponse {
+    id: string;
+    roleName: string;
+    startDate: string;
+    endDate: string;
+    utilizationPercentage: number;
+    status: EmployeeAssignmentStatus;
+}
+
 export interface CreateEmployeeAssignmentRequest {
     projectId: string;
     userId: string;
diff --git a/frontend/src/pages/ProjectDetailsPage.tsx b/frontend/src/pages/ProjectDetailsPage.tsx
index d08ece01..b84af2c2 100644
--- a/frontend/src/pages/ProjectDetailsPage.tsx
+++ b/frontend/src/pages/ProjectDetailsPage.tsx
@@ -19,14 +19,14 @@ export const ProjectDetailsPage = () => {
   }
 
   return (
-    <div className="p-4 mx-auto space-y-6 sm:p-6 lg:p-8 max-w-7xl">
+    <div className="p-4 mx-auto space-y-6 sm:p-6 lg:p-8 w-full">
       <ProjectHeader details={project} />
 
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <div className="space-y-6 lg:col-span-2">
-          <CreateAssignmentModal project={project} />
-          
-          <ProjectTimeline />
+          <ProjectTimeline project={project}>
+            <CreateAssignmentModal project={project} />
+          </ProjectTimeline>
 
           <ProjectRisks projectId={project.id} />
         </div>