Index: backend/src/main/java/com/shifterwebapp/shifter/TestController.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/TestController.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ backend/src/main/java/com/shifterwebapp/shifter/TestController.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -27,4 +27,12 @@
     }
 
+    @GetMapping("/send-verification-email")
+    public void sendVerificationEmail() {
+        emailService.sendVerificationToken(
+                "borjangjorgjievski1@gmail.com",
+                "https://localhost:5173"
+        );
+    }
+
 
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/AuthController.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -9,4 +9,5 @@
 
 import java.io.IOException;
+import java.util.Map;
 
 @RequiredArgsConstructor
@@ -20,7 +21,25 @@
 
     @PostMapping("/register")
-    public void register(@RequestBody RegisterDto request, HttpServletResponse response) throws IOException {
-        authService.register(request, response);
+    public void register(@RequestBody Map<String, String> body) {
+        String email = body.get("email");
+        String password = body.get("password");
+        authService.register(email, password);
     }
+
+    @PostMapping("/verify")
+    public ResponseEntity<String> verify(@RequestBody Map<String, String> body) {
+        String token = body.get("token");
+        String userEmail = authService.verify(token);
+        return ResponseEntity.ok(userEmail);
+    }
+
+    @PostMapping("/personalize")
+    public void personalize(
+            @RequestBody UserPersonalizationDto userPersonalizationDto,
+            HttpServletResponse response
+    ) throws IOException {
+        authService.personalize(userPersonalizationDto, response);
+    }
+
 
     @PostMapping("/authenticate")
Index: backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/AuthService.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -3,7 +3,13 @@
 import com.fasterxml.jackson.databind.ObjectMapper;
 import com.shifterwebapp.shifter.config.JwtService;
+import com.shifterwebapp.shifter.exception.InvalidVerificationTokenException;
+import com.shifterwebapp.shifter.external.email.EmailService;
 import com.shifterwebapp.shifter.user.User;
 import com.shifterwebapp.shifter.user.UserMapper;
+import com.shifterwebapp.shifter.user.UserRepository;
 import com.shifterwebapp.shifter.user.service.UserService;
+import com.shifterwebapp.shifter.verificationtoken.VerificationToken;
+import com.shifterwebapp.shifter.verificationtoken.VerificationTokenRepository;
+import com.shifterwebapp.shifter.verificationtoken.service.VerificationTokenService;
 import jakarta.servlet.http.Cookie;
 import jakarta.servlet.http.HttpServletRequest;
@@ -18,4 +24,6 @@
 import java.io.IOException;
 import java.time.Duration;
+import java.time.Instant;
+import java.util.UUID;
 
 @Service
@@ -27,4 +35,8 @@
     private final UserMapper userMapper;
     private final AuthenticationManager authenticationManager;
+    private final VerificationTokenService verificationTokenService;
+    private final EmailService emailService;
+    private final VerificationTokenRepository verificationTokenRepository;
+    private final UserRepository userRepository;
 
     private void sendTokens(HttpServletResponse response, User user) throws IOException {
@@ -53,9 +65,35 @@
 
 
-    public void register(RegisterDto request, HttpServletResponse response) throws IOException {
-        User user = userService.createUser(request);
+    public void register(String email, String password) {
+        User user = userService.createInitialUser(email, password);
+
+        UUID token = verificationTokenService.generateNewToken(user);
+
+        // TODO: CHANGE THE URL TO BE SHIFT-ER.COM NOT LOCALHOST
+        String verificationUrl = "http://localhost:5173/welcome?token=" + token;
+        emailService.sendVerificationToken(user.getEmail(), verificationUrl);
+    }
+
+    public String verify(String token) {
+        UUID uuid = UUID.fromString(token);
+        VerificationToken verificationToken = verificationTokenRepository.findById(uuid)
+                .orElseThrow(() -> new InvalidVerificationTokenException("Invalid or expired token"));
+
+        if (verificationToken.getExpiresAt().isBefore(Instant.now()))
+            throw new InvalidVerificationTokenException("Expired token");
+
+        User user = verificationToken.getUser();
+        user.setIsEnabled(true);
+        userRepository.save(user);
+
+        verificationTokenRepository.delete(verificationToken);
+
+        return user.getEmail();
+    }
+
+    public void personalize(UserPersonalizationDto userPersonalizationDto, HttpServletResponse response) throws IOException {
+        User user = userService.createUser(userPersonalizationDto);
         sendTokens(response, user);
     }
-
 
     public void authenticate(LoginDto request, HttpServletResponse response) throws IOException {
@@ -67,5 +105,6 @@
         );
         User user = userService.getUserEntityByEmail(request.getEmail());
-        sendTokens(response, user);
+        if (user.getIsEnabled())
+            sendTokens(response, user);
     }
 
Index: ckend/src/main/java/com/shifterwebapp/shifter/auth/RegisterDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/RegisterDto.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ 	(revision )
@@ -1,30 +1,0 @@
-package com.shifterwebapp.shifter.auth;
-
-import com.shifterwebapp.shifter.enums.CompanySize;
-import jakarta.validation.constraints.Email;
-import jakarta.validation.constraints.NotBlank;
-import lombok.Data;
-
-import java.util.List;
-
-@Data
-public class RegisterDto {
-
-    @Email
-    @NotBlank
-    private String email;
-
-    @NotBlank
-    private String password;
-
-    @NotBlank
-    private String name;
-
-    private CompanySize companySize;
-
-    private String workPosition;
-
-    private List<String> interests;
-
-    private List<String> desiredSkills;
-}
Index: backend/src/main/java/com/shifterwebapp/shifter/auth/UserPersonalizationDto.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/auth/UserPersonalizationDto.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ backend/src/main/java/com/shifterwebapp/shifter/auth/UserPersonalizationDto.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,24 @@
+package com.shifterwebapp.shifter.auth;
+
+import com.shifterwebapp.shifter.enums.CompanySize;
+import jakarta.validation.constraints.NotBlank;
+import lombok.Data;
+
+import java.util.List;
+
+@Data
+public class UserPersonalizationDto {
+
+    @NotBlank
+    private String name;
+
+    private String email;
+
+    private CompanySize companySize;
+
+    private String workPosition;
+
+    private List<String> interests;
+
+    private List<String> desiredSkills;
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/exception/GlobalExceptionHandler.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/exception/GlobalExceptionHandler.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ backend/src/main/java/com/shifterwebapp/shifter/exception/GlobalExceptionHandler.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -62,4 +62,9 @@
     }
 
+    @ExceptionHandler(InvalidVerificationTokenException.class)
+    public ResponseEntity<ErrorResponse> handleInvalidVerificationTokenException(InvalidVerificationTokenException ex) {
+        return ResponseEntity.status(HttpStatus.NOT_FOUND).body(new ErrorResponse(ex.getMessage()));
+    }
+
     @ExceptionHandler(MultipartException.class)
     public ResponseEntity<?> handleMultipartException(MultipartException ex) {
Index: backend/src/main/java/com/shifterwebapp/shifter/exception/InvalidVerificationTokenException.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/exception/InvalidVerificationTokenException.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ backend/src/main/java/com/shifterwebapp/shifter/exception/InvalidVerificationTokenException.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,7 @@
+package com.shifterwebapp.shifter.exception;
+
+public class InvalidVerificationTokenException extends RuntimeException {
+    public InvalidVerificationTokenException(String message) {
+        super(message);
+    }
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/external/email/EmailService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/external/email/EmailService.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ backend/src/main/java/com/shifterwebapp/shifter/external/email/EmailService.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -298,3 +298,49 @@
         }
     }
+
+    public void sendVerificationToken(String to, String verificationUrl) {
+
+        MimeMessage mimeMessage = mailSender.createMimeMessage();
+
+        try {
+            MimeMessageHelper helper = new MimeMessageHelper(mimeMessage, true, "UTF-8");
+
+            helper.setTo(to);
+            helper.setSubject("Your Shifter Account");
+            helper.setFrom(expertEmail);
+            helper.setReplyTo("support@shift-er.com");
+
+            String htmlTemplate;
+            try {
+                ClassPathResource resource = new ClassPathResource("email-templates/verify_account.html");
+                htmlTemplate = FileCopyUtils.copyToString(new InputStreamReader(resource.getInputStream(), StandardCharsets.UTF_8));
+            } catch (IOException e) {
+                // Throw a runtime exception if the template file can't be loaded
+                throw new UncheckedIOException("Failed to load email template: verify_account.html", e);
+            }
+
+            String htmlContent = htmlTemplate
+                    .replace("${verificationUrl}", verificationUrl)
+                    .replace("${currentYear}", String.valueOf(Year.now().getValue()));
+
+            helper.setText(htmlContent, true);
+
+            int maxRetries = 3;
+            int attempt = 0;
+            while (true) {
+                try {
+                    mailSender.send(mimeMessage);
+                    return;
+                } catch (Exception e) {
+                    attempt++;
+                    if (attempt >= maxRetries) {
+                        throw new RuntimeException("Failed to send HTML email to " + to + " after " + attempt + " attempts", e);
+                    }
+                }
+            }
+
+        } catch (MessagingException e) {
+            throw new RuntimeException("Error preparing email message for " + to, e);
+        }
+    }
 }
Index: backend/src/main/java/com/shifterwebapp/shifter/user/User.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/User.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/User.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -35,4 +35,6 @@
 
     private Boolean isAdmin;
+
+    private Boolean isEnabled;
 
     private Boolean hasUsedFreeConsultation;
Index: backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/service/ImplUserService.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -1,5 +1,5 @@
 package com.shifterwebapp.shifter.user.service;
 
-import com.shifterwebapp.shifter.auth.RegisterDto;
+import com.shifterwebapp.shifter.auth.UserPersonalizationDto;
 import com.shifterwebapp.shifter.user.UserInfoDto;
 import com.shifterwebapp.shifter.payment.Payment;
@@ -19,5 +19,6 @@
     Boolean existsUserByEmail(String email);
 
-    User createUser(RegisterDto registerDto);
+    User createInitialUser(String email, String password);
+    User createUser(UserPersonalizationDto userPersonalizationDto);
     void deleteUser(Long id);
 
Index: backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ backend/src/main/java/com/shifterwebapp/shifter/user/service/UserService.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -2,5 +2,5 @@
 
 import com.shifterwebapp.shifter.Validate;
-import com.shifterwebapp.shifter.auth.RegisterDto;
+import com.shifterwebapp.shifter.auth.UserPersonalizationDto;
 import com.shifterwebapp.shifter.user.UserInfoDto;
 import com.shifterwebapp.shifter.payment.Payment;
@@ -10,4 +10,5 @@
 import org.springframework.stereotype.Service;
 
+import java.util.ArrayList;
 import java.util.List;
 
@@ -65,23 +66,33 @@
 
     @Override
-    public User createUser(RegisterDto registerDto) {
-        if (userRepository.existsUserByEmail(registerDto.getEmail())) {
+    public User createInitialUser(String email, String password) {
+        if (userRepository.existsUserByEmail(email)) {
             throw new RuntimeException("Email already in use");
         }
 
         User user = User.builder()
-                .name(registerDto.getName())
-                .email(registerDto.getEmail())
-                .passwordHash(passwordEncoder.encode(registerDto.getPassword()))
+                .email(email)
+                .passwordHash(passwordEncoder.encode(password))
                 .isAdmin(false)
                 .hasUsedFreeConsultation(false)
-                .companySize(registerDto.getCompanySize())
-                .workPosition(registerDto.getWorkPosition())
-                .interests(registerDto.getInterests())
-                .skills(List.of())
-                .desiredSkills(registerDto.getDesiredSkills())
                 .points(0)
-                .favoriteCourses(List.of())
                 .build();
+
+        return userRepository.save(user);
+    }
+
+    @Override
+    public User createUser(UserPersonalizationDto userPersonalizationDto) {
+        System.out.println(userPersonalizationDto.toString());
+        System.out.println(userPersonalizationDto.getEmail());
+        User user = userRepository.findByEmail(userPersonalizationDto.getEmail()).orElseThrow();
+
+        user.setName(userPersonalizationDto.getName());
+        user.setCompanySize(userPersonalizationDto.getCompanySize());
+        user.setWorkPosition(userPersonalizationDto.getWorkPosition());
+        user.setInterests(new ArrayList<>(userPersonalizationDto.getInterests()));
+        user.setDesiredSkills(new ArrayList<>(userPersonalizationDto.getDesiredSkills()));
+        user.setSkills(new ArrayList<>());
+        user.setFavoriteCourses(new ArrayList<>());
 
         return userRepository.save(user);
Index: backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/VerificationToken.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/VerificationToken.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/VerificationToken.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,30 @@
+package com.shifterwebapp.shifter.verificationtoken;
+
+import com.shifterwebapp.shifter.user.User;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.time.Instant;
+import java.util.UUID;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Data
+@Entity
+@Builder
+public class VerificationToken {
+
+    @Id
+    private UUID token;
+
+    @OneToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id")
+    private User user;
+
+    private Instant createdAt = Instant.now();
+
+    private Instant expiresAt;
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/VerificationTokenRepository.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/VerificationTokenRepository.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/VerificationTokenRepository.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,9 @@
+package com.shifterwebapp.shifter.verificationtoken;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.UUID;
+
+public interface VerificationTokenRepository extends JpaRepository<VerificationToken, UUID> {
+
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/service/ImplVerificationTokenService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/service/ImplVerificationTokenService.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/service/ImplVerificationTokenService.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,9 @@
+package com.shifterwebapp.shifter.verificationtoken.service;
+
+import com.shifterwebapp.shifter.user.User;
+
+import java.util.UUID;
+
+public interface ImplVerificationTokenService {
+    public UUID generateNewToken(User user);
+}
Index: backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/service/VerificationTokenService.java
===================================================================
--- backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/service/VerificationTokenService.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ backend/src/main/java/com/shifterwebapp/shifter/verificationtoken/service/VerificationTokenService.java	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,34 @@
+package com.shifterwebapp.shifter.verificationtoken.service;
+
+import com.shifterwebapp.shifter.Validate;
+import com.shifterwebapp.shifter.user.User;
+import com.shifterwebapp.shifter.verificationtoken.VerificationToken;
+import com.shifterwebapp.shifter.verificationtoken.VerificationTokenRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+
+import java.time.Duration;
+import java.time.Instant;
+import java.util.UUID;
+
+@Service
+@RequiredArgsConstructor
+public class VerificationTokenService implements ImplVerificationTokenService {
+
+    private final VerificationTokenRepository verificationTokenRepository;
+    private final Validate validate;
+
+    private final long tokenExpiryMinutes = 60;
+
+    @Override
+    public UUID generateNewToken(User user) {
+        UUID token = UUID.randomUUID();
+        VerificationToken newVerificationToken = VerificationToken.builder()
+                .user(user)
+                .token(token)
+                .expiresAt(Instant.now().plus(Duration.ofMinutes(tokenExpiryMinutes)))
+                .build();
+        verificationTokenRepository.save(newVerificationToken);
+        return token;
+    }
+}
Index: backend/src/main/resources/email-templates/verify_account.html
===================================================================
--- backend/src/main/resources/email-templates/verify_account.html	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ backend/src/main/resources/email-templates/verify_account.html	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Verify Your Shifter Account</title>
+  <style>
+    body, p, h1, h2, h3, h4, h5, h6 {
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 16px;
+      line-height: 1.6;
+      color: #333333;
+      background-color: #F8F6F5;
+    }
+
+    table {
+      border-collapse: collapse;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    .button {
+      display: inline-block;
+      padding: 12px 28px;
+      border-radius: 4px;
+      background-color: #008CC2;
+      color: #ffffff !important;
+      font-weight: bold;
+      text-decoration: none;
+      font-size: 16px;
+    }
+  </style>
+</head>
+<body>
+<table width="100%" bgcolor="#F8F6F5" border="0" cellpadding="0" cellspacing="0" role="presentation">
+  <tr>
+    <td align="center">
+      <table width="600" style="max-width: 600px;" border="0" cellpadding="0" cellspacing="0" role="presentation">
+        <tr>
+          <td height="30">&nbsp;</td>
+        </tr>
+
+        <!--TOP LINKS-->
+        <tr>
+          <td align="left" style="padding: 0 20px;">
+            <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+              <tr>
+                <td align="left" style="padding-bottom: 10px;">
+                  <a href="https://www.shift-er.com" target="_blank">
+                    <img src="https://shift-er.s3.eu-north-1.amazonaws.com/public/Shifter-Logo-Black.png"
+                         alt="Shifter Logo" width="120"
+                         style="display: block; border: 0;">
+                  </a>
+                </td>
+                <td align="right" style="font-size: 14px; color: #666666;">
+                  <a href="https://www.shift-er.com/courses" target="_blank"
+                     style="color: #666666; text-decoration: none;">Browse Courses</a>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+
+        <tr>
+          <td height="20">&nbsp;</td>
+        </tr>
+
+        <!--MAIN CONTENT-->
+        <tr>
+          <td align="center" bgcolor="#FFFFFF"
+              style="border-radius: 8px; padding: 40px 40px 30px 40px; box-shadow: 0 4px 8px rgba(0,0,0,0.05);">
+            <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+              <tr>
+                <td align="left">
+                  <h1 style="font-size: 28px; line-height: 1.3; color: #222222; margin-bottom: 15px;">
+                    Verify Your Email Address
+                  </h1>
+                  <p style="font-size: 16px; color: #555555; margin-bottom: 20px;">
+                    Hi,
+                  </p>
+                  <p style="font-size: 16px; color: #555555; margin-bottom: 20px;">
+                    Thank you for signing up with <strong>Shifter</strong> — your digital hub for
+                    business growth and professional development.
+                    To complete your registration, please verify your email address by clicking the button below.
+                  </p>
+
+                  <p style="text-align: center; margin: 30px 0;">
+                    <a href="${verificationUrl}" target="_blank" class="button">
+                      Verify My Email
+                    </a>
+                  </p>
+
+                  <p style="font-size: 14px; color: #777777; margin-bottom: 25px;">
+                    This link will expire in 60 minutes. If the button above doesn't work, copy and paste the link below into your browser:
+                  </p>
+
+                  <p style="word-break: break-all; font-size: 14px; color: #008CC2;">
+                    <a href="${verificationUrl}" target="_blank" style="color: #008CC2;">${verificationUrl}</a>
+                  </p>
+
+                  <p style="font-size: 14px; color: #777777; margin-top: 25px;">
+                    If you didn’t create an account, please ignore this email.
+                  </p>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+
+        <tr>
+          <td height="30">&nbsp;</td>
+        </tr>
+
+        <!--FOOTER-->
+        <tr>
+          <td align="center" style="font-size: 12px; color: #666666; padding: 0 20px;">
+            <p>&copy; ${currentYear} Shifter. All rights reserved.</p>
+            <p style="margin-top: 10px;">Need Help? Contact our support at
+              <a href="mailto:support@shift-er.com" style="color: #666666;">support@shift-er.com</a></p>
+          </td>
+        </tr>
+        <tr>
+          <td height="30">&nbsp;</td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/App.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -25,4 +25,5 @@
 import Consulting from "./pages/Consulting.tsx";
 import Academies from "./pages/Academies.tsx";
+import Personalize from "./pages/Personalize.tsx";
 
 function LayoutWrapper() {
@@ -31,4 +32,5 @@
         location.pathname === "/login" ||
         location.pathname === "/register" ||
+        location.pathname === "/welcome" ||
         location.pathname.startsWith("/learn/");
     const hideFooter =
@@ -68,4 +70,9 @@
                     <PublicOnlyRoute>
                         <Register/>
+                    </PublicOnlyRoute>
+                }/>
+                <Route path="/welcome" element={
+                    <PublicOnlyRoute>
+                        <Personalize/>
                     </PublicOnlyRoute>
                 }/>
Index: frontend/src/api/authApi.ts
===================================================================
--- frontend/src/api/authApi.ts	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/api/authApi.ts	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -1,4 +1,4 @@
 import axios from "axios";
-import type {UserRegister} from "../models/javaObjects/UserRegister.tsx";
+import type {UserPersonalization} from "../models/javaObjects/UserPersonalization.tsx";
 import type {User} from "../models/javaObjects/User.tsx";
 
@@ -16,6 +16,22 @@
 }
 
-export const registerApi = async (user: UserRegister): Promise<{user: User, accessToken: string}> => {
-    const res = await axios.post(`${backendUrl}/api/auth/register`,
+export const registerApi = async (email: string, password: string): Promise<void> => {
+    await axios.post(`${backendUrl}/api/auth/register`,
+        {email, password},
+        { withCredentials: true }
+    );
+}
+
+export const verifyApi = async (token: string): Promise<string> => {
+    const res = await axios.post(`${backendUrl}/api/auth/verify`,
+        {token},
+        { withCredentials: true }
+    );
+
+    return res.data;
+}
+
+export const personalizeApi = async (user: UserPersonalization): Promise<{user: User, accessToken: string}> => {
+    const res = await axios.post(`${backendUrl}/api/auth/personalize`,
         user,
         { withCredentials: true }
Index: frontend/src/components/inputs/PersonalizationInput.tsx
===================================================================
--- frontend/src/components/inputs/PersonalizationInput.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/components/inputs/PersonalizationInput.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,66 @@
+import {Eye, EyeOff} from "lucide-react";
+import React from "react";
+import type { UserPersonalization } from "../../models/javaObjects/UserPersonalization.tsx";
+
+type UserStrFields = 'email' | 'password' | 'passwordConfirmation' | 'name' | 'workPosition' | 'companyType';
+interface InputProps {
+    placeholder: string;
+    label: string;
+    name: UserStrFields;
+    type: string;
+    id: string;
+    showPassword?: boolean;
+    setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
+    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>;
+    user: UserPersonalization;
+}
+
+function PersonalizationInput(inputProps: InputProps) {
+
+    return (
+        <div
+            className="w-full relative flex flex-col items- gap-1 px-6 py-1 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm">
+            <label
+                htmlFor={inputProps.id}
+                className="text-shifter font-medium"
+            >
+                {inputProps.label}
+            </label>
+            <div className="flex gap-2 w-full">
+                <div className="w-full">
+                    <input
+                        id={inputProps.id}
+                        type={!inputProps.name.includes("password") ? "text" : inputProps.showPassword ? "text" : "password"}
+                        name={inputProps.name}
+                        placeholder={inputProps.placeholder}
+                        className="w-full focus:outline-none text-lg"
+                        value={inputProps.user[inputProps.name] || ""}
+                        onChange={e =>
+                            inputProps.setUser((prev: UserPersonalization) => ({
+                                ...prev,
+                                [inputProps.name]: e.target.value
+                            }))
+                        }
+                    />
+                    <hr className="border-t-2 border-black/5 rounded-full w-full"/>
+                </div>
+                {inputProps.name.includes("password") && (
+                    <button
+                        type="button"
+                        onClick={() => inputProps.setShowPassword?.((prev: boolean) => !prev)}
+                        className="text-black cursor-pointer hover:bg-black/5 rounded-full p-1"
+                        aria-label={inputProps.showPassword ? "Hide password" : "Show password"}
+                    >
+                        {!inputProps.showPassword ? (
+                            <EyeOff size={20} opacity={0.6}/>
+                        ) : (
+                            <Eye size={20} opacity={0.6}/>
+                        )}
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default PersonalizationInput;
Index: frontend/src/components/inputs/PersonalizationSelect.tsx
===================================================================
--- frontend/src/components/inputs/PersonalizationSelect.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/components/inputs/PersonalizationSelect.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,46 @@
+import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
+import type {SelectProps} from "../../models/SelectProps.tsx";
+import {toEnumFormat} from "../../utils/toEnumFormat.ts";
+
+function PersonalizationSelect(selectProps: SelectProps) {
+
+    return (
+        <div
+            className="w-full relative flex flex-col gap-1 px-6 py-1 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm">
+            <label
+                htmlFor={selectProps.id}
+                className="text-shifter font-medium"
+            >
+                {selectProps.label}
+            </label>
+            <div className="w-full">
+                <select
+                    id={selectProps.id}
+                    name={selectProps.name}
+                    className="w-full focus:outline-none text-lg cursor-pointer"
+                    value={selectProps.user[selectProps.name] || ""}
+                    onChange={e =>
+                        selectProps.setUser((prev: UserPersonalization) => ({
+                            ...prev,
+                            [selectProps.name]: e.target.value
+                        }))
+                    }
+                >
+                    <option value="" className="text-black/10">
+                        Select an option
+                    </option>
+                    {
+                        selectProps.options?.map((option, index) => (
+                            <option key={index} value={toEnumFormat(option)}>
+                                {option}
+                            </option>
+                        ))
+                    }
+                </select>
+                <hr className="border-t-2 border-black/5 rounded-full w-full"/>
+            </div>
+        </div>
+    );
+}
+
+export default PersonalizationSelect;
Index: frontend/src/components/inputs/PersonalizationSlider.tsx
===================================================================
--- frontend/src/components/inputs/PersonalizationSlider.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/components/inputs/PersonalizationSlider.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,78 @@
+import React from "react";
+import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
+import type {SliderProps} from "../../models/SliderProps.tsx";
+
+function PersonalizationSlider(sliderProps: SliderProps) {
+    const [allOptions] = React.useState<string[]>(sliderProps.options || []);
+    const [options, setOptions] = React.useState<string[]>(allOptions);
+    const [filterText, setFilterText] = React.useState("");
+
+    const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setFilterText(value);
+        setOptions(allOptions.filter(option =>
+            option.toLowerCase().includes(value.toLowerCase())
+        ));
+    };
+
+    const handleOptionClick = (option: string) => {
+        sliderProps.setUser((prev: UserPersonalization) => {
+            const arr = prev[sliderProps.name] as string[] || [];
+            const newArr = arr.includes(option)
+                ? arr.filter(item => item !== option)
+                : [...arr, option];
+
+            return {
+                ...prev,
+                [sliderProps.name]: newArr,
+            };
+        });
+    };
+
+    return (
+        <div className="w-full flex flex-col justify-center gap-4 px-6 py-1 items-start w-full">
+            <div className="flex justify-between w-full flex-wrap gap-2">
+                <label htmlFor={sliderProps.id} className="text-shifter font-medium text-xl">
+                    {sliderProps.label}
+                </label>
+                <input
+                    type={"search"}
+                    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>
+
+            <div className="relative custom-scrollbar flex gap-2 flex-wrap w-full max-h-[30vh] items-center overflow-y-auto">
+                {options.map((option, index) => {
+                    const isSelected = sliderProps.user[sliderProps.name]?.includes(option) || false;
+
+                    return (
+                        <button
+                            key={index}
+                            name={sliderProps.name}
+                            id={`${sliderProps.id}-${index}`}
+                            className={`${isSelected ? "bg-shifter text-white shadow-black/20" : "bg-black/10 text-black shadow-shifter/20"} 
+                            px-4 py-1 rounded-md transition-all duration-200 ease-in-out hover:shadow-md
+                            focus:outline-none cursor-pointer whitespace-nowrap`}
+                            onClick={() => handleOptionClick(option)}
+                        >
+                            {
+                                option
+                                    .toLowerCase()
+                                    .replace(/_/g, " ")
+                                    .replace(/\b\w/g, (c) => c.toUpperCase())
+                            }
+                        </button>
+                    );
+                })}
+
+                <div
+                    className="pointer-events-none sticky bottom-0 left-0 w-full h-4 bg-gradient-to-t from-white to-transparent"></div>
+            </div>
+        </div>
+    );
+}
+
+export default PersonalizationSlider;
Index: frontend/src/components/inputs/RegisterInput.tsx
===================================================================
--- frontend/src/components/inputs/RegisterInput.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/components/inputs/RegisterInput.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -1,5 +1,6 @@
+
 import {Eye, EyeOff} from "lucide-react";
 import React from "react";
-import type { UserRegister } from "../../models/javaObjects/UserRegister.tsx";
+import type { UserPersonalization } from "../../models/javaObjects/UserPersonalization.tsx";
 
 type UserStrFields = 'email' | 'password' | 'passwordConfirmation' | 'name' | 'workPosition' | 'companyType';
@@ -12,9 +13,9 @@
     showPassword?: boolean;
     setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
-    setUser: React.Dispatch<React.SetStateAction<UserRegister>>;
-    user: UserRegister;
+    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>;
+    user: UserPersonalization;
 }
 
-function RegisterInput(inputProps: InputProps) {
+function PersonalizationInput(inputProps: InputProps) {
 
     return (
@@ -37,5 +38,5 @@
                         value={inputProps.user[inputProps.name] || ""}
                         onChange={e =>
-                            inputProps.setUser((prev: UserRegister) => ({
+                            inputProps.setUser((prev: UserPersonalization) => ({
                                 ...prev,
                                 [inputProps.name]: e.target.value
@@ -64,3 +65,3 @@
 }
 
-export default RegisterInput;
+export default PersonalizationInput;
Index: ontend/src/components/inputs/RegisterSelect.tsx
===================================================================
--- frontend/src/components/inputs/RegisterSelect.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ 	(revision )
@@ -1,46 +1,0 @@
-import type {UserRegister} from "../../models/javaObjects/UserRegister.tsx";
-import type {SelectProps} from "../../models/SelectProps.tsx";
-import {toEnumFormat} from "../../utils/toEnumFormat.ts";
-
-function RegisterSelect(selectProps: SelectProps) {
-
-    return (
-        <div
-            className="w-8/10 relative flex flex-col gap-1 px-6 py-1 border-2 border-shifter group focus-within:border-l-20 transition-all ease-in-out duration-300 items-start rounded-sm">
-            <label
-                htmlFor={selectProps.id}
-                className="text-shifter font-medium"
-            >
-                {selectProps.label}
-            </label>
-            <div className="w-full">
-                <select
-                    id={selectProps.id}
-                    name={selectProps.name}
-                    className="w-full focus:outline-none text-lg cursor-pointer"
-                    value={selectProps.user[selectProps.name] || ""}
-                    onChange={e =>
-                        selectProps.setUser((prev: UserRegister) => ({
-                            ...prev,
-                            [selectProps.name]: e.target.value
-                        }))
-                    }
-                >
-                    <option value="" className="text-black/10">
-                        Select an option
-                    </option>
-                    {
-                        selectProps.options?.map((option, index) => (
-                            <option key={index} value={toEnumFormat(option)}>
-                                {option}
-                            </option>
-                        ))
-                    }
-                </select>
-                <hr className="border-t-2 border-black/5 rounded-full w-full"/>
-            </div>
-        </div>
-    );
-}
-
-export default RegisterSelect;
Index: ontend/src/components/inputs/RegisterSlider.tsx
===================================================================
--- frontend/src/components/inputs/RegisterSlider.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ 	(revision )
@@ -1,78 +1,0 @@
-import React from "react";
-import type {UserRegister} from "../../models/javaObjects/UserRegister.tsx";
-import type {SliderProps} from "../../models/SliderProps.tsx";
-
-function RegisterSlider(sliderProps: SliderProps) {
-    const [allOptions] = React.useState<string[]>(sliderProps.options || []);
-    const [options, setOptions] = React.useState<string[]>(allOptions);
-    const [filterText, setFilterText] = React.useState("");
-
-    const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value;
-        setFilterText(value);
-        setOptions(allOptions.filter(option =>
-            option.toLowerCase().includes(value.toLowerCase())
-        ));
-    };
-
-    const handleOptionClick = (option: string) => {
-        sliderProps.setUser((prev: UserRegister) => {
-            const arr = prev[sliderProps.name] as string[] || [];
-            const newArr = arr.includes(option)
-                ? arr.filter(item => item !== option)
-                : [...arr, option];
-
-            return {
-                ...prev,
-                [sliderProps.name]: newArr,
-            };
-        });
-    };
-
-    return (
-        <div className="flex flex-col justify-center gap-4 px-6 py-1 items-start w-full">
-            <div className="flex justify-between w-full flex-wrap gap-2">
-                <label htmlFor={sliderProps.id} className="text-shifter font-medium text-xl">
-                    {sliderProps.label}
-                </label>
-                <input
-                    type={"search"}
-                    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>
-
-            <div className="relative custom-scrollbar flex gap-2 flex-wrap w-full max-h-[30vh] items-center overflow-y-auto">
-                {options.map((option, index) => {
-                    const isSelected = sliderProps.user[sliderProps.name]?.includes(option) || false;
-
-                    return (
-                        <button
-                            key={index}
-                            name={sliderProps.name}
-                            id={`${sliderProps.id}-${index}`}
-                            className={`${isSelected ? "bg-shifter text-white shadow-black/20" : "bg-black/10 text-black shadow-shifter/20"} 
-                            px-4 py-1 rounded-md transition-all duration-200 ease-in-out hover:shadow-md
-                            focus:outline-none cursor-pointer whitespace-nowrap`}
-                            onClick={() => handleOptionClick(option)}
-                        >
-                            {
-                                option
-                                    .toLowerCase()
-                                    .replace(/_/g, " ")
-                                    .replace(/\b\w/g, (c) => c.toUpperCase())
-                            }
-                        </button>
-                    );
-                })}
-
-                <div
-                    className="pointer-events-none sticky bottom-0 left-0 w-full h-4 bg-gradient-to-t from-white to-transparent"></div>
-            </div>
-        </div>
-    );
-}
-
-export default RegisterSlider;
Index: frontend/src/components/registerSteps/PersonalizationStepThree.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizationStepThree.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/components/registerSteps/PersonalizationStepThree.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,52 @@
+import React, {useEffect} from "react";
+import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
+import PersonalizationSlider from "../inputs/PersonalizationSlider.tsx";
+import {fetchCoursesSkillsApi} from "../../api/courseApi.ts";
+
+function PersonalizationStepThree({setUser, user, setError}: {
+    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>,
+    user: UserPersonalization,
+    setError: React.Dispatch<React.SetStateAction<string>>,
+}){
+    const [skills, setSkills] = React.useState<string[]>([]);
+
+    useEffect(() => {
+        const fetchSkills = async () => {
+            try {
+                const skillsData = await fetchCoursesSkillsApi();
+                setSkills(skillsData);
+            } catch (err) {
+                console.error("Failed to fetch skills", err);
+            }
+        };
+
+        fetchSkills();
+    }, []);
+
+    useEffect(() => {
+        if (user.desiredSkills.length === 0) {
+            setError("We’d love to support your growth — select at least one skill you'd like to improve");
+        } else {
+            setError("");
+        }
+    }, [user.desiredSkills]);
+
+    return (
+        <section
+            className="flex flex-col gap-4 w-full">
+            {
+                skills.length > 0 &&
+                <PersonalizationSlider
+                    label={"Outline Your Learning Goals"}
+                    name={"desiredSkills"}
+                    id={"desired-skills"}
+                    options={skills}
+                    setUser={setUser}
+                    user={user}
+                />
+            }
+        </section>
+    )
+}
+
+export default PersonalizationStepThree;
Index: frontend/src/components/registerSteps/PersonalizationStepTwo.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizationStepTwo.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/components/registerSteps/PersonalizationStepTwo.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,53 @@
+import React, {useEffect} from "react";
+import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
+import PersonalizationSlider from "../inputs/PersonalizationSlider.tsx";
+import {fetchCoursesTopicsApi} from "../../api/courseApi.ts";
+
+function PersonalizationStepTwo({setUser, user, setError}: {
+    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>,
+    user: UserPersonalization,
+    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 javaObjects topics (user interests)", err);
+            }
+        };
+
+        fetchCourseTopics();
+    }, []);
+
+    useEffect(() => {
+        if (user.interests.length === 0) {
+            setError("Help us understand you better — select at least one topic you like");
+        } else {
+            setError("");
+        }
+    }, [user.interests]);
+
+
+    return (
+        <section
+            className="flex flex-col gap-4 w-full items-center">
+            {
+                interests.length > 0 &&
+                <PersonalizationSlider
+                    label={"Select Topics You Like"}
+                    name={"interests"}
+                    id={"interests"}
+                    options={interests}
+                    setUser={setUser}
+                    user={user}
+                />
+            }
+        </section>
+    )
+}
+
+export default PersonalizationStepTwo;
Index: frontend/src/components/registerSteps/PersonalizeStepOne.tsx
===================================================================
--- frontend/src/components/registerSteps/PersonalizeStepOne.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/components/registerSteps/PersonalizeStepOne.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,53 @@
+import React, {useEffect} from "react";
+import type {UserPersonalization} from "../../models/javaObjects/UserPersonalization.tsx";
+import PersonalizationInput from "../inputs/PersonalizationInput.tsx";
+import PersonalizationSelect from "../inputs/PersonalizationSelect.tsx";
+
+function PersonalizeStepOne({setUser, user, setError}: {
+    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>,
+    user: UserPersonalization,
+    setError: React.Dispatch<React.SetStateAction<string>>,
+}) {
+
+    useEffect(() => {
+        if (!user.name || !user.workPosition || !user.companySize) {
+            setError("Please ensure all inputs are completed.");
+        } else {
+            setError("");
+        }
+    }, [user.name, user.workPosition, user.companySize]);
+
+    return (
+        <section
+            className="flex flex-col gap-4 w-full items-center">
+            <PersonalizationInput
+                placeholder={"John Doe"}
+                label={"Full Name"}
+                name={"name"}
+                type={"text"}
+                id={"full-name"}
+                setUser={setUser}
+                user={user}
+            />
+            <PersonalizationInput
+                placeholder={"Your Position"}
+                label={"Work Position"}
+                name={"workPosition"}
+                type={"text"}
+                id={"work-position"}
+                setUser={setUser}
+                user={user}
+            />
+            <PersonalizationSelect
+                label={"Company Size"}
+                name={"companySize"}
+                id={"company-size"}
+                options={["Freelance", "Micro", "Small", "Medium", "Mid Market", "Enterprise", "Other"]}
+                setUser={setUser}
+                user={user}
+            />
+        </section>
+    );
+}
+
+export default PersonalizeStepOne;
Index: ontend/src/components/registerSteps/RegisterStepFour.tsx
===================================================================
--- frontend/src/components/registerSteps/RegisterStepFour.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ 	(revision )
@@ -1,52 +1,0 @@
-import React, {useEffect} from "react";
-import type {UserRegister} from "../../models/javaObjects/UserRegister.tsx";
-import RegisterSlider from "../inputs/RegisterSlider.tsx";
-import {fetchCoursesSkillsApi} from "../../api/courseApi.ts";
-
-function RegisterStepFour({setUser, user, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<UserRegister>>,
-    user: UserRegister,
-    setError: React.Dispatch<React.SetStateAction<string>>,
-}){
-    const [skills, setSkills] = React.useState<string[]>([]);
-
-    useEffect(() => {
-        const fetchSkills = async () => {
-            try {
-                const skillsData = await fetchCoursesSkillsApi();
-                setSkills(skillsData);
-            } catch (err) {
-                console.error("Failed to fetch skills", err);
-            }
-        };
-
-        fetchSkills();
-    }, []);
-
-    useEffect(() => {
-        if (user.desiredSkills.length === 0) {
-            setError("We’d love to support your growth — select at least one skill you'd like to improve");
-        } else {
-            setError("");
-        }
-    }, [user.desiredSkills]);
-
-    return (
-        <section
-            className="flex flex-col gap-4 w-full">
-            {
-                skills.length > 0 &&
-                <RegisterSlider
-                    label={"Outline Your Learning Goals"}
-                    name={"desiredSkills"}
-                    id={"desired-skills"}
-                    options={skills}
-                    setUser={setUser}
-                    user={user}
-                />
-            }
-        </section>
-    )
-}
-
-export default RegisterStepFour;
Index: ontend/src/components/registerSteps/RegisterStepOne.tsx
===================================================================
--- frontend/src/components/registerSteps/RegisterStepOne.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ 	(revision )
@@ -1,70 +1,0 @@
-import React, {useEffect} from "react";
-import type {UserRegister} from "../../models/javaObjects/UserRegister.tsx";
-import RegisterInput from "../inputs/RegisterInput.tsx";
-import {isValidEmail, hasUppercase, hasDigit, hasSpecialChar} from "../../utils/validation.ts";
-
-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);
-
-    useEffect(() => {
-        if (!user.email || !user.password || !user.passwordConfirmation) {
-            setError("Please ensure all inputs are completed.");
-        } else if (user.email && !isValidEmail(user.email)) {
-            setError("Email must be valid");
-        } else if (user.password && user.passwordConfirmation && user.password !== user.passwordConfirmation) {
-            setError("Passwords do not match");
-        } else if (!hasUppercase(user.password)) {
-            setError("Password must contain at least one uppercase letter");
-        } else if (!hasDigit(user.password)) {
-            setError("Password must contain at least one digit");
-        } else if (!hasSpecialChar(user.password)) {
-            setError("Password must contain at least one special character");
-        } else {
-            setError("");
-        }
-
-    }, [user.email, user.password, user.passwordConfirmation])
-
-    return (
-        <section
-            className="flex flex-col gap-4 w-full items-center">
-            <RegisterInput
-                placeholder={"name@email.com"}
-                label={"Email address"}
-                name={"email"}
-                type={"email"}
-                id={"email"}
-                setUser={setUser}
-                user={user}
-            />
-            <RegisterInput
-                placeholder={"********"}
-                label={"Password"}
-                name={"password"}
-                type={"password"}
-                id={"password"}
-                showPassword={showPassword}
-                setShowPassword={setShowPassword}
-                setUser={setUser}
-                user={user}
-            />
-            <RegisterInput
-                placeholder={"********"}
-                label={"Confirm password"}
-                name={"passwordConfirmation"}
-                type={"password"}
-                id={"password-confirmation"}
-                showPassword={showPassword}
-                setShowPassword={setShowPassword}
-                setUser={setUser}
-                user={user}
-            />
-        </section>
-    );
-}
-
-export default RegisterStepOne;
Index: ontend/src/components/registerSteps/RegisterStepThree.tsx
===================================================================
--- frontend/src/components/registerSteps/RegisterStepThree.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ 	(revision )
@@ -1,53 +1,0 @@
-import React, {useEffect} from "react";
-import type {UserRegister} from "../../models/javaObjects/UserRegister.tsx";
-import RegisterSlider from "../inputs/RegisterSlider.tsx";
-import {fetchCoursesTopicsApi} from "../../api/courseApi.ts";
-
-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 javaObjects topics (user interests)", err);
-            }
-        };
-
-        fetchCourseTopics();
-    }, []);
-
-    useEffect(() => {
-        if (user.interests.length === 0) {
-            setError("Help us understand you better — select at least one topic you like");
-        } else {
-            setError("");
-        }
-    }, [user.interests]);
-
-
-    return (
-        <section
-            className="flex flex-col gap-4 w-full items-center">
-            {
-                interests.length > 0 &&
-                <RegisterSlider
-                    label={"Select Topics You Like"}
-                    name={"interests"}
-                    id={"interests"}
-                    options={interests}
-                    setUser={setUser}
-                    user={user}
-                />
-            }
-        </section>
-    )
-}
-
-export default RegisterStepThree;
Index: ontend/src/components/registerSteps/RegisterStepTwo.tsx
===================================================================
--- frontend/src/components/registerSteps/RegisterStepTwo.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ 	(revision )
@@ -1,53 +1,0 @@
-import React, {useEffect} from "react";
-import type {UserRegister} from "../../models/javaObjects/UserRegister.tsx";
-import RegisterInput from "../inputs/RegisterInput.tsx";
-import RegisterSelect from "../inputs/RegisterSelect.tsx";
-
-function RegisterStepTwo({setUser, user, setError}: {
-    setUser: React.Dispatch<React.SetStateAction<UserRegister>>,
-    user: UserRegister,
-    setError: React.Dispatch<React.SetStateAction<string>>,
-}) {
-
-    useEffect(() => {
-        if (!user.name || !user.workPosition || !user.companySize) {
-            setError("Please ensure all inputs are completed.");
-        } else {
-            setError("");
-        }
-    }, [user.name, user.workPosition, user.companySize]);
-
-    return (
-        <section
-            className="flex flex-col gap-4 w-full items-center">
-            <RegisterInput
-                placeholder={"John Doe"}
-                label={"Full Name"}
-                name={"name"}
-                type={"text"}
-                id={"full-name"}
-                setUser={setUser}
-                user={user}
-            />
-            <RegisterInput
-                placeholder={"Your Position"}
-                label={"Work Position"}
-                name={"workPosition"}
-                type={"text"}
-                id={"work-position"}
-                setUser={setUser}
-                user={user}
-            />
-            <RegisterSelect
-                label={"Company Size"}
-                name={"companySize"}
-                id={"company-size"}
-                options={["Freelance", "Micro", "Small", "Medium", "Mid Market", "Enterprise", "Other"]}
-                setUser={setUser}
-                user={user}
-            />
-        </section>
-    );
-}
-
-export default RegisterStepTwo;
Index: frontend/src/context/AuthContext.tsx
===================================================================
--- frontend/src/context/AuthContext.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/context/AuthContext.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -8,7 +8,7 @@
 } from "react";
 import type {User} from "../models/javaObjects/User.tsx";
-import type {UserRegister} from "../models/javaObjects/UserRegister.tsx";
-import {loginApi, logoutApi, refreshAccessTokenApi, registerApi} from "../api/authApi.ts";
+import {loginApi, logoutApi, personalizeApi, refreshAccessTokenApi, registerApi, verifyApi} from "../api/authApi.ts";
 import {useNavigate} from "react-router-dom";
+import type {UserPersonalization} from "../models/javaObjects/UserPersonalization.tsx";
 
 interface AuthContextType {
@@ -19,5 +19,7 @@
     authChecked: boolean;
     setAuthChecked: Dispatch<SetStateAction<boolean>>;
-    register: (user: UserRegister) => Promise<void>;
+    register: (email: string, password: string) => Promise<void>;
+    verify: (verificationToken: string) => Promise<string>;
+    personalize: (user: UserPersonalization) => Promise<void>;
     login: (email: string, password: string) => Promise<void>;
     logout: () => void;
@@ -44,6 +46,29 @@
     }
 
-    const register = async (user: UserRegister) => {
-        return registerApi(user)
+    const register = async (email: string, password: string) => {
+        return registerApi(email, password)
+            .then(() => {
+                console.log("Successfully registered and sent email to user");
+            })
+            .catch(error => {
+                console.log("Registration failed:", error);
+                throw error;
+            });
+    }
+
+    const verify = async (verificationToken: string) => {
+        return verifyApi(verificationToken)
+            .then(userEmail => {
+                console.log("Successfully verified user email");
+                return userEmail;
+            })
+            .catch(error => {
+                console.log("Verification failed:", error);
+                throw error;
+            });
+    }
+
+    const personalize = async (user: UserPersonalization) => {
+        return personalizeApi(user)
             .then(data => {
                 setAccessToken(data.accessToken);
@@ -53,5 +78,5 @@
                 setAccessToken(null);
                 setUser(null);
-                console.log("Registration failed:", error);
+                console.log("Personalization failed:", error);
                 throw error;
             });
@@ -123,4 +148,6 @@
                 useFreeConsultation,
                 register,
+                verify,
+                personalize,
                 login,
                 logout,
Index: frontend/src/hooks/usePersonalizeHook.tsx
===================================================================
--- frontend/src/hooks/usePersonalizeHook.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/hooks/usePersonalizeHook.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,119 @@
+import {useEffect, useState} from "react";
+import {useAuthContext} from "../context/AuthContext.tsx";
+import type {UserPersonalization} from "../models/javaObjects/UserPersonalization.tsx";
+import {useNavigate} from "react-router-dom";
+import PersonalizeStepOne from "../components/registerSteps/PersonalizeStepOne.tsx";
+import PersonalizationStepTwo from "../components/registerSteps/PersonalizationStepTwo.tsx";
+import PersonalizationStepThree from "../components/registerSteps/PersonalizationStepThree.tsx";
+
+export function usePersonalizeHook() {
+    const {verify, personalize} = useAuthContext();
+    const [verificationChecked, setVerificationChecked] = useState<boolean>(false);
+    const [isVerified, setIsVerified] = useState(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [activeStep, setActiveStep] = useState(0);
+    const [showError, setShowError] = useState(false);
+    const [error, setError] = useState("");
+    const [direction, setDirection] = useState(0); // 1 for next, -1 for back
+    const [user, setUser] = useState<UserPersonalization>({
+        name: "",
+        email: "",
+        workPosition: "",
+        companySize: "",
+        interests: [],
+        desiredSkills: [],
+    });
+    const navigate = useNavigate();
+
+    const handleNext = async () => {
+        if (error.length > 0) {
+            setShowError(true);
+            return;
+        }
+
+        setError("");
+        setShowError(false);
+        setDirection(1);
+        setActiveStep((prev) => prev + 1);
+    };
+
+    const handleBack = () => {
+        setDirection(-1);
+        setActiveStep((prev) => prev - 1);
+    };
+
+    const variants = {
+        enter: (dir: number) => ({
+            x: dir > 0 ? 100 : -100,
+            opacity: 0,
+        }),
+        center: {
+            x: 0,
+            opacity: 1,
+        },
+        exit: (dir: number) => ({
+            x: dir > 0 ? -100 : 100,
+            opacity: 0,
+        }),
+    };
+
+    const stepsContent = [
+        <PersonalizeStepOne setUser={setUser} user={user} setError={setError}/>,
+        <PersonalizationStepTwo setUser={setUser} user={user} setError={setError}/>,
+        <PersonalizationStepThree setUser={setUser} user={user} setError={setError}/>
+    ];
+
+
+    const handleVerify = async () => {
+        const params = new URLSearchParams(window.location.search);
+        const verificationToken = params.get("token");
+
+        verify(verificationToken || "")
+            .then((userEmail) => {
+                setUser({
+                    ...user,
+                    email: userEmail,
+                })
+                setIsVerified(true);
+            })
+            .catch(err => {
+                setIsVerified(false);
+                console.error("Error verifying user" + err);
+            })
+            .finally(() => setVerificationChecked(true))
+    }
+
+    const handlePersonalize = async () => {
+        setIsLoading(true);
+        personalize(user)
+            .then(() => {
+                navigate("/");
+            })
+            .catch(err => {
+                setError("Personalization failed. Please try again.");
+                setShowError(true);
+                console.error("Error personalizing account for user: ", err);
+            })
+            .finally(() => setIsLoading(false));
+    }
+
+
+    useEffect(() => {
+        handleVerify()
+    }, [])
+
+    return {
+        verificationChecked,
+        isVerified,
+        isLoading,
+        activeStep,
+        showError,
+        error,
+        direction,
+        variants,
+        stepsContent,
+        handleNext,
+        handleBack,
+        handlePersonalize
+    }
+}
Index: frontend/src/hooks/useRegisterHook.tsx
===================================================================
--- frontend/src/hooks/useRegisterHook.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/hooks/useRegisterHook.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,81 @@
+import React, {useEffect, useState} from "react";
+import {useAuthContext} from "../context/AuthContext.tsx";
+import {hasDigit, hasSpecialChar, hasUppercase, isValidEmail} from "../utils/validation.ts";
+import {checkEmailExistsApi} from "../api/authApi.ts";
+
+export function useRegisterHook() {
+    const {register} = useAuthContext();
+    const [email, setEmail] = React.useState("");
+    const [password, setPassword] = React.useState("");
+    const [passwordConfirmation, setPasswordConfirmation] = React.useState("");
+    const [showError, setShowError] = useState(false);
+    const [error, setError] = React.useState("");
+    const [isSuccess, setIsSuccess] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState<boolean>(false);
+    const [showPassword, setShowPassword] = React.useState(false);
+
+    useEffect(() => {
+        if (!email && !password && !passwordConfirmation)
+            return
+
+        if (!email || !password || !passwordConfirmation) {
+            setError("Please ensure all inputs are completed.");
+        } else if (email && !isValidEmail(email)) {
+            setError("Email must be valid");
+        } else if (password && passwordConfirmation && password !== passwordConfirmation) {
+            setError("Passwords do not match");
+        } else if (!hasUppercase(password)) {
+            setError("Password must contain at least one uppercase letter");
+        } else if (!hasDigit(password)) {
+            setError("Password must contain at least one digit");
+        } else if (!hasSpecialChar(password)) {
+            setError("Password must contain at least one special character");
+        } else {
+            setError("");
+        }
+
+    }, [email, password, passwordConfirmation])
+
+    const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        if (error.length > 0) {
+            setShowError(true);
+            return;
+        }
+
+        setIsLoading(true);
+        try {
+            const exists = await checkEmailExistsApi(email);
+
+            if (exists) {
+                setError("This email is already registered. Please sign in or use a different email.");
+                return;
+            }
+
+            await register(email, password);
+            setIsSuccess(true);
+        } catch (err) {
+            console.error("Error checking email:", err);
+            setError("An unexpected error occurred. Please try again later or contact us contact us directly at support@shift-er.com");
+        } finally {
+            setIsLoading(false);
+        }
+    }
+
+    return {
+        email,
+        setEmail,
+        password,
+        setPassword,
+        passwordConfirmation,
+        setPasswordConfirmation,
+        showPassword,
+        setShowPassword,
+        showError,
+        error,
+        isSuccess,
+        isLoading,
+        handleRegister
+    }
+}
Index: frontend/src/models/SelectProps.tsx
===================================================================
--- frontend/src/models/SelectProps.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/models/SelectProps.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -1,11 +1,11 @@
 import React from "react";
-import type {UserRegister} from "./javaObjects/UserRegister.tsx";
+import type {UserPersonalization} from "./javaObjects/UserPersonalization.tsx";
 
 export interface SelectProps {
     label: string;
-    name: keyof UserRegister;
+    name: keyof UserPersonalization;
     id: string;
     options?: string[];
-    setUser: React.Dispatch<React.SetStateAction<UserRegister>>;
-    user: UserRegister;
+    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>;
+    user: UserPersonalization;
 }
Index: frontend/src/models/SliderProps.tsx
===================================================================
--- frontend/src/models/SliderProps.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/models/SliderProps.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -1,4 +1,4 @@
 import React from "react";
-import type {UserRegister} from "./javaObjects/UserRegister.tsx";
+import type {UserPersonalization} from "./javaObjects/UserPersonalization.tsx";
 
 type UserArrayFields = 'interests' | 'desiredSkills';
@@ -8,5 +8,5 @@
     id: string;
     options?: string[];
-    setUser: React.Dispatch<React.SetStateAction<UserRegister>>;
-    user: UserRegister;
+    setUser: React.Dispatch<React.SetStateAction<UserPersonalization>>;
+    user: UserPersonalization;
 }
Index: frontend/src/models/javaObjects/UserPersonalization.tsx
===================================================================
--- frontend/src/models/javaObjects/UserPersonalization.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/models/javaObjects/UserPersonalization.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,8 @@
+export interface UserPersonalization {
+    name: string;
+    email: string;
+    companySize: string;
+    workPosition: string;
+    interests: string[];
+    desiredSkills: string[];
+}
Index: ontend/src/models/javaObjects/UserRegister.tsx
===================================================================
--- frontend/src/models/javaObjects/UserRegister.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ 	(revision )
@@ -1,10 +1,0 @@
-export interface UserRegister {
-    email: string;
-    password: string;
-    passwordConfirmation: string;
-    name: string;
-    workPosition: string;
-    companySize: string;
-    interests: string[];
-    desiredSkills: string[];
-}
Index: frontend/src/pages/About.tsx
===================================================================
--- frontend/src/pages/About.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/pages/About.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -1,9 +1,6 @@
-import HeroAbout from "../components/HeroAbout.tsx";
 import {
-    IconArrowBigUpFilled,
-    IconChessKnightFilled,
     IconTrendingUp,
     IconRotate360,
-    IconRoute, IconTarget, IconRocket, IconTelescope, IconChessKnight, IconArrowBigUp
+    IconRoute, IconChessKnight, IconArrowBigUp
 } from '@tabler/icons-react';
 import {LightBeams} from "../assets/animations/SpikeAnimation.tsx"
@@ -12,4 +9,6 @@
 import {ArrowRight} from "lucide-react";
 import MagicBento from "../assets/animations/MagicBento.tsx";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import ShifterArrow from "../../public/Shifter-Arrow-White.png"
 
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/pages/Login.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -1,8 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterArrow from "../../public/Shifter-Arrow-White.png";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import ShifterArrow from "../../public/Shifter-Arrow-White.png";
 import React from "react";
-import { Eye, EyeOff } from "lucide-react";
-import { Link, useNavigate } from "react-router-dom";
-import { useAuthContext } from "../context/AuthContext.tsx";
+import {Eye, EyeOff} from "lucide-react";
+import {Link, useNavigate} from "react-router-dom";
+import {useAuthContext} from "../context/AuthContext.tsx";
 
 interface InputProps {
@@ -17,5 +21,5 @@
 
 function Login() {
-    const { login } = useAuthContext();
+    const {login} = useAuthContext();
     const [email, setEmail] = React.useState<string>("");
     const [password, setPassword] = React.useState<string>("");
@@ -39,5 +43,5 @@
                 navigate("/");
             })
-            .catch((err: any) => {
+            .catch((err) => {
                 if (err.response?.status === 401) {
                     setError("Invalid email or password.");
@@ -52,8 +56,9 @@
 
     return (
-        <main className="flex font-montserrat h-screen bg-white">
+        <main className="flex font-montserrat h-screen bg-beige">
             {/* 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">
+                <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}
@@ -75,7 +80,7 @@
 
             {/* RIGHT FORM CONTAINER */}
-            <section className="relative flex flex-col justify-center items-center flex-1 px-30">
+            <section className="relative flex flex-col justify-center items-center flex-1 px-horizontal-md">
                 <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
-                    <Link to={"/"} >
+                    <Link to={"/"}>
                         <img
                             src={ShifterLogo}
@@ -126,6 +131,6 @@
                             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" : ""}`}
+                            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" : ""}`}
                         >
                             {
@@ -136,6 +141,6 @@
                             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"
+                            rounded-md text-shifter/80 w-1/3 py-1 bg-white border-3 border-shifter/20 font-medium
+                            whitespace-nowrap opacity-80"
                         >
                             Register
@@ -181,5 +186,5 @@
                         onChange={inputProps.onChange}
                     />
-                    <hr className="border-t-2 border-black/5 rounded-full w-full" />
+                    <hr className="border-t-2 border-black/5 rounded-full w-full"/>
                 </div>
                 {inputProps.name === "password" && (
@@ -191,7 +196,7 @@
                     >
                         {!showPassword ? (
-                            <EyeOff size={20} opacity={0.6} />
+                            <EyeOff size={20} opacity={0.6}/>
                         ) : (
-                            <Eye size={20} opacity={0.6} />
+                            <Eye size={20} opacity={0.6}/>
                         )}
                     </button>
Index: frontend/src/pages/Personalize.tsx
===================================================================
--- frontend/src/pages/Personalize.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/pages/Personalize.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,176 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterArrow from "../../public/Shifter-Arrow-White.png";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
+import {Link} from "react-router-dom";
+import {usePersonalizeHook} from "../hooks/usePersonalizeHook.tsx";
+import {Box, Step, StepLabel, Stepper} from "@mui/material";
+import {CustomStepperConnector, CustomStepperStepIcon} from "../components/registerSteps/CustomStepper.tsx";
+import {AnimatePresence, motion} from "framer-motion";
+
+function Personalize() {
+    const {
+        verificationChecked,
+        isVerified,
+        isLoading,
+        activeStep,
+        showError,
+        error,
+        direction,
+        variants,
+        stepsContent,
+        handleNext,
+        handleBack,
+        handlePersonalize
+    } = usePersonalizeHook();
+
+    if (!verificationChecked) {
+        return undefined;
+    }
+
+    return (
+        <main className="flex font-montserrat h-screen bg-beige">
+
+            {/* 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-16 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 whitespace-nowrap">Shift into Success</h1>
+                    <p className="text-2xl font-light z-2">Start your journey toward smarter, scalable business
+                        growth.</p>
+                </div>
+            </section>
+
+            {/* RIGHT FORM CONTAINER */}
+            <section className="relative flex flex-col justify-center items-center flex-1 px-horizontal-md gap-6">
+                <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
+                    <Link to={"/"} >
+                        <img
+                            src={ShifterLogo}
+                            alt="Shifter Logo"
+                            className="w-40 h-auto object-contain"
+                        />
+                    </Link>
+                    <Link
+                        to={"/"}
+                        className="hover:bg-shifter/20 hover:text-shifter underline decoration-current
+                             font-semibold text-black/80 rounded-sm px-4 py-2"
+                    >
+                        Back to Main Page
+                    </Link>
+                </div>
+
+                {
+                    isVerified ? (
+                            <div className="flex flex-col items-center justify-center">
+                                <div className="flex flex-col gap-4 bg-white rounded-2xl shadow-lg p-8 w-fit text-center">
+                                    <h2 className="text-2xl font-bold text-red">Verification Failed</h2>
+                                    <p className="font-medium text-black-text/80 max-w-xl mx-auto">
+                                        We couldn’t verify your email address. The verification link may be invalid or
+                                        expired.
+                                        <br/>
+                                        Please try registering again or request a new verification link.
+                                    </p>
+                                </div>
+                            </div>
+                    ) : (
+                        <Box className="w-full flex flex-col">
+                            <Stepper
+                                activeStep={activeStep}
+                                alternativeLabel
+                                connector={<CustomStepperConnector/>}
+                            >
+                                {stepsContent.map((_, index) => (
+                                    <Step key={index}>
+                                        <StepLabel StepIconComponent={CustomStepperStepIcon}
+                                                   className="text-shifter font-semibold"
+                                        />
+                                    </Step>
+                                ))}
+                            </Stepper>
+
+                            <Box className="flex flex-col overflow-hidden gap-2">
+
+                                {/*STEPPER CONTENT*/}
+                                <AnimatePresence mode="wait" initial={false} custom={direction}>
+                                    <motion.div
+                                        key={activeStep}
+                                        custom={direction}
+                                        variants={variants}
+                                        initial="enter"
+                                        animate="center"
+                                        exit="exit"
+                                        transition={{
+                                            x: {type: "spring", stiffness: 500, damping: 40},
+                                            opacity: {duration: 0.2},
+                                        }}
+                                        className="h-80 flex flex-col justify-center"
+                                    >
+                                        {stepsContent[activeStep]}
+                                    </motion.div>
+                                </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">
+                                    <div className="flex justify-center gap-4 w-full">
+                                        <button
+                                            disabled={activeStep === 0}
+                                            onClick={handleBack}
+                                            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 w-1/3 py-1 bg-black/10 text-black/60 cursor-pointer rounded-sm "
+                                        >
+                                            Back
+                                        </button>
+                                        {activeStep === stepsContent.length - 1 ? (
+                                            <button
+                                                onClick={handlePersonalize}
+                                                className={`hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out
+                                                px-8 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md 
+                                                ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+                                            >
+                                                {
+                                                    isLoading ? "Setting up..." : "Start Using Shifter"
+                                                }
+                                            </button>
+                                        ) : (
+                                            <button
+                                                onClick={handleNext}
+                                                className={`disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none
+                                                hover:shadow-md hover:shadow-shifter/60 transition-all duration-200 ease-in-out
+                                                w-1/3 border-3 border-white/50 bg-shifter text-white cursor-pointer rounded-md`}
+                                            >
+                                                Next
+                                            </button>
+                                        )}
+
+
+                                        {/* Loading Animation */}
+                                        {
+                                            isLoading && (
+                                                <div className="h-full loader"></div>
+                                            )
+                                        }
+                                    </div>
+                                </Box>
+                            </Box>
+                        </Box>
+                    )
+                }
+            </section>
+        </main>
+    )
+}
+
+export default Personalize;
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 1a2bc8c8a1044bbf5be8f21724aa6fc0376a6602)
+++ frontend/src/pages/Register.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -1,130 +1,32 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterArrow from "../../public/Shifter-Arrow-White.png";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
+import {Link} from "react-router-dom";
 import React from "react";
-import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
-import ShifterArrow from "../../public/Shifter-Arrow-White.png";
-import {
-    Stepper,
-    Step,
-    StepLabel,
-    Box,
-} from "@mui/material";
-import {CustomStepperConnector, CustomStepperStepIcon} from "../components/registerSteps/CustomStepper.tsx";
-import {Link, useNavigate} from "react-router-dom";
-import {motion, AnimatePresence} from "framer-motion";
-import type {UserRegister} from "../models/javaObjects/UserRegister.tsx";
-import RegisterStepOne from "../components/registerSteps/RegisterStepOne.tsx";
-import RegisterStepTwo from "../components/registerSteps/RegisterStepTwo.tsx";
-import RegisterStepThree from "../components/registerSteps/RegisterStepThree.tsx";
-import RegisterStepFour from "../components/registerSteps/RegisterStepFour.tsx";
-import {useAuthContext} from "../context/AuthContext.tsx";
-import {isValidEmail} from "../utils/validation.ts";
-import {checkEmailExistsApi} from "../api/authApi.ts";
+import {Eye, EyeOff} from "lucide-react";
+import {useRegisterHook} from "../hooks/useRegisterHook.tsx";
 
 function Register() {
-    const {register} = useAuthContext();
-    const [isLoading, setIsLoading] = React.useState<boolean>(false);
-    const [isCheckingEmail, setIsCheckingEmail] = React.useState<boolean>(false);
-    const [activeStep, setActiveStep] = React.useState(0);
-    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<UserRegister>({
-        email: "",
-        password: "",
-        passwordConfirmation: "",
-        name: "",
-        workPosition: "",
-        companySize: "",
-        interests: [],
-        desiredSkills: [],
-    });
-    const navigate = useNavigate();
-
-    const handleNext = async () => {
-        if (error.length > 0) {
-            setShowError(true);
-            return;
-        }
-
-        if (activeStep === 0) {
-            if (!isValidEmail(user.email)) {
-                setError("Please enter a valid email.");
-                setShowError(true);
-                return;
-            }
-
-            setIsCheckingEmail(true);
-            try {
-                const exists = await checkEmailExistsApi(user.email);
-                if (exists) {
-                    setError("Email already exists");
-                    setShowError(true);
-                    setIsCheckingEmail(false);
-                    return;
-                }
-            } catch (err) {
-                setError("Error checking email. There's a problem with the server.");
-                setShowError(true);
-                setIsCheckingEmail(false);
-                console.error("Error checking email: ", err);
-                return;
-            }
-            setIsCheckingEmail(false);
-        }
-
-        // If we get here, no errors => proceed to next step
-        setError("");
-        setShowError(false);
-        setDirection(1);
-        setActiveStep((prev) => prev + 1);
-    };
-
-
-    const handleBack = () => {
-        setDirection(-1);
-        setActiveStep((prev) => prev - 1);
-    };
-    const variants = {
-        enter: (dir: number) => ({
-            x: dir > 0 ? 100 : -100,
-            opacity: 0,
-        }),
-        center: {
-            x: 0,
-            opacity: 1,
-        },
-        exit: (dir: number) => ({
-            x: dir > 0 ? -100 : 100,
-            opacity: 0,
-        }),
-    };
-
-    const handleRegister = async () => {
-        if (error.length > 0) {
-            setShowError(true);
-            return;
-        }
-
-        setIsLoading(true);
-
-        try {
-            await register(user);
-            navigate("/");
-        } catch (err) {
-            setError("Registration failed. Please try again.");
-            console.error("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} />
-    ];
+    const {
+        email,
+        setEmail,
+        password,
+        setPassword,
+        passwordConfirmation,
+        setPasswordConfirmation,
+        showPassword,
+        setShowPassword,
+        showError,
+        error,
+        isSuccess,
+        isLoading,
+        handleRegister
+    } = useRegisterHook();
 
     return (
-        <main className="flex font-montserrat h-screen bg-white">
+        <main className="flex font-montserrat h-screen bg-beige">
 
             {/* LEFT HEADER AND BACKGROUND */}
@@ -144,5 +46,5 @@
 
             {/* RIGHT FORM CONTAINER */}
-            <section 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-horizontal-md gap-6">
                 <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
                     <Link to={"/"} >
@@ -162,82 +64,77 @@
                 </div>
 
-                {/* STEPPER */}
-                <Box className="w-full flex flex-col">
-                    <Stepper
-                        activeStep={activeStep}
-                        alternativeLabel
-                        connector={<CustomStepperConnector/>}
-                    >
-                        {stepsContent.map((_, index) => (
-                            <Step key={index}>
-                                <StepLabel StepIconComponent={CustomStepperStepIcon}
-                                           className="text-shifter font-semibold"
-                                />
-                            </Step>
-                        ))}
-                    </Stepper>
-
-                    <Box className="flex flex-col overflow-hidden gap-2">
-
-                        {/*STEPPER CONTENT*/}
-                        <AnimatePresence mode="wait" initial={false} custom={direction}>
-                            <motion.div
-                                key={activeStep}
-                                custom={direction}
-                                variants={variants}
-                                initial="enter"
-                                animate="center"
-                                exit="exit"
-                                transition={{
-                                    x: {type: "spring", stiffness: 500, damping: 40},
-                                    opacity: {duration: 0.2},
-                                }}
-                                className="h-80 flex flex-col justify-center"
-                            >
-                                {stepsContent[activeStep]}
-                            </motion.div>
-                        </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">
-                            <div className="flex justify-center gap-4 ">
+                {
+                    isSuccess ? (
+                            <div className="flex flex-col items-center justify-center">
+                                <div className="flex flex-col gap-4 bg-white rounded-2xl shadow-lg p-8 w-fit text-center">
+                                    <h2 className="text-2xl font-bold text-shifter">Verify your email to continue</h2>
+                                    <p className="font-medium text-black-text/80 max-w-xl mx-auto">
+                                        A verification link has been sent to <span className='font-semibold text-shifter'>{email}</span>.
+                                        Please check your inbox and click the link to activate your account.
+                                    </p>
+                                </div>
+                            </div>
+                    ) : (
+                        <form
+                            onSubmit={handleRegister}
+                            className="flex flex-col gap-4 w-full items-center">
+                            <Input
+                                placeholder={"name@email.com"}
+                                label={"Email address"}
+                                name={"email"}
+                                type={"email"}
+                                id={"email"}
+                                value={email}
+                                onChange={e => setEmail(e.target.value)}
+                                showPassword={showPassword}
+                                setShowPassword={setShowPassword}
+                            />
+                            <Input
+                                placeholder={"********"}
+                                label={"Password"}
+                                name={"password"}
+                                type={"password"}
+                                id={"password"}
+                                value={password}
+                                onChange={e => setPassword(e.target.value)}
+                                showPassword={showPassword}
+                                setShowPassword={setShowPassword}
+                            />
+                            <Input
+                                placeholder={"********"}
+                                label={"Confirm password"}
+                                name={"passwordConfirmation"}
+                                type={"password"}
+                                id={"password-confirmation"}
+                                value={passwordConfirmation}
+                                onChange={e => setPasswordConfirmation(e.target.value)}
+                                showPassword={showPassword}
+                                setShowPassword={setShowPassword}
+                            />
+
+                            {/* Error Message */}
+                            {showError && <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
-                                    disabled={activeStep === 0}
-                                    onClick={handleBack}
-                                    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-1 bg-black/10 text-black/60 cursor-pointer rounded-sm "
+                                    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 px-8 py-1 bg-shifter font-medium
+                                    whitespace-nowrap ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
                                 >
-                                    Back
+                                    {
+                                        isLoading ? "Creating account..." : "Create Account"
+                                    }
                                 </button>
-                                {activeStep === stepsContent.length - 1 ? (
-                                    <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 
-                                    ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
-                                    >
-                                        {
-                                            isLoading ? "Setting up..." : "Start Your Journey"
-                                        }
-                                    </button>
-                                ) : (
-                                    <button
-                                        onClick={handleNext}
-                                        // disabled={!canContinue}
-                                        className={`disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none
-                                        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`}
-                                    >
-                                        {
-                                            isCheckingEmail ? "Checking if email exists..." : "Next"
-                                        }
-                                    </button>
-                                )}
-
+                                <Link
+                                    to="/login"
+                                    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 opacity-80"
+                                >
+                                    Log In
+                                </Link>
 
                                 {/* Loading Animation */}
@@ -248,19 +145,61 @@
                                 }
                             </div>
-                            <p
-                                className="text-black/40"
-                            >
-                                Already have an account?
-                                <Link to={"/login"}
-                                      className="relative text-shifter font-medium w-fit hover:font-semibold"
-                                >
-                                    {" "}Log In
-                                </Link>
-                            </p>
-                        </Box>
-                    </Box>
-                </Box>
+                        </form>
+                    )
+                }
             </section>
         </main>
+    )
+}
+
+interface InputProps {
+    placeholder: string;
+    label: string;
+    name: string;
+    type: string;
+    id: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    showPassword: boolean;
+    setShowPassword: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function Input(inputProps: InputProps) {
+
+    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.showPassword ? "text" : inputProps.type}
+                        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.type === "password" && (
+                    <button
+                        type="button"
+                        onClick={() => inputProps.setShowPassword(prev => !prev)}
+                        className="text-black cursor-pointer hover:bg-black/5 rounded-full p-1"
+                        aria-label={inputProps.showPassword ? "Hide password" : "Show password"}
+                    >
+                        {!inputProps.showPassword ? (
+                            <EyeOff size={20} opacity={0.6} />
+                        ) : (
+                            <Eye size={20} opacity={0.6} />
+                        )}
+                    </button>
+                )}
+            </div>
+        </div>
     );
 }
Index: frontend/src/pages/RegisterOld.tsx
===================================================================
--- frontend/src/pages/RegisterOld.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
+++ frontend/src/pages/RegisterOld.tsx	(revision 97a665a612b08a13d4e257a0904f0c0dc0247cca)
@@ -0,0 +1,268 @@
+import React from "react";
+import ShifterLogo from "../../public/Shifter-S2W-Transparent.png";
+import ShifterArrow from "../../public/Shifter-Arrow-White.png";
+import {
+    Stepper,
+    Step,
+    StepLabel,
+    Box,
+} from "@mui/material";
+import {CustomStepperConnector, CustomStepperStepIcon} from "../components/registerSteps/CustomStepper.tsx";
+import {Link, useNavigate} from "react-router-dom";
+import {motion, AnimatePresence} from "framer-motion";
+import type {UserPersonalization} from "../models/javaObjects/UserPersonalization.tsx";
+import RegisterStepOne from "../components/registerSteps/RegisterStepOne.tsx";
+import PersonalizeStepOne from "../components/registerSteps/PersonalizeStepOne.tsx";
+import PersonalizationStepTwo from "../components/registerSteps/PersonalizationStepTwo.tsx";
+import PersonalizationStepThree from "../components/registerSteps/PersonalizationStepThree.tsx";
+import {useAuthContext} from "../context/AuthContext.tsx";
+import {isValidEmail} from "../utils/validation.ts";
+import {checkEmailExistsApi} from "../api/authApi.ts";
+
+function RegisterOld() {
+    const {register} = useAuthContext();
+    const [isLoading, setIsLoading] = React.useState<boolean>(false);
+    const [isCheckingEmail, setIsCheckingEmail] = React.useState<boolean>(false);
+    const [activeStep, setActiveStep] = React.useState(0);
+    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<UserPersonalization>({
+        email: "",
+        password: "",
+        passwordConfirmation: "",
+        name: "",
+        workPosition: "",
+        companySize: "",
+        interests: [],
+        desiredSkills: [],
+    });
+    const navigate = useNavigate();
+
+    const handleNext = async () => {
+        if (error.length > 0) {
+            setShowError(true);
+            return;
+        }
+
+        if (activeStep === 0) {
+            if (!isValidEmail(user.email)) {
+                setError("Please enter a valid email.");
+                setShowError(true);
+                return;
+            }
+
+            setIsCheckingEmail(true);
+            try {
+                const exists = await checkEmailExistsApi(user.email);
+                if (exists) {
+                    setError("Email already exists");
+                    setShowError(true);
+                    setIsCheckingEmail(false);
+                    return;
+                }
+            } catch (err) {
+                setError("Error checking email. There's a problem with the server.");
+                setShowError(true);
+                setIsCheckingEmail(false);
+                console.error("Error checking email: ", err);
+                return;
+            }
+            setIsCheckingEmail(false);
+        }
+
+        // If we get here, no errors => proceed to next step
+        setError("");
+        setShowError(false);
+        setDirection(1);
+        setActiveStep((prev) => prev + 1);
+    };
+
+
+    const handleBack = () => {
+        setDirection(-1);
+        setActiveStep((prev) => prev - 1);
+    };
+    const variants = {
+        enter: (dir: number) => ({
+            x: dir > 0 ? 100 : -100,
+            opacity: 0,
+        }),
+        center: {
+            x: 0,
+            opacity: 1,
+        },
+        exit: (dir: number) => ({
+            x: dir > 0 ? -100 : 100,
+            opacity: 0,
+        }),
+    };
+
+    const handleRegister = async () => {
+        if (error.length > 0) {
+            setShowError(true);
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            await register(user);
+            navigate("/");
+        } catch (err) {
+            setError("Registration failed. Please try again.");
+            console.error("Registration error: ", err);
+        } finally {
+            setIsLoading(false);
+        }
+    }
+
+    const stepsContent = [
+        <RegisterStepOne setUser={setUser} user={user} setError={setError} />,
+        <PersonalizeStepOne setUser={setUser} user={user} setError={setError} />,
+        <PersonalizationStepTwo setUser={setUser} user={user} setError={setError} />,
+        <PersonalizationStepThree setUser={setUser} user={user} setError={setError} />
+    ];
+
+    return (
+        <main 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-16 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 whitespace-nowrap">Shift into Success</h1>
+                    <p className="text-2xl font-light z-2">Start your journey toward smarter, scalable business
+                        growth.</p>
+                </div>
+            </section>
+
+            {/* RIGHT FORM CONTAINER */}
+            <section className="relative flex flex-col justify-center items-center flex-1 px-20 gap-6">
+                <div className="absolute top-0 px-4 py-4 flex w-full justify-between items-center">
+                    <Link to={"/"} >
+                        <img
+                            src={ShifterLogo}
+                            alt="Shifter Logo"
+                            className="w-40 h-auto object-contain"
+                        />
+                    </Link>
+                    <Link
+                        to={"/"}
+                        className="hover:bg-shifter/20 hover:text-shifter underline decoration-current
+                             font-semibold text-black/80 rounded-sm px-4 py-2"
+                    >
+                        Back to Main Page
+                    </Link>
+                </div>
+
+                {/* STEPPER */}
+                <Box className="w-full flex flex-col">
+                    <Stepper
+                        activeStep={activeStep}
+                        alternativeLabel
+                        connector={<CustomStepperConnector/>}
+                    >
+                        {stepsContent.map((_, index) => (
+                            <Step key={index}>
+                                <StepLabel StepIconComponent={CustomStepperStepIcon}
+                                           className="text-shifter font-semibold"
+                                />
+                            </Step>
+                        ))}
+                    </Stepper>
+
+                    <Box className="flex flex-col overflow-hidden gap-2">
+
+                        {/*STEPPER CONTENT*/}
+                        <AnimatePresence mode="wait" initial={false} custom={direction}>
+                            <motion.div
+                                key={activeStep}
+                                custom={direction}
+                                variants={variants}
+                                initial="enter"
+                                animate="center"
+                                exit="exit"
+                                transition={{
+                                    x: {type: "spring", stiffness: 500, damping: 40},
+                                    opacity: {duration: 0.2},
+                                }}
+                                className="h-80 flex flex-col justify-center"
+                            >
+                                {stepsContent[activeStep]}
+                            </motion.div>
+                        </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">
+                            <div className="flex justify-center gap-4 ">
+                                <button
+                                    disabled={activeStep === 0}
+                                    onClick={handleBack}
+                                    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-1 bg-black/10 text-black/60 cursor-pointer rounded-sm "
+                                >
+                                    Back
+                                </button>
+                                {activeStep === stepsContent.length - 1 ? (
+                                    <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 
+                                    ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+                                    >
+                                        {
+                                            isLoading ? "Setting up..." : "Start Your Journey"
+                                        }
+                                    </button>
+                                ) : (
+                                    <button
+                                        onClick={handleNext}
+                                        // disabled={!canContinue}
+                                        className={`disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none
+                                        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`}
+                                    >
+                                        {
+                                            isCheckingEmail ? "Checking if email exists..." : "Next"
+                                        }
+                                    </button>
+                                )}
+
+
+                                {/* Loading Animation */}
+                                {
+                                    isLoading && (
+                                        <div className="h-full loader"></div>
+                                    )
+                                }
+                            </div>
+                            <p
+                                className="text-black/40"
+                            >
+                                Already have an account?
+                                <Link to={"/login"}
+                                      className="relative text-shifter font-medium w-fit hover:font-semibold"
+                                >
+                                    {" "}Log In
+                                </Link>
+                            </p>
+                        </Box>
+                    </Box>
+                </Box>
+            </section>
+        </main>
+    );
+}
+
+export default RegisterOld;