Index: .idea/.gitignore
===================================================================
--- .idea/.gitignore	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ .idea/.gitignore	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
Index: .idea/Shifter.iml
===================================================================
--- .idea/Shifter.iml	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ .idea/Shifter.iml	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
Index: .idea/inspectionProfiles/Project_Default.xml
===================================================================
--- .idea/inspectionProfiles/Project_Default.xml	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ .idea/inspectionProfiles/Project_Default.xml	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
Index: .idea/modules.xml
===================================================================
--- .idea/modules.xml	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ .idea/modules.xml	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Shifter.iml" filepath="$PROJECT_DIR$/.idea/Shifter.iml" />
+    </modules>
+  </component>
+</project>
Index: .idea/vcs.xml
===================================================================
--- .idea/vcs.xml	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ .idea/vcs.xml	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
Index: backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -2,4 +2,6 @@
 
 import com.shifterwebapp.shifter.user.service.UserService;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
 import lombok.RequiredArgsConstructor;
 import org.springframework.http.ResponseEntity;
@@ -7,4 +9,5 @@
 import org.springframework.web.bind.annotation.*;
 
+import java.io.IOException;
 import java.util.Map;
 
@@ -19,23 +22,34 @@
 
     @PostMapping("/register")
-    public ResponseEntity<AuthResponse> register(@RequestBody RegisterDto request) {
-        return ResponseEntity.ok(authService.register(request));
+    public void register(@RequestBody RegisterDto request, HttpServletResponse response) throws IOException {
+        authService.register(request, response);
     }
 
     @PostMapping("/authenticate")
-    public ResponseEntity<AuthResponse> authenticate(@RequestBody LoginDto request) {
-        return ResponseEntity.ok(authService.authenticate(request));
+    public void authenticate(@RequestBody LoginDto request, HttpServletResponse response) throws IOException {
+        authService.authenticate(request, response);
     }
 
     @PostMapping("/refresh")
-    public ResponseEntity<AuthResponse> refreshToken(@RequestBody TokenRefreshDto request) {
-        AuthResponse response = authService.refreshToken(request.getRefreshToken());
+    public ResponseEntity<AuthResponse> refreshToken(HttpServletRequest request) {
+        AuthResponse response = authService.refreshToken(request);
         return ResponseEntity.ok(response);
     }
 
+    @PostMapping("/logout")
+    public void logout(HttpServletResponse response) {
+        authService.logout(response);
+    }
+
+    @GetMapping("/check-email")
+    public ResponseEntity<Boolean> checkEmail(@RequestParam String email) {
+        boolean exists = authService.checkEmail(email);
+        return ResponseEntity.ok(exists);
+    }
+
     @PostMapping("/delete")
-    public ResponseEntity<String> deleteAll(@RequestParam Long accountId) {
+    public ResponseEntity<String> delete(@RequestParam Long accountId) {
         userService.deleteUser(accountId);
-        return ResponseEntity.ok("User registered successfully");
+        return ResponseEntity.ok("User deleted successfully");
     }
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/auth/AuthResponse.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/AuthResponse.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/AuthResponse.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -11,5 +11,4 @@
 public class AuthResponse {
     private String accessToken;
-    private String refreshToken;
     private UserDto user;
 
Index: backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,12 +1,21 @@
 package com.shifterwebapp.shifter.auth;
 
+import com.fasterxml.jackson.databind.ObjectMapper;
 import com.shifterwebapp.shifter.config.JwtService;
 import com.shifterwebapp.shifter.user.User;
 import com.shifterwebapp.shifter.user.UserMapper;
 import com.shifterwebapp.shifter.user.service.UserService;
+import jakarta.servlet.http.Cookie;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
 import lombok.RequiredArgsConstructor;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.ResponseCookie;
 import org.springframework.security.authentication.AuthenticationManager;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
 import org.springframework.stereotype.Service;
+
+import java.io.IOException;
+import java.time.Duration;
 
 @Service
@@ -19,25 +28,36 @@
     private final AuthenticationManager authenticationManager;
 
-    public AuthResponse register(RegisterDto request) {
-        // Create user in the database
-        User user = userService.createUser(request);
-
-        // Generate token
+    private void sendTokens(HttpServletResponse response, User user) throws IOException {
         String accessToken = jwtService.generateToken(user);
         String refreshToken = jwtService.generateRefreshToken(user);
 
-        System.out.println("Generated access token: " + accessToken);
-        System.out.println("Generated refresh token: " + refreshToken);
+        // Create secure HTTP-only cookie for refresh token
+        ResponseCookie cookie = ResponseCookie.from("refreshToken", refreshToken)
+                .httpOnly(true)
+                .secure(true) // true if using HTTPS
+                .path("/")
+                .maxAge(Duration.ofDays(7))
+                .sameSite("Strict")
+                .build();
+        response.addHeader(HttpHeaders.SET_COOKIE, cookie.toString());
 
-        // Return response with tokens and user details
-        return AuthResponse.builder()
+        AuthResponse authResponse = AuthResponse.builder()
                 .accessToken(accessToken)
-                .refreshToken(refreshToken)
                 .user(userMapper.toDto(user))
                 .build();
+
+        ObjectMapper mapper = new ObjectMapper();
+        response.setContentType("application/json");
+        mapper.writeValue(response.getOutputStream(), authResponse);
     }
 
-    public AuthResponse authenticate(LoginDto request) {
-        // Authenticate credentials
+
+    public void register(RegisterDto request, HttpServletResponse response) throws IOException {
+        User user = userService.createUser(request);
+        sendTokens(response, user);
+    }
+
+
+    public void authenticate(LoginDto request, HttpServletResponse response) throws IOException {
         authenticationManager.authenticate(
                 new UsernamePasswordAuthenticationToken(
@@ -46,33 +66,28 @@
                 )
         );
-
-        // Load userDetails and generate token
         User user = userService.getUserByEmail(request.getEmail());
-        String accessToken = jwtService.generateToken(user);
-        String refreshToken = jwtService.generateRefreshToken(user);
-
-        System.out.println(user);
-        System.out.println("------------------------------------------");
-        System.out.println(userMapper.toDto(user));
-
-        // Return response with tokens and user details
-        return AuthResponse.builder()
-                .accessToken(accessToken)
-                .refreshToken(refreshToken)
-                .user(userMapper.toDto(user))
-                .build();
+        sendTokens(response, user);
     }
 
-    public AuthResponse refreshToken(String refreshToken) {
-        String userEmail = jwtService.extractUsername(refreshToken);
 
-        if (userEmail == null) {
-            throw new RuntimeException("Invalid refresh token");
+    public AuthResponse refreshToken(HttpServletRequest request) {
+        String refreshToken = null;
+        if (request.getCookies() != null) {
+            for (Cookie cookie : request.getCookies()) {
+                if ("refreshToken".equals(cookie.getName())) {
+                    refreshToken = cookie.getValue();
+                }
+            }
         }
 
+        if (refreshToken == null) {
+            throw new RuntimeException("Refresh token missing");
+        }
+
+        String userEmail = jwtService.extractUsername(refreshToken);
         User user = userService.getUserByEmail(userEmail);
 
         if (!jwtService.isTokenValid(refreshToken, user)) {
-            throw new RuntimeException("Expired or invalid refresh token");
+            throw new RuntimeException("Invalid refresh token");
         }
 
@@ -81,8 +96,24 @@
         return AuthResponse.builder()
                 .accessToken(newAccessToken)
-                .refreshToken(refreshToken) // Keep same refresh token or rotate
                 .user(userMapper.toDto(user))
                 .build();
     }
 
+    public void logout(HttpServletResponse response) {
+        ResponseCookie cookie = ResponseCookie.from("refreshToken", "")
+                .httpOnly(true)
+                .secure(true)
+                .path("/")
+                .maxAge(0)
+                .sameSite("Strict")
+                .build();
+
+        response.setHeader(HttpHeaders.SET_COOKIE, cookie.toString());
+    }
+
+    public boolean checkEmail(String email) {
+        System.out.println("Checking if email exists: " + email);
+        return userService.existsUserByEmail(email);
+    }
+
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/config/AppConfig.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/config/AppConfig.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/config/AppConfig.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -2,4 +2,5 @@
 
 import com.shifterwebapp.shifter.user.UserRepository;
+import jakarta.servlet.http.HttpServletResponse;
 import lombok.RequiredArgsConstructor;
 import org.springframework.context.annotation.Bean;
@@ -13,4 +14,5 @@
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.security.web.AuthenticationEntryPoint;
 
 @Configuration
@@ -42,3 +44,8 @@
         return new BCryptPasswordEncoder(12);
     }
+
+    @Bean
+    public AuthenticationEntryPoint authenticationEntryPoint() {
+        return (request, response, authException) -> response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Unauthorized");
+    }
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/config/SecurityConfig.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/config/SecurityConfig.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/config/SecurityConfig.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -9,4 +9,5 @@
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
 import org.springframework.security.config.http.SessionCreationPolicy;
+import org.springframework.security.web.AuthenticationEntryPoint;
 import org.springframework.security.web.SecurityFilterChain;
 import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
@@ -24,4 +25,5 @@
     private final AuthenticationProvider authenticationProvider;
     private final JwtAuthFilter jwtAuthFilter;
+    private final AuthenticationEntryPoint authenticationEntryPoint;
 
     @Bean
@@ -33,12 +35,12 @@
                 .authorizeHttpRequests(request -> request
                         .requestMatchers("/api/auth/**").permitAll()
+                        .requestMatchers("/api/courses/**").permitAll()
                         .anyRequest().authenticated()
+                )
+                .exceptionHandling(exception -> exception
+                        .authenticationEntryPoint(authenticationEntryPoint)
                 )
                 .authenticationProvider(authenticationProvider)
                 .addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class);
-
-//                .httpBasic(AbstractHttpConfigurer::disable)  // Disable basic auth for stateless
-//                .formLogin(AbstractHttpConfigurer::disable)   // Disable form login
-//                .logout(AbstractHttpConfigurer::disable);
 
         return http.build();
Index: backend/src/main/java/com/shifterwebapp/shifter/course/Course.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/Course.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/Course.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -4,4 +4,5 @@
 import com.shifterwebapp.shifter.coursecontent.CourseContent;
 import com.shifterwebapp.shifter.enrollment.Enrollment;
+import com.shifterwebapp.shifter.enums.Interests;
 import com.shifterwebapp.shifter.enums.Skills;
 import jakarta.persistence.*;
@@ -23,10 +24,13 @@
     private Long id;
 
+    @Column(columnDefinition = "text")
     private String imageUrl;
 
     private String color;
     
+    private String titleShort;
+
     private String title;
-    
+
     private String topic;
 
@@ -34,7 +38,7 @@
     private Difficulty difficulty;
     
-    private Float durationHours;
+    private Double durationHours;
     
-    private Float price;
+    private Double price;
     
     private Integer rating;
@@ -55,6 +59,7 @@
     private List<Skills> skillsGained;
 
-    @ElementCollection
-    private List<String> whatWillBeLearned;
+    @ElementCollection(targetClass = Interests.class)
+    @Enumerated(EnumType.STRING)
+    private List<Interests> whatWillBeLearned;
     
     @OneToMany(mappedBy = "course", orphanRemoval = true)        // IS THIS GOOD BUSINESS LOGIC? SHOULD I HAVE CASCADES?
Index: backend/src/main/java/com/shifterwebapp/shifter/course/CourseController.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/CourseController.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/CourseController.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,4 +1,7 @@
 package com.shifterwebapp.shifter.course;
 
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
 import com.shifterwebapp.shifter.course.service.CourseService;
 import com.shifterwebapp.shifter.enums.Difficulty;
@@ -14,5 +17,6 @@
 @RestController
 @RequiredArgsConstructor
-@RequestMapping("${api.base.path}/course")
+@RequestMapping("${api.base.path}/courses")
+@CrossOrigin
 public class CourseController {
 
@@ -21,21 +25,16 @@
     @GetMapping
     public ResponseEntity<?> getCourses(
-            @RequestParam(required = false) String title,
-            @RequestParam(required = false) String topic,
-            @RequestParam(required = false) List<Difficulty> difficulties,
-            @RequestParam(required = false) Float floorPrice,
-            @RequestParam(required = false) Float ceilPrice,
-            @RequestParam(required = false) Float floorHours,
-            @RequestParam(required = false) Float ceilHours,
-            @RequestParam(required = false) List<Skills> skills
-            ) {
+            @RequestParam(required = false) String search,
+            @RequestParam(required = false, name = "difficulty") List<Difficulty> difficulties,
+            @RequestParam(required = false, name = "price") List<String> prices,
+            @RequestParam(required = false, name = "duration") List<String> durations,
+            @RequestParam(required = false, name = "skill") List<Skills> skills,
+            @RequestParam(required = false, name = "topic") List<Interests> topics
+            ) throws JsonProcessingException {
         Specification<Course> spec = null;
 
-        if (title != null && !title.isEmpty()) {
-            spec = (spec == null) ? CourseSpecification.hasTitleLike(title) : spec.and(CourseSpecification.hasTitleLike(title));
-        }
 
-        if (topic != null && !topic.isEmpty()) {
-            spec = (spec == null) ? CourseSpecification.hasTopicLike(topic) : spec.and(CourseSpecification.hasTopicLike(topic));
+        if (search != null && !search.isEmpty()) {
+            spec = CourseSpecification.hasSearchLike(search);
         }
 
@@ -44,14 +43,18 @@
         }
 
-        if (floorPrice != null || ceilPrice != null) {
-            spec = (spec == null) ? CourseSpecification.hasPriceBetween(floorPrice, ceilPrice) : spec.and(CourseSpecification.hasPriceBetween(floorPrice, ceilPrice));
+        if (prices != null && !prices.isEmpty()) {
+            spec = (spec == null) ? CourseSpecification.hasPricesBetween(prices) : spec.and(CourseSpecification.hasPricesBetween(prices));
         }
 
-        if (floorHours != null || ceilHours != null) {
-            spec = (spec == null) ? CourseSpecification.hasHoursBetween(floorHours, ceilHours) : spec.and(CourseSpecification.hasHoursBetween(floorHours, ceilHours));
+        if (durations != null && !durations.isEmpty()) {
+            spec = (spec == null) ? CourseSpecification.hasDurationBetween(durations) : spec.and(CourseSpecification.hasDurationBetween(durations));
         }
 
         if (skills != null && !skills.isEmpty()) {
             spec = (spec == null) ? CourseSpecification.hasSkills(skills) : spec.and(CourseSpecification.hasSkills(skills));
+        }
+
+        if (topics != null && !topics.isEmpty()) {
+            spec = (spec == null) ? CourseSpecification.hasTopics(topics) : spec.and(CourseSpecification.hasTopics(topics));
         }
 
@@ -67,3 +70,12 @@
     }
 
+    @GetMapping("/topics")
+    public ResponseEntity<List<Interests>> getAllTopics() {
+        return ResponseEntity.ok(courseService.getAllTopics());
+    }
+
+    @GetMapping("/skills")
+    public ResponseEntity<List<Skills>> getAllSkills() {
+        return ResponseEntity.ok(courseService.getAllSkills());
+    }
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/course/CourseDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/CourseDto.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/CourseDto.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -3,4 +3,5 @@
 import com.shifterwebapp.shifter.enums.Difficulty;
 import com.shifterwebapp.shifter.coursecontent.CourseContentDto;
+import com.shifterwebapp.shifter.enums.Interests;
 import com.shifterwebapp.shifter.enums.Skills;
 import lombok.AllArgsConstructor;
@@ -17,4 +18,10 @@
     private Long id;
 
+    private String imageUrl;
+
+    private String color;
+
+    private String titleShort;
+
     private String title;
 
@@ -23,7 +30,7 @@
     private Difficulty difficulty;
 
-    private Float durationHours;
+    private Double durationHours;
 
-    private Float price;
+    private Double price;
 
     private Integer rating;
@@ -39,8 +46,8 @@
     private List<Skills> skillsGained;
 
-    private List<String> whatWillBeLearned;
+    private List<Interests> whatWillBeLearned;
 
     // DO I NEED THIS ???
-    private List<CourseContentDto> courseContents;
+//    private List<CourseContentDto> courseContents;
 }
 
Index: backend/src/main/java/com/shifterwebapp/shifter/course/CourseRepository.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/CourseRepository.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/CourseRepository.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -2,4 +2,5 @@
 
 import com.shifterwebapp.shifter.enums.Difficulty;
+import com.shifterwebapp.shifter.enums.Interests;
 import com.shifterwebapp.shifter.enums.Skills;
 import org.springframework.data.jpa.repository.JpaRepository;
@@ -26,3 +27,9 @@
 
     List<Course> findCoursesByDifficultyIn(List<Difficulty> searchDifficulties);
+
+    @Query("select distinct c.whatWillBeLearned from Course c")
+    List<Interests> getCourseTopics();
+
+    @Query("select distinct c.skillsGained from Course c")
+    List<Skills> getCourseSkills();
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/course/CourseSpecification.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/CourseSpecification.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/CourseSpecification.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -2,8 +2,14 @@
 
 import com.shifterwebapp.shifter.enums.Difficulty;
+import com.shifterwebapp.shifter.enums.Interests;
 import com.shifterwebapp.shifter.enums.Skills;
+import jakarta.persistence.criteria.Join;
+import jakarta.persistence.criteria.JoinType;
+import jakarta.persistence.criteria.Predicate;
 import org.springframework.data.jpa.domain.Specification;
 
+import java.util.ArrayList;
 import java.util.List;
+import java.util.Objects;
 
 public class CourseSpecification {
@@ -14,4 +20,22 @@
     }
 
+    public static Specification<Course> hasSearchLike(String search) {
+        return (root, query, cb) -> {
+            query.distinct(true);
+            Join<Course, Skills> skillsJoin = root.join("skillsGained", JoinType.LEFT);
+            Join<Course, Interests> topicsJoin = root.join("whatWillBeLearned", JoinType.LEFT);
+
+            return cb.or(
+                    cb.like(cb.lower(root.get("title")), "%" + search.toLowerCase() + "%"),
+                    cb.like(cb.lower(root.get("topic")), "%" + search.toLowerCase() + "%"),
+                    cb.like(cb.lower(root.get("descriptionShort")), "%" + search.toLowerCase() + "%"),
+                    cb.like(cb.lower(root.get("description")), "%" + search.toLowerCase() + "%"),
+                    cb.like(cb.lower(root.get("descriptionLong")), "%" + search.toLowerCase() + "%"),
+                    cb.like(cb.lower(skillsJoin.as(String.class)), "%" + search.toLowerCase().replaceAll("\\s", "_") + "%"),
+                    cb.like(cb.lower(topicsJoin.as(String.class)), "%" + search.toLowerCase().replaceAll("\\s", "_") + "%")
+            );
+        };
+    }
+
     public static Specification<Course> hasTopicLike(String topic) {
         return (root, query, cb) ->
@@ -20,30 +44,72 @@
 
     public static Specification<Course> hasDifficulties(List<Difficulty> difficulties) {
-        return (root, query, cb) -> difficulties == null || difficulties.isEmpty()
-                ? null
-                : root.get("difficulty").in(difficulties);
+        return (root, query, cb) -> root.get("difficulty").in(difficulties);
     }
 
     public static Specification<Course> hasSkills(List<Skills> skills) {
-        return (root, query, cb) -> skills == null || skills.isEmpty()
-                ? null
-                : root.join("skillsGained").in(skills);
+        return (root, query, cb) -> root.join("skillsGained").in(skills);
     }
 
-    public static Specification<Course> hasPriceBetween(Float min, Float max) {
+    public static Specification<Course> hasTopics(List<Interests> topics) {
+        return (root, query, cb) -> root.join("whatWillBeLearned").in(topics);
+    }
+
+    public static Specification<Course> hasPricesBetween(List<String> prices) {
         return (root, query, cb) -> {
-            if (min == null && max == null) return null;
-            if (min != null && max != null) return cb.between(root.get("price"), min, max);
-            if (min != null) return cb.greaterThanOrEqualTo(root.get("price"), min);
-            return cb.lessThanOrEqualTo(root.get("price"), max);
+            List<Predicate> predicates = new ArrayList<>();
+
+
+            for (String price : prices) {
+                switch (price) {
+                    case "free":
+                        predicates.add(cb.lessThanOrEqualTo(root.get("price"), 0.0));
+                        break;
+                    case "low":
+                        predicates.add(cb.between(root.get("price"), 0.0, 20.0));
+                        break;
+                    case "medium":
+                        predicates.add(cb.between(root.get("price"), 20.0, 50.0));
+                        break;
+                    case "high":
+                        predicates.add(cb.greaterThanOrEqualTo(root.get("price"), 50.0));
+                        break;
+                }
+            }
+
+            if (predicates.isEmpty()) {
+                return null;
+            }
+
+            return cb.or(predicates.toArray(new Predicate[0]));
         };
     }
 
-    public static Specification<Course> hasHoursBetween(Float min, Float max) {
+    public static Specification<Course> hasDurationBetween(List<String> durations) {
         return (root, query, cb) -> {
-            if (min == null && max == null) return null;
-            if (min != null && max != null) return cb.between(root.get("durationInHours"), min, max);
-            if (min != null) return cb.greaterThanOrEqualTo(root.get("durationInHours"), min);
-            return cb.lessThanOrEqualTo(root.get("durationInHours"), max);
+            List<Predicate> predicates = new ArrayList<>();
+
+
+            for (String duration : durations) {
+                switch (duration) {
+                    case "extraShort":
+                        predicates.add(cb.lessThanOrEqualTo(root.get("durationHours"), 3.0));
+                        break;
+                    case "short":
+                        predicates.add(cb.between(root.get("durationHours"), 3.0, 6.0));
+                        break;
+                    case "medium":
+                        predicates.add(cb.between(root.get("durationHours"), 6.0, 10.0));
+                        break;
+                    case "long":
+                        predicates.add(cb.greaterThanOrEqualTo(root.get("durationHours"), 10.0));
+                        break;
+                }
+            }
+
+            if (predicates.isEmpty()) {
+                return null;
+            }
+
+            return cb.or(predicates.toArray(new Predicate[0]));
         };
     }
Index: backend/src/main/java/com/shifterwebapp/shifter/course/RangeDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/RangeDto.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/RangeDto.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,15 @@
+package com.shifterwebapp.shifter.course;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Data
+@Builder
+public class RangeDto {
+    private Double floor;
+    private Double ceil;
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/course/service/CourseService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/service/CourseService.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/service/CourseService.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -2,10 +2,8 @@
 
 import com.shifterwebapp.shifter.Validate;
-import com.shifterwebapp.shifter.course.Course;
-import com.shifterwebapp.shifter.course.CourseDto;
-import com.shifterwebapp.shifter.course.CourseMapper;
-import com.shifterwebapp.shifter.course.CourseRepository;
+import com.shifterwebapp.shifter.course.*;
 import com.shifterwebapp.shifter.coursecontent.CourseContentMapper;
 import com.shifterwebapp.shifter.enums.Difficulty;
+import com.shifterwebapp.shifter.enums.Interests;
 import com.shifterwebapp.shifter.enums.Skills;
 import lombok.RequiredArgsConstructor;
@@ -40,4 +38,14 @@
 
     @Override
+    public List<Interests> getAllTopics() {
+        return courseRepository.getCourseTopics();
+    }
+
+    @Override
+    public List<Skills> getAllSkills() {
+        return courseRepository.getCourseSkills();
+    }
+
+    @Override
     public CourseDto createCourse(CourseDto request) {
         Course course = Course.builder()
@@ -54,5 +62,5 @@
                 .skillsGained(request.getSkillsGained())
                 .whatWillBeLearned(request.getWhatWillBeLearned())
-                .courseContents(courseContentMapper.toEntity(request.getCourseContents()))      // ??????
+//                .courseContents(courseContentMapper.toEntity(request.getCourseContents()))      // ??????
                 .build();
 
@@ -79,10 +87,4 @@
 
     @Override
-    public List<CourseDto> searchCoursesByPrice(Float floorPrice, Float ceilPrice) {
-        List<Course> courses = courseRepository.findCoursesByPriceRange(floorPrice, ceilPrice);
-        return courseMapper.toDto(courses);
-    }
-
-    @Override
     public List<CourseDto> searchCoursesByDurationHours(Float floorHours, Float ceilHours) {
         List<Course> courses = courseRepository.findCoursesByDurationHoursRange(floorHours, ceilHours);
Index: backend/src/main/java/com/shifterwebapp/shifter/course/service/ImplCourseService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/course/service/ImplCourseService.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/course/service/ImplCourseService.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -4,4 +4,5 @@
 import com.shifterwebapp.shifter.course.CourseDto;
 import com.shifterwebapp.shifter.enums.Difficulty;
+import com.shifterwebapp.shifter.enums.Interests;
 import com.shifterwebapp.shifter.enums.Skills;
 import org.springframework.data.jpa.domain.Specification;
@@ -13,4 +14,7 @@
     CourseDto getCourseById(Long id);
 
+    List<Interests> getAllTopics();
+    List<Skills> getAllSkills();
+
     CourseDto createCourse(CourseDto request);
 
@@ -18,5 +22,4 @@
     List<CourseDto> searchCoursesByTopic(String searchTopic);
     List<CourseDto> searchCoursesByDifficulties(List<Difficulty> searchDifficulty);
-    List<CourseDto> searchCoursesByPrice(Float floorPrice, Float ceilPrice);
     List<CourseDto> searchCoursesByDurationHours(Float floorHours, Float ceilHours);
     List<CourseDto> searchCoursesBySkillsGained(List<Skills> searchSkills);
Index: backend/src/main/java/com/shifterwebapp/shifter/enums/Interests.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/enums/Interests.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/enums/Interests.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -2,14 +2,34 @@
 
 public enum Interests {
-    SALES_STRATEGIES,
-    MARKETING,
     LEADERSHIP,
     MANAGEMENT,
+    COMMUNICATION,
+    TEAM_DEVELOPMENT,
+    DECISION_MAKING,
+    BUSINESS_TRANSFORMATION,
     DIGITAL_TRANSFORMATION,
-    BUSINESS_TRANSFORMATION,
+    CHANGE_MANAGEMENT,
+    STRATEGIC_PLANNING,
+    AGILITY,
     ENTREPRENEURSHIP,
-    STARTUP,
+    STARTUP_METHODS,
+    OPERATIONAL_EXCELLENCE,
     SALES,
+    SALES_STRATEGIES,
     NEGOTIATION,
-    FINANCE_FOR_BUSINESS
+    CLIENT_RELATIONSHIPS,
+    PERSONAL_GROWTH,
+    TIME_MANAGEMENT,
+    GO_TO_MARKET_STRATEGY,
+    MARKETING,
+    CLIENT_TARGETING,
+    VALUE_CREATION,
+    BUSINESS_INNOVATION,
+    HR,
+    CULTURE_INTEGRATION,
+    SELF_AWARENESS,
+    PERFORMANCE_IMPROVEMENT,
+    CONTINUOUS_IMPROVEMENT,
+    TEAM_OPTIMIZATION,
+    SYSTEM_DESIGN
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/enums/Skills.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/enums/Skills.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/enums/Skills.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -35,5 +35,5 @@
     DECISION_MAKING,
     PERFORMANCE_EVALUATION,
-    CHANGE_MANAGEMENT,
+    CHANGE_MANAGEMENT,  // Added missing
 
     // SOFT SKILLS / PERSONAL EFFECTIVENESS
@@ -45,4 +45,5 @@
     CREATIVITY,
     PROBLEM_SOLVING,
+    NEGOTIATION,
 
     // ENTREPRENEURSHIP
Index: backend/src/main/java/com/shifterwebapp/shifter/payment/Payment.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/payment/Payment.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/payment/Payment.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -23,5 +23,5 @@
     private Long id;
 
-    private Float amount;
+    private Double amount;
 
     private Date date;
Index: backend/src/main/java/com/shifterwebapp/shifter/payment/PaymentDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/payment/PaymentDto.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/payment/PaymentDto.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -16,5 +16,5 @@
     private Long id;
 
-    private Float amount;
+    private Double amount;
 
     private Date date;
Index: backend/src/main/java/com/shifterwebapp/shifter/review/ReviewRepository.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/review/ReviewRepository.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/review/ReviewRepository.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -10,5 +10,5 @@
 
     @Query("select AVG(r.rating) from Review r where r.enrollment.course.id = :courseId")
-    Float findAverageRatingByCourse(@Param("courseId") Long courseId);
+    Double findAverageRatingByCourse(@Param("courseId") Long courseId);
 
     @Query("select r from Review r where r.enrollment.course.id = :courseId")
Index: backend/src/main/java/com/shifterwebapp/shifter/review/service/ImplReviewService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/review/service/ImplReviewService.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/review/service/ImplReviewService.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -9,5 +9,5 @@
     List<ReviewDto> getReviewsByCourse(Long courseId);
     List<ReviewDto> getReviewsByUser(Long userId);
-    Float getAverageRatingByCourse(Long courseId);
+    Double getAverageRatingByCourse(Long courseId);
 
     ReviewDto writeReview(Long enrollmentId, ReviewDto reviewDto);
Index: backend/src/main/java/com/shifterwebapp/shifter/review/service/ReviewService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/review/service/ReviewService.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/review/service/ReviewService.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -46,7 +46,7 @@
 
     @Override
-    public Float getAverageRatingByCourse(Long courseId) {
+    public Double getAverageRatingByCourse(Long courseId) {
         validate.validateCourseExists(courseId);
-        Float avgRating = reviewRepository.findAverageRatingByCourse(courseId);
+        Double avgRating = reviewRepository.findAverageRatingByCourse(courseId);
         return avgRating != null ? avgRating : 0f;
     }
Index: backend/src/main/java/com/shifterwebapp/shifter/sql/courseInitialize.sql
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/sql/courseInitialize.sql	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/sql/courseInitialize.sql	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,3 +1,4 @@
-INSERT INTO course (title,
+INSERT INTO course (title_short,
+                    title,
                     description_short,
                     description,
@@ -8,6 +9,26 @@
                     rating,
                     rating_count,
-                    topic)
-VALUES ('From Manager to Leader: Empowering People, Managing Processes',
+                    topic,
+                    image_url,
+                    color)
+VALUES
+    (
+        'Foundations for a Successful Business & Career',
+        'Building New Paradigm / Perception & Perspective as Foundations for a Successful Business and Professional Career',
+        'Understand how paradigms, perception, and perspective shape your business and career success.',
+        'Explore the concept of paradigms and how perception and perspective influence your progress in business and professional life. Learn why incorrect use of perception and perspective can hinder your growth.',
+        'This course delves into the foundational concepts of paradigms, perception, and perspective as critical factors in business and career development. You will learn what a paradigm is, how perception and perspective are interconnected, and why changing one requires changing the other. Understand the potential negative consequences of misused perception and perspective and how to harness them effectively for success.',
+        'BEGINNER',
+        3,
+        0,
+        47,
+        10,
+        'Business & Career Development',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751286550/Foundations_for_a_Successful_Business_Career_k8vcuu.jpg',
+        '#02C2FF'
+    ),
+    (
+        'From Manager to Leader',
+        'From Manager to Leader: Empowering People, Managing Processes',
         'Transform your managerial skills into effective leadership.',
         'Learn to lead people and manage processes with proven leadership tools and models.',
@@ -18,6 +39,11 @@
         48,
         10,
-        'Leadership & Management'),
-       ('Business Transformation Blueprint: Crafting the Path to Success',
+        'Leadership & Management',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/From_Manager_to_Leader_-_Empowering_People_Managing_Processes_vgoyoh.webp',
+        '#19C6D6'
+        ),
+       (
+        'Business Transformation Blueprint',
+        'Business Transformation Blueprint: Crafting the Path to Success',
         'Design and implement successful business transformations.',
         'Master the framework for guiding organizations through structured, sustainable transformation.',
@@ -28,6 +54,10 @@
         49,
         10,
-        'Business Strategy & Transformation'),
-       ('Business Roadmap for SME’s: A Step-by-Step Guide for Establishing Core Business Foundations for Sustainable Growth',
+        'Business Strategy & Transformation',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/Business_Transformation_Blueprint_-_Crafting_the_Path_to_Success_aimssk.jpg',
+        '#1FB0C3'),
+       (
+           'SME Business Roadmap',
+        'Business Roadmap for SME’s: A Step-by-Step Guide for Establishing Core Business Foundations for Sustainable Growth',
         'Step-by-step guidance for SMEs to build solid business foundations.',
         'Cut through the noise and build sustainable business foundations with clarity and confidence.',
@@ -38,6 +68,10 @@
         49,
         10,
-        'Entrepreneurship & SME Growth'),
-       ('Sales Masterclass: Leadership, Communication, and Modern Sales Process',
+        'Entrepreneurship & SME Growth',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/Business_Roadmap_for_SME_s_-_A_Step-by-Step_Guide_for_Establishing_Core_Business_Foundations_for_Sustainable_Growth_qeejox.jpg',
+        '#002E5D'),
+       (
+           'Sales Masterclass',
+        'Sales Masterclass: Leadership, Communication, and Modern Sales Process',
         'Master modern sales strategies, leadership, and communication.',
         'A complete guide to building elite sales skills, behaviors, and mindset.',
@@ -48,6 +82,10 @@
         47,
         10,
-        'Sales & Communication'),
-       ('From Good to Extraordinary: Mastering Skills for Success',
+        'Sales & Communication',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/Sales_Masterclass_-_Leadership_Communication_and_Modern_Sales_Process_v74qdh.webp',
+        '#034D4C'),
+       (
+           'Mastering Success Skills',
+        'From Good to Extraordinary: Mastering Skills for Success',
         'Unlock your full potential with practical skills for extraordinary success.',
         'A holistic course for professionals aiming to elevate their effectiveness and mindset.',
@@ -58,6 +96,10 @@
         48,
         10,
-        'Personal Development & Productivity'),
-       ('Winning Markets in 3 Steps: Building a Clear Go-to-Market Strategy',
+        'Personal Development & Productivity',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751032528/From_Good_to_Extraordinary_-_Mastering_Skills_for_Success_fm0io9.webp',
+        '#D0B8A3'),
+       (
+           'Winning Markets in 3 Steps',
+        'Winning Markets in 3 Steps: Building a Clear Go-to-Market Strategy',
         'Build a clear, effective go-to-market strategy in just 3 steps.',
         'Learn to target the right clients and approach the market with clarity and confidence.',
@@ -68,6 +110,10 @@
         49,
         10,
-        'Marketing & Sales Strategy'),
-       ('Creating Added Value: How to Offer Solutions/Concepts, Instead of Services',
+        'Market Strategy',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/Winning_Markets_in_3_Steps_-_Building_a_Clear_Go-to-Market_Strategy_vayg15.png',
+        '#FF6F61'),
+       (
+           'How to Create Added Value',
+        'Creating Added Value: How to Offer Solutions/Concepts, Instead of Services',
         'Shift from selling services to offering impactful solutions and concepts.',
         'Learn how to transition from offering services to delivering real value through solutions and long-term concepts.',
@@ -78,6 +124,10 @@
         49,
         10,
-        'Value Creation & Strategic Marketing'),
-       ('Onboarding Fundamentals: How to Successfully Incorporate New Employees',
+        'Value Creation & Strategic Marketing',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/Creating_Added_Value_-_How_to_Offer_SolutionsConcepts_Instead_of_Services_z9fs3c.png',
+        '#F5AD01'),
+       (
+        'Seamless Onboarding Strategy',
+        'Onboarding Fundamentals: How to Successfully Incorporate New Employees',
         'Master the essentials of onboarding to boost retention and employee satisfaction.',
         'Learn how to create a structured onboarding experience that accelerates productivity and ensures long-term success.',
@@ -88,6 +138,10 @@
         48,
         10,
-        'HR & Talent Development'),
-       ('Professional Self-Assessment: Identify Barriers Holding You Back & Areas for Improvement',
+        'HR & Talent Development',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/Onboarding_Fundamentals_-_How_to_Successfully_Incorporate_New_Employees_bksbad.png',
+        '#008CC2'),
+       (
+        'Growth Through Self-Assessment',
+        'Professional Self-Assessment: Identify Barriers Holding You Back & Areas for Improvement',
         'Use self-assessment tools to unlock growth and overcome personal barriers.',
         'Gain insight into your professional strengths, weaknesses, and areas for growth using proven self-assessment techniques.',
@@ -98,6 +152,10 @@
         47,
         10,
-        'Personal Growth & Career Development'),
-       ('Establishing Continuous Business Excellence in Your Company',
+        'Personal Growth & Career Development',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/Professional_Self-Assessment_-_Identify_Barriers_Holding_You_Back_Areas_for_Improvement_tiyydc.jpg',
+        '#CC6232'),
+       (
+        'Business Excellence Blueprint',
+        'Establishing Continuous Business Excellence in Your Company',
         'Create a high-performance culture through proven excellence frameworks.',
         'Learn how to implement continuous improvement models to optimize operations, team alignment, and long-term success.',
@@ -108,6 +166,10 @@
         49,
         10,
-        'Operational Excellence & Leadership'),
-       ('High-Performing Teams and Systems: Organizational Success Through Structure',
+        'Operational Excellence & Leadership',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028998/Establishing_Continuous_Business_Excellence_in_Your_Company_g3yvao.png',
+        '#18898D'),
+       (
+        'Organizational Success Through Structure',
+        'High-Performing Teams and Systems: Organizational Success Through Structure',
         'Build efficient, structured teams and systems that drive sustainable organizational success.',
         'Explore how to structure your teams and systems to optimize performance, efficiency, and collaboration across your organization.',
@@ -118,3 +180,142 @@
         48,
         10,
-        'Team Management & Organizational Structure');
+        'Team Management & Organizational Structure',
+        'https://res.cloudinary.com/dwlevfwtt/image/upload/v1751028999/High-Performing_Teams_and_Systems_-_Organizational_Success_Through_Structure_b6jvm5.jpg',
+        '#FF9503');
+
+INSERT INTO course_skills_gained (course_id, skills_gained) VALUES
+-- 1. From Manager to Leader
+(1, 'LEADERSHIP'),
+(1, 'DELEGATION'),
+(1, 'DECISION_MAKING'),
+(1, 'PEOPLE_MANAGEMENT'),
+
+-- 2. Business Transformation Blueprint
+(2, 'STRATEGIC_PLANNING'),
+(2, 'CHANGE_MANAGEMENT'),
+(2, 'PROJECT_MANAGEMENT'),
+(2, 'RISK_MANAGEMENT'),
+
+-- 3. Business Roadmap for SME’s
+(3, 'BUSINESS_MODEL_CREATION'),
+(3, 'STRATEGIC_THINKING'),
+(3, 'OPERATION_MANAGEMENT'),
+
+-- 4. Sales Masterclass
+(4, 'SALES'),
+(4, 'COMMUNICATION'),
+(4, 'NEGOTIATION'),
+(4, 'LEADERSHIP'),
+
+-- 5. From Good to Extraordinary
+(5, 'COMMUNICATION'),
+(5, 'DECISION_MAKING'),
+(5, 'CRITICAL_THINKING'),
+(5, 'EMOTIONAL_INTELLIGENCE'),
+
+-- 6. Winning Markets in 3 Steps
+(6, 'MARKETING'),
+(6, 'SALES'),
+(6, 'STRATEGIC_THINKING'),
+
+-- 7. Creating Added Value
+(7, 'OPPORTUNITY_IDENTIFICATION'),
+(7, 'INNOVATION_MANAGEMENT'),
+(7, 'MARKETING'),
+
+-- 8. Onboarding Fundamentals
+(8, 'PEOPLE_MANAGEMENT'),
+(8, 'TEAM_BUILDING'),
+(8, 'COMMUNICATION'),
+
+-- 9. Professional Self-Assessment
+(9, 'EMOTIONAL_INTELLIGENCE'),
+(9, 'CRITICAL_THINKING'),
+(9, 'COMMUNICATION'),
+
+-- 10. Establishing Continuous Business Excellence
+(10, 'PROJECT_MANAGEMENT'),
+(10, 'PERFORMANCE_EVALUATION'),
+(10, 'CHANGE_MANAGEMENT'),
+(10, 'STRATEGIC_PLANNING'),
+
+-- 11. High-Performing Teams and Systems
+(11, 'TEAM_BUILDING'),
+(11, 'OPERATION_MANAGEMENT'),
+(11, 'PEOPLE_MANAGEMENT'),
+(11, 'PERFORMANCE_EVALUATION');
+
+
+INSERT INTO course_what_will_be_learned (course_id, what_will_be_learned) VALUES
+-- 1. From Manager to Leader
+(1, 'LEADERSHIP'),
+(1, 'MANAGEMENT'),
+(1, 'COMMUNICATION'),
+(1, 'TEAM_DEVELOPMENT'),
+(1, 'DECISION_MAKING'),
+
+-- 2. Business Transformation Blueprint
+(2, 'BUSINESS_TRANSFORMATION'),
+(2, 'DIGITAL_TRANSFORMATION'),
+(2, 'CHANGE_MANAGEMENT'),
+(2, 'STRATEGIC_PLANNING'),
+(2, 'AGILITY'),
+
+-- 3. Business Roadmap for SME’s
+(3, 'ENTREPRENEURSHIP'),
+(3, 'STARTUP_METHODS'),
+(3, 'BUSINESS_TRANSFORMATION'),
+(3, 'STRATEGIC_PLANNING'),
+(3, 'OPERATIONAL_EXCELLENCE'),
+
+-- 4. Sales Masterclass
+(4, 'SALES_STRATEGIES'),
+(4, 'NEGOTIATION'),
+(4, 'LEADERSHIP'),
+(4, 'COMMUNICATION'),
+(4, 'CLIENT_RELATIONSHIPS'),
+
+-- 5. From Good to Extraordinary
+(5, 'PERSONAL_GROWTH'),
+(5, 'LEADERSHIP'),
+(5, 'COMMUNICATION'),
+(5, 'TIME_MANAGEMENT'),
+(5, 'DECISION_MAKING'),
+
+-- 6. Winning Markets in 3 Steps
+(6, 'SALES_STRATEGIES'),
+(6, 'MARKETING'),
+(6, 'GO_TO_MARKET_STRATEGY'),
+(6, 'CLIENT_TARGETING'),
+
+-- 7. Creating Added Value
+(7, 'MARKETING'),
+(7, 'SALES'),
+(7, 'VALUE_CREATION'),
+(7, 'BUSINESS_INNOVATION'),
+
+-- 8. Onboarding Fundamentals
+(8, 'HR'),
+(8, 'MANAGEMENT'),
+(8, 'LEADERSHIP'),
+(8, 'CULTURE_INTEGRATION'),
+
+-- 9. Professional Self-Assessment
+(9, 'PERSONAL_GROWTH'),
+(9, 'LEADERSHIP'),
+(9, 'SELF_AWARENESS'),
+(9, 'PERFORMANCE_IMPROVEMENT'),
+
+-- 10. Establishing Continuous Business Excellence
+(10, 'MANAGEMENT'),
+(10, 'BUSINESS_TRANSFORMATION'),
+(10, 'CONTINUOUS_IMPROVEMENT'),
+(10, 'STRATEGIC_PLANNING'),
+(10, 'AGILITY'),
+
+-- 11. High-Performing Teams and Systems
+(11, 'MANAGEMENT'),
+(11, 'LEADERSHIP'),
+(11, 'BUSINESS_TRANSFORMATION'),
+(11, 'TEAM_OPTIMIZATION'),
+(11, 'SYSTEM_DESIGN');
Index: backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -15,4 +15,5 @@
     UserDto getUserById(Long id);
     User getUserByEmail(String email);
+    Boolean existsUserByEmail(String email);
 
     User createUser(RegisterDto registerDto);
Index: backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -41,4 +41,9 @@
         User user = userRepository.findByEmail(email).orElseThrow();
         return user;
+    }
+
+    @Override
+    public Boolean existsUserByEmail(String email) {
+        return userRepository.existsUserByEmail(email);
     }
 
Index: backend/src/test/java/com/shifterwebapp/shifter/unittests/TestReviewService.java
===================================================================
--- backend/src/test/java/com/shifterwebapp/shifter/unittests/TestReviewService.java	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ backend/src/test/java/com/shifterwebapp/shifter/unittests/TestReviewService.java	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -72,5 +72,5 @@
         Mockito.doNothing().when(validate).validateCourseExists(courseId);
 
-        Float result = reviewService.getAverageRatingByCourse(courseId);
+        Double result = reviewService.getAverageRatingByCourse(courseId);
         Assertions.assertEquals(result, 5F);
     }
Index: frontend/index.html
===================================================================
--- frontend/index.html	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/index.html	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -3,5 +3,6 @@
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/Two-Arrows-Rotate.png" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/shifterImg/Two-Arrows-Rotate.png" />
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Shifter</title>
Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/package-lock.json	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -13,4 +13,5 @@
         "@headlessui/react": "^2.2.4",
         "@heroicons/react": "^2.2.0",
+        "@lottiefiles/dotlottie-react": "^0.14.2",
         "@mui/icons-material": "^7.1.2",
         "@mui/material": "^7.1.2",
@@ -19,5 +20,7 @@
         "axios": "^1.10.0",
         "framer-motion": "^12.19.1",
+        "lottie-react": "^2.4.1",
         "lucide-react": "^0.515.0",
+        "qs": "^6.14.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -1249,4 +1252,22 @@
       }
     },
+    "node_modules/@lottiefiles/dotlottie-react": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.14.2.tgz",
+      "integrity": "sha512-RR4r0HrKQbOAw6iS6C3mRARS2iu+yI+G1vICoUsRMHzlUUk1/26l3WyAjhcG+KoaGoKmORx8FgHjTNr4Sr/2Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@lottiefiles/dotlottie-web": "0.47.0"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@lottiefiles/dotlottie-web": {
+      "version": "0.47.0",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.47.0.tgz",
+      "integrity": "sha512-YN6wSB4iYZBYEAFKEs/taufrPH3rfNlUA632Ib61WoR58TALAJ1ZX8yDIGUBT28byMJhZR4+xdpRX4v7X8OeBQ==",
+      "license": "MIT"
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "7.1.2",
@@ -2825,4 +2846,20 @@
       "engines": {
         "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
@@ -4286,4 +4323,23 @@
       }
     },
+    "node_modules/lottie-react": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.1.tgz",
+      "integrity": "sha512-LQrH7jlkigIIv++wIyrOYFLHSKQpEY4zehPicL9bQsrt1rnoKRYCYgpCUe5maqylNtacy58/sQDZTkwMcTRxZw==",
+      "license": "MIT",
+      "dependencies": {
+        "lottie-web": "^5.10.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/lottie-web": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
+      "integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
@@ -4487,4 +4543,16 @@
       "engines": {
         "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
@@ -4712,4 +4780,19 @@
       "engines": {
         "node": ">=6"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
@@ -5031,4 +5114,76 @@
       "engines": {
         "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/package.json	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -15,4 +15,5 @@
     "@headlessui/react": "^2.2.4",
     "@heroicons/react": "^2.2.0",
+    "@lottiefiles/dotlottie-react": "^0.14.2",
     "@mui/icons-material": "^7.1.2",
     "@mui/material": "^7.1.2",
@@ -21,5 +22,7 @@
     "axios": "^1.10.0",
     "framer-motion": "^12.19.1",
+    "lottie-react": "^2.4.1",
     "lucide-react": "^0.515.0",
+    "qs": "^6.14.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/App.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -5,4 +5,7 @@
 import Login from "./pages/Login.tsx";
 import Register from "./pages/Register.tsx";
+import Courses from "./pages/Courses.tsx";
+import {useGlobalContext} from "./GlobalContext.tsx";
+import React from "react";
 
 function LayoutWrapper() {
@@ -14,7 +17,9 @@
             {!hideLayout && <Navbar />}
             <Routes>
-                <Route path="/" element={<Home />} />
                 <Route path="/login" element={<Login />} />
                 <Route path="/register" element={<Register />} />
+
+                <Route path="/" element={<Home />} />
+                <Route path="/courses" element={<Courses />} />
             </Routes>
             {!hideLayout && <Footer />}
@@ -24,7 +29,17 @@
 
 function App() {
+    const {loading} = useGlobalContext();
+
+    if (loading)
+        return (
+            <div className="absolute inset-0 bg-white/60 backdrop-blur-sm
+                        flex flex-col gap-2 items-center justify-start z-10 py-40">
+                <div className="w-20 loader"></div>
+            </div>
+        )
+
     return (
         <Router>
-            <LayoutWrapper />
+            <LayoutWrapper/>
         </Router>
     );
Index: frontend/src/GlobalContext.tsx
===================================================================
--- frontend/src/GlobalContext.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/GlobalContext.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,127 @@
+import React, {
+    createContext,
+    useState,
+    useEffect,
+    type ReactNode,
+    type Dispatch,
+    type SetStateAction,
+} from "react";
+import axios from "axios";
+import type { User } from "./types/User.tsx";
+import type {UserRegister} from "./types/UserRegister.tsx";
+
+interface GlobalContextType {
+    user: User | null;
+    setUser: Dispatch<SetStateAction<User | null>>;
+    accessToken: string | null;
+    setAccessToken: Dispatch<SetStateAction<string | null>>;
+    register: (user: UserRegister) => Promise<void>;
+    login: (email: string, password: string) => Promise<void>;
+    logout: () => void;
+    refreshAccessToken: () => Promise<void>;
+    loading: boolean;
+}
+
+export const GlobalContext = createContext<GlobalContextType | undefined>(
+    undefined
+);
+
+export const GlobalProvider = ({ children }: { children: ReactNode }) => {
+    const [user, setUser] = useState<User | null>(null);
+    const [accessToken, setAccessToken] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+    const register = async (user: UserRegister) => {
+        try {
+            const res = await axios.post(
+                `${backendUrl}/api/auth/register`,
+                user,
+                { withCredentials: true }
+            );
+            setAccessToken(res.data.accessToken);
+            setUser(res.data.user);
+        } catch (error) {
+            setAccessToken(null);
+            setUser(null);
+            console.log("Registration failed:", error);
+            throw error;
+        }
+    }
+
+    const login = async (email: string, password: string) => {
+        try {
+            const res = await axios.post(
+                `${backendUrl}/api/auth/authenticate`,
+                { email, password },
+                { withCredentials: true }
+            );
+            setAccessToken(res.data.accessToken);
+            setUser(res.data.user);
+        } catch (error) {
+            setAccessToken(null);
+            setUser(null);
+            console.log("Login failed:", error);
+            throw error;
+        }
+    };
+
+    const logout = async () => {
+        try {
+            await axios.post(`${backendUrl}/api/auth/logout`, {}, { withCredentials: true });
+        } catch (err) {
+            console.warn("Logout failed:", err);
+        } finally {
+            setAccessToken(null);
+            setUser(null);
+        }
+    };
+
+
+    const refreshAccessToken = async () => {
+        setLoading(true);
+        try {
+            const res = await axios.post(`${backendUrl}/api/auth/refresh`, {}, { withCredentials: true });
+            setAccessToken(res.data.accessToken);
+            setUser(res.data.user);
+        } catch (error) {
+            setAccessToken(null);
+            setUser(null);
+            console.log("Refresh token failed: ", error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        refreshAccessToken();
+    }, []);
+
+    return (
+        <GlobalContext.Provider
+            value={{
+                user,
+                setUser,
+                accessToken,
+                setAccessToken,
+                register,
+                login,
+                logout,
+                refreshAccessToken,
+                loading,
+            }}
+        >
+            {children}
+        </GlobalContext.Provider>
+    );
+};
+
+// Custom hook for ease of use
+export const useGlobalContext = () => {
+    const context = React.useContext(GlobalContext);
+    if (!context) {
+        throw new Error("useGlobalContext must be used within a GlobalProvider");
+    }
+    return context;
+};
Index: frontend/src/api/axiosInstance.tsx
===================================================================
--- frontend/src/api/axiosInstance.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/api/axiosInstance.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,54 @@
+import axios, { AxiosError, type InternalAxiosRequestConfig } from "axios";
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+const axiosInstance = axios.create({
+    baseURL: backendUrl,
+});
+
+// Request interceptor: attach access token
+axiosInstance.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+        const token = localStorage.getItem("accessToken");
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    },
+    (error: AxiosError) => {
+        return Promise.reject(error);
+    }
+);
+
+// Response interceptor: handle token refresh
+axiosInstance.interceptors.response.use(
+    (response) => response,
+    async (error: AxiosError) => {
+        const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
+
+        if (error.response && error.response.status === 401 && !originalRequest._retry) {
+            originalRequest._retry = true;
+
+            try {
+                const refreshToken = localStorage.getItem("refreshToken");
+
+                // Call refresh endpoint
+                const res = await axios.post(`${backendUrl}/api/auth/refresh`, { refreshToken });
+
+                const newAccessToken = res.data.accessToken;
+                localStorage.setItem("accessToken", newAccessToken);
+
+                // Retry original request with new token
+                originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+                return axiosInstance(originalRequest);
+            } catch (refreshError) {
+                console.error("Token refresh failed:", refreshError);
+                // Optionally clear tokens and redirect to login page
+            }
+        }
+
+        return Promise.reject(error);
+    }
+);
+
+export default axiosInstance;
Index: frontend/src/api/courses.ts
===================================================================
--- frontend/src/api/courses.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/api/courses.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,31 @@
+import type {FilterParams} from "../types/FilterParams.tsx";
+import type {Course} from "../types/Course.tsx";
+import axios from "axios";
+import qs from 'qs';
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+export const fetchCoursesApi = async (params: FilterParams, signal?: AbortSignal): Promise<Course[]> => {
+    const res = await axios.get(
+        `${backendUrl}/api/courses`,
+        {
+            params,
+            paramsSerializer: params => qs.stringify(params, {arrayFormat: 'repeat'}),
+            signal
+        }
+    )
+
+    return res.data;
+}
+
+export const fetchCoursesTopicsApi = async (): Promise<string[]> => {
+    const res = await axios.get(`${backendUrl}/api/courses/topics`);
+    return res.data;
+}
+
+export const fetchCoursesSkillsApi = async (): Promise<string[]> => {
+    const res = await axios.get(`${backendUrl}/api/courses/skills`);
+    return res.data;
+}
+
+
Index: frontend/src/api/user.ts
===================================================================
--- frontend/src/api/user.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/api/user.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,13 @@
+import axios from "axios";
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
+export const checkEmailExistsApi = async (email: string): Promise<boolean> => {
+    const res = await axios.get(`${backendUrl}/api/auth/check-email`, {
+        params: {
+            email: email,
+        },
+    });
+
+    return res.data;
+}
Index: frontend/src/assets/animations/Loading.json
===================================================================
--- frontend/src/assets/animations/Loading.json	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/assets/animations/Loading.json	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,3 @@
+{"v":"5.6.10","fr":30,"ip":30,"op":210,"w":800,"h":600,"nm":"Ã¥ÂÂÃ¦ÂÂ 1","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 18","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":340,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":30,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 17","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":320,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[0]},{"t":40,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":10,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 16","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":300,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[0]},{"t":50,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":20,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 15","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":280,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[0]},{"t":60,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":30,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 14","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":260,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[0]},{"t":70,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":40,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 13","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":240,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[0]},{"t":80,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":121,"st":50,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 12","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":220,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[0]},{"t":90,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":60,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 11","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":200,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":70,"s":[0]},{"t":100,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":70,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 10","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[0]},{"t":110,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":80,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":160,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[0]},{"t":120,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":90,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":140,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[0]},{"t":130,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":100,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":120,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":110,"s":[0]},{"t":140,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":110,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":100,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"t":150,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":420,"st":120,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":80,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":130,"s":[0]},{"t":160,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":430,"st":130,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":60,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[0]},{"t":170,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":440,"st":140,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":40,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":150,"s":[0]},{"t":180,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":450,"st":150,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":20,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":160,"s":[0]},{"t":190,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":460,"st":160,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":170,"s":[0]},{"t":200,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78,"op":470,"st":170,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 24","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":340,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"t":210,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":180,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 23","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":320,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[0]},{"t":220,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":190,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 22","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":300,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":200,"s":[0]},{"t":230,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":200,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 21","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":280,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":210,"s":[0]},{"t":240,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":210,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 20","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":260,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":220,"s":[0]},{"t":250,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":220,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"Ã¥Â½Â¢Ã§ÂÂ¶Ã¥ÂÂ¾Ã¥Â±Â 19","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":240,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[1.258,2.078,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[200,200],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ã¦Â¤Â­Ã¥ÂÂÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":5,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":230,"s":[0]},{"t":260,"s":[120]}],"ix":3},"m":1,"ix":2,"nm":"Ã¤Â¿Â®Ã¥ÂÂªÃ¨Â·Â¯Ã¥Â¾Â 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.549,0.7608,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":40,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Ã¦ÂÂÃ¨Â¾Â¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[1.258,2.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂÃ¦ÂÂ¢"}],"nm":"Ã¦Â¤Â­Ã¥ÂÂ 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":180,"op":301,"st":230,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Ã©Â¢ÂÃ¥ÂÂÃ¦ÂÂ 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,300,0],"ix":2},"a":{"a":0,"k":[400,300,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"Ã§Â®ÂÃ¥ÂÂÃ©ÂÂ»Ã¥Â¡ÂÃ¥Â·Â¥Ã¥Â
+Â·","np":4,"mn":"ADBE Simple Choker","ix":1,"en":1,"ef":[{"ty":7,"nm":"Ã¨Â§ÂÃ¥ÂÂ¾","mn":"ADBE Simple Choker-0001","ix":1,"v":{"a":0,"k":1,"ix":1}},{"ty":0,"nm":"Ã©ÂÂ»Ã¥Â¡ÂÃ©ÂÂ®Ã§Â½Â©","mn":"ADBE Simple Choker-0002","ix":2,"v":{"a":0,"k":14,"ix":2}}]},{"ty":5,"nm":"Ã¦Â¢Â¯Ã¥ÂºÂ¦Ã¦Â¸ÂÃ¥ÂÂ","np":10,"mn":"ADBE Ramp","ix":2,"en":1,"ef":[{"ty":3,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¨ÂµÂ·Ã§ÂÂ¹","mn":"ADBE Ramp-0001","ix":1,"v":{"a":0,"k":[400,0],"ix":1}},{"ty":2,"nm":"Ã¨ÂµÂ·Ã¥Â§ÂÃ©Â¢ÂÃ¨ÂÂ²","mn":"ADBE Ramp-0002","ix":2,"v":{"a":0,"k":[0.26,0.7903,1,1],"ix":2}},{"ty":3,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ§Â»ÂÃ§ÂÂ¹","mn":"ADBE Ramp-0003","ix":3,"v":{"a":0,"k":[400,600],"ix":3}},{"ty":2,"nm":"Ã§Â»ÂÃ¦ÂÂÃ©Â¢ÂÃ¨ÂÂ²","mn":"ADBE Ramp-0004","ix":4,"v":{"a":0,"k":[0.36,0.8187,1,1],"ix":4}},{"ty":7,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¥Â½Â¢Ã§ÂÂ¶","mn":"ADBE Ramp-0005","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":0,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¦ÂÂ£Ã¥Â°Â","mn":"ADBE Ramp-0006","ix":6,"v":{"a":0,"k":0,"ix":6}},{"ty":0,"nm":"Ã¤Â¸ÂÃ¥ÂÂÃ¥Â§ÂÃ¥ÂÂ¾Ã¥ÂÂÃ¦Â·Â·Ã¥ÂÂ","mn":"ADBE Ramp-0007","ix":7,"v":{"a":0,"k":0,"ix":7}},{"ty":6,"nm":"","mn":"ADBE Ramp-0008","ix":8,"v":0}]}],"w":800,"h":600,"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Ã©Â¢ÂÃ¥ÂÂÃ¦ÂÂ 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":56,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[400,320,0],"ix":2},"a":{"a":0,"k":[400,300,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":5,"nm":"Ã§Â®ÂÃ¥ÂÂÃ©ÂÂ»Ã¥Â¡ÂÃ¥Â·Â¥Ã¥Â
+Â·","np":4,"mn":"ADBE Simple Choker","ix":1,"en":1,"ef":[{"ty":7,"nm":"Ã¨Â§ÂÃ¥ÂÂ¾","mn":"ADBE Simple Choker-0001","ix":1,"v":{"a":0,"k":1,"ix":1}},{"ty":0,"nm":"Ã©ÂÂ»Ã¥Â¡ÂÃ©ÂÂ®Ã§Â½Â©","mn":"ADBE Simple Choker-0002","ix":2,"v":{"a":0,"k":14,"ix":2}}]},{"ty":5,"nm":"Ã¦Â¢Â¯Ã¥ÂºÂ¦Ã¦Â¸ÂÃ¥ÂÂ","np":10,"mn":"ADBE Ramp","ix":2,"en":1,"ef":[{"ty":3,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¨ÂµÂ·Ã§ÂÂ¹","mn":"ADBE Ramp-0001","ix":1,"v":{"a":0,"k":[400,0],"ix":1}},{"ty":2,"nm":"Ã¨ÂµÂ·Ã¥Â§ÂÃ©Â¢ÂÃ¨ÂÂ²","mn":"ADBE Ramp-0002","ix":2,"v":{"a":0,"k":[0.26,0.7903,1,1],"ix":2}},{"ty":3,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ§Â»ÂÃ§ÂÂ¹","mn":"ADBE Ramp-0003","ix":3,"v":{"a":0,"k":[400,600],"ix":3}},{"ty":2,"nm":"Ã§Â»ÂÃ¦ÂÂÃ©Â¢ÂÃ¨ÂÂ²","mn":"ADBE Ramp-0004","ix":4,"v":{"a":0,"k":[0.36,0.8187,1,1],"ix":4}},{"ty":7,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¥Â½Â¢Ã§ÂÂ¶","mn":"ADBE Ramp-0005","ix":5,"v":{"a":0,"k":1,"ix":5}},{"ty":0,"nm":"Ã¦Â¸ÂÃ¥ÂÂÃ¦ÂÂ£Ã¥Â°Â","mn":"ADBE Ramp-0006","ix":6,"v":{"a":0,"k":0,"ix":6}},{"ty":0,"nm":"Ã¤Â¸ÂÃ¥ÂÂÃ¥Â§ÂÃ¥ÂÂ¾Ã¥ÂÂÃ¦Â·Â·Ã¥ÂÂ","mn":"ADBE Ramp-0007","ix":7,"v":{"a":0,"k":0,"ix":7}},{"ty":6,"nm":"","mn":"ADBE Ramp-0008","ix":8,"v":0}]},{"ty":29,"nm":"Ã©Â«ÂÃ¦ÂÂ¯Ã¦Â¨Â¡Ã§Â³Â","np":5,"mn":"ADBE Gaussian Blur 2","ix":3,"en":1,"ef":[{"ty":0,"nm":"Ã¦Â¨Â¡Ã§Â³ÂÃ¥ÂºÂ¦","mn":"ADBE Gaussian Blur 2-0001","ix":1,"v":{"a":0,"k":41.3,"ix":1}},{"ty":7,"nm":"Ã¦Â¨Â¡Ã§Â³ÂÃ¦ÂÂ¹Ã¥ÂÂ","mn":"ADBE Gaussian Blur 2-0002","ix":2,"v":{"a":0,"k":1,"ix":2}},{"ty":7,"nm":"Ã©ÂÂÃ¥Â¤ÂÃ¨Â¾Â¹Ã§Â¼ÂÃ¥ÂÂÃ§Â´Â ","mn":"ADBE Gaussian Blur 2-0003","ix":3,"v":{"a":0,"k":0,"ix":3}}]}],"w":800,"h":600,"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}
Index: ontend/src/assets/react.svg
===================================================================
--- frontend/src/assets/react.svg	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ 	(revision )
@@ -1,1 +1,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Index: ontend/src/components/Card.tsx
===================================================================
--- frontend/src/components/Card.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ 	(revision )
@@ -1,117 +1,0 @@
-import {BookOpen, Clock3} from "lucide-react";
-
-type ColorKey = "shifter" | "deep-green" | "teal" | "dark-blue" | "red";
-
-interface CardInterface {
-    title: string;
-    skills: string[];
-    price: number;
-    duration_hours: number;
-    number_modules: number;
-    image: string;
-    imageAlt: string;
-    color: ColorKey;
-}
-
-
-type Props = {
-    card: CardInterface
-}
-
-function Card({ card }: Props) {
-    const colorMap = {
-        shifter: {
-            bgColor: 'bg-shifter',
-            bgColorOpacity: 'bg-shifter/20',
-            textColor: 'text-shifter',
-            hoverShadow: 'hover:shadow-shifter/50',
-            shadow: 'shadow-shifter/50',
-        },
-        'deep-green': {
-            bgColor: 'bg-deep-green',
-            bgColorOpacity: 'bg-deep-green/20',
-            textColor: 'text-deep-green',
-            hoverShadow: 'hover:shadow-deep-green/50',
-            shadow: 'shadow-deep-green/50',
-        },
-        teal: {
-            bgColor: 'bg-teal',
-            bgColorOpacity: 'bg-teal/20',
-            textColor: 'text-teal',
-            hoverShadow: 'hover:shadow-teal/50',
-            shadow: 'shadow-teal/50',
-        },
-        'dark-blue': {
-            bgColor: 'bg-dark-blue',
-            bgColorOpacity: 'bg-dark-blue/20',
-            textColor: 'text-dark-blue',
-            hoverShadow: 'hover:shadow-dark-blue/50',
-            shadow: 'shadow-dark-blue/50',
-        },
-        red: {
-            bgColor: 'bg-red',
-            bgColorOpacity: 'bg-red/20',
-            textColor: 'text-red',
-            hoverShadow: 'hover:shadow-red/50',
-            shadow: 'shadow-red/50',
-        }
-    }
-    const { bgColor, bgColorOpacity, textColor, hoverShadow, shadow } = colorMap[card.color];
-
-
-    return (
-        <article className="flex flex-col w-fit max-w-xs rounded-xl gap-4 py-4 px-4 bg-[#FFFFFF] h-full">
-            {/*IMAGE*/}
-            <div className="overflow-clip rounded-md rounded-br-4xl rounded-tl-4xl">
-                <img src={card.image} alt={card.imageAlt}
-                     className="w-[300px] h-[150px] object-cover" />
-            </div>
-
-            {/*SKILLS*/}
-            <ul className="flex flex-wrap gap-2 items-start">
-                {card.skills.map((skill, i) => (
-                    <li
-                        key={i}
-                        className={`px-6 py-1 ${bgColorOpacity} ${textColor} text-sm font-medium rounded-md whitespace-nowrap`}
-                    >
-                        {skill}
-                    </li>
-                ))}
-            </ul>
-
-            {/*TITLE AND INFO*/}
-            <div className="flex flex-col justify-between gap-2 items-start text-left h-full">
-                {/*Title*/}
-                <h3 className="font-semibold text-lg">{card.title}</h3>
-
-                {/*Info*/}
-                <div className="flex flex-col gap-2 w-full">
-                    <div className="flex gap-4 font-light text-sm">
-                        <div className="flex gap-2 items-center">
-                            <BookOpen size={24} strokeWidth={1.5} color={`var(--color-${card.color})`} />
-                            {card.number_modules} Modules
-                        </div>
-                        <div className="flex gap-2 items-center">
-                            <Clock3 size={24} strokeWidth={1.5} color={`var(--color-${card.color})`} />
-                            {card.duration_hours} Hours
-                        </div>
-                    </div>
-                    <hr className="border-t-2 border-dark-gray/30 w-full" />
-                </div>
-            </div>
-
-            {/*BUTTON AND PRICE*/}
-            <div className="flex justify-between mt-0">
-                <p className="font-semibold text-lg">$ {card.price}</p>
-                <button
-                    className={`hover:shadow-lg ${hoverShadow} hover:scale-95 transition-all duration-300 cursor-pointer
-                    px-8 py-1 ${bgColor} text-white rounded-md border-3 border-white/30 shadow-md ${shadow}`}
-                >
-                    Explore
-                </button>
-            </div>
-        </article>
-    );
-}
-
-export default Card;
Index: frontend/src/components/CourseCard.tsx
===================================================================
--- frontend/src/components/CourseCard.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/CourseCard.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,95 @@
+import type {Course} from "../types/Course.tsx";
+import React from "react";
+import StarFilled from "../assets/icons/StarFilled.tsx";
+import {hexToRgb} from "../utils/hexToRGB.ts";
+
+
+
+// interface CardInterface {
+//     title: string;
+//     skills: string[];
+//     price: number;
+//     duration_hours: number;
+//     number_modules: number;
+//     image: string;
+//     imageAlt: string;
+//     color: string;
+// }
+
+
+function CourseCard({ card }: {card: Course}) {
+    const [isHovered, setIsHovered] = React.useState<boolean>(false);
+    const bgColor = "bg-[var(--card-color)]";
+    const shadowColor = `rgba(${hexToRgb(card.color)}, 0.6)`;
+
+    return (
+        <article
+            style={{"--card-color": card.color} as React.CSSProperties}
+            className="border-1 border-black/10 shadow-md shadow-black/10
+                flex flex-col w-full rounded-xl gap-4 py-4 px-4 bg-[#FFFFFF] h-full">
+
+            {/*IMAGE*/}
+            <div className="overflow-clip rounded-md rounded-br-4xl rounded-tl-4xl">
+                <img src={card.imageUrl} alt={card.title}
+                     className="w-full h-[180px] object-cover"/>
+            </div>
+
+
+            {/*TITLE AND TOPICS LEARNED*/}
+            <div className="flex flex-col justify-between items-start text-left h-full">
+                {/*Title*/}
+                <h3 className="font-semibold text-lg">{card.titleShort}</h3>
+
+                {/*What will be learned*/}
+                <p className="text-black/60">{
+                    card.whatWillBeLearned.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"/> {card.rating / card.ratingCount}
+                </div>
+                <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                    {card.ratingCount} reviews
+                </div>
+                <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                    {card.durationHours} hours
+                </div>
+                <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                    {0} modules
+                </div>
+                <div className="flex items-center gap-1 px-2 border-1 border-black/20 rounded-sm text-black/60">
+                    {card.difficulty.charAt(0) + card.difficulty.slice(1).toLowerCase()}
+                </div>
+            </div>
+
+            {/*BUTTON AND PRICE*/}
+            <div className="flex justify-between mt-0">
+                <p className={`font-bold text-black/80 text-lg ${card.price == 0 && "font-normal"}`}>{card.price > 0 ? "$"+card.price : "Free"}</p>
+                <button
+                    style={isHovered ?
+                        {boxShadow: `0 4px 6px -1px ${shadowColor},  0 2px 4px -2px ${shadowColor}`} :
+                        {}
+                    }
+                    className={`transition-all duration-200 ease-in-out cursor-pointer
+                    px-8 py-1 ${bgColor} text-white rounded-md border-3 border-white/40 }`}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                >
+                    Explore
+                </button>
+            </div>
+
+        </article>
+    );
+}
+
+export default CourseCard;
Index: frontend/src/components/CoursesCarousel.tsx
===================================================================
--- frontend/src/components/CoursesCarousel.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/CoursesCarousel.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -8,8 +8,8 @@
 import Leadership from "../assets/courseImg/leadership-2.webp"
 import BusinessFoundation from "../assets/courseImg/business-foundation.jpg"
-import Card from "./Card.tsx";
+import CourseCard from "./CourseCard.tsx";
 import "../slick-custom.css";
 
-import ShifterArrow from "../assets/Shifter-Arrow.png";
+import ShifterArrow from "../assets/shifterImg/Shifter-Arrow.png";
 
 function CoursesCarousel() {
@@ -98,5 +98,5 @@
 
     return (
-        <section className="relative flex flex-col gap-10 items-center bg-bright-gray py-vertical-md px-4 overflow-clip">
+        <section className="relative flex flex-col gap-10 items-center bg-dark-blue/10 py-vertical-md px-4 overflow-clip">
             <img src={ShifterArrow} alt="Shifter Arrow" className="absolute opacity-30 h-150 w-120 -rotate-130 -top-30 right-0" />
             <img src={ShifterArrow} alt="Shifter Arrow" className="absolute opacity-30 h-150 w-120 rotate-50 -bottom-30 left-0" />
@@ -115,5 +115,5 @@
                     {courses.map((course, index) => (
                         <div className="h-full flex flex-col">
-                            <Card card={course} />
+                            {/*<CourseCard card={course} />*/}
                         </div>
                     ))}
Index: frontend/src/components/CoursesFilters.tsx
===================================================================
--- frontend/src/components/CoursesFilters.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/CoursesFilters.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,196 @@
+import React from "react";
+import Checkbox from "@mui/material/Checkbox";
+import type {FilterParams} from "../types/FilterParams.tsx";
+import {durationToQueryMapper, priceToQueryMapper} from "../utils/mapper.ts";
+
+function CoursesFilters({setParams, params, topics, skills}: {
+    setParams: React.Dispatch<React.SetStateAction<FilterParams>>,
+    params: FilterParams,
+    topics: string[],
+    skills: string[]
+}) {
+    const duration = [
+        "< 3 hours",
+        "3-6 hours",
+        "6-10 hours",
+        "10+ hours"
+    ]
+    const difficulty = [
+        "BEGINNER",
+        "INTERMEDIATE",
+        "ADVANCED",
+        "EXPERT"
+    ]
+    const price = [
+        "Free",
+        "< $20",
+        "$20 - $50",
+        "$50+",
+    ]
+
+    const handleDifficultyChange = (param: string) => {
+        setParams(prevParams => ({
+            ...prevParams,
+            difficulty: prevParams.difficulty?.includes(param) ?
+                prevParams.difficulty.filter((v: string) => v !== param) :
+                [...(prevParams.difficulty || []), param]
+        }))
+    }
+
+    const handleTopicChange = (param: string) => {
+        setParams(prevParams => ({
+            ...prevParams,
+            topic: prevParams.topic?.includes(param) ?
+                prevParams.topic.filter((v: string) => v !== param) :
+                [...(prevParams.topic || []), param]
+        }))
+    }
+
+    const handleSkillChange = (param: string) => {
+        setParams(prevParams => ({
+            ...prevParams,
+            skill: prevParams.skill?.includes(param) ?
+                prevParams.skill.filter((v: string) => v !== param) :
+                [...(prevParams.skill || []), param]
+        }))
+    }
+
+    const handlePriceChange = (param: string) => {
+        setParams(prevParams => ({
+            ...prevParams,
+            price: prevParams.price?.includes(param) ?
+                prevParams.price.filter((v: string) => v !== param) :
+                [...(prevParams.price || []), param]
+        }))
+    }
+
+    const handleDurationChange = (param: string) => {
+        setParams(prevParams => ({
+            ...prevParams,
+            duration: prevParams.duration?.includes(param) ?
+                prevParams.duration.filter((v: string) => v !== param) :
+                [...(prevParams.duration || []), param]
+        }))
+    }
+
+    return (
+        <aside
+            className="flex flex-col gap-8 pl-8 pt-8 text-left sticky top-0 h-screen bg-white border-r-2 border-black/10">
+            <h2 className="text-2xl font-medium">Filter by</h2>
+            <div className="relative flex flex-col gap-6 pl-4 pr-2 pb-20 overflow-y-auto scrollable">
+                <FilterSelect
+                    header={"Level"}
+                    options={difficulty}
+                    handleFilter={handleDifficultyChange}
+                    selectedOptions={params.difficulty || []}
+                />
+                <FilterSelect
+                    header={"Topic"}
+                    options={topics}
+                    handleFilter={handleTopicChange}
+                    selectedOptions={params.topic || []}
+                />
+                <FilterSelect
+                    header={"Skill"}
+                    options={skills}
+                    handleFilter={handleSkillChange}
+                    selectedOptions={params.skill || []}
+                />
+                <FilterSelect
+                    header={"Duration"}
+                    options={duration}
+                    handleFilter={handleDurationChange}
+                    selectedOptions={params.duration || []}
+                    mapper={durationToQueryMapper}
+                />
+                <FilterSelect
+                    header={"Price"}
+                    options={price}
+                    handleFilter={handlePriceChange}
+                    selectedOptions={params.price || []}
+                    mapper={priceToQueryMapper}
+                />
+
+            </div>
+            <div
+                className="pointer-events-none absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent"/>
+        </aside>
+    )
+}
+
+function FilterSelect({
+                          header,
+                          options,
+                          handleFilter,
+                          selectedOptions,
+                          mapper,
+                      }: {
+    header: string;
+    options: string[];
+    handleFilter: (value: string) => void;
+    selectedOptions: string[];
+    mapper?: (option: string) => string;
+}) {
+    const [showAll, setShowAll] = React.useState(false);
+    const [searchTerm, setSearchTerm] = React.useState("");
+
+
+    // Filter options based on search term
+    const filteredOptions = options.filter((option) =>
+        option.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    // Show only first 4 unless showAll is true
+    const visibleOptions = showAll ? filteredOptions : filteredOptions.slice(0, 4);
+
+    return (
+        <section className="flex flex-col gap-2">
+            <h3 className="text-lg font-medium">{header}</h3>
+            <form className="flex flex-col gap-0">
+                {options.length > 4 && (
+                    <input
+                        type="search"
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        placeholder={`Search ${header
+                            .toLowerCase()
+                            .replace(/_/g, " ")
+                            .replace(/\b\w/g, (c) => c.toUpperCase())}`}
+                        className="px-4 py-1 border-2 border-black/20 rounded-sm focus:outline-none focus:border-shifter w-3/4 mb-2"
+                    />
+                )}
+                {visibleOptions.map((option, index) => (
+                    <label key={index} className="text-lg text-black whitespace-nowrap">
+                        <Checkbox
+                            checked={selectedOptions.includes(mapper ? mapper(option) : option)}
+                            onChange={() => handleFilter(mapper ? mapper(option) : option)}
+                            sx={{
+                                color: "var(--color-black)",
+                                padding: 0,
+                                opacity: 0.6,
+                                marginRight: 1,
+                                "& .MuiSvgIcon-root": {fontSize: 28},
+                                "&.Mui-checked": {color: "var(--color-shifter)", opacity: 1},
+                            }}
+                        />
+                        {option
+                            .toLowerCase()
+                            .replace(/_/g, " ")
+                            .replace(/\b\w/g, (c) => c.toUpperCase())}
+                    </label>
+                ))}
+            </form>
+            {filteredOptions.length > 4 && (
+                <button
+                    type="button"
+                    onClick={() => setShowAll(!showAll)}
+                    className="w-fit underline cursor-pointer hover:bg-dark-blue/10 hover:text-shifter"
+                >
+                    {showAll ? "Show less" : `Show ${filteredOptions.length - 4} more`}
+                </button>
+            )}
+        </section>
+    );
+}
+
+export default CoursesFilters;
Index: frontend/src/components/CoursesGrid.tsx
===================================================================
--- frontend/src/components/CoursesGrid.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/components/CoursesGrid.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,179 @@
+import type {Course} from "../types/Course.tsx";
+import CourseCard from "./CourseCard.tsx";
+import {InputAdornment, TextField} from '@mui/material';
+import {Search} from 'lucide-react';
+import type {FilterParams} from "../types/FilterParams.tsx";
+import React from "react";
+import {X} from 'lucide-react';
+import {queryToDurationMapper, queryToPriceMapper} from "../utils/mapper.ts";
+
+
+function CoursesGrid({courses, loading, setParams, params}: {
+    courses: Course[],
+    loading: boolean,
+    setParams: React.Dispatch<React.SetStateAction<FilterParams>>,
+    params: FilterParams
+}) {
+    const [searchText, setSearchText] = React.useState<string>(params.search || "");
+    const filterClassName = "border-1 border-black/40 rounded-full px-4 text-black/80 "
+
+    const handleSearchFilter = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        setParams(prevParams => ({
+            ...prevParams,
+            search: searchText.trim()
+        }));
+
+        setSearchText("");
+    }
+
+    console.log(params)
+
+    return (
+        <section className="flex flex-col gap-8 px-12 py-6 w-full">
+
+            {/*SEARCH AND SORT BY*/}
+            <div className="flex justify-between items-center w-full">
+                <div className="flex gap-2 flex-wrap items-center justify-start">
+                    {
+                        Object.entries(params).map(([key, values]) => {
+                            if (key === "search") {
+                                const searchValue = values as string;
+                                return (
+                                    <div
+                                        key={`${key}-${searchValue}`}
+                                        className={filterClassName + " flex items-center gap-1"}
+                                    >
+                                        {searchValue
+                                            .toLowerCase()
+                                            .replace(/\b\w/g, c => c.toUpperCase())}
+                                        <button
+                                            onClick={() => {
+                                                setParams(prev => {
+                                                    const typedKey = key as keyof FilterParams;
+                                                    const updatedParams = {...prev};
+                                                    delete updatedParams[typedKey];
+                                                    return updatedParams;
+                                                });
+                                            }}
+                                            className="ml-1 text-black/60 hover:text-black cursor-pointer"
+                                        >
+                                            <X size={16}/>
+                                        </button>
+                                    </div>
+                                )
+                            }
+
+                            // Array-type filters (topics, skills, difficulties, etc.)
+                            return values.map((element: string, idx: number) => (
+                                <div
+                                    key={`${key}-${idx}`}
+                                    className={filterClassName + " flex items-center gap-1"}
+                                >
+                                    {
+                                        key === "price" ?
+                                            queryToPriceMapper(element)
+                                                .replace(/_/g, " ")
+                                                .toLowerCase()
+                                                .replace(/\b\w/g, c => c.toUpperCase()) :
+                                            key === "duration" ?
+                                                queryToDurationMapper(element)
+                                                    .replace(/_/g, " ")
+                                                    .toLowerCase()
+                                                    .replace(/\b\w/g, c => c.toUpperCase()) :
+                                                element
+                                                    .replace(/_/g, " ")
+                                                    .toLowerCase()
+                                                    .replace(/\b\w/g, c => c.toUpperCase())
+                                    }
+                                    <button
+                                        onClick={() => {
+                                            const updatedArray = values.filter((_: string, i: number) => i !== idx);
+                                            const typedKey = key as keyof FilterParams;
+                                            setParams(prev => {
+                                                const newParams = { ...prev };
+                                                if (updatedArray.length === 0) {
+                                                    delete newParams[typedKey]; // remove key if empty array
+                                                } else {
+                                                    newParams[typedKey] = updatedArray; // otherwise set updated array
+                                                }
+                                                return newParams;
+                                            });
+                                        }}
+
+                                        className="ml-1 text-black/60 hover:text-black cursor-pointer"
+                                    >
+                                        <X size={16}/>
+                                    </button>
+                                </div>
+                            ));
+                        })
+                    }
+                </div>
+
+                <form
+                    onSubmit={handleSearchFilter}
+                    className="flex justify-between w-fit">
+                    <TextField
+                        size="small"
+                        type="search"
+                        placeholder="Search..."
+                        variant="outlined"
+                        value={searchText}
+                        onChange={e => setSearchText(e.target.value)}
+                        fullWidth
+                        InputProps={{
+                            startAdornment: (
+                                <InputAdornment position="start">
+                                    <Search size={20}/>
+                                </InputAdornment>
+                            )
+                        }}
+                        sx={{
+                            "& .MuiOutlinedInput-root": {
+                                "& fieldset": {
+                                    borderColor: "gray",
+                                },
+                                "&:hover fieldset": {
+                                    borderColor: "black",
+                                },
+                                "&.Mui-focused fieldset": {
+                                    borderColor: "var(--color-shifter)",
+                                },
+                            },
+                        }}
+                    />
+                    <button
+                        type={"submit"}
+                        className="hover:shadow-sm hover:shadow-shifter transition-all duration-200 ease-in-out
+                        ml-4 px-8 bg-shifter text-white rounded-sm border-2 border-white/40 cursor-pointer
+                    ">Discover
+                    </button>
+                </form>
+            </div>
+
+            {/*COURSES GRID*/}
+            <div className="relative grid grid-cols-3 gap-x-4 gap-y-4 w-full h-fit">
+                {
+                    loading && (
+                        <div className="absolute inset-0 bg-white/60 backdrop-blur-sm
+                        flex flex-col gap-2 items-center justify-start z-10 py-40">
+                            <div className="w-12 loader"></div>
+                            <span className="text-xl font-semibold text-black/40">Loading...</span>
+                        </div>
+                    )
+                }
+                {
+                    courses.map((course, index) => {
+                        return (
+                            <CourseCard card={course} key={index}/>
+                        )
+                    })
+                }
+            </div>
+        </section>
+    )
+}
+
+export default CoursesGrid;
Index: frontend/src/components/Hero.tsx
===================================================================
--- frontend/src/components/Hero.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/Hero.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,4 +1,4 @@
 import StarFilled from "../assets/icons/StarFilled.tsx";
-import ShifterArrow from "../assets/Shifter-Arrow.png";
+import ShifterArrow from "../assets/shifterImg/Shifter-Arrow.png";
 
 function Hero() {
Index: frontend/src/components/RoadmapAI.tsx
===================================================================
--- frontend/src/components/RoadmapAI.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/RoadmapAI.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -35,5 +35,5 @@
 
     return (
-        <section className="px-horizontal py-vertical-md flex flex-col font-montserrat py-vertical-md text-black gap-12">
+        <section className="px-horizontal py-vertical-md flex flex-col py-vertical-md text-black gap-12">
             {/*HEADER*/}
             <div className="flex flex-col gap-2">
@@ -46,7 +46,8 @@
             <div className="flex flex-col">
                 {
-                    roadmapData.map(data => {
+                    roadmapData.map((data, i) => {
                         return (
                             <RoadmapInput
+                                key={i}
                                 title={data.title}
                                 description={data.description}
Index: frontend/src/components/inputs/RegisterInput.tsx
===================================================================
--- frontend/src/components/inputs/RegisterInput.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/inputs/RegisterInput.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,5 +1,5 @@
 import {Eye, EyeOff} from "lucide-react";
 import React from "react";
-import type { User } from "../../types/User.tsx";
+import type { UserRegister } from "../../types/UserRegister.tsx";
 
 type UserStrFields = 'email' | 'password' | 'passwordConfirmation' | 'name' | 'workPosition' | 'companyType';
@@ -12,6 +12,6 @@
     showPassword?: boolean;
     setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
-    setUser: React.Dispatch<React.SetStateAction<User>>;
-    user: User;
+    setUser: React.Dispatch<React.SetStateAction<UserRegister>>;
+    user: UserRegister;
 }
 
@@ -37,5 +37,5 @@
                         value={inputProps.user[inputProps.name] || ""}
                         onChange={e =>
-                            inputProps.setUser((prev: User) => ({
+                            inputProps.setUser((prev: UserRegister) => ({
                                 ...prev,
                                 [inputProps.name]: e.target.value
Index: frontend/src/components/inputs/RegisterSelect.tsx
===================================================================
--- frontend/src/components/inputs/RegisterSelect.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/inputs/RegisterSelect.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,5 +1,5 @@
-import type {User} from "../../types/User.tsx";
+import type {UserRegister} from "../../types/UserRegister.tsx";
 import type {SelectProps} from "../../types/SelectProps.tsx";
-import {toEnumFormat} from "../../utils/toEnumFormat.tsx";
+import {toEnumFormat} from "../../utils/toEnumFormat.ts";
 
 function RegisterSelect(selectProps: SelectProps) {
@@ -20,5 +20,5 @@
                     className="w-full focus:outline-none text-lg cursor-pointer"
                     onChange={e =>
-                        selectProps.setUser((prev: User) => ({
+                        selectProps.setUser((prev: UserRegister) => ({
                             ...prev,
                             [selectProps.name]: toEnumFormat(e.target.value)
Index: frontend/src/components/inputs/RegisterSlider.tsx
===================================================================
--- frontend/src/components/inputs/RegisterSlider.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/inputs/RegisterSlider.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,6 +1,6 @@
 import React from "react";
-import type {User} from "../../types/User.tsx";
+import type {UserRegister} from "../../types/UserRegister.tsx";
 import type {SliderProps} from "../../types/SliderProps.tsx";
-import {toEnumFormat} from "../../utils/toEnumFormat.tsx";
+import {toEnumFormat} from "../../utils/toEnumFormat.ts";
 
 function RegisterSlider(sliderProps: SliderProps) {
@@ -18,10 +18,9 @@
 
     const handleOptionClick = (option: string) => {
-        const newOption = toEnumFormat(option);
-        sliderProps.setUser((prev: User) => {
+        sliderProps.setUser((prev: UserRegister) => {
             const arr = prev[sliderProps.name] as string[] || [];
-            const newArr = arr.includes(newOption)
-                ? arr.filter(item => item !== newOption)
-                : [...arr, newOption];
+            const newArr = arr.includes(option)
+                ? arr.filter(item => item !== option)
+                : [...arr, option];
 
             return {
@@ -42,13 +41,10 @@
                     {sliderProps.label}
                 </label>
-                {
-                    sliderProps.name !== "interests" &&
-                    <input
-                        className="px-3 py-1 rounded-md border border-black/10 text-black text-sm focus:outline-none focus:ring-2 focus:ring-shifter/60 transition-all"
-                        placeholder="Search options..."
-                        value={filterText}
-                        onChange={handleFilterChange}
-                    />
-                }
+                <input
+                    className="px-3 py-1 rounded-md border border-black/10 text-black text-sm focus:outline-none focus:ring-2 focus:ring-shifter/60 transition-all"
+                    placeholder="Search options..."
+                    value={filterText}
+                    onChange={handleFilterChange}
+                />
             </div>
 
@@ -67,5 +63,10 @@
                             onClick={() => handleOptionClick(option)}
                         >
-                            {option}
+                            {
+                                option
+                                    .toLowerCase()
+                                    .replace(/_/g, " ")
+                                    .replace(/\b\w/g, (c) => c.toUpperCase())
+                            }
                         </button>
                     );
Index: frontend/src/components/steps/RegisterStepFive.tsx
===================================================================
--- frontend/src/components/steps/RegisterStepFive.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/steps/RegisterStepFive.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,83 +1,50 @@
 import React, {useEffect} from "react";
-import type {User} from "../../types/User.tsx";
+import type {UserRegister} from "../../types/UserRegister.tsx";
 import RegisterSlider from "../inputs/RegisterSlider.tsx";
+import {fetchCoursesSkillsApi} from "../../api/courses.ts";
 
-function RegisterStepFive({setUser, user, setCanContinue, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<User>>,
-    user: User,
-    setCanContinue: React.Dispatch<React.SetStateAction<boolean>>,
-    setError: React.Dispatch<React.SetStateAction<string>>
-}) {
-    const skills = [
-        "Strategic Thinking",
-        "Strategic Planning",
-        "Business Development",
-        "Project Management",
-        "Operation Management",
-        "Logistics",
-        "Business Model Creation",
-        "Risk Management",
-        "Startup Methodologies",
+function RegisterStepFive({setUser, user, setError}: {
+    setUser: React.Dispatch<React.SetStateAction<UserRegister>>,
+    user: UserRegister,
+    setError: React.Dispatch<React.SetStateAction<string>>,
+}){
+    const [skills, setSkills] = React.useState<string[]>([]);
 
-        "Marketing",
-        "Digital Marketing",
-        "Traditional Marketing",
-        "Branding",
-        "Sales",
-        "Sales Techniques",
-        "B2b Tactics",
-        "B2c Tactics",
-        "Seo",
-        "Google Analytics",
-        "Ecommerce Platforms",
+    useEffect(() => {
+        const fetchSkills = async () => {
+            try {
+                const skillsData = await fetchCoursesSkillsApi();
+                setSkills(skillsData);
+            } catch (err) {
+                console.error("Failed to fetch skills", err);
+            }
+        };
 
-        "Leadership",
-        "People Management",
-        "Team Building",
-        "Delegation",
-        "Conflict Resolution",
-        "Decision Making",
-        "Performance Evaluation",
-        "Change Management",
-
-        "Communication",
-        "Emotional Intelligence",
-        "Time Management",
-        "Adaptability",
-        "Critical Thinking",
-        "Creativity",
-        "Problem Solving",
-
-        "Opportunity Identification",
-        "Fundraising Capital",
-        "Innovation Management",
-
-        "Ai Tools",
-
-        "Business Law",
-        "Business Ethics"
-    ];
+        fetchSkills();
+    }, []);
 
     useEffect(() => {
         if (user.skillsGap.length === 0) {
             setError("Please ensure all inputs are completed.");
-            setCanContinue(false);
         } else {
             setError("");
-            setCanContinue(true);
         }
     }, [user.skillsGap]);
 
     return (
-        <div className="flex flex-col gap-4 w-full">
-            <RegisterSlider
-                label={"Identify Skills Gap"}
-                name={"skillsGap"}
-                id={"skills-gap"}
-                options={skills}
-                setUser={setUser}
-                user={user}
-            />
-        </div>
+        <section
+            className="flex flex-col gap-4 w-full">
+            {
+                skills.length > 0 &&
+                <RegisterSlider
+                    label={"Identify Skills Gap"}
+                    name={"skillsGap"}
+                    id={"skills-gap"}
+                    options={skills}
+                    setUser={setUser}
+                    user={user}
+                />
+            }
+        </section>
     )
 }
Index: frontend/src/components/steps/RegisterStepFour.tsx
===================================================================
--- frontend/src/components/steps/RegisterStepFour.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/steps/RegisterStepFour.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,83 +1,51 @@
 import React, {useEffect} from "react";
-import type {User} from "../../types/User.tsx";
+import type {UserRegister} from "../../types/UserRegister.tsx";
 import RegisterSlider from "../inputs/RegisterSlider.tsx";
+import {fetchCoursesSkillsApi} from "../../api/courses.ts";
 
-function RegisterStepFour({setUser, user, setCanContinue, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<User>>,
-    user: User,
-    setCanContinue: React.Dispatch<React.SetStateAction<boolean>>,
-    setError: React.Dispatch<React.SetStateAction<string>>
+function RegisterStepFour({setUser, user, setError}: {
+    setUser: React.Dispatch<React.SetStateAction<UserRegister>>,
+    user: UserRegister,
+    setError: React.Dispatch<React.SetStateAction<string>>,
 }) {
-    const skills = [
-        "Strategic Thinking",
-        "Strategic Planning",
-        "Business Development",
-        "Project Management",
-        "Operation Management",
-        "Logistics",
-        "Business Model Creation",
-        "Risk Management",
-        "Startup Methodologies",
+    const [skills, setSkills] = React.useState<string[]>([]);
 
-        "Marketing",
-        "Digital Marketing",
-        "Traditional Marketing",
-        "Branding",
-        "Sales",
-        "Sales Techniques",
-        "B2b Tactics",
-        "B2c Tactics",
-        "Seo",
-        "Google Analytics",
-        "Ecommerce Platforms",
+    useEffect(() => {
+        const fetchSkills = async () => {
+            try {
+                const skillsData = await fetchCoursesSkillsApi();
+                setSkills(skillsData);
+            } catch (err) {
+                console.error("Failed to fetch skills", err);
+            }
+        };
 
-        "Leadership",
-        "People Management",
-        "Team Building",
-        "Delegation",
-        "Conflict Resolution",
-        "Decision Making",
-        "Performance Evaluation",
-        "Change Management",
-
-        "Communication",
-        "Emotional Intelligence",
-        "Time Management",
-        "Adaptability",
-        "Critical Thinking",
-        "Creativity",
-        "Problem Solving",
-
-        "Opportunity Identification",
-        "Fundraising Capital",
-        "Innovation Management",
-
-        "Ai Tools",
-
-        "Business Law",
-        "Business Ethics"
-    ];
+        fetchSkills();
+    }, []);
 
     useEffect(() => {
         if (user.skills.length === 0) {
             setError("Please ensure all inputs are completed.");
-            setCanContinue(false);
         } else {
             setError("");
-            setCanContinue(true);
         }
     }, [user.skills]);
 
+
     return (
-        <div className="flex flex-col gap-4 w-full">
-            <RegisterSlider
-                label={"Identify Strengths"}
-                name={"skills"}
-                id={"skills"}
-                options={skills}
-                setUser={setUser}
-                user={user}
-            />
-        </div>
+        <section
+            className="flex flex-col gap-4 w-full">
+            {
+                skills.length > 0 &&
+                <RegisterSlider
+                    label={"Identify Strengths"}
+                    name={"skills"}
+                    id={"skills"}
+                    options={skills}
+                    setUser={setUser}
+                    user={user}
+                />
+            }
+        </section>
     )
 }
Index: frontend/src/components/steps/RegisterStepOne.tsx
===================================================================
--- frontend/src/components/steps/RegisterStepOne.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/steps/RegisterStepOne.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,12 +1,11 @@
 import React, {useEffect} from "react";
-import type {User} from "../../types/User.tsx";
+import type {UserRegister} from "../../types/UserRegister.tsx";
 import RegisterInput from "../inputs/RegisterInput.tsx";
-import {isValidEmail, hasUppercase, hasDigit, hasSpecialChar} from "../../utils/validation.tsx";
+import {isValidEmail, hasUppercase, hasDigit, hasSpecialChar} from "../../utils/validation.ts";
 
-function RegisterStepOne({setUser, user, setCanContinue, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<User>>,
-    user: User,
-    setCanContinue: React.Dispatch<React.SetStateAction<boolean>>,
-    setError: React.Dispatch<React.SetStateAction<string>>
+function RegisterStepOne({setUser, user, setError}: {
+    setUser: React.Dispatch<React.SetStateAction<UserRegister>>,
+    user: UserRegister,
+    setError: React.Dispatch<React.SetStateAction<string>>,
 }) {
     const [showPassword, setShowPassword] = React.useState(false);
@@ -15,23 +14,16 @@
         if (!user.email || !user.password || !user.passwordConfirmation) {
             setError("Please ensure all inputs are completed.");
-            setCanContinue(false);
         } else if (user.email && !isValidEmail(user.email)) {
             setError("Email must be valid");
-            setCanContinue(false);
         } else if (user.password && user.passwordConfirmation && user.password !== user.passwordConfirmation) {
             setError("Passwords do not match");
-            setCanContinue(false);
         } else if (!hasUppercase(user.password)) {
             setError("Password must contain at least one uppercase letter");
-            setCanContinue(false);
         } else if (!hasDigit(user.password)) {
             setError("Password must contain at least one digit");
-            setCanContinue(false);
         } else if (!hasSpecialChar(user.password)) {
             setError("Password must contain at least one special character");
-            setCanContinue(false);
         } else {
             setError("");
-            setCanContinue(true);
         }
 
@@ -39,5 +31,6 @@
 
     return (
-        <div className="flex flex-col gap-4 w-full items-center">
+        <section
+            className="flex flex-col gap-4 w-full items-center">
             <RegisterInput
                 placeholder={"name@email.com"}
@@ -71,5 +64,5 @@
                 user={user}
             />
-        </div>
+        </section>
     );
 }
Index: frontend/src/components/steps/RegisterStepThree.tsx
===================================================================
--- frontend/src/components/steps/RegisterStepThree.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/steps/RegisterStepThree.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,48 +1,51 @@
 import React, {useEffect} from "react";
-import type {User} from "../../types/User.tsx";
+import type {UserRegister} from "../../types/UserRegister.tsx";
 import RegisterSlider from "../inputs/RegisterSlider.tsx";
+import {fetchCoursesTopicsApi} from "../../api/courses.ts";
 
-function RegisterStepThree({setUser, user, setCanContinue, setError}:
-                       {
-                           setUser: React.Dispatch<React.SetStateAction<User>>,
-                           user: User,
-                           setCanContinue: React.Dispatch<React.SetStateAction<boolean>>,
-                           setError: React.Dispatch<React.SetStateAction<string>>
-                       }) {
-    const interests = [
-        "Sales Strategies",
-        "Marketing",
-        "Leadership",
-        "Management",
-        "Digital Transformation",
-        "Business Transformation",
-        "Entrepreneurship",
-        "Startup",
-        "Sales",
-        "Negotiation",
-        "Finance For Business"
-    ]
+function RegisterStepThree({setUser, user, setError}: {
+    setUser: React.Dispatch<React.SetStateAction<UserRegister>>,
+    user: UserRegister,
+    setError: React.Dispatch<React.SetStateAction<string>>,
+}) {
+    const [interests, setInterests] = React.useState<string[]>([]);
+
+    useEffect(() => {
+        const fetchCourseTopics = async () => {
+            try {
+                const topicsData = await fetchCoursesTopicsApi();
+                setInterests(topicsData);
+            } catch (err) {
+                console.error("Failed to fetch course topics (user interests)", err);
+            }
+        };
+
+        fetchCourseTopics();
+    }, []);
 
     useEffect(() => {
         if (user.interests.length === 0) {
             setError("Please ensure all inputs are completed.");
-            setCanContinue(false);
         } else {
             setError("");
-            setCanContinue(true);
         }
     }, [user.interests]);
 
+
     return (
-        <div className="flex flex-col gap-4 w-full items-center">
-            <RegisterSlider
-                label={"Pick Your Preferences"}
-                name={"interests"}
-                id={"interests"}
-                options={interests}
-                setUser={setUser}
-                user={user}
-            />
-        </div>
+        <section
+            className="flex flex-col gap-4 w-full items-center">
+            {
+                interests.length > 0 &&
+                <RegisterSlider
+                    label={"Pick Your Preferences"}
+                    name={"interests"}
+                    id={"interests"}
+                    options={interests}
+                    setUser={setUser}
+                    user={user}
+                />
+            }
+        </section>
     )
 }
Index: frontend/src/components/steps/RegisterStepTwo.tsx
===================================================================
--- frontend/src/components/steps/RegisterStepTwo.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/components/steps/RegisterStepTwo.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,12 +1,11 @@
 import React, {useEffect} from "react";
-import type {User} from "../../types/User.tsx";
+import type {UserRegister} from "../../types/UserRegister.tsx";
 import RegisterInput from "../inputs/RegisterInput.tsx";
 import RegisterSelect from "../inputs/RegisterSelect.tsx";
 
-function RegisterStepTwo({setUser, user, setCanContinue, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<User>>,
-    user: User,
-    setCanContinue: React.Dispatch<React.SetStateAction<boolean>>,
-    setError: React.Dispatch<React.SetStateAction<string>>
+function RegisterStepTwo({setUser, user, setError}: {
+    setUser: React.Dispatch<React.SetStateAction<UserRegister>>,
+    user: UserRegister,
+    setError: React.Dispatch<React.SetStateAction<string>>,
 }) {
 
@@ -14,13 +13,12 @@
         if (!user.name || !user.workPosition || !user.companyType) {
             setError("Please ensure all inputs are completed.");
-            setCanContinue(false);
         } else {
             setError("");
-            setCanContinue(true);
         }
     }, [user.name, user.workPosition, user.companyType]);
 
     return (
-        <div className="flex flex-col gap-4 w-full items-center">
+        <section
+            className="flex flex-col gap-4 w-full items-center">
             <RegisterInput
                 placeholder={"John Doe"}
@@ -49,5 +47,5 @@
                 user={user}
             />
-        </div>
+        </section>
     );
 }
Index: frontend/src/global.css
===================================================================
--- frontend/src/global.css	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/global.css	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -3,4 +3,5 @@
 @theme {
     --spacing-horizontal: 7rem;
+    --spacing-horizontal-lg: 10rem;
     --spacing-vertical-lg: 3rem;
     --spacing-vertical-md: 2rem;
@@ -9,5 +10,5 @@
 
 
-
+    --color-beige: #F0CFB5;
     --color-shifter: #008CC2;
     --color-red: #FF6F61;
@@ -62,5 +63,5 @@
 
 :root {
-    --color-white: #EEEEEE;
+    --color-white: #FFFFFF;
     --color-black: #111111;
 
@@ -80,4 +81,5 @@
     padding: 0;
     text-align: center;
+    @apply font-sans;
 }
 
@@ -118,4 +120,33 @@
 }
 
+
+/* Hide scrollbar - works on most browsers */
+.scrollable {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;  /* IE and Edge */
+}
+
+.scrollable::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+}
+
+/* Show scrollbar on hover */
+.scrollable:hover {
+    scrollbar-width: thin;
+    -ms-overflow-style: auto;
+}
+
+.scrollable:hover::-webkit-scrollbar {
+    display: block;
+    width: 6px;
+}
+
+.scrollable:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.4);
+    border-radius: 4px;
+}
+
+
+
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
@@ -129,2 +160,30 @@
 }
 
+
+/* HTML: <div class="loader"></div> */
+.loader {
+    margin-left: 20px;
+    /*width: 40px;*/
+    aspect-ratio: 1;
+    display: grid;
+    border: 4px solid #0000;
+    border-radius: 50%;
+    border-right-color: var(--color-shifter);
+    animation: l15 1s infinite linear;
+}
+.loader::before,
+.loader::after {
+    content: "";
+    grid-area: 1/1;
+    margin: 2px;
+    border: inherit;
+    border-radius: 50%;
+    animation: l15 2s infinite;
+}
+.loader::after {
+    margin: 8px;
+    animation-duration: 3s;
+}
+@keyframes l15{
+    100%{transform: rotate(1turn)}
+}
Index: frontend/src/layout/Footer.tsx
===================================================================
--- frontend/src/layout/Footer.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/layout/Footer.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,3 +1,3 @@
-import ShifterLogo from "../assets/Shifter-S2W-White-Transparent.png";
+import ShifterLogo from "../assets/shifterImg/Shifter-S2W-White-Transparent.png";
 import {Link} from "react-router-dom";
 
Index: frontend/src/layout/Navbar.tsx
===================================================================
--- frontend/src/layout/Navbar.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/layout/Navbar.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,7 +1,8 @@
 import {Link} from "react-router-dom";
-import logo from "../assets/Shifter-S2W-White-Transparent.png"
-import {CircleUserRound} from "lucide-react";
+import logo from "../assets/shifterImg/Shifter-S2W-White-Transparent.png"
+import {useGlobalContext} from "../GlobalContext.tsx";
 
 function Navbar() {
+    const {user, logout} = useGlobalContext();
 
     return (
@@ -52,15 +53,29 @@
                      rounded-full transition-all duration-300 ease-in-out"/>
                 </div>
-                <div className="flex flex-col gap-0 overflow-clip p-1 group">
-                    <Link to="/profile" className="hover:scale-110 transition-all
-                    duration-300 ease-in-out z-10">Profile</Link>
-                    <hr className="relative -left-30 group-hover:-left-4 border-t-2
+                {
+                    user ? (
+                        <>
+                            <div className="flex flex-col gap-0 overflow-clip p-1 group">
+                                <button onClick={logout} className="hover:scale-110 transition-all
+                    duration-300 ease-in-out z-10 cursor-pointer">Profile</button>
+                                {/*<Link to="/profile" className="hover:scale-110 transition-all*/}
+                    {/*duration-300 ease-in-out z-10">Profile</Link>*/}
+                                <hr className="relative -left-30 group-hover:-left-4 border-t-2
                      rounded-full transition-all duration-300 ease-in-out"/>
-                </div>
-                <Link to="/mentoring"
-                      className="hover:mr-0 hover:font-semibold transition-all duration-200 ease-in-out cursor-pointer
+                            </div>
+                            <Link to="/schedule-consulation"
+                                  className="hover:mr-0 hover:font-semibold 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>
+                            >Free Consultation</Link>
+                        </>
+                    ) : (
+                        <Link to="/login"
+                              className="hover:mr-0 hover:font-semibold 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>
+                    )
+                }
             </div>
         </nav>
Index: frontend/src/main.tsx
===================================================================
--- frontend/src/main.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/main.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -3,8 +3,11 @@
 import './global.css'
 import App from './App.tsx'
+import {GlobalProvider} from "./GlobalContext.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+      <GlobalProvider>
+          <App />
+      </GlobalProvider>
   </StrictMode>,
 )
Index: frontend/src/pages/Courses.tsx
===================================================================
--- frontend/src/pages/Courses.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/pages/Courses.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,162 @@
+import React, {useEffect, useRef} from "react";
+import CoursesFilters from "../components/CoursesFilters.tsx";
+import CoursesGrid from "../components/CoursesGrid.tsx";
+import { type Course} from "../types/Course.tsx";
+import type {FilterParams} from "../types/FilterParams.tsx";
+import { useNavigate, useLocation } from "react-router-dom";
+import {fetchCoursesApi, fetchCoursesSkillsApi, fetchCoursesTopicsApi} from "../api/courses.ts";
+import axios from "axios";
+
+function getInitialParamsFromSearch(): FilterParams {
+    const searchParams = new URLSearchParams(location.search);
+    const initialParams: FilterParams = {};
+
+    const search = searchParams.get("search");
+    if (search) initialParams.search = search;
+
+    const skill = searchParams.getAll("skill");
+    if (skill.length > 0) initialParams.skill = skill;
+
+    const topic = searchParams.getAll("topic");
+    if (topic.length > 0) initialParams.topic = topic;
+
+    const difficulty = searchParams.getAll("difficulty");
+    if (difficulty.length > 0) initialParams.difficulty = difficulty;
+
+    const price = searchParams.getAll("price");
+    if (price.length > 0) initialParams.price = price;
+
+    const duration = searchParams.getAll("duration");
+    if (duration.length > 0) initialParams.duration = duration;
+
+    return initialParams;
+}
+
+function Courses() {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const [loading, setLoading] = React.useState<boolean>(false);
+    const [courses, setCourses] = React.useState<Course[]>([]);
+    const [params, setParams] = React.useState<FilterParams>(getInitialParamsFromSearch());
+    const [topics, setTopics] = React.useState<string[]>([]);
+    const [skills, setSkills] = React.useState<string[]>([]);
+
+    const abortControllerRef = useRef<AbortController | null>(null);
+    const debounceTimeoutRef = useRef<number | null>(null);
+
+    const fetchFilterValues = () => {
+        fetchCoursesTopicsApi()
+            .then(data => {
+                setTopics([...new Set(data as string[])]);
+            })
+            .catch(err => {
+                console.error("Error fetching topics:", err);
+            })
+
+        fetchCoursesSkillsApi()
+            .then(data => {
+                setSkills([...new Set(data as string[])]);
+            })
+            .catch(err => {
+                console.error("Error fetching skills:", err);
+            })
+    }
+
+    const fetchCourses = () => {
+
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+
+        setLoading(true);
+
+        fetchCoursesApi(params, controller.signal)
+            .then(data => {
+                setCourses(data)
+            })
+            .catch(err => {
+                if (axios.isCancel(err)) {
+                    // request canceled, no need to do anything
+                    console.log("Request canceled");
+                } else if (err.name === "CanceledError") {
+                    // axios 1.x abort signals throw CanceledError
+                    console.log("Request aborted");
+                } else {
+                    console.error("Error fetching courses:", err);
+                }
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    }
+
+    // FETCH FILTER TOPICS AND SKILLS. GET THE PARAMS FROM THE QUERY - ONLY ON MOUNT
+    useEffect(() => {
+        fetchFilterValues();
+    }, []);
+
+    // UPDATE URL WHEN PARAMS CHANGE
+    useEffect(() => {
+        if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+
+        debounceTimeoutRef.current = setTimeout(() => {
+            // Update URL params
+            const paramsToUrl = new URLSearchParams();
+
+            Object.entries(params).forEach(([key, value]) => {
+                if (
+                    value !== undefined &&
+                    value !== null &&
+                    !(typeof value === "string" && value.trim() === "") &&
+                    !(Array.isArray(value) && value.length === 0)
+                ) {
+                    if (Array.isArray(value) && value.length > 0) {
+                        value.forEach(v => paramsToUrl.append(key, v));
+                    } else {
+                        paramsToUrl.set(key, value.toString());
+                    }
+                }
+            });
+
+            const newSearch = paramsToUrl.toString();
+            if (newSearch !== location.search.replace(/^\?/, "")) {
+                navigate({ pathname: location.pathname, search: newSearch }, { replace: true });
+            }
+
+            fetchCourses();
+        }, 500);
+
+        return () => {
+            if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+            if (abortControllerRef.current) abortControllerRef.current.abort();
+        };
+    }, [params]);
+
+
+    return (
+        <main className="font-montserrat bg-white">
+            <section className="bg-deep-green/10 flex flex-col items-center justify-center py-vertical-lg pt-40 gap-4 px-40">
+                <h1 className="text-6xl">
+                    Ready to Take the
+                    <br />
+                    <strong className="text-shifter font-semibold">Next Step?</strong>
+                </h1>
+                <p>
+                    Explore courses designed not just to teach — but to shift your mindset, sharpen your skills, and
+                    accelerate your journey toward real impact. Whether you're scaling a business, leading a team, or
+                    growing as a professional, this is where transformation begins.
+                </p>
+            </section>
+            <div className="flex gap-0 w-full">
+                <CoursesFilters setParams={setParams} params={params} topics={topics} skills={skills}/>
+                <CoursesGrid setParams={setParams} params={params} courses={courses} loading={loading}/>
+            </div>
+        </main>
+    )
+}
+
+export default Courses;
Index: frontend/src/pages/Home.tsx
===================================================================
--- frontend/src/pages/Home.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/pages/Home.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -8,5 +8,5 @@
 
     return (
-        <>
+        <main>
             <Hero />
             <CollaborationSteps />
@@ -14,5 +14,5 @@
             <CoursesCarousel />
             <ShifterValues />
-        </>
+        </main>
     )
 }
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/pages/Login.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,115 +1,8 @@
-import ShifterLogo from "../assets/Shifter-Logo-S2W-Transparent.png"
+import ShifterLogo from "../assets/shifterImg/Shifter-Logo-S2W-Transparent.png";
+import ShifterArrow from "../assets/shifterImg/Shifter-Arrow-White.png";
 import React from "react";
-import {Eye, EyeOff} from "lucide-react";
-import ShifterArrow from "../assets/Shifter-Arrow-White.png"
-import { Link } from "react-router-dom";
-
-
-function Login() {
-
-    return (
-        <section className="flex font-montserrat h-screen">
-
-            {/* LEFT HEADER AND BACKGROUND */}
-            <div className="relative bg-black w-[55%] overflow-hidden">
-                <div
-                    className="absolute w-full h-full bg-shifter/80 z-0 text-white px-20 flex flex-col gap-4 justify-center text-start">
-                    {/*Arrows*/}
-                    <img src={ShifterArrow} alt="Shifter Arrow"
-                         className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"/>
-                    <img src={ShifterArrow} alt="Shifter Arrow"
-                         className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"/>
-
-                    <h1 className="text-7xl font-semibold z-2">Welcome Back!</h1>
-                    <p className="text-2xl font-light z-2">Let's unlock your next breakthrough in business!</p>
-                </div>
-
-            </div>
-
-            {/* RIGHT FORM CONTAINER */}
-            <div className="relative flex flex-col justify-center items-center flex-1 px-30 gap-4">
-                <img
-                    src={ShifterLogo}
-                    alt="Shifter Logo"
-                    className="absolute top-4 left-4 w-40 h-auto object-contain"/>
-
-                <Input
-                    placeholder={"name@email.com"}
-                    label={"Email address"}
-                    name={"email"}
-                    type={"email"}
-                    id={"login-email"}
-                />
-                <Input
-                    placeholder={"********"}
-                    label={"Password"}
-                    name={"password"}
-                    type={"password"}
-                    id={"login-password"}
-                />
-
-                {/*Buttons*/}
-                <div
-                    className="flex gap-2 justify-start text-md w-full text-lg mt-4">
-                    <button
-                        className="hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer
-                            rounded-md border-3 border-white/50 text-white w-1/3 py-1 bg-shifter font-medium
-                            whitespace-nowrap">
-                        Log In
-                    </button>
-                    <Link
-                        to={"/register"}
-                        className="hover:shadow-md hover:shadow-shifter/20 transition-all duration-200 ease-in-out cursor-pointer
-                            rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium
-                            whitespace-nowrap"
-
-                    >
-                        Register
-                    </Link>
-                </div>
-            </div>
-
-        </section>
-    )
-}
-
-function Input(inputProps: InputProps) {
-    const [showPassword, setShowPassword] = React.useState(false);
-
-    return (
-        <div
-            className="relative flex flex-col gap-1 px-6 py-1.5 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm w-full">
-            <label
-                htmlFor={inputProps.id}
-                className="text-shifter text-light"
-            >
-                {inputProps.label}
-            </label>
-            <div className="flex gap-2 w-full">
-                <div className="w-full">
-                    <input
-                        id={inputProps.id}
-                        type={inputProps.name !== "password" ? "text" : showPassword ? "text" : "password"}
-                        name={inputProps.name}
-                        placeholder={inputProps.placeholder}
-                        className="w-full focus:outline-none text-lg"
-                    />
-                    <hr className="border-t-2 border-black/5 rounded-full w-full"/>
-                </div>
-                {
-                    inputProps.name === "password" &&
-                    <button
-                        type="button"
-                        onClick={() => setShowPassword?.((prev) => !prev)}
-                        className="text-black cursor-pointer hover:bg-black/5 rounded-full p-1"
-                        aria-label={showPassword ? "Hide password" : "Show password"}
-                    >
-                        {!showPassword ? <EyeOff size={20} opacity={0.6}/> : <Eye size={20} opacity={0.6}/>}
-                    </button>
-                }
-            </div>
-        </div>
-    )
-}
+import { Eye, EyeOff } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import { useGlobalContext } from "../GlobalContext.tsx";
 
 interface InputProps {
@@ -119,4 +12,172 @@
     type: string;
     id: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function Login() {
+    const { login } = useGlobalContext();
+    const [email, setEmail] = React.useState<string>("");
+    const [password, setPassword] = React.useState<string>("");
+    const [error, setError] = React.useState<string>("");
+    const [isLoading, setIsLoading] = React.useState<boolean>(false);
+    const navigate = useNavigate();
+
+    const handleLogin = async (e: React.FormEvent) => {
+        setIsLoading(true);
+        e.preventDefault();
+        setError("");
+
+        try {
+            await login(email, password);
+            navigate("/");
+        } catch (err: any) {
+            if (err.response?.status === 401) {
+                setError("Invalid email or password.");
+            } else {
+                setError("Something went wrong. Please try again.");
+            }
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <section className="flex font-montserrat h-screen bg-white">
+            {/* LEFT HEADER AND BACKGROUND */}
+            <section className="relative bg-black w-[55%] overflow-hidden">
+                <div className="absolute w-full h-full bg-shifter/80 z-0 text-white px-20 flex flex-col gap-4 justify-center text-start">
+                    <img
+                        src={ShifterArrow}
+                        alt="Shifter Arrow"
+                        className="absolute -top-20 right-20 -rotate-130 w-auto h-100 opacity-70 z-2"
+                    />
+                    <img
+                        src={ShifterArrow}
+                        alt="Shifter Arrow"
+                        className="absolute -bottom-20 left-20 rotate-50 w-auto h-100 opacity-70 z-2"
+                    />
+
+                    <h1 className="text-7xl font-semibold z-2">Welcome Back!</h1>
+                    <p className="text-2xl font-light z-2">
+                        Let's unlock your next breakthrough in business!
+                    </p>
+                </div>
+            </section>
+
+            {/* RIGHT FORM CONTAINER */}
+            <section className="relative flex flex-col justify-center items-center flex-1 px-30">
+                <img
+                    src={ShifterLogo}
+                    alt="Shifter Logo"
+                    className="absolute top-4 left-4 w-40 h-auto object-contain"
+                />
+
+                <form
+                    onSubmit={handleLogin}
+                    className="flex flex-col justify-center items-center gap-4 w-full"
+                >
+
+                    <Input
+                        placeholder="name@email.com"
+                        label="Email address"
+                        name="email"
+                        type="email"
+                        id="login-email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                    />
+                    <Input
+                        placeholder="********"
+                        label="Password"
+                        name="password"
+                        type="password"
+                        id="login-password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                    />
+
+                    {/* Error Message */}
+                    {error && <p className="text-red-500 text-sm">{error}</p>}
+
+                    {/* Buttons */}
+                    <div className="flex gap-2 justify-start text-md w-full text-lg mt-4">
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out cursor-pointer
+              rounded-md border-3 border-white/50 text-white w-1/3 py-1 bg-shifter font-medium
+              whitespace-nowrap ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+                        >
+                            {
+                                isLoading ? "Logging in..." : "Log In"
+                            }
+                        </button>
+                        <Link
+                            to="/register"
+                            className="hover:shadow-md hover:shadow-shifter/20 transition-all duration-200 ease-in-out cursor-pointer
+              rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium
+              whitespace-nowrap"
+                        >
+                            Register
+                        </Link>
+
+                        {/* Loading Animation */}
+                        {
+                            isLoading && (
+                                <div className="h-full loader"></div>
+                            )
+                        }
+                    </div>
+                </form>
+            </section>
+        </section>
+    );
+}
+
+function Input(inputProps: InputProps) {
+    const [showPassword, setShowPassword] = React.useState(false);
+
+    return (
+        <div className="relative flex flex-col gap-1 px-6 py-1.5 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm w-full">
+            <label htmlFor={inputProps.id} className="text-shifter text-light">
+                {inputProps.label}
+            </label>
+            <div className="flex gap-2 w-full">
+                <div className="w-full">
+                    <input
+                        id={inputProps.id}
+                        type={
+                            inputProps.name !== "password"
+                                ? "text"
+                                : showPassword
+                                    ? "text"
+                                    : "password"
+                        }
+                        name={inputProps.name}
+                        placeholder={inputProps.placeholder}
+                        className="w-full focus:outline-none text-lg"
+                        value={inputProps.value}
+                        onChange={inputProps.onChange}
+                    />
+                    <hr className="border-t-2 border-black/5 rounded-full w-full" />
+                </div>
+                {inputProps.name === "password" && (
+                    <button
+                        type="button"
+                        onClick={() => setShowPassword((prev) => !prev)}
+                        className="text-black cursor-pointer hover:bg-black/5 rounded-full p-1"
+                        aria-label={showPassword ? "Hide password" : "Show password"}
+                    >
+                        {!showPassword ? (
+                            <EyeOff size={20} opacity={0.6} />
+                        ) : (
+                            <Eye size={20} opacity={0.6} />
+                        )}
+                    </button>
+                )}
+            </div>
+        </div>
+    );
 }
 
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/pages/Register.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,5 +1,5 @@
 import React from "react";
-import ShifterLogo from "../assets/Shifter-Logo-S2W-Transparent.png";
-import ShifterArrow from "../assets/Shifter-Arrow-White.png";
+import ShifterLogo from "../assets/shifterImg/Shifter-Logo-S2W-Transparent.png";
+import ShifterArrow from "../assets/shifterImg/Shifter-Arrow-White.png";
 import {
     Stepper,
@@ -9,8 +9,7 @@
 } from "@mui/material";
 import {CustomStepperConnector, CustomStepperStepIcon} from "../components/CustomStepper";
-import {Link} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import {motion, AnimatePresence} from "framer-motion";
-import axios from "axios";
-import type { User } from "../types/User.tsx";
+import type {UserRegister} from "../types/UserRegister.tsx";
 import RegisterStepOne from "../components/steps/RegisterStepOne.tsx";
 import RegisterStepTwo from "../components/steps/RegisterStepTwo.tsx";
@@ -18,12 +17,16 @@
 import RegisterStepFour from "../components/steps/RegisterStepFour.tsx";
 import RegisterStepFive from "../components/steps/RegisterStepFive.tsx";
+import {useGlobalContext} from "../GlobalContext.tsx";
+import {isValidEmail} from "../utils/validation.ts";
+import {checkEmailExistsApi} from "../api/user.ts";
 
 function Register() {
+    const {register} = useGlobalContext();
+    const [isLoading, setIsLoading] = React.useState<boolean>(false);
     const [activeStep, setActiveStep] = React.useState(0);
-    const [canContinue, setCanContinue] = React.useState(true);
     const [showError, setShowError] = React.useState(false);
     const [error, setError] = React.useState("");
     const [direction, setDirection] = React.useState(0); // 1 for next, -1 for back
-    const [user, setUser] = React.useState<User>({
+    const [user, setUser] = React.useState<UserRegister>({
         email: "",
         password: "",
@@ -36,16 +39,24 @@
         skillsGap: [],
     });
-
-
-    const stepsContent = [
-        <RegisterStepOne setUser={setUser} user={user} setCanContinue={setCanContinue} setError={setError}/>,
-        <RegisterStepTwo setUser={setUser} user={user} setCanContinue={setCanContinue} setError={setError}/>,
-        <RegisterStepThree setUser={setUser} user={user} setCanContinue={setCanContinue} setError={setError}/>,
-        <RegisterStepFour setUser={setUser} user={user} setCanContinue={setCanContinue} setError={setError}/>,
-        <RegisterStepFive setUser={setUser} user={user} setCanContinue={setCanContinue} setError={setError}/>];
-
-    const handleNext = () => {
-        setDirection(1);
-        setActiveStep((prev) => prev + 1);
+    const navigate = useNavigate();
+
+    const handleNext = async () => {
+        if (activeStep === 0) {
+            const existsEmail: boolean = isValidEmail(user.email) ? await checkEmailExistsApi(user.email) : false;
+            if (existsEmail) {
+                setError("Email already exists");
+                setShowError(true)
+                return
+            }
+        }
+
+        if (error.length > 0) {
+            setShowError(true)
+        } else {
+            setError("");
+            setShowError(false);
+            setDirection(1);
+            setActiveStep((prev) => prev + 1);
+        }
     };
     const handleBack = () => {
@@ -68,21 +79,31 @@
     };
 
-    const handleRegister = () => {
-        console.log("user", user);
-        console.log(import.meta.env.VITE_BACKEND_URL)
-        axios.post(`http://localhost:8080/api/auth/register`, user)
-            .then(() => {
-                console.log("User registered successfully");
-            })
-            .catch(err => {
-                console.log("Error registering user:", err);
-            })
+    const handleRegister = async () => {
+        setIsLoading(true);
+
+        try {
+            await register(user);
+            navigate("/");
+        } catch (err: any) {
+            setError("Registration failed. Please try again.");
+            console.log("Registration error: ", err);
+        } finally {
+            setIsLoading(false);
+        }
     }
 
+    const stepsContent = [
+        <RegisterStepOne setUser={setUser} user={user} setError={setError} />,
+        <RegisterStepTwo setUser={setUser} user={user} setError={setError} />,
+        <RegisterStepThree setUser={setUser} user={user} setError={setError} />,
+        <RegisterStepFour setUser={setUser} user={user} setError={setError} />,
+        <RegisterStepFive setUser={setUser} user={user} setError={setError} />
+    ];
+
     return (
-        <section className="flex font-montserrat h-screen">
+        <section className="flex font-montserrat h-screen bg-white">
 
             {/* LEFT HEADER AND BACKGROUND */}
-            <div className="relative bg-black w-[55%] overflow-hidden">
+            <section className="relative bg-black w-[55%] overflow-hidden">
                 <div
                     className="absolute w-full h-full bg-shifter/80 z-0 text-white px-16 flex flex-col gap-4 justify-center text-start">
@@ -96,8 +117,8 @@
                         growth.</p>
                 </div>
-            </div>
+            </section>
 
             {/* RIGHT FORM CONTAINER */}
-            <div className="relative flex flex-col justify-center items-center flex-1 px-20 gap-6">
+            <section className="relative flex flex-col justify-center items-center flex-1 px-20 gap-6">
                 <img
                     src={ShifterLogo}
@@ -122,5 +143,5 @@
                     </Stepper>
 
-                    <Box className="flex flex-col overflow-hidden">
+                    <Box className="flex flex-col overflow-hidden gap-2">
 
                         {/*STEPPER CONTENT*/}
@@ -143,14 +164,10 @@
                         </AnimatePresence>
 
+                        {/* Error Message */}
+                        {showError && <p className="text-red-500 text-sm">{error}</p>}
+
 
                         {/*STEPPER BUTTONS*/}
                         <Box className="flex flex-col justify-center items-center gap-2">
-                            {
-                                showError && (
-                                    <p className="text-red-500 font-medium text-sm">
-                                        {error}
-                                    </p>
-                                )
-                            }
                             <div className="flex justify-center gap-4 ">
                                 <button
@@ -159,5 +176,5 @@
                                     className="disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none
                                     hover:shadow-sm hover:shadow-black/20 transition-all duration-200 ease-in-out
-                                border-3 border-white/50 px-10 py-2 bg-black/10 text-black/60 cursor-pointer rounded-sm "
+                                border-3 border-white/50 px-10 py-1 bg-black/10 text-black/60 cursor-pointer rounded-sm "
                                 >
                                     Back
@@ -166,19 +183,15 @@
                                     <button
                                         onClick={handleRegister}
-                                        className="hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out
-                                    px-20 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md"
+                                        className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out
+                                    px-20 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md 
+                                    ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
                                     >
-                                        Start Your Journey
+                                        {
+                                            isLoading ? "Setting up..." : "Start Your Journey"
+                                        }
                                     </button>
                                 ) : (
                                     <button
-                                        onClick={() => {
-                                            if (canContinue) {
-                                                setShowError(false);
-                                                handleNext();
-                                            } else {
-                                                setShowError(true)
-                                            }
-                                        }}
+                                        onClick={handleNext}
                                         // disabled={!canContinue}
                                         className={`disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none
@@ -189,4 +202,12 @@
                                     </button>
                                 )}
+
+
+                                {/* Loading Animation */}
+                                {
+                                    isLoading && (
+                                        <div className="h-full loader"></div>
+                                    )
+                                }
                             </div>
                             <p
@@ -203,5 +224,5 @@
                     </Box>
                 </Box>
-            </div>
+            </section>
         </section>
     );
Index: frontend/src/types/Course.tsx
===================================================================
--- frontend/src/types/Course.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/types/Course.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,22 @@
+export interface Course {
+    id: number,
+    imageUrl: string;
+    color: string;
+    titleShort: string;
+    title: string;
+    topic: string;
+    difficulty: Difficulty;
+    durationHours: number;
+    price: number;
+    rating: number;
+    ratingCount: number;
+    descriptionShort: string;
+    description: string;
+    descriptionLong: string;
+    skillsGained: string[];
+    whatWillBeLearned: string[];
+}
+
+type Difficulty = "Beginner" | "Intermediate" | "Advanced" | "Expert";
+
+
Index: frontend/src/types/FilterParams.tsx
===================================================================
--- frontend/src/types/FilterParams.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/types/FilterParams.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,9 @@
+
+export interface FilterParams {
+    search: string;
+    difficulty: string[];
+    price: string[];
+    duration: string[];
+    skill: string[];
+    topic: string[];
+}
Index: frontend/src/types/FilterRange.tsx
===================================================================
--- frontend/src/types/FilterRange.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/types/FilterRange.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,4 @@
+export interface FilterRange {
+    floor: number;
+    ceil: number;
+}
Index: frontend/src/types/SelectProps.tsx
===================================================================
--- frontend/src/types/SelectProps.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/types/SelectProps.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,4 +1,4 @@
 import React from "react";
-import type {User} from "./User.tsx";
+import type {UserRegister} from "./UserRegister.tsx";
 
 export interface SelectProps {
@@ -7,5 +7,5 @@
     id: string;
     options?: string[];
-    setUser: React.Dispatch<React.SetStateAction<User>>;
-    user: User;
+    setUser: React.Dispatch<React.SetStateAction<UserRegister>>;
+    user: UserRegister;
 }
Index: frontend/src/types/SliderProps.tsx
===================================================================
--- frontend/src/types/SliderProps.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/types/SliderProps.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,4 +1,4 @@
 import React from "react";
-import type {User} from "./User.tsx";
+import type {UserRegister} from "./UserRegister.tsx";
 
 type UserArrayFields = 'interests' | 'skills' | 'skillsGap';
@@ -8,5 +8,5 @@
     id: string;
     options?: string[];
-    setUser: React.Dispatch<React.SetStateAction<User>>;
-    user: User;
+    setUser: React.Dispatch<React.SetStateAction<UserRegister>>;
+    user: UserRegister;
 }
Index: frontend/src/types/User.tsx
===================================================================
--- frontend/src/types/User.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/src/types/User.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -1,11 +1,12 @@
 export interface User {
+    id: number,
     email: string;
-    password: string;
-    passwordConfirmation: string;
     name: string;
+    companyType: string;
     workPosition: string;
-    companyType: string;
     interests: string[];
     skills: string[];
     skillsGap: string[];
+    points: number;
+    favoriteCourses: string[];
 }
Index: frontend/src/types/UserRegister.tsx
===================================================================
--- frontend/src/types/UserRegister.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/types/UserRegister.tsx	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,11 @@
+export interface UserRegister {
+    email: string;
+    password: string;
+    passwordConfirmation: string;
+    name: string;
+    workPosition: string;
+    companyType: string;
+    interests: string[];
+    skills: string[];
+    skillsGap: string[];
+}
Index: frontend/src/utils/hexToRGB.ts
===================================================================
--- frontend/src/utils/hexToRGB.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/utils/hexToRGB.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,11 @@
+export function hexToRgb(hex: string) {
+    // Remove hash if present
+    hex = hex.replace(/^#/, "");
+    // Parse r,g,b
+    const bigint = parseInt(hex, 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return `${r}, ${g}, ${b}`;
+}
+
Index: frontend/src/utils/mapper.ts
===================================================================
--- frontend/src/utils/mapper.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/utils/mapper.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,60 @@
+
+export function priceToQueryMapper(option: string): string {
+    switch (option) {
+        case "Free":
+            return "free";
+        case "< $20":
+            return "low";
+        case "$20 - $50":
+            return "medium";
+        case "$50+":
+            return "high";
+        default:
+            return "";
+    }
+}
+
+export function queryToPriceMapper(option: string): string {
+    switch (option) {
+        case "free":
+            return "Free";
+        case "low":
+            return "< $20";
+        case "medium":
+            return "$20 - $50";
+        case "high":
+            return "$50+";
+        default:
+            return "";
+    }
+}
+
+export function durationToQueryMapper(option: string): string {
+    switch (option) {
+        case "< 3 hours":
+            return "extraShort";
+        case "3-6 hours":
+            return "short";
+        case "6-10 hours":
+            return "medium";
+        case "10+ hours":
+            return "long";
+        default:
+            return "";
+    }
+}
+
+export function queryToDurationMapper(option: string): string {
+    switch (option) {
+        case "extraShort":
+            return "< 3 hours";
+        case "short":
+            return "3-6 hours";
+        case "medium":
+            return "6-10 hours";
+        case "long":
+            return "10+ hours";
+        default:
+            return "";
+    }
+}
Index: frontend/src/utils/toEnumFormat.ts
===================================================================
--- frontend/src/utils/toEnumFormat.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/utils/toEnumFormat.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,4 @@
+
+export function toEnumFormat(str: string): string {
+    return str.trim().replace(/\s+/g, '_').toUpperCase();
+}
Index: ontend/src/utils/toEnumFormat.tsx
===================================================================
--- frontend/src/utils/toEnumFormat.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ 	(revision )
@@ -1,4 +1,0 @@
-
-export function toEnumFormat(str: string): string {
-    return str.trim().replace(/\s+/g, '_').toUpperCase();
-}
Index: frontend/src/utils/validation.ts
===================================================================
--- frontend/src/utils/validation.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ frontend/src/utils/validation.ts	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,15 @@
+export function hasDigit(str: string) {
+    return /\d/.test(str);
+}
+
+export function hasUppercase(str: string) {
+    return /[A-Z]/.test(str);
+}
+
+export function hasSpecialChar(str: string) {
+    return /[!@#$%^&*(),.?":{}|<>]/.test(str);
+}
+
+export function isValidEmail(email: string) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
Index: ontend/src/utils/validation.tsx
===================================================================
--- frontend/src/utils/validation.tsx	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ 	(revision )
@@ -1,15 +1,0 @@
-export function hasDigit(str: string) {
-    return /\d/.test(str);
-}
-
-export function hasUppercase(str: string) {
-    return /[A-Z]/.test(str);
-}
-
-export function hasSpecialChar(str: string) {
-    return /[!@#$%^&*(),.?":{}|<>]/.test(str);
-}
-
-export function isValidEmail(email: string) {
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-}
Index: frontend/tailwind.config.js
===================================================================
--- frontend/tailwind.config.js	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/tailwind.config.js	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -9,8 +9,9 @@
         extend: {
             fontFamily: {
+                sans: ['"Source Sans 3"', 'sans-serif'],
                 montserrat: ['Montserrat', 'sans-serif'],
             },
         },
     },
-    plugins: [],
+    plugins: []
 }
Index: frontend/tsconfig.app.json
===================================================================
--- frontend/tsconfig.app.json	(revision 1c1f32c44018e7dc8338fb2c8fc396baf0604223)
+++ frontend/tsconfig.app.json	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -22,5 +22,6 @@
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src"]
Index: q
===================================================================
--- q	(revision ac698c06f48d7402e976360fc460366f860e58eb)
+++ q	(revision ac698c06f48d7402e976360fc460366f860e58eb)
@@ -0,0 +1,65 @@
+[33mcommit 3487c01a2bdc2a11349375008d19da3c5b0c6d78[m[33m ([m[1;36mHEAD[m[33m -> [m[1;32mmain[m[33m)[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Wed Jun 25 14:29:56 2025 +0200
+
+    Added authentication. Changed the User class to Account.
+
+[33mcommit e13f128f19b817d19e3e9ba68a26b94d45cef00b[m[33m ([m[1;31morigin/main[m[33m, [m[1;31morigin/HEAD[m[33m)[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Tue Jun 24 11:08:50 2025 +0200
+
+    Added Log In and Register Pages
+
+[33mcommit d797dce91fdb18630fa8863ded6bfcbea51b4789[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Wed Jun 18 23:50:47 2025 +0200
+
+    Added almost the whole home page. Still room for design changes.
+
+[33mcommit da69b4329aeeddc8aa8dd26f1b3a7e202c8de03a[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Mon Jun 16 22:36:41 2025 +0200
+
+    Initialized frontend. Added Navbar, Hero section, CollaborationSteps section.
+
+[33mcommit 8a426f988b1fd1d0841e7a45b8db71b44ad54ce9[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Sun Jun 15 16:41:40 2025 +0200
+
+    Added some controllers. They are not finished. I have to setup admin controller, but will do that later in the project.
+
+[33mcommit d061aac450daa79ad7e43ae505b0db48a22e27a4[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Tue Jun 10 18:01:37 2025 +0200
+
+    Added implementations for services. Connected to supabase cloud database
+
+[33mcommit 28a0f1e699697bfdd6b980fc72fa073669c3527e[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Mon Jun 9 22:00:40 2025 +0200
+
+    Added dto's. Also changed the @Data annotation in entities into @Getter and @Setter because i dont need equals and hash code and because it is safer
+
+[33mcommit 70aa2480f28f83be028c176c25c56fe52bd7c80f[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Mon Jun 9 12:12:14 2025 +0200
+
+    Configured model relations
+
+[33mcommit c0d09fa9265acc8e8d81a1199d31c5fe49f38c61[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Sun Jun 8 20:19:13 2025 +0200
+
+    Added models and base project structure
+
+[33mcommit 9fa7fd9bdab23eda90c9a0b70c1aea46eaf8f05d[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Sun Jun 8 19:34:09 2025 +0200
+
+    added frontend directory
+
+[33mcommit 0672351328b09eb632b662e1c87b53be8e8e5b3f[m
+Author: Borjan Gjorgjievski <borjangjorgjievski1@gmail.com>
+Date:   Sun Jun 8 19:26:48 2025 +0200
+
+    Initial commit
