Index: backend/src/main/java/com/shifterwebapp/shifter/auth/RegisterDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/RegisterDto.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/RegisterDto.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -29,4 +29,4 @@
     private List<Interests> interests;
 
-    private List<Skills> skillGap;
+    private List<Skills> desiredSkills;
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/course/CourseController.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/CourseController.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/CourseController.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -102,4 +102,20 @@
     }
 
+    @GetMapping("/enrolled")
+    public ResponseEntity<?> getEnrolledCourses(Authentication authentication) {
+        if (authentication == null || !authentication.isAuthenticated()) {
+            return ResponseEntity.badRequest().body(new ErrorResponse("User not authenticated"));
+        }
+
+        Object detailsObj = authentication.getDetails();
+        if (!(detailsObj instanceof CustomAuthDetails details)) {
+            return ResponseEntity.badRequest().body(new ErrorResponse("Invalid authentication details"));
+        }
+        Long userId = details.getUserId();
+
+        List<CourseDtoPreview> recommendedCourses = courseService.getEnrolledCourses(userId);
+        return ResponseEntity.ok(recommendedCourses);
+    }
+
     @GetMapping("/{courseId}")
     public ResponseEntity<?> getCourseById(@PathVariable("courseId") Long courseId) {
Index: backend/src/main/java/com/shifterwebapp/shifter/course/service/CourseService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/service/CourseService.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/service/CourseService.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -86,4 +86,12 @@
 
     @Override
+    public List<CourseDtoPreview> getEnrolledCourses(Long userId) {
+        List<Long> enrolledCourseIds = enrollmentService.getCourseIdsByUserEnrollments(userId);
+        List<Course> courses = courseRepository.findAllById(enrolledCourseIds);
+        return courseMapperPreview.toDto(courses);
+    }
+
+
+    @Override
     public List<CourseDtoPreview> getTopRatedCourses() {
         List<Course> courses = courseRepository.findCoursesOrderedByRating();
Index: backend/src/main/java/com/shifterwebapp/shifter/course/service/ImplCourseService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/service/ImplCourseService.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/service/ImplCourseService.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -14,4 +14,5 @@
     List<CourseDtoPreview> getAllCourses(Specification<Course> specification);
     List<CourseDtoPreview> getRecommendedCourses(Long userId);
+    List<CourseDtoPreview> getEnrolledCourses(Long userId);
     List<CourseDtoPreview> getTopRatedCourses();
     List<CourseDtoPreview> getMostPopularCourses();
Index: backend/src/main/java/com/shifterwebapp/shifter/coursecontent/CourseContent.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/coursecontent/CourseContent.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/coursecontent/CourseContent.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -3,4 +3,5 @@
 import com.shifterwebapp.shifter.course.Course;
 import com.shifterwebapp.shifter.courselecture.CourseLecture;
+import com.shifterwebapp.shifter.usercourseprogress.UserCourseProgress;
 import jakarta.persistence.*;
 import com.shifterwebapp.shifter.enums.ContentType;
@@ -31,4 +32,7 @@
     @JoinColumn(name = "course_id")
     private Course course;
+
+    @OneToMany(mappedBy = "courseContent", cascade = CascadeType.ALL, orphanRemoval = true)
+    private List<UserCourseProgress> userCourseProgressList;
 }
 
Index: backend/src/main/java/com/shifterwebapp/shifter/enrollment/Enrollment.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/enrollment/Enrollment.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/enrollment/Enrollment.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -5,8 +5,10 @@
 import com.shifterwebapp.shifter.payment.Payment;
 import com.shifterwebapp.shifter.review.Review;
+import com.shifterwebapp.shifter.usercourseprogress.UserCourseProgress;
 import jakarta.persistence.*;
 import lombok.*;
 
 import java.util.Date;
+import java.util.List;
 
 @Getter
@@ -40,4 +42,7 @@
     @JoinColumn(name = "course_id")
     private Course course;
+
+    @OneToMany(mappedBy = "enrollment", cascade = CascadeType.ALL, orphanRemoval = true)
+    private List<UserCourseProgress> userCourseProgressList;
 }
 
Index: backend/src/main/java/com/shifterwebapp/shifter/enrollment/EnrollmentDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/enrollment/EnrollmentDto.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/enrollment/EnrollmentDto.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -2,4 +2,6 @@
 
 import com.shifterwebapp.shifter.enums.EnrollmentStatus;
+import com.shifterwebapp.shifter.usercourseprogress.UserCourseProgress;
+import com.shifterwebapp.shifter.usercourseprogress.UserCourseProgressDto;
 import lombok.AllArgsConstructor;
 import lombok.Data;
@@ -7,4 +9,5 @@
 
 import java.util.Date;
+import java.util.List;
 
 @Data
@@ -20,4 +23,6 @@
 
     private Long courseId;
+
+    private List<UserCourseProgressDto> userCourseProgressList;
 }
 
Index: backend/src/main/java/com/shifterwebapp/shifter/enrollment/EnrollmentMapper.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/enrollment/EnrollmentMapper.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/enrollment/EnrollmentMapper.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -1,4 +1,5 @@
 package com.shifterwebapp.shifter.enrollment;
 
+import com.shifterwebapp.shifter.usercourseprogress.UserCourseProgressMapper;
 import org.mapstruct.InheritInverseConfiguration;
 import org.mapstruct.Mapper;
@@ -7,5 +8,5 @@
 import java.util.List;
 
-@Mapper(componentModel = "spring")
+@Mapper(componentModel = "spring", uses = {UserCourseProgressMapper.class})
 public interface EnrollmentMapper {
 
Index: backend/src/main/java/com/shifterwebapp/shifter/enrollment/service/EnrollmentService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/enrollment/service/EnrollmentService.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/enrollment/service/EnrollmentService.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -133,5 +133,5 @@
         userService.addPoints(userId, PointsConstants.BUY_COURSE);
         userService.addSkills(userId, skillsGained);
-        userService.removeSkillGaps(userId, skillsGained);
+        userService.removeDesiredSkills(userId, skillsGained);
 
         enrollmentRepository.save(enrollment);
Index: backend/src/main/java/com/shifterwebapp/shifter/user/User.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/User.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/User.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -40,4 +40,6 @@
     private Boolean isAdmin;
 
+    private Boolean hasUsedFreeConsultation;
+
     @Enumerated(EnumType.STRING)
     private CompanyType companyType;
@@ -55,5 +57,5 @@
     @ElementCollection(targetClass = Skills.class)
     @Enumerated(EnumType.STRING)
-    private List<Skills> skillGap;
+    private List<Skills> desiredSkills;
     
     private Integer points;
@@ -62,5 +64,5 @@
     private List<Integer> favoriteCourses;
 
-    @OneToMany(mappedBy = "user", cascade = CascadeType.PERSIST, orphanRemoval = true)
+    @OneToMany(mappedBy = "user")
     private List<Payment> payments;             // WHEN DELETING USER SET PAYMENTS TO NULL, BECAUSE PAYMENTS DONT GET DELETED
 
Index: backend/src/main/java/com/shifterwebapp/shifter/user/UserController.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/UserController.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/UserController.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -11,4 +11,6 @@
 import org.springframework.security.core.Authentication;
 import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
 
 @RequiredArgsConstructor
@@ -33,5 +35,5 @@
     }
 
-    @PutMapping("/update")
+    @PutMapping("/update/info")
     public ResponseEntity<?> updateUser(Authentication authentication, @RequestBody UserInfoDto userInfoDto) {
         validate.validateUserIsAuthenticated(authentication);
@@ -46,67 +48,27 @@
     }
 
-    @GetMapping("/{userId}")
-    public ResponseEntity<UserDto> getUser(@PathVariable Long userId) {
-        UserDto userDto = userService.getUserById(userId);
+    @PutMapping("/update/interests")
+    public ResponseEntity<?> updateInterests(Authentication authentication, @RequestBody List<Interests> interests) {
+        validate.validateUserIsAuthenticated(authentication);
+        Object detailsObj = authentication.getDetails();
+        if (!(detailsObj instanceof CustomAuthDetails details)) {
+            return ResponseEntity.badRequest().body(new ErrorResponse("Invalid authentication details"));
+        }
+        Long userId = details.getUserId();
+
+        UserDto userDto = userService.updateInterests(userId, interests);
         return ResponseEntity.ok(userDto);
     }
 
-    @DeleteMapping("/{userId}")
-    public ResponseEntity<Void> deleteUser(@PathVariable Long userId) {
-        userService.deleteUser(userId);
-        return ResponseEntity.noContent().build();
-    }
+    @PutMapping("/update/desired-skills")
+    public ResponseEntity<?> updateDesiredSkills(Authentication authentication, @RequestBody List<Skills> desiredSkills) {
+        validate.validateUserIsAuthenticated(authentication);
+        Object detailsObj = authentication.getDetails();
+        if (!(detailsObj instanceof CustomAuthDetails details)) {
+            return ResponseEntity.badRequest().body(new ErrorResponse("Invalid authentication details"));
+        }
+        Long userId = details.getUserId();
 
-    @PutMapping("/{userId}/mail")
-    public ResponseEntity<?> updateMail(@PathVariable Long userId, @RequestParam String newMail) {
-        UserDto userDto = userService.updateMail(userId, newMail);
-        return ResponseEntity.ok(userDto);
-    }
-
-    @PutMapping("/{userId}/password")
-    public ResponseEntity<?> updatePassword(@PathVariable Long userId, @RequestParam String newPassword) {
-        UserDto userDto = userService.updatePassword(userId, newPassword);
-        return ResponseEntity.ok(userDto);
-    }
-
-    @PutMapping("/{userId}/add/interest")
-    public ResponseEntity<?> addInterest(@PathVariable Long userId, @RequestParam Interests newInterest) {
-        UserDto userDto = userService.addInterest(userId, newInterest);
-        return ResponseEntity.ok(userDto);
-    }
-
-    @PutMapping("/{userId}/add/skill")
-    public ResponseEntity<?> addSkill(@PathVariable Long userId, @RequestParam Skills newSkill) {
-        UserDto userDto = userService.addSkill(userId, newSkill);
-        return ResponseEntity.ok(userDto);
-    }
-
-    @PutMapping("/{userId}/add/skill-gap")
-    public ResponseEntity<?> addSkillGap(@PathVariable Long userId, @RequestParam Skills newSkillGap) {
-        UserDto userDto = userService.addSkillGap(userId, newSkillGap);
-        return ResponseEntity.ok(userDto);
-    }
-
-    @PutMapping("/{userId}/remove/interest")
-    public ResponseEntity<?> removeInterest(@PathVariable Long userId, @RequestParam Interests oldInterest) {
-        UserDto userDto = userService.removeInterest(userId, oldInterest);
-        return ResponseEntity.ok(userDto);
-    }
-
-    @PutMapping("/{userId}/remove/skill")
-    public ResponseEntity<?> removeSkill(@PathVariable Long userId, @RequestParam Skills oldSkill) {
-        UserDto userDto = userService.removeSkill(userId, oldSkill);
-        return ResponseEntity.ok(userDto);
-    }
-
-    @PutMapping("/{userId}/remove/skill-gap")
-    public ResponseEntity<?> removeSkillGap(@PathVariable Long userId, @RequestParam Skills oldSkillGap) {
-        UserDto userDto = userService.removeSkillGap(userId, oldSkillGap);
-        return ResponseEntity.ok(userDto);
-    }
-
-    @PutMapping("/{userId}/remove/favorite-course")
-    public ResponseEntity<?> removeFavoriteCourse(@PathVariable Long userId, @RequestParam Integer oldFavoriteCourse) {
-        UserDto userDto = userService.removeFavoriteCourse(userId, oldFavoriteCourse);
+        UserDto userDto = userService.updateDesiredSkills(userId, desiredSkills);
         return ResponseEntity.ok(userDto);
     }
Index: backend/src/main/java/com/shifterwebapp/shifter/user/UserDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/UserDto.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/UserDto.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -22,4 +22,6 @@
     private String name;
 
+    private Boolean hasUsedFreeConsultation;
+
     private CompanyType companyType;
 
@@ -30,5 +32,5 @@
     private List<Skills> skills;
 
-    private List<Skills> skillGap;
+    private List<Skills> desiredSkills;
 
     private Integer points;
Index: backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -22,21 +22,17 @@
 
     UserDto updateUser(Long id, UserInfoDto userInfoDto);
-
+    UserDto updateInterests(Long id, List<Interests> interests);
+    UserDto updateDesiredSkills(Long id, List<Skills> desiredSkills);
     UserDto updateMail(Long id, String newMail);
     UserDto updatePassword(Long id, String newPassHash);
 
-    UserDto addInterest(Long id, Interests newInterest);
     UserDto addSkill(Long id, Skills newSkill);
     UserDto addSkills(Long id, List<Skills> newSkills);
-    UserDto addSkillGap(Long id, Skills newSkillGap);
     UserDto toggleFavoriteCourse(Long userId, Integer newFavoriteCourseId);
     UserDto addPoints(Long id, Integer newPointsAchieved);
     UserDto addPayment(Long id, Payment newPayment);
 
-    UserDto removeInterest(Long id, Interests removeInterest);
-    UserDto removeSkill(Long id, Skills removeSkill);
-    UserDto removeSkillGap(Long id, Skills removeSkillGap);
-    UserDto removeSkillGaps(Long id, List<Skills> removeSkillGaps);
-    UserDto removeFavoriteCourse(Long id, Integer removeFavoriteCourseId);
+    UserDto removeDesiredSkill(Long id, Skills removeDesiredSkill);
+    UserDto removeDesiredSkills(Long id, List<Skills> removeDesiredSkills);
     UserDto removePoints(Long id, Integer removePointsAchieved);
     UserDto removePayment(Long id, Payment removePayment);
Index: backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -64,9 +64,10 @@
                 .passwordHash(passwordEncoder.encode(registerDto.getPassword()))
                 .isAdmin(false)
+                .hasUsedFreeConsultation(false)
                 .companyType(registerDto.getCompanyType())
                 .workPosition(registerDto.getWorkPosition())
                 .interests(registerDto.getInterests())
                 .skills(List.of())
-                .skillGap(registerDto.getSkillGap())
+                .desiredSkills(registerDto.getDesiredSkills())
                 .points(0)
                 .favoriteCourses(List.of())
@@ -101,4 +102,26 @@
     }
 
+    @Override
+    public UserDto updateInterests(Long id, List<Interests> interests) {
+        validate.validateUserExists(id);
+        User user = userRepository.findById(id).orElseThrow();
+
+        user.setInterests(interests);
+
+        userRepository.save(user);
+        return userMapper.toDto(user);
+    }
+
+    @Override
+    public UserDto updateDesiredSkills(Long id, List<Skills> desiredSkills) {
+        validate.validateUserExists(id);
+        User user = userRepository.findById(id).orElseThrow();
+
+        user.setDesiredSkills(desiredSkills);
+
+        userRepository.save(user);
+        return userMapper.toDto(user);
+    }
+
 
     @Override
@@ -116,15 +139,4 @@
         User user = userRepository.findById(userId).orElseThrow();
         user.setPasswordHash(passwordEncoder.encode(newPass));
-        userRepository.save(user);
-        return userMapper.toDto(user);
-    }
-
-    @Override
-    public UserDto addInterest(Long userId, Interests newInterest) {
-        validate.validateUserExists(userId);
-        User user = userRepository.findById(userId).orElseThrow();
-        if (!user.getInterests().contains(newInterest)) {
-            user.getInterests().add(newInterest);
-        }
         userRepository.save(user);
         return userMapper.toDto(user);
@@ -156,15 +168,4 @@
 
     @Override
-    public UserDto addSkillGap(Long userId, Skills newSkillGap) {
-        validate.validateUserExists(userId);
-        User user = userRepository.findById(userId).orElseThrow();
-        if (!user.getSkillGap().contains(newSkillGap)) {
-            user.getSkillGap().add(newSkillGap);
-        }
-        userRepository.save(user);
-        return userMapper.toDto(user);
-    }
-
-    @Override
     public UserDto toggleFavoriteCourse(Long userId, Integer newFavoriteCourseId) {
         User user = getUserEntityById(userId);
@@ -201,55 +202,22 @@
 
     @Override
-    public UserDto removeInterest(Long userId, Interests removeInterest) {
-        validate.validateUserExists(userId);
-        User user = userRepository.findById(userId).orElseThrow();
-        if (!user.getInterests().contains(removeInterest)) {
-            user.getInterests().remove(removeInterest);
-        }
-        userRepository.save(user);
-        return userMapper.toDto(user);
-    }
-
-    @Override
-    public UserDto removeSkill(Long userId, Skills removeSkill) {
-        validate.validateUserExists(userId);
-        User user = userRepository.findById(userId).orElseThrow();
-        if (!user.getSkills().contains(removeSkill)) {
-            user.getSkills().remove(removeSkill);
-        }
-        userRepository.save(user);
-        return userMapper.toDto(user);
-    }
-
-    @Override
-    public UserDto removeSkillGap(Long userId, Skills removeSkillGap) {
-        validate.validateUserExists(userId);
-        User user = userRepository.findById(userId).orElseThrow();
-        if (!user.getSkillGap().contains(removeSkillGap)) {
-            user.getSkillGap().remove(removeSkillGap);
-        }
-        userRepository.save(user);
-        return userMapper.toDto(user);
-    }
-
-    @Override
-    public UserDto removeSkillGaps(Long userId, List<Skills> removeSkillGaps) {
-        validate.validateUserExists(userId);
-        User user = userRepository.findById(userId).orElseThrow();
-        for (Skills skill : removeSkillGaps) {
-            if (!user.getSkillGap().contains(skill)) {
-                user.getSkillGap().remove(skill);
+    public UserDto removeDesiredSkill(Long userId, Skills removeDesiredSkill) {
+        validate.validateUserExists(userId);
+        User user = userRepository.findById(userId).orElseThrow();
+        if (!user.getDesiredSkills().contains(removeDesiredSkill)) {
+            user.getDesiredSkills().remove(removeDesiredSkill);
+        }
+        userRepository.save(user);
+        return userMapper.toDto(user);
+    }
+
+    @Override
+    public UserDto removeDesiredSkills(Long userId, List<Skills> removeDesiredSkills) {
+        validate.validateUserExists(userId);
+        User user = userRepository.findById(userId).orElseThrow();
+        for (Skills skill : removeDesiredSkills) {
+            if (!user.getDesiredSkills().contains(skill)) {
+                user.getDesiredSkills().remove(skill);
             }
-        }
-        userRepository.save(user);
-        return userMapper.toDto(user);
-    }
-
-    @Override
-    public UserDto removeFavoriteCourse(Long userId, Integer removeFavoriteCourseId) {
-        validate.validateUserExists(userId);
-        User user = userRepository.findById(userId).orElseThrow();
-        if (!user.getFavoriteCourses().contains(removeFavoriteCourseId)) {
-            user.getFavoriteCourses().remove(removeFavoriteCourseId);
         }
         userRepository.save(user);
Index: backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgress.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgress.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgress.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,30 @@
+package com.shifterwebapp.shifter.usercourseprogress;
+
+import com.shifterwebapp.shifter.coursecontent.CourseContent;
+import com.shifterwebapp.shifter.enrollment.Enrollment;
+import jakarta.persistence.*;
+import lombok.*;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+@Entity
+@ToString
+public class UserCourseProgress {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @ManyToOne
+    @JoinColumn(name = "enrollment_id")
+    private Enrollment enrollment;
+
+    @ManyToOne
+    @JoinColumn(name = "course_content_id")
+    private CourseContent courseContent;
+
+    private boolean completed;
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressDto.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressDto.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,17 @@
+package com.shifterwebapp.shifter.usercourseprogress;
+
+import com.shifterwebapp.shifter.coursecontent.CourseContentDto;
+import lombok.*;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+public class UserCourseProgressDto {
+
+    private Long id;
+
+    private CourseContentDto courseContent;
+
+    private boolean completed;
+
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressMapper.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressMapper.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressMapper.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,18 @@
+package com.shifterwebapp.shifter.usercourseprogress;
+
+import org.mapstruct.InheritInverseConfiguration;
+import org.mapstruct.Mapper;
+
+import java.util.List;
+
+@Mapper(componentModel = "spring")
+public interface UserCourseProgressMapper {
+
+    UserCourseProgressDto toDto(UserCourseProgress userCourseProgress);
+    List<UserCourseProgressDto> toDto(List<UserCourseProgress> userCourseProgress);
+
+    @InheritInverseConfiguration
+    UserCourseProgress toEntity(UserCourseProgressDto userCourseProgressDto);
+    @InheritInverseConfiguration
+    List<UserCourseProgress> toEntity(List<UserCourseProgressDto> userCourseProgressDtos);
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressRepository.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressRepository.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ backend/src/main/java/com/shifterwebapp/shifter/usercourseprogress/UserCourseProgressRepository.java	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,7 @@
+package com.shifterwebapp.shifter.usercourseprogress;
+
+import com.shifterwebapp.shifter.user.User;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface UserCourseProgressRepository extends JpaRepository<User, Long> {
+}
Index: frontend/index.html
===================================================================
--- frontend/index.html	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/index.html	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -13,4 +13,5 @@
   <body>
     <div id="root"></div>
+    <div id="portal"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/App.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -12,4 +12,6 @@
 import AppLoader from "./AppLoader.tsx";
 import Profile from "./pages/Profile.tsx";
+import Dashboard from "./pages/Dashboard.tsx";
+import FreeConsultation from "./pages/FreeConsultation.tsx";
 
 function LayoutWrapper() {
@@ -25,7 +27,11 @@
 
                 <Route path="/" element={<Home />} />
-                <Route path="/profile" element={<Profile />} />
                 <Route path="/courses" element={<Courses />} />
                 <Route path="/courses/:courseId/:courseTitle" element={<CourseDetails />} />
+
+                <Route path="/free-consultation" element={<FreeConsultation />} />
+
+                <Route path="/profile" element={<Profile />} />
+                <Route path="/dashboard" element={<Dashboard />} />
             </Routes>
             {!hideLayout && <Footer />}
Index: frontend/src/AppLoader.tsx
===================================================================
--- frontend/src/AppLoader.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/AppLoader.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -8,14 +8,30 @@
 
 function AppLoader() {
-    const {accessToken} = useGlobalContext();
+    const {accessToken, authChecked} = useGlobalContext();
     const {
         setEnrollments,
+        recommendedCourses,
         setRecommendedCourses,
     } = useCourseStorage();
 
     useEffect(() => {
+        if (!authChecked) return;
+
         const load = async () => {
+            // Recommended Courses
             try {
-                // Enrollments
+                const recommendedStored = JSON.parse(sessionStorage.getItem("recommendedCourses") || "null");
+                if (recommendedStored) {
+                    setRecommendedCourses(JSON.parse(recommendedStored));
+                } else {
+                    const recommended = await fetchRecommendedCoursesApi(accessToken || "");
+                    setRecommendedCourses(recommended);
+                }
+            } catch (err) {
+                console.error("Failed to fetch recommended courses:", err);
+            }
+
+            // Enrollments
+            try {
                 try {
                     if (accessToken) {
@@ -27,18 +43,4 @@
                 }
 
-                // Recommended Courses
-                try {
-                    const recommendedStored = sessionStorage.getItem("recommendedCourses");
-                    if (recommendedStored) {
-                        setRecommendedCourses(JSON.parse(recommendedStored));
-                    } else {
-                        const recommended = await fetchRecommendedCoursesApi(accessToken || "");
-                        setRecommendedCourses(recommended);
-                        sessionStorage.setItem("recommendedCourses", JSON.stringify(recommended));
-                    }
-                } catch (err) {
-                    console.error("Failed to fetch recommended courses:", err);
-                }
-
             } catch (err) {
                 console.error("Unexpected error in AppLoader:", err);
@@ -48,5 +50,9 @@
 
         load();
-    }, [accessToken]);
+    }, [authChecked, accessToken]);
+
+    useEffect(() => {
+        sessionStorage.setItem("recommendedCourses", JSON.stringify(recommendedCourses));
+    }, [recommendedCourses]);
 
 
Index: frontend/src/api/courseApi.ts
===================================================================
--- frontend/src/api/courseApi.ts	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/api/courseApi.ts	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -32,4 +32,14 @@
 }
 
+export const fetchEnrolledCoursesApi = async (accessToken: string): Promise<CoursePreview[]> => {
+    const res = await axios.get(`${backendUrl}/api/courses/enrolled`, {
+        headers: {
+            Authorization: `Bearer ${accessToken}`
+        }
+    });
+
+    return res.data;
+}
+
 export const fetchCourseDetailsApi = async (courseId: number, signal?: AbortSignal): Promise<CourseDetail> => {
     const res = await axios.get(
Index: frontend/src/api/userApi.ts
===================================================================
--- frontend/src/api/userApi.ts	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/api/userApi.ts	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -17,5 +17,5 @@
 export const updateUserApi = async (userInfo: {name: string, workPosition: string, companyType: string}, accessToken: string): Promise<void> => {
     await axios.put(
-        `${backendUrl}/api/users/update`,
+        `${backendUrl}/api/users/update/info`,
         userInfo,
         {
@@ -26,2 +26,26 @@
     )
 }
+
+export const updateUserInterestsApi = async (interests: string[], accessToken: string): Promise<void> => {
+    await axios.put(
+        `${backendUrl}/api/users/update/interests`,
+        interests,
+        {
+            headers: {
+                Authorization: `Bearer ${accessToken}`,
+            }
+        }
+    )
+}
+
+export const updateUserDesiredSkillsApi = async (desiredSkills: string[], accessToken: string): Promise<void> => {
+    await axios.put(
+        `${backendUrl}/api/users/update/desired-skills`,
+        desiredSkills,
+        {
+            headers: {
+                Authorization: `Bearer ${accessToken}`,
+            }
+        }
+    )
+}
Index: frontend/src/components/CollaborationSteps.tsx
===================================================================
--- frontend/src/components/CollaborationSteps.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/components/CollaborationSteps.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -17,5 +17,5 @@
             title: 'Review Your Personalized Plan',
             description:
-                'Receive a tailored roadmap with clear, actionable registerSteps to help you achieve business success.',
+                'Receive a tailored roadmap with clear, actionable steps to help you achieve business success.',
         },
         {
Index: frontend/src/components/CourseCard.tsx
===================================================================
--- frontend/src/components/CourseCard.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/components/CourseCard.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -77,5 +77,5 @@
                 <h3 className="font-semibold text-xl">{card.titleShort}</h3>
 
-                {/*What will be learned*/}
+                {/*Topics covered*/}
                 <p className="text-black/60">{
                     card.topicsCovered.map(item =>
Index: frontend/src/components/DashboardCourses.tsx
===================================================================
--- frontend/src/components/DashboardCourses.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/DashboardCourses.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,186 @@
+import React, {useEffect, useState} from "react";
+import {fetchCoursesApi, fetchEnrolledCoursesApi} from "../api/courseApi.ts";
+import type {CoursePreview} from "../types/CoursePreview.tsx";
+import {useGlobalContext} from "../context/GlobalContext.tsx";
+import {useCourseStorage} from "../context/CourseStorage.ts";
+import StarFilled from "../assets/icons/StarFilled.tsx";
+
+function DashboardCourses() {
+    const {allCourses: allCoursesStorage, setAllCourses: setAllCoursesStorage} = useCourseStorage();
+    const {user, loading, accessToken} = useGlobalContext();
+
+    const [selectedTab, setSelectedTab] = useState("all");
+    const [enrolledCourses, setEnrolledCourses] = useState<CoursePreview[]>([]);
+    const [allCourses, setAllCourses] = useState<CoursePreview[]>(allCoursesStorage || []);
+
+    useEffect(() => {
+        // Enrolled courses
+        fetchEnrolledCoursesApi(accessToken || "")
+            .then(data => {
+                setEnrolledCourses(data);
+            })
+            .catch(error => {
+                console.error("Failed to fetch enrolled courses:", error);
+            })
+
+        if (allCoursesStorage && allCoursesStorage.length > 0) {
+            return;
+        }
+        const storedCourses = sessionStorage.getItem("allCourses");
+        if (storedCourses) {
+            setAllCoursesStorage(JSON.parse(storedCourses));
+            setAllCourses(JSON.parse(storedCourses));
+            return;
+        }
+        fetchCoursesApi(accessToken || "")
+            .then(courses => {
+                setAllCoursesStorage(courses);
+                setAllCourses(courses);
+                sessionStorage.setItem("allCourses", JSON.stringify(courses));
+            })
+            .catch(err => {
+                console.error("Failed to fetch courses:", err);
+            })
+    }, [accessToken]);
+
+
+    function renderContent() {
+        if (enrolledCourses.length === 0) {
+            return (
+                <h2 className="text-2xl font-semibold text-black/60">
+                    No limits, just potential — enroll in your first course!
+                </h2>
+            );
+        }
+
+        switch (selectedTab) {
+            case "all": return (
+                    <>
+                        {
+                            enrolledCourses.map((course, index) => (
+                                <CourseList course={course} key={index}/>
+                            ))
+                        }
+                    </>
+                );
+            case "active": return (
+                    <>
+                        {
+                            enrolledCourses.map((course, index) => (
+                                <CourseList course={course} key={index}/>
+                            ))
+                        }
+                    </>
+                );
+            case "completed": return (
+                    <>
+                        {
+                            enrolledCourses.map((course, index) => (
+                                <CourseList course={course} key={index}/>
+                            ))
+                        }
+                    </>
+                );
+            case "favorites": return (
+                    <>
+                        {
+                            allCourses.filter(course => user?.favoriteCourses.includes(course.id)).map((course, index) => (
+                                <CourseList course={course} key={index}/>
+                            ))
+                        }
+                    </>
+                );
+        }
+    }
+
+    return (
+        <section className="flex flex-col gap-4 text-left pt-top-nav-sm">
+            <h1 className="text-3xl font-semibold">My Courses</h1>
+            <ul>
+                <ListTab name={"All"} isSelected={selectedTab === "all"}
+                         setSelectedTab={() => setSelectedTab("all")}/>
+                <ListTab name={"Active"} isSelected={selectedTab === "active"}
+                         setSelectedTab={() => setSelectedTab("active")}/>
+                <ListTab name={"Completed"} isSelected={selectedTab === "completed"}
+                         setSelectedTab={() => setSelectedTab("completed")}/>
+                <ListTab name={"Favorites"} isSelected={selectedTab === "favorites"}
+                         setSelectedTab={() => setSelectedTab("favorites")}/>
+            </ul>
+            <div className="flex flex-col gap-4">
+                {renderContent()}
+            </div>
+        </section>
+    )
+}
+
+function CourseList({course}: { course: CoursePreview }) {
+
+    return (
+        <aside
+            style={{"--card-color": course.color} as React.CSSProperties}
+            className="flex gap-8 items-center p-4 border-1 border-black/40 rounded-xl"
+        >
+            {/*IMAGE*/}
+            <div className="overflow-clip rounded-lg w-1/3">
+                <img src={course.imageUrl} alt={course.title}
+                     className="aspect-video object-cover"/>
+            </div>
+
+            {/*INFO*/}
+            <div className="flex flex-col gap-4 w-2/3">
+                {/*TITLE AND TOPICS COVERED*/}
+                <div className="flex flex-col gap-0">
+                    <h3 className="text-xl font-bold">{course.titleShort}</h3>
+
+                    <p className="text-black/60">{
+                        course.topicsCovered.map(item =>
+                            item
+                                .toLowerCase()
+                                .replace(/_/g, " ")
+                                .replace(/\b\w/g, c => c.toUpperCase())
+                        )
+                            .join(" • ")
+                    }</p>
+                </div>
+
+                {/*Info*/}
+                <div className="flex flex-wrap gap-2 whitespace-nowrap">
+                    <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                        <StarFilled className="w-4 h-4 text-gold"/> {course.rating / course.ratingCount}
+                    </div>
+                    <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                        {course.ratingCount} reviews
+                    </div>
+                    <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                        {(course.durationMinutes / 60).toFixed(1)} hours
+                    </div>
+                    <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                        {course.courseContentCount} modules
+                    </div>
+                    <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                        {course.difficulty.charAt(0) + course.difficulty.slice(1).toLowerCase()}
+                    </div>
+                </div>
+            </div>
+        </aside>
+    )
+}
+
+function ListTab({name, isSelected, setSelectedTab}: {
+    name: string;
+    isSelected: boolean;
+    setSelectedTab: () => void;
+}) {
+    return (
+        <li className="inline-block text-lg font-medium ">
+            <button
+                className={`hover:text-black px-4 py-2 cursor-pointer ${isSelected ? "border-b-2 border-shifter" : "text-black/40"}`}
+                onClick={setSelectedTab}
+            >
+                {name}
+            </button>
+        </li>
+    )
+}
+
+export default DashboardCourses;
Index: frontend/src/components/HeroHome.tsx
===================================================================
--- frontend/src/components/HeroHome.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/components/HeroHome.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -6,6 +6,7 @@
 
     return (
-        <section className="shadow-md shadow-black/80 flex flex-col gap-0
-        items-center px-horizontal-md pt-30 w-full bg-white rounded-b-[60px]">
+        <section
+            className="relative flex flex-col gap-0
+        items-center pt-top-nav-md bg-white w-full rounded-b-[60px]">
             <h1 className="text-6xl">
                 Business <strong className="text-shifter">Excellence</strong>
@@ -17,5 +18,5 @@
             {/*     className="absolute left-30 rotate-50 w-20 h-auto"/>*/}
 
-            <div className="relative flex justify-between items-center w-full">
+            <div className="relative z-1 px-horizontal-md bg-white rounded-b-[60px] flex justify-between items-center w-full">
 
                 {/*LEFT TEXT*/}
@@ -75,7 +76,11 @@
                         </p>
                         <p className="text-right">
-                            <span className="text-3xl font-bold">2</span> <br/>
-                            <span className="whitespace-nowrap font-light">Expert Mentors</span>
+                            <span className="text-3xl font-bold">5000+</span> <br/>
+                            <span className="whitespace-nowrap font-light">Mentoring Hours</span>
                         </p>
+                        {/*<p className="text-right">*/}
+                        {/*    <span className="text-3xl font-bold">2</span> <br/>*/}
+                        {/*    <span className="whitespace-nowrap font-light">Expert Mentors</span>*/}
+                        {/*</p>*/}
                     </div>
                     <div className="flex gap-1 text-gold">
@@ -89,5 +94,8 @@
             </div>
 
-
+            <div
+                className="shadow-md shadow-black/80
+                absolute bottom-0 w-full h-40 z-0 rounded-b-[60px]"
+            />
         </section>
     )
Index: frontend/src/components/ProfileInfo.tsx
===================================================================
--- frontend/src/components/ProfileInfo.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/components/ProfileInfo.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -3,5 +3,4 @@
 function ProfileInfo() {
     const {user} = useGlobalContext();
-    console.log(user)
 
     return (
Index: frontend/src/components/ProfileModalAddSkills&Interests.tsx
===================================================================
--- frontend/src/components/ProfileModalAddSkills&Interests.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/ProfileModalAddSkills&Interests.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,188 @@
+import ReactDom from "react-dom";
+import {toEnumFormat} from "../utils/toEnumFormat.ts";
+import React, {useEffect} from "react";
+import {fetchCoursesSkillsApi, fetchCoursesTopicsApi, fetchRecommendedCoursesApi} from "../api/courseApi.ts";
+import {useGlobalContext} from "../context/GlobalContext.tsx";
+import {X} from "lucide-react";
+import ProfileModalAddSkillsInterestsSkeleton from "./skeletons/ProfileModalAddSkills&InterestsSkeleton.tsx";
+import {updateUserDesiredSkillsApi, updateUserInterestsApi} from "../api/userApi.ts";
+import {useCourseStorage} from "../context/CourseStorage.ts";
+
+function ProfileModalAddSkillsInterests({type, label, closeModal}: {
+    type: "desiredSkills" | "interests";
+    label: string;
+    closeModal: () => void;
+}) {
+    const {user, setUser, accessToken} = useGlobalContext();
+    const {setRecommendedCourses} = useCourseStorage();
+    const [allOptions, setAllOptions] = React.useState<string[]>([]);
+    const [options, setOptions] = React.useState<string[]>([]);
+    const [selected, setSelected] = React.useState<string[]>(user![type] || []);
+    const [filterText, setFilterText] = React.useState("");
+    const [loading, setLoading] = React.useState(false);
+    const [componentRenderLoading, setComponentRenderLoading] = React.useState(true);
+    const [error, setError] = React.useState<string | null>(null);
+
+    useEffect(() => {
+        if (type === "desiredSkills") {
+            fetchCoursesSkillsApi()
+                .then(skills => {
+                    setAllOptions(skills);
+                    setOptions(skills);
+                })
+                .catch(err => {
+                    console.error("Failed to fetch course skills", err);
+                })
+                .finally(() => setComponentRenderLoading(false));
+        } else if (type === "interests") {
+            fetchCoursesTopicsApi()
+                .then(topics => {
+                    setAllOptions(topics);
+                    setOptions(topics);
+                })
+                .catch(err => {
+                    console.error("Failed to fetch course topics", err);
+                })
+                .finally(() => setComponentRenderLoading(false));
+        }
+    }, []);
+
+    useEffect(() => {
+        // Disable scroll
+        document.body.classList.add("overflow-hidden");
+
+        // Cleanup: re-enable scroll when modal unmounts
+        return () => {
+            document.body.classList.remove("overflow-hidden");
+        };
+    }, []);
+
+
+    const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setFilterText(value);
+        setOptions(allOptions.filter(option =>
+            option.toLowerCase().includes(value.toLowerCase())
+        ));
+    };
+
+    const handleOptionClick = (option: string) => {
+        setSelected((prev: string[]) => (
+            prev.includes(option)
+                ? prev.filter(item => item !== option)
+                : [...prev, option]
+        ));
+    };
+
+    const handleSubmit = () => {
+        if (selected.length === 0) {
+            setError("Help us tailor your experience — please select at least one option");
+            return;
+        }
+
+        setLoading(true)
+        const updateFn = type === "interests" ? updateUserInterestsApi : updateUserDesiredSkillsApi;
+        updateFn(selected, accessToken!)
+            .then(() => {
+                setUser(prev => ({
+                    ...prev!,
+                    [type]: selected
+                }))
+
+                fetchRecommendedCoursesApi(accessToken!)
+                    .then(courses => {
+                        setRecommendedCourses(courses);
+                    })
+                    .catch(err => {
+                        console.error("Failed to fetch recommended courses after update", err);
+                    })
+
+                closeModal();
+            })
+            .catch(err => {
+                console.error("Failed to update user interests", err);
+            })
+            .finally(() => setLoading(false));
+    }
+
+
+    if (componentRenderLoading)
+        return <ProfileModalAddSkillsInterestsSkeleton closeModal={closeModal} />;
+
+    return ReactDom.createPortal(
+        <>
+            {/*OVERFLOW*/}
+            <div className="fixed top-0 bottom-0 left-0 right-0 bg-black/70 z-1000"/>
+
+            <section className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white shadow-lg py-4 px-6 z-1000
+                     max-w-2/3 min-w-1/2 max-h-5/6 rounded-lg flex flex-col gap-8">
+                <div className="flex flex-col gap-2">
+                    <button
+                        onClick={closeModal}
+                        className="hover:bg-black/10 transition-all duration-300 ease-out ml-auto px-2 w-fit rounded-sm cursor-pointer">
+                        <X size={32} />
+                    </button>
+
+                    <div className="flex justify-between w-full flex-wrap ">
+                        <label className="text-shifter font-medium text-2xl">
+                            {label}
+                        </label>
+                        <input
+                            type={"search"}
+                            className="px-3 py-1 rounded-md border border-black/10 text-black text-md focus:outline-none focus:ring-2 focus:ring-shifter/60 transition-all"
+                            placeholder={`Search ${type === "interests" ? "interests" : "skills"}...`}
+                            value={filterText}
+                            onChange={handleFilterChange}
+                        />
+                    </div>
+                </div>
+
+                <div
+                    className="relative custom-scrollbar flex gap-2 flex-wrap w-full  items-center overflow-y-auto">
+                    {options.map((option, index) => (
+                        <button
+                            key={index}
+                            name={option}
+                            className={`${selected.includes(toEnumFormat(option)) ? "bg-shifter text-white shadow-black/20" : "bg-black/10 text-black shadow-shifter/20"} 
+                            px-4 py-1 rounded-md transition-all duration-200 ease-in-out hover:shadow-md
+                            focus:outline-none cursor-pointer whitespace-nowrap`}
+                            onClick={() => handleOptionClick(option)}
+                        >
+                            {
+                                option
+                                    .toLowerCase()
+                                    .replace(/_/g, " ")
+                                    .replace(/\b\w/g, (c) => c.toUpperCase())
+                            }
+                        </button>
+                    ))}
+                </div>
+
+                <div className="flex flex-col gap-2 items-center">
+                    {
+                        error && error.length > 0 && (
+                            <p className="text-red-500 text-center">
+                                {error}
+                            </p>
+                        )
+                    }
+                    <div className="flex items-center gap-2">
+                        <button
+                            onClick={handleSubmit}
+                            className="shadow-md shadow-shifter/30 hover:shadow-lg hover:shadow-shifter/50 transition-all duration-200 ease-in-out cursor-pointer
+                    bg-shifter px-20 py-2 w-fit text-white rounded-sm font-semibold border-2 border-white/40"
+                        >
+                            {
+                                loading ? "Submitting..." : "Submit Changes"
+                            }
+                        </button>
+                        {loading && <div className="h-full loader"></div>}
+                    </div>
+                </div>
+            </section>
+        </>,
+        document.getElementById("portal")!
+    )
+}
+
+export default ProfileModalAddSkillsInterests;
Index: frontend/src/components/ProfileSkills&Interests.tsx
===================================================================
--- frontend/src/components/ProfileSkills&Interests.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/components/ProfileSkills&Interests.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -1,7 +1,9 @@
 import React from "react";
+import {Plus} from "lucide-react";
 
-function ProfileSkillsInterests({ title, pills }: {
+function ProfileSkillsInterests({ title, pills, openModal }: {
     title: string;
     pills: string[];
+    openModal?: () => void;
 }) {
     const [showAll, setShowAll] = React.useState(false);
@@ -11,5 +13,18 @@
     return (
         <section className="flex flex-col gap-2 items-start w-full rounded-xl">
-            <h2 className="text-2xl font-semibold">{title}</h2>
+            <div className="flex justify-between items-center w-full">
+                <h2 className="text-2xl font-semibold">{title}</h2>
+                {
+                    openModal && (
+                        <button
+                            onClick={openModal}
+                            className="hover:bg-shifter/20 px-2 rounded-sm transition-all duration-300 ease-out
+                            cursor-pointer text-shifter"
+                        >
+                            <Plus size={24} />
+                        </button>
+                    )
+                }
+            </div>
             <div className="flex gap-2 w-full flex-wrap border-1 border-dark-blue/10 bg-white rounded-lg p-4">
                 {
Index: frontend/src/components/inputs/RegisterSlider.tsx
===================================================================
--- frontend/src/components/inputs/RegisterSlider.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/components/inputs/RegisterSlider.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -29,8 +29,4 @@
             };
         });
-
-        // Reset filter input
-        // setFilterText("");
-        // setOptions(allOptions);
     };
 
Index: frontend/src/components/registerSteps/RegisterStepFour.tsx
===================================================================
--- frontend/src/components/registerSteps/RegisterStepFour.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/components/registerSteps/RegisterStepFour.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -25,10 +25,10 @@
 
     useEffect(() => {
-        if (user.skillGap.length === 0) {
+        if (user.desiredSkills.length === 0) {
             setError("We’d love to support your growth — select at least one skill you'd like to improve");
         } else {
             setError("");
         }
-    }, [user.skillGap]);
+    }, [user.desiredSkills]);
 
     return (
@@ -38,7 +38,7 @@
                 skills.length > 0 &&
                 <RegisterSlider
-                    label={"Identify Skills Gap"}
-                    name={"skillGap"}
-                    id={"skills-gap"}
+                    label={"Outline Your Learning Goals"}
+                    name={"desiredSkills"}
+                    id={"desired-skills"}
                     options={skills}
                     setUser={setUser}
Index: frontend/src/components/registerSteps/RegisterStepThree.tsx
===================================================================
--- frontend/src/components/registerSteps/RegisterStepThree.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/components/registerSteps/RegisterStepThree.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -26,5 +26,5 @@
     useEffect(() => {
         if (user.interests.length === 0) {
-            setError("Help us understand you better — pick at least one preference");
+            setError("Help us understand you better — select at least one topic you like");
         } else {
             setError("");
@@ -39,5 +39,5 @@
                 interests.length > 0 &&
                 <RegisterSlider
-                    label={"Pick Your Preferences"}
+                    label={"Select Topics You Like"}
                     name={"interests"}
                     id={"interests"}
Index: frontend/src/components/skeletons/ProfileModalAddSkills&InterestsSkeleton.tsx
===================================================================
--- frontend/src/components/skeletons/ProfileModalAddSkills&InterestsSkeleton.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/components/skeletons/ProfileModalAddSkills&InterestsSkeleton.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,58 @@
+import ReactDom from "react-dom";
+import {X} from "lucide-react";
+import {useEffect} from "react";
+
+function ProfileModalAddSkillsInterestsSkeleton({closeModal}: {
+    closeModal: () => void;
+}) {
+    useEffect(() => {
+        // Disable scroll
+        document.body.classList.add("overflow-hidden");
+
+        // Cleanup: re-enable scroll when modal unmounts
+        return () => {
+            document.body.classList.remove("overflow-hidden");
+        };
+    }, []);
+
+    return ReactDom.createPortal(
+        <>
+            {/*OVERFLOW*/}
+            <div className="fixed top-0 bottom-0 left-0 right-0 bg-black/70 z-1000"/>
+
+            <section className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white shadow-lg py-4 px-6 z-1000
+                     max-w-2/3 max-h-5/6 rounded-lg flex flex-col gap-4">
+                <button
+                    onClick={closeModal}
+                    className="hover:bg-black/10 transition-all duration-300 ease-out ml-auto px-2 w-fit rounded-sm cursor-pointer">
+                    <X size={32} />
+                </button>
+
+                <div className="flex justify-between w-full flex-wrap gap-2">
+                    {/* Label skeleton */}
+                    <div className="h-7 bg-gray-300 rounded w-32 animate-pulse"></div>
+
+                    {/* Search input skeleton */}
+                    <div className="h-8 bg-gray-300 rounded-md w-48 animate-pulse"></div>
+                </div>
+
+                <div className="relative custom-scrollbar flex gap-2 flex-wrap w-full items-center overflow-y-auto">
+                    {/* Option buttons skeleton */}
+                    {[...Array(28)].map((_, index) => (
+                        <div
+                            key={index}
+                            className="h-8 bg-gray-300 rounded-md animate-pulse"
+                            style={{
+                                width: `${Math.floor(Math.random() * 60) + 80}px`
+                            }}
+                        >
+                        </div>
+                    ))}
+                </div>
+            </section>
+        </>,
+        document.getElementById("portal")!
+    )
+}
+
+export default ProfileModalAddSkillsInterestsSkeleton;
Index: frontend/src/context/CourseStorage.ts
===================================================================
--- frontend/src/context/CourseStorage.ts	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/context/CourseStorage.ts	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -7,15 +7,13 @@
     enrollments: Enrollment[] | null;
     recommendedCourses: CoursePreview[] | null;
-    favoriteCourses: number[] | null;
     allCourses: CoursePreview[] | null;
-    topics: string[] | null;
-    skills: string[] | null;
+    // topics: string[] | null;
+    // skills: string[] | null;
 
     setEnrollments: (enrollments: Enrollment[] | null) => void;
     setRecommendedCourses: (courses: CoursePreview[]) => void;
-    setFavoriteCourses: (courses: number[] | null) => void;
     setAllCourses: (courses: CoursePreview[]) => void;
-    setTopics: (topics: string[]) => void;
-    setSkills: (skills: string[]) => void;
+    // setTopics: (topics: string[]) => void;
+    // setSkills: (skills: string[]) => void;
 }
 
@@ -23,14 +21,12 @@
     enrollments: null,
     recommendedCourses: null,
-    favoriteCourses: null,
     allCourses: null,
-    topics: null,
-    skills: null,
+    // topics: null,
+    // skills: null,
 
     setEnrollments: (enrollments) => set({ enrollments: enrollments }),
     setRecommendedCourses: (courses) => set({ recommendedCourses: courses }),
-    setFavoriteCourses: (courses) => set({ favoriteCourses: courses }),
     setAllCourses: (courses) => set({ allCourses: courses }),
-    setTopics: (topics) => set({ topics }),
-    setSkills: (skills) => set({ skills })
+    // setTopics: (topics) => set({ topics }),
+    // setSkills: (skills) => set({ skills })
 }));
Index: frontend/src/context/GlobalContext.tsx
===================================================================
--- frontend/src/context/GlobalContext.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/context/GlobalContext.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -17,4 +17,6 @@
     accessToken: string | null;
     setAccessToken: Dispatch<SetStateAction<string | null>>;
+    authChecked: boolean;
+    setAuthChecked: Dispatch<SetStateAction<boolean>>;
     register: (user: UserRegister) => Promise<void>;
     login: (email: string, password: string) => Promise<void>;
@@ -31,4 +33,5 @@
     const [user, setUser] = useState<User | null>(null);
     const [accessToken, setAccessToken] = useState<string | null>(null);
+    const [authChecked, setAuthChecked] = useState<boolean>(false);
     const [loading, setLoading] = useState(true);
     const navigate = useNavigate();
@@ -83,4 +86,5 @@
                 setAccessToken(data.accessToken);
                 setUser(data.user);
+                setAuthChecked(true);
             })
             .catch(error => {
@@ -106,4 +110,6 @@
                 accessToken,
                 setAccessToken,
+                authChecked,
+                setAuthChecked,
                 register,
                 login,
Index: frontend/src/global.css
===================================================================
--- frontend/src/global.css	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/global.css	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -11,4 +11,7 @@
     --spacing-vertical-sm: 1rem;
 
+    --spacing-top-nav-lg: 8rem;
+    --spacing-top-nav-md: 7rem;
+    --spacing-top-nav-sm: 6rem;
 
 
Index: frontend/src/layout/Navbar.tsx
===================================================================
--- frontend/src/layout/Navbar.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/layout/Navbar.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -4,83 +4,56 @@
 
 function Navbar() {
-    const {user, logout} = useGlobalContext();
+    const {user} = useGlobalContext();
 
     return (
         <nav
-            className="-mt-20 sticky top-2 border-3 border-white/30 bg-black/50 backdrop-blur-md
-            z-50 w-85/100 mx-auto flex items-center justify-between py-3 px-10 pr-0 rounded-full
-            text-white font-light overflow-clip ">
-
+            className=" fixed top-2 z-50 w-11/12 left-1/2 -translate-x-1/2 flex items-center justify-between py-3 px-10 pr-0 rounded-full
+            border-3 border-white/30 bg-black/50 backdrop-blur-md text-white font-light overflow-clip"
+        >
             {/* Left nav links */}
-            <div className="flex gap-20 text-lg items-center">
-                <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/courses" className=" transition-all
-                    duration-300 ease-in-out z-10">Courses</Link>
-                    <hr className="relative -left-30 group-hover:-left-6 border-t-2
-                     rounded-full transition-all duration-300 ease-in-out"/>
-                </div>
-                <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/mentoring" className=" transition-all
-                    duration-300 ease-in-out z-10">Mentoring</Link>
-                    <hr className="relative -left-30 group-hover:-left-6 border-t-2
-                     rounded-full transition-all duration-300 ease-in-out"/>
-                </div>
-                <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/academies" className=" transition-all
-                    duration-300 ease-in-out z-10">Academies</Link>
-                    <hr className="relative -left-30 group-hover:-left-6 border-t-2
-                     rounded-full transition-all duration-300 ease-in-out"/>
-                </div>
+            <div className="flex w-36/100 justify-between text-lg items-center">
+                {/* Link group */}
+                <LinkGroup to="/courses" label="Courses"/>
+                <LinkGroup to="/mentoring" label="Mentoring"/>
+                <LinkGroup to="/academies" label="Academies"/>
             </div>
 
-            {/* Centered Logo */}
-            <Link
-                to="/"
-                className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-            >
-                <img src={logo} alt="Shifter Logo" width={160}/>
-            </Link>
+            {/* Centered Logo (NO ABSOLUTE!) */}
+            <div className="flex justify-center items-center w-fit px-20">
+                <Link to="/">
+                    <img src={logo} alt="Shifter Logo" className="h-14"/>
+                </Link>
+            </div>
 
-            {/* Right side icons and button */}
-            <div className="flex gap-12 text-lg items-center">
-
-                <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/about" className=" transition-all
-                    duration-300 ease-in-out z-10">About</Link>
-                    <hr className="relative -left-30 group-hover:-left-4 border-t-2
-                     rounded-full transition-all duration-300 ease-in-out"/>
-                </div>
-                {
-                    user ? (
-                        <>
-                            <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                                <Link to="/dashboard" className=" transition-all
-                                    duration-300 ease-in-out z-10 cursor-pointer">Dashboard</Link>
-                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
-                                    rounded-full transition-all duration-300 ease-in-out"/>
-                            </div>
-                            <div className="flex gap-6 items-center">
-                                <Link
-                                    to="/profile"
-                                    className="hover:bg-shifter transition-all duration-200 ease-in-out cursor-pointer
-                                    h-full aspect-square rounded-full border-2 border-white/20 p-3 bg-shifter/40 text-white font-bold flex items-center justify-center">
-                                    {user.name.split(" ")[0].charAt(0).toUpperCase()}
-                                </Link>
-                                <div onClick={logout}
-                                     className="hover:-translate-x-4 transition-all duration-200 ease-in-out cursor-pointer
-                                      relative -mr-4 px-6 pr-9 py-2 bg-shifter rounded-l-lg font-medium
-                                      shadow-md shadow-shifter/30"
-                                >Free Consultation
-                                </div>
-                            </div>
-                        </>
-                    ) : (
-                        <Link to="/login"
-                              className="hover:-translate-x-4 transition-all duration-200 ease-in-out cursor-pointer
+            {/* Right nav links + profile */}
+            <div className="flex w-36/100 justify-between text-lg items-center gap-6">
+                <LinkGroup to="/about" label="About"/>
+                {user ? (
+                    <>
+                        <LinkGroup to="/dashboard" label="Dashboard"/>
+                        <div className="flex gap-4 items-center">
+                            <Link
+                                to="/profile"
+                                className="hover:bg-shifter transition-all duration-200 ease-in-out cursor-pointer
+                                h-full aspect-square rounded-full border-2 border-white/20 p-3 bg-shifter/40 text-white font-bold flex items-center justify-center"
+                            >
+                                {user.name.split(" ")[0].charAt(0).toUpperCase()}
+                            </Link>
+                            <Link
+                                to="/free-consultation"
+                                className="hover:-translate-x-2 transition-all duration-200 ease-in-out cursor-pointer
+                                relative -mr-4 px-6 pr-9 py-2 bg-shifter rounded-l-lg font-medium
+                                shadow-md shadow-shifter/30"
+                            >Free Consultation
+                            </Link>
+                        </div>
+                    </>
+                ) : (
+                    <Link to="/login"
+                          className="hover:-translate-x-4 transition-all duration-200 ease-in-out cursor-pointer
                               relative -mr-4 px-6 pr-9 py-2 bg-shifter rounded-l-lg font-medium
                               shadow-md shadow-shifter/30"
-                        >Login / Register</Link>
-                    )
-                }
+                    >Login / Register</Link>
+                )}
             </div>
         </nav>
@@ -89,3 +62,13 @@
 }
 
+const LinkGroup = ({to, label}: { to: string; label: string }) => (
+    <div className="flex flex-col gap-0 overflow-clip p-1 group">
+        <Link to={to} className="transition-all duration-300 ease-in-out z-10">
+            {label}
+        </Link>
+        <hr className="relative -left-30 group-hover:-left-6 border-t-2 rounded-full transition-all duration-300 ease-in-out"/>
+    </div>
+);
+
+
 export default Navbar
Index: frontend/src/pages/Courses.tsx
===================================================================
--- frontend/src/pages/Courses.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/pages/Courses.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -197,9 +197,9 @@
         <main className="font-montserrat bg-white">
             <section
-                className="relative flex flex-col items-center justify-center py-vertical-lg pt-30 gap-4 px-horizontal-lg shadow-sm">
+                className="relative flex flex-col items-center justify-center py-vertical-lg pt-top-nav-md gap-4 px-horizontal-lg shadow-sm">
                 <img
                     src={ShifterRocket}
                     alt="Shifter Rocket"
-                    className="absolute top-30 left-20 rotate-45 w-16 h-auto"
+                    className="absolute top-top-nav-sm left-20 rotate-45 w-16 h-auto"
                 />
                 <h1 className="text-6xl">
Index: frontend/src/pages/Dashboard.tsx
===================================================================
--- frontend/src/pages/Dashboard.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/pages/Dashboard.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,18 @@
+import DashboardCourses from "../components/DashboardCourses.tsx";
+
+function Dashboard() {
+
+    return (
+        <main className="flex gap-4 px-horizontal-md py-vertical-lg">
+            <div className="w-3/5">
+                <DashboardCourses/>
+            </div>
+
+            <div className="w-2/5">
+
+            </div>
+        </main>
+    )
+}
+
+export default Dashboard;
Index: frontend/src/pages/FreeConsultation.tsx
===================================================================
--- frontend/src/pages/FreeConsultation.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
+++ frontend/src/pages/FreeConsultation.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -0,0 +1,136 @@
+import {useGlobalContext} from "../context/GlobalContext.tsx";
+
+function FreeConsultation() {
+    const {user} = useGlobalContext();
+
+    return (
+        <main className="">
+            {/*HERO*/}
+            <section
+                style={{paddingTop: 'calc(var(--spacing-top-nav-lg) + 4rem)'}}
+                className="bg-dark-blue text-white w-full px-horizontal-lg py-vertical-lg pt-top-nav-lg text-left">
+                <div className="flex flex-col gap-4 w-1/2">
+                    <h1 className="text-5xl font-bold">Book Your Free Expert Session</h1>
+                    <p className="text-xl font-light ">
+                        Talk to an expert about your business goals and challenges. Get a personalized mentorship
+                        plan or course recommendation that fits your unique situation.
+                    </p>
+                </div>
+            </section>
+
+            <section className="bg-dark-blue/5 flex gap-20 py-vertical-lg px-horizontal-lg text-left">
+                {/*STEPS*/}
+                <div className="flex flex-col gap-12 w-1/3">
+                    <h2 className="text-dark-blue font-bold text-5xl">Next Steps After Submission?</h2>
+
+                    <div>
+                        <ol className="flex flex-col">
+                            <Step
+                                title={"Expert Prepares and Sends Invite"}
+                                description={"Our expert reviews your request and sends a meeting invitation to your email."}
+                            />
+                            <Step
+                                title={"You Confirm the Invite"}
+                                description={"You’ll receive an email with the meeting details — simply confirm the invite to secure your spot."}
+                            />
+                            <Step
+                                title={"Join Your Online Session"}
+                                description={"Attend the session and walk away with a tailored plan built around your goals — designed to help you overcome challenges, grow, and move forward with clarity."}
+                                isLast={true}
+                            />
+                        </ol>
+                    </div>
+                </div>
+
+                {/*FORM*/}
+                <div className="flex flex-col gap-4 bg-white rounded-xl w-2/3 px-horizontal-sm py-vertical-md ">
+                    {/*Automatically populated*/}
+                    <div className="grid grid-cols-2 gap-y-6">
+                        <p className="font-light text-black/60 text-lg ">Name: <span
+                            className="text-black font-medium">{user?.name}</span></p>
+                        <p className="font-light text-black/60 text-lg ">Email: <span
+                            className="text-black font-medium">{user?.email}</span></p>
+                        <p className="font-light text-black/60 text-lg ">Company Type: <span
+                            className="text-black font-medium">{user?.companyType.toLowerCase().split("_").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")}</span>
+                        </p>
+                        <p className="font-light text-black/60 text-lg ">Work Position: <span
+                            className="text-black font-medium">{user?.workPosition}</span></p>
+                        <p className="text-black/40 col-span-2">
+                            <sup>*</sup> These values are automatically populated from your profile.
+                            If any of them are incorrect, please update them in the Profile page.
+                        </p>
+                    </div>
+
+                    <hr className="border-t-2 border-black/20"/>
+
+                    {/*Form*/}
+                    <form
+                        className="flex flex-col gap-6 w-full">
+                        <LabelInput
+                            label="About your business"
+                            name="intro"
+                            placeholder="What you do, industry, customers"
+                        />
+                        <LabelInput
+                            label="Your current challenges"
+                            name="challenges"
+                            placeholder="E.g. sales, growth, team issues"
+                        />
+                        <LabelInput
+                            label="What you want from the session"
+                            name="expectations"
+                            placeholder="Advice, strategy, solutions"
+                        />
+                        <LabelInput
+                            label="Anything else? (optional)"
+                            name="additional"
+                            placeholder="Extra context or details"
+                        />
+
+                    </form>
+                </div>
+            </section>
+        </main>
+    )
+}
+
+function LabelInput({label, name, placeholder}: {
+    label: string;
+    name: string;
+    placeholder: string;
+}) {
+    return (
+        <label className="flex flex-col gap-2">
+            <span className="text-black font-semibold text-xl">{label}</span>
+            <textarea
+                rows={2}
+                name={name}
+                placeholder={placeholder}
+                className="bg-dark-blue/5 border-1 border-black/10 py-1 px-2 rounded-sm
+                font-medium resize-none overflow-hidden min-h-fit"
+            />
+        </label>
+    )
+}
+
+
+function Step({title, description, isLast}: {
+    title: string;
+    description: string;
+    isLast?: boolean;
+}) {
+    return (
+        <li className={`${isLast ? 'border-transparent' : ''}
+        relative pl-6 flex gap-4 items-start border-l-4 border-dark-blue/10`}>
+            <div
+                style={{transform: 'translateX(calc(-0.75rem - 2px))'}}
+                className="absolute left-0 top-0 h-[1.5rem] aspect-square bg-dark-blue rounded-full"/>
+            <div className="pb-12">
+                <h3 className="text-xl font-bold text-dark-blue">{title}</h3>
+                <p className="text-black/80">{description}</p>
+            </div>
+        </li>
+    )
+}
+
+export default FreeConsultation;
Index: frontend/src/pages/Profile.tsx
===================================================================
--- frontend/src/pages/Profile.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/pages/Profile.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -4,24 +4,48 @@
 import ProfileMyProfile from "../components/ProfileMyProfile.tsx";
 import ProfileSkeleton from "../components/skeletons/ProfileSkeleton.tsx";
+import React from "react";
+import ProfileModalAddSkillsInterests from "../components/ProfileModalAddSkills&Interests.tsx";
 
 function Profile() {
     const {user, loading} = useGlobalContext();
+    const [showModalDesiredSkills, setShowModalDesiredSkills] = React.useState(false);
+    const [showModalInterests, setShowModalInterests] = React.useState(false);
 
     if (loading) {
-        return <ProfileSkeleton />;
+        return <ProfileSkeleton/>;
     }
 
     return (
-        <main className="grid grid-cols-4 gap-x-12 py-vertical-lg pt-30 px-horizontal-md bg-dark-blue/5">
+        <main className="grid grid-cols-4 gap-x-12 py-vertical-lg pt-top-nav-lg px-horizontal-md bg-dark-blue/5">
             <div className="col-span-1 flex flex-col gap-6">
-                <ProfileInfo />
-                {user?.skills && user.skills.length > 0 && (<ProfileSkillsInterests title="Learned Skills" pills={user?.skills || []} />)}
-                <ProfileSkillsInterests title="Desired Skills" pills={user?.skillGap || []} />
-                <ProfileSkillsInterests title="Interests" pills={user?.interests || []} />
+                <ProfileInfo/>
+                {user?.skills && user.skills.length > 0 && (
+                    <ProfileSkillsInterests title="Learned Skills" pills={user?.skills || []} />)}
+                <ProfileSkillsInterests title="Desired Skills" pills={user?.desiredSkills || []} openModal={() => setShowModalDesiredSkills(true)}/>
+                <ProfileSkillsInterests title="Interests" pills={user?.interests || []} openModal={() => setShowModalInterests(true)}/>
             </div>
 
             <div className="col-span-3">
-                <ProfileMyProfile />
+                <ProfileMyProfile/>
             </div>
+
+            {
+                showModalDesiredSkills && (
+                    <ProfileModalAddSkillsInterests
+                        type={"desiredSkills"}
+                        label={"Identify Skills You’d Like to Improve"}
+                        closeModal={() => setShowModalDesiredSkills(false)}
+                    />
+                )
+            }
+            {
+                showModalInterests && (
+                    <ProfileModalAddSkillsInterests
+                        type={"interests"}
+                        label={"Choose Topics You’re Interested In"}
+                        closeModal={() => setShowModalInterests(false)}
+                    />
+                )
+            }
         </main>
     )
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/pages/Register.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -1,3 +1,3 @@
-import React from "react";
+import React, {useEffect} from "react";
 import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
 import ShifterArrow from "../../public/Shifter-Arrow-White.png";
@@ -36,7 +36,11 @@
         companyType: "",
         interests: [],
-        skillGap: [],
+        desiredSkills: [],
     });
     const navigate = useNavigate();
+
+    useEffect(() => {
+        console.log(user)
+    }, [user]);
 
     const handleNext = async () => {
Index: frontend/src/types/SliderProps.tsx
===================================================================
--- frontend/src/types/SliderProps.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/types/SliderProps.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -2,5 +2,5 @@
 import type {UserRegister} from "./UserRegister.tsx";
 
-type UserArrayFields = 'interests' | 'skills' | 'skillGap';
+type UserArrayFields = 'interests' | 'desiredSkills';
 export interface SliderProps {
     label: string;
Index: frontend/src/types/User.tsx
===================================================================
--- frontend/src/types/User.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/types/User.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -7,5 +7,5 @@
     interests: string[];
     skills: string[];
-    skillGap: string[];
+    desiredSkills: string[];
     points: number;
     favoriteCourses: number[];
Index: frontend/src/types/UserRegister.tsx
===================================================================
--- frontend/src/types/UserRegister.tsx	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/src/types/UserRegister.tsx	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -7,4 +7,4 @@
     companyType: string;
     interests: string[];
-    skillGap: string[];
+    desiredSkills: string[];
 }
Index: frontend/tailwind.config.js
===================================================================
--- frontend/tailwind.config.js	(revision 53ff2668ca572fbec7428abacd1ec28b5173f7fc)
+++ frontend/tailwind.config.js	(revision af4cd1f4c1fd5370da9c889d92ef91382f245b92)
@@ -1,4 +1,3 @@
 /** @type {import('tailwindcss').Config} */
-
 export default {
     content: [
@@ -8,4 +7,38 @@
     theme: {
         extend: {
+            spacing: {
+                // Map your spacing variables as custom spacing tokens
+                'horizontal-lg': '10rem',   // --spacing-horizontal-lg
+                'horizontal-md': '7rem',    // --spacing-horizontal-md
+                'horizontal-sm': '4rem',    // --spacing-horizontal-sm
+
+                'vertical-lg': '3rem',      // --spacing-vertical-lg
+                'vertical-md': '2rem',      // --spacing-vertical-md
+                'vertical-sm': '1rem',      // --spacing-vertical-sm
+
+                'top-nav-lg': '8rem',       // --spacing-top-nav-lg
+                'top-nav-md': '7rem',       // --spacing-top-nav-md
+                'top-nav-sm': '6rem',       // --spacing-top-nav-sm
+            },
+            colors: {
+                beige: '#F0CFB5',
+                shifter: '#008CC2',
+                red: '#FF6F61',
+                'dark-blue': '#002E5D',
+                'deep-green': '#2C6B3D',
+                gold: '#FFB300',
+                teal: '#009688',
+                'dark-gray': '#666666',
+                'bright-gray': '#DDDDDD',
+                gray: '#E5E7EB',
+            },
+            boxShadow: {
+                'up-sm': '0 -1px 2px 0 rgba(0, 0, 0, 0.05)',
+                up: '0 -1px 3px 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.06)',
+                'up-md': '0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -2px rgba(0, 0, 0, 0.06)',
+                'up-lg': '0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -4px rgba(0, 0, 0, 0.05)',
+                'up-xl': '0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 -10px 10px -5px rgba(0, 0, 0, 0.04)',
+                'up-2xl': '0 -25px 50px -12px rgba(0, 0, 0, 0.25)',
+            },
             fontFamily: {
                 sans: ['"Source Sans 3"', 'sans-serif'],
@@ -14,4 +47,4 @@
         },
     },
-    plugins: []
+    plugins: [],
 }