diff --git a/necysc_app/models.py b/necysc_app/models.py
index 7ad0a470..7f798a22 100644
--- a/necysc_app/models.py
+++ b/necysc_app/models.py
@@ -6,7 +6,6 @@
 from solo.models import SingletonModel
 
 
-
 class Applicant(models.Model):
     # choices for application status
     APP_STATUS_CHOICES = {
@@ -42,9 +41,9 @@ class Applicant(models.Model):
         "AL": "Adult L",
         "AX": "Adult XL",
     }
-    
+
     # choices for program data
-    PROGRAM_CHOICES={
+    PROGRAM_CHOICES = {
         "D": "Day",
         "ON": "Overnight",
         "CIT": "CIT",
@@ -54,13 +53,14 @@ class Applicant(models.Model):
     }
 
     # choices for forms
-    HEALTH_FORM_RECEIVED_CHOICES={
+    HEALTH_FORM_RECEIVED_CHOICES = {
         "NS": "Not Submitted",
         "P": "Pending",
         "A": "Approved",
     }
-    
-    user = models.ForeignKey(User, on_delete=models.CASCADE, blank=True, null=True)
+
+    user = models.ForeignKey(
+        User, on_delete=models.CASCADE, blank=True, null=True)
 
     # status data
     created_at = models.DateTimeField(auto_now_add=True)
@@ -69,7 +69,7 @@ class Applicant(models.Model):
     app_status = models.CharField(
         max_length=1,
         choices=APP_STATUS_CHOICES,
-         default= "I"
+        default="I"
     )
     # this should be hidden from the user
     health_record_status = models.CharField(
@@ -79,38 +79,55 @@ class Applicant(models.Model):
     )
 
     # personal data
-    applicant_fname = models.CharField(max_length=200, verbose_name="First Name")
-    applicant_lname = models.CharField(max_length=200, verbose_name="Last Name")
-    applicant_chinese_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Chinese Name") # optional
+    applicant_fname = models.CharField(
+        max_length=200, verbose_name="First Name")
+    applicant_lname = models.CharField(
+        max_length=200, verbose_name="Last Name")
+    applicant_chinese_name = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Chinese Name")  # optional
     applicant_email = models.EmailField(verbose_name="Email")
 
-    parent1_fname = models.CharField(max_length=200, verbose_name="Primary Contact First Name")
-    parent1_lname = models.CharField(max_length=200, verbose_name="Primary Contact Last Name")
+    parent1_fname = models.CharField(
+        max_length=200, verbose_name="Primary Contact First Name")
+    parent1_lname = models.CharField(
+        max_length=200, verbose_name="Primary Contact Last Name")
     parent1_relationship = models.CharField(
         max_length=1,
         choices=PARENT_RELATIONSHIP_CHOICES,
         verbose_name="Primary Contact Relationship"
     )
-    parent1_phone = models.CharField(max_length=15, verbose_name="Primary Contact Phone")
+    parent1_phone = models.CharField(
+        max_length=15, verbose_name="Primary Contact Phone")
     parent1_email = models.EmailField(verbose_name="Primary Contact Email")
-    parent1_for_POD = models.BooleanField(verbose_name="Primary Contact as POD")
+    parent1_for_POD = models.BooleanField(
+        verbose_name="Primary Contact as POD")
 
-    parent2_fname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Secondary Contact First Name") # optional
-    parent2_lname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Secondary Contact Last Name") # optional
+    parent2_fname = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Secondary Contact First Name")  # optional
+    parent2_lname = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Secondary Contact Last Name")  # optional
     parent2_relationship = models.CharField(
         max_length=1,
         choices=PARENT_RELATIONSHIP_CHOICES,
-        blank=True, null=True, verbose_name="Secondary Contact Relationship") # optional
-    parent2_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Secondary Contact Phone") # optional
-    parent2_email = models.EmailField(blank=True, null=True, verbose_name="Secondary Contact Email") # optional
-    parent2_for_POD = models.BooleanField(blank=True, null=True, verbose_name="Secondary Contact as POD") # optional
+        blank=True, null=True, verbose_name="Secondary Contact Relationship")  # optional
+    parent2_phone = models.CharField(
+        max_length=15, blank=True, null=True, verbose_name="Secondary Contact Phone")  # optional
+    parent2_email = models.EmailField(
+        blank=True, null=True, verbose_name="Secondary Contact Email")  # optional
+    parent2_for_POD = models.BooleanField(
+        blank=True, null=True, verbose_name="Secondary Contact as POD")  # optional
 
-    interest_in_POD_lead = models.BooleanField(verbose_name="Interest in POD Lead")
+    interest_in_POD_lead = models.BooleanField(
+        verbose_name="Interest in POD Lead")
 
-    additional_emergency_contact_fname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact First Name") # optional
-    additional_emergency_contact_lname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact Last Name") # optional
-    additional_emergency_contact_relationship = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact Relationship") # optional
-    additional_emergency_contact_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Emergency Contact Phone") # optional
+    additional_emergency_contact_fname = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Emergency Contact First Name")  # optional
+    additional_emergency_contact_lname = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Emergency Contact Last Name")  # optional
+    additional_emergency_contact_relationship = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Emergency Contact Relationship")  # optional
+    additional_emergency_contact_phone = models.CharField(
+        max_length=15, blank=True, null=True, verbose_name="Emergency Contact Phone")  # optional
 
     street_address = models.CharField(max_length=200, verbose_name="Street")
     city = models.CharField(max_length=200, verbose_name="City")
@@ -122,7 +139,8 @@ class Applicant(models.Model):
         max_length=1,
         choices=SEX_CHOICES,
         verbose_name="Gender")
-    applicant_grade = models.IntegerField(validators=[MinValueValidator(0)], verbose_name="School Grade")
+    applicant_grade = models.IntegerField(
+        validators=[MinValueValidator(0)], verbose_name="School Grade")
     applicant_shirt_size = models.CharField(
         max_length=2,
         choices=SHIRT_SIZE_CHOICES,
@@ -136,13 +154,18 @@ class Applicant(models.Model):
         verbose_name="Program"
     )
     payment_received = models.BooleanField(default=False)
-    payment_total = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    payment_camp = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    payment_donation = models.DecimalField(max_digits=10, decimal_places=2, blank=True, null=True, default=0)
-    payment_pod = models.DecimalField(max_digits=10, decimal_places=2, blank=True, null=True, default=0)
+    payment_total = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
+    payment_camp = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
+    payment_donation = models.DecimalField(
+        max_digits=10, decimal_places=2, blank=True, null=True, default=0)
+    payment_pod = models.DecimalField(
+        max_digits=10, decimal_places=2, blank=True, null=True, default=0)
 
     # other
-    allowed_pickup_persons = models.CharField(max_length=500, blank=True, null=True)
+    allowed_pickup_persons = models.CharField(
+        max_length=500, blank=True, null=True)
     financial_aid_requested = models.BooleanField(default=False)
     listing_on_weekbook = models.BooleanField(default=False)
     camper_contact_email = models.EmailField(blank=True, null=True)
@@ -151,29 +174,38 @@ class Applicant(models.Model):
     available_for_carpool = models.BooleanField(default=False)
     referrals = models.CharField(max_length=200, blank=True, null=True)
     heard_from = models.CharField(max_length=200, blank=True, null=True)
-    preferred_roommate = models.CharField(max_length=200, blank=True, null=True)
+    preferred_roommate = models.CharField(
+        max_length=200, blank=True, null=True)
 
     # forms
     health_form_a_received = models.BooleanField(default=False)
     health_form_b_received = models.BooleanField(default=False)
     medication_slip_received = models.BooleanField(default=False)
-    parent1_cori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent1_sori_status = models.CharField(max_length=10, blank=True, null=True)
+    parent1_cori_status = models.CharField(
+        max_length=10, blank=True, null=True)
+    parent1_sori_status = models.CharField(
+        max_length=10, blank=True, null=True)
     parent1_id_status = models.CharField(max_length=10, blank=True, null=True)
-    parent2_cori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent2_sori_status = models.CharField(max_length=10, blank=True, null=True)
+    parent2_cori_status = models.CharField(
+        max_length=10, blank=True, null=True)
+    parent2_sori_status = models.CharField(
+        max_length=10, blank=True, null=True)
     parent2_id_status = models.CharField(max_length=10, blank=True, null=True)
     camper_cori_status = models.CharField(max_length=10, blank=True, null=True)
     camper_sori_status = models.CharField(max_length=10, blank=True, null=True)
     camper_id_status = models.CharField(max_length=10, blank=True, null=True)
     camp_rule_agreement = models.BooleanField(default=False)
     liability_agreement = models.BooleanField(default=False)
-    
+
     # medical data
-    insurance_provider = models.CharField(max_length=200, blank=True, null=True, verbose_name="Health Insurance Provider")
-    subscriber_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Insurance Subscriber Name")
-    primary_physician_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Physician Name")
-    primary_physician_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Physician Phone")
+    insurance_provider = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Health Insurance Provider")
+    subscriber_name = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Insurance Subscriber Name")
+    primary_physician_name = models.CharField(
+        max_length=200, blank=True, null=True, verbose_name="Physician Name")
+    primary_physician_phone = models.CharField(
+        max_length=15, blank=True, null=True, verbose_name="Physician Phone")
 
     # grant permission to questions - if left false contact guardian(s)
     grant_hospital_permission = models.BooleanField(default=False)
@@ -184,80 +216,102 @@ class Applicant(models.Model):
     grant_skin_treatment_permission = models.BooleanField(default=False)
 
     allergies = models.BooleanField(default=False)
-    allergies_description = models.CharField(max_length=200, blank=True, null=True)
-    initial_for_allergy_treatment = models.CharField(max_length=200, blank=True, null=True)
+    allergies_description = models.CharField(
+        max_length=200, blank=True, null=True)
+    initial_for_allergy_treatment = models.CharField(
+        max_length=200, blank=True, null=True)
     epi_pen_prescribed = models.BooleanField(default=False)
-    
-    social_emotional_concerns = models.CharField(max_length=200, blank=True, null=True)
-    
+
+    social_emotional_concerns = models.CharField(
+        max_length=200, blank=True, null=True)
+
     wear_glasses = models.BooleanField(default=False)
     wear_contacts = models.BooleanField(default=False)
     wear_hearing_aids = models.BooleanField(default=False)
 
     medication = models.BooleanField(default=False)
-    medication_description = models.CharField(max_length=200, blank=True, null=True)
+    medication_description = models.CharField(
+        max_length=200, blank=True, null=True)
+
+    opt_out_activities = models.CharField(
+        max_length=200, blank=True, null=True)
 
-    opt_out_activities = models.CharField(max_length=200, blank=True, null=True)
-    
     # hidden in form
     medical_comments = models.CharField(max_length=200, blank=True, null=True)
 
     signature = models.CharField(max_length=200, blank=True, null=True)
 
-
     # registration
-    
+
     # TODO: hidden in form
-    group_id = models.CharField(max_length=200, blank=True, null=True, default="0")
+    group_id = models.CharField(
+        max_length=200, blank=True, null=True, default="0")
     room_id = models.CharField(max_length=200, blank=True, null=True)
     internal_comments = models.CharField(max_length=200, blank=True, null=True)
 
+
 class ApplicantHealth(Applicant):
     class Meta:
         proxy = True
         app_label = Applicant._meta.app_label
         verbose_name = "Applicant Health Info"
+
+
 class CampDirectory(Applicant):
     class Meta:
         proxy = True
         app_label = Applicant._meta.app_label
         verbose_name = "Camp Directory"
+
+
 class POD(Applicant):
     class Meta:
         proxy = True
         app_label = Applicant._meta.app_label
-        verbose_name = "Parent On Duty" 
+        verbose_name = "Parent On Duty"
+
+
 class CarpoolApplicant(Applicant):
     class Meta:
         proxy = True
         app_label = Applicant._meta.app_label
         verbose_name = "Carpool Directory"
+
+
 class CamperReferral(Applicant):
     class Meta:
         proxy = True
         app_label = Applicant._meta.app_label
         verbose_name = "Camper Referral"
+
+
 class RoomateRequest(Applicant):
     class Meta:
         proxy = True
         app_label = Applicant._meta.app_label
         verbose_name = "Roomate Request"
 
+
 class GlobalData(SingletonModel):
-    day_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    ON_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    EA_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    CIT_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
+    day_camp_cost = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
+    ON_camp_cost = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
+    EA_camp_cost = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
+    CIT_camp_cost = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
     # refers to both counselor and ra cost
-    RA_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    OPs_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    POD_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
+    RA_camp_cost = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
+    OPs_camp_cost = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
+    POD_camp_cost = models.DecimalField(
+        max_digits=10, decimal_places=2, default=0)
 
     def __str__(self):
         return "Global Data Settings"
-    
+
     class Meta:
         verbose_name = "Global Data"
         verbose_name_plural = "Global Data"
-
-
diff --git a/necysc_app/static/necysc_app/about.css b/necysc_app/static/necysc_app/about.css
index bdc9d8e3..e3e59dbd 100644
--- a/necysc_app/static/necysc_app/about.css
+++ b/necysc_app/static/necysc_app/about.css
@@ -1,7 +1,8 @@
 .hero-section {
-  background-image: url("./images/programs_hero.jpg");
+  background-image: url("./images/necyscbannerimage.jpg");
 }
 
-h1, h4{
+h1,
+h4 {
   color: #4e598c;
 }
diff --git a/necysc_app/static/necysc_app/images/.DS_Store b/necysc_app/static/necysc_app/images/.DS_Store
new file mode 100644
index 00000000..d7c02640
Binary files /dev/null and b/necysc_app/static/necysc_app/images/.DS_Store differ
diff --git a/necysc_app/static/necysc_app/images/headshots/charles.jpg b/necysc_app/static/necysc_app/images/headshots/charles.jpg
new file mode 100644
index 00000000..f1ad3fbc
Binary files /dev/null and b/necysc_app/static/necysc_app/images/headshots/charles.jpg differ
diff --git a/necysc_app/static/necysc_app/images/headshots/chris_chiu.jpg b/necysc_app/static/necysc_app/images/headshots/chris_chiu.jpg
new file mode 100644
index 00000000..f4520b07
Binary files /dev/null and b/necysc_app/static/necysc_app/images/headshots/chris_chiu.jpg differ
diff --git a/necysc_app/static/necysc_app/images/headshots/mikayla.jpg b/necysc_app/static/necysc_app/images/headshots/mikayla.jpg
new file mode 100644
index 00000000..329a935e
Binary files /dev/null and b/necysc_app/static/necysc_app/images/headshots/mikayla.jpg differ
diff --git a/necysc_app/static/necysc_app/images/headshots/paul_eska.jpg b/necysc_app/static/necysc_app/images/headshots/paul_eska.jpg
new file mode 100644
index 00000000..9a31656a
Binary files /dev/null and b/necysc_app/static/necysc_app/images/headshots/paul_eska.jpg differ
diff --git a/necysc_app/static/necysc_app/images/home_hero_banner.gif b/necysc_app/static/necysc_app/images/home_hero_banner.gif
new file mode 100644
index 00000000..18b20129
Binary files /dev/null and b/necysc_app/static/necysc_app/images/home_hero_banner.gif differ
diff --git a/necysc_app/static/necysc_app/login.css b/necysc_app/static/necysc_app/login.css
deleted file mode 100644
index ebeef5fb..00000000
--- a/necysc_app/static/necysc_app/login.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.login_page {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-  width: 100%;
-  height: 90vh;
-}
-
-.login_form {
-  width: 50%;
-  height: 100%;
-  padding: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.login_form_body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 35px;
-  flex-direction: column;
-  width: 100%;
-}
-
-.login_form_body #id_email,
-.login_form_body #id_password {
-  width: 300px;
-  padding: 10px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-}
-
-/* .login_form_body input[type="submit"] {
-    background-color: #2E6D9E;
-    color: white;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    width: 50%;
-    border-radius: 50px;
-}
-
-.login_form_body input[type="submit"]:hover {
-    transition: 0.3s;
-    background-color: #4E2498;
-} */
-
-.register_form {
-  width: 50%;
-  height: 100%;
-  padding: 60px;
-  padding-left: 150px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  background-image: url("./images/king.png");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  flex-direction: column;
-  gap: 50px;
-  text-align: center;
-  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
-}
-
-.register_form h1 {
-  font-size: 35px;
-}
-
-.register_form p {
-  font-size: 15px;
-}
-
-/* .register_form a {
-  border: 1px solid white;
-  padding: 10px 20px;
-  color: white;
-  background-color: transparent;
-  text-decoration: none;
-  width: 350px;
-  font-size: 15px;
-  border-radius: 50px;
-  transition: background-color 0.3s ease;
-}
-
-.register_form a:hover {
-  color: white;
-  background-color: rgba(255, 255, 255, 0.3);
-}
-
-.register_form::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.35);
-  z-index: -1;
-  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
-} */
diff --git a/necysc_app/static/necysc_app/register.css b/necysc_app/static/necysc_app/register.css
deleted file mode 100644
index 611c4b19..00000000
--- a/necysc_app/static/necysc_app/register.css
+++ /dev/null
@@ -1,120 +0,0 @@
-/* Register Page Container */
-.register_page {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    flex-direction: row-reverse;
-    height: 90vh;
-}
-
-/* Register Form Section */
-.register_form {
-    width: 50%;
-    height: 100%;
-    padding-left: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    gap: 30px;
-}
-
-.register_form h1 {
-    font-size: 50px;
-}
-
-.register_form_body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 35px;
-    flex-direction: column;
-    width: 100%;
-}
-
-.register_form_body #id_username, 
-.register_form_body #id_email, 
-.register_form_body #id_password1, 
-.register_form_body #id_password2 {
-    width: 300px;
-    padding: 10px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-}
-
-/* Login Redirect Section with Triangle */
-.login_redirect {
-    width: 50%;
-    height: 100%;
-    padding: 60px;
-    padding-right: 150px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    background-image: url("./images/night.png");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    z-index: 1;
-    color: white;
-    flex-direction: column;
-    gap: 50px;
-    text-align: center;
-    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%); /* Triangle shape */
-}
-
-.login_redirect h2 {
-    font-size: 35px;
-}
-
-.login_redirect p {
-    font-size: 15px;
-}
-
-.login_redirect a {
-    border: 1px solid white;
-    padding: 10px 20px;
-    color: white;
-    background-color: transparent;
-    text-decoration: none;
-    width: 350px;
-    font-size: 15px;
-    border-radius: 50px;
-    transition: background-color 0.3s ease;
-}
-
-.login_redirect a:hover {
-    color: white;
-    background-color: rgba(255, 255, 255, 0.3);
-}
-
-/* Dark overlay on the image to ensure text readability */
-.login_redirect::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.35);
-    z-index: -1;
-    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%); /* Ensures overlay follows the triangle shape */
-}
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    width: 50%;
-    border-radius: 50px;
-  }
-  
-  .btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-  }
\ No newline at end of file
diff --git a/necysc_app/templates/necysc_app/applicant/application_detail.html b/necysc_app/templates/necysc_app/applicant/application_detail.html
index 4ba31634..937ad04a 100644
--- a/necysc_app/templates/necysc_app/applicant/application_detail.html
+++ b/necysc_app/templates/necysc_app/applicant/application_detail.html
@@ -6,8 +6,9 @@
 {% block content %}
 <link rel="stylesheet" href="{% static 'necysc_app/application_detail.css' %}">
 
-<h1>Application Details</h1>
-
+<div>
+    <a href="{% url 'necysc_app:home' %}" class="btn-purple rounded-pill">Back to Home</a>
+</div>
 <div class="application-detail">
     <div class="application-detail-header">
         <h2>Name: {{ application.applicant_fname }} {{ application.applicant_lname }}</h2>
diff --git a/necysc_app/templates/necysc_app/applicant/index.html b/necysc_app/templates/necysc_app/applicant/index.html
index 9392bf79..28e9497c 100644
--- a/necysc_app/templates/necysc_app/applicant/index.html
+++ b/necysc_app/templates/necysc_app/applicant/index.html
@@ -123,10 +123,12 @@ <h5 class="card-title col-md-8">
                     <h5 class="card-title col-md-4 float-end">
                         {% if application.app_status == 'A' %}
                         <span class="badge bg-success">Accepted</span>
-                        {% elif application.app_status == 'P' %}
+                        {% elif application.app_status == 'I' %}
                         <span class="badge bg-secondary">Pending</span>
-                        {% else %}
+                        {% elif application.app_status == 'R' %}
                         <span class="badge bg-danger">Rejected</span>
+                        {% else %}
+                        <span class="badge bg-warning">Incomplete</span>
                         {% endif %}
                     </h5>
                 </div>
diff --git a/necysc_app/templates/necysc_app/applicant/login.html b/necysc_app/templates/necysc_app/applicant/login.html
index 17d4440f..abef632b 100644
--- a/necysc_app/templates/necysc_app/applicant/login.html
+++ b/necysc_app/templates/necysc_app/applicant/login.html
@@ -1,7 +1,119 @@
 {% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
 Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
 
+<style>
+    .login_page {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+        width: 100%;
+        height: 90vh;
+      }
+      
+      .login_form {
+        width: 50%;
+        height: 100%;
+        padding: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: 30px;
+      }
+      
+      .login_form_body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 35px;
+        flex-direction: column;
+        width: 100%;
+      }
+      
+      .login_form_body #id_email,
+      .login_form_body #id_password {
+        width: 300px;
+        padding: 10px;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+      }
+      
+      /* .login_form_body input[type="submit"] {
+          background-color: #2E6D9E;
+          color: white;
+          border: none;
+          padding: 10px;
+          cursor: pointer;
+          width: 50%;
+          border-radius: 50px;
+      }
+      
+      .login_form_body input[type="submit"]:hover {
+          transition: 0.3s;
+          background-color: #4E2498;
+      } */
+      
+      .register_form {
+        width: 50%;
+        height: 100%;
+        padding: 60px;
+        padding-left: 150px;
+      
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        background-image: url("{% static 'necysc_app/images/king.png'%}");
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        color: white;
+        flex-direction: column;
+        gap: 50px;
+        text-align: center;
+        clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
+      }
+
+      .register_form::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.6);
+      }
+      
+      .register_form h2 {
+        font-size: 35px;
+        z-index: 2;
+      }
+      
+      .register_form p {
+        font-size: 15px;
+        z-index: 2;
+      }
+      
+      .register_form a {
+        border: 1px solid white;
+        padding: 10px 20px;
+        color: white;
+        background-color: transparent;
+        text-decoration: none;
+        width: 350px;
+        font-size: 15px;
+        border-radius: 50px;
+        transition: background-color 0.3s ease;
+        z-index: 2;
+      }
+      
+      .register_form a:hover {
+        color: white;
+        background-color: rgba(255, 255, 255, 0.3);
+        z-index: 2;
+      }
+</style>
 <div class="login_page">
     <!-- Login Form -->
     <div class="login_form">
@@ -22,7 +134,7 @@ <h1>Welcome Back!</h1>
                             border-radius: 20px;
                             display: inline-block;
                             text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
+                    class="fw-bold w-50" type="submit" value="Login" name="Login User">
         </form>
         
         {% if form.errors %}
@@ -39,7 +151,7 @@ <h1>Welcome Back!</h1>
     <div class="register_form">
         <h2>Don't Have an Account?</h2>
         <p>Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
+        <a class="btn " href="{% url 'necysc_app:register' %}">Sign Up</a>
     </div>
     <script>
         var form_fields = document.getElementsByTagName('input')
diff --git a/necysc_app/templates/necysc_app/applicant/register.html b/necysc_app/templates/necysc_app/applicant/register.html
index 04c1246b..bcd53222 100644
--- a/necysc_app/templates/necysc_app/applicant/register.html
+++ b/necysc_app/templates/necysc_app/applicant/register.html
@@ -5,11 +5,134 @@
 {% block title %} Register {% endblock %}
 
 {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/register.css' %}">
 
+<style>
+    /* Register Page Container */
+.register_page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    flex-direction: row-reverse;
+    height: 90vh;
+}
+
+/* Register Form Section */
+.register_form {
+    width: 50%;
+    height: 100%;
+    padding-left: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.register_form h1 {
+    font-size: 50px;
+}
+
+.register_form_body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 35px;
+    flex-direction: column;
+    width: 100%;
+}
+
+.register_form_body #id_username, 
+.register_form_body #id_email, 
+.register_form_body #id_password1, 
+.register_form_body #id_password2 {
+    width: 300px;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+/* Login Redirect Section with Triangle */
+.login_redirect {
+    width: 50%;
+    height: 100%;
+    padding: 60px;
+    padding-right: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background-image: url("{% static 'necysc_app/images/night.png' %}");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 1;
+    color: white;
+    flex-direction: column;
+    gap: 50px;
+    text-align: center;
+    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%); /* Triangle shape */
+}
+
+.login_redirect::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.login_redirect h2 {
+    font-size: 35px;
+    z-index: 2;
+}
+
+.login_redirect p {
+    font-size: 15px;
+    z-index: 2;
+}
+
+.login_redirect a {
+    border: 1px solid white;
+    padding: 10px 20px;
+    color: white;
+    background-color: transparent;
+    text-decoration: none;
+    width: 350px;
+    font-size: 15px;
+    border-radius: 50px;
+    transition: background-color 0.3s ease;
+    z-index: 2;
+}
+
+.login_redirect a:hover {
+    color: white;
+    background-color: rgba(255, 255, 255, 0.3);
+    z-index: 2;
+}
+
+.btn-purple {
+    background-color: #4e598c;
+    color: #f9c784;
+    transition: all 0.3s ease;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    width: 50%;
+    border-radius: 50px;
+  }
+  
+  .btn-purple:hover {
+    background-color: #f9c784;
+    color: #ffffff;
+  }
+
+</style>
 <div class="register_page">
     <div class="register_form">
-        <h1 style="color: #4e598c">Create Your Account</h1>
+        <h2 style="color: #4e598c">Create Your Account</h2>
         <form method="POST" action="" class="register_form_body">
             {% csrf_token %}
             <div>
diff --git a/necysc_app/templates/necysc_app/navbar.html b/necysc_app/templates/necysc_app/navbar.html
index 60cd5f98..742f63e9 100644
--- a/necysc_app/templates/necysc_app/navbar.html
+++ b/necysc_app/templates/necysc_app/navbar.html
@@ -1,7 +1,5 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
+{% load static %}
+
     <style>
         a {
             font-weight: bold;
@@ -174,8 +172,6 @@
             color: white;
         }
   </style>
-</head>
-<body>
 
 <!-- navbar sticky -->
 <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
@@ -189,7 +185,7 @@
        
         <div class="col-auto d-none d-xl-block">
             <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-2" style="width: 6rem; height: auto"/>
+                <img src="{% static 'necysc_app/images/logo2.png' %}" alt="Your Image Description" id="logobutton" class="rounded-pill p-2" style="width: 6rem; height: auto"/>
             </a>
         </div>
 
@@ -258,7 +254,4 @@
           {% endif %}
     </div>
     
-</div>
-
-</body>
-</html>
+</div>
\ No newline at end of file
diff --git a/necysc_app/templates/necysc_app/website/about.html b/necysc_app/templates/necysc_app/website/about.html
index 29d9f811..b0473a62 100644
--- a/necysc_app/templates/necysc_app/website/about.html
+++ b/necysc_app/templates/necysc_app/website/about.html
@@ -1,8 +1,6 @@
 {% extends "necysc_app/base.html" %} {% block title %} About Us {% endblock %}
 {% load static %}
 
-{% load static %}
-
 {% block content %}
 
 <link rel="stylesheet" href="{% static 'necysc_app/about.css' %}">
@@ -18,16 +16,17 @@ <h1 class="display-3 fw-bold text-white">About Us</h1>
 
 <section class="ms-md-5 me-md-5 mb-5 mt-5">
 	<div id="aboutus" class="overlay">
-	<h1 class="textleft"><i class="icon-right-circled"></i>About Us</h1>
-	<p>
+	<div class="container">
+		<h1 class="textleft"><i class="icon-right-circled"></i>About Us</h1>
+		<p>
 		Established in 1986, the New England Chinese Youth Summer Camp (NECYSC)
 		is a non-profit organization run by dedicated parents and volunteers.
 		Hosted at Brandeis University, our week-long summer camp is designed for
 		youth aged 6 to 15. A range of programs - including Day, Overnight, and
 		ExplorAsian - are provided, with the primary goal of nurturing cultural
 		appreciation and fostering a strong community spirit.
-	</p>
-	<p>
+		</p>
+		<p>
 		Our campers actively participate in cultural activities like Chinese
 		Yo-yo, Kung-fu, and Calligraphy throughout the day. These are
 		complemented by counselor-led events such as Carnival, Fun In The Sun,
@@ -35,11 +34,117 @@ <h1 class="textleft"><i class="icon-right-circled"></i>About Us</h1>
 		Up. Campers create life-long memories and friendships that go beyond the
 		ordinary camp setting. As the week concludes, each group performs skills
 		they learned during their time at NECYSC for friends and family members.
-	</p>
+		</p>
+	</div>
+
+	<div class="bg-dark" style="height: 2px;"></div>
+</section>
+
+<section class="ms-md-5 me-md-5 mb-5 mt-5">
+	<div class="container mb-5">
+		<div id="meettheteam" class="overlay">
+		<h1 class="textleft"><i class="icon-right-circled"></i>Meet the Team</h1>
+			<div class="row g-4 pt-2">
+				<div class="col-sm-3">
+					<div class="card text-center border-0 bg-light">
+						<div class="card-body px-4 py-4">
+							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/chris_chiu.jpg'%}"></div>
+							<h5 class="fw-bold">Christopher Chiu</h5>
+							<div class="text-muted">
+								Director
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-sm-3">
+					<div class="card text-center border-0 bg-light">
+						<div class="card-body px-4 py-4">
+							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/paul_eska.jpg'%}"></div>
+							<h5 class="fw-bold">Paul Eska</h5>
+							<div class="text-muted">
+								Assistant Director
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-sm-3">
+					<div class="card text-center border-0 bg-light">
+						<div class="card-body px-4 py-4">
+							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/mikayla.jpg'%}"></div>
+							<h5 class="fw-bold">Mikayla Tow</h5>
+							<div class="text-muted">
+								Head Counselor
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-sm-3">
+					<div class="card text-center border-0 bg-light">
+						<div class="card-body px-4 py-4">
+							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="{% static 'necysc_app/images/headshots/charles.jpg'%}"></div>
+							<h5 class="fw-bold">Charles Tang</h5>
+							<div class="text-muted">
+								Head Counselor
+							</div>
+						</div>
+					</div>
+				</div>
+				{% comment %} <div class="col-sm-3">
+					<div class="card text-center border-0 bg-light">
+						<div class="card-body px-4 py-4">
+							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://freefrontend.dev/assets/square.png"></div>
+							<h5 class="fw-bold">Lola Yao</h5>
+							<div class="text-muted">
+								Treasurer
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-sm-3">
+					<div class="card text-center border-0 bg-light">
+						<div class="card-body px-4 py-4">
+							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://freefrontend.dev/assets/square.png"></div>
+							<h5 class="fw-bold">Ivan Yim</h5>
+							<div class="text-muted">
+								Treasurer
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-sm-3">
+					<div class="card text-center border-0 bg-light">
+						<div class="card-body px-4 py-4">
+							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://freefrontend.dev/assets/square.png"></div>
+							<h5 class="fw-bold">Eugene Chiu</h5>
+							<div class="text-muted">
+								Education
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-sm-3">
+					<div class="card text-center border-0 bg-light">
+						<div class="card-body px-4 py-4">
+							<div class="mb-4 mx-2 mx-md-5"><img class="img-fluid rounded-circle" src="https://freefrontend.dev/assets/square.png"></div>
+							<h5 class="fw-bold">Wendy Chan</h5>
+							<div class="text-muted">
+								Administration
+							</div>
+						</div>
+					</div>
+				</div> {% endcomment %}
+			</div>
+		</div>
+		<div class="mt-4">
+			<p class="fs-5"> More committee members are listed <a href="{% url 'necysc_app:staff' %}">here.</a></p>
+		</div>
+	</div>
 
+	
 	<div class="bg-dark" style="height: 2px;"></div>
 </section>
 
+
 <section class="ps-md-5 pe-md-5 mb-3 ">
 	<div class="container">
 		<h1 class="textleft" id="sponsors" >Sponsors</h1>
@@ -126,7 +231,6 @@ <h5 class="card-text">Platinum Sponsor</h5>
 			</div>	
 		</div>
 	</div>
-
 </section>
 
 <section class="ps-md-5 pe-md-5 mb-3">
diff --git a/necysc_app/templates/necysc_app/website/faq.html b/necysc_app/templates/necysc_app/website/faq.html
index 8fbffb38..1f2437a0 100644
--- a/necysc_app/templates/necysc_app/website/faq.html
+++ b/necysc_app/templates/necysc_app/website/faq.html
@@ -48,7 +48,7 @@ <h2 class="accordion-header" id="headingTwo">
         </h2>
         <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
             <div class="accordion-body">
-                With over 350 campers and CITs, our volunteer staff must review every form before camp begins. Therefore, all forms and payment are required during registration. Campers will not be accepted until all required forms and payment are received. If you need an extension due to special circumstances, please contact <a href="mailto:registration@necysc.org">registration@necysc.org</a>.
+                With over a hundred campers and CITs, our volunteer staff must review every form before camp begins. Therefore, all forms and payment are required during registration. Campers will not be accepted until all required forms and payment are received. If you need an extension due to special circumstances, please contact <a href="mailto:registration@necysc.org">registration@necysc.org</a>.
             </div>
         </div>
     </div>
@@ -142,7 +142,7 @@ <h2 class="accordion-header" id="headingNine">
         </h2>
         <div id="collapseNine" class="accordion-collapse collapse" aria-labelledby="headingNine" data-bs-parent="#faqAccordion">
             <div class="accordion-body">
-                We encourage campers to leave electronic devices at home to fully immerse in the camp experience. If brought, devices will be collected and securely stored until the end of camp.
+                We encourage campers to leave electronic devices at home to fully immerse in the camp experience. If brought, devices may only be used during designated times or for emergencies.
             </div>
         </div>
     </div>
diff --git a/necysc_app/templates/necysc_app/website/index.html b/necysc_app/templates/necysc_app/website/index.html
index f2066527..288f0196 100644
--- a/necysc_app/templates/necysc_app/website/index.html
+++ b/necysc_app/templates/necysc_app/website/index.html
@@ -7,7 +7,23 @@
 <link rel="stylesheet" href="{% static 'necysc_app/index.css' %}">
 <style>
 .hero-section { 
-    background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
+    background-image: url("{% static 'necysc_app/images/home_hero_banner.gif' %}");
+}
+
+.hero-section::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3); /* Adjust the opacity as needed */
+    z-index: 1;
+    transition: background-color 0.3s ease;
+}
+
+.hero-section:hover::before {
+    background-color: rgba(0, 0, 0, 0.8); /* Adjust the opacity as needed */
 }
 
 @media (max-width: 776px) {
@@ -20,7 +36,7 @@
 <section>
     <div class="hero-section shadow position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
         <div class="col-md-10 p-lg-5 mx-auto my-5 position-relative container">
-            <h1 class="display-4 fw-bold text-white" id="importantdates">New England Chinese Youth Summer Camp</h1>
+            <h1 class="display-4 fw-bold text-white" id="importantdates" style="">New England Chinese Youth Summer Camp</h1>
         </div>
     </div>
 </section>
diff --git a/necysc_app/templates/necysc_app/website/programs.html b/necysc_app/templates/necysc_app/website/programs.html
index 0b308a50..e3961550 100644
--- a/necysc_app/templates/necysc_app/website/programs.html
+++ b/necysc_app/templates/necysc_app/website/programs.html
@@ -10,12 +10,12 @@
     <div class="overlay"></div>
         <div class="col-md-6 p-lg-5 mx-auto my-5 position-relative">
             <h1 class="display-3 fw-bold text-white">Programs For Campers</h1>
-            <h3 class="fw-normal text-light mb-4">Explore Day, Overnight, or ExplorAsian</h3>
+            <h3 class="fw-normal text-light mb-4">Day, Overnight, or ExplorAsian</h3>
         </div>
     </div>
 </div>
 <div class="container px-4 py-5" id="why-join-us">
-    <h2 class="pb-2 border-bottom" style="color: #4e598c;">Why Join Us</h2>
+    <h1 class="pb-2 text-center fw-bold display-5" style="color: #4e598c;">Why Join Us?</h1>
     <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
         <div class="col" style="height: 350px;" >
             <div class="card why-join-card card-1 h-100 text-bg-dark rounded-4 shadow-lg" >
diff --git a/necysc_app/templates/necysc_app/website/registration.html b/necysc_app/templates/necysc_app/website/registration.html
index d2dcce59..f2dd4d5a 100644
--- a/necysc_app/templates/necysc_app/website/registration.html
+++ b/necysc_app/templates/necysc_app/website/registration.html
@@ -28,117 +28,119 @@ <h1 class="display-3 fw-bold text-white" id="importantdates">Registration Proces
     </div>
 </section>
 
-	<div class="container-fluid"> 
-		<div class="row justify-content-center"> 
-			<div class="text-center p-0 mt-3 mb-2"> 
-				<div class="px-0 pt-4 pb-0 mt-3 mb-3"> 
-					<form id="form"> 
-						<ul id="progressbar"> 
-							<li class="activeprogress" id="jan"> 
-								<strong>Janurary</strong> 
-							</li> 
-							<li id="feb"><strong>February</strong></li> 
-							<li id="mar"><strong>March</strong></li> 
-							<li id="jun"><strong>June</strong></li>
-                            <li id="jul"><strong>July</strong></li>
-                            <li id="aug"><strong>August</strong></li>
-						</ul> 
-						<div class="mt-4 mb-3 progress shadow"> 
-							<div class="progress-bar"></div> 
-						</div> <br> 
-						<fieldset> 
-							<h2 style="color: #4e598c;">January</h2> 
-                            <p><strong>Early January</strong> - CIT, OPs, RA, Counselors 
-                                        <a href="{% url 'necysc_app:staff' %}">application</a> begins</p>
-							<input type="button" name="next-step"
-								class="next-step rounded-pill" value="Next" /> 
-						</fieldset> 
-						<fieldset> 
-							<h2 style="color: #4e598c;">Feburary</h2> 
-                            <p><strong>End of February</strong> - All staff applications due</p>
-                            <p><strong>Mid-February</strong>- Camper (Day/ON/EA) <a href="{% url 'necysc_app:registration' %}">registration</a> begins + Early Bird discount</p>
-							<input type="button" name="next-step"
-								class="next-step rounded-pill" value="Next" /> 
-							<input type="button" name="previous-step"
-								class="previous-step rounded-pill"
-								value="Previous" /> 
-						</fieldset> 
-                        <fieldset> 
-							<h2 style="color: #4e598c;">March</h2> 
-                            <p><strong>Mid-March</strong>- Camper (Day/ON/EA) Early Bird discount ends</p>
-							<input type="button" name="next-step"
-								class="next-step rounded-pill" value="Next" /> 
-							<input type="button" name="previous-step"
-								class="previous-step rounded-pill"
-								value="Previous" /> 
-						</fieldset> 
-                        <fieldset> 
-							<h2 style="color: #4e598c;">June</h2> 
-                            <p><strong>Mid-June</strong> - Overnight and EA camper <a href="{% url 'necysc_app:registration' %}">registration</a> due</p>
-                            <p><strong>End of June</strong> - Day camper <a href="{% url 'necysc_app:registration' %}">registration</a> due</p>
-							<input type="button" name="next-step"
-								class="next-step rounded-pill" value="Next" /> 
-							<input type="button" name="previous-step"
-								class="previous-step rounded-pill"
-								value="Previous" /> 
-						</fieldset> 
-						<fieldset> 
-							<h2 style="color: #4e598c;">July</h2> 
-                            <p><strong>Mid-July</strong> - Final Camp information package email to accepted campers</p>
-                            <p><strong>End Of July</strong> - Overnight and ExplorAsian camper check-in</p>
-                            <p><strong>End of July</strong> - Day camper check-in</p>
-							<input type="button" name="next-step"
-								class="next-step rounded-pill" value="Next" /> 
-							<input type="button" name="previous-step"
-								class="previous-step rounded-pill"
-								value="Previous" /> 
-						</fieldset> 
-						<fieldset> 
-                            <h2 style="color: #4e598c;">August</h2>
-                            <p><strong>Begining of August</strong> - Day camper program ends</p>
-                            <p><strong>Begining of August</strong> - Overnight and ExplorAsian camper program ends</p>
-							<input type="button" name="previous-step"
-								class="previous-step rounded-pill"
-								value="Previous" /> 
-						</fieldset> 
-					</form> 
-				</div> 
-			</div> 
-		</div> 
-	</div> 
-
-    <div class="bg-dark mt-5 mb-5" style="height: 2px;"></div>
-
-    <h2 id="financialaid" style="color: #4e598c;" class="mb-3">Financial Aid</h2>
-    <p><strong>We try our best to make our programs affordable for everyone.</strong> Financial Aid is available and is based solely on need. 
-        Families who qualify are encouraged to apply as soon as possible. It is essential that you provide support document 
-        to demonstrate your need. Our goal is to offer an opportunity to families who may otherwise not be able to 
-        afford the program to share our camp experience.
-    </p>
-    <p>
-        The Financial Aid application is strictly confidential. Financial Aid is a separate process from program acceptance 
-        and is awarded after program acceptance. Please complete both the Camper/CIT program 
-        <a href="https://www.necysc.org/v2/files/Financial_Aid_form.pdf" target="_blank">application form</a> (indicating 
-        that you are applying for Financial Aid) and the Financial Aid application form. Please also note that it is 
-        required that you send in a 50% deposit with your financial application.
-    </p>
-    <p>
-        Our data is based on the Federal Poverty Guidelines, which are released each year.
-    </p>
-    <p>
-        Please mail the following documents to NECYSC, P.O. Box 615, Weston, MA, 02493 or email to <a href="mailto:registration@necysc.org">registration@necysc.org</a>.
-    </p>
-    <p>
-        Required documents for verification of income with rest of registration forms (Submit at Time of Registration 
-        or Before May 1, 2024):
-    </p>
-    <ul>
-        <li>Financial Aid Application Form</li>
-        <li>2022 family tax return copy (IRS 1040 form)</li>
-        <li>Exemption approval of the School Lunch Program, or other relevant documents</li>
-        <li>Cover letter explaining your situation.</li>
-    </ul>
-
+<div class="container-fluid"> 
+    <div class="row justify-content-center"> 
+        <div class="text-center p-0 mt-3 mb-2"> 
+            <div class="px-0 pt-4 pb-0 mt-3 mb-3"> 
+                <form id="form"> 
+                    <ul id="progressbar"> 
+                        <li class="activeprogress" id="jan"> 
+                            <strong>Janurary</strong> 
+                        </li> 
+                        <li id="feb"><strong>February</strong></li> 
+                        <li id="mar"><strong>March</strong></li> 
+                        <li id="jun"><strong>June</strong></li>
+                        <li id="jul"><strong>July</strong></li>
+                        <li id="aug"><strong>August</strong></li>
+                    </ul> 
+                    <div class="mt-4 mb-3 progress shadow"> 
+                        <div class="progress-bar"></div> 
+                    </div> <br> 
+                    <fieldset> 
+                        <h2 style="color: #4e598c;">January</h2> 
+                        <p><strong>Early January</strong> - CIT, OPs, RA, Counselors 
+                                    <a href="{% url 'necysc_app:staff' %}">application</a> begins</p>
+                        <input type="button" name="next-step"
+                            class="next-step rounded-pill" value="Next" /> 
+                    </fieldset> 
+                    <fieldset> 
+                        <h2 style="color: #4e598c;">Feburary</h2> 
+                        <p><strong>End of February</strong> - All staff applications due</p>
+                        <p><strong>Mid-February</strong>- Camper (Day/ON/EA) <a href="{% url 'necysc_app:registration' %}">registration</a> begins + Early Bird discount</p>
+                        <input type="button" name="next-step"
+                            class="next-step rounded-pill" value="Next" /> 
+                        <input type="button" name="previous-step"
+                            class="previous-step rounded-pill"
+                            value="Previous" /> 
+                    </fieldset> 
+                    <fieldset> 
+                        <h2 style="color: #4e598c;">March</h2> 
+                        <p><strong>Mid-March</strong>- Camper (Day/ON/EA) Early Bird discount ends</p>
+                        <input type="button" name="next-step"
+                            class="next-step rounded-pill" value="Next" /> 
+                        <input type="button" name="previous-step"
+                            class="previous-step rounded-pill"
+                            value="Previous" /> 
+                    </fieldset> 
+                    <fieldset> 
+                        <h2 style="color: #4e598c;">June</h2> 
+                        <p><strong>Mid-June</strong> - Overnight and EA camper <a href="{% url 'necysc_app:registration' %}">registration</a> due</p>
+                        <p><strong>End of June</strong> - Day camper <a href="{% url 'necysc_app:registration' %}">registration</a> due</p>
+                        <input type="button" name="next-step"
+                            class="next-step rounded-pill" value="Next" /> 
+                        <input type="button" name="previous-step"
+                            class="previous-step rounded-pill"
+                            value="Previous" /> 
+                    </fieldset> 
+                    <fieldset> 
+                        <h2 style="color: #4e598c;">July</h2> 
+                        <p><strong>Mid-July</strong> - Final Camp information package email to accepted campers</p>
+                        <p><strong>End Of July</strong> - Overnight and ExplorAsian camper check-in</p>
+                        <p><strong>End of July</strong> - Day camper check-in</p>
+                        <input type="button" name="next-step"
+                            class="next-step rounded-pill" value="Next" /> 
+                        <input type="button" name="previous-step"
+                            class="previous-step rounded-pill"
+                            value="Previous" /> 
+                    </fieldset> 
+                    <fieldset> 
+                        <h2 style="color: #4e598c;">August</h2>
+                        <p><strong>Begining of August</strong> - Day camper program ends</p>
+                        <p><strong>Begining of August</strong> - Overnight and ExplorAsian camper program ends</p>
+                        <input type="button" name="previous-step"
+                            class="previous-step rounded-pill"
+                            value="Previous" /> 
+                    </fieldset> 
+                </form> 
+            </div> 
+            <div class="bg-dark mt-5 mb-5 m-4" style="height: 2px;"></div>
+        </div> 
+    </div> 
+</div>
+    
+<section>
+    <div class="container">
+        <h2 id="financialaid" style="color: #4e598c;" class="mb-3">Financial Aid</h2>
+        <p><strong>We try our best to make our programs affordable for everyone.</strong> Financial Aid is available and is based solely on need. 
+            Families who qualify are encouraged to apply as soon as possible. It is essential that you provide support document 
+            to demonstrate your need. Our goal is to offer an opportunity to families who may otherwise not be able to 
+            afford the program to share our camp experience.
+        </p>
+        <p>
+            The Financial Aid application is strictly confidential. Financial Aid is a separate process from program acceptance 
+            and is awarded after program acceptance. Please complete both the Camper/CIT program 
+            <a href="https://www.necysc.org/v2/files/Financial_Aid_form.pdf" target="_blank">application form</a> (indicating 
+            that you are applying for Financial Aid) and the Financial Aid application form. Please also note that it is 
+            required that you send in a 50% deposit with your financial application.
+        </p>
+        <p>
+            Our data is based on the Federal Poverty Guidelines, which are released each year.
+        </p>
+        <p>
+            Please mail the following documents to NECYSC, P.O. Box 615, Weston, MA, 02493 or email to <a href="mailto:registration@necysc.org">registration@necysc.org</a>.
+        </p>
+        <p>
+            Required documents for verification of income with rest of registration forms (Submit at Time of Registration 
+            or Before May 1, 2024):
+        </p>
+        <ul>
+            <li>Financial Aid Application Form</li>
+            <li>2022 family tax return copy (IRS 1040 form)</li>
+            <li>Exemption approval of the School Lunch Program, or other relevant documents</li>
+            <li>Cover letter explaining your situation.</li>
+        </ul>
+    </div>
+</section>
     <script>
     $(document).ready(function () { 
         var currentGfgStep, nextGfgStep, previousGfgStep;