diff --git a/web-backend/src/main/java/com/statusneo/vms/config/ValidationConfig.java b/web-backend/src/main/java/com/statusneo/vms/config/ValidationConfig.java
new file mode 100644
index 0000000..950607a
--- /dev/null
+++ b/web-backend/src/main/java/com/statusneo/vms/config/ValidationConfig.java
@@ -0,0 +1,24 @@
+package com.statusneo.vms.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.validation.beanvalidation.LocalValidatorFactoryBean;
+import org.springframework.validation.beanvalidation.MethodValidationPostProcessor;
+
+
+@Configuration
+public class ValidationConfig {
+
+
+    @Bean
+    public LocalValidatorFactoryBean validator() {
+        return new LocalValidatorFactoryBean();
+    }
+
+    @Bean
+    public MethodValidationPostProcessor methodValidationPostProcessor() {
+        MethodValidationPostProcessor processor = new MethodValidationPostProcessor();
+        processor.setValidator(validator());
+        return processor;
+    }
+}
\ No newline at end of file
diff --git a/web-backend/src/main/java/com/statusneo/vms/controller/VisitorController.java b/web-backend/src/main/java/com/statusneo/vms/controller/VisitorController.java
index 391fba7..9adc462 100644
--- a/web-backend/src/main/java/com/statusneo/vms/controller/VisitorController.java
+++ b/web-backend/src/main/java/com/statusneo/vms/controller/VisitorController.java
@@ -17,7 +17,7 @@
  * under the License.
  */
 package com.statusneo.vms.controller;
-
+import org.springframework.validation.FieldError;
 import com.statusneo.vms.cache.EmployeeNameCache;
 import com.statusneo.vms.dto.VerificationResult;
 import com.statusneo.vms.model.Visit;
@@ -27,12 +27,14 @@
 import com.statusneo.vms.service.GraphDirectoryService;
 import com.statusneo.vms.service.OtpService;
 import com.statusneo.vms.service.VisitService;
+import jakarta.validation.Valid;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
+import org.springframework.validation.BindingResult;
 import org.springframework.web.bind.annotation.*;
 
 import java.time.LocalDateTime;
@@ -61,119 +63,118 @@ public class VisitorController {
     @Autowired
     private EmployeeRepository employeeRepository;
 
-
-    @GetMapping("/report")
-    public ResponseEntity<?> getReport(@RequestParam String period) {
-        List<Visit> visit;
-        if (period.equals("daily")) {
-            visit = visitRepository.findAllByVisitDateBetween(LocalDateTime.now().toLocalDate().atStartOfDay(), LocalDateTime.now());
-        } else if (period.equals("monthly")) {
-            visit = visitRepository.findAllByVisitDateBetween(LocalDateTime.now().minusMonths(1), LocalDateTime.now());
-        } else {
-            return ResponseEntity.badRequest().body("Invalid period");
-        }
-        return ResponseEntity.ok(visit);
-    }
-
-//    @RequestMapping("/error")
-    public String handleError() {
-        return "Custom error page!";
-    }
-
     @GetMapping("/")
-    public String home() {
-        return "index";  // Looks for src/main/resources/templates/simple.html
-    }
-
-
-    @GetMapping("/search")
-    public String searchEmployees(@RequestParam("employee") String query, Model model) {
-        logger.info("Received search request for employee: {}", query);
-        List<String> names = employeeNameCache.getEmployeeNamesByPrefix(query == null ? "" : query);
-        model.addAttribute("employees", names);
-        return "employeeSearchResults";
+    public String home(Model model) {
+        model.addAttribute("visitor", new Visitor());
+        return "index";
     }
 
-    @GetMapping("/refresh-employee-cache")
-    public ResponseEntity<String> refreshEmployeeCache() {
-        employeeNameCache.initializeCache();
-        return ResponseEntity.ok("Cache refreshed");
+    // Add this method to serve the registration form
+    @GetMapping("/register")
+    public String showRegistrationForm(Model model) {
+        model.addAttribute("visitor", new Visitor());
+        model.addAttribute("employees", employeeRepository.findAll()); // or employeeService.getAllEmployees()
+        return "visitorRegistration";
     }
 
     @PostMapping("/register")
-    public String registerVisitor(@ModelAttribute Visitor visitor,
-                                 @RequestParam(value = "host", required = false) String host,
-                                 @RequestParam(value = "employee", required = false) String employee,
-                                 @RequestHeader(value = "HX-Request", required = false) String hxRequest,
-                                 Model model) {
-        // prefer explicit host id, fall back to name
+    public String registerVisitor(
+            @Valid @ModelAttribute("visitor") Visitor visitor,
+            BindingResult bindingResult,
+            @RequestParam(value = "host", required = false) String host,
+            @RequestParam(value = "employee", required = false) String employee,
+            @RequestHeader(value = "HX-Request", required = false) String hxRequest,
+            Model model) {
+
+        logger.info("Processing visitor registration for: {}", visitor.getEmail());
+
+        // Check for validation errors - Spring validation pattern
+        if (bindingResult.hasErrors()) {
+            logger.warn("Form validation failed with {} errors", bindingResult.getErrorCount());
+
+            // Add field errors and visitor to model for display in template
+            List<FieldError> fieldErrors = bindingResult.getFieldErrors();
+            model.addAttribute("fieldErrors", fieldErrors);
+            model.addAttribute("visitor", visitor);
+            model.addAttribute("employees", employeeRepository.findAll()); // Add employees for dropdown
+
+            if (hxRequest != null && hxRequest.equals("true")) {
+                return "fragments/validation-errors"; // HTMX error fragment
+            }
+            // Return the registration form template to show validation errors
+            return "visitorRegistration";
+        }
+
         resolveAndSetHost(visitor, host, employee);
+
         Visit savedVisit = visitService.registerVisit(visitor);
         model.addAttribute("visitId", savedVisit.getId());
-        
-        // If it's an HTMX request, just return the modal fragment
+        model.addAttribute("visit", savedVisit);
+
         if (hxRequest != null && hxRequest.equals("true")) {
-            // JTE doesn't use Thymeleaf fragment syntax ("::"). Return the template name
-            // that corresponds to src/main/jte/fragments/otp-modal.jte
             return "fragments/otp-modal";
         }
 
-        // For regular form submission (fallback)
-        return "otp-modal";
+        // Regular form submission - return result view
+        return "visitorRegistrationResult";
+    }
+
+    @GetMapping("/report")
+    public String getReport(@RequestParam String period, Model model) {
+        List<Visit> visits;
+        LocalDateTime now = LocalDateTime.now();
+
+        if (period.equals("daily")) {
+            visits = visitRepository.findAllByVisitDateBetween(now.toLocalDate().atStartOfDay(), now);
+        } else if (period.equals("monthly")) {
+            visits = visitRepository.findAllByVisitDateBetween(now.minusMonths(1), now);
+        } else {
+            return "error/400";
+        }
+        model.addAttribute("visits", visits);
+        return "report";
     }
 
-    // Updated to return Object so we can return ResponseEntity for HTMX redirects
     @PostMapping("/confirm-visit")
     public Object confirmVisit(@RequestParam("visitId") Long visitId,
-                             @RequestParam("otpCode") String otpCode,
-                             @RequestHeader(value = "HX-Request", required = false) String hxRequest,
-                             Model model) {
+                               @RequestParam("otpCode") String otpCode,
+                               @RequestHeader(value = "HX-Request", required = false) String hxRequest,
+                               Model model) {
         VerificationResult result = visitService.confirmVisit(visitId, otpCode);
         model.addAttribute("result", result);
         model.addAttribute("visitId", visitId);
 
-        // If it's an HTMX request, return a fragment or an HX-Redirect when attempts exhausted
         if (hxRequest != null && hxRequest.equals("true")) {
             if (result.success()) {
-                // Pass the visit to get visitor details for success message
                 Visit visit = visitRepository.findById(visitId)
-                    .orElseThrow(() -> new IllegalArgumentException("Visit not found"));
+                        .orElseThrow(() -> new IllegalArgumentException("Visit not found"));
                 model.addAttribute("visit", visit);
-                // Return the JTE template for success message
                 return "fragments/success-message";
             } else {
-                // If no more reattempts allowed, tell HTMX to redirect to the entry page
                 if (!result.reattempt()) {
                     return ResponseEntity.ok().header("HX-Redirect", "/").build();
                 }
 
-                // Auto-resend OTP when a failed attempt occurred and reattempts remain
                 Visit visit = visitRepository.findById(visitId)
-                    .orElseThrow(() -> new IllegalArgumentException("Visit not found"));
+                        .orElseThrow(() -> new IllegalArgumentException("Visit not found"));
 
-                VerificationResult resendResult = otpService.generateOtp(visit, false); // don't reset attempt counter
+                VerificationResult resendResult = otpService.generateOtp(visit, false);
 
-                // Decide the message to show in the modal: prefer an explicit resend message when OTP re-sent successfully
                 if (resendResult.success()) {
                     model.addAttribute("serverMessage", "Invalid OTP. A new OTP has been sent to your email.");
                 } else {
-                    // If resend failed (cooldown or limit), show that message instead
                     model.addAttribute("serverMessage", resendResult.message());
                 }
 
-                // Re-show the otp modal with an error message so HTMX swaps it in place
                 return "fragments/otp-modal";
             }
         }
-        
-        // For regular form submission (fallback):
+
         if (result.success()) {
             return "confirmation-modal";
         } else if (!result.reattempt()) {
-            // Attempts exhausted: redirect to blank visitor entry form
             return "redirect:/";
         } else {
-            // Auto-resend for non-HTMX fallback as well
             Visit visit = visitRepository.findById(visitId)
                     .orElseThrow(() -> new IllegalArgumentException("Visit not found"));
 
@@ -184,14 +185,15 @@ public Object confirmVisit(@RequestParam("visitId") Long visitId,
                 model.addAttribute("serverMessage", resendResult.message());
             }
 
-            // Re-show otp page with message for non-HTMX fallback
             model.addAttribute("visitId", visitId);
             return "otp-modal";
         }
     }
 
     @PostMapping("/resend-otp")
-    public String resendOtp(@RequestParam("visitId") Long visitId, Model model) {
+    public String resendOtp(@RequestParam("visitId") Long visitId,
+                            @RequestHeader(value = "HX-Request", required = false) String hxRequest,
+                            Model model) {
         Visit visit = visitRepository.findById(visitId)
                 .orElseThrow(() -> new IllegalArgumentException("Visit not found"));
 
@@ -200,8 +202,12 @@ public String resendOtp(@RequestParam("visitId") Long visitId, Model model) {
         model.addAttribute("result", result);
         model.addAttribute("visitId", visitId);
         model.addAttribute("serverMessage", result.message());
-        // For HTMX flows this should probably return the otp modal again so the UI is updated.
-        return "fragments/otp-modal";
+
+        // Handle both HTMX and regular requests
+        if (hxRequest != null && hxRequest.equals("true")) {
+            return "fragments/otp-modal";
+        }
+        return "otp-modal";
     }
 
     /**
@@ -226,4 +232,4 @@ private void resolveAndSetHost(Visitor visitor, String hostIdStr, String employe
         String trimmed = employeeStr.trim();
         employeeRepository.findByNameIgnoreCase(trimmed).ifPresent(visitor::setHost);
     }
-}
+}
\ No newline at end of file
diff --git a/web-backend/src/main/java/com/statusneo/vms/exception/GlobalExceptionHandler.java b/web-backend/src/main/java/com/statusneo/vms/exception/GlobalExceptionHandler.java
index f1abf22..cbc9e4f 100644
--- a/web-backend/src/main/java/com/statusneo/vms/exception/GlobalExceptionHandler.java
+++ b/web-backend/src/main/java/com/statusneo/vms/exception/GlobalExceptionHandler.java
@@ -1,68 +1,130 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 package com.statusneo.vms.exception;
 
 import gg.jte.TemplateException;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.dao.DataIntegrityViolationException;
+import org.springframework.http.HttpStatus;
 import org.springframework.ui.Model;
+import org.springframework.validation.BindException;
+import org.springframework.validation.FieldError;
+import org.springframework.web.bind.MethodArgumentNotValidException;
+import org.springframework.web.bind.MissingServletRequestParameterException;
 import org.springframework.web.bind.annotation.ControllerAdvice;
 import org.springframework.web.bind.annotation.ExceptionHandler;
+import org.springframework.web.bind.annotation.ResponseStatus;
+import org.springframework.web.method.annotation.MethodArgumentTypeMismatchException;
 
+import jakarta.servlet.RequestDispatcher;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.validation.ConstraintViolationException;
 import java.util.NoSuchElementException;
+import java.util.stream.Collectors;
+
 @ControllerAdvice
 public class GlobalExceptionHandler {
     private static final Logger logger = LoggerFactory.getLogger(GlobalExceptionHandler.class);
 
+    @ExceptionHandler(MethodArgumentNotValidException.class)
+    @ResponseStatus(HttpStatus.BAD_REQUEST)
+    public String handleMethodArgumentNotValid(MethodArgumentNotValidException ex, Model model) {
+        String errorMessage = ex.getBindingResult()
+                .getFieldErrors()
+                .stream()
+                .map(error -> error.getField() + ": " + error.getDefaultMessage())
+                .collect(Collectors.joining(", "));
+
+        logger.warn("Method argument validation failed: {}", errorMessage);
+        model.addAttribute("error", "Validation failed: " + errorMessage);
+        model.addAttribute("fieldErrors", ex.getBindingResult().getFieldErrors());
+
+        return "error/400";
+    }
+
+    @ExceptionHandler(BindException.class)
+    @ResponseStatus(HttpStatus.BAD_REQUEST)
+    public String handleBindException(BindException ex, Model model) {
+        String errorMessage = ex.getFieldErrors()
+                .stream()
+                .map(FieldError::getDefaultMessage)
+                .collect(Collectors.joining(", "));
+
+        logger.warn("Binding error: {}", errorMessage);
+        model.addAttribute("error", "Form binding failed: " + errorMessage);
+        model.addAttribute("fieldErrors", ex.getFieldErrors());
+
+        return "error/400";
+    }
+
+    @ExceptionHandler(MissingServletRequestParameterException.class)
+    @ResponseStatus(HttpStatus.BAD_REQUEST)
+    public String handleMissingParams(MissingServletRequestParameterException ex, Model model) {
+        logger.warn("Missing required parameter: {}", ex.getParameterName());
+        model.addAttribute("error", "Missing required parameter: " + ex.getParameterName());
+        return "error/400";
+    }
+
+    @ExceptionHandler(MethodArgumentTypeMismatchException.class)
+    @ResponseStatus(HttpStatus.BAD_REQUEST)
+    public String handleTypeMismatch(MethodArgumentTypeMismatchException ex, Model model) {
+        logger.warn("Type mismatch for parameter '{}': expected {}",
+                ex.getName(), ex.getRequiredType());
+        model.addAttribute("error",
+                String.format("Invalid value for parameter '%s'. Expected type: %s",
+                        ex.getName(),
+                        ex.getRequiredType() != null ? ex.getRequiredType().getSimpleName() : "unknown"));
+        return "error/400";
+    }
+
+
     @ExceptionHandler(NoSuchElementException.class)
-    public String handleNoSuchElement(NoSuchElementException ex, Model model) {
-        logger.warn("Resource not found", ex);
-        model.addAttribute("error", "The requested resource was not found.");
-        return "404";
+    @ResponseStatus(HttpStatus.NOT_FOUND)
+    public String handleNoSuchElement(NoSuchElementException ex, HttpServletRequest request) {
+        logger.warn("Resource not found: {}", ex.getMessage());
+        request.setAttribute(RequestDispatcher.ERROR_STATUS_CODE, HttpStatus.NOT_FOUND.value());
+        return "forward:/error/404.html";
     }
 
-    @ExceptionHandler(DataIntegrityViolationException.class)
-    public String handleDataIntegrityViolation(DataIntegrityViolationException ex, Model model) {
-        logger.error("Data integrity violation", ex);
-        model.addAttribute("error", "A data validation error occurred. Please check your input.");
+
+    @ExceptionHandler({DataIntegrityViolationException.class, IllegalArgumentException.class})
+    @ResponseStatus(HttpStatus.BAD_REQUEST)
+    public String handleBadRequestExceptions(Exception ex, Model model) {
+        logger.warn("Bad request - {}: {}", ex.getClass().getSimpleName(), ex.getMessage());
+        model.addAttribute("error", "Invalid request: " + ex.getMessage());
         return "error/400";
     }
 
-    @ExceptionHandler(IllegalArgumentException.class)
-    public String handleIllegalArgument(IllegalArgumentException ex, Model model) {
-        logger.warn("Invalid argument", ex);
-        model.addAttribute("error", "Invalid input provided.");
+
+    @ExceptionHandler(ConstraintViolationException.class)
+    @ResponseStatus(HttpStatus.BAD_REQUEST)
+    public String handleConstraintViolation(ConstraintViolationException ex, Model model) {
+        String errorMessage = ex.getConstraintViolations()
+                .stream()
+                .map(violation -> violation.getPropertyPath() + ": " + violation.getMessage())
+                .collect(Collectors.joining(", "));
+
+        logger.warn("Constraint violation: {}", errorMessage);
+        model.addAttribute("error", "Invalid input: " + errorMessage);
         return "error/400";
     }
 
+
     @ExceptionHandler(TemplateException.class)
-    public String handleTemplateException(TemplateException ex, Model model) {
-        logger.error("Template rendering failed", ex);
-        model.addAttribute("error", "A technical error occurred while rendering the page.");
-        return "error/500";
+    @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
+    public String handleTemplateException(TemplateException ex, HttpServletRequest request) {
+        logger.error("Template rendering failed: {}", ex.getMessage(), ex);
+        // NEVER return a JTE template here - use static HTML only
+        request.setAttribute(RequestDispatcher.ERROR_STATUS_CODE, HttpStatus.INTERNAL_SERVER_ERROR.value());
+        return "forward:/error/500.html";
     }
 
     @ExceptionHandler(Exception.class)
-    public String handleGeneralException(Exception ex, Model model) {
-        logger.error("Unexpected error occurred", ex);
-        model.addAttribute("error", "Something went wrong. Please try again later.");
-        return "error/500";
+    @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
+    public String handleGeneralException(Exception ex, HttpServletRequest request) {
+        logger.error("Unexpected error occurred - {}: {}",
+                ex.getClass().getSimpleName(), ex.getMessage(), ex);
+        // NEVER return a JTE template here - use static HTML only
+        request.setAttribute(RequestDispatcher.ERROR_STATUS_CODE, HttpStatus.INTERNAL_SERVER_ERROR.value());
+        return "forward:/error/500.html";
     }
-}
+}
\ No newline at end of file
diff --git a/web-backend/src/main/java/com/statusneo/vms/model/Visitor.java b/web-backend/src/main/java/com/statusneo/vms/model/Visitor.java
index 9e617bb..05dbed3 100644
--- a/web-backend/src/main/java/com/statusneo/vms/model/Visitor.java
+++ b/web-backend/src/main/java/com/statusneo/vms/model/Visitor.java
@@ -34,6 +34,8 @@
  */
 package com.statusneo.vms.model;
 
+import java.time.LocalDateTime;
+
 import jakarta.persistence.Column;
 import jakarta.persistence.Entity;
 import jakarta.persistence.GeneratedValue;
@@ -43,11 +45,9 @@
 import jakarta.persistence.ManyToOne;
 import jakarta.persistence.PrePersist;
 import jakarta.persistence.Table;
-import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.Pattern;
 
-import java.time.LocalDateTime;
-
 /**
  * Represents a visitor in the Visitor Management System.
  * This entity stores information about individuals visiting the premises.
@@ -56,9 +56,6 @@
 @Table(name = "visitor")
 public class Visitor {
 
-    private static final String PHONE_NUMBER_REGEX = "^\\d{10}$";
-
-
     /**
      * Unique identifier for the visitor.
      */
@@ -69,29 +66,27 @@ public class Visitor {
     /**
      * Full name of the visitor.
      */
-    private String name;
+    public String name;
 
-    /**
-     * Contact phone number of the visitor.
-     */
-    @NotNull(message = "Phone number cannot be null")
-    @Pattern(regexp = "^\\d{10}$", message = "Phone number must be exactly 10 digits")
-    private String phoneNumber;
+    @Column(name = "phone_number")
+    @NotBlank(message = "Phone number is required")
+    @Pattern(regexp = "^[0-9]+$", message = "Phone number must contain only digits")
+    public String phoneNumber;
 
     /**
      * Email address of the visitor, used for communication and OTP verification.
      */
-    private String email;
+    public String email;
 
     /**
      * Physical address of the visitor.
      */
-    private String address;
+    public String address;
 
     /**
      * Company of the visitor.
      */
-    private String company;
+    public String company;
 
     /**
      * Path to the visitor's profile picture stored in the system.
@@ -99,9 +94,8 @@ public class Visitor {
     @Column(name = "picture_path")
     private String picturePath;
 
-
     @Column(name = "laptop_number")
-    private String laptop;
+    public String laptop;
 
     @ManyToOne
     @JoinColumn(name = "host_id", referencedColumnName = "id")
@@ -125,11 +119,11 @@ public Visitor() {
     /**
      * Constructs a new Visitor with the specified details.
      *
-     * @param id The unique identifier
-     * @param name The visitor's full name
+     * @param id          The unique identifier
+     * @param name        The visitor's full name
      * @param phoneNumber The visitor's phone number
-     * @param email The visitor's email address
-     * @param address The visitor's physical address
+     * @param email       The visitor's email address
+     * @param address     The visitor's physical address
      */
     public Visitor(Long id, String name, String phoneNumber, String email, String address) {
         this.id = id;
@@ -154,7 +148,7 @@ protected void onCreate() {
         this.createdAt = LocalDateTime.now();
     }
 
-    public LocalDateTime getCreatedAt(){
+    public LocalDateTime getCreatedAt() {
         return createdAt;
     }
 
@@ -181,6 +175,7 @@ public String getPhoneNumber() {
     public void setPhoneNumber(String phoneNumber) {
         this.phoneNumber = phoneNumber;
     }
+
     public String getEmail() {
         return email;
     }
@@ -208,6 +203,7 @@ public void setCompany(String company) {
     public String getPicturePath() {
         return picturePath;
     }
+
     public void setPicturePath(String picturePath) {
         this.picturePath = picturePath;
     }
@@ -220,7 +216,6 @@ public void setLaptop(String laptop) {
         this.laptop = laptop;
     }
 
-
     @Override
     public String toString() {
         return "Visitor{" +
diff --git a/web-backend/src/main/jte/error/400.jte b/web-backend/src/main/jte/error/400.jte
index f922a54..4cea066 100644
--- a/web-backend/src/main/jte/error/400.jte
+++ b/web-backend/src/main/jte/error/400.jte
@@ -1,8 +1,94 @@
-<html>
-<head><title>Bad Request</title></head>
+@import org.springframework.validation.FieldError
+@import java.util.List
+
+@param String error = "Bad Request"
+@param List<FieldError> fieldErrors = null
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>400 - Bad Request</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 600px;
+            margin: 50px auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .error-container {
+            background: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #d9534f;
+            margin-top: 0;
+        }
+        .error-message {
+            color: #333;
+            margin: 20px 0;
+            padding: 15px;
+            background: #f8d7da;
+            border: 1px solid #f5c6cb;
+            border-radius: 4px;
+        }
+        .field-errors {
+            list-style: none;
+            padding: 0;
+            margin: 20px 0;
+        }
+        .field-errors li {
+            padding: 10px;
+            margin: 5px 0;
+            background: #fff3cd;
+            border: 1px solid #ffeaa7;
+            border-radius: 4px;
+        }
+        .field-name {
+            font-weight: bold;
+            color: #856404;
+        }
+        a {
+            display: inline-block;
+            margin-top: 20px;
+            color: #0275d8;
+            text-decoration: none;
+            padding: 10px 20px;
+            background: #e7f3ff;
+            border-radius: 4px;
+            transition: background 0.2s;
+        }
+        a:hover {
+            background: #cce5ff;
+            text-decoration: none;
+        }
+    </style>
+</head>
 <body>
-<h2>Invalid Request</h2>
-<p>@error</p>
-<a href="/">Back to Home</a>
+<div class="error-container">
+    <h1>400 - Bad Request</h1>
+
+    <div class="error-message">
+        ${error}
+    </div>
+
+    @if(fieldErrors != null && !fieldErrors.isEmpty())
+        <h3>Validation Errors:</h3>
+        <ul class="field-errors">
+            @for(FieldError fieldError : fieldErrors)
+                <li>
+                    <span class="field-name">${fieldError.getField()}</span>:
+                    ${fieldError.getDefaultMessage()}
+                </li>
+            @endfor
+        </ul>
+    @endif
+
+    <a href="/">Return to Home</a>
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/web-backend/src/main/jte/error/404.jte b/web-backend/src/main/jte/error/404.jte
deleted file mode 100644
index f51a3e6..0000000
--- a/web-backend/src/main/jte/error/404.jte
+++ /dev/null
@@ -1,8 +0,0 @@
-<html>
-<head><title>404 Not Found</title></head>
-<body>
-<h2>Oops! Page Not Found</h2>
-<p>@error</p>
-<a href="/">Back to Home</a>
-</body>
-</html>
\ No newline at end of file
diff --git a/web-backend/src/main/jte/error/500.jte b/web-backend/src/main/jte/error/500.jte
deleted file mode 100644
index ead84d9..0000000
--- a/web-backend/src/main/jte/error/500.jte
+++ /dev/null
@@ -1,8 +0,0 @@
-<html>
-<head><title>Server Error</title></head>
-<body>
-<h2>Internal Server Error</h2>
-<p>@error</p>
-<a href="/">Back to Home</a>
-</body>
-</html>
\ No newline at end of file
diff --git a/web-backend/src/main/jte/index.jte b/web-backend/src/main/jte/index.jte
index f99b330..6418a89 100644
--- a/web-backend/src/main/jte/index.jte
+++ b/web-backend/src/main/jte/index.jte
@@ -1,3 +1,10 @@
+@import org.springframework.validation.FieldError
+@import java.util.List
+@import com.statusneo.vms.model.Visitor
+
+@param Visitor visitor = new com.statusneo.vms.model.Visitor()
+@param List<FieldError> fieldErrors = null
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -24,8 +31,25 @@
 
     <!-- Main Form -->
     <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
-        <!-- Modal Container -->
-        <div id="modal-container"></div>
+
+        <!-- Validation Error Summary -->
+        @if(fieldErrors != null && !fieldErrors.isEmpty())
+            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+                <div class="flex items-start">
+                    <svg class="w-5 h-5 text-red-600 mt-0.5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                    </svg>
+                    <div class="flex-1">
+                        <h3 class="text-sm font-semibold text-red-800 mb-2">Please correct the following errors:</h3>
+                        <ul class="text-sm text-red-700 space-y-1">
+                            @for(FieldError error : fieldErrors)
+                                <li><strong>${error.getField()}</strong>: ${error.getDefaultMessage()}</li>
+                            @endfor
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        @endif
 
         <form id="visitor-form"
               hx-post="/register"
@@ -49,8 +73,9 @@
                         <input type="text"
                                id="name"
                                name="name"
+                               value="${visitor.name != null ? visitor.name : ""}"
                                required
-                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                               class="w-full px-4 py-3 border ${fieldErrors != null && fieldErrors.stream().anyMatch(e -> e.getField().equals("name")) ? "border-red-500" : "border-gray-300"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                placeholder="Enter your full name">
                     </div>
 
@@ -64,8 +89,9 @@
                         <input type="email"
                                id="email"
                                name="email"
+                               value="${visitor.email != null ? visitor.email : ""}"
                                required
-                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                               class="w-full px-4 py-3 border ${fieldErrors != null && fieldErrors.stream().anyMatch(e -> e.getField().equals("email")) ? "border-red-500" : "border-gray-300"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                placeholder="Enter your email address">
                     </div>
 
@@ -79,9 +105,27 @@
                         <input type="tel"
                                id="phone"
                                name="phoneNumber"
+                               value="${visitor.phoneNumber != null ? visitor.phoneNumber : ""}"
                                required
-                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
-                               placeholder="Enter your phone number">
+                               pattern="^\d{10}$"
+                               class="w-full px-4 py-3 border ${fieldErrors != null && fieldErrors.stream().anyMatch(e -> e.getField().equals("phoneNumber")) ? "border-red-500" : "border-gray-300"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                               placeholder="Enter your 10-digit phone number"
+                               oninput="validatePhoneNumber(this)"
+                               onkeypress="return isNumberKey(event)">
+
+                        <!-- Real-time error message -->
+                        <div id="phone-error" class="text-sm text-red-600 mt-1 hidden">
+                            Please enter numeric value only
+                        </div>
+
+                        <!-- Backend validation errors (keep existing) -->
+                        @if(fieldErrors != null)
+                            @for(FieldError error : fieldErrors)
+                                @if(error.getField().equals("phoneNumber"))
+                                    <p class="text-sm text-red-600 mt-1">${error.getDefaultMessage()}</p>
+                                @endif
+                            @endfor
+                        @endif
                     </div>
 
                     <div class="space-y-2">
@@ -94,8 +138,9 @@
                         <input type="text"
                                id="company"
                                name="company"
+                               value="${visitor.company != null ? visitor.company : ""}"
                                required
-                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                               class="w-full px-4 py-3 border ${fieldErrors != null && fieldErrors.stream().anyMatch(e -> e.getField().equals("company")) ? "border-red-500" : "border-gray-300"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                placeholder="Enter your company name">
                     </div>
 
@@ -109,6 +154,7 @@
                         <input type="text"
                                id="laptop"
                                name="laptop"
+                               value="${visitor.laptop != null ? visitor.laptop : ""}"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                placeholder="Enter your laptop number (optional)">
                     </div>
@@ -125,7 +171,7 @@
                                    id="host-search"
                                    name="hostSearch"
                                    autocomplete="off"
-                                   hx-get="/search-employees"
+                                   hx-get="/api/hosts/search"
                                    hx-trigger="keyup changed delay:300ms"
                                    hx-target="#host-results"
                                    hx-indicator="#search-spinner"
@@ -135,7 +181,8 @@
                             <svg class="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                             </svg>
-                            <div id="search-spinner" class="htmx-indicator absolute right-10 top-1/2 transform -translate-y-1/2">
+                            <!-- hidden by default so it doesn't take up space; HTMX will toggle via hx-indicator -->
+                            <div id="search-spinner" class="hidden absolute right-10 top-1/2 transform -translate-y-1/2 h-5 w-5">
                                 <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -155,13 +202,17 @@
                 <div class="flex justify-center pt-4">
                     <button type="submit"
                             id="send-otp-btn"
-                            disabled class="px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors min-w-48 text-lg relative flex items-center justify-center">                        <span class="htmx-indicator:hidden">Send OTP</span>
-                        <span class="htmx-indicator absolute inset-0 flex items-center justify-center">
-                            <svg class="inline animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            disabled
+                            class="px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors min-w-48 text-lg relative flex items-center justify-center">
+                        <!-- centered label -->
+                        <span class="label w-full text-center">Send OTP</span>
+                        <!-- spinner overlay, hidden by default so it doesn't occupy layout -->
+                        <span id="button-spinner" class="hidden absolute inset-0 flex items-center justify-center bg-blue-600/60 rounded-lg">
+                            <svg class="inline animate-spin h-5 w-5 mr-2 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                             </svg>
-                            Sending...
+                            <span class="text-white font-semibold">Sending...</span>
                         </span>
                     </button>
                 </div>
@@ -175,8 +226,6 @@
     </div>
 </div>
 
-<!-- Removed a small duplicate autocomplete handler here in favor of the more complete handlers below -->
-
 <script>
     // Form validation (host is not mandatory)
     function validateForm() {
@@ -185,7 +234,10 @@
         const phone = document.getElementById('phone').value;
         const company = document.getElementById('company').value;
 
-        const isValid = name && email && phone && company;
+        // Check if phone contains only numbers
+        const isPhoneValid = /^\d*$/.test(phone);
+
+        const isValid = name && email && phone && company && isPhoneValid;
         document.getElementById('send-otp-btn').disabled = !isValid;
     }
 
@@ -197,6 +249,78 @@
 </script>
 
 <script>
+    // Phone number validation functions
+    function isNumberKey(evt) {
+        const charCode = (evt.which) ? evt.which : evt.keyCode;
+
+        // Allow: backspace, delete, tab, escape, enter
+        if (charCode == 8 || charCode == 46 || charCode == 9 || charCode == 27 || charCode == 13) {
+            return true;
+        }
+
+        // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
+        if ((charCode == 65 || charCode == 67 || charCode == 86 || charCode == 88) && (evt.ctrlKey || evt.metaKey)) {
+            return true;
+        }
+
+        // Allow: home, end, left, right
+        if (charCode >= 35 && charCode <= 39) {
+            return true;
+        }
+
+        // Disallow: non-numeric characters
+        if (charCode < 48 || charCode > 57) {
+            showPhoneError();
+            return false;
+        }
+
+        hidePhoneError();
+        return true;
+    }
+
+    function validatePhoneNumber(input) {
+        const phoneError = document.getElementById('phone-error');
+        const value = input.value;
+
+        // Remove any non-numeric characters that might have been pasted
+        const numericValue = value.replace(/[^0-9]/g, '');
+        if (value !== numericValue) {
+            input.value = numericValue;
+        }
+
+        // Show error if we had to remove non-numeric characters
+        if (value !== numericValue) {
+            showPhoneError();
+        } else {
+            hidePhoneError();
+        }
+
+        // Update form validation
+        validateForm();
+    }
+
+    function showPhoneError() {
+        const phoneError = document.getElementById('phone-error');
+        const phoneInput = document.getElementById('phone');
+
+        if (phoneError && phoneInput) {
+            phoneError.classList.remove('hidden');
+            phoneInput.classList.add('border-red-500');
+            phoneInput.classList.remove('border-gray-300');
+        }
+    }
+
+    function hidePhoneError() {
+        const phoneError = document.getElementById('phone-error');
+        const phoneInput = document.getElementById('phone');
+
+        if (phoneError && phoneInput) {
+            phoneError.classList.add('hidden');
+            phoneInput.classList.remove('border-red-500');
+            phoneInput.classList.add('border-gray-300');
+        }
+    }
+
     // Add keyboard selection and HTMX guards for host autocomplete
     // Prevent HTMX requests on Enter and prevent empty searches
     document.addEventListener("htmx:configRequest", (event) => {
@@ -214,35 +338,38 @@
         if (!input || input.value.trim() === '') {
             event.preventDefault();
             if (results) results.style.display = 'none';
+            // ensure spinner hidden if no request
+            const spinner = document.getElementById('search-spinner');
+            if (spinner) spinner.classList.add('hidden');
         }
     });
 
     // When HTMX swaps in host results, show the dropdown and (re)attach handlers
     document.body.addEventListener('htmx:afterSwap', function(event) {
-        // If the swap targeted host-results, ensure it's visible and attach click handlers
         try {
             if (event.detail.target.id === 'host-results') {
                 const box = document.getElementById('host-results');
                 if (box) {
                     box.classList.remove('hidden');
                     box.style.display = 'block';
-                    const items = box.querySelectorAll('li');
-                    items.forEach(item => {
-                        // If server didn't attach onclick, attach a safe handler
-                        if (!item.onclick) {
-                            item.addEventListener('click', function() {
-                                const name = this.dataset.name || this.textContent.trim();
-                                const id = this.dataset.id || this.getAttribute('data-id');
-                                selectEmployee(name, id);
-                            });
-                        }
-                    });
-                }
-            }
-        } catch (e) {
-            // swallow any errors to avoid breaking other htmx swaps
-            console.error(e);
-        }
+                    // show spinner only while request was in-flight; hide after swap
+                    const spinner = document.getElementById('search-spinner');
+                    if (spinner) spinner.classList.add('hidden');
+                     const items = box.querySelectorAll('li');
+                     items.forEach(item => {
+                         if (!item.onclick) {
+                             item.addEventListener('click', function() {
+                                 const name = this.dataset.name || this.textContent.trim();
+                                 const id = this.dataset.id || this.getAttribute('data-id');
+                                 selectEmployee(name, id);
+                             });
+                         }
+                     });
+                 }
+             }
+         } catch (e) {
+             console.error(e);
+         }
     });
 
     // Hide dropdown immediately on click swaps to avoid flicker
@@ -257,7 +384,6 @@
         }
     });
 
-    // Make clicking a suggestion populate the input and hidden field
     function selectEmployee(name, id) {
         const input = document.getElementById('host-search');
         const hidden = document.getElementById('host');
@@ -270,7 +396,7 @@
         }
     }
 
-    // Keyboard navigation for host-search (arrow keys + enter + escape)
+    // Keyboard navigation for host-search
     const hostSearch = document.getElementById('host-search');
     if (hostSearch) {
         hostSearch.addEventListener('keydown', (event) => {
@@ -319,7 +445,7 @@
         });
     }
 
-    // Add minimal highlight style if not present (ensures keyboard nav is visible)
+    // Add minimal highlight style if not present
     (function ensureHighlightStyle(){
         const id = 'host-highlight-style';
         if (!document.getElementById(id)) {
diff --git a/web-backend/src/main/resources/application.yml b/web-backend/src/main/resources/application.yml
index f283eae..d3909d5 100644
--- a/web-backend/src/main/resources/application.yml
+++ b/web-backend/src/main/resources/application.yml
@@ -4,11 +4,15 @@ spring:
   docker:
     compose:
       lifecycle-management: start_only
-
   jpa:
     hibernate:
       ddl-auto: none
     show-sql: true
+  mvc:
+    static-path-pattern: /**
+  web:
+    resources:
+      static-locations: classpath:/static/
   security:
     oauth2:
       client:
@@ -26,6 +30,12 @@ spring:
     baseline-on-migrate: true
     locations: classpath:db/migration
 
+server:
+  error:
+    whitelabel:
+      enabled: false
+    path: /error
+
 visitor:
   system:
     notification:
@@ -40,6 +50,7 @@ visitor:
 gg:
   jte:
     developmentMode: true
+    precompile: false
 
 vms:
   system-email: test@email.com
diff --git a/web-backend/src/main/resources/static/error/400.html b/web-backend/src/main/resources/static/error/400.html
new file mode 100644
index 0000000..f62a3b2
--- /dev/null
+++ b/web-backend/src/main/resources/static/error/400.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>400 - Bad Request</title>
+    <meta charset="UTF-8">
+    <style>
+        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
+        .container { max-width: 500px; margin: 0 auto; }
+        h1 { color: #d9534f; }
+        a { color: #0275d8; text-decoration: none; }
+        a:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1>400 - Bad Request</h1>
+    <p>Invalid request. Please check your input and try again.</p>
+    <a href="/">Return to Home</a>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/web-backend/src/main/resources/static/error/404.html b/web-backend/src/main/resources/static/error/404.html
new file mode 100644
index 0000000..53486fb
--- /dev/null
+++ b/web-backend/src/main/resources/static/error/404.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>404 - Page Not Found</title>
+    <meta charset="UTF-8">
+    <style>
+        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
+        .container { max-width: 500px; margin: 0 auto; }
+        h1 { color: #f0ad4e; }
+        a { color: #0275d8; text-decoration: none; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1>404 - Page Not Found</h1>
+    <p>The page you're looking for doesn't exist.</p>
+    <a href="/">Return to Home</a>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/web-backend/src/main/resources/static/error/500.html b/web-backend/src/main/resources/static/error/500.html
new file mode 100644
index 0000000..6b7ead0
--- /dev/null
+++ b/web-backend/src/main/resources/static/error/500.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>500 - Server Error</title>
+    <meta charset="UTF-8">
+    <style>
+        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
+        .container { max-width: 500px; margin: 0 auto; }
+        h1 { color: #d9534f; }
+        a { color: #0275d8; text-decoration: none; }
+        a:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1>500 - Server Error</h1>
+    <p>Something went wrong on our end. Please try again later.</p>
+    <a href="/">Return to Home</a>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/web-backend/src/main/resources/templates/index-th.html b/web-backend/src/main/resources/templates/index-th.html
index a36711b..2fe4ec9 100644
--- a/web-backend/src/main/resources/templates/index-th.html
+++ b/web-backend/src/main/resources/templates/index-th.html
@@ -75,7 +75,14 @@ <h1 class="text-3xl font-bold text-gray-800 mb-2">Visitor Check-in</h1>
                                required
                                th:value="${visitor?.phoneNumber}"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
-                               placeholder="Enter your phone number">
+                               placeholder="Enter your phone number"
+                               oninput="validatePhoneNumber(this)"
+                               onkeypress="return isNumberKey(event)">
+
+                        <!-- Real-time error message -->
+                        <div id="phone-error" class="text-sm text-red-600 mt-1 hidden">
+                            Please enter numeric value only
+                        </div>
                     </div>
 
                     <!-- Company Field -->
@@ -153,6 +160,100 @@ <h1 class="text-3xl font-bold text-gray-800 mb-2">Visitor Check-in</h1>
     </div>
 </div>
 
+<script>
+    // Phone number validation functions
+    function isNumberKey(evt) {
+        const charCode = (evt.which) ? evt.which : evt.keyCode;
+
+        // Allow: backspace, delete, tab, escape, enter
+        if (charCode == 8 || charCode == 46 || charCode == 9 || charCode == 27 || charCode == 13) {
+            return true;
+        }
+
+        // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
+        if ((charCode == 65 || charCode == 67 || charCode == 86 || charCode == 88) && (evt.ctrlKey || evt.metaKey)) {
+            return true;
+        }
+
+        // Allow: home, end, left, right
+        if (charCode >= 35 && charCode <= 39) {
+            return true;
+        }
+
+        // Disallow: non-numeric characters
+        if (charCode < 48 || charCode > 57) {
+            showPhoneError();
+            return false;
+        }
+
+        hidePhoneError();
+        return true;
+    }
+
+    function validatePhoneNumber(input) {
+        const phoneError = document.getElementById('phone-error');
+        const value = input.value;
+
+        // Remove any non-numeric characters that might have been pasted
+        const numericValue = value.replace(/[^0-9]/g, '');
+        if (value !== numericValue) {
+            input.value = numericValue;
+        }
+
+        // Show error if we had to remove non-numeric characters
+        if (value !== numericValue) {
+            showPhoneError();
+        } else {
+            hidePhoneError();
+        }
+
+        // Update form validation
+        validateForm();
+    }
+
+    function showPhoneError() {
+        const phoneError = document.getElementById('phone-error');
+        const phoneInput = document.getElementById('phone');
+
+        if (phoneError && phoneInput) {
+            phoneError.classList.remove('hidden');
+            phoneInput.classList.add('border-red-500');
+            phoneInput.classList.remove('border-gray-300');
+        }
+    }
+
+    function hidePhoneError() {
+        const phoneError = document.getElementById('phone-error');
+        const phoneInput = document.getElementById('phone');
+
+        if (phoneError && phoneInput) {
+            phoneError.classList.add('hidden');
+            phoneInput.classList.remove('border-red-500');
+            phoneInput.classList.add('border-gray-300');
+        }
+    }
+
+    // Form validation (host is not mandatory)
+    function validateForm() {
+        const name = document.getElementById('name').value;
+        const email = document.getElementById('email').value;
+        const phone = document.getElementById('phone').value;
+        const company = document.getElementById('company').value;
+
+        // Check if phone contains only numbers
+        const isPhoneValid = /^\d*$/.test(phone);
+
+        const isValid = name && email && phone && company && isPhoneValid;
+        document.getElementById('send-otp-btn').disabled = !isValid;
+    }
+
+    document.querySelectorAll('input[required]').forEach(input => {
+        input.addEventListener('input', validateForm);
+    });
+
+    validateForm();
+</script>
+
 <script>
     // Handle host selection from dropdown
     document.body.addEventListener('htmx:afterSwap', function(event) {
@@ -178,52 +279,6 @@ <h1 class="text-3xl font-bold text-gray-800 mb-2">Visitor Check-in</h1>
         document.getElementById('host-results').classList.add('hidden');
     }
 </script>
-<script>
-    // Form validation (host is not mandatory)
-    function validateForm() {
-        const name = document.getElementById('name').value;
-        const email = document.getElementById('email').value;
-        const phone = document.getElementById('phone').value;
-        const company = document.getElementById('company').value;
 
-        const isValid = name && email && phone && company;
-        document.getElementById('send-otp-btn').disabled = !isValid;
-    }
-
-    document.querySelectorAll('input[required]').forEach(input => {
-        input.addEventListener('input', validateForm);
-    });
-
-    validateForm();
-</script>
-
-</body>
-</html>
 </body>
-</html>
-
-<!--
-    SEPARATE FILE: host-search-results.html (Fragment for HTMX response)
-    Endpoint: GET /api/hosts/search?hostSearch={query}
--->
-<!--
-
--->
-
-<!--
-    SEPARATE FILE: otp-verification-form.html (Fragment for HTMX response after Send OTP)
-    Endpoint: POST /api/visitor/send-otp
-    Response: Returns this fragment to replace #form-content
--->
-<!--
-
--->
-
-<!--
-    SEPARATE FILE: success-message.html (Fragment for HTMX response after verification)
-    Endpoint: POST /api/visitor/verify-otp
-    Response: Returns this fragment to replace entire form
--->
-<!--
-
--->
\ No newline at end of file
+</html>
\ No newline at end of file