diff --git a/api/CourseRegistration.API/Controllers/CertificatesController.cs b/api/CourseRegistration.API/Controllers/CertificatesController.cs
new file mode 100644
index 0000000..93251f9
--- /dev/null
+++ b/api/CourseRegistration.API/Controllers/CertificatesController.cs
@@ -0,0 +1,238 @@
+using Microsoft.AspNetCore.Mvc;
+using CourseRegistration.Application.Services;
+using CourseRegistration.Application.DTOs;
+using Serilog;
+
+namespace CourseRegistration.API.Controllers;
+
+/// <summary>
+/// Controller for managing certificates
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+[Produces("application/json")]
+public class CertificatesController : ControllerBase
+{
+    private readonly ICertificateService _certificateService;
+
+    /// <summary>
+    /// Constructor
+    /// </summary>
+    /// <param name="certificateService">Certificate service</param>
+    public CertificatesController(ICertificateService certificateService)
+    {
+        _certificateService = certificateService;
+    }
+
+    /// <summary>
+    /// Search for certificates by various parameters
+    /// </summary>
+    /// <param name="studentId">Optional student ID</param>
+    /// <param name="studentName">Optional student name</param>
+    /// <param name="courseId">Optional course ID</param>
+    /// <param name="certificateNumber">Optional certificate number</param>
+    /// <returns>List of certificates matching the search criteria</returns>
+    /// <response code="200">Returns the list of certificates</response>
+    /// <response code="400">If the request parameters are invalid</response>
+    [HttpGet]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    public async Task<ActionResult<IEnumerable<CertificateDto>>> SearchCertificates(
+        [FromQuery] Guid? studentId = null,
+        [FromQuery] string? studentName = null,
+        [FromQuery] Guid? courseId = null,
+        [FromQuery] string? certificateNumber = null)
+    {
+        try
+        {
+            // Search by certificate number first (most specific)
+            if (!string.IsNullOrWhiteSpace(certificateNumber))
+            {
+                var certificate = await _certificateService.GetCertificateByCertificateNumberAsync(certificateNumber);
+                return Ok(certificate != null ? new[] { certificate } : Array.Empty<CertificateDto>());
+            }
+
+            // Search by student ID
+            if (studentId.HasValue)
+            {
+                var certificates = await _certificateService.GetCertificatesByStudentIdAsync(studentId.Value);
+                return Ok(certificates);
+            }
+
+            // Search by student name
+            if (!string.IsNullOrWhiteSpace(studentName))
+            {
+                var certificates = await _certificateService.GetCertificatesByStudentNameAsync(studentName);
+                return Ok(certificates);
+            }
+
+            // Search by course ID
+            if (courseId.HasValue)
+            {
+                var certificates = await _certificateService.GetCertificatesByCourseIdAsync(courseId.Value);
+                return Ok(certificates);
+            }
+
+            // If no search parameters provided, return empty list
+            Log.Warning("Certificate search called without any search parameters");
+            return Ok(Array.Empty<CertificateDto>());
+        }
+        catch (Exception ex)
+        {
+            Log.Error(ex, "Error searching for certificates");
+            return StatusCode(500, new { message = "An error occurred while searching for certificates" });
+        }
+    }
+
+    /// <summary>
+    /// Get a specific certificate by ID
+    /// </summary>
+    /// <param name="id">Certificate ID</param>
+    /// <returns>Certificate details</returns>
+    /// <response code="200">Returns the certificate</response>
+    /// <response code="404">If the certificate is not found</response>
+    [HttpGet("{id}")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public async Task<ActionResult<CertificateDto>> GetCertificate(Guid id)
+    {
+        try
+        {
+            var certificate = await _certificateService.GetCertificateByIdAsync(id);
+
+            if (certificate == null)
+            {
+                Log.Information("Certificate not found: {CertificateId}", id);
+                return NotFound(new { message = $"Certificate with ID {id} not found" });
+            }
+
+            return Ok(certificate);
+        }
+        catch (Exception ex)
+        {
+            Log.Error(ex, "Error retrieving certificate {CertificateId}", id);
+            return StatusCode(500, new { message = "An error occurred while retrieving the certificate" });
+        }
+    }
+
+    /// <summary>
+    /// Get certificates for a specific student
+    /// </summary>
+    /// <param name="studentId">Student ID</param>
+    /// <returns>List of certificates for the student</returns>
+    /// <response code="200">Returns the list of certificates</response>
+    [HttpGet("student/{studentId}")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    public async Task<ActionResult<IEnumerable<CertificateDto>>> GetCertificatesByStudent(Guid studentId)
+    {
+        try
+        {
+            var certificates = await _certificateService.GetCertificatesByStudentIdAsync(studentId);
+            return Ok(certificates);
+        }
+        catch (Exception ex)
+        {
+            Log.Error(ex, "Error retrieving certificates for student {StudentId}", studentId);
+            return StatusCode(500, new { message = "An error occurred while retrieving certificates" });
+        }
+    }
+
+    /// <summary>
+    /// Get certificates for a specific course
+    /// </summary>
+    /// <param name="courseId">Course ID</param>
+    /// <returns>List of certificates for the course</returns>
+    /// <response code="200">Returns the list of certificates</response>
+    [HttpGet("course/{courseId}")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    public async Task<ActionResult<IEnumerable<CertificateDto>>> GetCertificatesByCourse(Guid courseId)
+    {
+        try
+        {
+            var certificates = await _certificateService.GetCertificatesByCourseIdAsync(courseId);
+            return Ok(certificates);
+        }
+        catch (Exception ex)
+        {
+            Log.Error(ex, "Error retrieving certificates for course {CourseId}", courseId);
+            return StatusCode(500, new { message = "An error occurred while retrieving certificates" });
+        }
+    }
+
+    /// <summary>
+    /// Verify a certificate by its ID or certificate number
+    /// </summary>
+    /// <param name="identifier">Certificate ID or certificate number</param>
+    /// <returns>Certificate verification result</returns>
+    /// <response code="200">Returns the certificate if valid</response>
+    /// <response code="404">If the certificate is not found</response>
+    [HttpGet("verify/{identifier}")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public async Task<ActionResult<CertificateDto>> VerifyCertificate(string identifier)
+    {
+        try
+        {
+            // Try to parse as GUID first
+            if (Guid.TryParse(identifier, out Guid certificateId))
+            {
+                var certificate = await _certificateService.GetCertificateByIdAsync(certificateId);
+                if (certificate != null)
+                {
+                    return Ok(certificate);
+                }
+            }
+
+            // Try as certificate number
+            var certByNumber = await _certificateService.GetCertificateByCertificateNumberAsync(identifier);
+            if (certByNumber != null)
+            {
+                return Ok(certByNumber);
+            }
+
+            Log.Information("Certificate verification failed for identifier: {Identifier}", identifier);
+            return NotFound(new { message = "Certificate not found or invalid" });
+        }
+        catch (Exception ex)
+        {
+            Log.Error(ex, "Error verifying certificate {Identifier}", identifier);
+            return StatusCode(500, new { message = "An error occurred while verifying the certificate" });
+        }
+    }
+
+    /// <summary>
+    /// Create a new certificate for a completed course
+    /// </summary>
+    /// <param name="createCertificateDto">Certificate creation data</param>
+    /// <returns>The created certificate</returns>
+    /// <response code="201">Returns the created certificate</response>
+    /// <response code="400">If the request data is invalid</response>
+    [HttpPost]
+    [ProducesResponseType(StatusCodes.Status201Created)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    public async Task<ActionResult<CertificateDto>> CreateCertificate([FromBody] CreateCertificateDto createCertificateDto)
+    {
+        try
+        {
+            if (!ModelState.IsValid)
+            {
+                return BadRequest(ModelState);
+            }
+
+            var certificate = await _certificateService.CreateCertificateAsync(createCertificateDto);
+            
+            Log.Information("Certificate created: {CertificateId} for student {StudentId}", 
+                certificate.CertificateId, certificate.StudentId);
+
+            return CreatedAtAction(
+                nameof(GetCertificate),
+                new { id = certificate.CertificateId },
+                certificate);
+        }
+        catch (Exception ex)
+        {
+            Log.Error(ex, "Error creating certificate");
+            return StatusCode(500, new { message = "An error occurred while creating the certificate" });
+        }
+    }
+}
diff --git a/api/CourseRegistration.API/Program.cs b/api/CourseRegistration.API/Program.cs
index e7e52e4..cd7e7ed 100644
--- a/api/CourseRegistration.API/Program.cs
+++ b/api/CourseRegistration.API/Program.cs
@@ -66,6 +66,7 @@
 builder.Services.AddScoped<IStudentService, StudentService>();
 builder.Services.AddScoped<ICourseService, CourseService>();
 builder.Services.AddScoped<IRegistrationService, RegistrationService>();
+builder.Services.AddScoped<ICertificateService, CertificateService>();
 
 // Register authorization services
 builder.Services.AddScoped<AuthorizationService>();
diff --git a/api/CourseRegistration.Application/DTOs/CertificateDto.cs b/api/CourseRegistration.Application/DTOs/CertificateDto.cs
index 906628b..87c401a 100644
--- a/api/CourseRegistration.Application/DTOs/CertificateDto.cs
+++ b/api/CourseRegistration.Application/DTOs/CertificateDto.cs
@@ -20,6 +20,8 @@ public class CertificateDto
     public DateTime CourseEndDate { get; set; }
     public string? Remarks { get; set; }
     public string? DigitalSignature { get; set; }
+    public string? VerificationUrl { get; set; }
+    public string? QRCodeData { get; set; }
 }
 
 /// <summary>
diff --git a/api/CourseRegistration.Application/Services/CertificateService.cs b/api/CourseRegistration.Application/Services/CertificateService.cs
index 01e20a5..a80afee 100644
--- a/api/CourseRegistration.Application/Services/CertificateService.cs
+++ b/api/CourseRegistration.Application/Services/CertificateService.cs
@@ -10,6 +10,9 @@ namespace CourseRegistration.Application.Services;
 /// </summary>
 public class CertificateService : ICertificateService
 {
+    // Thread-safe lock for certificate number generation
+    private static readonly object _lock = new object();
+    
     // In a real application, this would use a repository pattern with Entity Framework
     // For demo purposes, I'll use in-memory data
     private static readonly List<Certificate> _certificates = new();
@@ -121,6 +124,23 @@ public async Task<IEnumerable<CertificateDto>> GetCertificatesByStudentNameAsync
         return certificates.Select(MapToDto);
     }
 
+    public async Task<IEnumerable<CertificateDto>> GetCertificatesByCourseIdAsync(Guid courseId)
+    {
+        await Task.CompletedTask; // Simulate async operation
+        
+        var certificates = _certificates.Where(c => c.CourseId == courseId);
+        return certificates.Select(MapToDto);
+    }
+
+    public async Task<CertificateDto?> GetCertificateByCertificateNumberAsync(string certificateNumber)
+    {
+        await Task.CompletedTask; // Simulate async operation
+        
+        var certificate = _certificates.FirstOrDefault(c => 
+            c.CertificateNumber.Equals(certificateNumber, StringComparison.OrdinalIgnoreCase));
+        return certificate != null ? MapToDto(certificate) : null;
+    }
+
     public async Task<CertificateDto> CreateCertificateAsync(CreateCertificateDto createCertificateDto)
     {
         await Task.CompletedTask; // Simulate async operation
@@ -137,15 +157,22 @@ public async Task<CertificateDto> CreateCertificateAsync(CreateCertificateDto cr
             DigitalSignature = "DS-" + Guid.NewGuid().ToString()[..8]
         };
 
-        _certificates.Add(certificate);
+        lock (_lock)
+        {
+            _certificates.Add(certificate);
+        }
+        
         return MapToDto(certificate);
     }
 
     public string GenerateCertificateNumber()
     {
-        var year = DateTime.Now.Year;
-        var sequence = _certificates.Count + 1;
-        return $"CERT-{year}-{sequence:D3}";
+        lock (_lock)
+        {
+            var year = DateTime.Now.Year;
+            var sequence = _certificates.Count + 1;
+            return $"CERT-{year}-{sequence:D3}";
+        }
     }
 
     private CertificateDto MapToDto(Certificate certificate)
@@ -153,6 +180,10 @@ private CertificateDto MapToDto(Certificate certificate)
         var student = _students.FirstOrDefault(s => s.StudentId == certificate.StudentId);
         var course = _courses.FirstOrDefault(c => c.CourseId == certificate.CourseId);
 
+        // Generate verification URL and QR code data
+        var verificationUrl = $"https://courseregistration.app/api/certificates/verify/{certificate.CertificateNumber}";
+        var qrCodeData = $"{verificationUrl}|{certificate.CertificateId}|{certificate.DigitalSignature}";
+
         return new CertificateDto
         {
             CertificateId = certificate.CertificateId,
@@ -167,7 +198,9 @@ private CertificateDto MapToDto(Certificate certificate)
             CourseStartDate = course?.StartDate ?? DateTime.MinValue,
             CourseEndDate = course?.EndDate ?? DateTime.MinValue,
             Remarks = certificate.Remarks,
-            DigitalSignature = certificate.DigitalSignature
+            DigitalSignature = certificate.DigitalSignature,
+            VerificationUrl = verificationUrl,
+            QRCodeData = qrCodeData
         };
     }
 }
\ No newline at end of file
diff --git a/api/CourseRegistration.Application/Services/ICertificateService.cs b/api/CourseRegistration.Application/Services/ICertificateService.cs
index b1c733c..4b36c11 100644
--- a/api/CourseRegistration.Application/Services/ICertificateService.cs
+++ b/api/CourseRegistration.Application/Services/ICertificateService.cs
@@ -28,6 +28,20 @@ public interface ICertificateService
     /// <returns>List of certificates</returns>
     Task<IEnumerable<CertificateDto>> GetCertificatesByStudentNameAsync(string studentName);
 
+    /// <summary>
+    /// Get certificates by course ID
+    /// </summary>
+    /// <param name="courseId">Course ID</param>
+    /// <returns>List of certificates</returns>
+    Task<IEnumerable<CertificateDto>> GetCertificatesByCourseIdAsync(Guid courseId);
+
+    /// <summary>
+    /// Get certificate by certificate number
+    /// </summary>
+    /// <param name="certificateNumber">Certificate number</param>
+    /// <returns>Certificate details</returns>
+    Task<CertificateDto?> GetCertificateByCertificateNumberAsync(string certificateNumber);
+
     /// <summary>
     /// Create a new certificate
     /// </summary>
diff --git a/api/CourseRegistration.Tests/Services/CertificateServiceTests.cs b/api/CourseRegistration.Tests/Services/CertificateServiceTests.cs
new file mode 100644
index 0000000..14d3d03
--- /dev/null
+++ b/api/CourseRegistration.Tests/Services/CertificateServiceTests.cs
@@ -0,0 +1,269 @@
+using Xunit;
+using CourseRegistration.Application.Services;
+using CourseRegistration.Application.DTOs;
+using CourseRegistration.Domain.Enums;
+
+namespace CourseRegistration.Tests.Services;
+
+/// <summary>
+/// Unit tests for certificate services
+/// </summary>
+public class CertificateServiceTests
+{
+    private readonly ICertificateService _certificateService;
+
+    public CertificateServiceTests()
+    {
+        _certificateService = new CertificateService();
+    }
+
+    [Fact]
+    public async Task GetCertificateByIdAsync_WithValidId_ReturnsCertificate()
+    {
+        // Arrange
+        var createDto = new CreateCertificateDto
+        {
+            StudentId = Guid.Parse("11111111-1111-1111-1111-111111111111"),
+            CourseId = Guid.Parse("33333333-3333-3333-3333-333333333333"),
+            FinalGrade = Grade.A,
+            Remarks = "Test certificate"
+        };
+        var created = await _certificateService.CreateCertificateAsync(createDto);
+
+        // Act
+        var result = await _certificateService.GetCertificateByIdAsync(created.CertificateId);
+
+        // Assert
+        Assert.NotNull(result);
+        Assert.Equal(created.CertificateId, result.CertificateId);
+        Assert.Equal(createDto.StudentId, result.StudentId);
+        Assert.Equal(createDto.CourseId, result.CourseId);
+    }
+
+    [Fact]
+    public async Task GetCertificateByIdAsync_WithInvalidId_ReturnsNull()
+    {
+        // Arrange
+        var invalidId = Guid.NewGuid();
+
+        // Act
+        var result = await _certificateService.GetCertificateByIdAsync(invalidId);
+
+        // Assert
+        Assert.Null(result);
+    }
+
+    [Fact]
+    public async Task GetCertificatesByStudentIdAsync_ReturnsCorrectCertificates()
+    {
+        // Arrange
+        var studentId = Guid.Parse("11111111-1111-1111-1111-111111111111");
+
+        // Act
+        var result = await _certificateService.GetCertificatesByStudentIdAsync(studentId);
+
+        // Assert
+        Assert.NotNull(result);
+        var certificates = result.ToList();
+        Assert.NotEmpty(certificates);
+        Assert.All(certificates, c => Assert.Equal(studentId, c.StudentId));
+    }
+
+    [Fact]
+    public async Task GetCertificatesByStudentNameAsync_WithValidName_ReturnsCertificates()
+    {
+        // Arrange
+        var studentName = "John";
+
+        // Act
+        var result = await _certificateService.GetCertificatesByStudentNameAsync(studentName);
+
+        // Assert
+        Assert.NotNull(result);
+        var certificates = result.ToList();
+        Assert.NotEmpty(certificates);
+        Assert.All(certificates, c => Assert.Contains("John", c.StudentName));
+    }
+
+    [Fact]
+    public async Task GetCertificatesByStudentNameAsync_WithInvalidName_ReturnsEmpty()
+    {
+        // Arrange
+        var studentName = "NonExistentStudent";
+
+        // Act
+        var result = await _certificateService.GetCertificatesByStudentNameAsync(studentName);
+
+        // Assert
+        Assert.NotNull(result);
+        Assert.Empty(result);
+    }
+
+    [Fact]
+    public async Task GetCertificatesByCourseIdAsync_ReturnsCorrectCertificates()
+    {
+        // Arrange
+        var courseId = Guid.Parse("33333333-3333-3333-3333-333333333333");
+
+        // Act
+        var result = await _certificateService.GetCertificatesByCourseIdAsync(courseId);
+
+        // Assert
+        Assert.NotNull(result);
+        var certificates = result.ToList();
+        Assert.NotEmpty(certificates);
+        Assert.All(certificates, c => Assert.Equal(courseId, c.CourseId));
+    }
+
+    [Fact]
+    public async Task GetCertificateByCertificateNumberAsync_WithValidNumber_ReturnsCertificate()
+    {
+        // Arrange
+        var certificateNumber = "CERT-2024-001";
+
+        // Act
+        var result = await _certificateService.GetCertificateByCertificateNumberAsync(certificateNumber);
+
+        // Assert
+        Assert.NotNull(result);
+        Assert.Equal(certificateNumber, result.CertificateNumber);
+    }
+
+    [Fact]
+    public async Task GetCertificateByCertificateNumberAsync_WithInvalidNumber_ReturnsNull()
+    {
+        // Arrange
+        var certificateNumber = "INVALID-NUMBER";
+
+        // Act
+        var result = await _certificateService.GetCertificateByCertificateNumberAsync(certificateNumber);
+
+        // Assert
+        Assert.Null(result);
+    }
+
+    [Fact]
+    public async Task CreateCertificateAsync_CreatesNewCertificate()
+    {
+        // Arrange
+        var createDto = new CreateCertificateDto
+        {
+            StudentId = Guid.Parse("22222222-2222-2222-2222-222222222222"),
+            CourseId = Guid.Parse("44444444-4444-4444-4444-444444444444"),
+            FinalGrade = Grade.B,
+            Remarks = "Good work on all assignments"
+        };
+
+        // Act
+        var result = await _certificateService.CreateCertificateAsync(createDto);
+
+        // Assert
+        Assert.NotNull(result);
+        Assert.NotEqual(Guid.Empty, result.CertificateId);
+        Assert.Equal(createDto.StudentId, result.StudentId);
+        Assert.Equal(createDto.CourseId, result.CourseId);
+        Assert.Equal(createDto.FinalGrade, result.FinalGrade);
+        Assert.Equal(createDto.Remarks, result.Remarks);
+        Assert.NotNull(result.CertificateNumber);
+        Assert.NotNull(result.DigitalSignature);
+        Assert.NotNull(result.VerificationUrl);
+        Assert.NotNull(result.QRCodeData);
+    }
+
+    [Fact]
+    public void GenerateCertificateNumber_ReturnsValidFormat()
+    {
+        // Act
+        var certificateNumber = _certificateService.GenerateCertificateNumber();
+
+        // Assert
+        Assert.NotNull(certificateNumber);
+        Assert.StartsWith("CERT-", certificateNumber);
+        Assert.Contains(DateTime.Now.Year.ToString(), certificateNumber);
+    }
+
+    [Fact]
+    public async Task CreateCertificateAsync_GeneratesUniqueCertificateNumbers()
+    {
+        // Arrange
+        var createDto1 = new CreateCertificateDto
+        {
+            StudentId = Guid.Parse("11111111-1111-1111-1111-111111111111"),
+            CourseId = Guid.Parse("33333333-3333-3333-3333-333333333333"),
+            FinalGrade = Grade.A,
+            Remarks = "First certificate"
+        };
+        
+        var createDto2 = new CreateCertificateDto
+        {
+            StudentId = Guid.Parse("22222222-2222-2222-2222-222222222222"),
+            CourseId = Guid.Parse("44444444-4444-4444-4444-444444444444"),
+            FinalGrade = Grade.B,
+            Remarks = "Second certificate"
+        };
+
+        // Act
+        var certificate1 = await _certificateService.CreateCertificateAsync(createDto1);
+        var certificate2 = await _certificateService.CreateCertificateAsync(createDto2);
+
+        // Assert
+        Assert.NotEqual(certificate1.CertificateNumber, certificate2.CertificateNumber);
+    }
+
+    [Theory]
+    [InlineData(Grade.A)]
+    [InlineData(Grade.B)]
+    [InlineData(Grade.C)]
+    [InlineData(Grade.D)]
+    [InlineData(Grade.F)]
+    public async Task CreateCertificateAsync_WithDifferentGrades_CreatesSuccessfully(Grade grade)
+    {
+        // Arrange
+        var createDto = new CreateCertificateDto
+        {
+            StudentId = Guid.Parse("11111111-1111-1111-1111-111111111111"),
+            CourseId = Guid.Parse("33333333-3333-3333-3333-333333333333"),
+            FinalGrade = grade,
+            Remarks = $"Certificate with grade {grade}"
+        };
+
+        // Act
+        var result = await _certificateService.CreateCertificateAsync(createDto);
+
+        // Assert
+        Assert.NotNull(result);
+        Assert.Equal(grade, result.FinalGrade);
+    }
+
+    [Fact]
+    public async Task Certificate_HasVerificationUrl()
+    {
+        // Arrange
+        var studentId = Guid.Parse("11111111-1111-1111-1111-111111111111");
+
+        // Act
+        var certificates = await _certificateService.GetCertificatesByStudentIdAsync(studentId);
+        var certificate = certificates.FirstOrDefault();
+
+        // Assert
+        Assert.NotNull(certificate);
+        Assert.NotNull(certificate.VerificationUrl);
+        Assert.Contains("verify", certificate.VerificationUrl.ToLower());
+    }
+
+    [Fact]
+    public async Task Certificate_HasQRCodeData()
+    {
+        // Arrange
+        var studentId = Guid.Parse("11111111-1111-1111-1111-111111111111");
+
+        // Act
+        var certificates = await _certificateService.GetCertificatesByStudentIdAsync(studentId);
+        var certificate = certificates.FirstOrDefault();
+
+        // Assert
+        Assert.NotNull(certificate);
+        Assert.NotNull(certificate.QRCodeData);
+        Assert.Contains(certificate.CertificateId.ToString(), certificate.QRCodeData);
+    }
+}
diff --git a/frontend/certificate-styles.css b/frontend/certificate-styles.css
new file mode 100644
index 0000000..5c2a584
--- /dev/null
+++ b/frontend/certificate-styles.css
@@ -0,0 +1,444 @@
+/* Certificate-specific styles */
+
+.certificates-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.certificate-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: 2px solid transparent;
+    position: relative;
+    overflow: hidden;
+}
+
+.certificate-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+}
+
+.certificate-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
+    border-color: #3b82f6;
+}
+
+.certificate-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.certificate-number {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #3b82f6;
+    background: #eff6ff;
+    padding: 0.375rem 0.75rem;
+    border-radius: 6px;
+}
+
+.certificate-grade {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #059669;
+    background: #d1fae5;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.certificate-grade.grade-A {
+    color: #059669;
+    background: #d1fae5;
+}
+
+.certificate-grade.grade-B {
+    color: #2563eb;
+    background: #dbeafe;
+}
+
+.certificate-grade.grade-C {
+    color: #d97706;
+    background: #fef3c7;
+}
+
+.certificate-grade.grade-D {
+    color: #dc2626;
+    background: #fee2e2;
+}
+
+.certificate-grade.grade-F {
+    color: #991b1b;
+    background: #fecaca;
+}
+
+.certificate-card-body {
+    margin-bottom: 1rem;
+}
+
+.certificate-student-name {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #1e293b;
+    margin-bottom: 0.5rem;
+}
+
+.certificate-course-name {
+    font-size: 1rem;
+    color: #475569;
+    margin-bottom: 0.75rem;
+}
+
+.certificate-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e2e8f0;
+}
+
+.certificate-meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: #64748b;
+}
+
+.certificate-meta-item i {
+    color: #94a3b8;
+    width: 16px;
+}
+
+/* Certificate Display/Viewer */
+.certificate-display {
+    background: white;
+    padding: 3rem;
+    border: 2px solid #cbd5e1;
+    border-radius: 8px;
+    box-shadow: 0 0 0 8px #f8fafc inset;
+    position: relative;
+    min-height: 600px;
+}
+
+.certificate-display::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 8px;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+}
+
+.certificate-ornament {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
+    border: 3px double #cbd5e1;
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+.certificate-header {
+    text-align: center;
+    margin-bottom: 2rem;
+    position: relative;
+    z-index: 1;
+}
+
+.certificate-logo {
+    font-size: 3rem;
+    color: #3b82f6;
+    margin-bottom: 0.5rem;
+}
+
+.certificate-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.certificate-subtitle {
+    font-size: 1rem;
+    color: #64748b;
+    font-style: italic;
+}
+
+.certificate-body {
+    text-align: center;
+    margin: 2rem 0;
+    position: relative;
+    z-index: 1;
+}
+
+.certificate-label {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    color: #64748b;
+    letter-spacing: 1px;
+    margin-bottom: 0.5rem;
+}
+
+.certificate-student {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1e293b;
+    margin: 1rem 0;
+    text-decoration: underline;
+    text-decoration-color: #3b82f6;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 8px;
+}
+
+.certificate-description {
+    font-size: 1rem;
+    color: #475569;
+    line-height: 1.8;
+    margin: 1.5rem 0;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.certificate-course {
+    font-weight: 600;
+    color: #3b82f6;
+}
+
+.certificate-details {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+    margin: 2rem 0;
+    padding: 1.5rem;
+    background: #f8fafc;
+    border-radius: 8px;
+    position: relative;
+    z-index: 1;
+}
+
+.certificate-detail-item {
+    text-align: left;
+}
+
+.certificate-detail-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: #64748b;
+    letter-spacing: 1px;
+    margin-bottom: 0.25rem;
+}
+
+.certificate-detail-value {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1e293b;
+}
+
+.certificate-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 2px solid #e2e8f0;
+    position: relative;
+    z-index: 1;
+}
+
+.certificate-signature {
+    text-align: center;
+}
+
+.certificate-signature-line {
+    width: 200px;
+    height: 2px;
+    background: #1e293b;
+    margin-bottom: 0.5rem;
+}
+
+.certificate-signature-name {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1e293b;
+}
+
+.certificate-signature-title {
+    font-size: 0.875rem;
+    color: #64748b;
+}
+
+.certificate-qr-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.certificate-qr-code {
+    width: 100px;
+    height: 100px;
+    background: white;
+    border: 2px solid #cbd5e1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.5rem;
+    position: relative;
+}
+
+.certificate-qr-placeholder {
+    font-size: 3rem;
+    color: #cbd5e1;
+}
+
+.certificate-verification {
+    font-size: 0.75rem;
+    color: #64748b;
+    text-align: center;
+}
+
+.certificate-digital-signature {
+    font-size: 0.625rem;
+    color: #94a3b8;
+    margin-top: 1rem;
+    text-align: center;
+    font-family: monospace;
+}
+
+/* Certificate Modal Adjustments */
+.certificate-modal {
+    max-width: 900px;
+    width: 90%;
+}
+
+.certificate-modal .modal-body {
+    padding: 2rem;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+/* Search Results Section */
+.search-results-section {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 2px solid #e2e8f0;
+}
+
+.search-results-section .section-header h3 {
+    font-size: 1.5rem;
+    color: #1e293b;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+#results-count {
+    color: #64748b;
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: #64748b;
+}
+
+.empty-state i {
+    font-size: 4rem;
+    color: #cbd5e1;
+    margin-bottom: 1rem;
+}
+
+.empty-state h3 {
+    font-size: 1.5rem;
+    color: #475569;
+    margin-bottom: 0.5rem;
+}
+
+.empty-state p {
+    color: #64748b;
+}
+
+/* Print Styles */
+@media print {
+    body * {
+        visibility: hidden;
+    }
+    
+    .certificate-display,
+    .certificate-display * {
+        visibility: visible;
+    }
+    
+    .certificate-display {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        box-shadow: none;
+    }
+    
+    .modal-header,
+    .modal-actions,
+    .nav-menu,
+    .section-header {
+        display: none !important;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .certificates-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .certificate-display {
+        padding: 1.5rem;
+    }
+    
+    .certificate-title {
+        font-size: 1.75rem;
+    }
+    
+    .certificate-student {
+        font-size: 1.5rem;
+    }
+    
+    .certificate-details {
+        grid-template-columns: 1fr;
+    }
+    
+    .certificate-footer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+}
diff --git a/frontend/certificate.js b/frontend/certificate.js
deleted file mode 100644
index 13b8a42..0000000
--- a/frontend/certificate.js
+++ /dev/null
@@ -1,23 +0,0 @@
-//Create a comprehensive certificate generation and display system for the Course Registration System that allows users to 
-// search for and view digital certificates for completed courses.
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';  
-import { useParams } from 'react-router-dom';
-import './certificate.css';
-
-function Certificate() {
-    const { certificateId } = useParams();
-
-    return (
-        <div className="certificate">
-            <h1>Certificate</h1>
-            {certificateId ? (
-                <p>Certificate ID: {certificateId}</p>
-            ) : (
-                <p>No certificate selected.</p>
-            )}
-        </div>
-    );
-}
-
-export default Certificate;
\ No newline at end of file
diff --git a/frontend/certificates.html b/frontend/certificates.html
new file mode 100644
index 0000000..67912a2
--- /dev/null
+++ b/frontend/certificates.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Certificate Search - Course Registration System</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="certificate-styles.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <div class="logo">
+                    <i class="fas fa-graduation-cap"></i>
+                    <h1>Course Registration System</h1>
+                </div>
+                <nav class="nav-menu">
+                    <a href="index.html" class="nav-link">
+                        <i class="fas fa-plus-circle"></i>
+                        Add Course
+                    </a>
+                    <a href="#" class="nav-link">
+                        <i class="fas fa-list"></i>
+                        View Courses
+                    </a>
+                    <a href="#" class="nav-link">
+                        <i class="fas fa-users"></i>
+                        Students
+                    </a>
+                    <a href="#" class="nav-link">
+                        <i class="fas fa-user-check"></i>
+                        Registrations
+                    </a>
+                    <a href="certificates.html" class="nav-link active">
+                        <i class="fas fa-certificate"></i>
+                        Certificates
+                    </a>
+                </nav>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Certificate Search Section -->
+            <section id="certificate-search-section" class="section">
+                <div class="section-header">
+                    <h2>
+                        <i class="fas fa-certificate"></i>
+                        Certificate Search & Verification
+                    </h2>
+                    <p>Search for digital certificates by student name, course, or certificate number</p>
+                </div>
+
+                <!-- Search Form -->
+                <div class="form-container">
+                    <form id="certificate-search-form" class="form">
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label for="searchStudentName" class="form-label">
+                                    <i class="fas fa-user"></i>
+                                    Student Name
+                                </label>
+                                <input 
+                                    type="text" 
+                                    id="searchStudentName" 
+                                    name="searchStudentName" 
+                                    class="form-input" 
+                                    placeholder="Enter student name..."
+                                >
+                            </div>
+
+                            <div class="form-group">
+                                <label for="searchCertificateNumber" class="form-label">
+                                    <i class="fas fa-hashtag"></i>
+                                    Certificate Number
+                                </label>
+                                <input 
+                                    type="text" 
+                                    id="searchCertificateNumber" 
+                                    name="searchCertificateNumber" 
+                                    class="form-input" 
+                                    placeholder="e.g., CERT-2024-001"
+                                >
+                            </div>
+                        </div>
+
+                        <div class="form-actions">
+                            <button type="button" class="btn btn-secondary" onclick="resetSearchForm()">
+                                <i class="fas fa-undo"></i>
+                                Reset
+                            </button>
+                            <button type="submit" class="btn btn-primary">
+                                <i class="fas fa-search"></i>
+                                Search Certificates
+                            </button>
+                        </div>
+                    </form>
+                </div>
+
+                <!-- Search Results -->
+                <div id="search-results-container" class="search-results-section hidden">
+                    <div class="section-header">
+                        <h3>
+                            <i class="fas fa-list"></i>
+                            Search Results
+                        </h3>
+                        <p id="results-count">Found 0 certificates</p>
+                    </div>
+                    <div id="certificates-grid" class="certificates-grid">
+                        <!-- Results will be loaded here dynamically -->
+                    </div>
+                </div>
+
+                <div id="search-loading" class="loading hidden">
+                    <i class="fas fa-spinner fa-spin"></i>
+                    Searching for certificates...
+                </div>
+
+                <div id="search-empty" class="empty-state hidden">
+                    <i class="fas fa-search"></i>
+                    <h3>No certificates found</h3>
+                    <p>Try adjusting your search criteria</p>
+                </div>
+            </section>
+
+            <!-- Certificate Viewer Modal -->
+            <div id="certificate-viewer-modal" class="modal hidden">
+                <div class="modal-content certificate-modal">
+                    <div class="modal-header">
+                        <h3>Certificate Details</h3>
+                        <button class="modal-close" onclick="closeCertificateViewer()">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <div id="certificate-display" class="certificate-display">
+                            <!-- Certificate content will be loaded here -->
+                        </div>
+                    </div>
+                    <div class="modal-actions">
+                        <button class="btn btn-secondary" onclick="printCertificate()">
+                            <i class="fas fa-print"></i>
+                            Print Certificate
+                        </button>
+                        <button class="btn btn-primary" onclick="downloadCertificate()">
+                            <i class="fas fa-download"></i>
+                            Download PDF
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Success Modal -->
+        <div id="success-modal" class="modal hidden">
+            <div class="modal-content success">
+                <div class="modal-header">
+                    <i class="fas fa-check-circle"></i>
+                    <h3>Success!</h3>
+                </div>
+                <div class="modal-body">
+                    <p id="success-message">Operation completed successfully!</p>
+                </div>
+                <div class="modal-actions">
+                    <button class="btn btn-primary" onclick="closeModal('success-modal')">
+                        OK
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Error Modal -->
+        <div id="error-modal" class="modal hidden">
+            <div class="modal-content error">
+                <div class="modal-header">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <h3>Error</h3>
+                </div>
+                <div class="modal-body">
+                    <p id="error-message">An error occurred.</p>
+                </div>
+                <div class="modal-actions">
+                    <button class="btn btn-primary" onclick="closeModal('error-modal')">
+                        OK
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading Overlay -->
+    <div id="loading-overlay" class="loading-overlay hidden">
+        <div class="loading-spinner">
+            <i class="fas fa-spinner fa-spin"></i>
+            <p>Processing...</p>
+        </div>
+    </div>
+
+    <script src="certificates.js"></script>
+</body>
+</html>
diff --git a/frontend/certificates.js b/frontend/certificates.js
new file mode 100644
index 0000000..1cd0243
--- /dev/null
+++ b/frontend/certificates.js
@@ -0,0 +1,343 @@
+// Certificate Search and Display System
+const API_BASE_URL = 'http://localhost:5210/api';
+
+// DOM Elements
+const searchForm = document.getElementById('certificate-search-form');
+const searchStudentName = document.getElementById('searchStudentName');
+const searchCertificateNumber = document.getElementById('searchCertificateNumber');
+const searchResultsContainer = document.getElementById('search-results-container');
+const certificatesGrid = document.getElementById('certificates-grid');
+const searchLoading = document.getElementById('search-loading');
+const searchEmpty = document.getElementById('search-empty');
+const resultsCount = document.getElementById('results-count');
+const certificateViewerModal = document.getElementById('certificate-viewer-modal');
+const certificateDisplay = document.getElementById('certificate-display');
+const loadingOverlay = document.getElementById('loading-overlay');
+
+// Current certificate being viewed
+let currentCertificate = null;
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    initializeSearchForm();
+});
+
+// Initialize search form
+function initializeSearchForm() {
+    searchForm.addEventListener('submit', handleSearchSubmit);
+    
+    // Clear search results when inputs change
+    searchStudentName.addEventListener('input', () => {
+        if (!searchStudentName.value && !searchCertificateNumber.value) {
+            hideSearchResults();
+        }
+    });
+    
+    searchCertificateNumber.addEventListener('input', () => {
+        if (!searchStudentName.value && !searchCertificateNumber.value) {
+            hideSearchResults();
+        }
+    });
+}
+
+// Handle search form submission
+async function handleSearchSubmit(e) {
+    e.preventDefault();
+    
+    const studentName = searchStudentName.value.trim();
+    const certificateNumber = searchCertificateNumber.value.trim();
+    
+    if (!studentName && !certificateNumber) {
+        showError('Please enter at least one search criterion');
+        return;
+    }
+    
+    await searchCertificates(studentName, certificateNumber);
+}
+
+// Search for certificates
+async function searchCertificates(studentName, certificateNumber) {
+    try {
+        showLoading(true);
+        hideSearchResults();
+        searchEmpty.classList.add('hidden');
+        
+        // Build query parameters
+        const params = new URLSearchParams();
+        if (studentName) params.append('studentName', studentName);
+        if (certificateNumber) params.append('certificateNumber', certificateNumber);
+        
+        const response = await fetch(`${API_BASE_URL}/certificates?${params.toString()}`);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        
+        const certificates = await response.json();
+        
+        showLoading(false);
+        
+        if (certificates.length === 0) {
+            searchEmpty.classList.remove('hidden');
+        } else {
+            displaySearchResults(certificates);
+        }
+    } catch (error) {
+        console.error('Error searching certificates:', error);
+        showLoading(false);
+        showError('Failed to search certificates. Please try again.');
+    }
+}
+
+// Display search results
+function displaySearchResults(certificates) {
+    certificatesGrid.innerHTML = '';
+    
+    certificates.forEach(certificate => {
+        const card = createCertificateCard(certificate);
+        certificatesGrid.appendChild(card);
+    });
+    
+    resultsCount.textContent = `Found ${certificates.length} certificate${certificates.length !== 1 ? 's' : ''}`;
+    searchResultsContainer.classList.remove('hidden');
+}
+
+// Create a certificate card
+function createCertificateCard(certificate) {
+    const card = document.createElement('div');
+    card.className = 'certificate-card';
+    card.onclick = () => viewCertificate(certificate);
+    
+    const issueDate = new Date(certificate.issueDate).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+    
+    const gradeClass = `grade-${getGradeText(certificate.finalGrade)}`;
+    const gradeDisplay = getGradeDisplay(certificate.finalGrade);
+    
+    card.innerHTML = `
+        <div class="certificate-card-header">
+            <span class="certificate-number">
+                <i class="fas fa-hashtag"></i>
+                ${escapeHtml(certificate.certificateNumber)}
+            </span>
+            <div class="certificate-grade ${gradeClass}">${gradeDisplay}</div>
+        </div>
+        <div class="certificate-card-body">
+            <h3 class="certificate-student-name">${escapeHtml(certificate.studentName)}</h3>
+            <p class="certificate-course-name">${escapeHtml(certificate.courseName)}</p>
+        </div>
+        <div class="certificate-meta">
+            <div class="certificate-meta-item">
+                <i class="fas fa-calendar-alt"></i>
+                <span>Issued: ${issueDate}</span>
+            </div>
+            <div class="certificate-meta-item">
+                <i class="fas fa-chalkboard-teacher"></i>
+                <span>${escapeHtml(certificate.instructorName)}</span>
+            </div>
+            ${certificate.remarks ? `
+                <div class="certificate-meta-item">
+                    <i class="fas fa-comment"></i>
+                    <span>${escapeHtml(certificate.remarks)}</span>
+                </div>
+            ` : ''}
+        </div>
+    `;
+    
+    return card;
+}
+
+// View certificate details
+function viewCertificate(certificate) {
+    currentCertificate = certificate;
+    certificateDisplay.innerHTML = renderCertificate(certificate);
+    certificateViewerModal.classList.remove('hidden');
+}
+
+// Render certificate HTML
+function renderCertificate(certificate) {
+    const issueDate = new Date(certificate.issueDate).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+    
+    const courseStartDate = new Date(certificate.courseStartDate).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long'
+    });
+    
+    const courseEndDate = new Date(certificate.courseEndDate).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long'
+    });
+    
+    const gradeDisplay = getGradeDisplay(certificate.finalGrade);
+    
+    return `
+        <div class="certificate-ornament"></div>
+        
+        <div class="certificate-header">
+            <div class="certificate-logo">
+                <i class="fas fa-graduation-cap"></i>
+            </div>
+            <h1 class="certificate-title">Certificate of Completion</h1>
+            <p class="certificate-subtitle">This is to certify that</p>
+        </div>
+        
+        <div class="certificate-body">
+            <h2 class="certificate-student">${escapeHtml(certificate.studentName)}</h2>
+            <p class="certificate-description">
+                has successfully completed the course
+                <span class="certificate-course">${escapeHtml(certificate.courseName)}</span>
+                with a final grade of <strong>${gradeDisplay}</strong>
+                ${certificate.remarks ? `<br><em>"${escapeHtml(certificate.remarks)}"</em>` : ''}
+            </p>
+        </div>
+        
+        <div class="certificate-details">
+            <div class="certificate-detail-item">
+                <div class="certificate-detail-label">Certificate Number</div>
+                <div class="certificate-detail-value">${escapeHtml(certificate.certificateNumber)}</div>
+            </div>
+            <div class="certificate-detail-item">
+                <div class="certificate-detail-label">Issue Date</div>
+                <div class="certificate-detail-value">${issueDate}</div>
+            </div>
+            <div class="certificate-detail-item">
+                <div class="certificate-detail-label">Course Duration</div>
+                <div class="certificate-detail-value">${courseStartDate} - ${courseEndDate}</div>
+            </div>
+            <div class="certificate-detail-item">
+                <div class="certificate-detail-label">Instructor</div>
+                <div class="certificate-detail-value">${escapeHtml(certificate.instructorName)}</div>
+            </div>
+        </div>
+        
+        <div class="certificate-footer">
+            <div class="certificate-signature">
+                <div class="certificate-signature-line"></div>
+                <div class="certificate-signature-name">${escapeHtml(certificate.instructorName)}</div>
+                <div class="certificate-signature-title">Course Instructor</div>
+            </div>
+            
+            <div class="certificate-qr-section">
+                <div class="certificate-qr-code">
+                    <i class="fas fa-qrcode certificate-qr-placeholder"></i>
+                </div>
+                <div class="certificate-verification">
+                    <small>Scan to verify</small>
+                </div>
+            </div>
+        </div>
+        
+        ${certificate.digitalSignature ? `
+            <div class="certificate-digital-signature">
+                Digital Signature: ${escapeHtml(certificate.digitalSignature)}
+            </div>
+        ` : ''}
+    `;
+}
+
+// Get grade display text
+function getGradeDisplay(grade) {
+    const gradeMap = {
+        0: 'A (Excellent)',
+        1: 'B (Good)',
+        2: 'C (Satisfactory)',
+        3: 'D (Poor)',
+        4: 'F (Fail)'
+    };
+    
+    return gradeMap[grade] || grade.toString();
+}
+
+// Get grade letter for CSS class
+function getGradeText(grade) {
+    const gradeMap = {
+        0: 'A',
+        1: 'B',
+        2: 'C',
+        3: 'D',
+        4: 'F'
+    };
+    
+    return gradeMap[grade] || 'F';
+}
+
+// Close certificate viewer
+function closeCertificateViewer() {
+    certificateViewerModal.classList.add('hidden');
+    currentCertificate = null;
+}
+
+// Print certificate
+function printCertificate() {
+    if (!currentCertificate) return;
+    window.print();
+}
+
+// Download certificate as PDF
+function downloadCertificate() {
+    if (!currentCertificate) return;
+    
+    // For now, use print dialog
+    // In a production app, you'd generate a proper PDF using a library like jsPDF
+    showSuccess('Please use the print dialog to save as PDF');
+    printCertificate();
+}
+
+// Reset search form
+function resetSearchForm() {
+    searchStudentName.value = '';
+    searchCertificateNumber.value = '';
+    hideSearchResults();
+    searchEmpty.classList.add('hidden');
+}
+
+// Hide search results
+function hideSearchResults() {
+    searchResultsContainer.classList.add('hidden');
+    certificatesGrid.innerHTML = '';
+}
+
+// Show/hide loading overlay
+function showLoading(show) {
+    if (show) {
+        searchLoading.classList.remove('hidden');
+    } else {
+        searchLoading.classList.add('hidden');
+    }
+}
+
+// Show success message
+function showSuccess(message) {
+    const successModal = document.getElementById('success-modal');
+    const successMessage = document.getElementById('success-message');
+    successMessage.textContent = message;
+    successModal.classList.remove('hidden');
+}
+
+// Show error message
+function showError(message) {
+    const errorModal = document.getElementById('error-modal');
+    const errorMessage = document.getElementById('error-message');
+    errorMessage.textContent = message;
+    errorModal.classList.remove('hidden');
+}
+
+// Close modal
+function closeModal(modalId) {
+    const modal = document.getElementById(modalId);
+    modal.classList.add('hidden');
+}
+
+// Escape HTML to prevent XSS
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}