diff --git a/module_activity/api/views.py b/module_activity/api/views.py
index ac22560..b230e54 100644
--- a/module_activity/api/views.py
+++ b/module_activity/api/views.py
@@ -12,10 +12,13 @@ from module_project import constants, date_utils
 from module_project.service import OneSignalNotificationService
 from module_project.utils import ApiResponse
 
-from ..models import (BeverageRecord, FoodIngredientRecord, FoodIngredintDataset, Bowel, ChronicCondition, FoodRecord, Intolerance, MealRecord,
-                      MealSymptomRecord, Medication, PastTreatment,
-                      PrincipalHealthData, Symptoms)
-from .serializers import (FoodDatasetSerializer, FoodIngredientDatasetSerializer, BowelSerializer, ChronicConditionSerializer,
+from ..models import (BeverageRecord, Bowel, ChronicCondition,
+                      FoodIngredientRecord, FoodIngredintDataset, FoodRecord,
+                      Intolerance, MealRecord, MealSymptomRecord, Medication,
+                      PastTreatment, PrincipalHealthData, Symptoms)
+from .serializers import (BowelSerializer, ChronicConditionSerializer,
+                          FoodDatasetSerializer,
+                          FoodIngredientDatasetSerializer,
                           IAmPrincipalSerializer, IntoleranceSerializer,
                           MealRecordSerializer, MealSymptomRecordSerializer,
                           MedicationSerializer, PastTreatmentSerializer,
diff --git a/templates/cdn_through_html/flatpicker_cdn_js.html b/templates/cdn_through_html/flatpicker_cdn_js.html
index fd8581b..bebc98c 100644
--- a/templates/cdn_through_html/flatpicker_cdn_js.html
+++ b/templates/cdn_through_html/flatpicker_cdn_js.html
@@ -1,4 +1,2 @@
 {% load static%}
-    <script src="{% static 'src/plugins/src/flatpickr/flatpickr.js' %}"></script>
-
-    <script src="{% static 'src/plugins/src/flatpickr/custom-flatpickr.js' %}"></script>
\ No newline at end of file
+    <script src="{% static 'src/plugins/src/flatpickr/flatpickr.js' %}"></script>
\ No newline at end of file
diff --git a/templates/module_iam/iam_principal_add.html b/templates/module_iam/iam_principal_add.html
index 71c071a..fcd15d2 100644
--- a/templates/module_iam/iam_principal_add.html
+++ b/templates/module_iam/iam_principal_add.html
@@ -22,7 +22,7 @@
                 <div class="statbox widget box box-shadow">
                     <div class="widget-content widget-content-area">
 
-                        <form method="post">
+                        <form method="post" id="principalForm">
                             {% csrf_token %}
                             {% include 'base_structure/includes/dynamic_template_form.html' with form=form %}
                             <div class="mt-4 mb-0">
@@ -41,6 +41,106 @@
 {% endblock content %}
 
 {% block javascript %}
-    <!-- include required js cdn link through html here -->
 
+<!-- include required js cdn link through html here -->
+<script>
+    $(document).ready(function() {
+
+        // Add custom validation method for email
+        $.validator.addMethod("validEmail", function(value, element) {
+            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(value);
+        }, "Please enter a valid email address.");
+
+        // Add custom validation method to check for special characters
+        $.validator.addMethod("noSpecialChars", function(value, element) {
+            return /^[a-zA-Z\s]*$/.test(value); // Allow only letters and whitespace
+        }, "Please enter only letters and spaces.");
+    
+        // Add custom validation method to check for starting with a letter
+        $.validator.addMethod("startsWithLetter", function(value, element) {
+            return /^[a-zA-Z]/.test(value); // Check if the value starts with a letter
+        }, "Please start with a letter.");
+    
+        // Add custom validation method for password complexity
+        $.validator.addMethod("complexPassword", function(value, element) {
+            return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+}{":;'?/>.<,])(?=.*[^\w\d\s])/.test(value);
+        }, "Password must include at least one uppercase letter, one lowercase letter, one number, and special characters.");
+    
+        // Initialize form validation
+        $("#principalForm").validate({
+            rules: {
+                email: {
+                    required: true,
+                    validEmail: true
+                },
+                first_name: {
+                    required: true,
+                    minlength: 2,
+                    maxlength: 20,
+                    noSpecialChars: true,
+                    startsWithLetter: true
+                },
+                last_name: {
+                    required: true,
+                    minlength: 2,
+                    maxlength: 20,
+                    noSpecialChars: true,
+                    startsWithLetter: true
+                },
+                password: {
+                    required: true,
+                    minlength: 6,
+                    complexPassword: true
+                },
+                confirm_password: {
+                    required: true,
+                    equalTo: '#id_password'
+                }
+            },
+            messages: {
+                email: {
+                    required: "Please enter your email address.",
+                    validEmail: "Please enter a valid email address."
+                },
+                first_name: {
+                    required: "Please enter your first name.",
+                    minlength: "First name must be at least 2 characters.",
+                    maxlength: "First name must not exceed 20 characters.",
+                    noSpecialChars: "Please enter only letters and spaces.",
+                    startsWithLetter: "First name must start with a letter."
+                },
+                last_name: {
+                    required: "Please enter your last name.",
+                    minlength: "Last name must be at least 2 characters.",
+                    maxlength: "Last name must not exceed 20 characters.",
+                    noSpecialChars: "Please enter only letters and spaces.",
+                    startsWithLetter: "Last name must start with a letter."
+                },
+                password: {
+                    required: "Please enter a new password.",
+                    minlength: "Password must be at least 6 characters."
+                },
+                confirm_password: {
+                    required: "Please confirm your new password.",
+                    equalTo: "Passwords do not match."
+                }
+            },
+            errorElement: 'div',
+            errorPlacement: function(error, element) {
+                error.addClass('invalid-feedback');
+                $(element).closest('.form-group').append(error);
+            },
+            highlight: function(element, errorClass, validClass) {
+                $(element).addClass('is-invalid').removeClass('is-valid');
+            },
+            unhighlight: function(element, errorClass, validClass) {
+                $(element).removeClass('is-invalid').addClass('is-valid');
+            },
+            submitHandler: function(form) {
+                // Disable the submit button to prevent multiple submissions
+                $('button[type="submit"]').prop('disabled', true);
+            }
+        });
+    });
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/module_iam/profile_details_edit.html b/templates/module_iam/profile_details_edit.html
index 91140b0..cee1889 100644
--- a/templates/module_iam/profile_details_edit.html
+++ b/templates/module_iam/profile_details_edit.html
@@ -3,6 +3,7 @@
 {% block stylesheet %}
 <!-- include required css cdn link through html here -->
 {% include "cdn_through_html/filepond_cdn_css.html" %}
+{% include "cdn_through_html/flatpicker_cdn_css.html" %}
 
 {% endblock %}
 
@@ -45,6 +46,7 @@
 
 <!-- include required css cdn link through html here -->
 {% include "cdn_through_html/filepond_cdn_js.html" %}
+{% include "cdn_through_html/flatpicker_cdn_js.html" %}
 
 
 <script>
@@ -79,6 +81,13 @@
     }
 
     $(document).ready(function() {
+        // Initialize datetime picker
+        var today = new Date().toISOString().split("T")[0];
+        $('#id_date_of_birth').flatpickr({
+            format: 'YYYY-MM-DD', // Set the date format to match your validation rule
+            maxDate: today
+        });
+        
         // Add custom validation method to check for special characters
         $.validator.addMethod("noSpecialChars", function(value, element) {
             return /^[a-zA-Z\s]*$/.test(value); // Allow only letters and whitespace
@@ -110,7 +119,6 @@
                     required: true,
                     date: true,
                     dateISO: true, // Check for ISO date format (YYYY-MM-DD)
-                    pattern: /^\d{4}-\d{2}-\d{2}$/ // Custom pattern for YYYY-MM-DD format
                 },
                 gender: {
                     required: true
@@ -126,14 +134,14 @@
                 first_name: {
                     required: "Please enter your first name.",
                     minlength: "First name must be at least 2 characters.",
-                    maxlength: "First name must not exceed 15 characters.",
+                    maxlength: "First name must not exceed 20 characters.",
                     noSpecialChars: "Please enter only letters and spaces.",
                     startsWithLetter: "First name must start with a letter."
                 },
                 last_name: {
                     required: "Please enter your last name.",
                     minlength: "Last name must be at least 2 characters.",
-                    maxlength: "First name must not exceed 15 characters.",
+                    maxlength: "First name must not exceed 20 characters.",
                     noSpecialChars: "Please enter only letters and spaces.",
                     startsWithLetter: "Last name must start with a letter."
                 },
@@ -141,7 +149,6 @@
                     required: "Please enter your date of birth.",
                     date: "Please enter a valid date in the format YYYY-MM-DD.",
                     dateISO: "Please enter a valid date in the format YYYY-MM-DD.",
-                    pattern: "Please enter a valid date in the format YYYY-MM-DD."
                 },
                 gender: {
                     required: "Please select your gender."
@@ -164,11 +171,6 @@
             unhighlight: function(element, errorClass, validClass) {
                 $(element).removeClass('is-invalid').addClass('is-valid');
             },
-            submitHandler: function(form, event) {
-                event.preventDefault(); // Prevent default form submission on validation failure
-                // You can now perform additional actions before submitting the form (optional)
-                form.submit(); // Submit the form if validation passes (optional)
-              }
         });
     });