diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index 155c3cf..7d8ef4e 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -6,12 +6,6 @@
   <% end %>
 
   <%# User attributes fields %>
-  <%# Email field %>
-  <div class="mb-3">
-    <%= form.label :email, class: 'form-label' %>
-    <%= form.email_field :email, id: :user_email, class: 'form-control' %>
-  </div>
-
   <%# First Name %>
   <div class="mb-3">
     <%= form.label :first_name, class: 'form-label' %>
@@ -24,6 +18,12 @@
     <%= form.text_field :last_name, id: :user_last_name, class: 'form-control' %>
   </div>
 
+  <%# Email field %>
+  <div class="mb-3">
+    <%= form.label :email, class: 'form-label' %>
+    <%= form.email_field :email, id: :user_email, class: 'form-control' %>
+  </div>
+
   <%# Phone Number %>
   <div class="mb-3">
     <%= form.label :phone, class: 'form-label' %>
@@ -52,17 +52,36 @@
   <%# Date fields for access control %>
   <div class="mb-3">
     <%= form.label :access_start_date, 'Access Start Date', class: 'form-label' %>
-    <%= form.date_select :access_start_date, class: 'form-control' %>
+    <%= form.date_field :access_start_date, class: 'form-control' %>
   </div>
 
   <div class="mb-3">
     <%= form.label :access_end_date, 'Access End Date', class: 'form-label' %>
-    <%= form.date_select :access_end_date, class: 'form-control' %>
+    <%= form.date_field :access_end_date, class: 'form-control' %>
   </div>
 
   <%# Submit button %>
   <div class="actions">
-    <%= form.submit 'Save', class: 'btn btn-primary' %>
+    <%= form.submit 'Save', class: 'btn btn-dark' %>
   </div>
 
 <% end %>
+
+
+<%# This ensures that the access end date is greyed out if user access has not been revoked %>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const accessRevokedCheckbox = document.querySelector('#user_access_revoked'); // Make sure the ID matches your form field's ID
+    const accessEndDateField = document.querySelector('#user_access_end_date'); // Same here, use the actual ID
+
+    function toggleEndDateField() {
+      accessEndDateField.disabled = !accessRevokedCheckbox.checked;
+      if (!accessRevokedCheckbox.checked) {
+        accessEndDateField.value = ''; // Clear the date if access is not revoked
+      }
+    }
+
+    accessRevokedCheckbox.addEventListener('change', toggleEndDateField);
+    toggleEndDateField(); // Call on load to set initial state
+  });
+</script>