Index: src/main/java/apps/spring/reportium/service/ReportService.java
===================================================================
--- src/main/java/apps/spring/reportium/service/ReportService.java	(revision b8f72241fcdb78c32de26f5e71ce67c8aa84a4b1)
+++ src/main/java/apps/spring/reportium/service/ReportService.java	(revision fbf0a9cf3881538198cfdab86be233c339ca7117)
@@ -3,4 +3,5 @@
 import apps.spring.reportium.entity.DTOs.*;
 import apps.spring.reportium.entity.EmploymentReport;
+import apps.spring.reportium.entity.Institution;
 import apps.spring.reportium.entity.Report;
 import org.springframework.data.domain.Page;
@@ -21,3 +22,4 @@
 
     void saveNewEmploymentReport(Long personId, LocalDate startDate, LocalDate endDate,String jobRole, BigDecimal income, String summary);
+    void saveNewAcademicReport(Long personId, Long institution_id, String academicField, String descriptionOfReport);
 }
Index: src/main/java/apps/spring/reportium/service/impl/ReportServiceImplementation.java
===================================================================
--- src/main/java/apps/spring/reportium/service/impl/ReportServiceImplementation.java	(revision b8f72241fcdb78c32de26f5e71ce67c8aa84a4b1)
+++ src/main/java/apps/spring/reportium/service/impl/ReportServiceImplementation.java	(revision fbf0a9cf3881538198cfdab86be233c339ca7117)
@@ -3,4 +3,5 @@
 import apps.spring.reportium.entity.DTOs.*;
 import apps.spring.reportium.entity.EmploymentReport;
+import apps.spring.reportium.entity.Institution;
 import apps.spring.reportium.entity.Report;
 import apps.spring.reportium.repository.ReportRepository;
@@ -105,3 +106,24 @@
     }
 
+    @Override
+    public void saveNewAcademicReport(Long personId,
+                                      Long institution_id,
+                                      String academicField,
+                                      String descriptionOfReport) {
+        System.out.println("Calling stored procedure with:");
+        System.out.println("personId = " + personId);
+        System.out.println("institution_id = " + institution_id);
+        System.out.println("academicField = " + academicField);
+        System.out.println("descriptionOfReport = " + descriptionOfReport);
+
+        jdbcTemplate.update(
+                "CALL insert_academic_report(?::INT, ?::INT, ?::TEXT, ?::TEXT)",
+                personId,
+                institution_id, // assuming Institution has getInstitutionId()
+                academicField,
+                descriptionOfReport
+        );
+    }
+
+
 }
Index: src/main/java/apps/spring/reportium/web/ReportsController.java
===================================================================
--- src/main/java/apps/spring/reportium/web/ReportsController.java	(revision b8f72241fcdb78c32de26f5e71ce67c8aa84a4b1)
+++ src/main/java/apps/spring/reportium/web/ReportsController.java	(revision fbf0a9cf3881538198cfdab86be233c339ca7117)
@@ -1,5 +1,7 @@
 package apps.spring.reportium.web;
+import apps.spring.reportium.entity.Institution;
 import apps.spring.reportium.entity.Person;
 import apps.spring.reportium.entity.Report;
+import apps.spring.reportium.repository.InstitutionRepository;
 import apps.spring.reportium.service.PersonService;
 import apps.spring.reportium.service.ReportService;
@@ -18,7 +20,9 @@
     private final ReportService reportService;
     private final PersonService personService;
-    public ReportsController(ReportService reportService, PersonService personService) {
+    private final InstitutionRepository institutionRepository;
+    public ReportsController(ReportService reportService, PersonService personService, InstitutionRepository institutionRepository) {
         this.reportService = reportService;
         this.personService = personService;
+        this.institutionRepository = institutionRepository;
     }
     @GetMapping
@@ -66,3 +70,22 @@
         return "redirect:/" + personId;
     }
+
+
+    @GetMapping("/add/academic")
+    public String createAcademicReport(@RequestParam Long personId, Model model) {
+        Person person = personService.findById(personId.intValue());
+        model.addAttribute("person", person);
+        model.addAttribute("institutions", institutionRepository.findAll());
+        System.out.println(personId);
+        return "new_academic_report";
+    }
+    @PostMapping("/add/academic")
+    public String submitAcademicData(@RequestParam Long personId,
+                                       @RequestParam Long institutionId,
+                                       @RequestParam String academicField,
+                                       @RequestParam String descriptionOfReport) {
+        reportService.saveNewAcademicReport(personId, institutionId, academicField, descriptionOfReport);
+        return "redirect:/" + personId;
+    }
+   //TODO("Same as Employment, but for Medical, Academic and Criminal Report to be added.")
 }
Index: src/main/resources/sql_queries/procedure_new_academic_report.sql
===================================================================
--- src/main/resources/sql_queries/procedure_new_academic_report.sql	(revision fbf0a9cf3881538198cfdab86be233c339ca7117)
+++ src/main/resources/sql_queries/procedure_new_academic_report.sql	(revision fbf0a9cf3881538198cfdab86be233c339ca7117)
@@ -0,0 +1,31 @@
+CREATE OR REPLACE PROCEDURE insert_academic_report(
+    IN param_person_id INT,
+    IN param_institution_id INT,
+    IN param_academic_field TEXT,
+    IN param_description_of_report TEXT
+)
+    LANGUAGE plpgsql
+as
+$$
+DECLARE
+    new_report_id INT;
+BEGIN
+    IF NOT EXISTS (SELECT 1
+                   FROM person
+                   WHERE person_id = param_person_id) THEN
+        RAISE EXCEPTION 'Person with ID % does not exist', param_person_id;
+    END IF;
+    IF NOT EXISTS (SELECT 1
+                   FROM institution
+                   WHERE institution_id = param_institution_id) THEN
+        RAISE EXCEPTION 'Institution with ID % does not exist', param_institution_id;
+    END IF;
+
+    INSERT INTO report (report_type, summary, created_at, person_id)
+    VALUES ('Academic', param_description_of_report, CURRENT_TIMESTAMP, param_person_id)
+    RETURNING report_id INTO new_report_id;
+
+    INSERT INTO academicreport (report_id, institution_id, academic_field, description_of_report)
+    VALUES (new_report_id, param_institution_id, param_academic_field, param_description_of_report);
+END;
+$$;
Index: src/main/resources/templates/new_academic_report.html
===================================================================
--- src/main/resources/templates/new_academic_report.html	(revision fbf0a9cf3881538198cfdab86be233c339ca7117)
+++ src/main/resources/templates/new_academic_report.html	(revision fbf0a9cf3881538198cfdab86be233c339ca7117)
@@ -0,0 +1,255 @@
+<!doctype html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Add New Academic Report</title>
+    <style>
+        :root {
+            --light-gray: #f8f9fa;
+            --blue: #007bff;
+            --yellow: #ffc107;
+            --dark-blue: #0056b3;
+            --light-blue: #e3f2fd;
+        }
+
+        body {
+            background: linear-gradient(135deg, var(--light-gray) 0%, #e9ecef 100%);
+            min-height: 100vh;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 20px;
+        }
+
+        .form-container {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            padding: 2.5rem;
+            margin: 2rem auto;
+            max-width: 600px;
+            position: relative;
+        }
+
+        .form-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 5px;
+            background: linear-gradient(90deg, var(--blue) 0%, var(--yellow) 100%);
+            border-radius: 15px 15px 0 0;
+        }
+
+        .form-title {
+            color: var(--dark-blue);
+            font-weight: 700;
+            margin-bottom: 2rem;
+            text-align: center;
+            font-size: 1.8rem;
+        }
+
+        .form-label {
+            color: var(--dark-blue);
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            font-size: 0.95rem;
+            display: block;
+        }
+
+        .form-control {
+            border: 2px solid #e9ecef;
+            border-radius: 10px;
+            padding: 0.75rem 1rem;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background-color: var(--light-gray);
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .form-control:focus {
+            border-color: var(--blue);
+            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+            background-color: white;
+            outline: none;
+        }
+
+        .form-control::placeholder {
+            color: #6c757d;
+        }
+
+        .form-control:hover {
+            background-color: white;
+        }
+
+        select.form-control {
+            cursor: pointer;
+        }
+
+        textarea.form-control {
+            resize: vertical;
+            min-height: 100px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(45deg, var(--blue) 0%, var(--dark-blue) 100%);
+            border: none;
+            border-radius: 10px;
+            padding: 0.75rem 2rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
+            color: white;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(45deg, var(--dark-blue) 0%, var(--blue) 100%);
+        }
+
+        .btn-secondary {
+            background: linear-gradient(45deg, var(--yellow) 0%, #e0a800 100%);
+            border: none;
+            border-radius: 10px;
+            padding: 0.75rem 2rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: #333;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+            box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        .btn-secondary:hover {
+            background: linear-gradient(45deg, #e0a800 0%, var(--yellow) 100%);
+            color: #333;
+            text-decoration: none;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+
+        .form-group::after {
+            content: '';
+            position: absolute;
+            bottom: -0.5rem;
+            left: 0;
+            width: 50px;
+            height: 2px;
+            background: var(--yellow);
+            border-radius: 1px;
+            opacity: 0.6;
+        }
+
+        .button-group {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+            flex-wrap: wrap;
+        }
+
+        .description-counter {
+            text-align: right;
+            font-size: 0.85rem;
+            color: #6c757d;
+            margin-top: 0.25rem;
+        }
+
+        @media (max-width: 576px) {
+            body {
+                padding: 10px;
+            }
+
+            .form-container {
+                margin: 1rem auto;
+                padding: 1.5rem;
+            }
+
+            .button-group {
+                flex-direction: column;
+            }
+
+            .btn-primary, .btn-secondary {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="form-container">
+    <h2 class="form-title">Academic Report</h2>
+
+    <form th:action="@{/reports/add/academic}" method="post">
+        <!-- Hidden person ID -->
+        <input type="hidden" name="personId" th:value="${person.personId}" />
+
+        <!-- Institution -->
+        <div class="form-group">
+            <label for="institutionId" class="form-label">Institution</label>
+            <select name="institutionId" id="institutionId" class="form-control" required>
+                <option value="">Select an institution</option>
+                <option th:each="inst : ${institutions}"
+                        th:value="${inst.institutionId}"
+                        th:text="${inst.name}">
+                </option>
+            </select>
+        </div>
+
+        <!-- Academic Field -->
+        <div class="form-group">
+            <label for="academicField" class="form-label">Academic Field</label>
+            <input type="text" name="academicField" id="academicField" class="form-control" required
+                   placeholder="e.g., Computer Science, Mathematics, Psychology" />
+        </div>
+
+        <!-- Description -->
+        <div class="form-group">
+            <label for="descriptionOfReport" class="form-label">Description of Report</label>
+            <textarea name="descriptionOfReport" id="descriptionOfReport" class="form-control" rows="4" required
+                      placeholder="Provide a detailed description of the academic report, including key findings, methodology, or achievements..."
+                      maxlength="1000" oninput="updateCounter()"></textarea>
+            <div class="description-counter" id="charCounter">0 / 1000 characters</div>
+        </div>
+
+        <div class="button-group">
+            <button type="submit" class="btn-primary">Submit Report</button>
+            <a th:href="@{/{id}(id=${person.getPersonId()})}" class="btn btn-secondary">Cancel</a>
+        </div>
+    </form>
+</div>
+
+<script>
+    function updateCounter() {
+        const textarea = document.getElementById('descriptionOfReport');
+        const counter = document.getElementById('charCounter');
+        const current = textarea.value.length;
+        const max = textarea.getAttribute('maxlength');
+        counter.textContent = `${current} / ${max} characters`;
+
+        if (current > max * 0.9) {
+            counter.style.color = '#dc3545';
+        } else if (current > max * 0.7) {
+            counter.style.color = '#ffc107';
+        } else {
+            counter.style.color = '#6c757d';
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        updateCounter();
+    });
+</script>
+</body>
+</html>
Index: src/main/resources/templates/new_employment_report.html
===================================================================
--- src/main/resources/templates/new_employment_report.html	(revision b8f72241fcdb78c32de26f5e71ce67c8aa84a4b1)
+++ src/main/resources/templates/new_employment_report.html	(revision fbf0a9cf3881538198cfdab86be233c339ca7117)
@@ -5,37 +5,237 @@
     <title>Add Employment Report</title>
     <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
+    <style>
+        :root {
+            --light-gray: #f8f9fa;
+            --blue: #007bff;
+            --yellow: #ffc107;
+            --dark-blue: #0056b3;
+            --light-blue: #e3f2fd;
+        }
+
+        body {
+            background: linear-gradient(135deg, var(--light-gray) 0%, #e9ecef 100%);
+            min-height: 100vh;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        .form-container {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            padding: 2.5rem;
+            margin: 2rem auto;
+            max-width: 600px;
+            position: relative;
+        }
+
+        .form-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 5px;
+            background: linear-gradient(90deg, var(--blue) 0%, var(--yellow) 100%);
+            border-radius: 15px 15px 0 0;
+        }
+
+        .form-title {
+            color: var(--dark-blue);
+            font-weight: 700;
+            margin-bottom: 2rem;
+            text-align: center;
+            font-size: 1.8rem;
+        }
+
+        .form-label {
+            color: var(--dark-blue);
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            font-size: 0.95rem;
+        }
+
+        .form-control {
+            border: 2px solid #e9ecef;
+            border-radius: 10px;
+            padding: 0.75rem 1rem;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background-color: var(--light-gray);
+        }
+
+        .form-control:focus {
+            border-color: var(--blue);
+            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+            background-color: white;
+            outline: none;
+        }
+
+        .form-control::placeholder {
+            color: #6c757d;
+        }
+
+        .btn-primary {
+            background: linear-gradient(45deg, var(--blue) 0%, var(--dark-blue) 100%);
+            border: none;
+            border-radius: 10px;
+            padding: 0.75rem 2rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(45deg, var(--dark-blue) 0%, var(--blue) 100%);
+        }
+
+        .btn-secondary {
+            background: linear-gradient(45deg, var(--yellow) 0%, #e0a800 100%);
+            border: none;
+            border-radius: 10px;
+            padding: 0.75rem 2rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: #333;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+            box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
+        }
+
+        .btn-secondary:hover {
+            background: linear-gradient(45deg, #e0a800 0%, var(--yellow) 100%);
+            color: #333;
+            text-decoration: none;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+
+        .form-group::after {
+            content: '';
+            position: absolute;
+            bottom: -0.5rem;
+            left: 0;
+            width: 50px;
+            height: 2px;
+            background: var(--yellow);
+            border-radius: 1px;
+            opacity: 0.6;
+        }
+
+        .button-group {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+            flex-wrap: wrap;
+        }
+
+        .summary-counter {
+            text-align: right;
+            font-size: 0.85rem;
+            color: #6c757d;
+            margin-top: 0.25rem;
+        }
+
+        @media (max-width: 576px) {
+            .form-container {
+                margin: 1rem;
+                padding: 1.5rem;
+            }
+
+            .button-group {
+                flex-direction: column;
+            }
+
+            .btn-primary, .btn-secondary {
+                width: 100%;
+            }
+        }
+
+        .form-control:hover {
+            background-color: white;
+        }
+    </style>
 </head>
 <body class="container py-4">
-<form th:action="@{/reports/add/employment}" method="post" class="mt-4">
-    <!-- Hidden person ID -->
-    <input type="hidden" name="personId" th:value="${person.getPersonId()}"/>
-    <!-- Start Date -->
-    <div class="mb-3">
-        <label for="startDate" class="form-label">Start Date</label>
-        <input type="date" class="form-control" name="startDate" id="startDate" required>
-    </div>
-    <!-- End Date -->
-    <div class="mb-3">
-        <label for="endDate" class="form-label">End Date</label>
-        <input type="date" class="form-control" name="endDate" id="endDate">
-    </div>
-    <!-- Job Role -->
-    <div class="mb-3">
-        <label for="jobRole" class="form-label">Job Role</label>
-        <input type="text" class="form-control" name="jobRole" id="jobRole" required>
-    </div>
-    <!-- Income -->
-    <div class="mb-3">
-        <label for="income" class="form-label">Monthly Income (in euros)</label>
-        <input min="1" type="number" step="0.01" class="form-control" name="income" id="income" required>
-    </div>
-    <!-- Report Summary -->
-    <div class="mb-3">
-        <label for="summary" class="form-label">Write a short Summary for the report:</label>
-        <textarea class="form-control" name="summary" id="summary" rows="4" required></textarea>
-    </div>
-    <button type="submit" class="btn btn-primary">Submit Report</button>
-    <a th:href="@{/person/{id}(id=${person.getPersonId()})}" class="btn btn-secondary">Cancel</a>
-</form>
+<div class="form-container">
+    <h1 class="form-title">Employment Report</h1>
+
+    <form th:action="@{/reports/add/employment}" method="post">
+        <!-- Hidden person ID -->
+        <input type="hidden" name="personId" th:value="${person.getPersonId()}"/>
+
+        <!-- Start Date -->
+        <div class="form-group">
+            <label for="startDate" class="form-label">Start Date</label>
+            <input type="date" class="form-control" name="startDate" id="startDate" required>
+        </div>
+
+        <!-- End Date -->
+        <div class="form-group">
+            <label for="endDate" class="form-label">End Date</label>
+            <input type="date" class="form-control" name="endDate" id="endDate">
+            <small class="text-muted">Leave empty if currently employed</small>
+        </div>
+
+        <!-- Job Role -->
+        <div class="form-group">
+            <label for="jobRole" class="form-label">Job Role</label>
+            <input type="text" class="form-control" name="jobRole" id="jobRole" required
+                   placeholder="e.g., Software Developer, Marketing Manager">
+        </div>
+
+        <!-- Income -->
+        <div class="form-group income-symbol">
+            <label for="income" class="form-label">Monthly Income (in euros)</label>
+            <input min="1" type="number" step="0.01" class="form-control" name="income" id="income" required
+                   placeholder="Enter amount" style="padding-right: 40px;">
+        </div>
+
+        <!-- Report Summary -->
+        <div class="form-group">
+            <label for="summary" class="form-label">Report Summary</label>
+            <textarea class="form-control" name="summary" id="summary" rows="4" required
+                      placeholder="Write a brief summary of the employment details, responsibilities, achievements, etc."
+                      maxlength="500" oninput="updateCounter()"></textarea>
+            <div class="summary-counter" id="charCounter">0 / 500 characters</div>
+        </div>
+
+        <div class="button-group">
+            <button type="submit" class="btn btn-primary">Submit Report</button>
+            <a th:href="@{/{id}(id=${person.getPersonId()})}" class="btn btn-secondary">Cancel</a>
+        </div>
+    </form>
+</div>
+
+<script>
+    function updateCounter() {
+        const textarea = document.getElementById('summary');
+        const counter = document.getElementById('charCounter');
+        const current = textarea.value.length;
+        const max = textarea.getAttribute('maxlength');
+        counter.textContent = `${current} / ${max} characters`;
+
+        if (current > max * 0.9) {
+            counter.style.color = '#dc3545';
+        } else if (current > max * 0.7) {
+            counter.style.color = '#ffc107';
+        } else {
+            counter.style.color = '#6c757d';
+        }
+    }
+
+    // Initialize counter on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        updateCounter();
+    });
+</script>
 </body>
 </html>