Index: src/main/java/mk/ukim/finki/synergymed/exceptions/EmailAlreadyExistsException.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/exceptions/EmailAlreadyExistsException.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
+++ src/main/java/mk/ukim/finki/synergymed/exceptions/EmailAlreadyExistsException.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -0,0 +1,7 @@
+package mk.ukim.finki.synergymed.exceptions;
+
+public class EmailAlreadyExistsException extends RuntimeException{
+    public EmailAlreadyExistsException(String message) {
+        super(message);
+    }
+}
Index: src/main/java/mk/ukim/finki/synergymed/exceptions/PasswordsMismatchException.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/exceptions/PasswordsMismatchException.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
+++ src/main/java/mk/ukim/finki/synergymed/exceptions/PasswordsMismatchException.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -0,0 +1,7 @@
+package mk.ukim.finki.synergymed.exceptions;
+
+public class PasswordsMismatchException extends RuntimeException{
+    public PasswordsMismatchException(String message){
+        super(message);
+    }
+}
Index: src/main/java/mk/ukim/finki/synergymed/exceptions/UsernameAlreadyExistsException.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/exceptions/UsernameAlreadyExistsException.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
+++ src/main/java/mk/ukim/finki/synergymed/exceptions/UsernameAlreadyExistsException.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -0,0 +1,7 @@
+package mk.ukim.finki.synergymed.exceptions;
+
+public class UsernameAlreadyExistsException extends RuntimeException{
+    public UsernameAlreadyExistsException(String message){
+        super(message);
+    }
+}
Index: src/main/java/mk/ukim/finki/synergymed/models/User.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/models/User.java	(revision cba2493e293bfef2dc6f079a07bfbe26d91c30e9)
+++ src/main/java/mk/ukim/finki/synergymed/models/User.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -39,5 +39,5 @@
     private String gender;
 
-    @Column(name = "date_created", nullable = false)
+    @Column(name = "date_created", nullable = false, insertable = false, updatable = false)
     private LocalDate dateCreated;
 
Index: src/main/java/mk/ukim/finki/synergymed/service/UserService.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/service/UserService.java	(revision cba2493e293bfef2dc6f079a07bfbe26d91c30e9)
+++ src/main/java/mk/ukim/finki/synergymed/service/UserService.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -3,6 +3,16 @@
 import mk.ukim.finki.synergymed.models.User;
 
+import java.time.LocalDate;
+
 public interface UserService {
     User findUserById(Integer id);
     User findUserByUsername(String username);
+    User register(String firstName,
+                  String lastName,
+                  String username,
+                  String password,
+                  String repeatPassword,
+                  String email,
+                  String gender,
+                  LocalDate dateOfBirth);
 }
Index: src/main/java/mk/ukim/finki/synergymed/service/impl/UserServiceImpl.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/service/impl/UserServiceImpl.java	(revision cba2493e293bfef2dc6f079a07bfbe26d91c30e9)
+++ src/main/java/mk/ukim/finki/synergymed/service/impl/UserServiceImpl.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -1,10 +1,16 @@
 package mk.ukim.finki.synergymed.service.impl;
 
+import org.springframework.transaction.annotation.Transactional;
 import lombok.RequiredArgsConstructor;
-import mk.ukim.finki.synergymed.exceptions.UserNotFoundException;
+import mk.ukim.finki.synergymed.exceptions.*;
+import mk.ukim.finki.synergymed.models.Client;
 import mk.ukim.finki.synergymed.models.User;
+import mk.ukim.finki.synergymed.repositories.ClientRepository;
 import mk.ukim.finki.synergymed.repositories.UserRepository;
 import mk.ukim.finki.synergymed.service.UserService;
+import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
+
+import java.time.LocalDate;
 
 @Service
@@ -12,4 +18,7 @@
 public class UserServiceImpl implements UserService {
     private final UserRepository userRepository;
+    private final ClientRepository clientRepository;
+    private final PasswordEncoder passwordEncoder;
+
     @Override
     public User findUserById(Integer id) {
@@ -25,3 +34,40 @@
                 .orElseThrow(UserNotFoundException::new);
     }
+
+    @Transactional
+    @Override
+    public User register(String firstName, String lastName, String username, String password, String repeatPassword, String email, String gender, LocalDate dateOfBirth) {
+        if (username == null || password == null || username.isEmpty() || password.isEmpty()) {
+            throw new InvalidInputException();
+        }
+        if (!password.equals(repeatPassword)) {
+            throw new PasswordsMismatchException("Passwords do not match.");
+        }
+        if (this.userRepository.findByUsername(username).isPresent()) {
+            throw new UsernameAlreadyExistsException("Username already exists.");
+        }
+        if(this.userRepository.findByEmail(email).isPresent()){
+            throw new EmailAlreadyExistsException("Email address already exists.");
+        }
+
+
+        User user = new User();
+        user.setFirstName(firstName);
+        user.setLastName(lastName);
+        user.setUsername(username);
+        user.setHashedPassword(passwordEncoder.encode(password));
+        user.setEmail(email);
+        user.setGender(gender);
+        user.setDateOfBirth(dateOfBirth);
+
+        User savedUser = userRepository.save(user);
+
+        Client client = new Client();
+        client.setUsers(savedUser);
+        client.setIsVerified(false);
+
+        clientRepository.save(client);
+
+        return savedUser;
+    }
 }
Index: src/main/java/mk/ukim/finki/synergymed/web/RegisterController.java
===================================================================
--- src/main/java/mk/ukim/finki/synergymed/web/RegisterController.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
+++ src/main/java/mk/ukim/finki/synergymed/web/RegisterController.java	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -0,0 +1,49 @@
+package mk.ukim.finki.synergymed.web;
+
+import lombok.RequiredArgsConstructor;
+import mk.ukim.finki.synergymed.service.UserService;
+import org.springframework.format.annotation.DateTimeFormat;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import java.time.LocalDate;
+
+@Controller
+@RequiredArgsConstructor
+@RequestMapping("/register")
+public class RegisterController {
+
+    private final UserService userService;
+
+    @GetMapping
+    public String getSignupPage(){
+        return "register";
+    }
+
+    @PostMapping
+    public String signup(Model model,
+                         @RequestParam String firstName,
+                         @RequestParam String lastName,
+                         @RequestParam String username,
+                         @RequestParam String password,
+                         @RequestParam String repeatPassword,
+                         @RequestParam String email,
+                         @RequestParam String gender,
+                         @RequestParam @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) LocalDate dateOfBirth){
+        try {
+            userService.register(firstName, lastName, username, password, repeatPassword, email, gender, dateOfBirth);
+            return "register-success";
+
+        } catch (RuntimeException ex) {
+            model.addAttribute("hasError", true);
+            model.addAttribute("error", ex.getMessage());
+
+            return "register";
+        }
+    }
+}
+
Index: src/main/resources/application.properties
===================================================================
--- src/main/resources/application.properties	(revision cba2493e293bfef2dc6f079a07bfbe26d91c30e9)
+++ src/main/resources/application.properties	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -2,7 +2,7 @@
 
 # Database connection
-spring.datasource.url=jdbc:postgresql://localhost:5432/SynergyMed
+spring.datasource.url=jdbc:postgresql://localhost:5432/synergymed
 spring.datasource.username=postgres
-spring.datasource.password=1234
+spring.datasource.password=postgres
 spring.jpa.properties.hibernate.default_schema=synergymed
 spring.datasource.driver-class-name=org.postgresql.Driver
Index: src/main/resources/templates/register-success.html
===================================================================
--- src/main/resources/templates/register-success.html	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
+++ src/main/resources/templates/register-success.html	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SynergyMed - Успешна Регистрација</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, #a4ecba 0%, #fefeff 100%);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    .success-container {
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      width: 100%;
+      max-width: 450px;
+      backdrop-filter: blur(10px);
+    }
+
+    .success-header {
+      background: linear-gradient(135deg, #28a745, #20c997);
+      padding: 40px 30px;
+      text-align: center;
+      color: white;
+    }
+
+    .success-icon {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 20px auto;
+      animation: pulse 2s infinite;
+    }
+
+    .success-icon svg {
+      width: 40px;
+      height: 40px;
+    }
+
+    @keyframes pulse {
+      0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+      }
+      70% {
+        transform: scale(1.05);
+        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+      }
+      100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+      }
+    }
+
+    .success-header h1 {
+      font-size: 2rem;
+      font-weight: 300;
+      margin-bottom: 8px;
+    }
+
+    .success-header p {
+      opacity: 0.9;
+      font-size: 0.9rem;
+    }
+
+    .success-content {
+      padding: 40px 30px;
+      text-align: center;
+    }
+
+    .success-message {
+      margin-bottom: 30px;
+    }
+
+    .success-message h2 {
+      color: #28a745;
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 15px;
+    }
+
+    .success-message p {
+      color: #666;
+      font-size: 1rem;
+      line-height: 1.6;
+    }
+
+    .action-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+
+    .btn-login {
+      padding: 15px;
+      background: linear-gradient(135deg, #20b2aa, #48d1cc);
+      color: white;
+      border: none;
+      border-radius: 12px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      text-decoration: none;
+      display: block;
+      text-align: center;
+    }
+
+    .btn-login:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 20px rgba(32, 178, 170, 0.3);
+    }
+
+    .btn-login:active {
+      transform: translateY(0);
+    }
+
+    .btn-secondary {
+      padding: 15px;
+      background: #f8f9fa;
+      color: #6c757d;
+      border: 2px solid #e1e5e9;
+      border-radius: 12px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      text-decoration: none;
+      display: block;
+      text-align: center;
+    }
+
+    .btn-secondary:hover {
+      background: #e9ecef;
+      color: #495057;
+      border-color: #ced4da;
+    }
+
+    .form-footer {
+      text-align: center;
+      padding: 20px 30px;
+      background-color: #f8f9fa;
+      border-top: 1px solid #e9ecef;
+    }
+
+    .form-footer p {
+      color: #6c757d;
+      font-size: 0.85rem;
+    }
+
+    .welcome-info {
+      background: #e7f9f0;
+      border: 1px solid #b8e6cc;
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 30px;
+      text-align: left;
+    }
+
+    .welcome-info h3 {
+      color: #155724;
+      font-size: 1.1rem;
+      margin-bottom: 10px;
+    }
+
+    .welcome-info ul {
+      color: #155724;
+      font-size: 0.9rem;
+      padding-left: 20px;
+    }
+
+    .welcome-info li {
+      margin-bottom: 5px;
+    }
+
+    @media (max-width: 480px) {
+      .success-container {
+        margin: 10px;
+        border-radius: 15px;
+      }
+
+      .success-header {
+        padding: 30px 20px;
+      }
+
+      .success-content {
+        padding: 30px 20px;
+      }
+
+      .success-header h1 {
+        font-size: 1.7rem;
+      }
+
+      .success-message h2 {
+        font-size: 1.3rem;
+      }
+    }
+  </style>
+</head>
+<body>
+<div class="success-container">
+  <div class="success-header">
+    <div class="success-icon">
+      <svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <h1>SynergyMed</h1>
+    <p>Успешно создавање на сметка</p>
+  </div>
+
+  <div class="success-content">
+    <div class="success-message">
+      <h2>Честитки!</h2>
+      <p>Вашата сметка е успешно создадена. Сега можете да се најавите и да ги користите сите функционалности на SynergyMed платформата.</p>
+    </div>
+
+    <div class="welcome-info">
+      <h3>Што можете да правите:</h3>
+      <ul>
+        <li>Online купување на продукти од нашите аптеки</li>
+        <li>Преглед на медицинската историја</li>
+        <li>Менаџирање на вашиот здравствен профил</li>
+        <li>Следење на здравствените показатели</li>
+      </ul>
+    </div>
+
+    <div class="action-buttons">
+      <a href="#" th:href="@{/login}" class="btn-login">Најави се сега</a>
+      <a href="#" th:href="@{/}" class="btn-secondary">Назад на почетна</a>
+    </div>
+  </div>
+
+  <div class="form-footer">
+    <p>&copy; 2025 SynergyMed. Сите права задржани.</p>
+  </div>
+</div>
+
+<script>
+  // Add a subtle entrance animation
+  document.addEventListener('DOMContentLoaded', function() {
+    const container = document.querySelector('.success-container');
+    container.style.opacity = '0';
+    container.style.transform = 'translateY(20px)';
+
+    setTimeout(() => {
+      container.style.transition = 'all 0.6s ease';
+      container.style.opacity = '1';
+      container.style.transform = 'translateY(0)';
+    }, 100);
+  });
+</script>
+</body>
+</html>
Index: src/main/resources/templates/register.html
===================================================================
--- src/main/resources/templates/register.html	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
+++ src/main/resources/templates/register.html	(revision f18f0d5ffce613bcef773f61b40359bd3b040b9a)
@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynergyMed - Регистрација</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #a4ecba 0%, #fefeff 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .register-container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            width: 100%;
+            max-width: 500px;
+            backdrop-filter: blur(10px);
+        }
+
+        .register-header {
+            background: linear-gradient(135deg, #20b2aa, #48d1cc);
+            padding: 40px 30px;
+            text-align: center;
+            color: white;
+        }
+
+        .register-header h1 {
+            font-size: 2rem;
+            font-weight: 300;
+            margin-bottom: 8px;
+        }
+
+        .register-header p {
+            opacity: 0.9;
+            font-size: 0.9rem;
+        }
+
+        .register-form {
+            padding: 40px 30px;
+        }
+
+        .form-row {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 25px;
+        }
+
+        .form-group {
+            margin-bottom: 25px;
+            position: relative;
+            flex: 1;
+        }
+
+        .form-group.full-width {
+            flex: 1 1 100%;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #555;
+            font-weight: 500;
+            font-size: 0.9rem;
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 15px 20px;
+            border: 2px solid #e1e5e9;
+            border-radius: 12px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: #f8f9fa;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: #20b2aa;
+            background: white;
+            box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.1);
+        }
+
+        .form-select {
+            width: 100%;
+            padding: 15px 20px;
+            border: 2px solid #e1e5e9;
+            border-radius: 12px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: #f8f9fa;
+            cursor: pointer;
+        }
+
+        .form-select:focus {
+            outline: none;
+            border-color: #20b2aa;
+            background: white;
+            box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.1);
+        }
+
+        .btn-register {
+            width: 100%;
+            padding: 15px;
+            background: linear-gradient(135deg, #20b2aa, #48d1cc);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-top: 10px;
+        }
+
+        .btn-register:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(32, 178, 170, 0.3);
+        }
+
+        .btn-register:active {
+            transform: translateY(0);
+        }
+
+        .alert {
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-size: 0.9rem;
+        }
+
+        .alert-danger {
+            background-color: #fee;
+            color: #c33;
+            border: 1px solid #fcc;
+        }
+
+        .login-link {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .login-link a {
+            color: #20b2aa;
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+        }
+
+        .login-link a:hover {
+            color: #1a9999;
+            text-decoration: underline;
+        }
+
+        .loading {
+            display: none;
+            position: relative;
+        }
+
+        .loading::after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            margin: auto;
+            border: 2px solid transparent;
+            border-top-color: #ffffff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        @keyframes spin {
+            0% { transform: translate(-50%, -50%) rotate(0deg); }
+            100% { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+
+        .form-footer {
+            text-align: center;
+            padding: 20px 30px;
+            background-color: #f8f9fa;
+            border-top: 1px solid #e9ecef;
+        }
+
+        .form-footer p {
+            color: #6c757d;
+            font-size: 0.85rem;
+        }
+
+        @media (max-width: 600px) {
+            .form-row {
+                flex-direction: column;
+                gap: 0;
+            }
+
+            .register-container {
+                margin: 10px;
+                border-radius: 15px;
+            }
+
+            .register-header {
+                padding: 30px 20px;
+            }
+
+            .register-form {
+                padding: 30px 20px;
+            }
+
+            .register-header h1 {
+                font-size: 1.7rem;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="register-container">
+    <div class="register-header">
+        <h1>SynergyMed</h1>
+        <p>Создајте вашата нова сметка за да започнете.</p>
+    </div>
+
+    <div class="register-form">
+        <!-- Error message -->
+        <div th:if="${hasError}" class="alert alert-danger">
+            <span th:text="${error}">Грешка при регистрација</span>
+        </div>
+
+        <form th:action="@{/register}" method="post" id="registerForm">
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="firstName">Име</label>
+                    <input type="text"
+                           id="firstName"
+                           name="firstName"
+                           class="form-control"
+                           placeholder="Внесете име"
+                           required>
+                </div>
+
+                <div class="form-group">
+                    <label for="lastName">Презиме</label>
+                    <input type="text"
+                           id="lastName"
+                           name="lastName"
+                           class="form-control"
+                           placeholder="Внесете презиме"
+                           required>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="username">Корисничко име</label>
+                <input type="text"
+                       id="username"
+                       name="username"
+                       class="form-control"
+                       placeholder="Внесете корисничко име"
+                       required>
+            </div>
+
+            <div class="form-group">
+                <label for="email">Е-маил</label>
+                <input type="email"
+                       id="email"
+                       name="email"
+                       class="form-control"
+                       placeholder="Внесете е-маил адреса"
+                       required>
+            </div>
+
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="password">Лозинка</label>
+                    <input type="password"
+                           id="password"
+                           name="password"
+                           class="form-control"
+                           placeholder="Внесете лозинка"
+                           required>
+                </div>
+
+                <div class="form-group">
+                    <label for="repeatPassword">Повторете лозинка</label>
+                    <input type="password"
+                           id="repeatPassword"
+                           name="repeatPassword"
+                           class="form-control"
+                           placeholder="Повторете лозинка"
+                           required>
+                </div>
+            </div>
+
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="gender">Пол</label>
+                    <select id="gender" name="gender" class="form-select" required>
+                        <option value="">Изберете пол</option>
+                        <option value="МАШКИ">Машки</option>
+                        <option value="ЖЕНСКИ">Женски</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label for="dateOfBirth">Датум на раѓање</label>
+                    <input type="date"
+                           id="dateOfBirth"
+                           name="dateOfBirth"
+                           class="form-control"
+                           required>
+                </div>
+            </div>
+
+            <button type="submit" class="btn-register" id="registerBtn">
+                <span class="btn-text">Регистрирај се</span>
+                <div class="loading"></div>
+            </button>
+        </form>
+
+        <div class="login-link">
+            <a href="#" th:href="@{/login}">Веќе имате сметка? Најавете се</a>
+        </div>
+    </div>
+
+    <div class="form-footer">
+        <p>&copy; 2025 SynergyMed. Сите права задржани.</p>
+    </div>
+</div>
+
+<script>
+    document.getElementById('registerForm').addEventListener('submit', function() {
+        const btn = document.getElementById('registerBtn');
+        const btnText = btn.querySelector('.btn-text');
+        const loading = btn.querySelector('.loading');
+
+        btnText.style.display = 'none';
+        loading.style.display = 'block';
+        btn.disabled = true;
+    });
+
+    // Add input focus animations
+    document.querySelectorAll('.form-control, .form-select').forEach(input => {
+        input.addEventListener('focus', function() {
+            this.parentElement.classList.add('focused');
+        });
+
+        input.addEventListener('blur', function() {
+            if (!this.value) {
+                this.parentElement.classList.remove('focused');
+            }
+        });
+    });
+
+    // Password confirmation validation
+    document.getElementById('repeatPassword').addEventListener('blur', function() {
+        const password = document.getElementById('password').value;
+        const repeatPassword = this.value;
+
+        if (password && repeatPassword && password !== repeatPassword) {
+            this.style.borderColor = '#dc3545';
+            this.style.backgroundColor = '#fff5f5';
+        } else {
+            this.style.borderColor = '#e1e5e9';
+            this.style.backgroundColor = '#f8f9fa';
+        }
+    });
+</script>
+</body>
+</html>
