diff --git a/insurance-calculator-app/src/main/resources/static/js/person.js b/insurance-calculator-app/src/main/resources/static/js/person.js
new file mode 100644
index 0000000..68c4312
--- /dev/null
+++ b/insurance-calculator-app/src/main/resources/static/js/person.js
@@ -0,0 +1,69 @@
+function addPerson() {
+    let personsContainer = document.getElementById("persons-container");
+    let index = document.getElementsByClassName("person-card").length;
+    let personTemplate = `
+        <div class="card person-card shadow-sm mt-3">
+            <div class="card-body">
+                <h3 class="text-primary">Person ${index + 1}</h3>
+
+                <div class="mb-3">
+                    <label class="form-label" for="persons[${index}].personFirstName">First Name:</label>
+                    <input type="text" class="form-control" id="persons[${index}].personFirstName" name="persons[${index}].personFirstName" />
+                </div>
+
+                <div class="mb-3">
+                    <label class="form-label" for="persons[${index}].personLastName">Last Name:</label>
+                    <input type="text" class="form-control" id="persons[${index}].personLastName" name="persons[${index}].personLastName" />
+                </div>
+
+                <div class="mb-3">
+                    <label class="form-label" for="persons[${index}].personalCode">Personal Code:</label>
+                    <input type="text" class="form-control" id="persons[${index}].personalCode" name="persons[${index}].personalCode" />
+                </div>
+
+                <div class="mb-3">
+                    <label class="form-label" for="persons[${index}].personBirthDate">Birth Date:</label>
+                    <input type="date" class="form-control" id="persons[${index}].personBirthDate" name="persons[${index}].personBirthDate" />
+                </div>
+
+                <div class="mb-3">
+                    <label class="form-label" for="persons[${index}].medicalRiskLimitLevel">Medical Risk Limit Level:</label>
+                    <input type="text" class="form-control" id="persons[${index}].medicalRiskLimitLevel" name="persons[${index}].medicalRiskLimitLevel" />
+                </div>
+
+                <div class="mb-3">
+                    <label class="form-label" for="persons[${index}].travelCost">Travel Cost:</label>
+                    <input type="text" class="form-control" id="persons[${index}].travelCost" name="persons[${index}].travelCost" />
+                </div>
+            </div>
+        </div>`;
+    personsContainer.insertAdjacentHTML('beforeend', personTemplate);
+}
+
+function removePerson() {
+    let personsContainer = document.getElementById("persons-container");
+    let personForms = document.getElementsByClassName("person-card");
+    if (personForms.length > 0) {
+        personsContainer.removeChild(personForms[personForms.length - 1]);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    const agreementDateFrom = document.getElementById('agreementDateFrom');
+    const agreementDateTo= document.getElementById('agreementDateTo');
+
+    const today = new Date();
+
+    const dateFrom = new Date();
+    dateFrom.setDate(today.getDate() + 1);
+
+    const dateTo = new Date();
+    dateTo.setDate(today.getDate() + 2);
+
+    agreementDateFrom.value = dateFrom.toISOString().split('T')[0];
+    agreementDateTo.value = dateTo.toISOString().split('T')[0];
+});
+
+function clearForm() {
+    window.location.href = window.location.href.split('?')[0];
+}
diff --git a/insurance-calculator-app/src/main/resources/templates/travel-calculate-premium-v2.html b/insurance-calculator-app/src/main/resources/templates/travel-calculate-premium-v2.html
index 54c12c9..55f94c5 100644
--- a/insurance-calculator-app/src/main/resources/templates/travel-calculate-premium-v2.html
+++ b/insurance-calculator-app/src/main/resources/templates/travel-calculate-premium-v2.html
@@ -38,9 +38,9 @@ <h2>Travel Insurance Premium Calculation</h2>
         <textarea id="selectedRisks" th:field="*{selectedRisks}" class="form-control"></textarea>
     </div>
 
-    <div id="persons-container">
+    <div id="persons-container" class="mb-3">
         <!-- PersonRequestDTO dynamic forms will be added here -->
-        <div th:each="person, personStat : *{persons}" class="card shadow-sm mt-3">
+        <div th:each="person, personStat : *{persons}" class="card person-card shadow-sm mt-3">
             <div class="card-body">
                 <h3>Person <span th:text="${personStat.index + 1}"></span></h3>
                 <div>
@@ -88,10 +88,12 @@ <h3>Person <span th:text="${personStat.index + 1}"></span></h3>
         </div>
     </div>
 
-    <button type="button" onclick="addPerson()" class="btn btn-primary">Add Person</button>
-    <button type="button" onclick="removePerson()" class="btn btn-danger">Remove Person</button>
-    <button type="submit" class="btn btn-success">Calculate Premium</button>
-    <button type="button" onclick="clearForm()" class="btn btn-secondary">Clear</button>
+    <div class="mb-4">
+        <button type="button" onclick="addPerson()" class="btn btn-primary">Add Person</button>
+        <button type="button" onclick="removePerson()" class="btn btn-danger">Remove Person</button>
+        <button type="submit" class="btn btn-success">Calculate Premium</button>
+        <button type="button" onclick="clearForm()" class="btn btn-secondary">Clear</button>
+    </div>
 </form>
 
 <!-- Added condition if response != null -->
@@ -120,89 +122,16 @@ <h3>Travel Insurance Premium Calculation ERRORS</h3>
         <tr th:each="error : ${response.errors}">
     <td th:text="${error.errorCode}"/>
     <td th:text="${error.description}"/>
-
-
     </tr>
     </td>
-
     <h3>
         <label th:if="${response.agreementPremium != null}"
                th:text="'AGREEMENT PREMIUM: ' + ${response.agreementPremium}"></label>
     </h3>
-
 </div>
-<script>
-    function addPerson() {
-        let personsContainer = document.getElementById("persons-container");
-        let index = document.getElementsByClassName("person-form").length;
-        let personTemplate = `
-            <div class="card shadow-sm mt-3">
-                <div class="card-body">
-                    <h3 class="text-primary">Person ${index + 1}</h3>
-
-                    <div class="mb-3">
-                        <label class="form-label" for="persons[${index}].personFirstName">First Name:</label>
-                        <input type="text" class="form-control" id="persons[${index}].personFirstName" name="persons[${index}].personFirstName" />
-                    </div>
-
-                    <div class="mb-3">
-                        <label class="form-label" for="persons[${index}].personLastName">Last Name:</label>
-                        <input type="text" class="form-control" id="persons[${index}].personLastName" name="persons[${index}].personLastName" />
-                    </div>
-
-                    <div class="mb-3">
-                        <label class="form-label" for="persons[${index}].personalCode">Personal Code:</label>
-                        <input type="text" class="form-control" id="persons[${index}].personalCode" name="persons[${index}].personalCode" />
-                    </div>
-
-                    <div class="mb-3">
-                        <label class="form-label" for="persons[${index}].personBirthDate">Birth Date:</label>
-                        <input type="date" class="form-control" id="persons[${index}].personBirthDate" name="persons[${index}].personBirthDate" />
-                    </div>
-
-                    <div class="mb-3">
-                        <label class="form-label" for="persons[${index}].medicalRiskLimitLevel">Medical Risk Limit Level:</label>
-                        <input type="text" class="form-control" id="persons[${index}].medicalRiskLimitLevel" name="persons[${index}].medicalRiskLimitLevel" />
-                    </div>
-
-                    <div class="mb-3">
-                        <label class="form-label" for="persons[${index}].travelCost">Travel Cost:</label>
-                        <input type="text" class="form-control" id="persons[${index}].travelCost" name="persons[${index}].travelCost" />
-                    </div>
-                </div>
-            </div>`;
-        personsContainer.insertAdjacentHTML('beforeend', personTemplate);
-    }
-
-    function removePerson() {
-        let personsContainer = document.getElementById("persons-container");
-        let personForms = document.getElementsByClassName("person-form");
-        if (personForms.length > 0) {
-            personsContainer.removeChild(personForms[personForms.length - 1]);
-        }
-    }
-
-    document.addEventListener('DOMContentLoaded', (event) => {
-        const agreementDateFrom = document.getElementById('agreementDateFrom');
-        const agreementDateTo= document.getElementById('agreementDateTo');
-
-        const today = new Date();
-
-        const dateFrom = new Date();
-        dateFrom.setDate(today.getDate() + 1);
-
-        const dateTo = new Date();
-        dateTo.setDate(today.getDate() + 2);
-
-        agreementDateFrom.value = dateFrom.toISOString().split('T')[0];
-        agreementDateTo.value = dateTo.toISOString().split('T')[0];
-    });
-
-    function clearForm() {
-        window.location.href = window.location.href.split('?')[0];
-    }
 
-</script>
+<!-- JavaScript for adding persons -->
+<script th:src="@{/js/person.js}"></script>
 
 <!-- Bootstrap JavaScript -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>