From b932af4c1de7bae4e5e9a5bb78c647002614891a Mon Sep 17 00:00:00 2001
From: Zandre Engelbrecht <zengelbrecht@dimagi.com>
Date: Thu, 7 May 2026 15:02:22 +0200
Subject: [PATCH 1/2] chore: apply djlint reformat to all Django templates

---
 commcare_connect/templates/403.html           |  13 +-
 commcare_connect/templates/404.html           |  13 +-
 commcare_connect/templates/500.html           |  12 +-
 .../templates/account/account_inactive.html   |   8 +-
 commcare_connect/templates/account/base.html  |  44 +-
 commcare_connect/templates/account/email.html | 186 ++---
 .../templates/account/email_confirm.html      |  44 +-
 commcare_connect/templates/account/login.html | 147 ++--
 .../templates/account/logout.html             |  33 +-
 .../templates/account/password_change.html    |  22 +-
 .../templates/account/password_reset.html     |  36 +-
 .../account/password_reset_done.html          |  11 +-
 .../account/password_reset_from_key.html      | 118 ++-
 .../account/password_reset_from_key_done.html |   7 +-
 .../templates/account/password_set.html       |  29 +-
 .../templates/account/signup.html             | 176 ++--
 .../templates/account/signup_closed.html      |   8 +-
 .../templates/account/verification_sent.html  |  12 +-
 .../account/verified_email_required.html      |  27 +-
 commcare_connect/templates/base.html          |  90 +--
 commcare_connect/templates/base_table.html    | 242 +++---
 .../templates/components/avatar.html          |   6 +-
 .../components/badges/badge_sm_dropdown.html  |  82 +-
 .../templates/components/breadcrumbs.html     |   8 +-
 .../components/cards/user_status_card.html    |  91 ++-
 .../templates/components/confirm_modal.html   |  72 +-
 .../dropdowns/text_button_dropdown.html       |  88 +-
 .../templates/components/filter_modal.html    |  76 +-
 .../templates/components/form.html            |  11 +-
 .../components/invoice_confirm_modal.html     |  69 +-
 .../add_org_member_modal.html                 |  20 +-
 .../remove_org_member_confirm_modal.html      |  79 +-
 .../templates/components/partial_form.html    |   1 -
 .../progressbar/simple-progressbar.html       |  10 +-
 .../templates/components/sidenav-items.html   |  45 +-
 .../components/upload_progress_bar.html       |  73 +-
 .../delete_invites_confirm_modal.html         |  82 +-
 .../worker_page/deliver_column.html           |  52 +-
 .../components/worker_page/export_modal.html  |  27 +-
 .../worker_page/fetch_flag_counts.html        |  39 +-
 .../components/worker_page/flag_counts.html   |  13 +-
 .../components/worker_page/import_modal.html  |  78 +-
 .../components/worker_page/last_paid.html     |  54 +-
 .../worker_page/payment_history.html          |  36 +-
 .../components/worker_page/profile.html       | 124 +--
 .../worker_page/visit_task_tabs.html          |   1 -
 .../worker_page/worker_profile_kpi.html       |  75 +-
 commcare_connect/templates/email/base.html    |  45 +-
 commcare_connect/templates/favicon.html       |  13 +-
 .../templates/flags/feature_flags.html        | 112 ++-
 .../templates/layouts/footer.html             |  72 +-
 .../templates/layouts/header.html             | 223 +++--
 .../templates/layouts/sidenav.html            | 109 ++-
 .../cluster_work_area_final_status.html       |   5 +-
 .../cluster_work_area_modal.html              |  56 +-
 .../cluster_work_area_modal_status.html       |  13 +-
 .../templates/microplanning/home.html         | 762 +++++++++---------
 .../microplanning/import_work_area_modal.html | 242 +++---
 .../templates/microplanning/map_handler.html  |   1 -
 .../microplanning/work_area_form.html         |  55 +-
 .../opportunity/add_payment_units.html        |  31 +-
 .../add_visits_existing_users.html            | 290 ++++---
 .../assigned_task_edit_button.html            |  19 +-
 .../opportunity/assigned_task_list.html       | 167 ++--
 .../bulk_approval_reject_modal.html           |  86 +-
 .../templates/opportunity/dashboard.html      | 225 +++---
 .../templates/opportunity/deliver.html        | 126 +--
 .../opportunity/edit_assigned_task_form.html  |  19 +-
 .../opportunity/edit_assigned_task_modal.html |  69 +-
 .../opportunity/edit_task_type_form.html      |  15 +-
 .../opportunity/edit_task_type_modal.html     |  47 +-
 .../email/automated_invoice_created.html      |  54 +-
 .../opportunity/email/invoice_paid.html       |  59 +-
 .../extendable_payment_unit_row.html          |  73 +-
 .../templates/opportunity/invoice_base.html   |  65 +-
 .../templates/opportunity/invoice_create.html |  16 +-
 .../templates/opportunity/invoice_detail.html | 175 ++--
 .../opportunity/invoice_download.html         |  52 +-
 .../templates/opportunity/invoice_list.html   |  48 +-
 .../opportunity/invoice_payment_report.html   |  65 +-
 .../templates/opportunity/learn.html          |   1 -
 .../opportunity/new_task_type_modal.html      |  66 +-
 .../opportunity/opportunities_list.html       | 122 ++-
 .../opportunity_delivery_stat.html            | 141 ++--
 .../opportunity/opportunity_edit.html         | 154 ++--
 .../opportunity/opportunity_finalize.html     |   9 +-
 .../opportunity_funnel_progress.html          |  87 +-
 .../opportunity/opportunity_init.html         |  57 +-
 .../opportunity/opportunity_menu.html         | 103 ++-
 .../opportunity_resource_modal.html           | 152 ++--
 .../opportunity/opportunity_worker.html       | 107 +--
 .../opportunity/opportunity_worker_learn.html |  42 +-
 .../opportunity_worker_progress.html          | 112 ++-
 .../partials/active_toggle_metadata.html      |  30 +-
 .../partials/invoice_line_items.html          |   5 +-
 .../partials/revoke_suspension.html           |  10 +-
 .../templates/opportunity/payments.html       |  32 +-
 .../templates/opportunity/send_message.html   |  71 +-
 .../templates/opportunity/steps.html          |  18 +-
 .../opportunity/suspended_users.html          |   2 -
 .../opportunity/task_types_config.html        |  90 +--
 .../templates/opportunity/tasks.html          |   1 -
 .../opportunity/user_task_details.html        | 288 +++----
 .../templates/opportunity/user_tasks.html     | 219 +++--
 .../opportunity/user_visit_details.html       | 523 +++++-------
 .../opportunity/user_visit_verification.html  |  82 +-
 .../user_visit_verification_table.html        | 108 ++-
 .../verification_flags_config.html            | 109 ++-
 .../opportunity/worker_list_base.html         |  33 +-
 .../opportunity/worker_list_work_areas.html   |   1 -
 .../opportunity/worker_visit_table.html       |   8 +-
 .../templates/opportunity/workers.html        |  24 +-
 .../organization/organization_create.html     |  48 +-
 .../organization/organization_home.html       |  97 +--
 .../templates/pages/connect_user_otp.html     |  10 +-
 commcare_connect/templates/pages/home.html    |  65 +-
 .../email/monthly_delivery_reminder.html      |  24 +-
 .../program/email/opportunity_created.html    |  22 +-
 .../email/opportunity_expiry_reminder.html    |  30 +-
 .../program/email/program_invite_applied.html |  19 +-
 .../email/program_invite_notification.html    |  11 +-
 .../templates/program/nm_home.html            | 115 ++-
 .../templates/program/pm_home.html            | 298 +++----
 .../templates/program/program_base.html       | 143 ++--
 .../templates/program/program_form.html       |  15 +-
 commcare_connect/templates/reports/admin.html |   5 +-
 .../templates/reports/invoice_report.html     | 179 ++--
 .../templates/reports/report_table.html       |  54 +-
 .../templates/tables/single_table.html        |   4 +-
 .../templates/tables/table_manage_action.html |  13 +-
 .../templates/tables/table_placeholder.html   |  24 +-
 .../templates/tasks/new_task_modal.html       |  89 +-
 .../users/accept_invite_confirm.html          |  19 +-
 .../templates/users/demo_tokens.html          |  42 +-
 .../templates/users/internal_features.html    |  26 +-
 .../users/permission_management.html          |  48 +-
 .../users/permission_management_results.html  |  57 +-
 .../templates/users/user_detail.html          |  10 +-
 .../templates/users/user_form.html            |  15 +-
 139 files changed, 4799 insertions(+), 5489 deletions(-)

diff --git a/commcare_connect/templates/403.html b/commcare_connect/templates/403.html
index b9cfc06d58..5d06c5a915 100644
--- a/commcare_connect/templates/403.html
+++ b/commcare_connect/templates/403.html
@@ -1,9 +1,12 @@
 {% extends "base.html" %}
-
 {% block title %}Forbidden (403){% endblock %}
-
 {% block content %}
-<h1 class="title text-deep-purple">Forbidden (403)</h1>
-
-<p>{% if exception %}{{ exception }}{% else %}You're not allowed to access this page.{% endif %}</p>
+  <h1 class="title text-deep-purple">Forbidden (403)</h1>
+  <p>
+    {% if exception %}
+      {{ exception }}
+    {% else %}
+      You're not allowed to access this page.
+    {% endif %}
+  </p>
 {% endblock content %}
diff --git a/commcare_connect/templates/404.html b/commcare_connect/templates/404.html
index 4e82d3d83a..3689b58249 100644
--- a/commcare_connect/templates/404.html
+++ b/commcare_connect/templates/404.html
@@ -1,9 +1,12 @@
 {% extends "base.html" %}
-
 {% block title %}Page not found{% endblock %}
-
 {% block content %}
-<h1 class="title text-deep-purple">Page not found</h1>
-
-<p>{% if exception %}{{ exception }}{% else %}This is not the page you were looking for.{% endif %}</p>
+  <h1 class="title text-deep-purple">Page not found</h1>
+  <p>
+    {% if exception %}
+      {{ exception }}
+    {% else %}
+      This is not the page you were looking for.
+    {% endif %}
+  </p>
 {% endblock content %}
diff --git a/commcare_connect/templates/500.html b/commcare_connect/templates/500.html
index fec31eee60..25390cac9d 100644
--- a/commcare_connect/templates/500.html
+++ b/commcare_connect/templates/500.html
@@ -1,11 +1,9 @@
 {% extends "base.html" %}
-
 {% block title %}Server Error{% endblock %}
-
 {% block content %}
-<h1 class="title text-deep-purple">Ooops!!! 500</h1>
-
-<h3>Looks like something went wrong!</h3>
-
-<p>We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing.</p>
+  <h1 class="title text-deep-purple">Ooops!!! 500</h1>
+  <h3>Looks like something went wrong!</h3>
+  <p>
+    We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing.
+  </p>
 {% endblock content %}
diff --git a/commcare_connect/templates/account/account_inactive.html b/commcare_connect/templates/account/account_inactive.html
index 31b4d8d435..1d39781bc5 100644
--- a/commcare_connect/templates/account/account_inactive.html
+++ b/commcare_connect/templates/account/account_inactive.html
@@ -1,13 +1,11 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% translate "Account Inactive" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Account Inactive" %}
+{% endblock %}
 {% block inner %}
   <div class="w-full min-h-[620px] h-fit">
     <h1 class="title text-brand-deep-purple b-4">{% translate "Account Inactive" %}</h1>
-
     <p class="text-sm">{% translate "This account is inactive." %}</p>
   </div>
 {% endblock %}
diff --git a/commcare_connect/templates/account/base.html b/commcare_connect/templates/account/base.html
index 75676d4717..8a5b11c948 100644
--- a/commcare_connect/templates/account/base.html
+++ b/commcare_connect/templates/account/base.html
@@ -1,18 +1,24 @@
 {% load static i18n %}
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{% block title %}Connect - {% block head_title %}{% endblock head_title %}{% endblock title %}</title>
+    <title>
+      {% block title %}
+        Connect -
+        {% block head_title %}
+        {% endblock head_title %}
+      {% endblock title %}
+    </title>
     {% load static %}
     {% block css %}
       <link rel="stylesheet" href="{% static 'bundles/css/tailwind.css' %}">
-      <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aquawolf04/font-awesome-pro@5cd1511/css/all.css" />
+      <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap"
+            rel="stylesheet">
+      <link rel="stylesheet"
+            href="https://cdn.jsdelivr.net/gh/aquawolf04/font-awesome-pro@5cd1511/css/all.css" />
     {% endblock %}
-
     {% block javascript %}
       {{ GTM_VARS_JSON|json_script:"gtm-data" }}
       <script src="{% static 'js/gtx.js' %}" defer></script>
@@ -26,8 +32,12 @@
         <div class="grid grid-cols-2 gap-2 p-2 bg-gray-100 rounded-lg shadow-sm h-fit">
           <div class="flex flex-col gap-2">
             <div class="flex flex-col items-end justify-between flex-1 w-full p-2 rounded-lg bg-brand-cornflower-blue">
-              <img src="{% static 'images/logo-full.svg' %}" alt="Compact Logo" class="w-48 pt-4 pr-6" />
-              <img src="{% static 'images/onboarding-graphics.svg' %}" alt="Compact Logo" class="w-full" />
+              <img src="{% static 'images/logo-full.svg' %}"
+                   alt="Compact Logo"
+                   class="w-48 pt-4 pr-6" />
+              <img src="{% static 'images/onboarding-graphics.svg' %}"
+                   alt="Compact Logo"
+                   class="w-full" />
             </div>
             <div class="grid grid-cols-2 gap-2 h-1/4">
               <div class="flex flex-col justify-center p-6 pt-12 text-white rounded-lg bg-brand-deep-purple">
@@ -40,16 +50,22 @@ <h3 class="text-3xl">10 +</h3>
               </div>
             </div>
           </div>
-          <div id="onboarding-container" class="h-full bg-white rounded-lg py-6 px-8">
-            {% block inner %}
-            {% endblock %}
+          <div id="onboarding-container"
+               class="h-full bg-white rounded-lg py-6 px-8">
+            {% block inner %}{% endblock %}
           </div>
         </div>
-        <div class="absolute -translate-x-1/2 -left-0 -bottom-1/2 -translate-y-1/4 -z-10" class="w-8">
-          <img src="{% static 'images/bg-graphics-bottom-left.svg' %}" alt="Compact Logo" class="w-full h-full aspect-auto" />
+        <div class="absolute -translate-x-1/2 -left-0 -bottom-1/2 -translate-y-1/4 -z-10"
+             class="w-8">
+          <img src="{% static 'images/bg-graphics-bottom-left.svg' %}"
+               alt="Compact Logo"
+               class="w-full h-full aspect-auto" />
         </div>
-        <div class="absolute top-0 right-0 rotate-90 translate-x-1/2 -translate-y-1/2 -z-10" class="w-1/2">
-          <img src="{% static 'images/bg-graphics-top-right.svg' %}" alt="Compact Logo" class="w-full h-full" />
+        <div class="absolute top-0 right-0 rotate-90 translate-x-1/2 -translate-y-1/2 -z-10"
+             class="w-1/2">
+          <img src="{% static 'images/bg-graphics-top-right.svg' %}"
+               alt="Compact Logo"
+               class="w-full h-full" />
         </div>
       </div>
     </div>
diff --git a/commcare_connect/templates/account/email.html b/commcare_connect/templates/account/email.html
index 23220ac1a1..3156571b3f 100644
--- a/commcare_connect/templates/account/email.html
+++ b/commcare_connect/templates/account/email.html
@@ -1,107 +1,107 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load crispy_forms_tags %}
-
 {% block content %}
-<div class="max-w-screen-lg mx-auto py-8 px-4">
-
-  <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% translate "Edit Name" %}</h2>
-  <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
-    <div
-      id="edit-name-fields"
-      hx-get="{% url 'users:update' %}"
-      hx-trigger="load"
-      hx-swap="innerHTML"
-    >
-      <div class="text-gray-500 text-sm italic">{% translate "Loading..." %}</div>
+  <div class="max-w-screen-lg mx-auto py-8 px-4">
+    <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% translate "Edit Name" %}</h2>
+    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+      <div id="edit-name-fields"
+           hx-get="{% url 'users:update' %}"
+           hx-trigger="load"
+           hx-swap="innerHTML">
+        <div class="text-gray-500 text-sm italic">{% translate "Loading..." %}</div>
+      </div>
     </div>
-  </div>
-
-<!--Primary Secondary Email form -->
-  <div class="mt-10 pt-6 border-t border-gray-200">
-    <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% translate "E-mail Addresses" %}</h2>
-
-    {% if user.emailaddress_set.all %}
-      <p class="mb-4 text-sm text-gray-700">{% translate 'The following e-mail addresses are associated with your account:' %}</p>
-
-      <form action="{% url 'account_email' %}" method="post">
-        {% csrf_token %}
-        <div class="space-y-4 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
-          {% for emailaddress in user.emailaddress_set.all %}
-            <div class="pb-4 border-b border-gray-100 last:border-b-0">
-              <label for="email_radio_{{ forloop.counter }}" class="flex flex-col sm:flex-row sm:items-center sm:justify-between w-full cursor-pointer">
-                <div class="flex items-center mb-2 sm:mb-0 gap-2">
-                  <input id="email_radio_{{ forloop.counter }}" type="radio" name="email"
-                         class="mr-3 h-4 w-4 text-brand-indigo focus:ring-brand-indigo border-gray-300 accent-brand-indigo"
-                         {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{% endif %}
-                         value="{{ emailaddress.email }}"/>
-                  <span class="font-medium text-gray-800">{{ emailaddress.email }}</span>
-                </div>
-                <div class="flex items-center space-x-2 flex-wrap justify-start sm:justify-end pl-7 sm:pl-0">
-                  {% if emailaddress.verified %}
-                    <span class="badge badge-sm positive-light">
-                      <i class="fa-solid fa-check mr-1"></i> {% translate "Verified" %}
-                    </span>
-                  {% else %}
-                    <span class="badge badge-sm warning-light">
-                      <i class="fa-solid fa-triangle-exclamation mr-1"></i> {% translate "Unverified" %}
-                    </span>
-                  {% endif %}
-                  {% if emailaddress.primary %}
-                    <span class="badge badge-sm primary-light">
-                      <i class="fa-solid fa-star mr-1"></i> {% translate "Primary" %}
-                    </span>
-                  {% endif %}
-                </div>
-              </label>
+    <!--Primary Secondary Email form -->
+    <div class="mt-10 pt-6 border-t border-gray-200">
+      <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% translate "E-mail Addresses" %}</h2>
+      {% if user.emailaddress_set.all %}
+        <p class="mb-4 text-sm text-gray-700">
+          {% translate 'The following e-mail addresses are associated with your account:' %}
+        </p>
+        <form action="{% url 'account_email' %}" method="post">
+          {% csrf_token %}
+          <div class="space-y-4 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+            {% for emailaddress in user.emailaddress_set.all %}
+              <div class="pb-4 border-b border-gray-100 last:border-b-0">
+                <label for="email_radio_{{ forloop.counter }}"
+                       class="flex flex-col sm:flex-row sm:items-center sm:justify-between w-full cursor-pointer">
+                  <div class="flex items-center mb-2 sm:mb-0 gap-2">
+                    <input id="email_radio_{{ forloop.counter }}"
+                           type="radio"
+                           name="email"
+                           class="mr-3 h-4 w-4 text-brand-indigo focus:ring-brand-indigo border-gray-300 accent-brand-indigo"
+                           {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{% endif %}
+                           value="{{ emailaddress.email }}" />
+                    <span class="font-medium text-gray-800">{{ emailaddress.email }}</span>
+                  </div>
+                  <div class="flex items-center space-x-2 flex-wrap justify-start sm:justify-end pl-7 sm:pl-0">
+                    {% if emailaddress.verified %}
+                      <span class="badge badge-sm positive-light">
+                        <i class="fa-solid fa-check mr-1"></i> {% translate "Verified" %}
+                      </span>
+                    {% else %}
+                      <span class="badge badge-sm warning-light">
+                        <i class="fa-solid fa-triangle-exclamation mr-1"></i> {% translate "Unverified" %}
+                      </span>
+                    {% endif %}
+                    {% if emailaddress.primary %}
+                      <span class="badge badge-sm primary-light">
+                        <i class="fa-solid fa-star mr-1"></i> {% translate "Primary" %}
+                      </span>
+                    {% endif %}
+                  </div>
+                </label>
+              </div>
+            {% endfor %}
+            <div class="mt-6 flex justify-end gap-2">
+              <button class="button button-md outline-style text-red-600 hover:bg-red-50 border-red-300 hover:border-red-400"
+                      type="submit"
+                      name="action_remove">
+                <i class="fa-solid fa-trash mr-1"></i> {% translate 'Remove' %}
+              </button>
+              <button class="button button-md primary-light"
+                      type="submit"
+                      name="action_send">
+                <i class="fa-solid fa-rotate-right mr-1"></i> {% translate 'Re-send Verification' %}
+              </button>
+              <button class="button button-md primary-dark"
+                      type="submit"
+                      name="action_primary">
+                <i class="fa-solid fa-check mr-1"></i> {% translate 'Make Primary' %}
+              </button>
             </div>
-          {% endfor %}
-
-          <div class="mt-6 flex justify-end gap-2">
-            <button class="button button-md outline-style text-red-600 hover:bg-red-50 border-red-300 hover:border-red-400" type="submit" name="action_remove">
-              <i class="fa-solid fa-trash mr-1"></i> {% translate 'Remove' %}
-            </button>
-            <button class="button button-md primary-light" type="submit" name="action_send">
-              <i class="fa-solid fa-rotate-right mr-1"></i> {% translate 'Re-send Verification' %}
-            </button>
-            <button class="button button-md primary-dark" type="submit" name="action_primary">
-              <i class="fa-solid fa-check mr-1"></i> {% translate 'Make Primary' %}
-            </button>
           </div>
+        </form>
+      {% else %}
+        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded"
+             role="alert">
+          <p class="text-sm text-yellow-700">
+            <strong class="font-bold">{% translate 'Warning:' %}</strong> {% translate "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
+          </p>
         </div>
-      </form>
-
-    {% else %}
-      <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded" role="alert">
-        <p class="text-sm text-yellow-700">
-          <strong class="font-bold">{% translate 'Warning:' %}</strong> {% translate "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
-        </p>
-      </div>
-    {% endif %}
-
-  </div>
-
-<!--Add E-mail form -->
-  <div class="mt-10 pt-6 border-t border-gray-200">
-    <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% translate "Add E-mail Address" %}</h2>
-
-    <div class="space-y-4 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
-    <form id="add_email" method="post" action="{% url 'account_email' %}" >
-      {% csrf_token %}
-      {% crispy form %}
-      <div class="mt-6 flex justify-end">
-        <button class="button button-md primary-dark" name="action_add" type="submit" form="add_email">
-          <i class="fa-solid fa-plus mr-1"></i> {% translate "Add E-mail" %}
-        </button>
+      {% endif %}
+    </div>
+    <!--Add E-mail form -->
+    <div class="mt-10 pt-6 border-t border-gray-200">
+      <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% translate "Add E-mail Address" %}</h2>
+      <div class="space-y-4 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+        <form id="add_email" method="post" action="{% url 'account_email' %}">
+          {% csrf_token %}
+          {% crispy form %}
+          <div class="mt-6 flex justify-end">
+            <button class="button button-md primary-dark"
+                    name="action_add"
+                    type="submit"
+                    form="add_email">
+              <i class="fa-solid fa-plus mr-1"></i> {% translate "Add E-mail" %}
+            </button>
+          </div>
+        </form>
       </div>
-    </form>
-  </div>
+    </div>
   </div>
-
-</div>
 {% endblock content %}
-
-
 {% block inline_javascript %}
   {{ block.super }}
   <script type="text/javascript">
diff --git a/commcare_connect/templates/account/email_confirm.html b/commcare_connect/templates/account/email_confirm.html
index 8ccfc8d6dc..d8cd8f8834 100644
--- a/commcare_connect/templates/account/email_confirm.html
+++ b/commcare_connect/templates/account/email_confirm.html
@@ -1,31 +1,31 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
 {% load account %}
-
-{% block head_title %}{% translate "Confirm E-mail Address" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Confirm E-mail Address" %}
+{% endblock %}
 {% block inner %}
-<div class="w-full min-h-[620px] h-fit flex flex-col gap-4">
-  <h1 class="title text-brand-deep-purple mb-4">{% translate "Confirm E-mail Address" %}</h1>
-  {% if confirmation %}
-    {% user_display confirmation.email_address.user as user_display %}
-    <p>
-      {% blocktranslate with confirmation.email_address.email as email %}
+  <div class="w-full min-h-[620px] h-fit flex flex-col gap-4">
+    <h1 class="title text-brand-deep-purple mb-4">{% translate "Confirm E-mail Address" %}</h1>
+    {% if confirmation %}
+      {% user_display confirmation.email_address.user as user_display %}
+      <p>
+        {% blocktranslate with confirmation.email_address.email as email %}
         Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an e-mail address for user {{ user_display }}.
       {% endblocktranslate %}
-    </p>
-    <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
-      {% csrf_token %}
-      <button class="button button-md primary-dark" type="submit">{% translate 'Confirm' %}</button>
-    </form>
-  {% else %}
-    {% url 'account_email' as email_url %}
-    <p class="mt-2">
-      {% blocktranslate %}
+      </p>
+      <form method="post"
+            action="{% url 'account_confirm_email' confirmation.key %}">
+        {% csrf_token %}
+        <button class="button button-md primary-dark" type="submit">{% translate 'Confirm' %}</button>
+      </form>
+    {% else %}
+      {% url 'account_email' as email_url %}
+      <p class="mt-2">
+        {% blocktranslate %}
         This e-mail confirmation link expired or is invalid. Please <a href="{{ email_url }}">issue a new e-mail confirmation request</a>.
       {% endblocktranslate %}
-    </p>
-  {% endif %}
-</div>
+      </p>
+    {% endif %}
+  </div>
 {% endblock %}
diff --git a/commcare_connect/templates/account/login.html b/commcare_connect/templates/account/login.html
index ca3b0e7d07..c700900b43 100644
--- a/commcare_connect/templates/account/login.html
+++ b/commcare_connect/templates/account/login.html
@@ -1,85 +1,84 @@
 {% extends "account/base.html" %}
-
 {% load static %}
 {% load i18n %}
 {% load socialaccount %}
-
-{% block head_title %}{% translate "Sign In" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Sign In" %}
+{% endblock %}
 {% block inner %}
-<div class="w-full min-h-[620px] h-fit flex flex-col gap-4">
-  <form method="post" class="w-full flex flex-col gap-4">
-    {% csrf_token %}
-    {% if redirect_field_value %}
-      <input type="hidden"
-             name="{{ redirect_field_name }}"
-             value="{{ redirect_field_value }}" />
-    {% endif %}
-    <h6 class="title text-brand-deep-purple">Login</h6>
-    <span class="text-sm text-gray-600">Please enter your details</span>
-    {% if messages %}
-      {% for message in messages %}<p class="text-sm text-red-600">* {{ message }}</p>{% endfor %}
-    {% endif %}
-    {% if form.non_field_errors %}
-      {% for error in form.non_field_errors %}<p class="text-sm text-red-600">* {{ error }}</p>{% endfor %}
-    {% endif %}
-    <div class="input-group {% if form.login.errors %}error{% endif %}">
-      <div class="simple-input">
-        <input type="email"
-               placeholder="Enter Email ID"
-               required
-               id="{{ form.login.auto_id }}"
-               {% if form.login.value != None %}value="{{ form.login.value|stringformat:'s' }}"{% endif %}
-               name="{{ form.login.html_name }}">
-        <i class="fa-solid fa-envelope"></i>
-        <span class="error-icon fa-solid fa-circle-exclamation"></span>
+  <div class="w-full min-h-[620px] h-fit flex flex-col gap-4">
+    <form method="post" class="w-full flex flex-col gap-4">
+      {% csrf_token %}
+      {% if redirect_field_value %}
+        <input type="hidden"
+               name="{{ redirect_field_name }}"
+               value="{{ redirect_field_value }}" />
+      {% endif %}
+      <h6 class="title text-brand-deep-purple">Login</h6>
+      <span class="text-sm text-gray-600">Please enter your details</span>
+      {% if messages %}
+        {% for message in messages %}<p class="text-sm text-red-600">* {{ message }}</p>{% endfor %}
+      {% endif %}
+      {% if form.non_field_errors %}
+        {% for error in form.non_field_errors %}<p class="text-sm text-red-600">* {{ error }}</p>{% endfor %}
+      {% endif %}
+      <div class="input-group {% if form.login.errors %}error{% endif %}">
+        <div class="simple-input">
+          <input type="email"
+                 placeholder="Enter Email ID"
+                 required
+                 id="{{ form.login.auto_id }}"
+                 {% if form.login.value != None %}value="{{ form.login.value|stringformat:'s' }}"{% endif %}
+                 name="{{ form.login.html_name }}">
+          <i class="fa-solid fa-envelope"></i>
+          <span class="error-icon fa-solid fa-circle-exclamation"></span>
+        </div>
+        {% for error in form.login.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
       </div>
-      {% for error in form.login.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
-    </div>
-    <div class="input-group {% if form.password.errors %}error{% endif %}">
-      <div class="simple-input">
-        <input type="password"
-               placeholder="Password"
-               required
-               id="{{ form.password.auto_id }}"
-               {% if form.password.value != None %}value="{{ form.password.value|stringformat:'s' }}"{% endif %}
-               name="{{ form.password.html_name }}">
-        <i class="fa-solid fa-lock"></i>
-        <span class="error-icon fa-solid fa-circle-exclamation"></span>
+      <div class="input-group {% if form.password.errors %}error{% endif %}">
+        <div class="simple-input">
+          <input type="password"
+                 placeholder="Password"
+                 required
+                 id="{{ form.password.auto_id }}"
+                 {% if form.password.value != None %}value="{{ form.password.value|stringformat:'s' }}"{% endif %}
+                 name="{{ form.password.html_name }}">
+          <i class="fa-solid fa-lock"></i>
+          <span class="error-icon fa-solid fa-circle-exclamation"></span>
+        </div>
+        {% for error in form.password.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
+      </div>
+      <div class="flex justify-between items-center">
+        <p class="text-sm text-gray-400">
+          Forgot Password?
+          <a href="{% url 'account_reset_password' %}"
+             type="button"
+             class="block text-brand-indigo font-medium">Reset</a>
+        </p>
+        <button class="button button-md primary-dark" type="submit">
+          <span class="relative z-20">Login</span>
+        </button>
       </div>
-      {% for error in form.password.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
+    </form>
+    <span class="text-sm text-gray-400 text-center">or</span>
+    <div class="space-y-2 place-items-center">
+      <form method="post"
+            action="{% provider_login_url "commcarehq" process="login" %}">
+        <button class="flex gap-2 rounded-full bg-gray-100 items-center p-2 pr-4 cursor-pointer"
+                type="submit">
+          {% csrf_token %}
+          <div class="w-6 h-6">
+            <img src="{% static 'images/commcare-logo-color.svg' %}"
+                 alt="Compact Logo"
+                 class="w-full">
+          </div>
+          <span class="text-sm">Login with CommCareHQ</span>
+        </button>
+      </form>
     </div>
-    <div class="flex justify-between items-center">
-      <p class="text-sm text-gray-400">
-        Forgot Password?
-        <a href="{% url 'account_reset_password' %}"
-           type="button"
-           class="block text-brand-indigo font-medium">Reset</a>
-      </p>
-      <button class="button button-md primary-dark" type="submit">
-        <span class="relative z-20">Login</span>
-      </button>
+    <div class="text-sm text-gray-400 text-center mt-auto border-t-gray-200 border-t-2 pt-4 ">
+      Don't have an account?
+      <a href="{{ signup_url }}" class="text-brand-indigo font-medium">Signup</a>
     </div>
-  </form>
-  <span class="text-sm text-gray-400 text-center">or</span>
-  <div class="space-y-2 place-items-center">
-    <form method="post"
-          action="{% provider_login_url "commcarehq" process="login" %}">
-      <button class="flex gap-2 rounded-full bg-gray-100 items-center p-2 pr-4 cursor-pointer"
-              type="submit">
-        {% csrf_token %}
-        <div class="w-6 h-6">
-          <img src="{% static 'images/commcare-logo-color.svg' %}"
-               alt="Compact Logo"
-               class="w-full">
-        </div>
-        <span class="text-sm">Login with CommCareHQ</span>
-      </button>
-    </form>
-  </div>
-  <div class="text-sm text-gray-400 text-center mt-auto border-t-gray-200 border-t-2 pt-4 ">
-    Don't have an account?
-    <a href="{{ signup_url }}" class="text-brand-indigo font-medium">Signup</a>
   </div>
-</div>
 {% endblock %}
diff --git a/commcare_connect/templates/account/logout.html b/commcare_connect/templates/account/logout.html
index d326e46997..216da74f14 100644
--- a/commcare_connect/templates/account/logout.html
+++ b/commcare_connect/templates/account/logout.html
@@ -1,21 +1,20 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% translate "Sign Out" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Sign Out" %}
+{% endblock %}
 {% block inner %}
-<div class="w-full min-h-[620px] h-fit">
-  <h1 class="title text-brand-deep-purple mb-4">{% translate "Sign Out" %}</h1>
-
-  <p class="text-sm">{% translate 'Are you sure you want to sign out?' %}</p>
-
-  <form method="post" action="{% url 'account_logout' %}">
-    {% csrf_token %}
-    {% if redirect_field_value %}
-    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
-    {% endif %}
-    <button class="button button-md negative-light my-4" type="submit">{% translate 'Sign Out' %}</button>
-  </form>
-</div>
+  <div class="w-full min-h-[620px] h-fit">
+    <h1 class="title text-brand-deep-purple mb-4">{% translate "Sign Out" %}</h1>
+    <p class="text-sm">{% translate 'Are you sure you want to sign out?' %}</p>
+    <form method="post" action="{% url 'account_logout' %}">
+      {% csrf_token %}
+      {% if redirect_field_value %}
+        <input type="hidden"
+               name="{{ redirect_field_name }}"
+               value="{{ redirect_field_value }}" />
+      {% endif %}
+      <button class="button button-md negative-light my-4" type="submit">{% translate 'Sign Out' %}</button>
+    </form>
+  </div>
 {% endblock %}
diff --git a/commcare_connect/templates/account/password_change.html b/commcare_connect/templates/account/password_change.html
index 5182a7a183..a6ae85871a 100644
--- a/commcare_connect/templates/account/password_change.html
+++ b/commcare_connect/templates/account/password_change.html
@@ -1,16 +1,16 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
 {% load crispy_forms_tags %}
-
-{% block head_title %}{% translate "Change Password" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Change Password" %}
+{% endblock %}
 {% block inner %}
-    <h1>{% translate "Change Password" %}</h1>
-
-    <form method="POST" action="{% url 'account_change_password' %}" class="password_change">
-        {% csrf_token %}
-        {{ form|crispy }}
-        <button class="btn btn-primary" type="submit" name="action">{% translate "Change Password" %}</button>
-    </form>
+  <h1>{% translate "Change Password" %}</h1>
+  <form method="POST"
+        action="{% url 'account_change_password' %}"
+        class="password_change">
+    {% csrf_token %}
+    {{ form|crispy }}
+    <button class="btn btn-primary" type="submit" name="action">{% translate "Change Password" %}</button>
+  </form>
 {% endblock %}
diff --git a/commcare_connect/templates/account/password_reset.html b/commcare_connect/templates/account/password_reset.html
index 69f4964e64..65c4a525cd 100644
--- a/commcare_connect/templates/account/password_reset.html
+++ b/commcare_connect/templates/account/password_reset.html
@@ -1,34 +1,29 @@
 {% extends "account/base.html" %}
-
 {% load static %}
 {% load i18n %}
 {% load account %}
 {% load crispy_forms_tags %}
-
-{% block head_title %}{% translate "Password Reset" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Password Reset" %}
+{% endblock %}
 {% block inner %}
   <form method="post" class="w-full min-h-[620px] h-fit flex flex-col gap-4">
     {% csrf_token %}
     <h6 class="title text-brand-deep-purple">{% translate "Password Reset" %}</h6>
     <span class="text-sm text-gray-600">{% blocktranslate %}You will receive a password reset link in your email. {% endblocktranslate %}</span>
-
     <div class="input-group {% if form.email.errors %}error{% endif %}">
-        <div class="simple-input">
-            <input type="email"
-                   placeholder={% translate "Enter Email ID" %}
-                   required
-                   id={{ form.email.auto_id }}
-                   {% if form.email.value != None %}value="{{ form.email.value|stringformat:'s' }}"{% endif %}
-                   name={{ form.email.html_name }}>
-            <i class="fa-solid fa-envelope"></i>
-            <span class="error-icon fa-solid fa-circle-exclamation"></span>
-        </div>
-        {% for error in form.email.errors %}
-          <p class="error-msg">* {{ error }}</p>
-        {% endfor %}
+      <div class="simple-input">
+        <input type="email"
+               placeholder="{% translate "Enter Email ID" %}"
+               required
+               id="{{ form.email.auto_id }}"
+               {% if form.email.value != None %}value="{{ form.email.value|stringformat:'s' }}"{% endif %}
+               name="{{ form.email.html_name }}">
+        <i class="fa-solid fa-envelope"></i>
+        <span class="error-icon fa-solid fa-circle-exclamation"></span>
+      </div>
+      {% for error in form.email.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
     </div>
-
     <div class="flex justify-between items-center">
       <div></div>
       <button class="button button-md outline-style"
@@ -36,9 +31,8 @@ <h6 class="title text-brand-deep-purple">{% translate "Password Reset" %}</h6>
         <span class="relative z-20">{% translate "Reset" %}</span>
       </button>
     </div>
-
     <div class="text-sm text-gray-400 text-center mt-auto border-t-gray-200 border-t-2 pt-4 ">
-        {% translate "Don't have an account?" %}
+      {% translate "Don't have an account?" %}
       <a href="{{ signup_url }}" class="text-brand-indigo font-medium">{% translate "Signup" %}</a>
     </div>
   </form>
diff --git a/commcare_connect/templates/account/password_reset_done.html b/commcare_connect/templates/account/password_reset_done.html
index 967c300998..c075144483 100644
--- a/commcare_connect/templates/account/password_reset_done.html
+++ b/commcare_connect/templates/account/password_reset_done.html
@@ -1,14 +1,15 @@
 {% extends "account/base.html" %}
-
 {% load static %}
 {% load i18n %}
 {% load crispy_forms_tags %}
-
-{% block head_title %}{% translate "Password Reset" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Password Reset" %}
+{% endblock %}
 {% block inner %}
   <div class="w-full min-h-[620px] h-fit flex flex-col gap-4">
     <h6 class="title text-brand-deep-purple">{% translate "Password Reset" %}</h6>
-    <p class="mt-2">{% blocktranslate %}We have sent you an e-mail. Please contact us if you do not receive it within a few minutes.{% endblocktranslate %}</p>
+    <p class="mt-2">
+      {% blocktranslate %}We have sent you an e-mail. Please contact us if you do not receive it within a few minutes.{% endblocktranslate %}
+    </p>
   </div>
 {% endblock %}
diff --git a/commcare_connect/templates/account/password_reset_from_key.html b/commcare_connect/templates/account/password_reset_from_key.html
index 745d12265d..afde9f5fd6 100644
--- a/commcare_connect/templates/account/password_reset_from_key.html
+++ b/commcare_connect/templates/account/password_reset_from_key.html
@@ -1,68 +1,64 @@
 {% extends "account/base.html" %}
-
 {% load static %}
 {% load i18n %}
-
-{% block head_title %}{% translate "Change Password" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Change Password" %}
+{% endblock %}
 {% block inner %}
-    {% if token_fail %}
-        {% url 'account_reset_password' as passwd_reset_url %}
-        <p>{% blocktranslate %}The password reset link was invalid, possibly because it has already been used.  Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktranslate %}</p>
+  {% if token_fail %}
+    {% url 'account_reset_password' as passwd_reset_url %}
+    <p>
+      {% blocktranslate %}The password reset link was invalid, possibly because it has already been used.  Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktranslate %}
+    </p>
+  {% else %}
+    {% if form %}
+      <form method="post" class="w-full min-h-[620px] h-fit flex flex-col gap-4">
+        {% csrf_token %}
+        <h6 class="title text-brand-deep-purple">New Password</h6>
+        <span class="text-sm text-gray-600">Please create a new password</span>
+        <!-- Password Field -->
+        <div class="input-group {% if form.password1.errors %}error{% endif %}">
+          <div class="simple-input">
+            <input type="password"
+                   placeholder="{% translate "Password" %}"
+                   required
+                   id="{{ form.password1.auto_id }}"
+                   {% if form.password1.value != None %}value="{{ form.password1.value|stringformat:'s' }}"{% endif %}
+                   name="{{ form.password1.html_name }}">
+            <i class="fa-solid fa-lock"></i>
+            <span class="error-icon fa-solid fa-circle-exclamation"></span>
+          </div>
+          {% for error in form.password1.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
+        </div>
+        <div class="input-group {% if form.password2.errors %}error{% endif %}">
+          <div class="simple-input">
+            <input type="password"
+                   placeholder="{% translate "Confirm Password" %}"
+                   required
+                   id="{{ form.password2.auto_id }}"
+                   {% if form.password2.value != None %}value="{{ form.password2.value|stringformat:'s' }}"{% endif %}
+                   name="{{ form.password2.html_name }}">
+            <i class="fa-solid fa-lock"></i>
+            <span class="error-icon fa-solid fa-circle-exclamation"></span>
+          </div>
+          {% for error in form.password2.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
+        </div>
+        <div class="flex justify-between items-center">
+          <div></div>
+          <button class="button button-md primary-dark" type="submit">
+            <span class="relative z-20">Update</span>
+          </button>
+        </div>
+        <div class="text-sm text-gray-400 text-center mt-auto border-t-gray-200 border-t-2 pt-4 ">
+          Don't have an account?
+          <a href="#"
+             class="text-brand-indigo font-medium"
+             @click="submitWithValidation()"
+             @submit.prevent="submitWithValidation()">Signup</a>
+        </div>
+      </form>
     {% else %}
-        {% if form %}
-          <form method="post" class="w-full min-h-[620px] h-fit flex flex-col gap-4">
-                {% csrf_token %}
-              <h6 class="title text-brand-deep-purple">New Password</h6>
-              <span class="text-sm text-gray-600">Please create a new password</span>
-                  <!-- Password Field -->
-            <div class="input-group {% if form.password1.errors %}error{% endif %}">
-                  <div class="simple-input">
-                      <input type="password"
-                             placeholder={% translate "Password" %}
-                             required
-                             id={{ form.password1.auto_id }}
-                             {% if form.password1.value != None %}value="{{ form.password1.value|stringformat:'s' }}"{% endif %}
-                             name={{ form.password1.html_name }}>
-                      <i class="fa-solid fa-lock"></i>
-                      <span class="error-icon fa-solid fa-circle-exclamation"></span>
-                  </div>
-                  {% for error in form.password1.errors %}
-                    <p class="error-msg">* {{ error }}</p>
-                  {% endfor %}
-              </div>
-
-            <div class="input-group {% if form.password2.errors %}error{% endif %}">
-                  <div class="simple-input">
-                      <input type="password"
-                             placeholder={% translate "Confirm Password" %}
-                             required
-                             id={{ form.password2.auto_id }}
-                             {% if form.password2.value != None %}value="{{ form.password2.value|stringformat:'s' }}"{% endif %}
-                             name={{ form.password2.html_name }}>
-                      <i class="fa-solid fa-lock"></i>
-                      <span class="error-icon fa-solid fa-circle-exclamation"></span>
-                  </div>
-                  {% for error in form.password2.errors %}
-                    <p class="error-msg">* {{ error }}</p>
-                  {% endfor %}
-              </div>
-
-              <div class="flex justify-between items-center">
-                  <div></div>
-                  <button class="button button-md primary-dark" type="submit">
-                      <span class="relative z-20">Update</span>
-                  </button>
-              </div>
-
-              <div class="text-sm text-gray-400 text-center mt-auto border-t-gray-200 border-t-2 pt-4 ">
-                  Don't have an account?
-                  <a href="#" class="text-brand-indigo font-medium" @click="submitWithValidation()"
-                  @submit.prevent="submitWithValidation()">Signup</a>
-              </div>
-          </form>
-        {% else %}
-            <p>{% translate 'Your password is now changed.' %}</p>
-        {% endif %}
+      <p>{% translate 'Your password is now changed.' %}</p>
     {% endif %}
+  {% endif %}
 {% endblock %}
diff --git a/commcare_connect/templates/account/password_reset_from_key_done.html b/commcare_connect/templates/account/password_reset_from_key_done.html
index 16918ac116..e1f1b1dea4 100644
--- a/commcare_connect/templates/account/password_reset_from_key_done.html
+++ b/commcare_connect/templates/account/password_reset_from_key_done.html
@@ -1,9 +1,8 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% translate "Password Reset" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Password Reset" %}
+{% endblock %}
 {% block inner %}
   <div class="w-full min-h-[620px] h-fit flex flex-col gap-4">
     <h1 class="title text-brand-deep-purple">{% translate "Change Password" %}</h1>
diff --git a/commcare_connect/templates/account/password_set.html b/commcare_connect/templates/account/password_set.html
index 69dec85893..edcd43a090 100644
--- a/commcare_connect/templates/account/password_set.html
+++ b/commcare_connect/templates/account/password_set.html
@@ -1,18 +1,21 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
 {% load crispy_forms_tags %}
-
-{% block head_title %}{% translate "Set Password" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Set Password" %}
+{% endblock %}
 {% block inner %}
-    <h1 class="mb-4">{% translate "Set Password" %}</h1>
-
-    <form method="POST" action="{% url 'account_set_password' %}" class="password_set">
-      {% csrf_token %}
-      {{ form|crispy }}
-      <div class="col-12">
-        <input class="btn btn-primary w-100" type="submit" name="action" value="{% translate 'Set Password' %}"/>
-      </div>
-    </form>
+  <h1 class="mb-4">{% translate "Set Password" %}</h1>
+  <form method="POST"
+        action="{% url 'account_set_password' %}"
+        class="password_set">
+    {% csrf_token %}
+    {{ form|crispy }}
+    <div class="col-12">
+      <input class="btn btn-primary w-100"
+             type="submit"
+             name="action"
+             value="{% translate 'Set Password' %}" />
+    </div>
+  </form>
 {% endblock %}
diff --git a/commcare_connect/templates/account/signup.html b/commcare_connect/templates/account/signup.html
index eb4846a879..6c5e8fb901 100644
--- a/commcare_connect/templates/account/signup.html
+++ b/commcare_connect/templates/account/signup.html
@@ -1,97 +1,105 @@
 {% extends "account/base.html" %}
-
 {% load static %}
 {% load i18n %}
 {% load socialaccount %}
-
-{% block head_title %}{% translate "Signup" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Signup" %}
+{% endblock %}
 {% block inner %}
-<div class="w-full min-h-[620px] h-fit flex flex-col gap-4">
-  <form method="post" class="flex flex-col gap-4"
-    x-data="{
-      email: '', password: '', confirmPassword: '', termsChecked: false,
-      isFormValid() {
-        return this.termsChecked && this.email && this.password && this.confirmPassword;
-      }
-    }">
-    {% csrf_token %}
-    <h6 class="title text-brand-deep-purple">{% translate "Signup" %}</h6>
-    <span class="text-sm text-gray-600">{% blocktranslate %}Please enter your details{% endblocktranslate %}</span>
-    {% if form.non_field_errors %}
-      {% for error in form.non_field_errors %}<p class="text-sm text-red-600">* {{ error }}</p>{% endfor %}
-    {% endif %}
-    <div class="input-group {% if form.email.errors %}error{% endif %}">
-      <div class="simple-input">
-        <input type="email"
-               placeholder="{% translate "Enter Email ID" %}"
-               required
-               id="{{ form.email.auto_id }}"
-               {% if form.email.value != None %}value="{{ form.email.value|stringformat:'s' }}"{% endif %}
-               name="{{ form.email.html_name }}" x-model="email">
-        <i class="fa-solid fa-envelope"></i>
-        <span class="error-icon fa-solid fa-circle-exclamation"></span>
+  <div class="w-full min-h-[620px] h-fit flex flex-col gap-4">
+    <form method="post"
+          class="flex flex-col gap-4"
+          x-data="{ email: '', password: '', confirmPassword: '', termsChecked: false, isFormValid() { return this.termsChecked && this.email && this.password && this.confirmPassword; } }">
+      {% csrf_token %}
+      <h6 class="title text-brand-deep-purple">{% translate "Signup" %}</h6>
+      <span class="text-sm text-gray-600">{% blocktranslate %}Please enter your details{% endblocktranslate %}</span>
+      {% if form.non_field_errors %}
+        {% for error in form.non_field_errors %}<p class="text-sm text-red-600">* {{ error }}</p>{% endfor %}
+      {% endif %}
+      <div class="input-group {% if form.email.errors %}error{% endif %}">
+        <div class="simple-input">
+          <input type="email"
+                 placeholder="{% translate "Enter Email ID" %}"
+                 required
+                 id="{{ form.email.auto_id }}"
+                 {% if form.email.value != None %}value="{{ form.email.value|stringformat:'s' }}"{% endif %}
+                 name="{{ form.email.html_name }}"
+                 x-model="email">
+          <i class="fa-solid fa-envelope"></i>
+          <span class="error-icon fa-solid fa-circle-exclamation"></span>
+        </div>
+        {% for error in form.email.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
       </div>
-      {% for error in form.email.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
-    </div>
-    <div class="input-group {% if form.password1.errors %}error{% endif %}">
-      <div class="simple-input">
-        <input type="password"
-               placeholder="{% translate "Password" %}"
-               required
-               id="{{ form.password1.auto_id }}"
-               {% if form.password1.value != None %}value="{{ form.password1.value|stringformat:'s' }}"{% endif %}
-               name="{{ form.password1.html_name }}" x-model="password">
-        <i class="fa-solid fa-lock"></i>
-        <span class="error-icon fa-solid fa-circle-exclamation"></span>
+      <div class="input-group {% if form.password1.errors %}error{% endif %}">
+        <div class="simple-input">
+          <input type="password"
+                 placeholder="{% translate "Password" %}"
+                 required
+                 id="{{ form.password1.auto_id }}"
+                 {% if form.password1.value != None %}value="{{ form.password1.value|stringformat:'s' }}"{% endif %}
+                 name="{{ form.password1.html_name }}"
+                 x-model="password">
+          <i class="fa-solid fa-lock"></i>
+          <span class="error-icon fa-solid fa-circle-exclamation"></span>
+        </div>
+        {% for error in form.password1.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
       </div>
-      {% for error in form.password1.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
-    </div>
-    <div class="input-group {% if form.password2.errors %}error{% endif %}">
-      <div class="simple-input">
-        <input type="password"
-               placeholder="{% translate "Confirm Password" %}"
-               required
-               id="{{ form.password2.auto_id }}"
-               {% if form.password2.value != None %}value="{{ form.password2.value|stringformat:'s' }}"{% endif %}
-               name="{{ form.password2.html_name }}" x-model="confirmPassword">
-        <i class="fa-solid fa-lock"></i>
-        <span class="error-icon fa-solid fa-circle-exclamation"></span>
+      <div class="input-group {% if form.password2.errors %}error{% endif %}">
+        <div class="simple-input">
+          <input type="password"
+                 placeholder="{% translate "Confirm Password" %}"
+                 required
+                 id="{{ form.password2.auto_id }}"
+                 {% if form.password2.value != None %}value="{{ form.password2.value|stringformat:'s' }}"{% endif %}
+                 name="{{ form.password2.html_name }}"
+                 x-model="confirmPassword">
+          <i class="fa-solid fa-lock"></i>
+          <span class="error-icon fa-solid fa-circle-exclamation"></span>
+        </div>
+        {% for error in form.password2.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
       </div>
-      {% for error in form.password2.errors %}<p class="error-msg">* {{ error }}</p>{% endfor %}
-    </div>
-    <!-- Checkbox and Submit -->
-    <div class="flex flex-col items-end gap-3">
-      <div class="input-group">
-        <div class="flex items-start w-full gap-2">
-          <div><input type="checkbox" class="simple-checkbox" required x-model="termsChecked" /></div>
-          <p class="hint">
-            <span>{% blocktranslate %}I have read and agree to Dimagi's <a class="text-brand-indigo font-medium" href="https://dimagi.com/terms-privacy-dimagi/" target="_blank">Privacy Policy</a> and <a class="text-brand-indigo font-medium" href="http://www.dimagi.com/terms/latest/aup/" target="_blank">Acceptable Use Policy</a>.{% endblocktranslate %}</span>
-          </p>
+      <!-- Checkbox and Submit -->
+      <div class="flex flex-col items-end gap-3">
+        <div class="input-group">
+          <div class="flex items-start w-full gap-2">
+            <div>
+              <input type="checkbox"
+                     class="simple-checkbox"
+                     required
+                     x-model="termsChecked" />
+            </div>
+            <p class="hint">
+              <span>{% blocktranslate %}I have read and agree to Dimagi's <a class="text-brand-indigo font-medium" href="https://dimagi.com/terms-privacy-dimagi/" target="_blank">Privacy Policy</a> and <a class="text-brand-indigo font-medium" href="http://www.dimagi.com/terms/latest/aup/" target="_blank">Acceptable Use Policy</a>.{% endblocktranslate %}</span>
+            </p>
+          </div>
+          <p class="error-msg">{% blocktranslate %}You must accept the terms and conditions{% endblocktranslate %}</p>
         </div>
-        <p class="error-msg">{% blocktranslate %}You must accept the terms and conditions{% endblocktranslate %}</p>
+        <button class="button button-md primary-dark"
+                type="submit"
+                :disabled="!isFormValid()">
+          <span class="relative z-20">{% translate "Signup" %}</span>
+        </button>
       </div>
-      <button class="button button-md primary-dark" type="submit" :disabled="!isFormValid()">
-        <span class="relative z-20">{% translate "Signup" %}</span>
-      </button>
-    </div>
-  </form>
-
-  <span class="text-sm text-center text-gray-600">or</span>
-
-  <div class="space-y-2 place-items-center">
-    <form method="post" action="{% provider_login_url "commcarehq" process="login" %}">
-      <button class="flex gap-2 rounded-full bg-gray-100 items-center p-2 pr-4 cursor-pointer" type="submit">
-          {% csrf_token %}
-          <div class="w-6 h-6"><img src="{% static 'images/commcare-logo-color.svg' %}" alt="Compact Logo" class="w-full"></div>
-      <span class="text-sm">{% blocktranslate %}Sign up with CommCareHQ{% endblocktranslate %}</span>
-      </button>
     </form>
+    <span class="text-sm text-center text-gray-600">or</span>
+    <div class="space-y-2 place-items-center">
+      <form method="post"
+            action="{% provider_login_url "commcarehq" process="login" %}">
+        <button class="flex gap-2 rounded-full bg-gray-100 items-center p-2 pr-4 cursor-pointer"
+                type="submit">
+          {% csrf_token %}
+          <div class="w-6 h-6">
+            <img src="{% static 'images/commcare-logo-color.svg' %}"
+                 alt="Compact Logo"
+                 class="w-full">
+          </div>
+          <span class="text-sm">{% blocktranslate %}Sign up with CommCareHQ{% endblocktranslate %}</span>
+        </button>
+      </form>
+    </div>
+    <div class="pt-4 mt-auto text-sm text-center text-gray-600 border-t-2 border-t-gray-200">
+      {% blocktranslate %}Already have an account?{% endblocktranslate %}
+      <a href="{{ login_url }}" class="font-medium text-brand-indigo">{% translate "Login" %}</a>
+    </div>
   </div>
-
-  <div class="pt-4 mt-auto text-sm text-center text-gray-600 border-t-2 border-t-gray-200">
-    {% blocktranslate %}Already have an account?{% endblocktranslate %}
-    <a href="{{ login_url }}" class="font-medium text-brand-indigo">{% translate "Login" %}</a>
-  </div>
-</div>
 {% endblock %}
diff --git a/commcare_connect/templates/account/signup_closed.html b/commcare_connect/templates/account/signup_closed.html
index da158c1d61..abfd5b6897 100644
--- a/commcare_connect/templates/account/signup_closed.html
+++ b/commcare_connect/templates/account/signup_closed.html
@@ -1,13 +1,11 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% translate "Sign Up Closed" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Sign Up Closed" %}
+{% endblock %}
 {% block inner %}
   <div class="w-full min-h-[620px] h-fit">
     <h1 class="title text-brand-deep-purple mb-4">{% translate "Sign Up Closed" %}</h1>
-
     <p class="text-sm">{% translate "We are sorry, but the sign up is currently closed." %}</p>
   </div>
 {% endblock %}
diff --git a/commcare_connect/templates/account/verification_sent.html b/commcare_connect/templates/account/verification_sent.html
index 0aded59e0c..3dd4e0cc48 100644
--- a/commcare_connect/templates/account/verification_sent.html
+++ b/commcare_connect/templates/account/verification_sent.html
@@ -1,13 +1,13 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% translate "Verify Your E-mail Address" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Verify Your E-mail Address" %}
+{% endblock %}
 {% block inner %}
   <div class="w-full min-h-[620px] h-fit">
     <h1 class="title text-brand-deep-purple mb-4">{% translate "Verify Your E-mail Address" %}</h1>
-
-    <p class="text-sm">{% blocktranslate %}We have sent an e-mail to you for verification. Follow the link provided to finalize the signup process. Please contact us if you do not receive it within a few minutes.{% endblocktranslate %}</p>
+    <p class="text-sm">
+      {% blocktranslate %}We have sent an e-mail to you for verification. Follow the link provided to finalize the signup process. Please contact us if you do not receive it within a few minutes.{% endblocktranslate %}
+    </p>
   </div>
 {% endblock %}
diff --git a/commcare_connect/templates/account/verified_email_required.html b/commcare_connect/templates/account/verified_email_required.html
index 6105fb5fe9..e2353193ba 100644
--- a/commcare_connect/templates/account/verified_email_required.html
+++ b/commcare_connect/templates/account/verified_email_required.html
@@ -1,23 +1,24 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% translate "Verify Your E-mail Address" %}{% endblock %}
-
+{% block head_title %}
+  {% translate "Verify Your E-mail Address" %}
+{% endblock %}
 {% block inner %}
   <div class="w-full min-h-[620px] h-fit">
     <h1 class="title text-brand-deep-purple mb-4">{% translate "Verify Your E-mail Address" %}</h1>
-
     {% url 'account_email' as email_url %}
-
-    <p class="text-sm">{% blocktranslate %}This part of the site requires us to verify that
+    <p class="text-sm">
+      {% blocktranslate %}This part of the site requires us to verify that
     you are who you claim to be. For this purpose, we require that you
-    verify ownership of your e-mail address. {% endblocktranslate %}</p>
-
-    <p class="text-sm">{% blocktranslate %}We have sent an e-mail to you for
+    verify ownership of your e-mail address. {% endblocktranslate %}
+    </p>
+    <p class="text-sm">
+      {% blocktranslate %}We have sent an e-mail to you for
     verification. Please click on the link inside this e-mail. Please
-    contact us if you do not receive it within a few minutes.{% endblocktranslate %}</p>
-
-    <p class="text-sm mt-2">{% blocktranslate %}<strong>Note:</strong> you can still <a href="{{ email_url }}">change your e-mail address</a>.{% endblocktranslate %}</p>
+    contact us if you do not receive it within a few minutes.{% endblocktranslate %}
+    </p>
+    <p class="text-sm mt-2">
+      {% blocktranslate %}<strong>Note:</strong> you can still <a href="{{ email_url }}">change your e-mail address</a>.{% endblocktranslate %}
+    </p>
   </div>
 {% endblock %}
diff --git a/commcare_connect/templates/base.html b/commcare_connect/templates/base.html
index 7bcad52379..b2c4e81a73 100644
--- a/commcare_connect/templates/base.html
+++ b/commcare_connect/templates/base.html
@@ -1,5 +1,4 @@
 {% load static i18n %}
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -8,9 +7,10 @@
     {% include 'favicon.html' %}
     <title>Connect</title>
     {% block css %}
-       <link rel="stylesheet" href="{% static 'bundles/css/vendors.css' %}">
-       <link rel="stylesheet" href="{% static 'bundles/css/tailwind.css' %}">
-       <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+      <link rel="stylesheet" href="{% static 'bundles/css/vendors.css' %}">
+      <link rel="stylesheet" href="{% static 'bundles/css/tailwind.css' %}">
+      <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap"
+            rel="stylesheet">
     {% endblock %}
     {% block javascript %}
       {{ GTM_VARS_JSON|json_script:"gtm-data" }}
@@ -23,76 +23,54 @@
       {% endif %}
     {% endblock javascript %}
   </head>
-  <body
-    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-    x-data="{ sidebarOpen: $persist(false).as('sidebarOpen'), hasSidebar: {% block has_sidebar %}true{% endblock %} }"
-    x-init="$nextTick(() => $el.classList.add('transition-[padding-left]', 'duration-300'))"
-    :class="hasSidebar ? (sidebarOpen ? 'pl-64' : 'pl-16') : ''"
-    class="flex flex-col justify-center overflow-x-hidden bg-stone-100 font-work-sans"
-  >
+  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' x-data="{ sidebarOpen: $persist(false).as('sidebarOpen'), hasSidebar:
+    {% block has_sidebar %}true{% endblock %}
+    }" x-init="$nextTick(() => $el.classList.add('transition-[padding-left]', 'duration-300'))" :class="hasSidebar ? (sidebarOpen ? 'pl-64' : 'pl-16') : ''" class="flex flex-col justify-center overflow-x-hidden bg-stone-100 font-work-sans">
     {% block sidenav %}
-      {% include 'layouts/sidenav.html'%}
+      {% include 'layouts/sidenav.html' %}
     {% endblock %}
     <div class="flex-1  px-4">
-      {% include 'layouts/header.html'%}
+      {% include 'layouts/header.html' %}
       <div class="h-5 w-full mt-16"></div>
       <main id="content" class="md:max-w-screen-2xl mx-auto">
         {% if messages %}
           {% for message in messages %}
-          <div class="flex items-center justify-between p-4 mb-4 rounded-lg border-[0.5px]
-                    {% if message.tags == 'success' %}bg-message-success text-message-success-text border-message-success-border
-                    {% elif message.tags == 'error' or message.tags == 'danger' %}bg-message-error text-message-error-text border-message-error-border
-                    {% elif message.tags == 'warning' %}bg-message-warning text-message-warning-text border-message-warning-border
-                    {% elif message.tags == 'info' %}bg-message-info text-message-info-text border-message-info-border
-                    {% else %}bg-gray-500 text-white{% endif %}">
-            <div class="flex items-center gap-2">
-              {% if message.tags == 'success' %}
-                <i class="fa-regular fa-circle-check"></i>
-              {% elif message.tags == 'warning' %}
-                <i class="fa-solid fa-triangle-exclamation"></i>
-              {% elif message.tags == 'error' or message.tags == 'danger' %}
-                <i class="fa-solid fa-circle-exclamation"></i>
-              {% elif message.tags == 'info' %}
-                <i class="fa-solid fa-circle-info"></i>
-              {% endif %}
-              <span>{{ message }}</span>
+            <div class="flex items-center justify-between p-4 mb-4 rounded-lg border-[0.5px] {% if message.tags == 'success' %}bg-message-success text-message-success-text border-message-success-border {% elif message.tags == 'error' or message.tags == 'danger' %}bg-message-error text-message-error-text border-message-error-border {% elif message.tags == 'warning' %}bg-message-warning text-message-warning-text border-message-warning-border {% elif message.tags == 'info' %}bg-message-info text-message-info-text border-message-info-border {% else %}bg-gray-500 text-white{% endif %}">
+              <div class="flex items-center gap-2">
+                {% if message.tags == 'success' %}
+                  <i class="fa-regular fa-circle-check"></i>
+                {% elif message.tags == 'warning' %}
+                  <i class="fa-solid fa-triangle-exclamation"></i>
+                {% elif message.tags == 'error' or message.tags == 'danger' %}
+                  <i class="fa-solid fa-circle-exclamation"></i>
+                {% elif message.tags == 'info' %}
+                  <i class="fa-solid fa-circle-info"></i>
+                {% endif %}
+                <span>{{ message }}</span>
+              </div>
+              <button type="button"
+                      class="ml-4 text-xl font-light hover:font-normal focus:outline-none"
+                      aria-label="Close"
+                      onclick="this.parentElement.remove()">&times;</button>
             </div>
-            <button type="button"
-                    class="ml-4 text-xl font-light hover:font-normal focus:outline-none"
-                    aria-label="Close"
-                    onclick="this.parentElement.remove()">
-              &times;
-            </button>
-          </div>
           {% endfor %}
         {% endif %}
-
-        {% block content %}
-        {% endblock %}
+        {% block content %}{% endblock %}
       </main>
     </div>
-
     {% if request.user.is_authenticated and chat_widget_enabled %}
-        <open-chat-studio-widget
-          class="z-50"
-          visible="false"
-          chatbot-id="{{ chatbot_id }}"
-          embed-key="{{ chatbot_embed_key }}"
-          button-text="{% translate 'Need help?' %}"
-          position="right"
-          expanded="false">
-        </open-chat-studio-widget>
+      <open-chat-studio-widget class="z-50" visible="false" chatbot-id="{{ chatbot_id }}" embed-key="{{ chatbot_embed_key }}" button-text="{% translate 'Need help?' %}" position="right" expanded="false">
+      </open-chat-studio-widget>
     {% endif %}
-
-  {% block inline_javascript %}
-    {% comment %}
+    {% block inline_javascript %}
+      {% comment %}
       Script tags with only code, no src (defer by default). To run
       with a "defer" so that you run inline code:
       <script>
         window.addEventListener('DOMContentLoaded', () => {/* Run whatever you want */
         });
-      </script>
-    {% endcomment %}
-  {% endblock inline_javascript %}
+</script>
+      {% endcomment %}
+    {% endblock inline_javascript %}
   </body>
 </html>
diff --git a/commcare_connect/templates/base_table.html b/commcare_connect/templates/base_table.html
index 6e861c7de8..ea6dafb3fd 100644
--- a/commcare_connect/templates/base_table.html
+++ b/commcare_connect/templates/base_table.html
@@ -1,147 +1,139 @@
 {% load django_tables2 %}
 {% load i18n %}
 {% block table-wrapper %}
-{% load sort_link %}
-<div class="table-container flex flex-col gap-2 mb-1">
-  {% block table %}
-  <div class="w-full overflow-x-auto overflow-y-auto block max-h-[70vh]">
-    <table class="base-table" {% render_attrs table.attrs %}>
-      {% block table.thead %}
-      {% if table.show_header %}
-      <thead {{ table.attrs.thead.as_html }}>
-        <tr>
-          {% for column in table.columns %}
-          <th>
-            {% if column.orderable %}
-            {% sortable_header column.name column.header table.use_view_url %}
-            {% else %}
-            <span>{{ column.header }}</span>
+  {% load sort_link %}
+  <div class="table-container flex flex-col gap-2 mb-1">
+    {% block table %}
+      <div class="w-full overflow-x-auto overflow-y-auto block max-h-[70vh]">
+        <table class="base-table" {% render_attrs table.attrs %}>
+          {% block table.thead %}
+            {% if table.show_header %}
+              <thead {{ table.attrs.thead.as_html }}>
+                <tr>
+                  {% for column in table.columns %}
+                    <th>
+                      {% if column.orderable %}
+                        {% sortable_header column.name column.header table.use_view_url %}
+                      {% else %}
+                        <span>{{ column.header }}</span>
+                      {% endif %}
+                    </th>
+                  {% endfor %}
+                </tr>
+              </thead>
             {% endif %}
-          </th>
-          {% endfor %}
-        </tr>
-      </thead>
-      {% endif %}
-      {% endblock table.thead %}
-
+          {% endblock table.thead %}
           {% block table.tbody %}
             <tbody>
-            <div style="overflow:hidden; border-radius:8px;">
-              {% for row in table.paginated_rows %}
-                {% block table.tbody.row %}
-                  <tr {{ row.attrs.as_html }} class="group">
-                    {% for column, cell in row.items %}
-                      <td {{ column.attrs.td.as_html }}>
-                        {% if column.localize == None %}
-                          {{ cell }}
-                        {% else %}
-                          {% if column.localize %}
-                            {{ cell|localize }}
+              <div style="overflow:hidden; border-radius:8px;">
+                {% for row in table.paginated_rows %}
+                  {% block table.tbody.row %}
+                    <tr {{ row.attrs.as_html }} class="group">
+                      {% for column, cell in row.items %}
+                        <td {{ column.attrs.td.as_html }}>
+                          {% if column.localize == None %}
+                            {{ cell }}
                           {% else %}
-                            {{ cell|unlocalize }}
+                            {% if column.localize %}
+                              {{ cell|localize }}
+                            {% else %}
+                              {{ cell|unlocalize }}
+                            {% endif %}
                           {% endif %}
-                        {% endif %}
-                      </td>
-                    {% endfor %}
-                  </tr>
-                {% endblock table.tbody.row %}
+                        </td>
+                      {% endfor %}
+                    </tr>
+                  {% endblock table.tbody.row %}
                 {% empty %}
-                {% if table.empty_text %}
-                  {% block table.tbody.empty_text %}
-                    <tr>
-                      <td colspan="{{ table.columns|length }}" class="text-center py-4">
-                        {{ table.empty_text }}
-                      </td>
+                  {% if table.empty_text %}
+                    {% block table.tbody.empty_text %}
+                      <tr>
+                        <td colspan="{{ table.columns|length }}" class="text-center py-4">{{ table.empty_text }}</td>
+                      </tr>
+                    {% endblock table.tbody.empty_text %}
+                  {% endif %}
+                {% endfor %}
+                {% block table.tfoot %}
+                  {% if table.has_footer %}
+                    <tr class="border-2 border-gray-100 font-bold">
+                      {% for column in table.columns %}
+                        <td {{ column.attrs.tf.as_html }}>{{ column.footer }}
+                        </td>
+                      {% endfor %}
                     </tr>
-                  {% endblock table.tbody.empty_text %}
-                {% endif %}
-              {% endfor %}
-              {% block table.tfoot %}
-              {% if table.has_footer %}
-                     <tr class="border-2 border-gray-100 font-bold">
-                     {% for column in table.columns %}
-                          <td {{ column.attrs.tf.as_html }}>{{column.footer }}</td>
-                     {% endfor %}
-                     </tr>
-              {% endif %}
-              {% endblock table.tfoot %}
-            </div>
+                  {% endif %}
+                {% endblock table.tfoot %}
+              </div>
             </tbody>
           {% endblock table.tbody %}
-
-
-    </table>
-  </div>
-  {% endblock table %}
-  {% block pagination %}
-  {% if table.page and table.paginator.count > DEFAULT_PAGE_SIZE %}
-  <div x-data class="table-footer w-full flex items-center justify-between h-14  bg-slate-50  text-brand-deep-purple py-2 px-4 rounded-lg">
-    <div class="flex items-center gap-2 max-w-fit text-brand-deep-purple text-sm">
-        {% if table.page.has_previous %}
-            <button
-              type="button"
-              @click="goToPage('{{ table.prefixed_page_field }}', {{ table.page.previous_page_number }})"
-              class="button-icon"
-              aria-label="{% trans 'Previous page' %}">
+        </table>
+      </div>
+    {% endblock table %}
+    {% block pagination %}
+      {% if table.page and table.paginator.count > DEFAULT_PAGE_SIZE %}
+        <div x-data
+             class="table-footer w-full flex items-center justify-between h-14  bg-slate-50  text-brand-deep-purple py-2 px-4 rounded-lg">
+          <div class="flex items-center gap-2 max-w-fit text-brand-deep-purple text-sm">
+            {% if table.page.has_previous %}
+              <button type="button"
+                      @click="goToPage('{{ table.prefixed_page_field }}', {{ table.page.previous_page_number }})"
+                      class="button-icon"
+                      aria-label="{% trans 'Previous page' %}">
                 <i class="fa-solid fa-chevron-left"></i>
-            </button>
-        {% else %}
-            <span class="button-icon opacity-50 cursor-not-allowed" aria-hidden="true">
+              </button>
+            {% else %}
+              <span class="button-icon opacity-50 cursor-not-allowed" aria-hidden="true">
                 <i class="fa-solid fa-chevron-left"></i>
-            </span>
-        {% endif %}
-
-        <span class="whitespace-nowrap">{% trans "Page" %}</span>
-        <input
-            type="number"
-            value="{{ table.page.number }}"
-            min="1"
-            max="{{ table.paginator.num_pages }}"
-            class="base-input w-16 text-center"
-            aria-label="{% blocktrans %}Current page number, input to navigate{% endblocktrans %}"
-            hx-trigger="change"
-            hx-on:change="goToPage('{{ table.prefixed_page_field }}', this.value)"
-        >        <span class="whitespace-nowrap ml-1">of {{ table.paginator.num_pages }}</span>
-
-        {% if table.page.has_next %}
-            <button
-              type="button"
-              @click="goToPage('{{ table.prefixed_page_field }}', {{ table.page.next_page_number }})"
-              class="button-icon"
-              aria-label="{% trans 'Next page' %}">
+              </span>
+            {% endif %}
+            <span class="whitespace-nowrap">{% trans "Page" %}</span>
+            <input type="number"
+                   value="{{ table.page.number }}"
+                   min="1"
+                   max="{{ table.paginator.num_pages }}"
+                   class="base-input w-16 text-center"
+                   aria-label="{% blocktrans %}Current page number, input to navigate{% endblocktrans %}"
+                   hx-trigger="change"
+                   hx-on:change="goToPage('{{ table.prefixed_page_field }}', this.value)">
+            <span class="whitespace-nowrap ml-1">of {{ table.paginator.num_pages }}</span>
+            {% if table.page.has_next %}
+              <button type="button"
+                      @click="goToPage('{{ table.prefixed_page_field }}', {{ table.page.next_page_number }})"
+                      class="button-icon"
+                      aria-label="{% trans 'Next page' %}">
                 <i class="fa-solid fa-chevron-right"></i>
-            </button>
-        {% else %}
-            <span class="button-icon opacity-50 cursor-not-allowed" aria-hidden="true">
+              </button>
+            {% else %}
+              <span class="button-icon opacity-50 cursor-not-allowed" aria-hidden="true">
                 <i class="fa-solid fa-chevron-right"></i>
-            </span>
+              </span>
+            {% endif %}
+            <!-- Right: Page Size Selector -->
+            <div class="flex items-center gap-2 text-sm">
+              <label for="page-size" class="whitespace-nowrap">{% trans "Rows per page" %}</label>
+              <select id="page-size"
+                      name="page_size"
+                      class="base-input w-16"
+                      @change="goToPage('page_size', $event.target.value)">
+                {% for size in PAGE_SIZE_OPTIONS %}
+                  <option value="{{ size }}"
+                          {% if request.GET.page_size == size|stringformat:"s" %}selected{% endif %}>
+                    {{ size }}
+                  </option>
+                {% endfor %}
+              </select>
+            </div>
+          </div>
         {% endif %}
-       <!-- Right: Page Size Selector -->
-      <div class="flex items-center gap-2 text-sm">
-        <label for="page-size" class="whitespace-nowrap">{% trans "Rows per page" %}</label>
-        <select
-          id="page-size"
-          name="page_size"
-          class="base-input w-16"
-          @change="goToPage('page_size', $event.target.value)">
-          {% for size in PAGE_SIZE_OPTIONS %}
-             <option value="{{ size }}" {% if request.GET.page_size == size|stringformat:"s" %}selected{% endif %}>{{ size }}</option>
-          {% endfor %}
-        </select>
-      </div>
-</div>
-  {% endif %}
-
-  {% endblock pagination %}
-</div>
-{% endblock table-wrapper %}
-
-{% block inline_js %}
-<script>
+      {% endblock pagination %}
+    </div>
+  {% endblock table-wrapper %}
+  {% block inline_js %}
+    <script>
     function goToPage(param, value) {
         const url = new URL(window.location.href);
         url.searchParams.set(param, value);
         window.location.href = url.toString();
     }
-</script>
-{% endblock inline_js %}
+    </script>
+  {% endblock inline_js %}
diff --git a/commcare_connect/templates/components/avatar.html b/commcare_connect/templates/components/avatar.html
index b96df4ca6c..c2ca45699a 100644
--- a/commcare_connect/templates/components/avatar.html
+++ b/commcare_connect/templates/components/avatar.html
@@ -1,6 +1,4 @@
-<div
-  title="{{ display_name }}"
-  class="rounded-full flex items-center justify-center select-none shrink-0 {{ size_classes }} {{ color_classes }}"
->
+<div title="{{ display_name }}"
+     class="rounded-full flex items-center justify-center select-none shrink-0 {{ size_classes }} {{ color_classes }}">
   <span>{{ initials_text }}</span>
 </div>
diff --git a/commcare_connect/templates/components/badges/badge_sm_dropdown.html b/commcare_connect/templates/components/badges/badge_sm_dropdown.html
index 658d8789ed..8a0247b256 100644
--- a/commcare_connect/templates/components/badges/badge_sm_dropdown.html
+++ b/commcare_connect/templates/components/badges/badge_sm_dropdown.html
@@ -1,71 +1,25 @@
-<span
-  x-data="{
-    open: false,
-    dropdownStyle: '',
-    originalOverflow: '',
-    calculatePosition() {
-    const badge = this.$el;
-    const badgeRect = badge.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
-
-    // Calculate available space
-    const spaceBelow = viewportHeight - badgeRect.bottom;
-    const shouldShowAbove = spaceBelow < 70 && badgeRect.top > 200;
-
-    // Corrected: remove window.scrollY
-    let top = shouldShowAbove
-      ? badgeRect.top - 115
-      : badgeRect.bottom;
-
-    // Adjust for right edge
-    let left = Math.min(
-      badgeRect.left,
-      viewportWidth - 220
-    );
-
-    this.dropdownStyle = `position: fixed; top: ${top}px; left: ${left}px;`;
-  },
-    toggleDropdown() {
-      if (!this.open) {
-        this.originalOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-        this.calculatePosition();
-      } else {
-        document.body.style.overflow = this.originalOverflow || '';
-      }
-      this.open = !this.open;
-    }
-  }"
-  @click="toggleDropdown()"
-  @click.outside="open = false; document.body.style.overflow = originalOverflow || '';"
-  :class="{
-    'primary-dark': open,
-    'primary-light': !open
-  }"
-  class="badge inline-block py-0.5 px-3.5 mx-1 text-nowrap rounded-3xl text-xs cursor-pointer relative transition-colors duration-200"
->
+<span x-data="{ open: false, dropdownStyle: '', originalOverflow: '', calculatePosition() { const badge = this.$el; const badgeRect = badge.getBoundingClientRect(); const viewportHeight = window.innerHeight; const viewportWidth = window.innerWidth;  // Calculate available space const spaceBelow = viewportHeight - badgeRect.bottom; const shouldShowAbove = spaceBelow < 70 && badgeRect.top > 200;  // Corrected: remove window.scrollY let top = shouldShowAbove ? badgeRect.top - 115 : badgeRect.bottom;  // Adjust for right edge let left = Math.min( badgeRect.left, viewportWidth - 220 );  this.dropdownStyle = `position: fixed; top: ${top}px; left: ${left}px;`; }, toggleDropdown() { if (!this.open) { this.originalOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; this.calculatePosition(); } else { document.body.style.overflow = this.originalOverflow || ''; } this.open = !this.open; } }"
+      @click="toggleDropdown()"
+      @click.outside="open = false; document.body.style.overflow = originalOverflow || '';"
+      :class="{ 'primary-dark': open, 'primary-light': !open }"
+      class="badge inline-block py-0.5 px-3.5 mx-1 text-nowrap rounded-3xl text-xs cursor-pointer relative transition-colors duration-200">
   +{{ list|length|add:-2 }}
-
   <!-- Dropdown -->
-  <div
-    x-show="open"
-    x-cloak
-    x-transition:enter="transition ease-out duration-200"
-    x-transition:enter-start="opacity-0 scale-95"
-    x-transition:enter-end="opacity-100 scale-100"
-    x-transition:leave="transition ease-in duration-75"
-    x-transition:leave-start="opacity-100 scale-100"
-    x-transition:leave-end="opacity-0 scale-95"
-    :style="dropdownStyle"
-    class="z-[9999] w-48 rounded-lg bg-white shadow-lg py-2 px-3 border border-gray-200"
-    style="min-width: 200px; max-height: 200px;"
-  >
+  <div x-show="open"
+       x-cloak
+       x-transition:enter="transition ease-out duration-200"
+       x-transition:enter-start="opacity-0 scale-95"
+       x-transition:enter-end="opacity-100 scale-100"
+       x-transition:leave="transition ease-in duration-75"
+       x-transition:leave-start="opacity-100 scale-100"
+       x-transition:leave-end="opacity-0 scale-95"
+       :style="dropdownStyle"
+       class="z-[9999] w-48 rounded-lg bg-white shadow-lg py-2 px-3 border border-gray-200"
+       style="min-width: 200px;
+              max-height: 200px">
     <p class="text-[#94A3B8] text-xs mb-1">{{ title|default:'Flags' }}</p>
     <div class="overflow-y-auto" style="max-height: 160px;">
-      {% for item in list %}
-        <p class="text-[#16006d] text-xs py-1">{{ item }}</p>
-      {% endfor %}
+      {% for item in list %}<p class="text-[#16006d] text-xs py-1">{{ item }}</p>{% endfor %}
     </div>
   </div>
 </span>
diff --git a/commcare_connect/templates/components/breadcrumbs.html b/commcare_connect/templates/components/breadcrumbs.html
index 06b1fd0ff1..e0e96be324 100644
--- a/commcare_connect/templates/components/breadcrumbs.html
+++ b/commcare_connect/templates/components/breadcrumbs.html
@@ -1,8 +1,8 @@
 <ul class="breadcrumb">
-    {% for data in path %}
+  {% for data in path %}
     <li>
-        <a href="{{ data.url }}">{{ data.title }}</a>
-        <i class="fa-solid fa-chevron-right"></i>
+      <a href="{{ data.url }}">{{ data.title }}</a>
+      <i class="fa-solid fa-chevron-right"></i>
     </li>
-    {% endfor %}
+  {% endfor %}
 </ul>
diff --git a/commcare_connect/templates/components/cards/user_status_card.html b/commcare_connect/templates/components/cards/user_status_card.html
index eef643ab11..264e594649 100644
--- a/commcare_connect/templates/components/cards/user_status_card.html
+++ b/commcare_connect/templates/components/cards/user_status_card.html
@@ -1,6 +1,6 @@
 {% load i18n %}
-
-<div class="bg-white shadow-sm p-4 rounded-2xl flex flex-col gap-4" x-data="{showSuspendModal: false}">
+<div class="bg-white shadow-sm p-4 rounded-2xl flex flex-col gap-4"
+     x-data="{showSuspendModal: false}">
   <div class="flex justify-between items-center gap-4 text-gray-400 text-sm whitespace-nowrap">
     <h3 class="text-base font-medium text-brand-deep-purple">User Status Details</h3>
     {% if opportunity_access.suspended %}
@@ -10,25 +10,20 @@ <h3 class="text-base font-medium text-brand-deep-purple">User Status Details</h3
     {% endif %}
     {% if has_suspension_perm %}
       {% if opportunity_access.suspended %}
-        <button
-          hx-post="{% url 'opportunity:revoke_user_suspension' org_slug=request.org.slug opp_id=opportunity_access.opportunity.opportunity_id pk=opportunity_access.opportunity_access_id %}"
-          hx-vals='{"next": "{{ request.get_full_path }}"}'
-          class="button button-sm primary-light">
-          {% translate "Revoke Suspension" %}
-        </button>
+        <button hx-post="{% url 'opportunity:revoke_user_suspension' org_slug=request.org.slug opp_id=opportunity_access.opportunity.opportunity_id pk=opportunity_access.opportunity_access_id %}"
+                hx-vals='{"next": "{{ request.get_full_path }}"}'
+                class="button button-sm primary-light">{% translate "Revoke Suspension" %}</button>
       {% else %}
-        <button class="button button-sm primary-light" @click="showSuspendModal = true">
-          {% translate "Suspend" %}
-        </button>
+        <button class="button button-sm primary-light"
+                @click="showSuspendModal = true">{% translate "Suspend" %}</button>
       {% endif %}
     {% endif %}
     <button class="button-icon"
-      aria-label="{% translate 'Close user status details' %}"
-      @click="isStatusModalOpen = false">
+            aria-label="{% translate 'Close user status details' %}"
+            @click="isStatusModalOpen = false">
       <i class="fa-solid fa-xmark cursor-pointer"></i>
     </button>
   </div>
-
   {% if opportunity_access.suspended %}
     <div class="flex flex-col gap-1 text-sm">
       {% if opportunity_access.suspension_date %}
@@ -45,43 +40,53 @@ <h3 class="text-base font-medium text-brand-deep-purple">User Status Details</h3
       {% endif %}
     </div>
   {% endif %}
-
-  <div x-cloak x-show="showSuspendModal" x-transition.opacity class="modal-backdrop">
+  <div x-cloak
+       x-show="showSuspendModal"
+       x-transition.opacity
+       class="modal-backdrop">
     <div @click.away="showSuspendModal = false" x-transition class="modal">
       <div class="header flex justify-between items-center">
         <h2 class="title mb-4">Suspend User</h2>
-        <button @click="showSuspendModal = false" class="button-icon" aria-label="Close">
+        <button @click="showSuspendModal = false"
+                class="button-icon"
+                aria-label="Close">
           <i class="fa-solid fa-xmark"></i>
         </button>
       </div>
       <form method="post"
-          action="{% url "opportunity:suspend_user" org_slug=request.org.slug opp_id=opportunity_access.opportunity.opportunity_id pk=opportunity_access.opportunity_access_id %}"
-          @submit="showSuspendModal = false">
-          {% csrf_token %}
-          <div class="mb-2">
-            <textarea class="base-textarea" id="reason" name="reason" rows="3" placeholder="{% translate "Please provide a reason for suspending user." %}"></textarea>
-          </div>
-          <table class="base-table mb-2">
-            <tbody>
-              <tr class="border border-gray-100">
-                <th scope="row">{% translate "Deliveries waiting for Approval" %}</th>
-                <td class="border-0">{{ pending_completed_work_count }}</td>
-              </tr>
-              <tr class="border border-gray-100">
-                <th scope="row">{% translate "Payment Accrued" %}</th>
-                <td class="border-0">{{ opportunity_access.payment_accrued }}</td>
-              </tr>
-              <tr class="border border-gray-100">
-                <th scope="row">{% translate "Payment Pending Disbursement" %}</th>
-                <td class="border-0">{{ pending_payment }}</td>
-              </tr>
-            </tbody>
-          </table>
-          <p class="text-sm text-red-500 mb-2">{% translate "You will not be able to approve payments for the user or pay the user after suspension." %}</p>
+            action="{% url "opportunity:suspend_user" org_slug=request.org.slug opp_id=opportunity_access.opportunity.opportunity_id pk=opportunity_access.opportunity_access_id %}"
+            @submit="showSuspendModal = false">
+        {% csrf_token %}
+        <div class="mb-2">
+          <textarea class="base-textarea"
+                    id="reason"
+                    name="reason"
+                    rows="3"
+                    placeholder="{% translate "Please provide a reason for suspending user." %}"></textarea>
+        </div>
+        <table class="base-table mb-2">
+          <tbody>
+            <tr class="border border-gray-100">
+              <th scope="row">{% translate "Deliveries waiting for Approval" %}</th>
+              <td class="border-0">{{ pending_completed_work_count }}</td>
+            </tr>
+            <tr class="border border-gray-100">
+              <th scope="row">{% translate "Payment Accrued" %}</th>
+              <td class="border-0">{{ opportunity_access.payment_accrued }}</td>
+            </tr>
+            <tr class="border border-gray-100">
+              <th scope="row">{% translate "Payment Pending Disbursement" %}</th>
+              <td class="border-0">{{ pending_payment }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="text-sm text-red-500 mb-2">
+          {% translate "You will not be able to approve payments for the user or pay the user after suspension." %}
+        </p>
         <div class="footer flex justify-end">
-          <button @click="showSuspendModal = false" type="button" class="button button-md outline-style">
-            Close
-          </button>
+          <button @click="showSuspendModal = false"
+                  type="button"
+                  class="button button-md outline-style">Close</button>
           <button type="submit" class="button button-md negative-dark">{% translate "Suspend" %}</button>
         </div>
       </form>
diff --git a/commcare_connect/templates/components/confirm_modal.html b/commcare_connect/templates/components/confirm_modal.html
index 50c08fc6aa..81ec34ea01 100644
--- a/commcare_connect/templates/components/confirm_modal.html
+++ b/commcare_connect/templates/components/confirm_modal.html
@@ -1,5 +1,4 @@
 {% load i18n %}
-
 <script>
 /**
  * Confirm modal store.
@@ -67,42 +66,39 @@
   }
 });
 </script>
-
-<div x-data x-show="$store.confirmModal.open" x-cloak x-transition.opacity
-    class="modal-backdrop"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="confirm-modal-title"
-    @keydown.escape.window="$store.confirmModal.close()">
-    <div @click.outside="$store.confirmModal.close()" class="modal">
-
-        <div class="flex justify-between items-center pb-2 mb-4">
-            <h2 id="confirm-modal-title" class="text-lg font-medium text-brand-deep-purple"
-                x-text="$store.confirmModal.title">
-            </h2>
-            <button @click="$store.confirmModal.close()"
-                    class="text-gray-500 hover:text-gray-700"
-                    aria-label="{% trans 'Close dialog' %}">
-                <i class="fa-solid fa-xmark text-xl" aria-hidden="true"></i>
-            </button>
-        </div>
-
-        <div class="mb-6">
-            <p class="text-gray-700 mb-2" x-text="$store.confirmModal.message"></p>
-        </div>
-
-        <div class="flex justify-end gap-4 pt-4">
-            <button type="button" class="button button-md outline-style"
-                    @click="$store.confirmModal.close()">
-                {% trans 'Cancel' %}
-            </button>
-            <button type="button" class="button button-md text-white"
-                    :class="$store.confirmModal.confirmBtnRed
-                        ? 'bg-red-600 hover:bg-red-700'
-                        : 'bg-brand-deep-purple hover:bg-brand-deep-purple/90'"
-                    @click="$store.confirmModal.confirm()">
-                <span x-text="$store.confirmModal.confirmBtnText || '{% trans "Confirm" %}'"></span>
-            </button>
-        </div>
+<div x-data
+     x-show="$store.confirmModal.open"
+     x-cloak
+     x-transition.opacity
+     class="modal-backdrop"
+     role="dialog"
+     aria-modal="true"
+     aria-labelledby="confirm-modal-title"
+     @keydown.escape.window="$store.confirmModal.close()">
+  <div @click.outside="$store.confirmModal.close()" class="modal">
+    <div class="flex justify-between items-center pb-2 mb-4">
+      <h2 id="confirm-modal-title"
+          class="text-lg font-medium text-brand-deep-purple"
+          x-text="$store.confirmModal.title"></h2>
+      <button @click="$store.confirmModal.close()"
+              class="text-gray-500 hover:text-gray-700"
+              aria-label="{% trans 'Close dialog' %}">
+        <i class="fa-solid fa-xmark text-xl" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="mb-6">
+      <p class="text-gray-700 mb-2" x-text="$store.confirmModal.message"></p>
+    </div>
+    <div class="flex justify-end gap-4 pt-4">
+      <button type="button"
+              class="button button-md outline-style"
+              @click="$store.confirmModal.close()">{% trans 'Cancel' %}</button>
+      <button type="button"
+              class="button button-md text-white"
+              :class="$store.confirmModal.confirmBtnRed ? 'bg-red-600 hover:bg-red-700' : 'bg-brand-deep-purple hover:bg-brand-deep-purple/90'"
+              @click="$store.confirmModal.confirm()">
+        <span x-text="$store.confirmModal.confirmBtnText || '{% trans "Confirm" %}'"></span>
+      </button>
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/components/dropdowns/text_button_dropdown.html b/commcare_connect/templates/components/dropdowns/text_button_dropdown.html
index 0e7e3e3302..f3faa3b9cb 100644
--- a/commcare_connect/templates/components/dropdowns/text_button_dropdown.html
+++ b/commcare_connect/templates/components/dropdowns/text_button_dropdown.html
@@ -1,73 +1,27 @@
-<span
-  x-data="{
-    open: false,
-    dropdownStyle: '',
-    originalOverflow: '',
-    calculatePosition() {
-      const badge = this.$el;
-      const badgeRect = badge.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const viewportWidth = window.innerWidth;
-      const dropdown = this.$el.querySelector('.dropdown-content');
-
-      setTimeout(() => {
-        const dropdownHeight = dropdown ? dropdown.offsetHeight : 0;
-
-        const spaceBelow = viewportHeight - badgeRect.bottom;
-        const shouldShowAbove = spaceBelow < dropdownHeight && badgeRect.top > dropdownHeight;
-
-        let top = shouldShowAbove
-          ? badgeRect.top + window.scrollY - dropdownHeight
-          : badgeRect.bottom + window.scrollY;
-
-        let left = Math.min(
-          badgeRect.left,
-          viewportWidth -  dropdown.offsetWidth - 20
-        );
-
-        this.dropdownStyle = `position: fixed; top: ${top}px; left: ${left}px;`;
-      }, 0);
-    },
-    toggleDropdown() {
-      if (!this.open) {
-        this.originalOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-        this.calculatePosition();
-      } else {
-        document.body.style.overflow = this.originalOverflow || '';
-      }
-      this.open = !this.open;
-    }
-  }"
-  @click="toggleDropdown()"
-  @click.outside="open = false; document.body.style.overflow = originalOverflow || '';"
-  :class="{
-    '': open,
-    '': !open
-  }"
-  class="cursor-pointer {{styles}}"
->
-  {{text}}
-
+<span x-data="{ open: false, dropdownStyle: '', originalOverflow: '', calculatePosition() { const badge = this.$el; const badgeRect = badge.getBoundingClientRect(); const viewportHeight = window.innerHeight; const viewportWidth = window.innerWidth; const dropdown = this.$el.querySelector('.dropdown-content');  setTimeout(() => { const dropdownHeight = dropdown ? dropdown.offsetHeight : 0;  const spaceBelow = viewportHeight - badgeRect.bottom; const shouldShowAbove = spaceBelow < dropdownHeight && badgeRect.top > dropdownHeight;  let top = shouldShowAbove ? badgeRect.top + window.scrollY - dropdownHeight : badgeRect.bottom + window.scrollY;  let left = Math.min( badgeRect.left, viewportWidth -  dropdown.offsetWidth - 20 );  this.dropdownStyle = `position: fixed; top: ${top}px; left: ${left}px;`; }, 0); }, toggleDropdown() { if (!this.open) { this.originalOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; this.calculatePosition(); } else { document.body.style.overflow = this.originalOverflow || ''; } this.open = !this.open; } }"
+      @click="toggleDropdown()"
+      @click.outside="open = false; document.body.style.overflow = originalOverflow || '';"
+      :class="{ '': open, '': !open }"
+      class="cursor-pointer {{ styles }}">
+  {{ text }}
   <!-- Dropdown -->
-  <div
-    x-show="open"
-    x-cloak
-    x-transition:enter="transition ease-out duration-200"
-    x-transition:enter-start="opacity-0 scale-95"
-    x-transition:enter-end="opacity-100 scale-100"
-    x-transition:leave="transition ease-in duration-75"
-    x-transition:leave-start="opacity-100 scale-100"
-    x-transition:leave-end="opacity-0 scale-95"
-    :style="dropdownStyle"
-    class="dropdown-content z-40 w-48 rounded-lg bg-white shadow-lg py-2 px-3 border border-gray-200 min-w-8"
-  >
+  <div x-show="open"
+       x-cloak
+       x-transition:enter="transition ease-out duration-200"
+       x-transition:enter-start="opacity-0 scale-95"
+       x-transition:enter-end="opacity-100 scale-100"
+       x-transition:leave="transition ease-in duration-75"
+       x-transition:leave-start="opacity-100 scale-100"
+       x-transition:leave-end="opacity-0 scale-95"
+       :style="dropdownStyle"
+       class="dropdown-content z-40 w-48 rounded-lg bg-white shadow-lg py-2 px-3 border border-gray-200 min-w-8">
     <p class="text-blue-light text-xs mb-1">{{ title|default:'' }}</p>
-    <div class="" >
+    <div class="">
       {% for item in list %}
-      <a href="{{ item.url }}" class="block w-full text-left bg-transparent border-0 px-2 my-2 hover:bg-slate-100 rounded">
-        {{ item.title }}
-      </a>
+        <a href="{{ item.url }}"
+           class="block w-full text-left bg-transparent border-0 px-2 my-2 hover:bg-slate-100 rounded">
+          {{ item.title }}
+        </a>
       {% endfor %}
     </div>
   </div>
diff --git a/commcare_connect/templates/components/filter_modal.html b/commcare_connect/templates/components/filter_modal.html
index 98477831dd..e936e10f97 100644
--- a/commcare_connect/templates/components/filter_modal.html
+++ b/commcare_connect/templates/components/filter_modal.html
@@ -18,43 +18,47 @@
   Usage example:
     {% include "components/filter_modal.html" with form_id="myFilterForm" hx_target="#my-table" container_class="flex justify-end mb-3" %}
 {% endcomment %}
-
 {% load i18n crispy_forms_tags %}
-<div x-cloak x-data="{showFilterModal: false}" {% if container_class %}class="{{ container_class }}"{% endif %}>
-    <button type="button" @click="showFilterModal = true" class="relative button-icon shadow-sm">
-        <i class="fa-solid fa-sliders text-brand-deep-purple"></i>
-        {% if filters_applied_count %}
-        <span class="absolute flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-brand-marigold border-2 border-white rounded-full transform translate-x-1/2 -translate-y-1/2">
-            {{ filters_applied_count }}
-        </span>
-        {% endif %}
-    </button>
-    <div x-show="showFilterModal" class="modal-backdrop">
-        <div class="modal">
-            <div class="header text-lg font-semibold text-brand-deep-purple">
-                <h1>{% trans "Filters" %}</h1>
-                <button @click="showFilterModal = false">
-                    <i class="fa-solid fa-xmark text-xl"></i>
-                </button>
-            </div>
-            <form
-                id="{{ form_id }}"
-                hx-get="."
-                {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
-                {% if hx_target %}hx-select="{{ hx_target }}"{% endif %}
-                hx-push-url="true"
-                hx-trigger="submit"
-                {% if hx_indicator %}hx-indicator="{{ hx_indicator }}"{% endif %}
-                class="content"
-            >
-                <div class="modal-body">
-                    {% crispy filter_form %}
-                </div>
-                <div class="footer">
-                    <button type="button" @click="showFilterModal = false" class="button button-md outline-style">{% trans "Close" %}</button>
-                    <button form="{{ form_id }}" type="submit" @click="showFilterModal = false" class="button button-md primary-dark">{% trans "Apply" %}</button>
-                </div>
-            </form>
+<div x-cloak
+     x-data="{showFilterModal: false}"
+     {% if container_class %}class="{{ container_class }}"{% endif %}>
+  <button type="button"
+          @click="showFilterModal = true"
+          class="relative button-icon shadow-sm">
+    <i class="fa-solid fa-sliders text-brand-deep-purple"></i>
+    {% if filters_applied_count %}
+      <span class="absolute flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-brand-marigold border-2 border-white rounded-full transform translate-x-1/2 -translate-y-1/2">
+        {{ filters_applied_count }}
+      </span>
+    {% endif %}
+  </button>
+  <div x-show="showFilterModal" class="modal-backdrop">
+    <div class="modal">
+      <div class="header text-lg font-semibold text-brand-deep-purple">
+        <h1>{% trans "Filters" %}</h1>
+        <button @click="showFilterModal = false">
+          <i class="fa-solid fa-xmark text-xl"></i>
+        </button>
+      </div>
+      <form id="{{ form_id }}"
+            hx-get="."
+            {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+            {% if hx_target %}hx-select="{{ hx_target }}"{% endif %}
+            hx-push-url="true"
+            hx-trigger="submit"
+            {% if hx_indicator %}hx-indicator="{{ hx_indicator }}"{% endif %}
+            class="content">
+        <div class="modal-body">{% crispy filter_form %}</div>
+        <div class="footer">
+          <button type="button"
+                  @click="showFilterModal = false"
+                  class="button button-md outline-style">{% trans "Close" %}</button>
+          <button form="{{ form_id }}"
+                  type="submit"
+                  @click="showFilterModal = false"
+                  class="button button-md primary-dark">{% trans "Apply" %}</button>
         </div>
+      </form>
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/components/form.html b/commcare_connect/templates/components/form.html
index 3042cd3e95..f64f028e49 100644
--- a/commcare_connect/templates/components/form.html
+++ b/commcare_connect/templates/components/form.html
@@ -1,10 +1,11 @@
 {% extends "base.html" %}
 {% load static %}
 {% load crispy_forms_tags %}
-
-{% if title %}{% block title %}{{ title }}{% endblock %} {% endif %}
+{% if title %}
+  {% block title %}{{ title }}{% endblock %}
+{% endif %}
 {% block content %}
-<div class="container md:max-w-screen-lg mx-auto flex flex-col gap-6">
-  {% include "components/partial_form.html" %}
-</div>
+  <div class="container md:max-w-screen-lg mx-auto flex flex-col gap-6">
+    {% include "components/partial_form.html" %}
+  </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/components/invoice_confirm_modal.html b/commcare_connect/templates/components/invoice_confirm_modal.html
index 0e78549bf3..a7f38a47d6 100644
--- a/commcare_connect/templates/components/invoice_confirm_modal.html
+++ b/commcare_connect/templates/components/invoice_confirm_modal.html
@@ -1,40 +1,35 @@
 {% load i18n %}
-
-<div x-show="{{ modal_name }}" x-cloak x-transition.opacity
-    class="modal-backdrop"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="modal-title-{{ modal_name }}"
-    @keydown.escape.window="{{ modal_name }} = false">
-    <div @click.outside="{{ modal_name }} = false" class="modal">
-
-        <div class="flex justify-between items-center pb-2 mb-4">
-            <h2 id="modal-title-{{ modal_name }}" class="text-lg font-medium text-brand-deep-purple">
-                {{ modal_title }}
-            </h2>
-            <button @click="{{ modal_name }} = false"
-                    class="text-gray-500 hover:text-gray-700"
-                    aria-label="{% trans 'Close dialog' %}">
-                <i class="fa-solid fa-xmark text-xl" aria-hidden="true"></i>
-            </button>
-        </div>
-
-        <div class="mb-6">
-            <p class="text-gray-700 mb-2">
-                {{ modal_message }}
-            </p>
-        </div>
-
-        <div class="flex justify-end gap-2 pt-4">
-            <button type="button" class="button button-md outline-style" @click="{{ modal_name }} = false">
-                {% trans 'Close' %}
-            </button>
-            <button type="button"
-                    class="button button-md negative-dark"
-                    @click="{{ confirm_action }}">
-                <i class="fa-solid fa-ban" aria-hidden="true"></i>
-                {{ btn_text }}
-            </button>
-        </div>
+<div x-show="{{ modal_name }}"
+     x-cloak
+     x-transition.opacity
+     class="modal-backdrop"
+     role="dialog"
+     aria-modal="true"
+     aria-labelledby="modal-title-{{ modal_name }}"
+     @keydown.escape.window="{{ modal_name }} = false">
+  <div @click.outside="{{ modal_name }} = false" class="modal">
+    <div class="flex justify-between items-center pb-2 mb-4">
+      <h2 id="modal-title-{{ modal_name }}"
+          class="text-lg font-medium text-brand-deep-purple">{{ modal_title }}</h2>
+      <button @click="{{ modal_name }} = false"
+              class="text-gray-500 hover:text-gray-700"
+              aria-label="{% trans 'Close dialog' %}">
+        <i class="fa-solid fa-xmark text-xl" aria-hidden="true"></i>
+      </button>
     </div>
+    <div class="mb-6">
+      <p class="text-gray-700 mb-2">{{ modal_message }}</p>
+    </div>
+    <div class="flex justify-end gap-2 pt-4">
+      <button type="button"
+              class="button button-md outline-style"
+              @click="{{ modal_name }} = false">{% trans 'Close' %}</button>
+      <button type="button"
+              class="button button-md negative-dark"
+              @click="{{ confirm_action }}">
+        <i class="fa-solid fa-ban" aria-hidden="true"></i>
+        {{ btn_text }}
+      </button>
+    </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/components/organization_home_page/add_org_member_modal.html b/commcare_connect/templates/components/organization_home_page/add_org_member_modal.html
index 8570ce24f8..3f9348e60c 100644
--- a/commcare_connect/templates/components/organization_home_page/add_org_member_modal.html
+++ b/commcare_connect/templates/components/organization_home_page/add_org_member_modal.html
@@ -1,28 +1,22 @@
 {% load crispy_forms_tags %}
 {% load i18n %}
-
 <div x-show="showAddMemberModal"
      x-cloak
      x-transition.opacity
      class="modal-backdrop"
      @keydown.escape.window="showAddMemberModal = false">
-  <div @click.outside="showAddMemberModal = false"
-       class="modal">
-
+  <div @click.outside="showAddMemberModal = false" class="modal">
     <div class="flex justify-between items-center pb-2 mb-4">
-      <h2 class="text-lg font-semibold text-brand-deep-purple">
-        {% trans "Invite Member" %}
-      </h2>
-      <button @click="showAddMemberModal = false" class="text-gray-500 hover:text-gray-700">
+      <h2 class="text-lg font-semibold text-brand-deep-purple">{% trans "Invite Member" %}</h2>
+      <button @click="showAddMemberModal = false"
+              class="text-gray-500 hover:text-gray-700">
         <i class="fa-solid fa-xmark text-xl"></i>
       </button>
     </div>
-
-    <form action="{% url 'organization:add_members' request.org.slug %}" method="post">
+    <form action="{% url 'organization:add_members' request.org.slug %}"
+          method="post">
       {% csrf_token %}
-      <div class="mb-4">
-        {% crispy membership_form %}
-      </div>
+      <div class="mb-4">{% crispy membership_form %}</div>
     </form>
   </div>
 </div>
diff --git a/commcare_connect/templates/components/organization_home_page/remove_org_member_confirm_modal.html b/commcare_connect/templates/components/organization_home_page/remove_org_member_confirm_modal.html
index 83e3a6fd3a..a62e236d4f 100644
--- a/commcare_connect/templates/components/organization_home_page/remove_org_member_confirm_modal.html
+++ b/commcare_connect/templates/components/organization_home_page/remove_org_member_confirm_modal.html
@@ -1,47 +1,46 @@
 {% load i18n %}
-
-<div x-show="showConfirmRemoveMembershipModal" x-cloak x-transition.opacity
-    class="modal-backdrop"
-    @keydown.escape.window="showConfirmRemoveMembershipModal = false">
-    <div @click.outside="showConfirmRemoveMembershipModal = false" class="modal">
-
-        <div class="flex justify-between items-center pb-2 mb-4">
-            <h2 class="text-lg font-medium text-brand-deep-purple">
-                {% trans "Remove Member(s)" %}
-            </h2>
-            <button @click="showConfirmRemoveMembershipModal = false" class="text-gray-500 hover:text-gray-700">
-                <i class="fa-solid fa-xmark text-xl"></i>
-            </button>
-        </div>
-
-        <div class="mb-6">
-            <p class="text-gray-700 mb-2">
-                {% blocktrans %}
+<div x-show="showConfirmRemoveMembershipModal"
+     x-cloak
+     x-transition.opacity
+     class="modal-backdrop"
+     @keydown.escape.window="showConfirmRemoveMembershipModal = false">
+  <div @click.outside="showConfirmRemoveMembershipModal = false"
+       class="modal">
+    <div class="flex justify-between items-center pb-2 mb-4">
+      <h2 class="text-lg font-medium text-brand-deep-purple">{% trans "Remove Member(s)" %}</h2>
+      <button @click="showConfirmRemoveMembershipModal = false"
+              class="text-gray-500 hover:text-gray-700">
+        <i class="fa-solid fa-xmark text-xl"></i>
+      </button>
+    </div>
+    <div class="mb-6">
+      <p class="text-gray-700 mb-2">
+        {% blocktrans %}
                     Are you sure you want to remove the
                     <span x-text="selected.length"></span>
                     selected member(s)?
                 {% endblocktrans %}
-            </p>
-            <p class="text-red-600 text-sm font-medium">
-                {% trans "This action is irreversible and cannot be undone." %}
-            </p>
-        </div>
-
-        <div class="flex justify-end gap-2 pt-4">
-            <button type="button" class="button button-md outline-style" @click="showConfirmRemoveMembershipModal = false">
-                {% trans 'Cancel' %}
-            </button>
-            <form action="{% url 'organization:remove_members' request.org.slug %}" method="post" class="inline">
-                {% csrf_token %}
-                <template x-for="id in selected">
-                    <input type="hidden" name="membership_ids" :value="id">
-                </template>
-                <button type="submit" class="button button-md bg-red-600 hover:bg-red-700 text-white"
-                        @click="showConfirmRemoveMembershipModal = false">
-                    <i class="fa-solid fa-trash"></i>
-                    {% trans 'Remove Member(s)' %}
-                </button>
-            </form>
-        </div>
+      </p>
+      <p class="text-red-600 text-sm font-medium">{% trans "This action is irreversible and cannot be undone." %}</p>
+    </div>
+    <div class="flex justify-end gap-2 pt-4">
+      <button type="button"
+              class="button button-md outline-style"
+              @click="showConfirmRemoveMembershipModal = false">{% trans 'Cancel' %}</button>
+      <form action="{% url 'organization:remove_members' request.org.slug %}"
+            method="post"
+            class="inline">
+        {% csrf_token %}
+        <template x-for="id in selected">
+          <input type="hidden" name="membership_ids" :value="id">
+        </template>
+        <button type="submit"
+                class="button button-md bg-red-600 hover:bg-red-700 text-white"
+                @click="showConfirmRemoveMembershipModal = false">
+          <i class="fa-solid fa-trash"></i>
+          {% trans 'Remove Member(s)' %}
+        </button>
+      </form>
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/components/partial_form.html b/commcare_connect/templates/components/partial_form.html
index 3dcd054a3b..a46c6fa146 100644
--- a/commcare_connect/templates/components/partial_form.html
+++ b/commcare_connect/templates/components/partial_form.html
@@ -1,6 +1,5 @@
 {% load static %}
 {% load crispy_forms_tags %}
-
 {% block content %}
   {% if form_title %}<h2 class="text-xl text-brand-deep-purple mb-2">{{ form_title }}</h2>{% endif %}
   <form method="post" hx-ext="loading-states">
diff --git a/commcare_connect/templates/components/progressbar/simple-progressbar.html b/commcare_connect/templates/components/progressbar/simple-progressbar.html
index 99c5538c92..28269ae02b 100644
--- a/commcare_connect/templates/components/progressbar/simple-progressbar.html
+++ b/commcare_connect/templates/components/progressbar/simple-progressbar.html
@@ -4,18 +4,16 @@
     <!-- Progress bar container -->
     <div class="relative w-full h-2.5 bg-brand-indigo/10 rounded-full overflow-hidden">
       <!-- Progress fill with percentage width -->
-      <div class="absolute top-0 left-0 h-full bg-brand-indigo max-w-full" style="width: {{ percentage }}%;"></div>
+      <div class="absolute top-0 left-0 h-full bg-brand-indigo max-w-full"
+           style="width: {{ percentage }}%"></div>
     </div>
     <!-- Percentage text -->
     <span class="w-[74px] text-sm text-gray-700">{{ percentage }}%</span>
-
   {% else %}
     <div class="relative w-full h-2.5 bg-brand-indigo/10 rounded-full overflow-hidden">
       <div class="absolute top-0 left-0 h-full bg-brand-indigo max-w-full"
-           style="width: {{ percentage }}%;">
-      </div>
-     <div class="absolute top-0 left-1/2 -translate-x-1/2 h-full flex items-center justify-center text-xs font-medium
-                  {% if percentage > 50 %}text-white{% else %}text-gray-600{% endif %}">
+           style="width: {{ percentage }}%"></div>
+      <div class="absolute top-0 left-1/2 -translate-x-1/2 h-full flex items-center justify-center text-xs font-medium {% if percentage > 50 %}text-white{% else %}text-gray-600{% endif %}">
         {{ current }}
       </div>
     </div>
diff --git a/commcare_connect/templates/components/sidenav-items.html b/commcare_connect/templates/components/sidenav-items.html
index a94d3d87fc..5014480a35 100644
--- a/commcare_connect/templates/components/sidenav-items.html
+++ b/commcare_connect/templates/components/sidenav-items.html
@@ -1,26 +1,21 @@
-<a href="{{ target }}" class="flex rounded-lg items-center p-2 hover:bg-brand-sunset-light transition-all duration-300 relative group">
-    <!-- Icon Container with Fixed Width -->
-    <div class="flex items-center justify-center w-8 h-8">
-        <i class="fa-solid fa-{{ icon }}"></i>
-    </div>
-
-    <!-- Text Container with Fixed Width -->
-    <div class="transition-all duration-300 overflow-hidden flex items-center"
-         :class="sidebarOpen ? 'w-40 ml-4 opacity-100' : 'w-0 opacity-0'">
-        <span class="text-xs whitespace-nowrap">{{ name }}</span>
-    </div>
-
-    <!-- Hover Tooltip -->
-    <div class="absolute hidden px-2 py-1 ml-4 text-sm transform -translate-y-1/2 bg-white rounded top-1/2 left-full text-brand-deep-purple group-hover:block whitespace-nowrap z-30 shadow-lg"
-         x-show="!sidebarOpen"
-         x-cloak>
-        {{ name }}
-    </div>
-
-    <!-- Selected -->
-
-     {% if request.resolver_match.namespace == namespace %}
-     <div class="absolute left-0 top-0 w-full h-full bg-brand-mango/20 rounded-lg"></div>
-     <div class="absolute right-0 w-1 h-1/2 top-1/2 -translate-y-1/2 bg-brand-mango rounded-2xl"></div>
-     {% endif %}
+<a href="{{ target }}"
+   class="flex rounded-lg items-center p-2 hover:bg-brand-sunset-light transition-all duration-300 relative group">
+  <!-- Icon Container with Fixed Width -->
+  <div class="flex items-center justify-center w-8 h-8">
+    <i class="fa-solid fa-{{ icon }}"></i>
+  </div>
+  <!-- Text Container with Fixed Width -->
+  <div class="transition-all duration-300 overflow-hidden flex items-center"
+       :class="sidebarOpen ? 'w-40 ml-4 opacity-100' : 'w-0 opacity-0'">
+    <span class="text-xs whitespace-nowrap">{{ name }}</span>
+  </div>
+  <!-- Hover Tooltip -->
+  <div class="absolute hidden px-2 py-1 ml-4 text-sm transform -translate-y-1/2 bg-white rounded top-1/2 left-full text-brand-deep-purple group-hover:block whitespace-nowrap z-30 shadow-lg"
+       x-show="!sidebarOpen"
+       x-cloak>{{ name }}</div>
+  <!-- Selected -->
+  {% if request.resolver_match.namespace == namespace %}
+    <div class="absolute left-0 top-0 w-full h-full bg-brand-mango/20 rounded-lg"></div>
+    <div class="absolute right-0 w-1 h-1/2 top-1/2 -translate-y-1/2 bg-brand-mango rounded-2xl"></div>
+  {% endif %}
 </a>
diff --git a/commcare_connect/templates/components/upload_progress_bar.html b/commcare_connect/templates/components/upload_progress_bar.html
index 35f5334cff..05d0bd80c0 100644
--- a/commcare_connect/templates/components/upload_progress_bar.html
+++ b/commcare_connect/templates/components/upload_progress_bar.html
@@ -1,25 +1,17 @@
-<div
-  class="flex items-center justify-center"
-  {% if not progress.complete %}
-    hx-get="{{ export_status_url }}"
-    hx-trigger="load delay:2s"
-    hx-target="this"
-    hx-swap="outerHTML"
-  {% endif %}
->
+<div class="flex items-center justify-center"
+     {% if not progress.complete %} hx-get="{{ export_status_url }}" hx-trigger="load delay:2s" hx-target="this" hx-swap="outerHTML" {% endif %}>
   {% if progress.error %}
     <div class="rounded-lg bg-red-100 text-red-700 px-4 py-3">
       <p class="font-medium">Export Failed</p>
       <p class="text-sm mt-1">{{ progress.error }}</p>
     </div>
-
   {% elif not progress.complete %}
     <div class="w-full">
       <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden mb-4">
-        <div
-          class="h-full bg-purple-600 rounded-full animate-[progress_2s_linear_infinite]"
-          style="width: 80%; background-image: linear-gradient(to right, #8b5cf6, #a78bfa, #8b5cf6); background-size: 200% 100%;">
-        </div>
+        <div class="h-full bg-purple-600 rounded-full animate-[progress_2s_linear_infinite]"
+             style="width: 80%;
+                    background-image: linear-gradient(to right, #8b5cf6, #a78bfa, #8b5cf6);
+                    background-size: 200% 100%"></div>
       </div>
       <p class="w-full text-sm text-gray-700">
         {% if progress.message %}
@@ -29,7 +21,6 @@
         {% endif %}
       </p>
     </div>
-
   {% else %}
     {% if not progress.message %}
       <div>
@@ -40,49 +31,37 @@
       </div>
     {% else %}
       <div>
-        <div
-          x-data="{
-            open: false,
-            openModal() { this.open = true },
-            closeModal() { this.open = false }
-          }"
-          @keydown.escape.window="closeModal()"
-          id="exportStatus"
-        >
-          <a class="w-full text-sm text-gray-700 underline cursor-pointer " @click="openModal()">
-            All done! View status.
-          </a>
-
-          <div
-            x-cloak
-            x-show="open"
-            x-transition.opacity
-            class="modal-backdrop fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center"
-          >
-            <div
-              @click.away="closeModal()"
-              x-show="open"
-              x-transition
-              class="modal bg-white rounded-lg shadow-lg w-full max-w-lg z-50"
-              role="dialog"
-              aria-labelledby="exportStatusLabel"
-            >
+        <div x-data="{ open: false, openModal() { this.open = true }, closeModal() { this.open = false } }"
+             @keydown.escape.window="closeModal()"
+             id="exportStatus">
+          <a class="w-full text-sm text-gray-700 underline cursor-pointer "
+             @click="openModal()">All done! View status.</a>
+          <div x-cloak
+               x-show="open"
+               x-transition.opacity
+               class="modal-backdrop fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center">
+            <div @click.away="closeModal()"
+                 x-show="open"
+                 x-transition
+                 class="modal bg-white rounded-lg shadow-lg w-full max-w-lg z-50"
+                 role="dialog"
+                 aria-labelledby="exportStatusLabel">
               <div class="modal-content p-4 flex items-center justify-between">
                 <h5 class="text-lg font-medium" id="exportStatusLabel">Status</h5>
-                <button @click="closeModal()" class="button-icon" aria-label="Close" id="exportStatusClose">
+                <button @click="closeModal()"
+                        class="button-icon"
+                        aria-label="Close"
+                        id="exportStatusClose">
                   <i class="fa-solid fa-xmark"></i>
                 </button>
               </div>
-              <div class="flex items-center justify-between p-4 mb-4 rounded-lg">
-                {{ progress.message|safe }}
-              </div>
+              <div class="flex items-center justify-between p-4 mb-4 rounded-lg">{{ progress.message|safe }}</div>
             </div>
           </div>
         </div>
       </div>
     {% endif %}
   {% endif %}
-
   <style>
     @keyframes progress {
       0% { background-position: 0% 50%; }
diff --git a/commcare_connect/templates/components/worker_page/delete_invites_confirm_modal.html b/commcare_connect/templates/components/worker_page/delete_invites_confirm_modal.html
index 6e403c69ae..c14f6b1381 100644
--- a/commcare_connect/templates/components/worker_page/delete_invites_confirm_modal.html
+++ b/commcare_connect/templates/components/worker_page/delete_invites_confirm_modal.html
@@ -1,50 +1,46 @@
 {% load i18n %}
-
-<div x-show="{{ modal_name }}" x-cloak x-transition.opacity
-    class="modal-backdrop"
-    @keydown.escape.window="{{ modal_name }} = false">
-    <div @click.outside="{{ modal_name }} = false" class="modal">
-
-        <div class="flex justify-between items-center pb-2 mb-4">
-            <h2 class="text-lg font-medium text-brand-deep-purple">
-                {{ modal_title }}
-            </h2>
-            <button @click="{{ modal_name }} = false" class="ga-delete-invites-cancel-btn text-gray-500 hover:text-gray-700">
-                <i class="fa-solid fa-xmark text-xl"></i>
-            </button>
-        </div>
-
-        <div class="mb-6">
-            <p class="text-gray-700 mb-2">
-                {% blocktrans %}
+<div x-show="{{ modal_name }}"
+     x-cloak
+     x-transition.opacity
+     class="modal-backdrop"
+     @keydown.escape.window="{{ modal_name }} = false">
+  <div @click.outside="{{ modal_name }} = false" class="modal">
+    <div class="flex justify-between items-center pb-2 mb-4">
+      <h2 class="text-lg font-medium text-brand-deep-purple">{{ modal_title }}</h2>
+      <button @click="{{ modal_name }} = false"
+              class="ga-delete-invites-cancel-btn text-gray-500 hover:text-gray-700">
+        <i class="fa-solid fa-xmark text-xl"></i>
+      </button>
+    </div>
+    <div class="mb-6">
+      <p class="text-gray-700 mb-2">
+        {% blocktrans %}
                     Are you sure you want to delete the
                     <span x-text="selected.length"></span>
                     selected invite(s)?
                 {% endblocktrans %}
-            </p>
-            <p class="text-red-600 text-sm font-medium">
-                {% trans "This action is irreversible and cannot be undone." %}
-            </p>
-        </div>
-
-        <div class="flex justify-end gap-2 pt-4">
-            <button type="button" class="ga-delete-invites-cancel-btn button button-md outline-style" @click="{{ modal_name }} = false">
-                {% trans 'Cancel' %}
-            </button>
-            <form hx-post="{% url 'opportunity:delete_user_invites' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
-                  hx-trigger="submit"
-                  hx-on::after-request="if(event.detail.xhr.status >= 400) { alert ('{% trans "Oops! Something went wrong. Please try again or contact support." %}') }"
-                  class="inline">
-                {% csrf_token %}
-                <template x-for="id in selected">
-                    <input type="hidden" name="user_invite_ids" :value="id">
-                </template>
-                <button type="submit" class="button button-md bg-red-600 hover:bg-red-700 text-white"
-                        @click="{{ modal_name }} = false">
-                    <i class="fa-solid fa-trash"></i>
-                    {% trans 'Delete Invite(s)' %}
-                </button>
-            </form>
-        </div>
+      </p>
+      <p class="text-red-600 text-sm font-medium">{% trans "This action is irreversible and cannot be undone." %}</p>
+    </div>
+    <div class="flex justify-end gap-2 pt-4">
+      <button type="button"
+              class="ga-delete-invites-cancel-btn button button-md outline-style"
+              @click="{{ modal_name }} = false">{% trans 'Cancel' %}</button>
+      <form hx-post="{% url 'opportunity:delete_user_invites' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+            hx-trigger="submit"
+            hx-on::after-request="if(event.detail.xhr.status >= 400) { alert ('{% trans "Oops! Something went wrong. Please try again or contact support." %}') }"
+            class="inline">
+        {% csrf_token %}
+        <template x-for="id in selected">
+          <input type="hidden" name="user_invite_ids" :value="id">
+        </template>
+        <button type="submit"
+                class="button button-md bg-red-600 hover:bg-red-700 text-white"
+                @click="{{ modal_name }} = false">
+          <i class="fa-solid fa-trash"></i>
+          {% trans 'Delete Invite(s)' %}
+        </button>
+      </form>
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/components/worker_page/deliver_column.html b/commcare_connect/templates/components/worker_page/deliver_column.html
index d039c1e47d..772023f869 100644
--- a/commcare_connect/templates/components/worker_page/deliver_column.html
+++ b/commcare_connect/templates/components/worker_page/deliver_column.html
@@ -1,43 +1,21 @@
 {% load i18n %}
 {% load static %}
 {% load crispy_forms_tags %}
-
 <div class="relative underline"
-     x-data="{
-         isOpen: false,
-         positionMenu() {
-             const rect = this.$el.getBoundingClientRect();
-             const menu = this.$refs.menu;
-
-             const left = rect.left + rect.width/2 - menu.offsetWidth/2;
-             menu.style.left = left + 'px';
-             let top = rect.bottom + 5;
-             if (window.innerHeight - rect.bottom < rect.height + menu.clientHeight) {
-               top = rect.bottom - rect.height - menu.clientHeight;
-             }
-             menu.style.top = top + 'px';
-         }
-     }"
+     x-data="{ isOpen: false, positionMenu() { const rect = this.$el.getBoundingClientRect(); const menu = this.$refs.menu;  const left = rect.left + rect.width/2 - menu.offsetWidth/2; menu.style.left = left + 'px'; let top = rect.bottom + 5; if (window.innerHeight - rect.bottom < rect.height + menu.clientHeight) { top = rect.bottom - rect.height - menu.clientHeight; } menu.style.top = top + 'px'; } }"
      x-on:click="isOpen = true; $nextTick(() => { if(isOpen) positionMenu() })">
-
-    <span class="rounded-lg cursor-pointer hover:bg-slate-200 underline">
-        {{value}}
-    </span>
-
-    <div x-ref="menu"
-         x-show="isOpen"
-         x-on:click.outside="isOpen = false"
-         x-transition
-         class="fixed z-40 p-5 text-sm bg-white rounded-lg shadow-md text-brand-deep-purple text-nowrap whitespace-nowrap"
-         style="display: none">
-
-            {% for item in rows %}
-                <div class="flex justify-between py-1 my-1 items-center w-32 font-normal">
-                    <p class="text-xs text-brand-deep-purple">
-                        {{ item.label }}
-                    </p>
-                    <p class="text-sm text-slate-900">{{ item.value }}</p>
-                </div>
-            {% endfor %}
-    </div>
+  <span class="rounded-lg cursor-pointer hover:bg-slate-200 underline">{{ value }}</span>
+  <div x-ref="menu"
+       x-show="isOpen"
+       x-on:click.outside="isOpen = false"
+       x-transition
+       class="fixed z-40 p-5 text-sm bg-white rounded-lg shadow-md text-brand-deep-purple text-nowrap whitespace-nowrap"
+       style="display: none">
+    {% for item in rows %}
+      <div class="flex justify-between py-1 my-1 items-center w-32 font-normal">
+        <p class="text-xs text-brand-deep-purple">{{ item.label }}</p>
+        <p class="text-sm text-slate-900">{{ item.value }}</p>
+      </div>
+    {% endfor %}
+  </div>
 </div>
diff --git a/commcare_connect/templates/components/worker_page/export_modal.html b/commcare_connect/templates/components/worker_page/export_modal.html
index c5267239c6..a1cd476590 100644
--- a/commcare_connect/templates/components/worker_page/export_modal.html
+++ b/commcare_connect/templates/components/worker_page/export_modal.html
@@ -1,33 +1,24 @@
 {% load crispy_forms_tags %}
-
 <div x-show="{{ modal_name }}"
      x-cloak
      x-transition.opacity
      class="modal-backdrop"
      @keydown.escape.window="{{ modal_name }} = false">
-  <div @click.outside="{{ modal_name }} = false"
-       class="modal">
-
+  <div @click.outside="{{ modal_name }} = false" class="modal">
     <div class="flex justify-between items-center pb-2 mb-4">
-      <h2 class="text-lg font-medium text-brand-deep-purple">
-        {{ modal_title }}
-      </h2>
-      <button @click="{{ modal_name }} = false" class="text-gray-500 hover:text-gray-700">
+      <h2 class="text-lg font-medium text-brand-deep-purple">{{ modal_title }}</h2>
+      <button @click="{{ modal_name }} = false"
+              class="text-gray-500 hover:text-gray-700">
         <i class="fa-solid fa-xmark text-xl"></i>
       </button>
     </div>
-
-    <form action="{{ export_url }}"
-          method="post" enctype="multipart/form-data">
+    <form action="{{ export_url }}" method="post" enctype="multipart/form-data">
       {% csrf_token %}
-      <div class="mb-4">
-        {% crispy export_form %}
-      </div>
-
+      <div class="mb-4">{% crispy export_form %}</div>
       <div class="flex justify-end gap-2 pt-4">
-        <button type="button" class="button button-md outline-style" @click="{{ modal_name }} = false">
-          Close
-        </button>
+        <button type="button"
+                class="button button-md outline-style"
+                @click="{{ modal_name }} = false">Close</button>
         <button type="submit" class="button button-md primary-dark">
           <i class="bi bi-filetype-xls"></i>
           Export
diff --git a/commcare_connect/templates/components/worker_page/fetch_flag_counts.html b/commcare_connect/templates/components/worker_page/fetch_flag_counts.html
index 0833cc8623..40e644db15 100644
--- a/commcare_connect/templates/components/worker_page/fetch_flag_counts.html
+++ b/commcare_connect/templates/components/worker_page/fetch_flag_counts.html
@@ -1,36 +1,21 @@
 {% load i18n %}
 {% load static %}
 {% load crispy_forms_tags %}
-
 <div class="relative underline"
-     x-data="{
-         isOpen: false,
-         positionMenu() {
-             const rect = this.$el.getBoundingClientRect();
-             const menu = this.$refs.menu;
-
-             const left = rect.left + rect.width/2 - menu.offsetWidth/2;
-             menu.style.left = left + 'px';
-             let top = rect.bottom + 5;
-             if (window.innerHeight - rect.bottom < rect.height + menu.clientHeight) {
-               top = rect.bottom - rect.height - menu.clientHeight;
-             }
-             menu.style.top = top + 'px';
-         }
-     }"
+     x-data="{ isOpen: false, positionMenu() { const rect = this.$el.getBoundingClientRect(); const menu = this.$refs.menu;  const left = rect.left + rect.width/2 - menu.offsetWidth/2; menu.style.left = left + 'px'; let top = rect.bottom + 5; if (window.innerHeight - rect.bottom < rect.height + menu.clientHeight) { top = rect.bottom - rect.height - menu.clientHeight; } menu.style.top = top + 'px'; } }"
      x-on:click="isOpen = true; $nextTick(() => { if(isOpen) positionMenu() })"
-     hx-get="{{counts_url}}"
+     hx-get="{{ counts_url }}"
      hx-trigger="click"
      hx-target="find .flags_counter">
-
-    <span class="rounded-lg cursor-pointer hover:bg-slate-200">
-        {{value}}
-    </span>
-
-    <div x-ref="menu" x-show="isOpen" x-on:click.outside="isOpen = false" x-transition x-cloak
-         class="fixed z-40 p-5 text-sm bg-white rounded-lg shadow-md text-brand-deep-purple text-wrap font-normal">
-        <div class="flags_counter">
-            <p class="text-slate-500">Loading..</p>
-        </div>
+  <span class="rounded-lg cursor-pointer hover:bg-slate-200">{{ value }}</span>
+  <div x-ref="menu"
+       x-show="isOpen"
+       x-on:click.outside="isOpen = false"
+       x-transition
+       x-cloak
+       class="fixed z-40 p-5 text-sm bg-white rounded-lg shadow-md text-brand-deep-purple text-wrap font-normal">
+    <div class="flags_counter">
+      <p class="text-slate-500">Loading..</p>
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/components/worker_page/flag_counts.html b/commcare_connect/templates/components/worker_page/flag_counts.html
index 29d4bd6247..fe9df407b2 100644
--- a/commcare_connect/templates/components/worker_page/flag_counts.html
+++ b/commcare_connect/templates/components/worker_page/flag_counts.html
@@ -1,13 +1,12 @@
 {% load i18n %}
 {% load static %}
-
 {% if flag_counts %}
-{% for flag_name, flag_count in flag_counts %}
-<div class="flex justify-between py-1 my-1 items-center w-32">
-    <p class="text-xs text-brand-deep-purple">{{flag_name }}</p>
-    <p class="text-sm text-slate-900">{{flag_count}}</p>
-</div>
-{% endfor %}
+  {% for flag_name, flag_count in flag_counts %}
+    <div class="flex justify-between py-1 my-1 items-center w-32">
+      <p class="text-xs text-brand-deep-purple">{{ flag_name }}</p>
+      <p class="text-sm text-slate-900">{{ flag_count }}</p>
+    </div>
+  {% endfor %}
 {% else %}
   No flagged visits
 {% endif %}
diff --git a/commcare_connect/templates/components/worker_page/import_modal.html b/commcare_connect/templates/components/worker_page/import_modal.html
index c688a34d5b..2bddc28db2 100644
--- a/commcare_connect/templates/components/worker_page/import_modal.html
+++ b/commcare_connect/templates/components/worker_page/import_modal.html
@@ -1,59 +1,47 @@
 {% load crispy_forms_tags %}
-
 <div x-show="{{ modal_name }}"
      x-cloak
      x-transition.opacity
      class="modal-backdrop"
      @keydown.escape.window="{{ modal_name }} = false">
-  <div @click.outside="{{ modal_name }} = false"
-       class="modal">
-
+  <div @click.outside="{{ modal_name }} = false" class="modal">
     <div class="flex justify-between items-center pb-2 mb-4">
-      <h2 class="text-lg font-medium text-brand-deep-purple">
-        {{ modal_title }}
-      </h2>
-      <button @click="{{ modal_name }} = false" class="text-gray-500 hover:text-gray-700">
+      <h2 class="text-lg font-medium text-brand-deep-purple">{{ modal_title }}</h2>
+      <button @click="{{ modal_name }} = false"
+              class="text-gray-500 hover:text-gray-700">
         <i class="fa-solid fa-xmark text-xl"></i>
       </button>
     </div>
-
-    <form action="{{ import_url }}"
-          method="post" enctype="multipart/form-data">
+    <form action="{{ import_url }}" method="post" enctype="multipart/form-data">
       {% csrf_token %}
-
       {# Use {% with %} to correctly handle default ID generation #}
       {% with default_id='importFile_'|add:modal_name %}
-      <div class="mb-4">
-        <label for="{{ input_id | default:default_id }}" class="block text-sm font-medium text-gray-700 mb-1">
-          {{ input_label | default:"Select file to import" }}
-        </label>
-
-        <input type="file"
-               id="{{ input_id | default:default_id }}"
-               name="{{ input_name }}" {# Dynamically set name attribute #}
-               required
-               class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none focus:ring-2 focus:ring-brand-deep-purple focus:border-brand-deep-purple p-2" {# Corrected focus class typo #}
-               aria-describedby="{% if input_help_text %}{{ input_id | default:default_id }}_help{% endif %}" />
-
-        {% if input_help_text %}
-        <p class="mt-2 text-xs text-gray-500" id="{{ input_id | default:default_id }}_help">
-          {{ input_help_text }}
-        </p>
-        {% endif %}
-      </div>
-      {% endwith %}
-
-      <div class="flex justify-end gap-2 pt-4">
-        <button type="button" @click="{{ modal_name }} = false"
-                class="button button-md outline-style">
-          Close
-        </button>
-        <button type="submit"
-                class="button button-md primary-dark">
-          <i class="bi bi-cloud-arrow-up"></i>
-          Import
-        </button>
-      </div>
-    </form>
+        <div class="mb-4">
+          <label for="{{ input_id | default:default_id }}"
+                 class="block text-sm font-medium text-gray-700 mb-1">
+            {{ input_label | default:"Select file to import" }}
+          </label>
+          <input type="file"
+            id="{{ input_id | default:default_id }}"
+            name="{{ input_name }}" {# Dynamically set name attribute #}
+            required
+            class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none focus:ring-2 focus:ring-brand-deep-purple focus:border-brand-deep-purple p-2" {# Corrected focus class typo #}
+            aria-describedby="{% if input_help_text %}{{ input_id | default:default_id }}_help{% endif %}" />
+            {% if input_help_text %}
+              <p class="mt-2 text-xs text-gray-500"
+                 id="{{ input_id | default:default_id }}_help">{{ input_help_text }}</p>
+            {% endif %}
+          </div>
+        {% endwith %}
+        <div class="flex justify-end gap-2 pt-4">
+          <button type="button"
+                  @click="{{ modal_name }} = false"
+                  class="button button-md outline-style">Close</button>
+          <button type="submit" class="button button-md primary-dark">
+            <i class="bi bi-cloud-arrow-up"></i>
+            Import
+          </button>
+        </div>
+      </form>
+    </div>
   </div>
-</div>
diff --git a/commcare_connect/templates/components/worker_page/last_paid.html b/commcare_connect/templates/components/worker_page/last_paid.html
index b2870e0c4c..1f910d2ce1 100644
--- a/commcare_connect/templates/components/worker_page/last_paid.html
+++ b/commcare_connect/templates/components/worker_page/last_paid.html
@@ -1,45 +1,21 @@
 {% load i18n %}
 {% load static %}
 {% load crispy_forms_tags %}
-
 <div class="relative underline"
-     x-data="{
-         isOpen: false,
-         historyLoaded: false,
-         positionMenu() {
-             const rect = this.$el.getBoundingClientRect();
-             const menu = this.$refs.menu;
-             const top = rect.bottom + 5;
-             const left = rect.left + rect.width/2 - menu.offsetWidth/2;
-             menu.style.top = top + 'px';
-             menu.style.left = left + 'px';
-         }
-     }"
-     x-init="$watch('isOpen', value => {
-         if (value && !historyLoaded) {
-             // Only hx-trigger first time
-             $dispatch('load-payment-history');
-             historyLoaded = true;
-         }
-     })"
-     x-on:click="isOpen = true; $nextTick(() => { if(isOpen) positionMenu() })"
-     >
-
-    <span class="px-3 py-1 rounded-lg cursor-pointer hover:bg-slate-200">
-        {{value}}
-    </span>
-
-    <div x-ref="menu"
-         x-show="isOpen"
-         x-on:click.outside="isOpen = false"
-         x-transition
-         class="fixed z-40 p-5 text-sm bg-white rounded-lg shadow-md text-brand-deep-purple text-nowrap whitespace-nowrap"
-         style="display: none">
-
-        <div
-            hx-get="{% url 'opportunity:worker_payment_history' org_slug=org_slug opp_id=opp_id access_id=record.opportunity_access_id %}"
-            hx-trigger="load-payment-history from:closest div[x-data]" hx-swap="outerHTML">
-            <p class="text-slate-500">Loading payment history...</p>
-        </div>
+     x-data="{ isOpen: false, historyLoaded: false, positionMenu() { const rect = this.$el.getBoundingClientRect(); const menu = this.$refs.menu; const top = rect.bottom + 5; const left = rect.left + rect.width/2 - menu.offsetWidth/2; menu.style.top = top + 'px'; menu.style.left = left + 'px'; } }"
+     x-init="$watch('isOpen', value => { if (value && !historyLoaded) { // Only hx-trigger first time $dispatch('load-payment-history'); historyLoaded = true; } })"
+     x-on:click="isOpen = true; $nextTick(() => { if(isOpen) positionMenu() })">
+  <span class="px-3 py-1 rounded-lg cursor-pointer hover:bg-slate-200">{{ value }}</span>
+  <div x-ref="menu"
+       x-show="isOpen"
+       x-on:click.outside="isOpen = false"
+       x-transition
+       class="fixed z-40 p-5 text-sm bg-white rounded-lg shadow-md text-brand-deep-purple text-nowrap whitespace-nowrap"
+       style="display: none">
+    <div hx-get="{% url 'opportunity:worker_payment_history' org_slug=org_slug opp_id=opp_id access_id=record.opportunity_access_id %}"
+         hx-trigger="load-payment-history from:closest div[x-data]"
+         hx-swap="outerHTML">
+      <p class="text-slate-500">Loading payment history...</p>
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/components/worker_page/payment_history.html b/commcare_connect/templates/components/worker_page/payment_history.html
index 0a6eb46f6f..e75a7f65f8 100644
--- a/commcare_connect/templates/components/worker_page/payment_history.html
+++ b/commcare_connect/templates/components/worker_page/payment_history.html
@@ -1,47 +1,43 @@
 {% load i18n %}
 {% load static %}
 {% load crispy_forms_tags %}
-
 <div x-data="{rollbackPaymentModal: false}">
-
   <p class="text-xs text-slate-400">Payment History</p>
   {% for payment in payments %}
-  <div class="flex justify-between py-1 my-1 items-center">
-      <p class="text-xs text-brand-deep-purple">{{payment.date_paid | date:"d-m-Y" }}</p>
-      <p class="text-sm text-slate-900">{{payment.amount}}</p>
-  </div>
+    <div class="flex justify-between py-1 my-1 items-center">
+      <p class="text-xs text-brand-deep-purple">{{ payment.date_paid | date:"d-m-Y" }}</p>
+      <p class="text-sm text-slate-900">{{ payment.amount }}</p>
+    </div>
   {% endfor %}
-
   {% if not request.org_membership.is_viewer %}
-  <button class="button button-md mt-3 negative-light"
-  @click="rollbackPaymentModal = true">Rollback Last Payment</button>
+    <button class="button button-md mt-3 negative-light"
+            @click="rollbackPaymentModal = true">Rollback Last Payment</button>
   {% endif %}
-
   <div x-show="rollbackPaymentModal"
        x-cloak
        x-transition.opacity
        class="modal-backdrop"
        @keydown.escape.window="rollbackPaymentModal = false">
-    <div @click.away="rollbackPaymentModal = false"
-         x-transition
-         class="modal">
+    <div @click.away="rollbackPaymentModal = false" x-transition class="modal">
       <div class="header flex justify-between items-center">
         <h2 class="title">Rollback Last Payment</h2>
-        <button @click="rollbackPaymentModal = false" class="text-gray-500 hover:text-gray-700 ">
+        <button @click="rollbackPaymentModal = false"
+                class="text-gray-500 hover:text-gray-700 ">
           <i class="fa-solid fa-xmark text-xl"></i>
         </button>
       </div>
       <div class="py-4 text-gray-700 whitespace-normal">
-          Please confirm to rollback the payment of <b>{{ latest_payment.amount }} {{ opportunity.currency_code }}</b>
-          paid on <b>{{ latest_payment.date_paid|date }}</b> to <b>{{ access.display_name }}</b>.
+        Please confirm to rollback the payment of <b>{{ latest_payment.amount }} {{ opportunity.currency_code }}</b>
+        paid on <b>{{ latest_payment.date_paid|date }}</b> to <b>{{ access.display_name }}</b>.
       </div>
       <div class="footer flex justify-end gap-4">
-        <form action="{% url "opportunity:payment_delete" org_slug=request.org.slug opp_id=access.opportunity.opportunity_id access_id=access.opportunity_access_id pk=latest_payment.payment_id %}" method="post">
+        <form action="{% url "opportunity:payment_delete" org_slug=request.org.slug opp_id=access.opportunity.opportunity_id access_id=access.opportunity_access_id pk=latest_payment.payment_id %}"
+              method="post">
           {% csrf_token %}
           <div class="flex justify-end gap-2 pt-4">
-            <button type="button" class="button button-md outline-style" @click="rollbackPaymentModal = false">
-              Close
-            </button>
+            <button type="button"
+                    class="button button-md outline-style"
+                    @click="rollbackPaymentModal = false">Close</button>
             <button type="submit" class="button button-md negative-dark">
               <i class="bi bi-filetype-xls"></i>
               Rollback
diff --git a/commcare_connect/templates/components/worker_page/profile.html b/commcare_connect/templates/components/worker_page/profile.html
index a819e3a9e8..b42fb687cf 100644
--- a/commcare_connect/templates/components/worker_page/profile.html
+++ b/commcare_connect/templates/components/worker_page/profile.html
@@ -1,64 +1,66 @@
 {% load avatar %}
-      <div x-data="{ isStatusModalOpen: false }"
-           class="profile-card h-full flex gap-4 text-white relative cursor-pointer"
-           @click="isStatusModalOpen = true">
-        <div class="profile-left flex flex-col justify-center items-center">
-          <div class="cursor-pointer">
-            <div class="absolute z-10 top-0 left-0 w-full h-full pointer-events-none">
-              {% if opportunity_access.suspended %}
-                <svg viewBox="-165 -250 1200 1200" xmlns="http://www.w3.org/2000/svg">
-                  <g transform="rotate(45)">
-                    <circle r="120" stroke="red" stroke-width="60" stroke-linecap="round"
-                            pathLength="360" stroke-dasharray="90 270" fill="none"></circle>
-                  </g>
-                </svg>
-              {% endif %}
-            </div>
-            {% user_avatar user=opportunity_access.user size="large" %}
-          </div>
-          <div class="share-icon flex justify-center mt-4">
-            <div class="relative">
-              <!-- Status Modal -->
-              <div x-show="isStatusModalOpen"
-                   x-cloak
-                   class="fixed inset-0 bg-black/50 bg-opacity-50 transition-opacity z-40"
-                   @click="isStatusModalOpen = false"></div>
-              <div x-show="isStatusModalOpen"
-                   x-cloak
-                   class="absolute top-15 -left-8  bg-white rounded-2xl shadow-xl z-50"
-                   @click.stop>{% include "components/cards/user_status_card.html" with opportunity_access=opportunity_access %}</div>
-            </div>
-          </div>
-        </div>
-        <div class="py-2 basis-sm">
-          <h2 x-data="{}" class="text-base whitespace-nowrap flex items-center gap-1">
-            {% if opportunity_access.suspended %}
-              <span x-tooltip.raw.theme.light="User suspended">
-                <i class="fa-solid fa-minus-square text-black-600"></i>
-              </span>
-            {% elif opportunity_access.userinvite.status == "accepted" %}
-              <span x-tooltip.raw.theme.light="Invite accepted">
-                <i class="fa-solid fa-circle-check text-green-600"></i>
-              </span>
-            {% elif opportunity_access.userinvite.status == "invited" or opportunity_access.userinvite.status == "sms_delivered" %}
-              <span x-tooltip.raw.theme.light="Invite pending">
-                <i class="fa-regular fa-clock text-orange-600"></i>
-              </span>
-            {% elif opportunity_access.userinvite.status == "not_found" %}
-              <span x-tooltip.raw.theme.light="User not found">
-                <i class="fa-solid fa-circle-xmark text-red-600"></i>
-              </span>
-            {% elif opportunity_access.userinvite.status == "sms_not_delivered" %}
-              <span x-tooltip.raw.theme.light="Invite failed">
-                <i class="fa-solid fa-circle-xmark text-red-600"></i>
-              </span>
-            {% endif %}
-            {{ opportunity_access.user.name }}
-          </h2>
-          <p class="text-xs">{{ opportunity_access.user.username }}</p>
-          <p class="mt-2 whitespace-nowrap">
-            <i class="fa-solid fa-phone"></i>
-            <span class="text-xs">{{ opportunity_access.user.phone_number }}</span>
-          </p>
+<div x-data="{ isStatusModalOpen: false }"
+     class="profile-card h-full flex gap-4 text-white relative cursor-pointer"
+     @click="isStatusModalOpen = true">
+  <div class="profile-left flex flex-col justify-center items-center">
+    <div class="cursor-pointer">
+      <div class="absolute z-10 top-0 left-0 w-full h-full pointer-events-none">
+        {% if opportunity_access.suspended %}
+          <svg viewBox="-165 -250 1200 1200" xmlns="http://www.w3.org/2000/svg">
+            <g transform="rotate(45)">
+            <circle r="120" stroke="red" stroke-width="60" stroke-linecap="round" pathLength="360" stroke-dasharray="90 270" fill="none"></circle>
+            </g>
+          </svg>
+        {% endif %}
+      </div>
+      {% user_avatar user=opportunity_access.user size="large" %}
+    </div>
+    <div class="share-icon flex justify-center mt-4">
+      <div class="relative">
+        <!-- Status Modal -->
+        <div x-show="isStatusModalOpen"
+             x-cloak
+             class="fixed inset-0 bg-black/50 bg-opacity-50 transition-opacity z-40"
+             @click="isStatusModalOpen = false"></div>
+        <div x-show="isStatusModalOpen"
+             x-cloak
+             class="absolute top-15 -left-8  bg-white rounded-2xl shadow-xl z-50"
+             @click.stop>
+          {% include "components/cards/user_status_card.html" with opportunity_access=opportunity_access %}
         </div>
       </div>
+    </div>
+  </div>
+  <div class="py-2 basis-sm">
+    <h2 x-data="{}"
+        class="text-base whitespace-nowrap flex items-center gap-1">
+      {% if opportunity_access.suspended %}
+        <span x-tooltip.raw.theme.light="User suspended">
+          <i class="fa-solid fa-minus-square text-black-600"></i>
+        </span>
+      {% elif opportunity_access.userinvite.status == "accepted" %}
+        <span x-tooltip.raw.theme.light="Invite accepted">
+          <i class="fa-solid fa-circle-check text-green-600"></i>
+        </span>
+      {% elif opportunity_access.userinvite.status == "invited" or opportunity_access.userinvite.status == "sms_delivered" %}
+        <span x-tooltip.raw.theme.light="Invite pending">
+          <i class="fa-regular fa-clock text-orange-600"></i>
+        </span>
+      {% elif opportunity_access.userinvite.status == "not_found" %}
+        <span x-tooltip.raw.theme.light="User not found">
+          <i class="fa-solid fa-circle-xmark text-red-600"></i>
+        </span>
+      {% elif opportunity_access.userinvite.status == "sms_not_delivered" %}
+        <span x-tooltip.raw.theme.light="Invite failed">
+          <i class="fa-solid fa-circle-xmark text-red-600"></i>
+        </span>
+      {% endif %}
+      {{ opportunity_access.user.name }}
+    </h2>
+    <p class="text-xs">{{ opportunity_access.user.username }}</p>
+    <p class="mt-2 whitespace-nowrap">
+      <i class="fa-solid fa-phone"></i>
+      <span class="text-xs">{{ opportunity_access.user.phone_number }}</span>
+    </p>
+  </div>
+</div>
diff --git a/commcare_connect/templates/components/worker_page/visit_task_tabs.html b/commcare_connect/templates/components/worker_page/visit_task_tabs.html
index 16f49403ae..549c53d9bc 100644
--- a/commcare_connect/templates/components/worker_page/visit_task_tabs.html
+++ b/commcare_connect/templates/components/worker_page/visit_task_tabs.html
@@ -1,6 +1,5 @@
 {% url 'opportunity:user_visits_list' request.org.slug opportunity.opportunity_id as visits_url %}
 {% url 'opportunity:user_tasks_list' request.org.slug opportunity.opportunity_id as tasks_url %}
-
 <div class="flex relative mx-auto items-center w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14 better-tabs overflow-x-auto">
   <div class="tabs">
     <a href="{{ visits_url }}?user={{ request.GET.user }}"
diff --git a/commcare_connect/templates/components/worker_page/worker_profile_kpi.html b/commcare_connect/templates/components/worker_page/worker_profile_kpi.html
index fff66526d8..62d6e566c5 100644
--- a/commcare_connect/templates/components/worker_page/worker_profile_kpi.html
+++ b/commcare_connect/templates/components/worker_page/worker_profile_kpi.html
@@ -4,9 +4,11 @@
   <div class="grid grid-cols-5 gap-4 w-full">
     <div class="w-full h-full metric-card relative flex flex-col justify-between p-4">
       <div class="flex justify-between items-center">
-        <a href="{% url 'opportunity:user_visits_list' request.org.slug opportunity.opportunity_id %}?user={{ opportunity_access.user.user_id }}" class="text-2xl hover:underline" x-data
-          x-tooltip.raw="{% trans 'Includes all Deliver app forms submitted by this worker across all payment units including duplicates' %}">
-          {{ counts.total }}</a>
+        <a href="{% url 'opportunity:user_visits_list' request.org.slug opportunity.opportunity_id %}?user={{ opportunity_access.user.user_id }}"
+           class="text-2xl hover:underline"
+           x-data
+           x-tooltip.raw="{% trans 'Includes all Deliver app forms submitted by this worker across all payment units including duplicates' %}">
+        {{ counts.total }}</a>
         <div class="hidden lg:block">
           <i class="fa-solid fa-file-invoice text-xl"></i>
         </div>
@@ -15,7 +17,6 @@
         <span>{% trans "Total Visits" %}</span>
       </div>
     </div>
-
     <div class="w-full h-full metric-card relative flex flex-col justify-between p-4">
       <div class="flex justify-between items-center">
         <a href="{{ pending_tasks_url }}" class="text-2xl hover:underline">{{ pending_tasks_count }}</a>
@@ -27,37 +28,40 @@
         <span>{% trans "Pending Tasks" %}</span>
       </div>
     </div>
-
     <div class="w-full h-full metric-card relative flex flex-col justify-between p-4"
-      x-data="{ isOpen: false }">
+         x-data="{ isOpen: false }">
       <div class="flex justify-between items-center">
-        <a href="{% url 'opportunity:user_visits_list' request.org.slug opportunity.opportunity_id %}?user={{ opportunity_access.user.user_id }}" class="text-2xl hover:underline">{{ counts.rejected }}</a>
+        <a href="{% url 'opportunity:user_visits_list' request.org.slug opportunity.opportunity_id %}?user={{ opportunity_access.user.user_id }}"
+           class="text-2xl hover:underline">{{ counts.rejected }}</a>
         <div class="hidden lg:block">
           <i class="fa-solid fa-thumbs-down text-xl"></i>
         </div>
       </div>
       <div class="pt-4 text-sm flex items-center justify-between">
         <span>{% trans "Rejected Visits" %}</span>
-        <i class="fa-solid ml-2 cursor-pointer" :class="isOpen ? 'fa-caret-up' : 'fa-caret-down'"
-          @click="isOpen = !isOpen"></i>
+        <i class="fa-solid ml-2 cursor-pointer"
+           :class="isOpen ? 'fa-caret-up' : 'fa-caret-down'"
+           @click="isOpen = !isOpen"></i>
       </div>
-      <div x-show="isOpen" x-cloak @click.outside="isOpen = false" x-transition
-        class="z-50 absolute top-full mt-2 right-0 w-full rounded-lg bg-white text-brand-deep-purple shadow-lg pt-2 px-5">
+      <div x-show="isOpen"
+           x-cloak
+           @click.outside="isOpen = false"
+           x-transition
+           class="z-50 absolute top-full mt-2 right-0 w-full rounded-lg bg-white text-brand-deep-purple shadow-lg pt-2 px-5">
         <span class="text-sm font-medium text-brand-deep-purple">{% trans "Rejection Details" %}</span>
         <!-- Details -->
         <div class="py-2">
           {% for flag in flagged_info %}
-          {% if flag.rejected > 0 %}
-          <div class="flex justify-between items-center py-3">
-            <span class="text-xs w-27">{{ flag.name }}</span>
-            <span class="text-xs">{{ flag.rejected }}</span>
-          </div>
-          {% endif %}
+            {% if flag.rejected > 0 %}
+              <div class="flex justify-between items-center py-3">
+                <span class="text-xs w-27">{{ flag.name }}</span>
+                <span class="text-xs">{{ flag.rejected }}</span>
+              </div>
+            {% endif %}
           {% endfor %}
         </div>
       </div>
     </div>
-
     <div class="w-full h-full metric-card relative flex flex-col justify-between p-4">
       <div class="flex justify-between items-center">
         <div class="text-2xl">{{ opportunity_access.payment_accrued|intcomma }}</div>
@@ -69,9 +73,8 @@
         <span>{% blocktrans with currency=opportunity.currency_code %}Accrued Amount ({{ currency }}){% endblocktrans %}</span>
       </div>
     </div>
-
     <div class="w-full h-full metric-card relative flex flex-col justify-between p-4"
-      x-data="{ isOpen: false }">
+         x-data="{ isOpen: false }">
       <div class="flex justify-between items-center">
         <div class="text-2xl">{{ opportunity_access.total_paid|intcomma }}</div>
         <div class="hidden lg:block">
@@ -81,22 +84,24 @@
       <div class="pt-4 text-sm flex items-center justify-between">
         <span>{% blocktrans with currency=opportunity.currency_code %}Paid Amount ({{ currency }}){% endblocktrans %}</span>
         {% if last_payment_details %}
-        <i class="fa-solid ml-2 cursor-pointer" :class="isOpen ? 'fa-caret-up' : 'fa-caret-down'"
-          @click="isOpen = !isOpen"></i>
-      </div>
-      <div x-show="isOpen" x-cloak @click.outside="isOpen = false" x-transition
-        class="z-50 absolute top-full mt-2 right-0 w-full rounded-lg bg-white text-brand-deep-purple shadow-lg pt-2 px-5">
-        <span class="text-sm font-medium text-brand-deep-purple">{% trans "Payment Details" %}</span>
-        <div class="flex flex-col py-5 gap-1.5">
-          <span class="text-xs text-brand-blue-light">{% trans "Last Paid" %}</span>
-          <span class="text-xs text-brand-deep-purple">{{ last_payment_details.date_paid|date }}</span>
-          <span class="text-xl text-green-600">{{ last_payment_details.amount }}</span>
-          {% if last_payment_details.opportunity_access %}
-          <span class="text-xs text-brand-deep-purple">
-            {{ last_payment_details.opportunity_access.user.name }}
-          </span>
-          {% endif %}
+          <i class="fa-solid ml-2 cursor-pointer"
+             :class="isOpen ? 'fa-caret-up' : 'fa-caret-down'"
+             @click="isOpen = !isOpen"></i>
         </div>
+        <div x-show="isOpen"
+             x-cloak
+             @click.outside="isOpen = false"
+             x-transition
+             class="z-50 absolute top-full mt-2 right-0 w-full rounded-lg bg-white text-brand-deep-purple shadow-lg pt-2 px-5">
+          <span class="text-sm font-medium text-brand-deep-purple">{% trans "Payment Details" %}</span>
+          <div class="flex flex-col py-5 gap-1.5">
+            <span class="text-xs text-brand-blue-light">{% trans "Last Paid" %}</span>
+            <span class="text-xs text-brand-deep-purple">{{ last_payment_details.date_paid|date }}</span>
+            <span class="text-xl text-green-600">{{ last_payment_details.amount }}</span>
+            {% if last_payment_details.opportunity_access %}
+              <span class="text-xs text-brand-deep-purple">{{ last_payment_details.opportunity_access.user.name }}</span>
+            {% endif %}
+          </div>
         {% endif %}
       </div>
     </div>
diff --git a/commcare_connect/templates/email/base.html b/commcare_connect/templates/email/base.html
index 5e572424a7..65111257b9 100644
--- a/commcare_connect/templates/email/base.html
+++ b/commcare_connect/templates/email/base.html
@@ -1,23 +1,30 @@
-{% load i18n %}<!DOCTYPE html>
+{% load i18n %}
+<!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body style="margin: 0; padding: 20px; background-color: #f4f4f4; font-family: Arial, sans-serif; font-size: 14px; color: #333333;">
-<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; padding: 24px; border-radius: 6px;">
-
-{% block content %}{% endblock %}
-
-<p>
-    {% trans "Thank you," %}<br>
-    Connect
-</p>
-
-<p style="color: #666666; font-size: 12px;">
-    {% trans "This inbox is not monitored. Please do not respond to this email." %}
-</p>
-
-</div>
-</body>
+  </head>
+  <body style="margin: 0;
+               padding: 20px;
+               background-color: #f4f4f4;
+               font-family: Arial, sans-serif;
+               font-size: 14px;
+               color: #333333">
+    <div style="max-width: 600px;
+                margin: 0 auto;
+                background-color: #ffffff;
+                padding: 24px;
+                border-radius: 6px">
+      {% block content %}{% endblock %}
+      <p>
+        {% trans "Thank you," %}
+        <br>
+        Connect
+      </p>
+      <p style="color: #666666; font-size: 12px;">
+        {% trans "This inbox is not monitored. Please do not respond to this email." %}
+      </p>
+    </div>
+  </body>
 </html>
diff --git a/commcare_connect/templates/favicon.html b/commcare_connect/templates/favicon.html
index 25e62e5067..526acc774e 100644
--- a/commcare_connect/templates/favicon.html
+++ b/commcare_connect/templates/favicon.html
@@ -1,7 +1,14 @@
 {% load static %}
 {# see https://realfavicongenerator.net #}
-<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}">
-<link rel="icon" type="image/png" sizes="96x96" href="{% static "images/favicons/favicon-96x96.png" %}">
-<link rel="icon" type="image/svg+xml" href="{% static "images/favicons/favicon.svg" %}">
+<link rel="apple-touch-icon"
+      sizes="180x180"
+      href="{% static 'images/favicons/apple-touch-icon.png' %}">
+<link rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="{% static "images/favicons/favicon-96x96.png" %}">
+<link rel="icon"
+      type="image/svg+xml"
+      href="{% static "images/favicons/favicon.svg" %}">
 <link rel="manifest" href="{% static 'images/favicons/site.webmanifest' %}">
 <link rel="shortcut icon" href="{% static 'images/favicons/favicon.ico' %}">
diff --git a/commcare_connect/templates/flags/feature_flags.html b/commcare_connect/templates/flags/feature_flags.html
index 6d15597616..ef7cff241b 100644
--- a/commcare_connect/templates/flags/feature_flags.html
+++ b/commcare_connect/templates/flags/feature_flags.html
@@ -2,72 +2,68 @@
 {% load static %}
 {% load crispy_forms_tags %}
 {% load i18n %}
-
-{% block title %}{% translate "Toggles & Switches" %}{% endblock %}
-
+{% block title %}
+  {% translate "Toggles & Switches" %}
+{% endblock %}
 {% block css %}
   {{ block.super }}
   <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 {% endblock %}
-
 {% block javascript %}
   {{ block.super }}
   <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
 {% endblock javascript %}
-
 {% block content %}
-<div class="container">
-  <h2 class="text-xl font-semibold text-brand-deep-purple mb-6">{% translate "Toggles & Switches" %}</h2>
-
-  <!-- Switches Section -->
-  <section class="mb-8">
-    <h3 class="text-lg font-semibold text-brand-deep-purple mb-3">{% translate "Switches" %}</h3>
-    {% if switches %}
-      <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-        {% for switch in switches %}
-          <div class="card_bg flex items-center justify-between gap-4">
-            <div>
-              <h4 class="card_title">{{ switch.name }}</h4>
-              {% if switch.note %}
-                <p class="card_description mt-1">{{ switch.note }}</p>
-              {% endif %}
+  <div class="container">
+    <h2 class="text-xl font-semibold text-brand-deep-purple mb-6">{% translate "Toggles & Switches" %}</h2>
+    <!-- Switches Section -->
+    <section class="mb-8">
+      <h3 class="text-lg font-semibold text-brand-deep-purple mb-3">{% translate "Switches" %}</h3>
+      {% if switches %}
+        <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+          {% for switch in switches %}
+            <div class="card_bg flex items-center justify-between gap-4">
+              <div>
+                <h4 class="card_title">{{ switch.name }}</h4>
+                {% if switch.note %}<p class="card_description mt-1">{{ switch.note }}</p>{% endif %}
+              </div>
+              <form method="post" action="{% url 'flags:toggle_switch' switch.name %}">
+                {% csrf_token %}
+                <button type="submit"
+                        class="button button-md {% if switch.active %}primary-dark{% else %}outline-style{% endif %} !inline-flex items-center gap-2 whitespace-nowrap">
+                  <i class="fa-solid {% if switch.active %}fa-toggle-on{% else %}fa-toggle-off{% endif %}"></i>
+                  {% if switch.active %}
+                    {% translate "On" %}
+                  {% else %}
+                    {% translate "Off" %}
+                  {% endif %}
+                </button>
+              </form>
+            </div>
+          {% endfor %}
+        </div>
+      {% else %}
+        <p class="text-gray-500">{% translate "No switches found." %}</p>
+      {% endif %}
+    </section>
+    <!-- Feature Flags Section -->
+    <section>
+      <h3 class="text-lg font-semibold text-brand-deep-purple mb-3">{% translate "Toggles" %}</h3>
+      {% if flag_forms %}
+        <div class="flex flex-col gap-4">
+          {% for flag, form in flag_forms %}
+            <div class="card_bg">
+              <h4 class="card_title mb-3">{{ flag.name }}</h4>
+              <form method="post" action="{% url 'flags:update_flag' flag.name %}">
+                {% csrf_token %}
+                {% crispy form %}
+              </form>
             </div>
-            <form method="post" action="{% url 'flags:toggle_switch' switch.name %}">
-              {% csrf_token %}
-              <button
-                type="submit"
-                class="button button-md {% if switch.active %}primary-dark{% else %}outline-style{% endif %} !inline-flex items-center gap-2 whitespace-nowrap"
-              >
-                <i class="fa-solid {% if switch.active %}fa-toggle-on{% else %}fa-toggle-off{% endif %}"></i>
-                {% if switch.active %}{% translate "On" %}{% else %}{% translate "Off" %}{% endif %}
-              </button>
-            </form>
-          </div>
-        {% endfor %}
-      </div>
-    {% else %}
-      <p class="text-gray-500">{% translate "No switches found." %}</p>
-    {% endif %}
-  </section>
-
-  <!-- Feature Flags Section -->
-  <section>
-    <h3 class="text-lg font-semibold text-brand-deep-purple mb-3">{% translate "Toggles" %}</h3>
-    {% if flag_forms %}
-      <div class="flex flex-col gap-4">
-        {% for flag, form in flag_forms %}
-          <div class="card_bg">
-            <h4 class="card_title mb-3">{{ flag.name }}</h4>
-            <form method="post" action="{% url 'flags:update_flag' flag.name %}">
-              {% csrf_token %}
-              {% crispy form %}
-            </form>
-          </div>
-        {% endfor %}
-      </div>
-    {% else %}
-      <p class="text-gray-500">{% translate "No feature flags found." %}</p>
-    {% endif %}
-  </section>
-</div>
+          {% endfor %}
+        </div>
+      {% else %}
+        <p class="text-gray-500">{% translate "No feature flags found." %}</p>
+      {% endif %}
+    </section>
+  </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/layouts/footer.html b/commcare_connect/templates/layouts/footer.html
index 3d4a6852f8..e64dadb80f 100644
--- a/commcare_connect/templates/layouts/footer.html
+++ b/commcare_connect/templates/layouts/footer.html
@@ -1,44 +1,42 @@
 {% load static %}
 {% load i18n %}
-
 <footer class="fixed bottom-0 left-0 right-0 w-full bg-zinc-800 text-slate-100 py-3 text-xs">
-    <div class="flex flex-wrap items-center justify-center space-x-2 text-center">
-      <!-- CommCare Logo -->
-      <a href="https://dimagi.com/connect/" class="flex items-center hover:underline">
-        <img src="{% static 'images/favicons/commcare-flower-footer.png' %}" alt="CommCare" class="h-6" />
-      </a>
-
-      <!-- Dimagi Logo -->
-      <a href="https://dimagi.com/" class="flex items-center hover:underline">
-        <img src="{% static 'images/dimagi_logo.svg' %}" alt="Dimagi" class="h-6" />
-      </a>
-
-      <!-- Copyright text -->
-      <span>
-        {% blocktranslate %}
+  <div class="flex flex-wrap items-center justify-center space-x-2 text-center">
+    <!-- CommCare Logo -->
+    <a href="https://dimagi.com/connect/"
+       class="flex items-center hover:underline">
+      <img src="{% static 'images/favicons/commcare-flower-footer.png' %}"
+           alt="CommCare"
+           class="h-6" />
+    </a>
+    <!-- Dimagi Logo -->
+    <a href="https://dimagi.com/" class="flex items-center hover:underline">
+      <img src="{% static 'images/dimagi_logo.svg' %}" alt="Dimagi" class="h-6" />
+    </a>
+    <!-- Copyright text -->
+    <span>
+      {% blocktranslate %}
           <a href="https://dimagi.com/connect/" class="hover:underline">Connect</a>
           is copyright &copy;
         {% endblocktranslate %}
-        {% now "Y" %}
-        <a href="https://dimagi.com/" class="hover:underline">Dimagi, Inc.</a>
-      </span>
-
-      <!-- Links -->
-      <span>|</span>
-      <a href="https://dimagi.atlassian.net/wiki/spaces/commcareconnectpublic/overview" class="hover:underline">
-        {% translate "Learn more about Connect" %}
-      </a>
-      <span>|</span>
-      <a href="https://dimagi.com/terms/latest/privacy/" target="_blank" class="hover:underline">
-        {% translate "Privacy" %}
-      </a>
-      <span>|</span>
-      <a href="https://dimagi.com/terms/latest/tos/" target="_blank" class="hover:underline">
-        {% translate "Terms of Service" %}
-      </a>
-      <span>|</span>
-      <a href="https://dimagi.com/terms/latest/ba/" target="_blank" class="hover:underline">
-        {% translate "Business Agreement" %}
-      </a>
-    </div>
+      {% now "Y" %}
+      <a href="https://dimagi.com/" class="hover:underline">Dimagi, Inc.</a>
+    </span>
+    <!-- Links -->
+    <span>|</span>
+    <a href="https://dimagi.atlassian.net/wiki/spaces/commcareconnectpublic/overview"
+       class="hover:underline">{% translate "Learn more about Connect" %}</a>
+    <span>|</span>
+    <a href="https://dimagi.com/terms/latest/privacy/"
+       target="_blank"
+       class="hover:underline">{% translate "Privacy" %}</a>
+    <span>|</span>
+    <a href="https://dimagi.com/terms/latest/tos/"
+       target="_blank"
+       class="hover:underline">{% translate "Terms of Service" %}</a>
+    <span>|</span>
+    <a href="https://dimagi.com/terms/latest/ba/"
+       target="_blank"
+       class="hover:underline">{% translate "Business Agreement" %}</a>
+  </div>
 </footer>
diff --git a/commcare_connect/templates/layouts/header.html b/commcare_connect/templates/layouts/header.html
index c88510e633..25eeef492c 100644
--- a/commcare_connect/templates/layouts/header.html
+++ b/commcare_connect/templates/layouts/header.html
@@ -1,128 +1,113 @@
 {% load static i18n %}
 {% load avatar %}
-
 <header class="fixed top-0 left-16 right-0 bg-gray-100 z-30">
-    <div class="flex items-center justify-between w-full px-4 py-2">
-        <!-- Left Section: Module Name -->
-        <h1 class="text-lg text-brand-deep-purple font-medium">{{ header_title|default:"Connect" }}</h1>
-
-        {% if request.user.is_authenticated %}
-        <!-- Right Section: Org, Profile Dropdown -->
-        <div class="flex items-center gap-x-2">
-            <!-- Organization selector -->
-            <div x-data="
-              {
-                open: false,
-                hasOrg: {{ request.org|yesno:'true,false' }},
-                hasMembership: {{ request.org_membership|yesno:'true,false' }},
-                isSuperuser: {{ request.user.is_superuser|yesno:'true,false' }},
-                get hasSelectedOrg() {
-                    return this.hasOrg && (this.hasMembership || this.isSuperuser)
-                },
-                membershipsCount: {{ request.memberships|length }},
-                canCreateOrg: {{ perms.users.workspace_entity_management_access|yesno:'true,false' }},
-                get showDropdown() {
-                    return this.membershipsCount > 1
-                        || (!this.hasSelectedOrg && this.membershipsCount > 0)
-                        || this.canCreateOrg
-                }
-              }"
-              @click.away="open = false" class="relative mx-8">
-                <button @click="open = !open" class="flex items-center gap-2 focus:outline-none">
-                    <div class="text-left">
-                      <div x-show="hasSelectedOrg" x-transition.opacity x-cloak>
-                        <p class="text-sm font-medium text-brand-deep-purple cursor-pointer">
-                          {{ request.org.name }}
-                        </p>
-                        {% if request.org.llo_entity %}
-                          <p class="text-gray-500 text-sm font-medium">{{ request.org.llo_entity }}</p>
-                        {% endif %}
-                        <p class="text-xs text-gray-400">{{ request.org.program_manager|yesno:"Program,Network"}} Manager</p>
-                      </div>
-                      <div x-show="!hasSelectedOrg && membershipsCount > 0" x-transition.opacity x-cloak>
-                         <p class="text-sm font-medium text-brand-deep-purple cursor-pointer">
-                          {% translate "Select Workspace" %}
-                         </p>
-                      </div>
-                      <div x-show="!hasSelectedOrg && membershipsCount == 0 && canCreateOrg" x-transition.opacity x-cloak>
-                        <p class="text-sm font-medium text-brand-deep-purple cursor-pointer">
-                            {% translate "Create Workspace" %}
-                        </p>
-                      </div>
-                    </div>
-                    <!-- Dropdown Toggle Icon -->
-                    <i x-show="showDropdown" :class="open ? 'rotate-180' : ''" class="fa-solid fa-chevron-down transition-all text-xs"></i>
-                </button>
-
-                  <!-- Organization Selector -->
-                  <div x-show="open && showDropdown" x-transition.opacity x-cloak
-                      class="absolute top-12 right-0 min-w-56 bg-white shadow rounded-lg z-50">
-                      <ul class="p-2 w-full max-h-80 overflow-y-auto">
-                        {% for membership in request.memberships %}
-                          {% if not membership.organization == request.org %}
-                            <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
-                              <a href="{% url 'opportunity:list' membership.organization.slug %}">
-                                <p class="text-brand-deep-purple text-sm font-medium">{{ membership.organization.name }}</p>
-                                {% if membership.organization.llo_entity %}
-                                  <p class="text-gray-500 text-sm font-medium">{{ membership.organization.llo_entity }}</p>
-                                {% endif %}
-                                <p class="text-xs text-gray-400">{{ membership.organization.program_manager|yesno:"Program,Network" }} Manager</p>
-                              </a>
-                            </li>
-                          {% endif %}
-                        {% endfor %}
-                      </ul>
-                        <div class="p-2" x-show="canCreateOrg" x-transition.opacity x-cloak>
-                            <a class="button button-md primary-dark w-full text-center" href="{% url 'organization_create' %}">
-                            {% translate "Create Workspace" %}
-                            </a>
-                        </div>
-                  </div>
-
+  <div class="flex items-center justify-between w-full px-4 py-2">
+    <!-- Left Section: Module Name -->
+    <h1 class="text-lg text-brand-deep-purple font-medium">{{ header_title|default:"Connect" }}</h1>
+    {% if request.user.is_authenticated %}
+      <!-- Right Section: Org, Profile Dropdown -->
+      <div class="flex items-center gap-x-2">
+        <!-- Organization selector -->
+        <div x-data=" { open: false, hasOrg: {{ request.org|yesno:'true,false' }}, hasMembership: {{ request.org_membership|yesno:'true,false' }}, isSuperuser: {{ request.user.is_superuser|yesno:'true,false' }}, get hasSelectedOrg() { return this.hasOrg && (this.hasMembership || this.isSuperuser) }, membershipsCount: {{ request.memberships|length }}, canCreateOrg: {{ perms.users.workspace_entity_management_access|yesno:'true,false' }}, get showDropdown() { return this.membershipsCount > 1 || (!this.hasSelectedOrg && this.membershipsCount > 0) || this.canCreateOrg } }"
+             @click.away="open = false"
+             class="relative mx-8">
+          <button @click="open = !open"
+                  class="flex items-center gap-2 focus:outline-none">
+            <div class="text-left">
+              <div x-show="hasSelectedOrg" x-transition.opacity x-cloak>
+                <p class="text-sm font-medium text-brand-deep-purple cursor-pointer">{{ request.org.name }}</p>
+                {% if request.org.llo_entity %}
+                  <p class="text-gray-500 text-sm font-medium">{{ request.org.llo_entity }}</p>
+                {% endif %}
+                <p class="text-xs text-gray-400">{{ request.org.program_manager|yesno:"Program,Network" }} Manager</p>
+              </div>
+              <div x-show="!hasSelectedOrg && membershipsCount > 0"
+                   x-transition.opacity
+                   x-cloak>
+                <p class="text-sm font-medium text-brand-deep-purple cursor-pointer">{% translate "Select Workspace" %}</p>
+              </div>
+              <div x-show="!hasSelectedOrg && membershipsCount == 0 && canCreateOrg"
+                   x-transition.opacity
+                   x-cloak>
+                <p class="text-sm font-medium text-brand-deep-purple cursor-pointer">{% translate "Create Workspace" %}</p>
+              </div>
             </div>
-
-            <!-- User Profile -->
-            <div x-data="{ open: false }" @click.away="open = false" class="relative">
-                <button @click="open = !open" class="focus:outline-none">
-                    <div class="cursor-pointer overflow-hidden">
-                        {% user_avatar user=request.user size="small" color_classes="bg-brand-cornflower-blue text-white" %}
-                    </div>
-                </button>
-
-                <!-- User Profile Selector -->
-                <div x-show="open" x-transition.opacity x-cloak class="absolute top-12 right-0 min-w-56 w-56 bg-white shadow rounded-lg z-50">
-                    <ul class="p-2 w-full">
-                        <li class="p-2 text-left">
-                            <p class="text-brand-deep-purple font-medium">{{ request.user.username }}</p>
-                            {% if request.org %}
-                                <span class="text-gray-400 text-sm">{{ request.org_membership.role }}</span>
-                            {% endif %}
-                        </li>
-                        <li class="p-2 text-left">
-                            <a class="block p-2 hover:bg-gray-100 rounded cursor-pointer" href="{% url 'account_email' %}">
-                              <p class="text-brand-deep-purple">{% translate "Profile" %}</p>
-                            </a>
-                        </li>
-                        <li class="p-2">
-                          <a class="cursor-pointer" href="{% url 'account_logout' %}">
-                            <div class="bg-brand-indigo text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-800 transition">
-                              {% translate "Logout" %}
-                            </div>
-                          </a>
-                        </li>
-                    </ul>
-                </div>
+            <!-- Dropdown Toggle Icon -->
+            <i x-show="showDropdown"
+               :class="open ? 'rotate-180' : ''"
+               class="fa-solid fa-chevron-down transition-all text-xs"></i>
+          </button>
+          <!-- Organization Selector -->
+          <div x-show="open && showDropdown"
+               x-transition.opacity
+               x-cloak
+               class="absolute top-12 right-0 min-w-56 bg-white shadow rounded-lg z-50">
+            <ul class="p-2 w-full max-h-80 overflow-y-auto">
+              {% for membership in request.memberships %}
+                {% if not membership.organization == request.org %}
+                  <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+                    <a href="{% url 'opportunity:list' membership.organization.slug %}">
+                      <p class="text-brand-deep-purple text-sm font-medium">{{ membership.organization.name }}</p>
+                      {% if membership.organization.llo_entity %}
+                        <p class="text-gray-500 text-sm font-medium">{{ membership.organization.llo_entity }}</p>
+                      {% endif %}
+                      <p class="text-xs text-gray-400">{{ membership.organization.program_manager|yesno:"Program,Network" }} Manager</p>
+                    </a>
+                  </li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+            <div class="p-2" x-show="canCreateOrg" x-transition.opacity x-cloak>
+              <a class="button button-md primary-dark w-full text-center"
+                 href="{% url 'organization_create' %}">{% translate "Create Workspace" %}</a>
             </div>
+          </div>
         </div>
-        {% else %}
-        <div class="flex items-center gap-x-4">
-          {% if ACCOUNT_ALLOW_REGISTRATION %}
-            <a id="sign-up-link" class="text-brand-deep-purple font-medium"
-               href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a>
-          {% endif %}
-            <a id="log-in-link" class="text-brand-deep-purple font-medium"
-             href="{% url 'account_login' %}">{% translate "Sign In" %}</a>
+        <!-- User Profile -->
+        <div x-data="{ open: false }" @click.away="open = false" class="relative">
+          <button @click="open = !open" class="focus:outline-none">
+            <div class="cursor-pointer overflow-hidden">
+              {% user_avatar user=request.user size="small" color_classes="bg-brand-cornflower-blue text-white" %}
+            </div>
+          </button>
+          <!-- User Profile Selector -->
+          <div x-show="open"
+               x-transition.opacity
+               x-cloak
+               class="absolute top-12 right-0 min-w-56 w-56 bg-white shadow rounded-lg z-50">
+            <ul class="p-2 w-full">
+              <li class="p-2 text-left">
+                <p class="text-brand-deep-purple font-medium">{{ request.user.username }}</p>
+                {% if request.org %}<span class="text-gray-400 text-sm">{{ request.org_membership.role }}</span>{% endif %}
+              </li>
+              <li class="p-2 text-left">
+                <a class="block p-2 hover:bg-gray-100 rounded cursor-pointer"
+                   href="{% url 'account_email' %}">
+                  <p class="text-brand-deep-purple">{% translate "Profile" %}</p>
+                </a>
+              </li>
+              <li class="p-2">
+                <a class="cursor-pointer" href="{% url 'account_logout' %}">
+                  <div class="bg-brand-indigo text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-800 transition">
+                    {% translate "Logout" %}
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
+      </div>
+    {% else %}
+      <div class="flex items-center gap-x-4">
+        {% if ACCOUNT_ALLOW_REGISTRATION %}
+          <a id="sign-up-link"
+             class="text-brand-deep-purple font-medium"
+             href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a>
         {% endif %}
-    </div>
+        <a id="log-in-link"
+           class="text-brand-deep-purple font-medium"
+           href="{% url 'account_login' %}">{% translate "Sign In" %}</a>
+      </div>
+    {% endif %}
+  </div>
 </header>
diff --git a/commcare_connect/templates/layouts/sidenav.html b/commcare_connect/templates/layouts/sidenav.html
index cd7f8386d9..40854b2f35 100644
--- a/commcare_connect/templates/layouts/sidenav.html
+++ b/commcare_connect/templates/layouts/sidenav.html
@@ -1,67 +1,56 @@
 {% load static i18n %}
-
 <div x-cloak
-    class="fixed top-0 left-0 h-screen bg-brand-deep-purple pt-3 z-40 text-white flex flex-col justify-between transition-all duration-300 px-2"
-    :class="sidebarOpen ? 'w-64' : 'w-16'">
-
-    <!-- Top Section -->
-    <div>
-        <!-- Logo Section -->
-        <div class="">
-            <div class="flex p-2 justify-start">
-                <div
-                    x-show.immediate="!sidebarOpen"
-                    class=" h-12 transition-none"
-                >
-                    <img src="{% static 'images/logo.svg' %}" alt="Compact Logo" class="w-8 h-8">
-                </div>
-                <div
-                    x-show.immediate="sidebarOpen"
-                    class="h-12 pl-1"
-                >
-                    <img src="{% static 'images/logo-full.svg' %}" alt="Full Logo" class="h-12 w-auto">
-                </div>
-            </div>
+     class="fixed top-0 left-0 h-screen bg-brand-deep-purple pt-3 z-40 text-white flex flex-col justify-between transition-all duration-300 px-2"
+     :class="sidebarOpen ? 'w-64' : 'w-16'">
+  <!-- Top Section -->
+  <div>
+    <!-- Logo Section -->
+    <div class="">
+      <div class="flex p-2 justify-start">
+        <div x-show.immediate="!sidebarOpen" class=" h-12 transition-none">
+          <img src="{% static 'images/logo.svg' %}"
+               alt="Compact Logo"
+               class="w-8 h-8">
         </div>
-
-        <div class="flex rounded-lg items-center p-2 transition-all duration-300 cursor-pointer">
-            <div class="flex items-center justify-center w-8 h-8">
-                <i class="fa-solid text-lg text-brand-sky"
-                    :class="sidebarOpen ? 'fa-xmark': 'fa-bars'"
-                    @click="sidebarOpen = !sidebarOpen"></i>
-
-            </div>
-
-            <div class="transition-all duration-300 overflow-hidden flex items-center"
-                 :class="sidebarOpen ? 'w-40 ml-4 opacity-100' : 'w-0 opacity-0'">
-                <span class="text-xs whitespace-nowrap">Menu</span>
-            </div>
+        <div x-show.immediate="sidebarOpen" class="h-12 pl-1">
+          <img src="{% static 'images/logo-full.svg' %}"
+               alt="Full Logo"
+               class="h-12 w-auto">
         </div>
-
-        <!-- Navigation Items -->
-        {% if request.user.is_authenticated %}
-          {% if request.org %}
-            {% if request.org_membership or request.user.is_superuser %}
-            <div class="mt-5">
-                {% url 'opportunity:list' request.org.slug as opportunity_url %}
-                {% include "components/sidenav-items.html" with name='Opportunities' icon='table-cells-large'  target=opportunity_url namespace='opportunity' %}
-
-                {% if not request.org_membership.is_viewer %}
-                    {% url 'program:home' request.org.slug as program_home_url %}
-                    {% include "components/sidenav-items.html" with name='Programs' icon='table-columns'  target=program_home_url namespace='program' %}
-
-                    {% url 'organization:home' request.org.slug as organization_home_url %}
-                    {% trans "My Workspace" as workspace_name %}
-                    {% include "components/sidenav-items.html" with name=workspace_name icon='building'  target=organization_home_url namespace='organization' %}
-                {% endif %}
-            </div>
+      </div>
+    </div>
+    <div class="flex rounded-lg items-center p-2 transition-all duration-300 cursor-pointer">
+      <div class="flex items-center justify-center w-8 h-8">
+        <i class="fa-solid text-lg text-brand-sky"
+           :class="sidebarOpen ? 'fa-xmark': 'fa-bars'"
+           @click="sidebarOpen = !sidebarOpen"></i>
+      </div>
+      <div class="transition-all duration-300 overflow-hidden flex items-center"
+           :class="sidebarOpen ? 'w-40 ml-4 opacity-100' : 'w-0 opacity-0'">
+        <span class="text-xs whitespace-nowrap">Menu</span>
+      </div>
+    </div>
+    <!-- Navigation Items -->
+    {% if request.user.is_authenticated %}
+      {% if request.org %}
+        {% if request.org_membership or request.user.is_superuser %}
+          <div class="mt-5">
+            {% url 'opportunity:list' request.org.slug as opportunity_url %}
+            {% include "components/sidenav-items.html" with name='Opportunities' icon='table-cells-large'  target=opportunity_url namespace='opportunity' %}
+            {% if not request.org_membership.is_viewer %}
+              {% url 'program:home' request.org.slug as program_home_url %}
+              {% include "components/sidenav-items.html" with name='Programs' icon='table-columns'  target=program_home_url namespace='program' %}
+              {% url 'organization:home' request.org.slug as organization_home_url %}
+              {% trans "My Workspace" as workspace_name %}
+              {% include "components/sidenav-items.html" with name=workspace_name icon='building'  target=organization_home_url namespace='organization' %}
             {% endif %}
-          {% endif %}
-          {% if request.user.show_internal_features %}
-            {% url 'users:internal_features' as internal_features_url %}
-            {% include "components/sidenav-items.html" with name='Internal Features' icon='gear' target=internal_features_url namespace='users' %}
-          {% endif %}
+          </div>
         {% endif %}
-    </div>
-
+      {% endif %}
+      {% if request.user.show_internal_features %}
+        {% url 'users:internal_features' as internal_features_url %}
+        {% include "components/sidenav-items.html" with name='Internal Features' icon='gear' target=internal_features_url namespace='users' %}
+      {% endif %}
+    {% endif %}
+  </div>
 </div>
diff --git a/commcare_connect/templates/microplanning/cluster_work_area_final_status.html b/commcare_connect/templates/microplanning/cluster_work_area_final_status.html
index 463ee0d19f..cd065ea1c6 100644
--- a/commcare_connect/templates/microplanning/cluster_work_area_final_status.html
+++ b/commcare_connect/templates/microplanning/cluster_work_area_final_status.html
@@ -1,4 +1,5 @@
 {% load i18n %}
-<div id="clustering-status" class="mt-4 py-3 px-8 bg-gray-200 flex gap-4 items-center">
-    <i class="{{ icon }} text-xl"></i><span>{{ message }}</span>
+<div id="clustering-status"
+     class="mt-4 py-3 px-8 bg-gray-200 flex gap-4 items-center">
+  <i class="{{ icon }} text-xl"></i><span>{{ message }}</span>
 </div>
diff --git a/commcare_connect/templates/microplanning/cluster_work_area_modal.html b/commcare_connect/templates/microplanning/cluster_work_area_modal.html
index 1f349d4cfa..f22086eb0c 100644
--- a/commcare_connect/templates/microplanning/cluster_work_area_modal.html
+++ b/commcare_connect/templates/microplanning/cluster_work_area_modal.html
@@ -1,42 +1,44 @@
 {% load i18n %}
-<div id="cluster-work-area-modal" class="modal-backdrop" x-cloak
-  x-show="showCreateWorkAreaGroupsModal"
-  @keydown.escape.window="showCreateWorkAreaGroupsModal = false">
+<div id="cluster-work-area-modal"
+     class="modal-backdrop"
+     x-cloak
+     x-show="showCreateWorkAreaGroupsModal"
+     @keydown.escape.window="showCreateWorkAreaGroupsModal = false">
   <div class="modal">
     <div class="px-4 py-3">
       <div class="header text-lg font-semibold text-brand-deep-purple flex flex-col items-center gap-4">
-          <i class="text-xl fa-solid fa-network-wired"></i>
-          <h1>{% translate "Create Work Area Groups" %}</h1>
+        <i class="text-xl fa-solid fa-network-wired"></i>
+        <h1>{% translate "Create Work Area Groups" %}</h1>
       </div>
-
-      <p class="mt-4">{% translate "This process may take a few minutes. Please do not close this window until it has completed." %}</p>
-
+      <p class="mt-4">
+        {% translate "This process may take a few minutes. Please do not close this window until it has completed." %}
+      </p>
       <div>
-      {% if request.GET.clustering_task_id %}
-        <div id='clustering-status' class='mt-4 py-3 px-8 bg-gray-200 flex gap-4 items-center'
-            hx-get="{% url 'microplanning:clustering_status' request.org.slug request.opportunity.opportunity_id %}?clustering_task_id={{ request.GET.clustering_task_id }}"
-            hx-trigger="every 2s" hx-swap="outerHTML">
+        {% if request.GET.clustering_task_id %}
+          <div id='clustering-status'
+               class='mt-4 py-3 px-8 bg-gray-200 flex gap-4 items-center'
+               hx-get="{% url 'microplanning:clustering_status' request.org.slug request.opportunity.opportunity_id %}?clustering_task_id={{ request.GET.clustering_task_id }}"
+               hx-trigger="every 2s"
+               hx-swap="outerHTML">
             <div class="animate-spin rounded-full h-4 w-4 border-4 border-brand-mango border-t-transparent"></div>
             <span>{% translate "Work Area Clustering in progress." %}</span>
-        </div>
-      {% else %}
-        <div id="clustering-status"></div>
-      {% endif %}
+          </div>
+        {% else %}
+          <div id="clustering-status"></div>
+        {% endif %}
       </div>
-
       <div class="flex justify-between mt-4">
-        <button type="button" class="button button-md outline-style" @click="showCreateWorkAreaGroupsModal = false">
-            {% trans 'Close' %}
-        </button>
-
+        <button type="button"
+                class="button button-md outline-style"
+                @click="showCreateWorkAreaGroupsModal = false">{% trans 'Close' %}</button>
         {% if request.GET.clustering_task_id %}
-        <button type="button" disabled class="button button-md primary-dark">{% translate "Create Groups" %}</button>
+          <button type="button" disabled class="button button-md primary-dark">{% translate "Create Groups" %}</button>
         {% else %}
-        <button type="submit" class="button button-md primary-dark"
-                hx-post="{% url 'microplanning:cluster_work_areas' request.org.slug request.opportunity.opportunity_id %}"
-                hx-trigger="click" hx-swap="outerHTML">
-          {% trans 'Create Groups' %}
-        </button>
+          <button type="submit"
+                  class="button button-md primary-dark"
+                  hx-post="{% url 'microplanning:cluster_work_areas' request.org.slug request.opportunity.opportunity_id %}"
+                  hx-trigger="click"
+                  hx-swap="outerHTML">{% trans 'Create Groups' %}</button>
         {% endif %}
       </div>
     </div>
diff --git a/commcare_connect/templates/microplanning/cluster_work_area_modal_status.html b/commcare_connect/templates/microplanning/cluster_work_area_modal_status.html
index 939c735110..b7acb00f20 100644
--- a/commcare_connect/templates/microplanning/cluster_work_area_modal_status.html
+++ b/commcare_connect/templates/microplanning/cluster_work_area_modal_status.html
@@ -1,8 +1,11 @@
 {% load i18n %}
 <button type="button" disabled class="button button-md primary-dark">{% translate "Create Groups" %}</button>
-<div id='clustering-status' class='mt-4 py-3 px-8 bg-gray-200 flex gap-4 items-center'
-    hx-get="{% url 'microplanning:clustering_status' request.org.slug request.opportunity.opportunity_id %}?clustering_task_id={{ clustering_task_id }}"
-    hx-trigger="every 2s" hx-swap="outerHTML" hx-swap-oob="outerHTML:#clustering-status">
-    <div class="animate-spin rounded-full h-4 w-4 border-4 border-brand-mango border-t-transparent"></div>
-    <span>{% translate "Work Area Clustering in progress." %}</span>
+<div id='clustering-status'
+     class='mt-4 py-3 px-8 bg-gray-200 flex gap-4 items-center'
+     hx-get="{% url 'microplanning:clustering_status' request.org.slug request.opportunity.opportunity_id %}?clustering_task_id={{ clustering_task_id }}"
+     hx-trigger="every 2s"
+     hx-swap="outerHTML"
+     hx-swap-oob="outerHTML:#clustering-status">
+  <div class="animate-spin rounded-full h-4 w-4 border-4 border-brand-mango border-t-transparent"></div>
+  <span>{% translate "Work Area Clustering in progress." %}</span>
 </div>
diff --git a/commcare_connect/templates/microplanning/home.html b/commcare_connect/templates/microplanning/home.html
index 4c27932310..043e9e5f5d 100644
--- a/commcare_connect/templates/microplanning/home.html
+++ b/commcare_connect/templates/microplanning/home.html
@@ -1,413 +1,421 @@
 {% extends 'base.html' %}
 {% load i18n static %}
-
 {% block css %}
-{{ block.super }}
-<link rel="stylesheet" href="{% static 'bundles/css/mapbox.css' %}">
-<link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'bundles/css/mapbox.css' %}">
+  <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 {% endblock %}
-
 {% block javascript %}
-{{ block.super }}
-<script src="{% static 'bundles/js/mapbox-bundle.js' %}"></script>
-<script src="{% static 'bundles/js/tomselect-bundle.js' %}"></script>
+  {{ block.super }}
+  <script src="{% static 'bundles/js/mapbox-bundle.js' %}"></script>
+  <script src="{% static 'bundles/js/tomselect-bundle.js' %}"></script>
 {% endblock javascript %}
-
 {% block content %}
-<div class="min-w-0">
+  <div class="min-w-0">
     <h2 class="mb-4 text-brand-deep-purple font-medium">{% translate "Select Opportunity Area" %}</h2>
-
     <!-- Top header section -->
     <header class="mb-2">
-        <div class="metric-container p-5 shadow-sm sm:p-6">
-            <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
-                <div class="min-w-0 flex-1">
-                    <h1 class="multi-line-clamp-2 text-2xl font-semibold text-white break-words hyphens-auto leading-snug">
-                        {{ opportunity.name }}
-                    </h1>
-                </div>
-
-                <div class="w-full border-t border-white/20 pt-4 lg:w-auto lg:border-t-0 lg:border-l lg:border-white/20 lg:pl-8 lg:pt-0">
-                    <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 lg:w-auto lg:max-w-3xl xl:grid-cols-6">
-                        {% for metric in metrics %}
-                            <div class="metric-card rounded-md p-3 text-center">
-                                <div class="text-xl font-semibold text-white">
-                                    {{ metric.value|default:"--" }}
-                                </div>
-                                <div class="mt-0.5 text-xs text-white/80">{{ metric.name }}</div>
-                            </div>
-                        {% endfor %}
-                    </div>
+      <div class="metric-container p-5 shadow-sm sm:p-6">
+        <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
+          <div class="min-w-0 flex-1">
+            <h1 class="multi-line-clamp-2 text-2xl font-semibold text-white break-words hyphens-auto leading-snug">
+              {{ opportunity.name }}
+            </h1>
+          </div>
+          <div class="w-full border-t border-white/20 pt-4 lg:w-auto lg:border-t-0 lg:border-l lg:border-white/20 lg:pl-8 lg:pt-0">
+            <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 lg:w-auto lg:max-w-3xl xl:grid-cols-6">
+              {% for metric in metrics %}
+                <div class="metric-card rounded-md p-3 text-center">
+                  <div class="text-xl font-semibold text-white">{{ metric.value|default:"--" }}</div>
+                  <div class="mt-0.5 text-xs text-white/80">{{ metric.name }}</div>
                 </div>
+              {% endfor %}
             </div>
+          </div>
         </div>
+      </div>
     </header>
-    <div x-data="{
-            showCreateGroupBtn: {{ show_workarea_groups_btn|yesno:'true,false' }},
-            showUploadBtn: {{ show_area_btn|yesno:'true,false' }},
-            showUploading: {{ task_id|yesno:'true,false' }},
-            showSeeResult: false,
-            showImportWorkAreaModal: false,
-            showCreateWorkAreaGroupsModal: false,
-        }" class="flex items-center justify-between w-full px-2 bg-white rounded-lg shadow-sm h-14 mb-4">
-        <div class="flex items-end space-x-2 w-full">
-            {% if task_id %}
-                <div hx-get="{% url 'microplanning:import_status' request.org.slug request.opportunity.opportunity_id %}"
-                    hx-vals='{"task_id": "{{ task_id }}"}' hx-trigger="load" hx-target="#modal-container">
-                </div>
-            {% endif %}
-            {% if show_area_btn %}
-                <button x-show="showUploadBtn" type="button"
-                    hx-get="{% url 'microplanning:import_status' request.org.slug request.opportunity.opportunity_id %}"
-                    hx-target="#modal-container" class="button button-md primary-dark">
-                    <i class="fa-solid fa-upload"></i>{% translate "Upload Work Areas" %}
-                </button>
-            {% endif %}
-            {% if show_workarea_groups_btn %}
-                <button class="button button-md primary-dark"
-                  x-show="showCreateGroupBtn" type="button" id="create-work-area-groups"
-                  @click="showCreateWorkAreaGroupsModal = true">
-                    <i class="fa-solid fa-play"></i> {% translate "Create Work Area Groups" %}
-                </button>
-            {% endif %}
-            {% if is_program_manager and not assignment_mode %}
-                <a href="?assignment_mode=1" class="button button-md primary-dark ml-auto">
-                    <i class="fa-solid fa-users-gear"></i> {% translate "Enter Assignment Mode" %}
-                </a>
-            {% endif %}
-            {% if assignment_mode %}
-                <div class="flex items-center gap-2 ml-auto">
-                    <span class="text-sm font-semibold text-indigo-700 bg-indigo-100 px-3 py-1 rounded-full">
-                        <i class="fa-solid fa-users-gear"></i> {% translate "Assignment Mode" %}
-                    </span>
-                    <a href="{{ request.path }}" class="button button-md outline-style text-sm">
-                        <i class="fa-solid fa-xmark"></i> {% translate "Exit" %}
-                    </a>
-                </div>
-            {% endif %}
-        </div>
-        <div x-show="showImportWorkAreaModal" id="modal-container"></div>
+    <div x-data="{ showCreateGroupBtn: {{ show_workarea_groups_btn|yesno:'true,false' }}, showUploadBtn: {{ show_area_btn|yesno:'true,false' }}, showUploading: {{ task_id|yesno:'true,false' }}, showSeeResult: false, showImportWorkAreaModal: false, showCreateWorkAreaGroupsModal: false, }"
+         class="flex items-center justify-between w-full px-2 bg-white rounded-lg shadow-sm h-14 mb-4">
+      <div class="flex items-end space-x-2 w-full">
+        {% if task_id %}
+          <div hx-get="{% url 'microplanning:import_status' request.org.slug request.opportunity.opportunity_id %}"
+               hx-vals='{"task_id": "{{ task_id }}"}'
+               hx-trigger="load"
+               hx-target="#modal-container"></div>
+        {% endif %}
+        {% if show_area_btn %}
+          <button x-show="showUploadBtn"
+                  type="button"
+                  hx-get="{% url 'microplanning:import_status' request.org.slug request.opportunity.opportunity_id %}"
+                  hx-target="#modal-container"
+                  class="button button-md primary-dark">
+            <i class="fa-solid fa-upload"></i>{% translate "Upload Work Areas" %}
+          </button>
+        {% endif %}
         {% if show_workarea_groups_btn %}
-          {% include "microplanning/cluster_work_area_modal.html" %}
+          <button class="button button-md primary-dark"
+                  x-show="showCreateGroupBtn"
+                  type="button"
+                  id="create-work-area-groups"
+                  @click="showCreateWorkAreaGroupsModal = true">
+            <i class="fa-solid fa-play"></i> {% translate "Create Work Area Groups" %}
+          </button>
+        {% endif %}
+        {% if is_program_manager and not assignment_mode %}
+          <a href="?assignment_mode=1"
+             class="button button-md primary-dark ml-auto">
+            <i class="fa-solid fa-users-gear"></i> {% translate "Enter Assignment Mode" %}
+          </a>
+        {% endif %}
+        {% if assignment_mode %}
+          <div class="flex items-center gap-2 ml-auto">
+            <span class="text-sm font-semibold text-indigo-700 bg-indigo-100 px-3 py-1 rounded-full">
+              <i class="fa-solid fa-users-gear"></i> {% translate "Assignment Mode" %}
+            </span>
+            <a href="{{ request.path }}"
+               class="button button-md outline-style text-sm">
+              <i class="fa-solid fa-xmark"></i> {% translate "Exit" %}
+            </a>
+          </div>
         {% endif %}
+      </div>
+      <div x-show="showImportWorkAreaModal" id="modal-container"></div>
+      {% if show_workarea_groups_btn %}
+        {% include "microplanning/cluster_work_area_modal.html" %}
+      {% endif %}
     </div>
-
-    <div class="flex flex-col gap-2 xl:flex-row xl:items-stretch xl:h-[max(calc(100vh-300px),200px)]" x-data="mapController()">
-        <!-- Map section -->
-        <div id="map-wrapper" x-ref="mapContainer"
-            class="relative min-w-0 flex-1 shadow-md h-[max(calc(100vh-300px),200px)] xl:h-full">
-            <div id="toast-container"
-                class="absolute top-4 right-4 z-50 flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-sm text-white opacity-0 transition-opacity duration-300">
-                <i id="toast-icon" class="text-lg"></i>
-                <span id="toast-message"></span>
-            </div>
-            <div id="map" class="w-full h-full"></div>
+    <div class="flex flex-col gap-2 xl:flex-row xl:items-stretch xl:h-[max(calc(100vh-300px),200px)]"
+         x-data="mapController()">
+      <!-- Map section -->
+      <div id="map-wrapper"
+           x-ref="mapContainer"
+           class="relative min-w-0 flex-1 shadow-md h-[max(calc(100vh-300px),200px)] xl:h-full">
+        <div id="toast-container"
+             class="absolute top-4 right-4 z-50 flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-sm text-white opacity-0 transition-opacity duration-300">
+          <i id="toast-icon" class="text-lg"></i>
+          <span id="toast-message"></span>
         </div>
-
-        <!-- Sidebars (stacked) -->
-        <div class="w-full xl:w-96 shrink-0 flex flex-col gap-2 min-h-0 xl:h-full">
+        <div id="map" class="w-full h-full"></div>
+      </div>
+      <!-- Sidebars (stacked) -->
+      <div class="w-full xl:w-96 shrink-0 flex flex-col gap-2 min-h-0 xl:h-full">
         {% if not assignment_mode %}
-            <aside id="sidebar" class="bg-white shadow-md p-4 overflow-auto xl:flex-1 min-h-0">
-                <div class="flex items-center justify-between mb-2">
-                    <h2 class="text-lg font-semibold">{% translate "Filter Map Work Areas" %}</h2>
-                    <div class="flex gap-4">
-                        <a :href="getDownloadUrl()" class="button-icon shadow-sm ml-auto" x-data="{ disabled: false }"
-                            @click="if (disabled) { $event.preventDefault(); return; } disabled = true; setTimeout(() => disabled = false, 3000)"
-                            x-tooltip.raw="{% translate 'Download work area summary with applied filters' %}"
-                            aria-label="{% translate 'Download work areas' %}"
-                            :class="{ 'opacity-50 pointer-events-none': disabled }">
-                            <i class="fa-solid fa-download"></i>
-                        </a>
-                        <button type="button" class="text-xs text-brand-deep-purple cursor-pointer hover:underline"
-                            @click="clearFilters()">{% translate "Clear" %}</button>
-                    </div>
-                </div>
-                <div class="flex items-center justify-between py-2">
-                    <label for="show-visits-toggle" class="text-sm text-gray-700">{% translate "Show Visits" %}</label>
-                    <button id="show-visits-toggle" type="button" role="switch" :aria-checked="showVisits"
-                        @click="showVisits = !showVisits" :class="showVisits ? 'bg-indigo-600' : 'bg-gray-200'"
-                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
-                        <span :class="showVisits ? 'translate-x-5' : 'translate-x-0'"
-                            class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                    </button>
+          <aside id="sidebar"
+                 class="bg-white shadow-md p-4 overflow-auto xl:flex-1 min-h-0">
+            <div class="flex items-center justify-between mb-2">
+              <h2 class="text-lg font-semibold">{% translate "Filter Map Work Areas" %}</h2>
+              <div class="flex gap-4">
+                <a :href="getDownloadUrl()"
+                   class="button-icon shadow-sm ml-auto"
+                   x-data="{ disabled: false }"
+                   @click="if (disabled) { $event.preventDefault(); return; } disabled = true; setTimeout(() => disabled = false, 3000)"
+                   x-tooltip.raw="{% translate 'Download work area summary with applied filters' %}"
+                   aria-label="{% translate 'Download work areas' %}"
+                   :class="{ 'opacity-50 pointer-events-none': disabled }">
+                  <i class="fa-solid fa-download"></i>
+                </a>
+                <button type="button"
+                        class="text-xs text-brand-deep-purple cursor-pointer hover:underline"
+                        @click="clearFilters()">{% translate "Clear" %}</button>
+              </div>
+            </div>
+            <div class="flex items-center justify-between py-2">
+              <label for="show-visits-toggle" class="text-sm text-gray-700">{% translate "Show Visits" %}</label>
+              <button id="show-visits-toggle"
+                      type="button"
+                      role="switch"
+                      :aria-checked="showVisits"
+                      @click="showVisits = !showVisits"
+                      :class="showVisits ? 'bg-indigo-600' : 'bg-gray-200'"
+                      class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
+                <span :class="showVisits ? 'translate-x-5' : 'translate-x-0'"
+                      class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
+              </button>
+            </div>
+            <form x-ref="filterForm" @change.debounce.1000ms="applyFilters()">
+              {% for field in filter_form %}
+                <div class="mb-3">
+                  <label for="{{ field.id_for_label }}"
+                         class="block text-sm font-medium text-gray-700 mb-1">{{ field.label }}</label>
+                  {{ field }}
                 </div>
-                <form x-ref="filterForm" @change.debounce.1000ms="applyFilters()">
-                    {% for field in filter_form %}
-                    <div class="mb-3">
-                        <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
-                            {{ field.label }}
-                        </label>
-                        {{ field }}
-                    </div>
-                    {% endfor %}
-                </form>
-            </aside>
-
-            <aside id="lower-sidebar" class="bg-white shadow-md p-4 xl:flex-1 min-h-0">
-                {{ status_meta|json_script:"status-meta-data" }}
-                <h2 class="text-lg font-semibold mb-2">{% translate "Select Work Area" %}</h2>
-                <template x-if="!selectedFeature">
-                    <div class="flex flex-col items-center justify-center h-full text-center text-gray-400 gap-2 py-8">
-                        <i class="fa-regular fa-map text-3xl"></i>
-                        <p class="text-sm">{% translate "Click a work area on the map to view details." %}</p>
-                    </div>
-                </template>
-
-                <!-- Selected work area detail panel -->
-                <template x-if="selectedFeature">
-                    <div>
-                        <dl class="space-y-2">
-                            <div class="grid grid-cols-2 items-center gap-2">
-                                <dt class="text-sm text-gray-500">{% translate "Assignee" %}</dt>
-                                <dd class="text-sm font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 truncate"
-                                    x-text="selectedFeature.assignee_name ?? '—'"></dd>
-
-                                <dt class="text-sm text-gray-500">{% translate "Work Area Group" %}</dt>
-                                <dd class="text-sm font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 truncate"
-                                    x-text="selectedFeature.group_name ?? '—'"></dd>
-
-                                <dt class="text-sm text-gray-500">{% translate "Expected Visit Count" %}</dt>
-                                <dd class="text-sm font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
-                                    x-text="selectedFeature.expected_visit_count ?? '—'"></dd>
-
-                                <dt class="text-sm text-gray-500">{% translate "Number of Buildings" %}</dt>
-                                <dd class="text-sm font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
-                                    x-text="selectedFeature.building_count ?? '—'"></dd>
-                            </div>
-                            <div class="flex items-center gap-4"
-                                x-data="{statusMeta: JSON.parse(document.getElementById('status-meta-data').textContent)}">
-                                <dt class="text-sm text-gray-500 shrink-0">{% translate "Status" %}</dt>
-                                <dd class="flex-1 min-w-0">
-                                    <span class="block w-full text-center text-sm font-semibold rounded-lg px-3 py-2"
-                                        :class="statusMeta[selectedFeature.status]?.class"
-                                        x-text="statusMeta[selectedFeature.status]?.label">
-                                    </span>
-                                </dd>
-                            </div>
-                        </dl>
-                        <div class="mt-4 flex justify-end">
-                            <button class="button button-md button-outline-rounded" @click="openWorkAreaEditModal(selectedFeature._id)">
-                                <i class="fa-regular fa-pen-to-square"></i>
-                                {% translate "Modify Work Area" %}
-                            </button>
-                            <div x-show="showWorkAreaEditModal" x-cloak @click.self="showWorkAreaEditModal = false"
-                                @work-area-updated.window="showWorkAreaEditModal = false" class="modal-backdrop">
-                                <div class="modal relative" @click.stop>
-                                    <div id="work-area-form"></div>
-                                </div>
-                            </div>
-                        </div>
+              {% endfor %}
+            </form>
+          </aside>
+          <aside id="lower-sidebar" class="bg-white shadow-md p-4 xl:flex-1 min-h-0">
+            {{ status_meta|json_script:"status-meta-data" }}
+            <h2 class="text-lg font-semibold mb-2">{% translate "Select Work Area" %}</h2>
+            <template x-if="!selectedFeature">
+              <div class="flex flex-col items-center justify-center h-full text-center text-gray-400 gap-2 py-8">
+                <i class="fa-regular fa-map text-3xl"></i>
+                <p class="text-sm">{% translate "Click a work area on the map to view details." %}</p>
+              </div>
+            </template>
+            <!-- Selected work area detail panel -->
+            <template x-if="selectedFeature">
+              <div>
+                <dl class="space-y-2">
+                  <div class="grid grid-cols-2 items-center gap-2">
+                    <dt class="text-sm text-gray-500">{% translate "Assignee" %}</dt>
+                    <dd class="text-sm font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 truncate"
+                        x-text="selectedFeature.assignee_name ?? '—'">
+                    </dd>
+                    <dt class="text-sm text-gray-500">{% translate "Work Area Group" %}</dt>
+                    <dd class="text-sm font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 truncate"
+                        x-text="selectedFeature.group_name ?? '—'">
+                    </dd>
+                    <dt class="text-sm text-gray-500">{% translate "Expected Visit Count" %}</dt>
+                    <dd class="text-sm font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
+                        x-text="selectedFeature.expected_visit_count ?? '—'">
+                    </dd>
+                    <dt class="text-sm text-gray-500">{% translate "Number of Buildings" %}</dt>
+                    <dd class="text-sm font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
+                        x-text="selectedFeature.building_count ?? '—'">
+                    </dd>
+                  </div>
+                  <div class="flex items-center gap-4"
+                       x-data="{statusMeta: JSON.parse(document.getElementById('status-meta-data').textContent)}">
+                    <dt class="text-sm text-gray-500 shrink-0">{% translate "Status" %}</dt>
+                    <dd class="flex-1 min-w-0">
+                      <span class="block w-full text-center text-sm font-semibold rounded-lg px-3 py-2"
+                            :class="statusMeta[selectedFeature.status]?.class"
+                            x-text="statusMeta[selectedFeature.status]?.label"></span>
+                    </dd>
+                  </div>
+                </dl>
+                <div class="mt-4 flex justify-end">
+                  <button class="button button-md button-outline-rounded"
+                          @click="openWorkAreaEditModal(selectedFeature._id)">
+                    <i class="fa-regular fa-pen-to-square"></i>
+                    {% translate "Modify Work Area" %}
+                  </button>
+                  <div x-show="showWorkAreaEditModal"
+                       x-cloak
+                       @click.self="showWorkAreaEditModal = false"
+                       @work-area-updated.window="showWorkAreaEditModal = false"
+                       class="modal-backdrop">
+                    <div class="modal relative" @click.stop>
+                      <div id="work-area-form"></div>
                     </div>
-                </template>
-            </aside>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </aside>
         {% endif %}
-
         {% if assignment_mode %}
-            {{ assignees_json|json_script:"assignees-data" }}
-
-            <aside class="bg-white shadow-md p-4 overflow-auto flex flex-col gap-4 xl:flex-1 min-h-0">
-                <!-- Show only unassigned toggle -->
-                <div class="flex items-center justify-between">
-                    <label for="unassigned-toggle" class="text-sm text-gray-700">{% translate "Show only unassigned Work Areas" %}</label>
-                    <button id="unassigned-toggle" type="button" role="switch" :aria-checked="showOnlyUnassigned"
-                        @click="showOnlyUnassigned = !showOnlyUnassigned"
-                        :class="showOnlyUnassigned ? 'bg-indigo-600' : 'bg-gray-200'"
-                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
-                        <span :class="showOnlyUnassigned ? 'translate-x-5' : 'translate-x-0'"
-                            class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                    </button>
+          {{ assignees_json|json_script:"assignees-data" }}
+          <aside class="bg-white shadow-md p-4 overflow-auto flex flex-col gap-4 xl:flex-1 min-h-0">
+            <!-- Show only unassigned toggle -->
+            <div class="flex items-center justify-between">
+              <label for="unassigned-toggle" class="text-sm text-gray-700">{% translate "Show only unassigned Work Areas" %}</label>
+              <button id="unassigned-toggle"
+                      type="button"
+                      role="switch"
+                      :aria-checked="showOnlyUnassigned"
+                      @click="showOnlyUnassigned = !showOnlyUnassigned"
+                      :class="showOnlyUnassigned ? 'bg-indigo-600' : 'bg-gray-200'"
+                      class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
+                <span :class="showOnlyUnassigned ? 'translate-x-5' : 'translate-x-0'"
+                      class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
+              </button>
+            </div>
+            <!-- Panel 1: Select Work Areas to Assign -->
+            <div class="border-t border-gray-200 pt-3">
+              <h3 class="text-sm font-semibold mb-2">{% translate "Select Work Areas to Assign" %}</h3>
+              <div class="space-y-2">
+                <div>
+                  <label for="{{ assignment_form.work_area_group.id_for_label }}"
+                         class="block text-xs text-gray-500 mb-1">{{ assignment_form.work_area_group.label }}</label>
+                  {{ assignment_form.work_area_group }}
                 </div>
-
-                <!-- Panel 1: Select Work Areas to Assign -->
-                <div class="border-t border-gray-200 pt-3">
-                    <h3 class="text-sm font-semibold mb-2">{% translate "Select Work Areas to Assign" %}</h3>
-                    <div class="space-y-2">
-                        <div>
-                            <label for="{{ assignment_form.work_area_group.id_for_label }}"
-                                class="block text-xs text-gray-500 mb-1">
-                                {{ assignment_form.work_area_group.label }}
-                            </label>
-                            {{ assignment_form.work_area_group }}
-                        </div>
-                        <p class="text-xs text-gray-500">
-                            <span x-text="selectedWorkAreas.size"></span> {% translate "work areas selected" %}
-                        </p>
-                        <div class="flex flex-col items-end gap-2">
-                            <button type="button" disabled
-                                title="{% translate 'Exclude from Opportunity will be available in a future update' %}"
-                                class="button button-sm outline-style text-xs opacity-50 cursor-not-allowed">
-                                {% translate "Exclude from Opportunity" %}
-                            </button>
-                            <button type="button" disabled
-                                title="{% translate 'Unassign Selected Areas will be available in a future update' %}"
-                                class="button button-sm outline-style text-xs opacity-50 cursor-not-allowed">
-                                {% translate "Unassign Selected Areas" %}
-                            </button>
-                        </div>
-                    </div>
+                <p class="text-xs text-gray-500">
+                  <span x-text="selectedWorkAreas.size"></span> {% translate "work areas selected" %}
+                </p>
+                <div class="flex flex-col items-end gap-2">
+                  <button type="button"
+                          disabled
+                          title="{% translate 'Exclude from Opportunity will be available in a future update' %}"
+                          class="button button-sm outline-style text-xs opacity-50 cursor-not-allowed">
+                    {% translate "Exclude from Opportunity" %}
+                  </button>
+                  <button type="button"
+                          disabled
+                          title="{% translate 'Unassign Selected Areas will be available in a future update' %}"
+                          class="button button-sm outline-style text-xs opacity-50 cursor-not-allowed">
+                    {% translate "Unassign Selected Areas" %}
+                  </button>
                 </div>
-
-                <!-- Panel 2: Select new Assignee -->
-                <div class="border-t border-gray-200 pt-3">
-                    <h3 class="text-sm font-semibold mb-2">{{ assignment_form.assignee.label }}</h3>
-                    {{ assignment_form.assignee }}
-                    <div class="flex justify-end">
-                      <button type="button" @click="addToQueue()"
-                          :disabled="selectedWorkAreas.size === 0 || !selectedAssigneeId"
-                          class="button button-sm primary-dark text-xs mt-2">
-                          <i class="fa-solid fa-plus"></i> {% translate "Save" %}
+              </div>
+            </div>
+            <!-- Panel 2: Select new Assignee -->
+            <div class="border-t border-gray-200 pt-3">
+              <h3 class="text-sm font-semibold mb-2">{{ assignment_form.assignee.label }}</h3>
+              {{ assignment_form.assignee }}
+              <div class="flex justify-end">
+                <button type="button"
+                        @click="addToQueue()"
+                        :disabled="selectedWorkAreas.size === 0 || !selectedAssigneeId"
+                        class="button button-sm primary-dark text-xs mt-2">
+                  <i class="fa-solid fa-plus"></i> {% translate "Save" %}
+                </button>
+              </div>
+            </div>
+            <!-- Queued assignments -->
+            <template x-if="assignmentQueue.length > 0">
+              <div class="border-t border-gray-200 pt-3">
+                <h3 class="text-sm font-semibold mb-2">
+                  {% translate "Pending Assignments" %}
+                  <span class="text-gray-400 font-normal"
+                        x-text="'(' + assignmentQueue.length + ')'"></span>
+                </h3>
+                <div class="space-y-2 max-h-40 overflow-auto">
+                  <template x-for="(entry, index) in assignmentQueue" :key="index">
+                    <div class="flex items-center justify-between bg-gray-50 rounded-lg px-3 py-2 text-xs">
+                      <div class="min-w-0">
+                        <span class="font-medium truncate block" x-text="entry.assignee_name"></span>
+                        <span class="text-gray-500"><span x-text="entry.work_area_ids.length"></span> {% translate "work areas" %}</span>
+                      </div>
+                      <button type="button"
+                              @click="removeFromQueue(index)"
+                              class="text-red-500 hover:text-red-700 ml-2 shrink-0">
+                        <i class="fa-solid fa-xmark"></i>
                       </button>
                     </div>
+                  </template>
                 </div>
-
-                <!-- Queued assignments -->
-                <template x-if="assignmentQueue.length > 0">
-                    <div class="border-t border-gray-200 pt-3">
-                        <h3 class="text-sm font-semibold mb-2">
-                            {% translate "Pending Assignments" %}
-                            <span class="text-gray-400 font-normal" x-text="'(' + assignmentQueue.length + ')'"></span>
-                        </h3>
-                        <div class="space-y-2 max-h-40 overflow-auto">
-                            <template x-for="(entry, index) in assignmentQueue" :key="index">
-                                <div class="flex items-center justify-between bg-gray-50 rounded-lg px-3 py-2 text-xs">
-                                    <div class="min-w-0">
-                                        <span class="font-medium truncate block" x-text="entry.assignee_name"></span>
-                                        <span class="text-gray-500"><span x-text="entry.work_area_ids.length"></span> {% translate "work areas" %}</span>
-                                    </div>
-                                    <button type="button" @click="removeFromQueue(index)"
-                                        class="text-red-500 hover:text-red-700 ml-2 shrink-0">
-                                        <i class="fa-solid fa-xmark"></i>
-                                    </button>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                </template>
-
-                <!-- Panel 3: FLW Summary -->
-                <div class="border-t border-gray-200 pt-3">
-                    <h3 class="text-sm font-semibold mb-2">{% translate "FLW Summary" %}</h3>
-                    <div class="mb-2">
-                        <label class="block text-xs text-gray-500 mb-1">{% translate "Select FLW" %}</label>
-                        <select x-ref="flwSummarySelect"
-                            @change="flwSummaryAssigneeId = $event.target.value; updateFlwSummary()"
-                            class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
-                            <option value="">{% translate "— Select FLW —" %}</option>
-                            <template x-for="a in assignees" :key="a.id">
-                                <option :value="a.id" x-text="a.user__name"></option>
-                            </template>
-                        </select>
-                    </div>
-                    <template x-if="!flwSummaryAssigneeId">
-                        <p class="text-sm text-gray-400">{% translate "Select an FLW to view summary." %}</p>
-                    </template>
-                    <template x-if="flwSummaryAssigneeId && flwSummaryLoading">
-                        <div class="flex justify-center py-4"><i class="fa-solid fa-spinner fa-spin text-gray-400"></i></div>
-                    </template>
-                    <template x-if="flwSummaryAssigneeId && !flwSummaryLoading && flwSummary">
-                        <div>
-                            <dl class="space-y-2">
-                                <div class="grid grid-cols-2 items-center gap-2 text-sm">
-                                    <dt class="text-gray-500">{% translate "Count of Assigned Buildings" %}</dt>
-                                    <dd class="font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
-                                        x-text="flwSummary.assigned_buildings + getQueuedStatsForAssignee().buildings + (String(flwSummaryAssigneeId) === String(selectedAssigneeId) ? getSelectedStats().buildings : 0)"></dd>
-                                    <dt class="text-gray-500">{% translate "Count of Assigned Visits" %}</dt>
-                                    <dd class="font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
-                                        x-text="flwSummary.assigned_visits + getQueuedStatsForAssignee().visits + (String(flwSummaryAssigneeId) === String(selectedAssigneeId) ? getSelectedStats().visits : 0)"></dd>
-                                    <dt class="text-gray-500">{% translate "Count of Assigned Work Areas" %}</dt>
-                                    <dd class="font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
-                                        x-text="flwSummary.assigned_work_areas + getQueuedStatsForAssignee().workAreas + (String(flwSummaryAssigneeId) === String(selectedAssigneeId) ? selectedWorkAreas.size : 0)"></dd>
-                                </div>
-                            </dl>
-                            <div class="flex gap-2 mt-3">
-                                <a href="{{ worker_list_url }}" target="_blank"
-                                    class="button button-sm outline-style text-xs">
-                                    {% translate "View Summary by FLW" %}
-                                </a>
-                                <a :href="'{{ user_visits_url }}?user=' + getFlwSummaryUserId()" target="_blank"
-                                    class="button button-sm outline-style text-xs">
-                                    {% translate "View Visits" %}
-                                </a>
-                            </div>
-                        </div>
-                    </template>
-                </div>
-
-                <!-- Bottom action bar -->
-                <div class="flex gap-2 mt-auto pt-4 border-t border-gray-200">
-                    <button type="button" @click="handleCancel()"
-                        class="button button-md outline-style flex-1">
-                        {% translate "Cancel" %}
-                    </button>
-                    <button type="button" class="button button-md primary-dark flex-1"
-                        :disabled="assignmentQueue.length === 0 && (selectedWorkAreas.size === 0 || !selectedAssigneeId)"
-                        @click="handleSaveAndConfirm()">
-                      {% translate "Save and Confirm" %}
-                    </button>
+              </div>
+            </template>
+            <!-- Panel 3: FLW Summary -->
+            <div class="border-t border-gray-200 pt-3">
+              <h3 class="text-sm font-semibold mb-2">{% translate "FLW Summary" %}</h3>
+              <div class="mb-2">
+                <label class="block text-xs text-gray-500 mb-1">{% translate "Select FLW" %}</label>
+                <select x-ref="flwSummarySelect"
+                        @change="flwSummaryAssigneeId = $event.target.value; updateFlwSummary()"
+                        class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
+                  <option value="">{% translate "— Select FLW —" %}</option>
+                  <template x-for="a in assignees" :key="a.id">
+                    <option :value="a.id" x-text="a.user__name"></option>
+                  </template>
+                </select>
+              </div>
+              <template x-if="!flwSummaryAssigneeId">
+                <p class="text-sm text-gray-400">{% translate "Select an FLW to view summary." %}</p>
+              </template>
+              <template x-if="flwSummaryAssigneeId && flwSummaryLoading">
+                <div class="flex justify-center py-4">
+                  <i class="fa-solid fa-spinner fa-spin text-gray-400"></i>
                 </div>
-            </aside>
-
-            <!-- Save and Confirm modal -->
-            <div x-show="showConfirmModal" x-cloak @click.self="if (!isSaving) showConfirmModal = false" class="modal-backdrop">
-                <div class="modal relative p-6" @click.stop>
-                    <h3 class="text-lg font-semibold mb-3">{% translate "Warning" %}</h3>
-                    <p class="text-sm mb-4">
-                        {% translate "Saving these changes will alert all impacted FLWs that their assignment has changed. Are you sure you want to continue?" %}
-                    </p>
-                    <div class="space-y-2 mb-4 max-h-60 overflow-auto">
-                        <template x-for="(entry, index) in assignmentQueue" :key="index">
-                            <dl class="text-sm space-y-1 bg-gray-50 rounded-lg p-3">
-                                <div class="flex justify-between">
-                                    <dt>{% translate "Assignee" %}</dt>
-                                    <dd class="font-semibold" x-text="entry.assignee_name"></dd>
-                                </div>
-                                <div class="flex justify-between">
-                                    <dt>{% translate "Work Areas" %}</dt>
-                                    <dd class="font-semibold" x-text="entry.work_area_ids.length"></dd>
-                                </div>
-                                <div class="flex justify-between">
-                                    <dt>{% translate "Total Buildings" %}</dt>
-                                    <dd class="font-semibold" x-text="entry.buildings"></dd>
-                                </div>
-                                <div class="flex justify-between">
-                                    <dt>{% translate "Total Expected Visits" %}</dt>
-                                    <dd class="font-semibold" x-text="entry.visits"></dd>
-                                </div>
-                            </dl>
-                        </template>
-                    </div>
-                    <div class="flex gap-2 justify-between">
-                        <button class="button button-md outline-style" @click="showConfirmModal = false" :disabled="isSaving">
-                            {% translate "Back to Edit" %}
-                        </button>
-                        <button class="button button-md primary-dark" @click="saveAssignment()" :disabled="isSaving">
-                            <i x-show="isSaving" class="fa-solid fa-spinner fa-spin mr-1"></i>
-                            <span x-text="isSaving ? '{% translate "Saving..." %}' : '{% translate "Save and Confirm" %}'"></span>
-                        </button>
+              </template>
+              <template x-if="flwSummaryAssigneeId && !flwSummaryLoading && flwSummary">
+                <div>
+                  <dl class="space-y-2">
+                    <div class="grid grid-cols-2 items-center gap-2 text-sm">
+                      <dt class="text-gray-500">{% translate "Count of Assigned Buildings" %}</dt>
+                      <dd class="font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
+                          x-text="flwSummary.assigned_buildings + getQueuedStatsForAssignee().buildings + (String(flwSummaryAssigneeId) === String(selectedAssigneeId) ? getSelectedStats().buildings : 0)">
+                      </dd>
+                      <dt class="text-gray-500">{% translate "Count of Assigned Visits" %}</dt>
+                      <dd class="font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
+                          x-text="flwSummary.assigned_visits + getQueuedStatsForAssignee().visits + (String(flwSummaryAssigneeId) === String(selectedAssigneeId) ? getSelectedStats().visits : 0)">
+                      </dd>
+                      <dt class="text-gray-500">{% translate "Count of Assigned Work Areas" %}</dt>
+                      <dd class="font-medium text-right border border-gray-200 rounded-lg px-3 py-2 bg-gray-50"
+                          x-text="flwSummary.assigned_work_areas + getQueuedStatsForAssignee().workAreas + (String(flwSummaryAssigneeId) === String(selectedAssigneeId) ? selectedWorkAreas.size : 0)">
+                      </dd>
                     </div>
+                  </dl>
+                  <div class="flex gap-2 mt-3">
+                    <a href="{{ worker_list_url }}"
+                       target="_blank"
+                       class="button button-sm outline-style text-xs">{% translate "View Summary by FLW" %}</a>
+                    <a :href="'{{ user_visits_url }}?user=' + getFlwSummaryUserId()"
+                       target="_blank"
+                       class="button button-sm outline-style text-xs">{% translate "View Visits" %}</a>
+                  </div>
                 </div>
+              </template>
+            </div>
+            <!-- Bottom action bar -->
+            <div class="flex gap-2 mt-auto pt-4 border-t border-gray-200">
+              <button type="button"
+                      @click="handleCancel()"
+                      class="button button-md outline-style flex-1">{% translate "Cancel" %}</button>
+              <button type="button"
+                      class="button button-md primary-dark flex-1"
+                      :disabled="assignmentQueue.length === 0 && (selectedWorkAreas.size === 0 || !selectedAssigneeId)"
+                      @click="handleSaveAndConfirm()">{% translate "Save and Confirm" %}</button>
             </div>
-
-            <!-- Cancel/Discard modal -->
-            <div x-show="showDiscardModal" x-cloak @click.self="showDiscardModal = false" class="modal-backdrop">
-                <div class="modal relative p-6" @click.stop>
-                    <h3 class="text-lg font-semibold mb-3">{% translate "Warning" %}</h3>
-                    <p class="text-sm mb-4">
-                        {% translate "Your changes won't be saved. Are you sure you want to continue?" %}
-                    </p>
-                    <div class="flex gap-2 justify-between">
-                        <a href="{{ request.path }}" class="button button-md outline-style">
-                            {% translate "Continue" %}
-                        </a>
-                        <button class="button button-md primary-dark" @click="showDiscardModal = false">
-                            {% translate "Back to Edit" %}
-                        </button>
+          </aside>
+          <!-- Save and Confirm modal -->
+          <div x-show="showConfirmModal"
+               x-cloak
+               @click.self="if (!isSaving) showConfirmModal = false"
+               class="modal-backdrop">
+            <div class="modal relative p-6" @click.stop>
+              <h3 class="text-lg font-semibold mb-3">{% translate "Warning" %}</h3>
+              <p class="text-sm mb-4">
+                {% translate "Saving these changes will alert all impacted FLWs that their assignment has changed. Are you sure you want to continue?" %}
+              </p>
+              <div class="space-y-2 mb-4 max-h-60 overflow-auto">
+                <template x-for="(entry, index) in assignmentQueue" :key="index">
+                  <dl class="text-sm space-y-1 bg-gray-50 rounded-lg p-3">
+                    <div class="flex justify-between">
+                      <dt>{% translate "Assignee" %}</dt>
+                      <dd class="font-semibold" x-text="entry.assignee_name">
+                      </dd>
                     </div>
-                </div>
+                    <div class="flex justify-between">
+                      <dt>{% translate "Work Areas" %}</dt>
+                      <dd class="font-semibold" x-text="entry.work_area_ids.length">
+                      </dd>
+                    </div>
+                    <div class="flex justify-between">
+                      <dt>{% translate "Total Buildings" %}</dt>
+                      <dd class="font-semibold" x-text="entry.buildings">
+                      </dd>
+                    </div>
+                    <div class="flex justify-between">
+                      <dt>{% translate "Total Expected Visits" %}</dt>
+                      <dd class="font-semibold" x-text="entry.visits">
+                      </dd>
+                    </div>
+                  </dl>
+                </template>
+              </div>
+              <div class="flex gap-2 justify-between">
+                <button class="button button-md outline-style"
+                        @click="showConfirmModal = false"
+                        :disabled="isSaving">{% translate "Back to Edit" %}</button>
+                <button class="button button-md primary-dark"
+                        @click="saveAssignment()"
+                        :disabled="isSaving">
+                  <i x-show="isSaving" class="fa-solid fa-spinner fa-spin mr-1"></i>
+                  <span x-text="isSaving ? '{% translate "Saving..." %}' : '{% translate "Save and Confirm" %}'"></span>
+                </button>
+              </div>
             </div>
+          </div>
+          <!-- Cancel/Discard modal -->
+          <div x-show="showDiscardModal"
+               x-cloak
+               @click.self="showDiscardModal = false"
+               class="modal-backdrop">
+            <div class="modal relative p-6" @click.stop>
+              <h3 class="text-lg font-semibold mb-3">{% translate "Warning" %}</h3>
+              <p class="text-sm mb-4">{% translate "Your changes won't be saved. Are you sure you want to continue?" %}</p>
+              <div class="flex gap-2 justify-between">
+                <a href="{{ request.path }}" class="button button-md outline-style">{% translate "Continue" %}</a>
+                <button class="button button-md primary-dark"
+                        @click="showDiscardModal = false">{% translate "Back to Edit" %}</button>
+              </div>
+            </div>
+          </div>
         {% endif %}
-</div>
-</div>
-</div>
-{% include "microplanning/map_handler.html" %}
+      </div>
+    </div>
+  </div>
+  {% include "microplanning/map_handler.html" %}
 {% endblock %}
diff --git a/commcare_connect/templates/microplanning/import_work_area_modal.html b/commcare_connect/templates/microplanning/import_work_area_modal.html
index 000f517d9e..720aad4603 100644
--- a/commcare_connect/templates/microplanning/import_work_area_modal.html
+++ b/commcare_connect/templates/microplanning/import_work_area_modal.html
@@ -1,141 +1,115 @@
 {% load i18n static %}
-
-<div id="import-parent" x-show="showImportWorkAreaModal" class="modal-backdrop" x-cloak x-init="showImportWorkAreaModal = true">
-    <div class="modal">
-
-        <!-- Header -->
-        <div class="header text-lg font-semibold text-brand-deep-purple flex justify-between items-center">
-            <h1>{% translate "Upload Work Areas" %}</h1>
+<div id="import-parent"
+     x-show="showImportWorkAreaModal"
+     class="modal-backdrop"
+     x-cloak
+     x-init="showImportWorkAreaModal = true">
+  <div class="modal">
+    <!-- Header -->
+    <div class="header text-lg font-semibold text-brand-deep-purple flex justify-between items-center">
+      <h1>{% translate "Upload Work Areas" %}</h1>
+    </div>
+    <!-- Modal Body -->
+    <div id="import-result"
+         {% if task_id and not result_ready %} hx-get="{% url 'microplanning:import_status' request.org.slug request.opportunity.opportunity_id %}?task_id={{ task_id }}" hx-trigger="every 2s" hx-target="#import-parent" hx-swap="outerHTML" {% endif %}>
+      {% if task_id and not result_ready %}
+        <!-- Spinner -->
+        <div class="flex flex-col items-center justify-center mt-4">
+          <i class="fa-solid fa-spinner animate-spin text-amber-500 text-5xl"></i>
+          <p class="text-sm text-gray-600 font-medium animate-pulse mt-4">
+            {% translate "Uploading your file… This may take a moment." %}
+          </p>
         </div>
-
-        <!-- Modal Body -->
-        <div id="import-result" {% if task_id and not result_ready %}
-            hx-get="{% url 'microplanning:import_status' request.org.slug request.opportunity.opportunity_id %}?task_id={{ task_id }}"
-            hx-trigger="every 2s" hx-target="#import-parent" hx-swap="outerHTML" {% endif %}>
-
-            {% if task_id and not result_ready %}
-            <!-- Spinner -->
-            <div class="flex flex-col items-center justify-center mt-4">
-                <i class="fa-solid fa-spinner animate-spin text-amber-500 text-5xl"></i>
-                <p class="text-sm text-gray-600 font-medium animate-pulse mt-4">
-                    {% translate "Uploading your file… This may take a moment." %}
-                </p>
-            </div>
-
-            {% elif task_id and result_ready %}
-            <!-- Results -->
-            {% if result_data.errors %}
-            <div class="mt-4 border-t border-gray-100 pt-4">
-                <h3 class="text-sm font-semibold text-gray-900 flex items-center gap-2 mb-3">
-                    <i class="fa-solid fa-circle-exclamation text-red-500"></i>
-                    {% translate "No Work Areas Were Uploaded — CSV Contains Errors" %}
-                </h3>
-
-                <div class="max-h-64 overflow-y-auto custom-scrollbar border border-gray-200 rounded-md">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
-                            <tr>
-                                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                                    {% translate "Error Description" %}
-                                </th>
-                                <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase w-24">
-                                    {% translate "Row Numbers" %}
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody class="bg-white divide-y divide-gray-100">
-                            {% for msg, lines in result_data.errors.items %}
-                            <tr class="hover:bg-red-50/30 transition-colors">
-                                <td class="px-3 py-2 text-sm text-gray-700 leading-snug">{{ msg }}</td>
-                                <td class="px-3 py-2 text-right text-sm text-red-600 font-mono font-medium">
-                                    {{ lines|join:", " }}
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-
-                <p class="mt-3 text-sm text-gray-500 text-center">
-                    {% translate "Please fix the rows listed above and re-upload." %}
-                </p>
+      {% elif task_id and result_ready %}
+        <!-- Results -->
+        {% if result_data.errors %}
+          <div class="mt-4 border-t border-gray-100 pt-4">
+            <h3 class="text-sm font-semibold text-gray-900 flex items-center gap-2 mb-3">
+              <i class="fa-solid fa-circle-exclamation text-red-500"></i>
+              {% translate "No Work Areas Were Uploaded — CSV Contains Errors" %}
+            </h3>
+            <div class="max-h-64 overflow-y-auto custom-scrollbar border border-gray-200 rounded-md">
+              <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                  <tr>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">{% translate "Error Description" %}</th>
+                    <th class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase w-24">{% translate "Row Numbers" %}</th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-100">
+                  {% for msg, lines in result_data.errors.items %}
+                    <tr class="hover:bg-red-50/30 transition-colors">
+                      <td class="px-3 py-2 text-sm text-gray-700 leading-snug">{{ msg }}</td>
+                      <td class="px-3 py-2 text-right text-sm text-red-600 font-mono font-medium">{{ lines|join:", " }}</td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
             </div>
-
-            {% elif result_data.created %}
-            <div class="mt-4 border-t border-gray-100 pt-4 text-green-600 text-center">
-                <i class="fa-solid fa-circle-check"></i> {% translate "Successfully created" %} {{ result_data.created }} {% translate "work area(s)" %}
+            <p class="mt-3 text-sm text-gray-500 text-center">{% translate "Please fix the rows listed above and re-upload." %}</p>
+          </div>
+        {% elif result_data.created %}
+          <div class="mt-4 border-t border-gray-100 pt-4 text-green-600 text-center">
+            <i class="fa-solid fa-circle-check"></i> {% translate "Successfully created" %} {{ result_data.created }} {% translate "work area(s)" %}
+          </div>
+        {% endif %}
+        <div class="footer flex justify-end gap-2 p-4">
+          <a href="{% url 'microplanning:microplanning_home' request.org.slug request.opportunity.opportunity_id %}"
+             class="button button-md outline-style text-center">{% translate "Close" %}</a>
+        </div>
+      {% else %}
+        <!-- Upload Form -->
+        <form method="POST"
+              enctype="multipart/form-data"
+              action="{% url 'microplanning:upload_work_areas' request.org.slug request.opportunity.opportunity_id %}"
+              class="content">
+          {% csrf_token %}
+          <div class="modal-body flex flex-col items-center text-center p-6">
+            <div class="mb-2 text-indigo-600">
+              <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
             </div>
-            {% endif %}
-            <div class="footer flex justify-end gap-2 p-4">
-                <a href="{% url 'microplanning:microplanning_home' request.org.slug request.opportunity.opportunity_id %}"
-                    class="button button-md outline-style text-center">
-                    {% translate "Close" %}
-                </a>
+            <a href="{% url 'microplanning:upload_work_areas' request.org.slug request.opportunity.opportunity_id %}"
+               class="mt-6 flex items-center px-4 py-1.5 border border-gray-800 rounded-md text-sm font-medium hover:bg-gray-50 transition mb-4">
+              <i class="fa-solid fa-file-arrow-down mr-2"></i>
+              {% translate "Download Template" %}
+            </a>
+            <div class="w-full text-left mt-4" x-data="{ fileName: '' }">
+              <label class="block text-sm font-bold text-gray-700 mb-2">{% translate "Select CSV File" %}</label>
+              <div class="relative border-2 rounded-lg px-4 py-4 bg-gray-50 hover:border-brand-deep-purple">
+                <input type="file"
+                       name="csv_file"
+                       accept=".csv"
+                       required
+                       class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
+                       @change="fileName = $event.target.files[0]?.name || ''">
+                <span class="text-gray-500 text-sm"
+                      x-text="fileName || `{% translate 'No file chosen' %}`"></span>
+              </div>
+              <div class="mt-3 text-xs text-gray-600 space-y-1">
+                <p class="font-semibold">{% translate "CSV Column Requirements:" %}</p>
+                <ul class="list-disc ml-4">
+                  <li>{% translate "Area Slug – unique identifier for each work area should be unique in an opportunity" %}</li>
+                  <li>{% translate "Ward – name of the ward" %}</li>
+                  <li>{% translate "Centroid – longitude and latitude separated by space (e.g. 77.123 28.456)" %}</li>
+                  <li>{% translate "Boundary – Polygon in WKT format" %}</li>
+                  <li>{% translate "Building Count – positive integer" %}</li>
+                  <li>{% translate "Expected Visit Count – positive integer" %}</li>
+                  <li>{% translate "Max WAG – positive integer" %}</li>
+                  <li>{% translate "WAG Serial Number – Determines which order Connect Worker should visit the work area groups" %}</li>
+                  <li>{% translate "LGA – name of the LGA the work area is in" %}</li>
+                  <li>{% translate "State – name of the state the work area is in" %}</li>
+                </ul>
+              </div>
             </div>
-            {% else %}
-            <!-- Upload Form -->
-            <form method="POST" enctype="multipart/form-data"
-                action="{% url 'microplanning:upload_work_areas' request.org.slug request.opportunity.opportunity_id %}"
-                class="content">
-                {% csrf_token %}
-
-                <div class="modal-body flex flex-col items-center text-center p-6">
-
-                    <div class="mb-2 text-indigo-600">
-                        <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
-                    </div>
-
-                    <a href="{% url 'microplanning:upload_work_areas' request.org.slug request.opportunity.opportunity_id %}"
-                        class="mt-6 flex items-center px-4 py-1.5 border border-gray-800 rounded-md text-sm font-medium hover:bg-gray-50 transition mb-4">
-                        <i class="fa-solid fa-file-arrow-down mr-2"></i>
-                        {% translate "Download Template" %}
-                    </a>
-
-                    <div class="w-full text-left mt-4" x-data="{ fileName: '' }">
-                        <label class="block text-sm font-bold text-gray-700 mb-2">
-                            {% translate "Select CSV File" %}
-                        </label>
-
-                        <div class="relative border-2 rounded-lg px-4 py-4 bg-gray-50 hover:border-brand-deep-purple">
-                            <input type="file" name="csv_file" accept=".csv" required
-                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
-                                @change="fileName = $event.target.files[0]?.name || ''">
-                            <span class="text-gray-500 text-sm"
-                                x-text="fileName || `{% translate 'No file chosen' %}`"></span>
-                        </div>
-
-                        <div class="mt-3 text-xs text-gray-600 space-y-1">
-                            <p class="font-semibold">{% translate "CSV Column Requirements:" %}</p>
-                            <ul class="list-disc ml-4">
-                                <li>{% translate "Area Slug – unique identifier for each work area should be unique in an opportunity" %}
-                                </li>
-                                <li>{% translate "Ward – name of the ward" %}</li>
-                                <li>{% translate "Centroid – longitude and latitude separated by space (e.g. 77.123 28.456)" %}
-                                </li>
-                                <li>{% translate "Boundary – Polygon in WKT format" %}</li>
-                                <li>{% translate "Building Count – positive integer" %}</li>
-                                <li>{% translate "Expected Visit Count – positive integer" %}</li>
-                                <li>{% translate "Max WAG – positive integer" %}</li>
-                                <li>{% translate "WAG Serial Number – Determines which order Connect Worker should visit the work area groups" %}</li>
-                                <li>{% translate "LGA – name of the LGA the work area is in" %}</li>
-                                <li>{% translate "State – name of the state the work area is in" %}</li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="footer flex justify-end gap-2 p-4">
-                    <button type="button" @click="showImportWorkAreaModal = false"
-                        class="button button-md outline-style">
-                        {% translate "Close" %}
-                    </button>
-                    <button type="submit" class="button button-md primary-dark">
-                        {% translate "Upload" %}
-                    </button>
-                </div>
-            </form>
-
-            {% endif %}
-        </div>
+          </div>
+          <div class="footer flex justify-end gap-2 p-4">
+            <button type="button"
+                    @click="showImportWorkAreaModal = false"
+                    class="button button-md outline-style">{% translate "Close" %}</button>
+            <button type="submit" class="button button-md primary-dark">{% translate "Upload" %}</button>
+          </div>
+        </form>
+      {% endif %}
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/microplanning/map_handler.html b/commcare_connect/templates/microplanning/map_handler.html
index aef87b155b..4620dcbf51 100644
--- a/commcare_connect/templates/microplanning/map_handler.html
+++ b/commcare_connect/templates/microplanning/map_handler.html
@@ -1,5 +1,4 @@
 {% load i18n %}
-
 <script>
     document.addEventListener("alpine:init", () => {
         Alpine.data("mapController", () => ({
diff --git a/commcare_connect/templates/microplanning/work_area_form.html b/commcare_connect/templates/microplanning/work_area_form.html
index 2544d81426..504c05eddf 100644
--- a/commcare_connect/templates/microplanning/work_area_form.html
+++ b/commcare_connect/templates/microplanning/work_area_form.html
@@ -1,37 +1,32 @@
 {% load i18n crispy_forms_tags %}
-
 <div>
-    <div
-        class="w-full flex flex-col items-center justify-center gap-3 mb-6 text-lg font-semibold text-brand-deep-purple my-4">
-        <i class="fa-regular fa-pen-to-square text-2xl"></i>
-        <h1>{% translate "Modify Work Area" %}</h1>
-    </div>
-    <!-- Info alert -->
-    <div
-        class="flex items-start gap-3 p-4 bg-yellow-50 border border-yellow-300 text-yellow-800 rounded-md max-w-xl mx-auto mb-6">
-        <i class="fa-solid fa-circle-exclamation text-xl"></i>
-        <p class="text-sm">
-            {% translate "Changes to this Work Area will update coverage calculations" %}
-        </p>
-    </div>
-    <form
-        hx-post="{% url 'microplanning:modify_work_area' request.org.slug request.opportunity.opportunity_id work_area.id %}"
+  <div class="w-full flex flex-col items-center justify-center gap-3 mb-6 text-lg font-semibold text-brand-deep-purple my-4">
+    <i class="fa-regular fa-pen-to-square text-2xl"></i>
+    <h1>{% translate "Modify Work Area" %}</h1>
+  </div>
+  <!-- Info alert -->
+  <div class="flex items-start gap-3 p-4 bg-yellow-50 border border-yellow-300 text-yellow-800 rounded-md max-w-xl mx-auto mb-6">
+    <i class="fa-solid fa-circle-exclamation text-xl"></i>
+    <p class="text-sm">{% translate "Changes to this Work Area will update coverage calculations" %}</p>
+  </div>
+  <form hx-post="{% url 'microplanning:modify_work_area' request.org.slug request.opportunity.opportunity_id work_area.id %}"
         hx-indicator="#submit-spinner"
         hx-on:htmx:before-request="this.querySelectorAll('button').forEach(b => b.disabled = true)"
         hx-on:htmx:after-request="this.querySelectorAll('button').forEach(b => b.disabled = false)"
-        hx-target="#work-area-form" hx-swap="innerHTML">
-        {% crispy form %}
-        <div class="mt-6 flex justify-between gap-3">
-            <button type="button" @click="showWorkAreaEditModal = false" class="button button-md outline-style">
-                {% translate "Cancel" %}
-            </button>
-            <button type="submit" class="button button-md primary-dark flex items-center justify-center gap-2">
-                <span>{% translate "Save" %}</span>
-                <i id="submit-spinner"
-                    class="fa-solid fa-spinner animate-spin !hidden [&.htmx-request]:!inline-block htmx-indicator"></i>
-            </button>
-        </div>
-    </form>
+        hx-target="#work-area-form"
+        hx-swap="innerHTML">
+    {% crispy form %}
+    <div class="mt-6 flex justify-between gap-3">
+      <button type="button"
+              @click="showWorkAreaEditModal = false"
+              class="button button-md outline-style">{% translate "Cancel" %}</button>
+      <button type="submit"
+              class="button button-md primary-dark flex items-center justify-center gap-2">
+        <span>{% translate "Save" %}</span>
+        <i id="submit-spinner"
+           class="fa-solid fa-spinner animate-spin !hidden [&.htmx-request]:!inline-block htmx-indicator"></i>
+      </button>
+    </div>
+  </form>
 </div>
-
 {% include "components/tomselect_init.html" %}
diff --git a/commcare_connect/templates/opportunity/add_payment_units.html b/commcare_connect/templates/opportunity/add_payment_units.html
index 7cbbee454c..7f82066371 100644
--- a/commcare_connect/templates/opportunity/add_payment_units.html
+++ b/commcare_connect/templates/opportunity/add_payment_units.html
@@ -3,30 +3,31 @@
 {% load crispy_forms_tags %}
 {% load tailwind_filters %}
 {% load django_tables2 %}
-
-{% block title %}{{ request.org }} - Payment Units {% endblock %}
-
+{% block title %}{{ request.org }} - Payment Units{% endblock %}
 {% block content %}
-<div class="container md:max-w-screen-lg mx-auto flex flex-col gap-8">
-  {% include "opportunity/steps.html"  with step='step2' org_slug=request.org.slug pk=opportunity.opportunity_id %}
-  <div class="card_bg space-y-4 !p-2">
+  <div class="container md:max-w-screen-lg mx-auto flex flex-col gap-8">
+    {% include "opportunity/steps.html"  with step='step2' org_slug=request.org.slug pk=opportunity.opportunity_id %}
+    <div class="card_bg space-y-4 !p-2">
       <div hx-get="{% url 'opportunity:payment_unit_table' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}{% querystring %}"
-          hx-trigger="load" hx-swap="outerHTML">
-        {% include "tables/table_placeholder.html" with num_cols=4 %}
-      </div>
+           hx-trigger="load"
+           hx-swap="outerHTML">{% include "tables/table_placeholder.html" with num_cols=4 %}</div>
       <div class="flex justify-end gap-4" x-data="{ buttonDisabled: false }">
-        <button class="button button-md outline-style" type="button" hx-get="{% url 'opportunity:add_payment_unit' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}?partial=True" hx-target="#paymentunitform" hx-swap="beforeend  scroll:bottom"
-          x-on:click="buttonDisabled = true" x-bind:disabled="buttonDisabled">
+        <button class="button button-md outline-style"
+                type="button"
+                hx-get="{% url 'opportunity:add_payment_unit' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}?partial=True"
+                hx-target="#paymentunitform"
+                hx-swap="beforeend  scroll:bottom"
+                x-on:click="buttonDisabled = true"
+                x-bind:disabled="buttonDisabled">
           <i class="fa-solid fa-plus mr-2"></i>
           Add Payment Unit
         </button>
         <a href="{% if paymentunit_count %}{% url 'opportunity:finalize' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}{% else %}#{% endif %}"
-          class="button button-md primary-dark {% if not paymentunit_count %}pointer-events-none opacity-50 cursor-not-allowed{% endif %}"
-        >
+           class="button button-md primary-dark {% if not paymentunit_count %}pointer-events-none opacity-50 cursor-not-allowed{% endif %}">
           Setup Budget
         </a>
       </div>
-  </div>
+    </div>
     <div id="paymentunitform" class="card_bg"></div>
-</div>
+  </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/add_visits_existing_users.html b/commcare_connect/templates/opportunity/add_visits_existing_users.html
index 3a57a3b794..91d286e914 100644
--- a/commcare_connect/templates/opportunity/add_visits_existing_users.html
+++ b/commcare_connect/templates/opportunity/add_visits_existing_users.html
@@ -2,13 +2,10 @@
 {% load static %}
 {% load crispy_forms_tags %}
 {% load i18n %}
-
-
 {% block title %}{{ request.org }} - {{ opportunity.name }}{% endblock %}
 {% block content %}
-
-{% block extra_js %}
-<script>
+  {% block extra_js %}
+    <script>
    function opportunityBudgetComponent(initialTab, availableTabs) {
     // extract the available tabs.
     const tabs = availableTabs.map(t => t.key);
@@ -105,91 +102,86 @@
 }
 
 
-</script>
-{% endblock extra_js %}
-
-
-<div class="md:max-w-screen-lg mx-auto flex flex-col gap-6"
-    x-data="opportunityBudgetComponent('{{ request.GET.active_tab|default:"existing_workers" }}', {{ tabs|safe }})"
-    x-clock
-    x-effect="setTab(selectedTab)">
-  {% include "components/breadcrumbs.html" with path=path %}
-      <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14">
-        <ul class="tabs">
-          {% for tab in tabs %}
-          <li
-            @click="setTab('{{ tab.key }}')"
-            id="{{ tab.key }}-tab"
-            :class="{ 'active': selectedTab === '{{ tab.key }}' }"
-          >
+    </script>
+  {% endblock extra_js %}
+  <div class="md:max-w-screen-lg mx-auto flex flex-col gap-6"
+       x-data="opportunityBudgetComponent('{{ request.GET.active_tab|default:"existing_workers" }}', {{ tabs|safe }})"
+       x-clock
+       x-effect="setTab(selectedTab)">
+    {% include "components/breadcrumbs.html" with path=path %}
+    <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14">
+      <ul class="tabs">
+        {% for tab in tabs %}
+          <li @click="setTab('{{ tab.key }}')"
+              id="{{ tab.key }}-tab"
+              :class="{ 'active': selectedTab === '{{ tab.key }}' }">
             <span>{{ tab.label }}</span>
             <div x-show="selectedTab === '{{ tab.key }}'"></div>
           </li>
-          {% endfor %}
-        </ul>
-      </div>
-      <div class="mt-2 card_bg">
-        <!-- Add budget for existing users-->
-        <div x-show="selectedTab === 'existing_workers'">
-          <form method="post"
-                x-data="handleExistingBudgetComponent({{ budget_per_visit }})"
-          >
-            {% csrf_token %}
-
-            {% if form.non_field_errors %}
-              <div class="text-sm text-red-600 mt-1">
-                {% for error in form.non_field_errors %}
-                  {{ error }}
-                {% endfor %}
-              </div>
-            {% endif %}
-
-            {% if form.selected_users.errors %}
-            <div class="flex rounded-lg border border-red-300 bg-red-50 text-red-800 px-4 py-3 mb-4" role="alert">
+        {% endfor %}
+      </ul>
+    </div>
+    <div class="mt-2 card_bg">
+      <!-- Add budget for existing users-->
+      <div x-show="selectedTab === 'existing_workers'">
+        <form method="post"
+              x-data="handleExistingBudgetComponent({{ budget_per_visit }})">
+          {% csrf_token %}
+          {% if form.non_field_errors %}
+            <div class="text-sm text-red-600 mt-1">
+              {% for error in form.non_field_errors %}{{ error }}{% endfor %}
+            </div>
+          {% endif %}
+          {% if form.selected_users.errors %}
+            <div class="flex rounded-lg border border-red-300 bg-red-50 text-red-800 px-4 py-3 mb-4"
+                 role="alert">
               <span class="text-red-800 flex-1">{% trans "Please select workers to update." %}</span>
               <button type="button"
                       class="text-red-500 hover:text-red-700"
                       aria-label="{% trans 'Close' %}"
-                      @click="event.target.closest('div[role=alert]').remove()">
-                &times;
-              </button>
+                      @click="event.target.closest('div[role=alert]').remove()">&times;</button>
             </div>
-            {% endif %}
-
-            {% if opportunity_claims %}
+          {% endif %}
+          {% if opportunity_claims %}
             <h3 class="mb-2">{% trans "Update Visits for Existing Connect Workers" %}</h3>
             <table class="base-table">
               <thead>
-              <tr>
-                <th>
-                  <input type="checkbox" name="selected_users" id="select_all_users" value="{{ opp_claim.id }}"
-                         x-model="selected_users"
-                         @click="toggleSelectAll()"
-                         :checked="selected_users.length === {{ opportunity_claims|length }}"
-                         class="simple-checkbox {% if form.selected_users.errors %}is-invalid{% endif %}"/>
-                </th>
-                <th>{% trans "Name" %}</th>
-                <th>{% trans "Username" %}</th>
-                <th>{% trans "Max Visits" %}</th>
-                <th>{% trans "Used Visits" %}</th>
-                <th>{% trans "End date" %}</th>
-              </tr>
+                <tr>
+                  <th>
+                    <input type="checkbox"
+                           name="selected_users"
+                           id="select_all_users"
+                           value="{{ opp_claim.id }}"
+                           x-model="selected_users"
+                           @click="toggleSelectAll()"
+                           :checked="selected_users.length === {{ opportunity_claims|length }}"
+                           class="simple-checkbox {% if form.selected_users.errors %}is-invalid{% endif %}" />
+                  </th>
+                  <th>{% trans "Name" %}</th>
+                  <th>{% trans "Username" %}</th>
+                  <th>{% trans "Max Visits" %}</th>
+                  <th>{% trans "Used Visits" %}</th>
+                  <th>{% trans "End date" %}</th>
+                </tr>
               </thead>
               <tbody>
-              {% for opp_claim in opportunity_claims %}
-              <tr>
-                <td>
-                  <input type="checkbox" name="selected_users"  id="id_selected_users_{{ opp_claim.id }}" value="{{ opp_claim.id }}"
-                         x-model="selected_users"
-                         class="simple-checkbox {% if form.selected_users.errors %}is-invalid{% endif %}"/>
-                </td>
-                <td>{{ opp_claim.opportunity_access.user.name }}</td>
-                <td>{{ opp_claim.opportunity_access.user.username }}</td>
-                <td>{{ opp_claim.total_max_visits }}</td>
-                <td>{{ opp_claim.opportunity_access.visit_count }}</td>
-                <td>{{ opp_claim.end_date }}</td>
-              </tr>
-              {% endfor %}
+                {% for opp_claim in opportunity_claims %}
+                  <tr>
+                    <td>
+                      <input type="checkbox"
+                             name="selected_users"
+                             id="id_selected_users_{{ opp_claim.id }}"
+                             value="{{ opp_claim.id }}"
+                             x-model="selected_users"
+                             class="simple-checkbox {% if form.selected_users.errors %}is-invalid{% endif %}" />
+                    </td>
+                    <td>{{ opp_claim.opportunity_access.user.name }}</td>
+                    <td>{{ opp_claim.opportunity_access.user.username }}</td>
+                    <td>{{ opp_claim.total_max_visits }}</td>
+                    <td>{{ opp_claim.opportunity_access.visit_count }}</td>
+                    <td>{{ opp_claim.end_date }}</td>
+                  </tr>
+                {% endfor %}
               </tbody>
             </table>
             <div class="flex items-center gap-4 pt-6 border-t-2 border-gray-100">
@@ -197,100 +189,96 @@ <h3 class="mb-2">{% trans "Update Visits for Existing Connect Workers" %}</h3>
                 <div class="flex-1">
                   {{ form.number_of_visits|as_crispy_field }}
                   <div class="inline-flex space-x-4">
-                    {% for radio in form.adjustment_type %}
-                      {{ radio }}
-                    {% endfor %}
+                    {% for radio in form.adjustment_type %}{{ radio }}{% endfor %}
                   </div>
                   {% if form.adjustment_type.errors %}
                     <div class="text-sm text-red-600 mt-1">
-                      {% for error in form.adjustment_type.errors %}
-                        {{ error }}
-                      {% endfor %}
+                      {% for error in form.adjustment_type.errors %}{{ error }}{% endfor %}
                     </div>
                   {% endif %}
                 </div>
                 <div class="flex-1">{{ form.end_date|as_crispy_field }}</div>
               </div>
             </div>
-            <button type="button" class="button button-md primary-dark mt-4 float-end"
+            <button type="button"
+                    class="button button-md primary-dark mt-4 float-end"
                     @click="openModal(); end_date = document.getElementById('id_end_date').value">
               {% trans "Save" %}
             </button>
-            {% else %}
+          {% else %}
             <div class="text-center">
-              <b>{% trans "No Opportunity Claims yet." %}</b> <br/>
-              <a class="button button-md primary-dark mt-2" href="{% url "opportunity:list" org_slug=request.org.slug %}">{% trans "All Opportunities" %}</a>
+              <b>{% trans "No Opportunity Claims yet." %}</b>
+              <br />
+              <a class="button button-md primary-dark mt-2"
+                 href="{% url "opportunity:list" org_slug=request.org.slug %}">{% trans "All Opportunities" %}</a>
             </div>
-            {% endif %}
-
-
-            <!-- Modal -->
-            <div x-cloak x-show="modalOpen" x-transition.opacity class="modal-backdrop">
-              <div @click.away="closeModal()" x-transition class="modal">
-                <div class="header flex justify-between items-center">
-                  <h2 class="title">{% trans "Confirm" %}</h2>
-                  <button type="button" @click="closeModal()" class="button-icon" aria-label="{% trans 'Close' %}">
-                    <i class="fa-solid fa-xmark"></i>
-                  </button>
-                </div>
-                <div class="py-4">
-                  <!-- Validation Errors -->
-                  <div x-show="!isFormValid()" class="mb-4 p-3 bg-red-50 border border-red-300 rounded-lg">
-                    <div class="flex items-start">
-                      <i class="fa-solid fa-exclamation-circle text-red-600 mt-0.5 mr-2"></i>
-                      <div class="flex-1">
-                        <p class="text-sm font-semibold text-red-800 mb-1">{% trans "Please fix the following errors:" %}</p>
-                        <ul class="text-sm text-red-700">
-                          <template x-for="error in getValidationErrors()" :key="error">
-                            <li x-text="error"></li>
-                          </template>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-
-                  <!-- Success Messages -->
-                  <div x-show="isFormValid()">
-                    <div x-show="numberOfVisits && adjustmentType">
-                      You are about to <span x-text="adjustmentType === 'increase_visits' ? 'increase' : 'decrease'"></span>
-                      by <b x-text="totalVisits()"></b> visit(s) which will result in a
-                      budget <span x-text="adjustmentType === 'increase_visits' ? 'increase' : 'decrease'"></span> of
-                      <b x-text="calculatedBudget()"></b> to this Opportunity.
-                    </div>
-                    <div x-show="!!end_date" class="mt-2">
-                      {% trans "You are changing the end date for the selected workers to" %} <b
-                      x-text="new Date(end_date).toLocaleDateString()"></b>.
+          {% endif %}
+          <!-- Modal -->
+          <div x-cloak
+               x-show="modalOpen"
+               x-transition.opacity
+               class="modal-backdrop">
+            <div @click.away="closeModal()" x-transition class="modal">
+              <div class="header flex justify-between items-center">
+                <h2 class="title">{% trans "Confirm" %}</h2>
+                <button type="button"
+                        @click="closeModal()"
+                        class="button-icon"
+                        aria-label="{% trans 'Close' %}">
+                  <i class="fa-solid fa-xmark"></i>
+                </button>
+              </div>
+              <div class="py-4">
+                <!-- Validation Errors -->
+                <div x-show="!isFormValid()"
+                     class="mb-4 p-3 bg-red-50 border border-red-300 rounded-lg">
+                  <div class="flex items-start">
+                    <i class="fa-solid fa-exclamation-circle text-red-600 mt-0.5 mr-2"></i>
+                    <div class="flex-1">
+                      <p class="text-sm font-semibold text-red-800 mb-1">{% trans "Please fix the following errors:" %}</p>
+                      <ul class="text-sm text-red-700">
+                        <template x-for="error in getValidationErrors()" :key="error">
+                          <li x-text="error"></li>
+                        </template>
+                      </ul>
                     </div>
                   </div>
                 </div>
-                <div class="footer flex justify-end gap-4">
-                  <button type="button" @click="closeModal()" type="button" class="button button-md outline-style">
-                    {% trans "Close" %}
-                  </button>
-                  <button type="submit"
-                          class="button button-md primary-dark"
-                          :disabled="!isFormValid()">
-                    {% trans "Confirm" %}
-                  </button>
+                <!-- Success Messages -->
+                <div x-show="isFormValid()">
+                  <div x-show="numberOfVisits && adjustmentType">
+                    You are about to <span x-text="adjustmentType === 'increase_visits' ? 'increase' : 'decrease'"></span>
+                    by <b x-text="totalVisits()"></b> visit(s) which will result in a
+                    budget <span x-text="adjustmentType === 'increase_visits' ? 'increase' : 'decrease'"></span> of
+                    <b x-text="calculatedBudget()"></b> to this Opportunity.
+                  </div>
+                  <div x-show="!!end_date" class="mt-2">
+                    {% trans "You are changing the end date for the selected workers to" %} <b x-text="new Date(end_date).toLocaleDateString()"></b>.
+                  </div>
                 </div>
               </div>
+              <div class="footer flex justify-end gap-4">
+                <button type="button"
+                        @click="closeModal()"
+                        type="button"
+                        class="button button-md outline-style">{% trans "Close" %}</button>
+                <button type="submit"
+                        class="button button-md primary-dark"
+                        :disabled="!isFormValid()">{% trans "Confirm" %}</button>
+              </div>
             </div>
-          </form>
-        </div>
-
-        <!--Add budget for New Users-->
-        <div
-          x-show="selectedTab === 'new_workers'"
-        >
-          <h3 class="mb-2">{% trans "Add Budget for New Connect Workers" %}</h3>
-          <div
-            id="new_user_container"
-            hx-get="{% url 'opportunity:add_budget_new_users' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
-            hx-swap="innerHTML"
-            hx-trigger="loadNewUserForm from:body">
-            <h2 class="text-center text-gray-500 italic animate-pulse py-4">{% trans "Loading..." %}</h2>
           </div>
+        </form>
+      </div>
+      <!--Add budget for New Users-->
+      <div x-show="selectedTab === 'new_workers'">
+        <h3 class="mb-2">{% trans "Add Budget for New Connect Workers" %}</h3>
+        <div id="new_user_container"
+             hx-get="{% url 'opportunity:add_budget_new_users' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+             hx-swap="innerHTML"
+             hx-trigger="loadNewUserForm from:body">
+          <h2 class="text-center text-gray-500 italic animate-pulse py-4">{% trans "Loading..." %}</h2>
         </div>
-
       </div>
-{% endblock content %}
+    </div>
+  {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/assigned_task_edit_button.html b/commcare_connect/templates/opportunity/assigned_task_edit_button.html
index f05cb0e51e..26a9a17102 100644
--- a/commcare_connect/templates/opportunity/assigned_task_edit_button.html
+++ b/commcare_connect/templates/opportunity/assigned_task_edit_button.html
@@ -1,15 +1,12 @@
 {% load i18n %}
 {% if record.status == "assigned" %}
-<button
-    type="button"
-    class="button button-md outline-style"
-    hx-get="{% url 'opportunity:edit_assigned_task' table.org_slug table.opp_id record.pk %}"
-    hx-target="#edit-assigned-task-form"
-    hx-swap="innerHTML"
-    hx-select="unset"
-    @htmx:after-request="if ($event.detail.successful) {
-            showEditTaskModal = true; editTaskError = false
-        } else { editTaskError = true }">
+  <button type="button"
+          class="button button-md outline-style"
+          hx-get="{% url 'opportunity:edit_assigned_task' table.org_slug table.opp_id record.pk %}"
+          hx-target="#edit-assigned-task-form"
+          hx-swap="innerHTML"
+          hx-select="unset"
+          @htmx:after-request="if ($event.detail.successful) { showEditTaskModal = true; editTaskError = false } else { editTaskError = true }">
     <i class="fa-regular fa-pen-to-square mr-1"></i> {% translate "Edit" %}
-</button>
+  </button>
 {% endif %}
diff --git a/commcare_connect/templates/opportunity/assigned_task_list.html b/commcare_connect/templates/opportunity/assigned_task_list.html
index 89e002e3e4..0f5c304d75 100644
--- a/commcare_connect/templates/opportunity/assigned_task_list.html
+++ b/commcare_connect/templates/opportunity/assigned_task_list.html
@@ -2,100 +2,95 @@
 {% load i18n %}
 {% load crispy_forms_tags %}
 {% load render_table from django_tables2 %}
-
-{% block title %}{{ request.org }} - {{ opportunity.name }} - {% trans "Task List" %}{% endblock %}
-
+{% block title %}
+  {{ request.org }} - {{ opportunity.name }} - {% trans "Task List" %}
+{% endblock %}
 {% block content %}
-    <div class="container md:max-w-screen-2xl mx-auto flex flex-col gap-4"
-         x-data="{
-           showEditTaskModal: false,
-           editTaskError: false,
-           showCreateTaskModal: false,
-           ...selectableTable()
-         }">
-        {% include 'components/breadcrumbs.html' with path=path %}
-
-        <div class="flex flex-col gap-8 metric-container">
-            <div class="flex justify-between items-start">
-                <div class="flex flex-col gap-2">
-                    <h1 class="text-2xl font-medium text-white">{% trans "Task List" %}</h1>
-                    <p class="text-sm text-gray-100">{% trans "Manage Connect Worker actions and interventions" %}</p>
-                    <p class="text-xs text-gray-300">{% trans "General action tracking system" %}</p>
-                </div>
-                <div class="flex gap-4">
-                    <div class="flex flex-col items-center justify-center min-w-32 px-4 py-3 metric-card">
-                        <span class="text-2xl font-bold text-white">{{ total_tasks }}</span>
-                        <div class="flex flex-col items-center gap-1 mt-1">
-                            <i class="fa-solid fa-list-check text-white text-sm"></i>
-                            <span class="text-xs text-white">{% trans "Total Tasks" %}</span>
-                        </div>
-                    </div>
-                    <div class="flex flex-col items-center justify-center min-w-32 px-4 py-3 metric-card">
-                        <span class="text-2xl font-bold text-white">{{ open_tasks }}</span>
-                        <div class="flex flex-col items-center gap-1 mt-1">
-                            <i class="fa-regular fa-calendar text-white text-sm"></i>
-                            <span class="text-xs text-white">{% trans "Open Tasks" %}</span>
-                        </div>
-                    </div>
-                    <div class="flex flex-col items-center justify-center min-w-32 px-4 py-3 metric-card">
-                        <span class="text-2xl font-bold text-white">{{ complete_tasks }}</span>
-                        <div class="flex flex-col items-center gap-1 mt-1">
-                            <i class="fa-solid fa-circle-check text-white text-sm"></i>
-                            <span class="text-xs text-white">{% trans "Complete" %}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <div class="container md:max-w-screen-2xl mx-auto flex flex-col gap-4"
+       x-data="{ showEditTaskModal: false, editTaskError: false, showCreateTaskModal: false, ...selectableTable() }">
+    {% include 'components/breadcrumbs.html' with path=path %}
+    <div class="flex flex-col gap-8 metric-container">
+      <div class="flex justify-between items-start">
+        <div class="flex flex-col gap-2">
+          <h1 class="text-2xl font-medium text-white">{% trans "Task List" %}</h1>
+          <p class="text-sm text-gray-100">{% trans "Manage Connect Worker actions and interventions" %}</p>
+          <p class="text-xs text-gray-300">{% trans "General action tracking system" %}</p>
         </div>
-
-        <div x-show="editTaskError" x-cloak role="alert"
-          class="flex items-center justify-between p-4 rounded-lg border-[0.5px] bg-message-error text-message-error-text border-message-error-border">
-          <div class="flex items-center gap-2">
-            <i class="fa-solid fa-circle-exclamation"></i>
-            <span>{% trans "Failed to load task. Please try again." %}</span>
+        <div class="flex gap-4">
+          <div class="flex flex-col items-center justify-center min-w-32 px-4 py-3 metric-card">
+            <span class="text-2xl font-bold text-white">{{ total_tasks }}</span>
+            <div class="flex flex-col items-center gap-1 mt-1">
+              <i class="fa-solid fa-list-check text-white text-sm"></i>
+              <span class="text-xs text-white">{% trans "Total Tasks" %}</span>
+            </div>
           </div>
-          <button type="button" class="ml-4 text-xl font-light hover:font-normal focus:outline-none" aria-label="{% trans "Close" %}"
-            @click="editTaskError = false">&times;</button>
-        </div>
-
-        <div id="task-list-table" class="bg-white rounded-lg shadow-xs p-4">
-            <div class="flex gap-x-4 items-center justify-end mb-4">
-                {% if can_manage_tasks %}
-                <button type="button" class="button-icon shadow-sm" @click="showCreateTaskModal = true"
-                    x-tooltip.raw="{% trans 'Create Task' %}">
-                    <i class="fa-solid fa-plus text-brand-deep-purple"></i>
-                </button>
-                <form x-ref="deleteTasksForm"
-                    hx-post="{% url 'opportunity:delete_tasks' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
-                    hx-trigger="submit" class="hidden">
-                    {% csrf_token %}
-                    <template x-for="id in selected">
-                        <input type="hidden" name="task_ids" :value="id">
-                    </template>
-                </form>
-                <button type="button" class="button-icon hover:bg-red-600 hover:text-white shadow-sm" @click="$store.confirmModal.show({
-                                            title: '{% trans "Delete Tasks" %}',
-                                            message: `{% blocktrans %}Are you sure you want to delete __count__ task(s)? This action cannot be undone.{% endblocktrans %}`.replace('__count__', selected.length),
-                                            confirmBtnText: '{% trans "Delete" %}',
-                                            confirmBtnRed: true,
-                                            formRef: $refs.deleteTasksForm,
-                                        })" :disabled="selected.length === 0" x-tooltip.raw="{% trans 'Delete Task(s)' %}">
-                    <i class="fa-solid fa-trash"></i>
-                </button>
-                {% endif %}
-                {% include "components/filter_modal.html" with form_id="assignedTaskFilterForm" hx_target="#task-list-table" %}
+          <div class="flex flex-col items-center justify-center min-w-32 px-4 py-3 metric-card">
+            <span class="text-2xl font-bold text-white">{{ open_tasks }}</span>
+            <div class="flex flex-col items-center gap-1 mt-1">
+              <i class="fa-regular fa-calendar text-white text-sm"></i>
+              <span class="text-xs text-white">{% trans "Open Tasks" %}</span>
             </div>
-            {% render_table table %}
+          </div>
+          <div class="flex flex-col items-center justify-center min-w-32 px-4 py-3 metric-card">
+            <span class="text-2xl font-bold text-white">{{ complete_tasks }}</span>
+            <div class="flex flex-col items-center gap-1 mt-1">
+              <i class="fa-solid fa-circle-check text-white text-sm"></i>
+              <span class="text-xs text-white">{% trans "Complete" %}</span>
+            </div>
+          </div>
         </div>
-
+      </div>
+    </div>
+    <div x-show="editTaskError"
+         x-cloak
+         role="alert"
+         class="flex items-center justify-between p-4 rounded-lg border-[0.5px] bg-message-error text-message-error-text border-message-error-border">
+      <div class="flex items-center gap-2">
+        <i class="fa-solid fa-circle-exclamation"></i>
+        <span>{% trans "Failed to load task. Please try again." %}</span>
+      </div>
+      <button type="button"
+              class="ml-4 text-xl font-light hover:font-normal focus:outline-none"
+              aria-label="{% trans "Close" %}"
+              @click="editTaskError = false">&times;</button>
+    </div>
+    <div id="task-list-table" class="bg-white rounded-lg shadow-xs p-4">
+      <div class="flex gap-x-4 items-center justify-end mb-4">
         {% if can_manage_tasks %}
-            {% include 'tasks/new_task_modal.html' with modal_name="showCreateTaskModal" form=create_task_form %}
+          <button type="button"
+                  class="button-icon shadow-sm"
+                  @click="showCreateTaskModal = true"
+                  x-tooltip.raw="{% trans 'Create Task' %}">
+            <i class="fa-solid fa-plus text-brand-deep-purple"></i>
+          </button>
+          <form x-ref="deleteTasksForm"
+                hx-post="{% url 'opportunity:delete_tasks' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+                hx-trigger="submit"
+                class="hidden">
+            {% csrf_token %}
+            <template x-for="id in selected">
+              <input type="hidden" name="task_ids" :value="id">
+            </template>
+          </form>
+          <button type="button"
+                  class="button-icon hover:bg-red-600 hover:text-white shadow-sm"
+                  @click="$store.confirmModal.show({ title: '{% trans "Delete Tasks" %}', message: `{% blocktrans %}Are you sure you want to delete __count__ task(s)? This action cannot be undone.{% endblocktrans %}`.replace('__count__', selected.length), confirmBtnText: '{% trans "Delete" %}', confirmBtnRed: true, formRef: $refs.deleteTasksForm, })"
+                  :disabled="selected.length === 0"
+                  x-tooltip.raw="{% trans 'Delete Task(s)' %}">
+            <i class="fa-solid fa-trash"></i>
+          </button>
         {% endif %}
-        {% include 'components/confirm_modal.html' %}
-        {% include "opportunity/edit_assigned_task_modal.html" %}
+        {% include "components/filter_modal.html" with form_id="assignedTaskFilterForm" hx_target="#task-list-table" %}
+      </div>
+      {% render_table table %}
     </div>
+    {% if can_manage_tasks %}
+      {% include 'tasks/new_task_modal.html' with modal_name="showCreateTaskModal" form=create_task_form %}
+    {% endif %}
+    {% include 'components/confirm_modal.html' %}
+    {% include "opportunity/edit_assigned_task_modal.html" %}
+  </div>
 {% endblock %}
-
 {% block inline_javascript %}
-{% include "components/tables/selectable_table.html" %}
+  {% include "components/tables/selectable_table.html" %}
 {% endblock %}
diff --git a/commcare_connect/templates/opportunity/bulk_approval_reject_modal.html b/commcare_connect/templates/opportunity/bulk_approval_reject_modal.html
index b9015ab6ea..ad546d071a 100644
--- a/commcare_connect/templates/opportunity/bulk_approval_reject_modal.html
+++ b/commcare_connect/templates/opportunity/bulk_approval_reject_modal.html
@@ -2,77 +2,77 @@
      x-show="{{ modal_name }}"
      x-transition.opacity
      class="modal-backdrop">
-
   <div @click.away="{{ modal_name }} = false" x-transition class="modal">
-
     <!-- Header -->
     <div class="header flex justify-between items-center">
       <h2 class="title">{{ title }}</h2>
-      <button type="button" @click="{{ modal_name }} = false" class="button-icon" aria-label="Close">
+      <button type="button"
+              @click="{{ modal_name }} = false"
+              class="button-icon"
+              aria-label="Close">
         <i class="fa-solid fa-xmark"></i>
       </button>
     </div>
-
     <!-- Form -->
-   <form
-        hx-post="{{ form_action }}"
-        hx-swap="none"
-        @submit.stop.prevent="{{ modal_name }} = false"
-        hx-indicator="#spinner"
-        @htmx:afterRequest.window="{{ modal_name }} = false"
-    >
+    <form hx-post="{{ form_action }}"
+          hx-swap="none"
+          @submit.stop.prevent="{{ modal_name }} = false"
+          hx-indicator="#spinner"
+          @htmx:afterRequest.window="{{ modal_name }} = false">
       {% csrf_token %}
-
       <!-- Selected IDs -->
       <template x-for="id in selected" :key="id">
         <input type="hidden" name="visit_ids[]" :value="id">
       </template>
-
       <!-- Body -->
       <div class="py-4">
         {% if textarea_required %}
-          <textarea required class="base-textarea" rows="3" name="{{ textarea_name}}"
+          <textarea required
+                    class="base-textarea"
+                    rows="3"
+                    name="{{ textarea_name}}"
                     placeholder="{{ textarea_placeholder }}"></textarea>
         {% endif %}
-
         <div x-show="selected?.length > 0"
              class="mt-3 p-4 rounded-lg border bg-blue-50 border-blue-200">
-            <p class="text-sm text-gray-800 leading-relaxed flex flex-wrap items-center gap-2">
-                <strong><span x-text="`${selected.length} visit${selected.length !== 1 ? 's' : ''} selected —`"></span></strong>
-                <span x-show="selectedStatusCounts.approved" class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800">
-                <span x-text="selectedStatusCounts.approved"></span> approved
-                </span>
-                <span x-show="selectedStatusCounts.rejected" class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-800">
-                <span x-text="selectedStatusCounts.rejected"></span> rejected
-                </span>
-                <span x-show="selectedStatusCounts.pending" class="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">
-                <span x-text="selectedStatusCounts.pending"></span> pending
-                </span>
-                <span x-show="selectedStatusCounts.duplicate" class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
-                <span x-text="selectedStatusCounts.duplicate"></span> duplicate
-                </span>
-                <span x-show="selectedStatusCounts.overLimit" class="px-2 py-0.5 text-xs font-medium rounded-full bg-orange-100 text-orange-800">
-                <span x-text="selectedStatusCounts.overLimit"></span> overlimit
-                </span>
-            </p>
+          <p class="text-sm text-gray-800 leading-relaxed flex flex-wrap items-center gap-2">
+            <strong><span x-text="`${selected.length} visit${selected.length !== 1 ? 's' : ''} selected —`"></span></strong>
+            <span x-show="selectedStatusCounts.approved"
+                  class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800">
+              <span x-text="selectedStatusCounts.approved"></span> approved
+            </span>
+            <span x-show="selectedStatusCounts.rejected"
+                  class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-800">
+              <span x-text="selectedStatusCounts.rejected"></span> rejected
+            </span>
+            <span x-show="selectedStatusCounts.pending"
+                  class="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">
+              <span x-text="selectedStatusCounts.pending"></span> pending
+            </span>
+            <span x-show="selectedStatusCounts.duplicate"
+                  class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
+              <span x-text="selectedStatusCounts.duplicate"></span> duplicate
+            </span>
+            <span x-show="selectedStatusCounts.overLimit"
+                  class="px-2 py-0.5 text-xs font-medium rounded-full bg-orange-100 text-orange-800">
+              <span x-text="selectedStatusCounts.overLimit"></span> overlimit
+            </span>
+          </p>
           <p class="text-xs text-gray-600 mt-1">
             <em>{{ note_text }}</em>
           </p>
         </div>
       </div>
-
-      <div id="spinner" class="text-sm text-blue-600 htmx-indicator text-center mb-3">
-          <i class="fa-solid fa-spinner fa-spin mr-1"></i> Submitting...
+      <div id="spinner"
+           class="text-sm text-blue-600 htmx-indicator text-center mb-3">
+        <i class="fa-solid fa-spinner fa-spin mr-1"></i> Submitting...
       </div>
-
       <!-- Footer -->
       <div class="footer flex justify-end">
-        <button @click="{{ modal_name }} = false" type="button" class="button button-md outline-style">
-          Close
-        </button>
-        <button type="submit" class="button button-md {{ submit_btn_class }}">
-          {{ submit_btn_text }}
-        </button>
+        <button @click="{{ modal_name }} = false"
+                type="button"
+                class="button button-md outline-style">Close</button>
+        <button type="submit" class="button button-md {{ submit_btn_class }}">{{ submit_btn_text }}</button>
       </div>
     </form>
   </div>
diff --git a/commcare_connect/templates/opportunity/dashboard.html b/commcare_connect/templates/opportunity/dashboard.html
index 958d1963e1..4cb7d76e8c 100644
--- a/commcare_connect/templates/opportunity/dashboard.html
+++ b/commcare_connect/templates/opportunity/dashboard.html
@@ -1,131 +1,118 @@
 {% extends 'base.html' %}
 {% load i18n %}
-
 {% block title %}{{ request.org }} - {{ object.name }}{% endblock %}
-
 {% block content %}
-    <div x-data="{isTest: {{ object.is_test|yesno:'true,false,none' }}, showCatchmentImportModal: false, showCatchmentExportModal: false }"
-        class="container md:max-w-screen-2xl mx-auto flex flex-col gap-4">
-      {% include 'components/breadcrumbs.html' with path=path %}
-        {% if export_task_id %}
-          <div class="flex items-center justify-end">
-            <div
-              hx-get="{% url 'opportunity:export_status' request.org.slug export_task_id %}"
-              hx-target="this"
-              hx-trigger="load"
-              hx-swap="outerHTML"
-              class="flex items-center justify-center"
-            >
-              <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-blue-500"></div>
-              <span class="sr-only">Loading...</span>
-            </div>
-            <button type="button"
-                    class="ml-4 text-xl font-light hover:font-normal focus:outline-none"
-                    aria-label="Close"
-                    onclick="this.parentElement.remove()">
-                    <i class="fa-solid fa-circle-xmark text-brand-deep-purple"></i>
-            </button>
-          </div>
+  <div x-data="{isTest: {{ object.is_test|yesno:'true,false,none' }}, showCatchmentImportModal: false, showCatchmentExportModal: false }"
+       class="container md:max-w-screen-2xl mx-auto flex flex-col gap-4">
+    {% include 'components/breadcrumbs.html' with path=path %}
+    {% if export_task_id %}
+      <div class="flex items-center justify-end">
+        <div hx-get="{% url 'opportunity:export_status' request.org.slug export_task_id %}"
+             hx-target="this"
+             hx-trigger="load"
+             hx-swap="outerHTML"
+             class="flex items-center justify-center">
+          <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-blue-500"></div>
+          <span class="sr-only">Loading...</span>
+        </div>
+        <button type="button"
+                class="ml-4 text-xl font-light hover:font-normal focus:outline-none"
+                aria-label="Close"
+                onclick="this.parentElement.remove()">
+          <i class="fa-solid fa-circle-xmark text-brand-deep-purple"></i>
+        </button>
+      </div>
+    {% endif %}
+    <div class="flex flex-col gap-8 w-full rounded-lg p-4"
+         :class="isTest ? 'bg-white shadow-xs' : 'bg-brand-deep-purple'">
+      <div class="flex items-center relative"
+           :class="{'gap-6': isTest}"
+           x-data="{ isOpen: false }">
+        <h3 class="text-sm font-medium text-brand-sky flex-1">
+          {% if object.managed %}{{ object.program_name }}{% endif %}
+        </h3>
+        {% if object.is_test %}<span class="badge badge-md primary-light">Test</span>{% endif %}
+        {% if request.org_membership.is_viewer %}
+          <i class="fa-solid opacity-50"
+             :class="[isTest ? 'text-gray-800' : 'text-white', isOpen ? 'fa-xmark' : 'fa-bars']"></i>
+        {% else %}
+          <i class="fa-solid cursor-pointer"
+             :class="[isTest ? 'text-gray-800' : 'text-white', isOpen ? 'fa-xmark' : 'fa-bars']"
+             @click="isOpen = !isOpen"></i>
         {% endif %}
-        <div class="flex flex-col gap-8 w-full rounded-lg p-4" :class="isTest ? 'bg-white shadow-xs' : 'bg-brand-deep-purple'">
-          <div class="flex items-center relative" :class="{'gap-6': isTest}"  x-data="{ isOpen: false }">
-              <h3 class="text-sm font-medium text-brand-sky flex-1">{% if object.managed %}{{ object.program_name }}{% endif %}</h3>
-              {% if object.is_test %}
-              <span class="badge badge-md primary-light">Test</span>
-              {% endif %}
-              {% if request.org_membership.is_viewer %}
-               <i class="fa-solid opacity-50"
-                 :class="[isTest ? 'text-gray-800' : 'text-white', isOpen ? 'fa-xmark' : 'fa-bars']"
-                 ></i>
-              {% else %}
-                <i class="fa-solid cursor-pointer"
-                 :class="[isTest ? 'text-gray-800' : 'text-white', isOpen ? 'fa-xmark' : 'fa-bars']"
-                 @click="isOpen = !isOpen"></i>
-              {% endif %}
-              <!-- Dropdown Menu -->
-              {% include "opportunity/opportunity_menu.html" with request=request opportunity=object is_opportunity_pm=request.is_opportunity_pm %}
-          </div>
-          <div class="flex justify-between items-end">
-              <div class="flex flex-col gap-2">
-                  <h1 class="text-2xl font-medium block" :class="isTest? 'text-brand-deep-purple': 'text-white' ">{{ object.name }}</h1>
-                <p class="text-sm font-regular w-6/12" :class="isTest ? 'text-gray-600' : 'text-gray-100'">{{ object.description }}</p>
-              </div>
-              <div class="flex mt-6">
-
-              <!-- Opportunity resources: payment unit, learn app deliver app and its display modal-->
-                <div x-cloak class="flex gap-4" x-data="{
-                      showModal: false,
-                      selectedTab: '',
-                      selectedOption: '',
-                      historyLoaded: false,
-                  }"
-                     x-init="$watch('showModal', value => {
-                            document.body.classList.toggle('overflow-hidden', value);
-                             if (value && !historyLoaded) {
-                               $dispatch('tabShown');
-                               historyLoaded = true;
-                              }
-                        })">
-                      <!-- apps list -->
-                      {% for app in resources %}
-                      <div class="min-w-48 flex flex-row items-center justify-between px-4 h-10 bg-brand-indigo rounded cursor-pointer"
-                           @click="showModal = !showModal; ; selectedTab = '{{app.name}}'; selectedOption = '{{app.name}}'">
-                          <div class="flex items-center">
-                              <i class="fa-solid {{app.icon}} text-white text-sm"></i>
-                              <h3 class="text-sm font-normal text-white flex-1 pl-2 whitespace-nowrap">{{app.name}}</h3>
-                          </div>
-                          <h3 class="text-sm font-medium text-white">{{app.count}}</h3>
-                      </div>
-                      {% endfor %}
-
-                      <!-- Modal -->
-                      {% include "opportunity/opportunity_resource_modal.html" with opportunity=object %}
-                  </div>
+        <!-- Dropdown Menu -->
+        {% include "opportunity/opportunity_menu.html" with request=request opportunity=object is_opportunity_pm=request.is_opportunity_pm %}
+      </div>
+      <div class="flex justify-between items-end">
+        <div class="flex flex-col gap-2">
+          <h1 class="text-2xl font-medium block"
+              :class="isTest? 'text-brand-deep-purple': 'text-white' ">{{ object.name }}</h1>
+          <p class="text-sm font-regular w-6/12"
+             :class="isTest ? 'text-gray-600' : 'text-gray-100'">{{ object.description }}</p>
+        </div>
+        <div class="flex mt-6">
+          <!-- Opportunity resources: payment unit, learn app deliver app and its display modal-->
+          <div x-cloak
+               class="flex gap-4"
+               x-data="{ showModal: false, selectedTab: '', selectedOption: '', historyLoaded: false, }"
+               x-init="$watch('showModal', value => { document.body.classList.toggle('overflow-hidden', value); if (value && !historyLoaded) { $dispatch('tabShown'); historyLoaded = true; } })">
+            <!-- apps list -->
+            {% for app in resources %}
+              <div class="min-w-48 flex flex-row items-center justify-between px-4 h-10 bg-brand-indigo rounded cursor-pointer"
+                   @click="showModal = !showModal; ; selectedTab = '{{ app.name }}'; selectedOption = '{{ app.name }}'">
+                <div class="flex items-center">
+                  <i class="fa-solid {{ app.icon }} text-white text-sm"></i>
+                  <h3 class="text-sm font-normal text-white flex-1 pl-2 whitespace-nowrap">{{ app.name }}</h3>
+                </div>
+                <h3 class="text-sm font-medium text-white">{{ app.count }}</h3>
               </div>
+            {% endfor %}
+            <!-- Modal -->
+            {% include "opportunity/opportunity_resource_modal.html" with opportunity=object %}
           </div>
-          <!-- opportunity info -->
-            <div class="p-4 rounded-lg w-full" :class="isTest ? 'bg-slate-100' : 'bg-black/20'">
-              <div class="flex gap-2 w-full items-center justify-between">
-                  {% for data in basic_details %}
-                  <div class="flex gap-2 items-start">
-                    <div :class="isTest? 'infocard-dark' : 'infocard-light'">
-                          <i class="fa-solid {{data.icon}}"
-                             :class="{'!text-brand-cornflower-blue': isTest}"
-                          ></i>
-                          <div>
-                            <h6 :class="{ '!text-brand-cornflower-blue': isTest }">{{data.name}}</h6>
-                              <p>{{data.count}}</p>
-                          </div>
-                      </div>
-                  </div>
-
-                  <!--Separator Between basic detail columns-->
-                  {% if not forloop.last and forloop.counter != 2 %}
-                      <div class="w-0.5 h-10 {% if not object.is_test %}bg-white{% else %}bg-slate-200{% endif %} bg-opacity-30"></div>
-                  {% endif %}
-                  {% endfor %}
-                  <div>
-                    {% if object.is_active %}
-                        <span class="badge badge-md positive-dark">{% trans 'Active' %}</span>
-                    {% elif object.active and object.has_ended %}
-                        <span class="badge badge-md warning-dark">{% trans 'Ended' %}</span>
-                    {% else %}
-                        <span class="badge badge-md negative-dark">{% trans 'Inactive' %}</span>
-                    {% endif %}
-                  </div>
+        </div>
+      </div>
+      <!-- opportunity info -->
+      <div class="p-4 rounded-lg w-full"
+           :class="isTest ? 'bg-slate-100' : 'bg-black/20'">
+        <div class="flex gap-2 w-full items-center justify-between">
+          {% for data in basic_details %}
+            <div class="flex gap-2 items-start">
+              <div :class="isTest? 'infocard-dark' : 'infocard-light'">
+                <i class="fa-solid {{ data.icon }}"
+                   :class="{'!text-brand-cornflower-blue': isTest}"></i>
+                <div>
+                  <h6 :class="{ '!text-brand-cornflower-blue': isTest }">{{ data.name }}</h6>
+                  <p>{{ data.count }}</p>
+                </div>
               </div>
+            </div>
+            <!--Separator Between basic detail columns-->
+            {% if not forloop.last and forloop.counter != 2 %}
+              <div class="w-0.5 h-10 {% if not object.is_test %}bg-white{% else %}bg-slate-200{% endif %} bg-opacity-30"></div>
+            {% endif %}
+          {% endfor %}
+          <div>
+            {% if object.is_active %}
+              <span class="badge badge-md positive-dark">{% trans 'Active' %}</span>
+            {% elif object.active and object.has_ended %}
+              <span class="badge badge-md warning-dark">{% trans 'Ended' %}</span>
+            {% else %}
+              <span class="badge badge-md negative-dark">{% trans 'Inactive' %}</span>
+            {% endif %}
           </div>
-      </div>
-         <div>
-            <!--Skeletons -->
-           {% include "opportunity/opportunity_delivery_stat.html" with skeleton=True %}
-           {% include "opportunity/opportunity_worker_progress.html" with skeleton=True %}
-           {% include "opportunity/opportunity_funnel_progress.html" with skeleton=True %}
         </div>
-      {% url 'opportunity:catchment_area_export' org_slug=request.org.slug opp_id=opportunity.opportunity_id as catchment_export_url %}
-      {% include "components/worker_page/export_modal.html" with modal_name="showCatchmentExportModal" modal_title=_("Export Catchment Area") export_url=catchment_export_url export_form=export_form %}
-
-      {% url 'opportunity:catchment_area_import' request.org.slug opportunity.opportunity_id as catchment_import_url %}
-      {% include "components/worker_page/import_modal.html" with modal_name="showCatchmentImportModal" modal_title=_("Import Catchment Area") import_url=catchment_import_url input_name="catchments" input_help_text=_('The file must contain at least the "Area Name", "Active", "Latitude", "Longitude", "Site code" and "Radius" column.') %}
+      </div>
+    </div>
+    <div>
+      <!--Skeletons -->
+      {% include "opportunity/opportunity_delivery_stat.html" with skeleton=True %}
+      {% include "opportunity/opportunity_worker_progress.html" with skeleton=True %}
+      {% include "opportunity/opportunity_funnel_progress.html" with skeleton=True %}
     </div>
+    {% url 'opportunity:catchment_area_export' org_slug=request.org.slug opp_id=opportunity.opportunity_id as catchment_export_url %}
+    {% include "components/worker_page/export_modal.html" with modal_name="showCatchmentExportModal" modal_title=_("Export Catchment Area") export_url=catchment_export_url export_form=export_form %}
+    {% url 'opportunity:catchment_area_import' request.org.slug opportunity.opportunity_id as catchment_import_url %}
+    {% include "components/worker_page/import_modal.html" with modal_name="showCatchmentImportModal" modal_title=_("Import Catchment Area") import_url=catchment_import_url input_name="catchments" input_help_text=_('The file must contain at least the "Area Name", "Active", "Latitude", "Longitude", "Site code" and "Radius" column.') %}
+  </div>
 {% endblock %}
diff --git a/commcare_connect/templates/opportunity/deliver.html b/commcare_connect/templates/opportunity/deliver.html
index 1e70dd5e30..81af70a351 100644
--- a/commcare_connect/templates/opportunity/deliver.html
+++ b/commcare_connect/templates/opportunity/deliver.html
@@ -1,71 +1,83 @@
 {% extends "opportunity/worker_list_base.html" %}
 {% load i18n %}
 {% load crispy_forms_tags %}
-
 {% block tab_options %}
   {% include "components/filter_modal.html" with form_id="filterForm" hx_indicator="#loadingIndicator" %}
-  <div x-cloak x-data="{showVisitImportModal: false, showVisitExportModal: false}">
-    <button type="button" @click="showVisitImportModal = true" class="button-icon shadow-sm"
-            {% if request.org_membership.is_viewer %} disabled {% endif %}>
+  <div x-cloak
+       x-data="{showVisitImportModal: false, showVisitExportModal: false}">
+    <button type="button"
+            @click="showVisitImportModal = true"
+            class="button-icon shadow-sm"
+            {% if request.org_membership.is_viewer %}disabled{% endif %}>
       <i class="fa-solid fa-upload text-brand-deep-purple"></i>
     </button>
-    <button type="button" class="button-icon shadow-sm" @click="showVisitExportModal = true"
-            {% if request.org_membership.is_viewer %} disabled {% endif %}>
+    <button type="button"
+            class="button-icon shadow-sm"
+            @click="showVisitExportModal = true"
+            {% if request.org_membership.is_viewer %}disabled{% endif %}>
       <i class="fa-solid fa-download text-brand-deep-purple"></i>
     </button>
     {% block modals %}
-        {% url 'opportunity:visit_import' request.org.slug opportunity.opportunity_id as visit_import_url %}
-        {% include "components/worker_page/import_modal.html" with modal_name="showVisitImportModal" modal_title=export_user_visit_title import_url=import_export_delivery_urls.import_url input_name="visits" input_help_text=import_visit_helper_text %}
-
-        <!--User visit export modal-->
-        <div x-show="showVisitExportModal" class="modal-backdrop">
-            <div x-clock x-data="{ selectedForm: 'nm_review' }"  class="modal">
-                <div class="header text-lg font-semibold text-brand-deep-purple">
-                  <h1>Export</h1>
-                  <button @click="showVisitExportModal = false">
-                    <i class="fa-solid fa-xmark text-xl"></i>
-                  </button>
-                </div>
-
-                <form class="content" method="post"
-                      :action="selectedForm === 'nm_review' ? '{{ import_export_delivery_urls.export_url_for_nm }}' : '{{ import_export_delivery_urls.export_url_for_pm }}'">
-                  {% csrf_token %}
-                  <div class="modal-body">
-
-                    <div class="mb-4">
-                      <label class="inline-flex items-center">
-                        <input type="radio" name="form_type" value="nm_review" x-model="selectedForm"  @change="htmx.process($root)"
-                               class="text-primary">
-                        <span class="ml-2">User Visits Sheet</span>
-                      </label>
-                      {% if opportunity.managed %}
-                        <label class="inline-flex items-center mr-4">
-                          <input type="radio" name="form_type" value="pm_review" x-model="selectedForm"  @change="htmx.process($root)"
-                                 class="text-primary" checked>
-                          <span class="ml-2">PM Review Sheet</span>
-                        </label>
-                      {% endif %}
-                    </div>
-
-                    <!-- VisitExportForm -->
-                    <template x-if="selectedForm === 'nm_review'">
-                      <div>{% crispy visit_export_form %}</div>
-                    </template>
-
-                    <!-- ReviewVisitExportForm -->
-                    <template x-if="selectedForm === 'pm_review'">
-                      <div>{% crispy review_visit_export_form %} </div>
-                    </template>
-
-                  </div>
-
-                  <div class="footer">
-                    <button type="button" @click="showVisitExportModal = false" class="button button-md outline-style">Close</button>
-                    <button type="submit" disabled id="export-submit-btn" class="button button-md primary-dark">Export</button>
-                  </div>
-                </form>
-            </div>
+      {% url 'opportunity:visit_import' request.org.slug opportunity.opportunity_id as visit_import_url %}
+      {% include "components/worker_page/import_modal.html" with modal_name="showVisitImportModal" modal_title=export_user_visit_title import_url=import_export_delivery_urls.import_url input_name="visits" input_help_text=import_visit_helper_text %}
+      <!--User visit export modal-->
+      <div x-show="showVisitExportModal" class="modal-backdrop">
+        <div x-clock x-data="{ selectedForm: 'nm_review' }"  class="modal">
+          <div class="header text-lg font-semibold text-brand-deep-purple">
+            <h1>Export</h1>
+            <button @click="showVisitExportModal = false">
+              <i class="fa-solid fa-xmark text-xl"></i>
+            </button>
           </div>
+          <form class="content"
+                method="post"
+                :action="selectedForm === 'nm_review' ? '{{ import_export_delivery_urls.export_url_for_nm }}' : '{{ import_export_delivery_urls.export_url_for_pm }}'">
+            {% csrf_token %}
+            <div class="modal-body">
+              <div class="mb-4">
+                <label class="inline-flex items-center">
+                  <input type="radio"
+                         name="form_type"
+                         value="nm_review"
+                         x-model="selectedForm"
+                         @change="htmx.process($root)"
+                         class="text-primary">
+                  <span class="ml-2">User Visits Sheet</span>
+                </label>
+                {% if opportunity.managed %}
+                  <label class="inline-flex items-center mr-4">
+                    <input type="radio"
+                           name="form_type"
+                           value="pm_review"
+                           x-model="selectedForm"
+                           @change="htmx.process($root)"
+                           class="text-primary"
+                           checked>
+                    <span class="ml-2">PM Review Sheet</span>
+                  </label>
+                {% endif %}
+              </div>
+              <!-- VisitExportForm -->
+              <template x-if="selectedForm === 'nm_review'">
+                <div>{% crispy visit_export_form %}</div>
+              </template>
+              <!-- ReviewVisitExportForm -->
+              <template x-if="selectedForm === 'pm_review'">
+                <div>{% crispy review_visit_export_form %}</div>
+              </template>
+            </div>
+            <div class="footer">
+              <button type="button"
+                      @click="showVisitExportModal = false"
+                      class="button button-md outline-style">Close</button>
+              <button type="submit"
+                      disabled
+                      id="export-submit-btn"
+                      class="button button-md primary-dark">Export</button>
+            </div>
+          </form>
+        </div>
+      </div>
     {% endblock %}
   </div>
 {% endblock %}
diff --git a/commcare_connect/templates/opportunity/edit_assigned_task_form.html b/commcare_connect/templates/opportunity/edit_assigned_task_form.html
index 1a26cb6f66..79d7089d50 100644
--- a/commcare_connect/templates/opportunity/edit_assigned_task_form.html
+++ b/commcare_connect/templates/opportunity/edit_assigned_task_form.html
@@ -1,15 +1,12 @@
 {% load crispy_forms_tags i18n %}
-
 <div class="rounded-lg bg-gray-50 p-3 mb-4">
-    <p class="font-medium text-gray-900">{{ task_type_name }}</p>
-    <p class="text-sm text-gray-500">{% translate "Due:" %} {{ current_due_date }}</p>
+  <p class="font-medium text-gray-900">{{ task_type_name }}</p>
+  <p class="text-sm text-gray-500">{% translate "Due:" %} {{ current_due_date }}</p>
 </div>
-<form
-    id="edit-assigned-task-form-el"
-    hx-post="{{ hx_post_url }}"
-    hx-target="#edit-assigned-task-form"
-    hx-swap="innerHTML"
-    method="post"
->
-    {% crispy form %}
+<form id="edit-assigned-task-form-el"
+      hx-post="{{ hx_post_url }}"
+      hx-target="#edit-assigned-task-form"
+      hx-swap="innerHTML"
+      method="post">
+  {% crispy form %}
 </form>
diff --git a/commcare_connect/templates/opportunity/edit_assigned_task_modal.html b/commcare_connect/templates/opportunity/edit_assigned_task_modal.html
index c55a0ca3b9..48151da893 100644
--- a/commcare_connect/templates/opportunity/edit_assigned_task_modal.html
+++ b/commcare_connect/templates/opportunity/edit_assigned_task_modal.html
@@ -1,38 +1,39 @@
 {% load i18n %}
-
-<div x-show="showEditTaskModal" x-cloak x-transition.opacity class="modal-backdrop" role="dialog" aria-modal="true"
-    aria-labelledby="edit-task-modal-title"
-    @keydown.escape.window="showEditTaskModal = false">
-    <div @click.outside="showEditTaskModal = false" class="modal">
-
-        <div class="flex justify-between items-start mb-4">
-            <div>
-                <div class="flex items-center gap-3 mb-1">
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 shrink-0">
-                        <i class="fa-solid fa-pen-to-square" aria-hidden="true"></i>
-                    </div>
-                    <h2 id="edit-task-modal-title" class="text-xl font-bold text-brand-deep-purple">
-                        {% translate "Edit Task" %}
-                    </h2>
-                </div>
-                <p class="text-sm text-gray-500 mt-1">
-                    {% translate "You can modify the end date for this task." %}
-                </p>
-            </div>
-            <button type="button" class="button-icon" @click="showEditTaskModal = false"
-                    aria-label="{% translate 'Close dialog' %}">
-                <i class="fa-solid fa-xmark cursor-pointer" aria-hidden="true"></i>
-            </button>
-        </div>
-        <div id="edit-assigned-task-form">
-        </div>
-        <div class="flex justify-between gap-3 pt-2">
-            <button type="button" @click="showEditTaskModal = false" class="button button-md outline-style flex-1">
-                {% translate "Cancel" %}
-            </button>
-            <button type="submit" form="edit-assigned-task-form-el" class="button button-md primary-dark flex-1">
-                {% translate "Save Changes" %}
-            </button>
+<div x-show="showEditTaskModal"
+     x-cloak
+     x-transition.opacity
+     class="modal-backdrop"
+     role="dialog"
+     aria-modal="true"
+     aria-labelledby="edit-task-modal-title"
+     @keydown.escape.window="showEditTaskModal = false">
+  <div @click.outside="showEditTaskModal = false" class="modal">
+    <div class="flex justify-between items-start mb-4">
+      <div>
+        <div class="flex items-center gap-3 mb-1">
+          <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 shrink-0">
+            <i class="fa-solid fa-pen-to-square" aria-hidden="true"></i>
+          </div>
+          <h2 id="edit-task-modal-title"
+              class="text-xl font-bold text-brand-deep-purple">{% translate "Edit Task" %}</h2>
         </div>
+        <p class="text-sm text-gray-500 mt-1">{% translate "You can modify the end date for this task." %}</p>
+      </div>
+      <button type="button"
+              class="button-icon"
+              @click="showEditTaskModal = false"
+              aria-label="{% translate 'Close dialog' %}">
+        <i class="fa-solid fa-xmark cursor-pointer" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div id="edit-assigned-task-form"></div>
+    <div class="flex justify-between gap-3 pt-2">
+      <button type="button"
+              @click="showEditTaskModal = false"
+              class="button button-md outline-style flex-1">{% translate "Cancel" %}</button>
+      <button type="submit"
+              form="edit-assigned-task-form-el"
+              class="button button-md primary-dark flex-1">{% translate "Save Changes" %}</button>
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/opportunity/edit_task_type_form.html b/commcare_connect/templates/opportunity/edit_task_type_form.html
index a0c07ee97f..787c74eeba 100644
--- a/commcare_connect/templates/opportunity/edit_task_type_form.html
+++ b/commcare_connect/templates/opportunity/edit_task_type_form.html
@@ -1,11 +1,8 @@
 {% load crispy_forms_tags %}
-
-<form
-    id="edit-task-form-el"
-    hx-post="{{ hx_post_url }}"
-    hx-target="#edit-task-form"
-    hx-swap="innerHTML"
-    method="post"
->
-    {% crispy form %}
+<form id="edit-task-form-el"
+      hx-post="{{ hx_post_url }}"
+      hx-target="#edit-task-form"
+      hx-swap="innerHTML"
+      method="post">
+  {% crispy form %}
 </form>
diff --git a/commcare_connect/templates/opportunity/edit_task_type_modal.html b/commcare_connect/templates/opportunity/edit_task_type_modal.html
index b7da98413e..1c5c62578e 100644
--- a/commcare_connect/templates/opportunity/edit_task_type_modal.html
+++ b/commcare_connect/templates/opportunity/edit_task_type_modal.html
@@ -1,24 +1,29 @@
 {% load i18n %}
-
-<div x-show="showEditTaskTypeModal" x-cloak x-transition.opacity class="modal-backdrop" role="dialog" aria-modal="true"
-    @keydown.escape.window="showEditTaskTypeModal = false">
-    <div @click.outside="showEditTaskTypeModal = false" class="modal w-full !max-w-2xl">
-        <div class="header flex justify-between items-center">
-            <h2 class="title">{% translate "Edit Task Type" %}</h2>
-            <button @click="showEditTaskTypeModal = false" class="button-icon" aria-label="{% translate 'Close' %}">
-                <i class="fa-solid fa-xmark text-xl"></i>
-            </button>
-        </div>
-        <div id="edit-task-form" class="modal-body">
-            {# htmx will load the edit form here #}
-        </div>
-        <div class="footer flex justify-end gap-3">
-            <button type="button" @click="showEditTaskTypeModal = false" class="button button-md outline-style">
-                {% translate "Cancel" %}
-            </button>
-            <button type="submit" form="edit-task-form-el" class="button button-md primary-dark">
-                {% translate "Save" %}
-            </button>
-        </div>
+<div x-show="showEditTaskTypeModal"
+     x-cloak
+     x-transition.opacity
+     class="modal-backdrop"
+     role="dialog"
+     aria-modal="true"
+     @keydown.escape.window="showEditTaskTypeModal = false">
+  <div @click.outside="showEditTaskTypeModal = false"
+       class="modal w-full !max-w-2xl">
+    <div class="header flex justify-between items-center">
+      <h2 class="title">{% translate "Edit Task Type" %}</h2>
+      <button @click="showEditTaskTypeModal = false"
+              class="button-icon"
+              aria-label="{% translate 'Close' %}">
+        <i class="fa-solid fa-xmark text-xl"></i>
+      </button>
     </div>
+    <div id="edit-task-form" class="modal-body">{# htmx will load the edit form here #}</div>
+    <div class="footer flex justify-end gap-3">
+      <button type="button"
+              @click="showEditTaskTypeModal = false"
+              class="button button-md outline-style">{% translate "Cancel" %}</button>
+      <button type="submit"
+              form="edit-task-form-el"
+              class="button button-md primary-dark">{% translate "Save" %}</button>
+    </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/opportunity/email/automated_invoice_created.html b/commcare_connect/templates/opportunity/email/automated_invoice_created.html
index 2f219b043c..bdbecfce49 100644
--- a/commcare_connect/templates/opportunity/email/automated_invoice_created.html
+++ b/commcare_connect/templates/opportunity/email/automated_invoice_created.html
@@ -1,40 +1,36 @@
 {% extends "email/base.html" %}
 {% load i18n %}
-
 {% block content %}
-<p>{% trans "Hi," %}</p>
-
-<p>
+  <p>{% trans "Hi," %}</p>
+  <p>
     {% trans "The following invoices have been auto-created for your workspace" %} <strong>{{ organization.name }}</strong>.
-</p>
-
-<p><strong>{% trans "Invoices Details" %}</strong></p>
-<table style="border-collapse: collapse; width: 100%; max-width: 600px;">
+  </p>
+  <p>
+    <strong>{% trans "Invoices Details" %}</strong>
+  </p>
+  <table style="border-collapse: collapse; width: 100%; max-width: 600px;">
     <thead>
-        <tr>
-            <th style="border: 1px solid #dddddd; text-align: left; padding: 8px">{% trans "Opportunity" %}</th>
-            <th style="border: 1px solid #dddddd; text-align: left; padding: 8px">{% trans "Invoice Number" %}</th>
-            <th style="border: 1px solid #dddddd; text-align: left; padding: 8px">{% trans "Invoice Amount" %}</th>
-            <th style="border: 1px solid #dddddd; text-align: left; padding: 8px"></th>
-        </tr>
+      <tr>
+        <th style="border: 1px solid #dddddd; text-align: left; padding: 8px">{% trans "Opportunity" %}</th>
+        <th style="border: 1px solid #dddddd; text-align: left; padding: 8px">{% trans "Invoice Number" %}</th>
+        <th style="border: 1px solid #dddddd; text-align: left; padding: 8px">{% trans "Invoice Amount" %}</th>
+        <th style="border: 1px solid #dddddd; text-align: left; padding: 8px"></th>
+      </tr>
     </thead>
     <tbody>
-        {% for invoice_item in invoices_items %}
+      {% for invoice_item in invoices_items %}
         <tr>
-            <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ invoice_item.opportunity.name }}</td>
-            <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ invoice_item.invoice.invoice_number }}</td>
-            <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ invoice_item.opportunity.currency_code }} {{ invoice_item.invoice.amount }}</td>
-            <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">
-                <a href="{{ invoice_item.invoice_url }}">
-                    {% trans "View Invoice" %}
-                </a>
-            </td>
+          <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ invoice_item.opportunity.name }}</td>
+          <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ invoice_item.invoice.invoice_number }}</td>
+          <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">
+            {{ invoice_item.opportunity.currency_code }} {{ invoice_item.invoice.amount }}
+          </td>
+          <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">
+            <a href="{{ invoice_item.invoice_url }}">{% trans "View Invoice" %}</a>
+          </td>
         </tr>
-        {% endfor %}
+      {% endfor %}
     </tbody>
-</table>
-
-<p>
-    {% trans "If you have any questions, please contact your Program Manager." %}
-</p>
+  </table>
+  <p>{% trans "If you have any questions, please contact your Program Manager." %}</p>
 {% endblock %}
diff --git a/commcare_connect/templates/opportunity/email/invoice_paid.html b/commcare_connect/templates/opportunity/email/invoice_paid.html
index 9b6933a1c5..be7b710e37 100644
--- a/commcare_connect/templates/opportunity/email/invoice_paid.html
+++ b/commcare_connect/templates/opportunity/email/invoice_paid.html
@@ -1,38 +1,37 @@
 {% extends "email/base.html" %}
 {% load i18n %}
-
 {% block content %}
-<p>{% trans "Hi," %}</p>
-
-<p>
+  <p>{% trans "Hi," %}</p>
+  <p>
     {% blocktrans with opp_name=opportunity.name %}
         Your invoice for the Opportunity <strong>{{ opp_name }}</strong> has been <strong>paid</strong>.
     {% endblocktrans %}
-</p>
-
-<p><strong>{% trans "Invoice Details" %}</strong></p>
-<ul>
-    <li><strong>{% trans "Invoice Number" %}:</strong> {{ invoice.invoice_number }}</li>
-    <li><strong>{% trans "Amount Paid" %}:</strong> {{ opportunity.currency_code }} {{ invoice.amount }}</li>
-    <li><strong>{% trans "Invoice Date" %}:</strong> {{ invoice.date }}</li>
-    <li><strong>{% trans "Payment Date" %}:</strong> {{ invoice.payment.created_at }}</li>
-</ul>
-
-<p style="margin: 24px 0;">
+  </p>
+  <p>
+    <strong>{% trans "Invoice Details" %}</strong>
+  </p>
+  <ul>
+    <li>
+      <strong>{% trans "Invoice Number" %}:</strong> {{ invoice.invoice_number }}
+    </li>
+    <li>
+      <strong>{% trans "Amount Paid" %}:</strong> {{ opportunity.currency_code }} {{ invoice.amount }}
+    </li>
+    <li>
+      <strong>{% trans "Invoice Date" %}:</strong> {{ invoice.date }}
+    </li>
+    <li>
+      <strong>{% trans "Payment Date" %}:</strong> {{ invoice.payment.created_at }}
+    </li>
+  </ul>
+  <p style="margin: 24px 0;">
     <a href="{{ invoice_url }}"
-       style="
-            background-color: #3843d0;
-            color: #ffffff;
-            padding: 10px 15px;
-            text-decoration: none;
-            border-radius: 6px;
-            display: inline-block;
-       ">
-        {% trans "View Invoice" %}
-    </a>
-</p>
-
-<p>
-    {% trans "If you have any questions, please contact your Program Manager." %}
-</p>
+       style="background-color: #3843d0;
+              color: #ffffff;
+              padding: 10px 15px;
+              text-decoration: none;
+              border-radius: 6px;
+              display: inline-block">{% trans "View Invoice" %}</a>
+  </p>
+  <p>{% trans "If you have any questions, please contact your Program Manager." %}</p>
 {% endblock %}
diff --git a/commcare_connect/templates/opportunity/extendable_payment_unit_row.html b/commcare_connect/templates/opportunity/extendable_payment_unit_row.html
index f43086ee25..c804d238e8 100644
--- a/commcare_connect/templates/opportunity/extendable_payment_unit_row.html
+++ b/commcare_connect/templates/opportunity/extendable_payment_unit_row.html
@@ -1,45 +1,34 @@
 {% load i18n %}
-
 <div class="flex justify-between items-center">
-    <span>{{ count }}</span>
-    <div x-data="{ expanded: false }">
-        {% if edit_url %}
-            <a href="{{ edit_url }}"><i class="fa-solid fa-pencil me-2"></i></a>
-        {% endif %}
-        <button
-                @click="expanded = true; $el.closest('tr').insertAdjacentHTML('afterend', $refs.detailRow.innerHTML)"
-                x-show="!expanded">
-            <i class="fa-solid fa-chevron-down"></i>
-        </button>
-        <button
-                @click.prevent="
-                    const detailRow = $el.closest('tr').nextElementSibling;
-                    if (detailRow && detailRow.classList.contains('detail-row')) {
-                        detailRow.remove();
-                    }
-                    expanded = false
-                "
-                x-show="expanded">
-            <i class="fa-solid fa-chevron-up"></i>
-        </button>
-        <template x-ref="detailRow">
-            <tr class="detail-row">
-                <td colspan="8">
-                    <div class="p-3 bg-slate-100 rounded-lg">
-                        <div class="mb-4 font-bold">Deliver Units</div>
-                        <div class="flex flex-col gap-2">
-                            {% for unit in deliver_units %}
-                                <div class="w-full">
-                                    <span>{{ unit.name }}</span>
-                                    {% if unit.optional %}
-                                        (<i>{% translate "Optional" %}</i>)
-                                    {% endif %}
-                                </div>
-                            {% endfor %}
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </template>
-    </div>
+  <span>{{ count }}</span>
+  <div x-data="{ expanded: false }">
+    {% if edit_url %}<a href="{{ edit_url }}"><i class="fa-solid fa-pencil me-2"></i></a>{% endif %}
+    <button @click="expanded = true; $el.closest('tr').insertAdjacentHTML('afterend', $refs.detailRow.innerHTML)"
+            x-show="!expanded">
+      <i class="fa-solid fa-chevron-down"></i>
+    </button>
+    <button @click.prevent=" const detailRow = $el.closest('tr').nextElementSibling; if (detailRow && detailRow.classList.contains('detail-row')) { detailRow.remove(); } expanded = false "
+            x-show="expanded">
+      <i class="fa-solid fa-chevron-up"></i>
+    </button>
+    <template x-ref="detailRow">
+      <tr class="detail-row">
+        <td colspan="8">
+          <div class="p-3 bg-slate-100 rounded-lg">
+            <div class="mb-4 font-bold">Deliver Units</div>
+            <div class="flex flex-col gap-2">
+              {% for unit in deliver_units %}
+                <div class="w-full">
+                  <span>{{ unit.name }}</span>
+                  {% if unit.optional %}
+                    (<i>{% translate "Optional" %}</i>)
+                  {% endif %}
+                </div>
+              {% endfor %}
+            </div>
+          </div>
+        </td>
+      </tr>
+    </template>
+  </div>
 </div>
diff --git a/commcare_connect/templates/opportunity/invoice_base.html b/commcare_connect/templates/opportunity/invoice_base.html
index 53c1fe05ec..2b64f0aedd 100644
--- a/commcare_connect/templates/opportunity/invoice_base.html
+++ b/commcare_connect/templates/opportunity/invoice_base.html
@@ -1,44 +1,37 @@
 {% extends "base.html" %}
 {% load django_tables2 %}
-
-
 {% block content %}
-
-{% include 'components/breadcrumbs.html' with path=path %}
-
-
-<p class="my-5 text-sm font-medium text-brand-deep-purple">{{ opportunity.name }}</p>
-<div class="flex flex-col w-full gap-2">
-
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <p class="my-5 text-sm font-medium text-brand-deep-purple">{{ opportunity.name }}</p>
+  <div class="flex flex-col w-full gap-2">
     <div class="relative flex items-center justify-between w-full px-4 mx-auto rounded-lg shadow-sm bg-slate-50 h-14">
-        {% with list_view_name='opportunity:invoice_list' report_view_name='opportunity:payment_report' current_view_name=request.resolver_match.view_name %}
-            <ul class="tabs">
-                <li class="{% if current_view_name == list_view_name %}active{% endif %}">
-                    <a href="{% url list_view_name org_slug=request.org.slug opp_id=opportunity.opportunity_id %}" class="absolute inset-0"></a> {# Invisible link overlay for click #}
-                    <span>All Invoices</span>
-                    {% if current_view_name == list_view_name %}<div></div>{% endif %}
-                </li>
-
-                <li class="{% if current_view_name == report_view_name %}active{% endif %}">
-                    <a href="{% url report_view_name org_slug=request.org.slug opp_id=opportunity.opportunity_id %}" class="absolute inset-0"></a> {# Invisible link overlay for click #}
-                    <span>Payment Report</span>
-                    {% if current_view_name == report_view_name %}<div></div>{% endif %}
-                </li>
-            </ul>
-
-            <div class="flex items-center gap-x-4">
-                  {% block top_buttons %}
-                  {% endblock top_buttons %}
-            </div>
-        {% endwith %}
+      {% with list_view_name='opportunity:invoice_list' report_view_name='opportunity:payment_report' current_view_name=request.resolver_match.view_name %}
+        <ul class="tabs">
+          <li class="{% if current_view_name == list_view_name %}active{% endif %}">
+            <a href="{% url list_view_name org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+               class="absolute inset-0"></a> {# Invisible link overlay for click #}
+            <span>All Invoices</span>
+            {% if current_view_name == list_view_name %}<div></div>{% endif %}
+          </li>
+          <li class="{% if current_view_name == report_view_name %}active{% endif %}">
+            <a href="{% url report_view_name org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+               class="absolute inset-0"></a> {# Invisible link overlay for click #}
+            <span>Payment Report</span>
+            {% if current_view_name == report_view_name %}<div></div>{% endif %}
+          </li>
+        </ul>
+        <div class="flex items-center gap-x-4">
+          {% block top_buttons %}
+          {% endblock top_buttons %}
+        </div>
+      {% endwith %}
     </div>
-
-    {% block report_cards %}{% endblock report_cards %}
-
+    {% block report_cards %}
+    {% endblock report_cards %}
     <div id="invoice_report_container" class="flex flex-col gap-2 w-full">
-        {% block table_content %}
-            {% render_table table %}
-        {% endblock table_content %}
+      {% block table_content %}
+        {% render_table table %}
+      {% endblock table_content %}
     </div>
-</div>
+  </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/invoice_create.html b/commcare_connect/templates/opportunity/invoice_create.html
index c625940ae4..04fe29abf5 100644
--- a/commcare_connect/templates/opportunity/invoice_create.html
+++ b/commcare_connect/templates/opportunity/invoice_create.html
@@ -1,16 +1,10 @@
 {% extends "base.html" %}
 {% load i18n %}
-
 {% block content %}
-{% include 'components/breadcrumbs.html' with path=path %}
-<div class="card_bg">
-  <div class="card_title mb-4">
-    {% translate "Create New Invoice" %}
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <div class="card_bg">
+    <div class="card_title mb-4">{% translate "Create New Invoice" %}</div>
+    <div x-data="invoiceFormHandler()">{% include "components/partial_form.html" %}</div>
   </div>
-  <div x-data="invoiceFormHandler()">
-    {% include "components/partial_form.html" %}
-  </div>
-</div>
-
-{% include "opportunity/partials/invoice_form_handler.html" %}
+  {% include "opportunity/partials/invoice_form_handler.html" %}
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/invoice_detail.html b/commcare_connect/templates/opportunity/invoice_detail.html
index 9d4f4116e8..1c9513e817 100644
--- a/commcare_connect/templates/opportunity/invoice_detail.html
+++ b/commcare_connect/templates/opportunity/invoice_detail.html
@@ -1,81 +1,60 @@
 {% extends "base.html" %}
 {% load i18n crispy_forms_tags %}
 {% load waffle_tags %}
-
 {% block content %}
-{% include 'components/breadcrumbs.html' with path=path %}
-<div class="card_bg">
-  <div class="card_title mb-4">
-    {% if is_service_delivery %}
-      {% translate "Review Service Delivery Invoice" %}
-    {% else %}
-      {% translate "Review Custom Invoice" %}
-    {% endif %}
-    <span class="badge badge-sm bg-gray-200 text-gray-700 ml-2">{% translate "Read Only" %}</span>
-    {% if form.instance.payment %}
-      <span class="badge badge-sm bg-gray-200 text-gray-700 ml-2">{% translate "Paid" %}</span>
-    {% endif %}
-  </div>
-  <div x-data="invoiceFormHandler()">
-    {% crispy form %}
-    <div class="mt-6 flex justify-start gap-4">
-      <a href="{% url 'opportunity:invoice_list' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
-         class="button button-md outline-style">
-        {% translate "Back to Invoices" %}
-      </a>
-      {% if updates_to_mark_as_paid_workflow_switch %}
-        <!--  I am a PM -->
-        {% if request.is_opportunity_pm %}
-          {% if invoice_status == 'pending_pm_review' %}
-            <a @click="rejectInvoice()" class="button button-md outline-style">
-              {% translate "Reject" %}
-            </a>
-            <a @click="submitInvoice('ready_to_pay')" class="button button-md primary-dark">
-              {% translate "Approve for Payment Processing" %}
-            </a>
-          {% elif invoice_status == 'ready_to_pay' %}
-            <a @click="rejectInvoice()" class="button button-md outline-style">
-              {% translate "Reject" %}
-            </a>
-          <button hx-post="{% url 'opportunity:invoice_pay' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
-                    hx-vals='{"pk": "{{ form.instance.payment_invoice_id }}"}'
-                    class="button button-md primary-dark justify-center !inline-flex"
-                    {% if form.instance.payment %}disabled{% endif %}>
-              {% translate "Pay" %}
-            </button>
-          {% endif %}
-
-        <!-- I am a NM -->
-        {% elif invoice_status == 'pending_nm_review' %}
-          <a @click="cancelInvoice()" class="button button-md outline-style">
-            {% translate "Cancel" %}
-          </a>
-          <a @click="submitInvoice('pending_pm_review')" class="button button-md primary-dark">
-            {% translate "Submit to Program Manager" %}
-          </a>
-        {% endif %}
-
-      <!-- Switch is not active -->
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <div class="card_bg">
+    <div class="card_title mb-4">
+      {% if is_service_delivery %}
+        {% translate "Review Service Delivery Invoice" %}
       {% else %}
-        {% if request.is_opportunity_pm %}
-          {% if invoice_status == 'pending_pm_review' %}
-          <button hx-post="{% url 'opportunity:invoice_pay' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
-                    hx-vals='{"pk": "{{ form.instance.payment_invoice_id }}"}'
-                    class="button button-md primary-dark justify-center !inline-flex"
-                    {% if form.instance.payment %}disabled{% endif %}>
-              {% translate "Pay" %}
-            </button>
+        {% translate "Review Custom Invoice" %}
+      {% endif %}
+      <span class="badge badge-sm bg-gray-200 text-gray-700 ml-2">{% translate "Read Only" %}</span>
+      {% if form.instance.payment %}
+        <span class="badge badge-sm bg-gray-200 text-gray-700 ml-2">{% translate "Paid" %}</span>
+      {% endif %}
+    </div>
+    <div x-data="invoiceFormHandler()">
+      {% crispy form %}
+      <div class="mt-6 flex justify-start gap-4">
+        <a href="{% url 'opportunity:invoice_list' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+           class="button button-md outline-style">{% translate "Back to Invoices" %}</a>
+        {% if updates_to_mark_as_paid_workflow_switch %}
+          <!--  I am a PM -->
+          {% if request.is_opportunity_pm %}
+            {% if invoice_status == 'pending_pm_review' %}
+              <a @click="rejectInvoice()" class="button button-md outline-style">{% translate "Reject" %}</a>
+              <a @click="submitInvoice('ready_to_pay')"
+                 class="button button-md primary-dark">{% translate "Approve for Payment Processing" %}</a>
+            {% elif invoice_status == 'ready_to_pay' %}
+              <a @click="rejectInvoice()" class="button button-md outline-style">{% translate "Reject" %}</a>
+              <button hx-post="{% url 'opportunity:invoice_pay' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+                      hx-vals='{"pk": "{{ form.instance.payment_invoice_id }}"}'
+                      class="button button-md primary-dark justify-center !inline-flex"
+                      {% if form.instance.payment %}disabled{% endif %}>{% translate "Pay" %}</button>
+            {% endif %}
+            <!-- I am a NM -->
+          {% elif invoice_status == 'pending_nm_review' %}
+            <a @click="cancelInvoice()" class="button button-md outline-style">{% translate "Cancel" %}</a>
+            <a @click="submitInvoice('pending_pm_review')"
+               class="button button-md primary-dark">{% translate "Submit to Program Manager" %}</a>
+          {% endif %}
+          <!-- Switch is not active -->
+        {% else %}
+          {% if request.is_opportunity_pm %}
+            {% if invoice_status == 'pending_pm_review' %}
+              <button hx-post="{% url 'opportunity:invoice_pay' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+                      hx-vals='{"pk": "{{ form.instance.payment_invoice_id }}"}'
+                      class="button button-md primary-dark justify-center !inline-flex"
+                      {% if form.instance.payment %}disabled{% endif %}>{% translate "Pay" %}</button>
+            {% endif %}
+          {% elif invoice_status == 'pending_nm_review' %}
+            <a @click="submitInvoice('pending_pm_review')"
+               class="button button-md primary-dark">{% translate "Submit for Approval" %}</a>
           {% endif %}
-        {% elif invoice_status == 'pending_nm_review' %}
-          <a
-            @click="submitInvoice('pending_pm_review')"
-            class="button button-md primary-dark"
-          >
-            {% translate "Submit for Approval" %}
-          </a>
         {% endif %}
-      {% endif %}
-      {% switch 'updates_to_mark_as_paid_workflow' %}
+        {% switch 'updates_to_mark_as_paid_workflow' %}
         <a href="{% url 'opportunity:download_invoice' org_slug=request.org.slug opp_id=opportunity.opportunity_id invoice_id=form.instance.payment_invoice_id %}"
            class="button button-md outline-style">
           {% translate "Download" %}
@@ -86,44 +65,36 @@
     {% trans "Cancel Invoice" as cancel_title %}
     {% trans "Are you sure you want to cancel this invoice? This action cannot be undone." as cancel_message %}
     {% include "components/invoice_confirm_modal.html" with modal_name="showCancelModal" modal_title=cancel_title modal_message=cancel_message confirm_action="confirmCancelInvoice()" btn_text=cancel_title %}
-
     {% trans "Reject Invoice" as reject_title %}
     {% trans "Are you sure you want to reject this invoice? This action cannot be undone." as reject_message %}
     {% include "components/invoice_confirm_modal.html" with modal_name="showRejectModal" modal_title=reject_title modal_message=reject_message confirm_action="confirmRejectInvoice()" btn_text=reject_title %}
-
   </div>
 </div>
 {% if show_payment_invoice_invoice_ticket_link_form %}
-<br/>
-<div class="card_bg">
-  <form
-    method="POST"
-    action="{% url 'opportunity:update_invoice_invoice_ticket_link' org_slug=request.org.slug opp_id=opportunity.opportunity_id invoice_id=object.payment_invoice_id %}"
-  >
-    {% csrf_token %}
-    <div class="mb-4">
-      <div class="mb-2">
-        <label for="id_invoice_ticket_link" class="text-gray-700 text-sm font-bold">
-          {% translate "Invoice Ticket" %}
-        </label>
-        {% if object.invoice_ticket_link %}
-          <a class="fa fa-external-link" target="_blank" href="{{ object.invoice_ticket_link }}"
-             aria-label="{% translate 'Open invoice ticket' %}"
-          ></a>
-        {% endif %}
+  <br />
+  <div class="card_bg">
+    <form method="POST"
+          action="{% url 'opportunity:update_invoice_invoice_ticket_link' org_slug=request.org.slug opp_id=opportunity.opportunity_id invoice_id=object.payment_invoice_id %}">
+      {% csrf_token %}
+      <div class="mb-4">
+        <div class="mb-2">
+          <label for="id_invoice_ticket_link" class="text-gray-700 text-sm font-bold">{% translate "Invoice Ticket" %}</label>
+          {% if object.invoice_ticket_link %}
+            <a class="fa fa-external-link"
+               target="_blank"
+               href="{{ object.invoice_ticket_link }}"
+               aria-label="{% translate 'Open invoice ticket' %}"></a>
+          {% endif %}
+        </div>
+        <input type="url"
+               name="invoice_ticket_link"
+               class="border py-2 w-full border-gray-300 bg-white rounded-lg block focus:outline-none text-gray-700 px-4"
+               id="id_invoice_ticket_link"
+               value="{{ object.invoice_ticket_link|default_if_none:'' }}">
       </div>
-      <input type="url" name="invoice_ticket_link"
-             class="border py-2 w-full border-gray-300 bg-white rounded-lg block focus:outline-none text-gray-700 px-4"
-             id="id_invoice_ticket_link"
-             value="{{ object.invoice_ticket_link|default_if_none:'' }}"
-      >
-    </div>
-    <button class="button button-md primary-dark">
-      {% translate "Update" %}
-    </button>
-  </form>
-</div>
+      <button class="button button-md primary-dark">{% translate "Update" %}</button>
+    </form>
+  </div>
 {% endif %}
-
 {% include "opportunity/partials/invoice_form_handler.html" with is_read_only=True %}
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/invoice_download.html b/commcare_connect/templates/opportunity/invoice_download.html
index 9c79efab88..cbdcba0a57 100644
--- a/commcare_connect/templates/opportunity/invoice_download.html
+++ b/commcare_connect/templates/opportunity/invoice_download.html
@@ -1,8 +1,7 @@
 {% load static i18n %}
-
 <html lang="en">
   <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
     <style>
       body {
         font-family: sans-serif;
@@ -35,33 +34,52 @@
       </div>
       <div class="table-container">
         <table class="full-width-table">
-          <tr><td>{% trans "Invoice Number" %}</td><td>{{ invoice.invoice_number }}</td></tr>
-          <tr><td>{% trans "Amount" %}</td><td>{{ invoice.amount|default:"" }}</td></tr>
-          <tr><td>{% trans "Amount (USD)" %}</td><td>{{ invoice.amount_usd|default:"" }}</td></tr>
+          <tr>
+            <td>{% trans "Invoice Number" %}</td>
+            <td>{{ invoice.invoice_number }}</td>
+          </tr>
+          <tr>
+            <td>{% trans "Amount" %}</td>
+            <td>{{ invoice.amount|default:"" }}</td>
+          </tr>
+          <tr>
+            <td>{% trans "Amount (USD)" %}</td>
+            <td>{{ invoice.amount_usd|default:"" }}</td>
+          </tr>
           <tr>
             <td>{% trans "Rate" %}</td>
             <td>
-            {% if invoice.exchange_rate %}
-              {{ invoice.exchange_rate.rate }}
-            {% endif %}
+              {% if invoice.exchange_rate %}{{ invoice.exchange_rate.rate }}{% endif %}
             </td>
           </tr>
-          <tr><td>{% trans "Date" %}</td><td>{{ invoice.date|default:"" }}</td></tr>
-          <tr><td>{% trans "Invoice Status" %}</td><td>{{ invoice.get_status_display }}</td></tr>
+          <tr>
+            <td>{% trans "Date" %}</td>
+            <td>{{ invoice.date|default:"" }}</td>
+          </tr>
+          <tr>
+            <td>{% trans "Invoice Status" %}</td>
+            <td>{{ invoice.get_status_display }}</td>
+          </tr>
           <tr>
             <td>{% trans "Paid" %}</td>
             <td>
-            {% if invoice.is_paid %}
-              {% trans "Paid" %}
-            {% else %}
-              {% trans "Pending" %}
-            {% endif %}
+              {% if invoice.is_paid %}
+                {% trans "Paid" %}
+              {% else %}
+                {% trans "Pending" %}
+              {% endif %}
             </td>
           </tr>
           {% if invoice.is_paid %}
-            <tr><td>{% trans "Payment Date" %}</td><td>{{ invoice.payment.date_paid }}</td></tr>
+            <tr>
+              <td>{% trans "Payment Date" %}</td>
+              <td>{{ invoice.payment.date_paid }}</td>
+            </tr>
           {% endif %}
-          <tr><td>{% trans "Invoice Type" %}</td><td>{{ invoice.invoice_type.label }}</td></tr>
+          <tr>
+            <td>{% trans "Invoice Type" %}</td>
+            <td>{{ invoice.invoice_type.label }}</td>
+          </tr>
         </table>
       </div>
     </div>
diff --git a/commcare_connect/templates/opportunity/invoice_list.html b/commcare_connect/templates/opportunity/invoice_list.html
index b7b599aae6..890dc9bc96 100644
--- a/commcare_connect/templates/opportunity/invoice_list.html
+++ b/commcare_connect/templates/opportunity/invoice_list.html
@@ -2,33 +2,33 @@
 {% load static %}
 {% load crispy_forms_tags %}
 {% load i18n %}
-
 {% block top_buttons %}
   {{ block.super }}
   {% if not request.is_opportunity_pm %}
-  <div x-data="{ open: false }" @click.away="open = false" class="relative">
-    <button @click="open = !open" class="button button-md primary-dark flex flex-row items-center space-x-2">
-      {% translate "Create Invoice" %}
-      <i :class="open ? 'rotate-180' : ''" class="fa-solid fa-chevron-down transition-all text-xs"></i>
-    </button>
-
-    <div x-show="open" x-transition.opacity x-cloak
-      class="absolute top-12 right-0 min-w-56 bg-white shadow rounded-lg z-50">
-      <ul class="p-2 w-full max-h-80 overflow-y-auto">
-        <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
-          <a href="{{ new_invoice_url }}?invoice_type=service_delivery">
-            <p class="text-brand-deep-purple text-sm font-medium">{% translate "Service Delivery" %}</p>
-          </a>
-        </li>
-        <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
-          <a href="{{ new_invoice_url }}?invoice_type=custom">
-            <p class="text-brand-deep-purple text-sm font-medium">{% translate "Custom" %}</p>
-          </a>
-        </li>
-      </ul>
-
+    <div x-data="{ open: false }" @click.away="open = false" class="relative">
+      <button @click="open = !open"
+              class="button button-md primary-dark flex flex-row items-center space-x-2">
+        {% translate "Create Invoice" %}
+        <i :class="open ? 'rotate-180' : ''"
+           class="fa-solid fa-chevron-down transition-all text-xs"></i>
+      </button>
+      <div x-show="open"
+           x-transition.opacity
+           x-cloak
+           class="absolute top-12 right-0 min-w-56 bg-white shadow rounded-lg z-50">
+        <ul class="p-2 w-full max-h-80 overflow-y-auto">
+          <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+            <a href="{{ new_invoice_url }}?invoice_type=service_delivery">
+              <p class="text-brand-deep-purple text-sm font-medium">{% translate "Service Delivery" %}</p>
+            </a>
+          </li>
+          <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+            <a href="{{ new_invoice_url }}?invoice_type=custom">
+              <p class="text-brand-deep-purple text-sm font-medium">{% translate "Custom" %}</p>
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
-  </div>
   {% endif %}
-
 {% endblock top_buttons %}
diff --git a/commcare_connect/templates/opportunity/invoice_payment_report.html b/commcare_connect/templates/opportunity/invoice_payment_report.html
index 1a0a1194b5..c16d97d830 100644
--- a/commcare_connect/templates/opportunity/invoice_payment_report.html
+++ b/commcare_connect/templates/opportunity/invoice_payment_report.html
@@ -1,50 +1,43 @@
 {% extends "opportunity/invoice_base.html" %}
 {% load django_tables2 %}
-
-
 {% block report_cards %}
-<div id="invoice_report_card_container">
+  <div id="invoice_report_card_container">
     <div class="flex gap-4 w-full justify-between items-center min-h-32 p-4 profile-bg bg-brand-indigo rounded-2xl overflow-x-auto">
-        {% for card in cards %}
+      {% for card in cards %}
         <div class="flex-1 w-full h-full bg-white/10 text-white relative flex flex-col justify-between p-4 rounded-lg">
-            <div class="flex justify-between items-start">
-                <div class="text-2xl">{{ card.amount }}</div>
-                <i class="fa-solid {{ card.icon }} text-xl"></i>
-            </div>
-            <div class="pt-4 text-sm flex items-center justify-between ">
-                <div class="w-full overflow-hidden text-clip">
-                    <span class="text-nowrap">{{ card.label }} | <span class="font-medium">{{ card.subtext }}</span></span>
-                </div>
-                <i class="fa-solid ml-2 cursor-pointer" ></i>
+          <div class="flex justify-between items-start">
+            <div class="text-2xl">{{ card.amount }}</div>
+            <i class="fa-solid {{ card.icon }} text-xl"></i>
+          </div>
+          <div class="pt-4 text-sm flex items-center justify-between ">
+            <div class="w-full overflow-hidden text-clip">
+              <span class="text-nowrap">{{ card.label }} | <span class="font-medium">{{ card.subtext }}</span></span>
             </div>
+            <i class="fa-solid ml-2 cursor-pointer"></i>
+          </div>
         </div>
-        {% endfor %}
+      {% endfor %}
     </div>
-</div>
+  </div>
 {% endblock report_cards %}
-
 {% block table_section_header %}
-<div class="relative flex items-center justify-between w-full px-4 mx-auto rounded-lg shadow-sm bg-slate-50 h-14">
+  <div class="relative flex items-center justify-between w-full px-4 mx-auto rounded-lg shadow-sm bg-slate-50 h-14">
     <p class="text-sm font-medium text-brand-deep-purple">All Invoices</p>
-</div>
+  </div>
 {% endblock table_section_header %}
-
 {% block top_buttons %}
-{{ block.super }}
-<div class="flex items-center bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
-  <a
-    href="{% url report_view_name org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
-    class="px-4 py-2 font-medium {% if not request.GET.usd %}bg-brand-indigo text-white pointer-events-none{% else %}text-gray-600{% endif %}">
-    <i class="fas fa-coins"></i>
-    {{opportunity.currency_code}}
-  </a>
-  <div class="w-px h-6 bg-gray-200"></div>
-  <a
-    href="{% url report_view_name org_slug=request.org.slug opp_id=opportunity.opportunity_id %}?usd=True"
-    class="px-4 py-2 font-medium {% if request.GET.usd %}bg-brand-indigo text-white pointer-events-none{% else %}text-gray-600{% endif %}">
-    <i class="fas fa-dollar-sign"></i>
-    USD
-  </a>
-</div>
-
+  {{ block.super }}
+  <div class="flex items-center bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
+    <a href="{% url report_view_name org_slug=request.org.slug opp_id=opportunity.opportunity_id %}"
+       class="px-4 py-2 font-medium {% if not request.GET.usd %}bg-brand-indigo text-white pointer-events-none{% else %}text-gray-600{% endif %}">
+      <i class="fas fa-coins"></i>
+      {{ opportunity.currency_code }}
+    </a>
+    <div class="w-px h-6 bg-gray-200"></div>
+    <a href="{% url report_view_name org_slug=request.org.slug opp_id=opportunity.opportunity_id %}?usd=True"
+       class="px-4 py-2 font-medium {% if request.GET.usd %}bg-brand-indigo text-white pointer-events-none{% else %}text-gray-600{% endif %}">
+      <i class="fas fa-dollar-sign"></i>
+      USD
+    </a>
+  </div>
 {% endblock top_buttons %}
diff --git a/commcare_connect/templates/opportunity/learn.html b/commcare_connect/templates/opportunity/learn.html
index f4da00c4a5..177b630896 100644
--- a/commcare_connect/templates/opportunity/learn.html
+++ b/commcare_connect/templates/opportunity/learn.html
@@ -1,4 +1,3 @@
 {% extends "opportunity/worker_list_base.html" %}
 {% load i18n %}
-
 {% block tab_options %}{% endblock %}
diff --git a/commcare_connect/templates/opportunity/new_task_type_modal.html b/commcare_connect/templates/opportunity/new_task_type_modal.html
index 24b4974102..221fc3dc93 100644
--- a/commcare_connect/templates/opportunity/new_task_type_modal.html
+++ b/commcare_connect/templates/opportunity/new_task_type_modal.html
@@ -1,36 +1,38 @@
 {% load i18n %}
 {% load crispy_forms_tags %}
-
-<div x-show="showCreateTaskTypeModal" x-cloak x-transition.opacity class="modal-backdrop" role="dialog" aria-modal="true"
-    @keydown.escape.window="showCreateTaskTypeModal = false">
-    <div @click.outside="showCreateTaskTypeModal = false" class="modal w-full !max-w-2xl">
-
-        <div class="header flex justify-between items-center">
-            <h2 class="title">{% translate "New Task Type" %}</h2>
-            <button @click="showCreateTaskTypeModal = false" class="button-icon" aria-label="{% translate 'Close' %}">
-                <i class="fa-solid fa-xmark text-xl"></i>
-            </button>
-        </div>
-
-        <form method="post"
-            action="{% url 'opportunity:task_types_config' request.org.slug opportunity.opportunity_id %}">
-            {% csrf_token %}
-            <div class="modal-body">
-                <div class="flex items-center gap-2 p-4 mb-4 rounded-lg border-[0.5px] bg-message-info text-message-info-text border-message-info-border">
-                    <i class="fa-solid fa-circle-info"></i>
-                    <span>{% translate "Available task units are synced every hour from CommCare HQ." %}</span>
-                </div>
-                {% crispy form %}
-            </div>
-            <div class="footer flex justify-end gap-3">
-                <button type="button" @click="showCreateTaskTypeModal = false" class="button button-md outline-style">
-                    {% translate "Cancel" %}
-                </button>
-                <button type="submit" class="button button-md primary-dark">
-                    {% translate "Save" %}
-                </button>
-            </div>
-        </form>
-
+<div x-show="showCreateTaskTypeModal"
+     x-cloak
+     x-transition.opacity
+     class="modal-backdrop"
+     role="dialog"
+     aria-modal="true"
+     @keydown.escape.window="showCreateTaskTypeModal = false">
+  <div @click.outside="showCreateTaskTypeModal = false"
+       class="modal w-full !max-w-2xl">
+    <div class="header flex justify-between items-center">
+      <h2 class="title">{% translate "New Task Type" %}</h2>
+      <button @click="showCreateTaskTypeModal = false"
+              class="button-icon"
+              aria-label="{% translate 'Close' %}">
+        <i class="fa-solid fa-xmark text-xl"></i>
+      </button>
     </div>
+    <form method="post"
+          action="{% url 'opportunity:task_types_config' request.org.slug opportunity.opportunity_id %}">
+      {% csrf_token %}
+      <div class="modal-body">
+        <div class="flex items-center gap-2 p-4 mb-4 rounded-lg border-[0.5px] bg-message-info text-message-info-text border-message-info-border">
+          <i class="fa-solid fa-circle-info"></i>
+          <span>{% translate "Available task units are synced every hour from CommCare HQ." %}</span>
+        </div>
+        {% crispy form %}
+      </div>
+      <div class="footer flex justify-end gap-3">
+        <button type="button"
+                @click="showCreateTaskTypeModal = false"
+                class="button button-md outline-style">{% translate "Cancel" %}</button>
+        <button type="submit" class="button button-md primary-dark">{% translate "Save" %}</button>
+      </div>
+    </form>
+  </div>
 </div>
diff --git a/commcare_connect/templates/opportunity/opportunities_list.html b/commcare_connect/templates/opportunity/opportunities_list.html
index 7abee803fc..57ac3fccbb 100644
--- a/commcare_connect/templates/opportunity/opportunities_list.html
+++ b/commcare_connect/templates/opportunity/opportunities_list.html
@@ -2,86 +2,78 @@
 {% load static i18n %}
 {% load render_table from django_tables2 %}
 {% load crispy_forms_tags %}
-
 {% block css %}
-{{ block.super }}
-<link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 {% endblock css %}
 {% block javascript %}
-{{ block.super }}
-<script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
+  {{ block.super }}
+  <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
 {% endblock javascript %}
-
 {% block inline_javascript %}
-{{ block.super }}
-{% if filter_usage_data %}
-<script>
+  {{ block.super }}
+  {% if filter_usage_data %}
+    <script>
   window.addEventListener('DOMContentLoaded', () => {
     const data = {{ filter_usage_data|safe }};
     window.gtmSendEvent('filters_applied', data);
   });
-</script>
-{% endif %}
+    </script>
+  {% endif %}
 {% endblock inline_javascript %}
-
-
 {% block content %}
-{% load i18n %}
-<div class="flex items-center justify-center">
-  <div class="flex flex-col gap-2 w-full">
-  <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14">
-      <p class="text-sm text-brand-deep-purple">{% translate "Opportunities List" %}</p>
-    <div class="flex gap-x-6 items-center" x-cloak x-data="{showFilterModal: false}">
-      <button type="button" @click="showFilterModal = true" class="relative button-icon">
-        <i class="fa-solid fa-sliders text-brand-deep-purple"></i>
-        {% if filters_applied_count %}
-        <span class="absolute flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-brand-marigold border-2 border-white rounded-full transform translate-x-1/2 -translate-y-1/2">
-          {{ filters_applied_count }}
-        </span>
-        {% endif %}
-      </button>
-      {% if request.org.program_manager and request.org_membership.is_admin %}
-      <a class="button button-md primary-dark" href="{% url 'opportunity:init' request.org.slug %}">
-        Add Opportunity
-      </a>
-      {% else %}
-      <button disabled class="button button-md primary-dark">Add Opportunity</button>
-      {% endif %}
-      <div x-show="showFilterModal" class="modal-backdrop">
-        <div class="modal">
-          <div class="header text-lg font-semibold text-brand-deep-purple">
-            <h1>Filters</h1>
-            <button @click="showFilterModal = false">
-              <i class="fa-solid fa-xmark text-xl"></i>
-            </button>
-          </div>
-          <form
-            id="filterForm"
-            class="content"
-          >
-            <div class="modal-body">
-              {% crispy filter_form %}
-            </div>
-            <div class="footer">
-              <button type="button" @click="showFilterModal = false" class="button button-md outline-style">Close</button>
-              <button
-                form="filterForm" type="submit" @click="showFilterModal = false" class="button button-md primary-dark">
-                Apply
-              </button>
+  {% load i18n %}
+  <div class="flex items-center justify-center">
+    <div class="flex flex-col gap-2 w-full">
+      <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14">
+        <p class="text-sm text-brand-deep-purple">{% translate "Opportunities List" %}</p>
+        <div class="flex gap-x-6 items-center"
+             x-cloak
+             x-data="{showFilterModal: false}">
+          <button type="button"
+                  @click="showFilterModal = true"
+                  class="relative button-icon">
+            <i class="fa-solid fa-sliders text-brand-deep-purple"></i>
+            {% if filters_applied_count %}
+              <span class="absolute flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-brand-marigold border-2 border-white rounded-full transform translate-x-1/2 -translate-y-1/2">
+                {{ filters_applied_count }}
+              </span>
+            {% endif %}
+          </button>
+          {% if request.org.program_manager and request.org_membership.is_admin %}
+            <a class="button button-md primary-dark"
+               href="{% url 'opportunity:init' request.org.slug %}">Add Opportunity</a>
+          {% else %}
+            <button disabled class="button button-md primary-dark">Add Opportunity</button>
+          {% endif %}
+          <div x-show="showFilterModal" class="modal-backdrop">
+            <div class="modal">
+              <div class="header text-lg font-semibold text-brand-deep-purple">
+                <h1>Filters</h1>
+                <button @click="showFilterModal = false">
+                  <i class="fa-solid fa-xmark text-xl"></i>
+                </button>
+              </div>
+              <form id="filterForm" class="content">
+                <div class="modal-body">{% crispy filter_form %}</div>
+                <div class="footer">
+                  <button type="button"
+                          @click="showFilterModal = false"
+                          class="button button-md outline-style">Close</button>
+                  <button form="filterForm"
+                          type="submit"
+                          @click="showFilterModal = false"
+                          class="button button-md primary-dark">Apply</button>
+                </div>
+              </form>
             </div>
-          </form>
+          </div>
         </div>
       </div>
-    </div>
-    </div>
-
-    <!-- Table Header -->
-    <div class="flex flex-col w-full gap-2">
-
-      <div class="w-full overflow-y-auto  rounded-lg shadow-xs">
-        {% render_table table %}
+      <!-- Table Header -->
+      <div class="flex flex-col w-full gap-2">
+        <div class="w-full overflow-y-auto  rounded-lg shadow-xs">{% render_table table %}</div>
       </div>
     </div>
   </div>
-</div>
 {% endblock %}
diff --git a/commcare_connect/templates/opportunity/opportunity_delivery_stat.html b/commcare_connect/templates/opportunity/opportunity_delivery_stat.html
index 3f35db99da..15360977b7 100644
--- a/commcare_connect/templates/opportunity/opportunity_delivery_stat.html
+++ b/commcare_connect/templates/opportunity/opportunity_delivery_stat.html
@@ -1,84 +1,77 @@
 {% if skeleton %}
-<!-- Skeleton Loader with HTMX call -->
-<div
-  id="opp-stats-container"
-  hx-get="{% url 'opportunity:delivery_stats' request.org.slug object.opportunity_id %}"
-  hx-trigger="load"
-  hx-target="#opp-stats-container"
-  hx-swap="innerHTML"
->
-  <div class="flex flex-row flex-wrap gap-4 p-4 rounded-t-lg bg-white animate-pulse">
-    {% for _ in "123" %}
-    <div class="w-fit flex-1 flex flex-col gap-4">
-      <div class="flex flex-row items-center gap-2">
-        <div class="flex-1 h-4 bg-gray-200 rounded"></div>
-        <div class="h-3 w-20 bg-gray-200 rounded"></div>
-      </div>
-      {% for _ in "12" %}
-      <div class="flex gap-2 rounded-lg p-4 items-center bg-brand-indigo">
-        <div class="w-10 h-10 rounded-md bg-gray-300 flex items-center justify-center">
-          <div class="w-4 h-4 bg-gray-200 rounded"></div>
-        </div>
-        <div class="flex-1 space-y-1">
-          <div class="h-3 w-20 bg-gray-200 rounded"></div>
-          <div class="h-4 w-24 bg-gray-300 rounded"></div>
+  <!-- Skeleton Loader with HTMX call -->
+  <div id="opp-stats-container"
+       hx-get="{% url 'opportunity:delivery_stats' request.org.slug object.opportunity_id %}"
+       hx-trigger="load"
+       hx-target="#opp-stats-container"
+       hx-swap="innerHTML">
+    <div class="flex flex-row flex-wrap gap-4 p-4 rounded-t-lg bg-white animate-pulse">
+      {% for _ in "123" %}
+        <div class="w-fit flex-1 flex flex-col gap-4">
+          <div class="flex flex-row items-center gap-2">
+            <div class="flex-1 h-4 bg-gray-200 rounded"></div>
+            <div class="h-3 w-20 bg-gray-200 rounded"></div>
+          </div>
+          {% for _ in "12" %}
+            <div class="flex gap-2 rounded-lg p-4 items-center bg-brand-indigo">
+              <div class="w-10 h-10 rounded-md bg-gray-300 flex items-center justify-center">
+                <div class="w-4 h-4 bg-gray-200 rounded"></div>
+              </div>
+              <div class="flex-1 space-y-1">
+                <div class="h-3 w-20 bg-gray-200 rounded"></div>
+                <div class="h-4 w-24 bg-gray-300 rounded"></div>
+              </div>
+              <div class="h-6 w-10 bg-gray-200 rounded"></div>
+              <div class="ml-2 h-5 w-10 bg-green-300 rounded-full"></div>
+              <div class="h-4 w-4 bg-gray-200 rounded"></div>
+            </div>
+          {% endfor %}
         </div>
-        <div class="h-6 w-10 bg-gray-200 rounded"></div>
-        <div class="ml-2 h-5 w-10 bg-green-300 rounded-full"></div>
-        <div class="h-4 w-4 bg-gray-200 rounded"></div>
-      </div>
       {% endfor %}
     </div>
-    {% endfor %}
   </div>
-</div>
-
 {% else %}
-<!-- Actual Delivery Stats UI -->
-<div class="flex flex-row flex-wrap gap-4 p-4 rounded-t-lg bg-white">
-  {% for stat in opp_stats %}
-  <div class="w-fit flex-1 flex flex-col gap-4">
-    <div class="flex flex-row items-center">
-      <h3 class="flex-1 text-base font-medium text-brand-deep-purple">{{ stat.title }}</h3>
-      <p class="text-brand-deep-purple text-xs font-medium">
-        <span class="font-normal">{{ stat.sub_heading }}</span> {{ stat.value }}
-      </p>
-    </div>
-    {% for panel in stat.panels %}
-    {% if panel.url  %}
-      <a href="{{ panel.url }}">
-    {% endif %}
-        <div class="flex gap-2 rounded-lg p-4 items-center bg-brand-indigo {{ panel.body }}">
-          <div class="w-10 h-10 flex items-center justify-center text-white rounded-md {{ panel.icon_bg }}">
-            <i class="fa-solid {{ panel.icon }}"></i>
-          </div>
-          <div class="flex-1">
-            <h3 class="text-xs text-white {{ panel.text_color }}">{{ panel.name }}</h3>
-            <p class="text-sm text-white {{ panel.text_color }}">{{ panel.status }}</p>
-          </div>
-          <h3 class="text-2xl font-medium text-white {{ panel.text_color }}">
-            {{ panel.value }}
-          </h3>
-          <div class="w-17">
-            {% if panel.incr is not None %}
-            <span x-data x-tooltip.raw="Increment in last 24 hours" class="badge badge-md positive-dark">{{ panel.incr }} ↑</span>
-            {% else %}
-            <span class="inline-block h-6">&nbsp;</span>
-            {% endif %}
-          </div>
-          <div>
-            {% if panel.url %}
-              <i class="fa-solid fa-arrow-up-right-from-square text-brand-sky text-lg {{ panel.text_color }}"></i>
-            {% else %}
-              <i class="fa-solid fa-arrow-up-right-from-square text-lg invisible"></i>
-            {% endif %}
-          </div>
+  <!-- Actual Delivery Stats UI -->
+  <div class="flex flex-row flex-wrap gap-4 p-4 rounded-t-lg bg-white">
+    {% for stat in opp_stats %}
+      <div class="w-fit flex-1 flex flex-col gap-4">
+        <div class="flex flex-row items-center">
+          <h3 class="flex-1 text-base font-medium text-brand-deep-purple">{{ stat.title }}</h3>
+          <p class="text-brand-deep-purple text-xs font-medium">
+            <span class="font-normal">{{ stat.sub_heading }}</span> {{ stat.value }}
+          </p>
         </div>
-    {% if panel.url  %}
-      </a>
-    {% endif %}
+        {% for panel in stat.panels %}
+          {% if panel.url %}<a href="{{ panel.url }}">{% endif %}
+            <div class="flex gap-2 rounded-lg p-4 items-center bg-brand-indigo {{ panel.body }}">
+              <div class="w-10 h-10 flex items-center justify-center text-white rounded-md {{ panel.icon_bg }}">
+                <i class="fa-solid {{ panel.icon }}"></i>
+              </div>
+              <div class="flex-1">
+                <h3 class="text-xs text-white {{ panel.text_color }}">{{ panel.name }}</h3>
+                <p class="text-sm text-white {{ panel.text_color }}">{{ panel.status }}</p>
+              </div>
+              <h3 class="text-2xl font-medium text-white {{ panel.text_color }}">{{ panel.value }}</h3>
+              <div class="w-17">
+                {% if panel.incr is not None %}
+                  <span x-data
+                        x-tooltip.raw="Increment in last 24 hours"
+                        class="badge badge-md positive-dark">{{ panel.incr }} ↑</span>
+                {% else %}
+                  <span class="inline-block h-6">&nbsp;</span>
+                {% endif %}
+              </div>
+              <div>
+                {% if panel.url %}
+                  <i class="fa-solid fa-arrow-up-right-from-square text-brand-sky text-lg {{ panel.text_color }}"></i>
+                {% else %}
+                  <i class="fa-solid fa-arrow-up-right-from-square text-lg invisible"></i>
+                {% endif %}
+              </div>
+            </div>
+            {% if panel.url %}</a>{% endif %}
+        {% endfor %}
+      </div>
     {% endfor %}
   </div>
-  {% endfor %}
-</div>
 {% endif %}
diff --git a/commcare_connect/templates/opportunity/opportunity_edit.html b/commcare_connect/templates/opportunity/opportunity_edit.html
index 95ffb7c68b..bfc31c86af 100644
--- a/commcare_connect/templates/opportunity/opportunity_edit.html
+++ b/commcare_connect/templates/opportunity/opportunity_edit.html
@@ -4,84 +4,90 @@
 {% load duration_minutes %}
 {% load tailwind_filters %}
 {% load i18n %}
-
 {% block title %}{{ request.org }} - {{ opportunity.name }}{% endblock %}
 {% block breadcrumbs_inner %}
-    {{ block.super }}
-    <li class="breadcrumb-item">
-        <a href="{% url 'opportunity:detail' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}">{{ opportunity.name }}</a>
-    </li>
-    <li class="breadcrumb-item active" aria-current="page">{% trans 'Edit Opportunity' %}</li>
+  {{ block.super }}
+  <li class="breadcrumb-item">
+    <a href="{% url 'opportunity:detail' org_slug=request.org.slug opp_id=opportunity.opportunity_id %}">{{ opportunity.name }}</a>
+  </li>
+  <li class="breadcrumb-item active" aria-current="page">{% trans 'Edit Opportunity' %}</li>
 {% endblock %}
 {% block content %}
-    <div class="md:max-w-screen-lg mx-auto" x-data="{ showActiveHistory: false }">
-        <h2 class="title my-8">{% trans 'Edit Opportunity' %}</h2>
-        <form method="post" class="flex flex-col gap-4">
-            {% csrf_token %}
-            {% crispy form %}
-        </form>
-        {% if active_events %}
-        <div x-show="showActiveHistory" x-cloak x-transition.opacity class="modal-backdrop"
-            @keydown.escape.window="showActiveHistory = false">
-            <div @click.outside="showActiveHistory = false" class="modal" role="dialog" aria-modal="true"
-                aria-labelledby="active-history-modal-title">
-                <div class="header text-lg font-semibold text-brand-deep-purple">
-                    <h1 id="active-history-modal-title">{% trans 'Active Status History' %}</h1>
-                    <button @click="showActiveHistory = false" aria-label="Close dialog">
-                        <i class="fa-solid fa-xmark text-xl" aria-hidden="true"></i>
-                    </button>
-                </div>
-                <div class="content">
-                    <div class="modal-body overflow-y-auto max-h-96">
-                        <table class="w-full text-sm text-left text-brand-deep-purple">
-                            <thead class="text-xs uppercase bg-slate-100">
-                                <tr>
-                                    <th class="px-4 py-2">{% trans 'Changed at' %}</th>
-                                    <th class="px-4 py-2">{% trans 'Changed to' %}</th>
-                                    <th class="px-4 py-2">{% trans 'Changed By' %}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {% for event in active_events %}
-                                <tr class="border-b border-slate-200">
-                                    <td class="px-4 py-2">{{ event.pgh_created_at|date:"d M Y H:i" }}</td>
-                                    <td class="px-4 py-2">
-                                        {% if event.active %}
-                                        <span class="badge badge-sm bg-green-600/20 text-green-600">{% trans 'Active' %}</span>
-                                        {% else %}
-                                        <span class="badge badge-sm bg-slate-100 text-slate-400">{% trans 'Inactive' %}</span>
-                                        {% endif %}
-                                    </td>
-                                    <td class="px-4 py-2">
-                                        {% with ctx=event.pgh_context %}
-                                            {% if ctx and ctx.metadata and ctx.metadata.username %}
-                                                {% if ctx.metadata.username == "system" %}
-                                                    {% trans 'System' %}
-                                                {% else %}
-                                                    {{ ctx.metadata.username }}
-                                                {% endif %}
-                                            {% else %}
-                                                {% trans 'Unavailable' %}
-                                            {% endif %}
-                                        {% endwith %}
-                                    </td>
-                                </tr>
-                                {% empty %}
-                                <tr>
-                                    <td colspan="3" class="px-4 py-4 text-center text-slate-400">{% trans 'No history available.' %}</td>
-                                </tr>
-                                {% endfor %}
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="footer">
-                        <button type="button" @click="showActiveHistory = false" class="button button-md outline-style">
-                            {% trans 'Close' %}
-                        </button>
-                    </div>
-                </div>
+  <div class="md:max-w-screen-lg mx-auto"
+       x-data="{ showActiveHistory: false }">
+    <h2 class="title my-8">{% trans 'Edit Opportunity' %}</h2>
+    <form method="post" class="flex flex-col gap-4">
+      {% csrf_token %}
+      {% crispy form %}
+    </form>
+    {% if active_events %}
+      <div x-show="showActiveHistory"
+           x-cloak
+           x-transition.opacity
+           class="modal-backdrop"
+           @keydown.escape.window="showActiveHistory = false">
+        <div @click.outside="showActiveHistory = false"
+             class="modal"
+             role="dialog"
+             aria-modal="true"
+             aria-labelledby="active-history-modal-title">
+          <div class="header text-lg font-semibold text-brand-deep-purple">
+            <h1 id="active-history-modal-title">{% trans 'Active Status History' %}</h1>
+            <button @click="showActiveHistory = false" aria-label="Close dialog">
+              <i class="fa-solid fa-xmark text-xl" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="content">
+            <div class="modal-body overflow-y-auto max-h-96">
+              <table class="w-full text-sm text-left text-brand-deep-purple">
+                <thead class="text-xs uppercase bg-slate-100">
+                  <tr>
+                    <th class="px-4 py-2">{% trans 'Changed at' %}</th>
+                    <th class="px-4 py-2">{% trans 'Changed to' %}</th>
+                    <th class="px-4 py-2">{% trans 'Changed By' %}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for event in active_events %}
+                    <tr class="border-b border-slate-200">
+                      <td class="px-4 py-2">{{ event.pgh_created_at|date:"d M Y H:i" }}</td>
+                      <td class="px-4 py-2">
+                        {% if event.active %}
+                          <span class="badge badge-sm bg-green-600/20 text-green-600">{% trans 'Active' %}</span>
+                        {% else %}
+                          <span class="badge badge-sm bg-slate-100 text-slate-400">{% trans 'Inactive' %}</span>
+                        {% endif %}
+                      </td>
+                      <td class="px-4 py-2">
+                        {% with ctx=event.pgh_context %}
+                          {% if ctx and ctx.metadata and ctx.metadata.username %}
+                            {% if ctx.metadata.username == "system" %}
+                              {% trans 'System' %}
+                            {% else %}
+                              {{ ctx.metadata.username }}
+                            {% endif %}
+                          {% else %}
+                            {% trans 'Unavailable' %}
+                          {% endif %}
+                        {% endwith %}
+                      </td>
+                    </tr>
+                  {% empty %}
+                    <tr>
+                      <td colspan="3" class="px-4 py-4 text-center text-slate-400">{% trans 'No history available.' %}</td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
             </div>
+            <div class="footer">
+              <button type="button"
+                      @click="showActiveHistory = false"
+                      class="button button-md outline-style">{% trans 'Close' %}</button>
+            </div>
+          </div>
         </div>
-        {% endif %}
-    </div>
+      </div>
+    {% endif %}
+  </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/opportunity_finalize.html b/commcare_connect/templates/opportunity/opportunity_finalize.html
index 667c90e667..b2cf2e94d1 100644
--- a/commcare_connect/templates/opportunity/opportunity_finalize.html
+++ b/commcare_connect/templates/opportunity/opportunity_finalize.html
@@ -3,12 +3,9 @@
 {% load crispy_forms_tags %}
 {% load tailwind_filters %}
 {% block title %}{{ request.org }} - Opportunity Budget{% endblock %}
-
 {% block content %}
-<div class="md:max-w-screen-lg mx-auto flex flex-col gap-8">
-  {% include "opportunity/steps.html" with step='step3'  org_slug=request.org.slug pk=opportunity.opportunity_id %}
-  <div class="card_bg">
-    {% include "components/partial_form.html" %}
+  <div class="md:max-w-screen-lg mx-auto flex flex-col gap-8">
+    {% include "opportunity/steps.html" with step='step3'  org_slug=request.org.slug pk=opportunity.opportunity_id %}
+    <div class="card_bg">{% include "components/partial_form.html" %}</div>
   </div>
-</div>
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/opportunity_funnel_progress.html b/commcare_connect/templates/opportunity/opportunity_funnel_progress.html
index b99955838a..e2b09077c6 100644
--- a/commcare_connect/templates/opportunity/opportunity_funnel_progress.html
+++ b/commcare_connect/templates/opportunity/opportunity_funnel_progress.html
@@ -1,55 +1,52 @@
 {% if skeleton %}
-<div
-  id="opp-funnel-container"
-  hx-get="{% url 'opportunity:funnel_progress_stats' request.org.slug object.id %}"
-  hx-trigger="load"
-  hx-target="#opp-funnel-container"
-  hx-swap="innerHTML"
-  class="mt-4"
->
-  <div class="flex flex-col gap-8 w-full p-8 shadow-sm rounded-xl bg-white animate-pulse">
-    <h4 class="text-brand-deep-purple font-medium">Connect Worker Progress Funnel</h4>
-    <div class="flex flex-col md:flex-row gap-4 justify-between">
-      {% for _ in "1234567" %}
-      <div class="flex flex-col gap-2">
-        <div class="flex items-center gap-2">
-          <div class="bg-indigo-100 h-12 w-12 rounded flex items-center justify-center">
-            <div class="bg-indigo-300 h-6 w-6 rounded"></div>
-          </div>
-          {% if not forloop.last %}
-          <div class="relative w-32 h-0.5 bg-transparent border-dashed border-t-2 border-gray-300 my-6">
-            <div class="absolute -right-1 -top-[6.5px] w-2.5 h-2.5 border-t-2 border-r-2 border-gray-300 rotate-45"></div>
+  <div id="opp-funnel-container"
+       hx-get="{% url 'opportunity:funnel_progress_stats' request.org.slug object.id %}"
+       hx-trigger="load"
+       hx-target="#opp-funnel-container"
+       hx-swap="innerHTML"
+       class="mt-4">
+    <div class="flex flex-col gap-8 w-full p-8 shadow-sm rounded-xl bg-white animate-pulse">
+      <h4 class="text-brand-deep-purple font-medium">Connect Worker Progress Funnel</h4>
+      <div class="flex flex-col md:flex-row gap-4 justify-between">
+        {% for _ in "1234567" %}
+          <div class="flex flex-col gap-2">
+            <div class="flex items-center gap-2">
+              <div class="bg-indigo-100 h-12 w-12 rounded flex items-center justify-center">
+                <div class="bg-indigo-300 h-6 w-6 rounded"></div>
+              </div>
+              {% if not forloop.last %}
+                <div class="relative w-32 h-0.5 bg-transparent border-dashed border-t-2 border-gray-300 my-6">
+                  <div class="absolute -right-1 -top-[6.5px] w-2.5 h-2.5 border-t-2 border-r-2 border-gray-300 rotate-45"></div>
+                </div>
+              {% endif %}
+            </div>
+            <div class="h-6 w-12 bg-gray-200 rounded"></div>
+            <div class="h-3 w-20 bg-gray-200 rounded"></div>
           </div>
-          {% endif %}
-        </div>
-        <div class="h-6 w-12 bg-gray-200 rounded"></div>
-        <div class="h-3 w-20 bg-gray-200 rounded"></div>
+        {% endfor %}
       </div>
-      {% endfor %}
     </div>
   </div>
-</div>
-
 {% else %}
-<div class="flex flex-col gap-8 w-full p-8 shadow-sm rounded-xl bg-white">
-  <h4 class="text-brand-deep-purple font-medium">Worker Progress Funnel</h4>
-  <div class="flex flex-col md:flex-row gap-4 justify-between">
-    {% for data in funnel_progress %}
-    <div class="flex flex-col gap-2 {% if not forloop.last %} flex-1 {% endif %}">
-      <div class="flex items-center gap-2">
-        <div class="text-brand-indigo text-lg p-2 rounded bg-indigo-100 aspect-square text-center h-12 w-12 place-content-center">
-          <i class="fa-solid fa-{{ data.icon }}"></i>
-        </div>
-        {% if not forloop.last %}
-        <div class="relative w-full grow h-0.5 bg-transparent border-dashed border-t-2 border-gray-400 my-6">
-          <div class="absolute -right-1 -top-[6.5px] w-2.5 h-2.5 border-t-2 border-r-2 border-gray-400 rotate-45"></div>
+  <div class="flex flex-col gap-8 w-full p-8 shadow-sm rounded-xl bg-white">
+    <h4 class="text-brand-deep-purple font-medium">Worker Progress Funnel</h4>
+    <div class="flex flex-col md:flex-row gap-4 justify-between">
+      {% for data in funnel_progress %}
+        <div class="flex flex-col gap-2 {% if not forloop.last %}flex-1{% endif %}">
+          <div class="flex items-center gap-2">
+            <div class="text-brand-indigo text-lg p-2 rounded bg-indigo-100 aspect-square text-center h-12 w-12 place-content-center">
+              <i class="fa-solid fa-{{ data.icon }}"></i>
+            </div>
+            {% if not forloop.last %}
+              <div class="relative w-full grow h-0.5 bg-transparent border-dashed border-t-2 border-gray-400 my-6">
+                <div class="absolute -right-1 -top-[6.5px] w-2.5 h-2.5 border-t-2 border-r-2 border-gray-400 rotate-45"></div>
+              </div>
+            {% endif %}
+          </div>
+          <p class="text-xl w-12 text-center font-semibold text-brand-deep-purple">{{ data.count }}</p>
+          <p class="text-xs font-normal text-gray-500 whitespace-nowrap">{{ data.stage }}</p>
         </div>
-        {% endif %}
-      </div>
-      <p class="text-xl w-12 text-center font-semibold text-brand-deep-purple">{{ data.count }}</p>
-      <p class="text-xs font-normal text-gray-500 whitespace-nowrap">{{ data.stage }}</p>
+      {% endfor %}
     </div>
-    {% endfor %}
   </div>
-</div>
 {% endif %}
diff --git a/commcare_connect/templates/opportunity/opportunity_init.html b/commcare_connect/templates/opportunity/opportunity_init.html
index c11db9afcc..f8d746d914 100644
--- a/commcare_connect/templates/opportunity/opportunity_init.html
+++ b/commcare_connect/templates/opportunity/opportunity_init.html
@@ -3,29 +3,44 @@
 {% load crispy_forms_tags %}
 {% load duration_minutes %}
 {% load tailwind_filters %}
-
-{% block title %}{{ request.org }} - {% if is_update %}Edit Opportunity{% else %}Create Opportunity{% endif %}{% endblock %}
-
+{% block title %}
+  {{ request.org }} -
+  {% if is_update %}
+    Edit Opportunity
+  {% else %}
+    Create Opportunity
+  {% endif %}
+{% endblock %}
 {% block content %}
-<div class="container md:max-w-screen-lg mx-auto flex flex-col gap-8"
-  x-data="{ showAddApiKeyModal: false }">
-  {% include "opportunity/steps.html" with step='step1' org_slug=request.org.slug pk=form.instance.opportunity_id %}
-  <h6 class="title">{% if is_update %}Edit Details{% else %}Create Details{% endif %}</h6>
-  {% include "components/partial_form.html" %}
-
-  <div x-cloak x-show="showAddApiKeyModal" x-transition.opacity class="modal-backdrop">
-    <div @click.away="showAddApiKeyModal = false" x-transition class="modal">
-      <div class="header flex justify-between items-center mb-2">
-        <h2 class="title">Create API Key</h2>
-        <button @click="showAddApiKeyModal = false" class="button-icon" aria-label="Close">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
+  <div class="container md:max-w-screen-lg mx-auto flex flex-col gap-8"
+       x-data="{ showAddApiKeyModal: false }">
+    {% include "opportunity/steps.html" with step='step1' org_slug=request.org.slug pk=form.instance.opportunity_id %}
+    <h6 class="title">
+      {% if is_update %}
+        Edit Details
+      {% else %}
+        Create Details
+      {% endif %}
+    </h6>
+    {% include "components/partial_form.html" %}
+    <div x-cloak
+         x-show="showAddApiKeyModal"
+         x-transition.opacity
+         class="modal-backdrop">
+      <div @click.away="showAddApiKeyModal = false" x-transition class="modal">
+        <div class="header flex justify-between items-center mb-2">
+          <h2 class="title">Create API Key</h2>
+          <button @click="showAddApiKeyModal = false"
+                  class="button-icon"
+                  aria-label="Close">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+        <form hx-post="{% url "opportunity:add_api_key" request.org.slug %}"
+              @htmx:after-request="showAddApiKeyModal = !$event.detail.successful; $dispatch('reload_api_keys')">
+          {% crispy api_key_form %}
+        </form>
       </div>
-      <form hx-post="{% url "opportunity:add_api_key" request.org.slug %}"
-        @htmx:after-request="showAddApiKeyModal = !$event.detail.successful; $dispatch('reload_api_keys')">
-        {% crispy api_key_form %}
-      </form>
     </div>
   </div>
-</div>
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/opportunity_menu.html b/commcare_connect/templates/opportunity/opportunity_menu.html
index 23ffc78566..d7bdd92058 100644
--- a/commcare_connect/templates/opportunity/opportunity_menu.html
+++ b/commcare_connect/templates/opportunity/opportunity_menu.html
@@ -1,79 +1,68 @@
 {% load i18n %}
-
-<div
-  x-show="isOpen"
-  x-cloak
-  @click.away="isOpen = false"
-  x-transition:enter="transition ease-out duration-200"
-  x-transition:enter-start="opacity-0 scale-95"
-  x-transition:enter-end="opacity-100 scale-100"
-  x-transition:leave="transition ease-in duration-150"
-  x-transition:leave-start="opacity-100 scale-100"
-  x-transition:leave-end="opacity-0 scale-95"
-  class="absolute right-0 top-8 w-50 py-2 bg-white rounded-lg shadow-xl z-20"
->
+<div x-show="isOpen"
+     x-cloak
+     @click.away="isOpen = false"
+     x-transition:enter="transition ease-out duration-200"
+     x-transition:enter-start="opacity-0 scale-95"
+     x-transition:enter-end="opacity-100 scale-100"
+     x-transition:leave="transition ease-in duration-150"
+     x-transition:leave-start="opacity-100 scale-100"
+     x-transition:leave-end="opacity-0 scale-95"
+     class="absolute right-0 top-8 w-50 py-2 bg-white rounded-lg shadow-xl z-20">
   <ul>
-     {% if not opportunity.managed or request.is_opportunity_pm %}
-    <li>
-       <a href="{% url 'opportunity:edit' request.org.slug opportunity.opportunity_id %}" class="block px-4 py-2.5 text-sm text-brand-deep-purple"
-        >{% translate "Edit Opportunity" %}</a
-      >
-    </li>
-    <li>
-       <a href="{% url 'opportunity:add_payment_unit' request.org.slug opportunity.opportunity_id %}"
-        class="block px-4 py-2.5 text-sm text-brand-deep-purple">
-        {% translate "Add Payment Unit" %}
-      </a>
-    </li>
+    {% if not opportunity.managed or request.is_opportunity_pm %}
+      <li>
+        <a href="{% url 'opportunity:edit' request.org.slug opportunity.opportunity_id %}"
+           class="block px-4 py-2.5 text-sm text-brand-deep-purple">{% translate "Edit Opportunity" %}</a>
+      </li>
+      <li>
+        <a href="{% url 'opportunity:add_payment_unit' request.org.slug opportunity.opportunity_id %}"
+           class="block px-4 py-2.5 text-sm text-brand-deep-purple">{% translate "Add Payment Unit" %}</a>
+      </li>
     {% endif %}
-
     {% if opportunity.managed %}
-    <li>
-       <a href="{% url 'opportunity:invoice_list' request.org.slug opportunity.opportunity_id %}" class="block px-4 py-2.5 text-sm text-brand-deep-purple"
-        >{% translate "View Invoices" %}</a
-      >
-    </li>
+      <li>
+        <a href="{% url 'opportunity:invoice_list' request.org.slug opportunity.opportunity_id %}"
+           class="block px-4 py-2.5 text-sm text-brand-deep-purple">{% translate "View Invoices" %}</a>
+      </li>
     {% endif %}
     <li x-data="{showMoreOptions: false}">
-      <a class="block px-4 py-2.5 text-sm text-brand-deep-purple" @click="showMoreOptions = true">{% translate "Catchment Areas" %}</a>
+      <a class="block px-4 py-2.5 text-sm text-brand-deep-purple"
+         @click="showMoreOptions = true">{% translate "Catchment Areas" %}</a>
       <div x-show="showMoreOptions"
-          x-cloak
-          @click.away="showMoreOptions = false"
-          class="ms-4"
-        >
-        <a class="block px-4 py-2.5 text-sm text-brand-deep-purple" @click="showCatchmentImportModal = true">{% translate "Import" %}</a>
-        <a class="block px-4 py-2.5 text-sm text-brand-deep-purple" @click="showCatchmentExportModal = true">{% translate "Export" %}</a>
+           x-cloak
+           @click.away="showMoreOptions = false"
+           class="ms-4">
+        <a class="block px-4 py-2.5 text-sm text-brand-deep-purple"
+           @click="showCatchmentImportModal = true">{% translate "Import" %}</a>
+        <a class="block px-4 py-2.5 text-sm text-brand-deep-purple"
+           @click="showCatchmentExportModal = true">{% translate "Export" %}</a>
       </div>
     </li>
     {% if not opportunity.has_ended %}
-    <li>
-      <a href="{% url 'opportunity:user_invite' request.org.slug opportunity.opportunity_id %}" class="block px-4 py-2.5 text-sm text-brand-deep-purple"
-        >{% translate "Add Connect Workers" %}</a
-      >
-    </li>
+      <li>
+        <a href="{% url 'opportunity:user_invite' request.org.slug opportunity.opportunity_id %}"
+           class="block px-4 py-2.5 text-sm text-brand-deep-purple">{% translate "Add Connect Workers" %}</a>
+      </li>
     {% endif %}
     <li>
-      <a href="{% url 'opportunity:add_budget_existing_users' request.org.slug opportunity.opportunity_id %}" class="block px-4 py-2.5 text-sm text-brand-deep-purple"
-        >{% translate "Add Budget" %}</a
-      >
+      <a href="{% url 'opportunity:add_budget_existing_users' request.org.slug opportunity.opportunity_id %}"
+         class="block px-4 py-2.5 text-sm text-brand-deep-purple">{% translate "Add Budget" %}</a>
     </li>
     {% if not opportunity.managed or request.is_opportunity_pm %}
-    <li>
-      <a  href="{% url 'opportunity:verification_flags_config' request.org.slug opportunity.opportunity_id %}" class="block px-4 py-2.5 text-sm text-brand-deep-purple"
-        >{% translate "Verification Flags" %}</a
-      >
-    </li>
+      <li>
+        <a href="{% url 'opportunity:verification_flags_config' request.org.slug opportunity.opportunity_id %}"
+           class="block px-4 py-2.5 text-sm text-brand-deep-purple">{% translate "Verification Flags" %}</a>
+      </li>
     {% endif %}
     <li>
-      <a href="{% url 'opportunity:send_message_mobile_users' request.org.slug opportunity.opportunity_id %}" class="block px-4 py-2.5 text-sm text-brand-deep-purple"
-        >{% translate "Send Message" %}</a
-      >
+      <a href="{% url 'opportunity:send_message_mobile_users' request.org.slug opportunity.opportunity_id %}"
+         class="block px-4 py-2.5 text-sm text-brand-deep-purple">{% translate "Send Message" %}</a>
     </li>
     {% if not opportunity.managed or request.is_opportunity_pm %}
       <li>
-        <a href="{% url 'opportunity:task_types_config' request.org.slug opportunity.opportunity_id %}" class="block px-4 py-2.5 text-sm text-brand-deep-purple">
-          {% translate "Configure Task Types" %}
-        </a>
+        <a href="{% url 'opportunity:task_types_config' request.org.slug opportunity.opportunity_id %}"
+           class="block px-4 py-2.5 text-sm text-brand-deep-purple">{% translate "Configure Task Types" %}</a>
       </li>
     {% endif %}
   </ul>
diff --git a/commcare_connect/templates/opportunity/opportunity_resource_modal.html b/commcare_connect/templates/opportunity/opportunity_resource_modal.html
index cc6aa6409d..c70ab1d251 100644
--- a/commcare_connect/templates/opportunity/opportunity_resource_modal.html
+++ b/commcare_connect/templates/opportunity/opportunity_resource_modal.html
@@ -1,86 +1,74 @@
-<div x-show="showModal"
-    class="fixed inset-0 z-50 overflow-y-auto">
-
-    <!-- Background overlay -->
-    <div class="fixed inset-0 bg-black/50 bg-opacity-50 transition-opacity"
-            @click="showModal = false;"></div>
-
-    <!-- Modal content -->
-    <div class="flex items-center justify-center min-h-screen p-4">
-        <div class="relative rounded-2xl bg-gray-100 shadow-xl w-2/3 h-1/2 mx-auto overflow-hidden p-3"
-                @click.away="showModal = false;">
-            <!-- Modal header with tabs -->
-            <div class="flex flex-col w-full"
-                 x-init="selectedTab='Learn App'">
-
-
-                <!-- Tabs -->
-                <div class="flex relative mx-auto items-center shadow rounded-lg justify-between w-full px-3 mb-3 bg-slate-50 h-14">
-                    <ul class="tabs">
-                        <li x-tooltip.raw.html.interactive="<a href='{{ opportunity.learn_app.url }}' target='_blank' class='underline'>{{ opportunity.learn_app.name }}</a>"
-                            @click="selectedTab = 'Learn App'"
-                            :class="{ 'active': selectedTab === 'Learn App' }">
-                            <span>Learn App</span>
-                            <div x-show="selectedTab === 'Learn App'"></div>
-                        </li>
-                        <!-- Delivery App Tab -->
-                        <li x-tooltip.raw.html.interactive="<a href='{{ opportunity.deliver_app.url }}' target='_blank' class='underline'>{{ opportunity.deliver_app.name }}</a>"
-                            @click="selectedTab = 'Deliver App'"
-                            :class="{ 'active': selectedTab === 'Deliver App' }">
-                            <span>Deliver App</span>
-                            <div x-show="selectedTab === 'Deliver App'"></div>
-                        </li>
-                        <!-- Payment Units Tab -->
-                        <li @click="selectedTab = 'Payments Units'"
-                            :class="{ 'active': selectedTab === 'Payments Units' }">
-                            <span>Payment Units</span>
-                            <div x-show="selectedTab === 'Payments Units'"></div>
-                        </li>
-                    </ul>
-
-                    <!-- Close button -->
-                    <button @click="showModal = false;" id="button" class="button-icon" >
-                        <i class="fa-solid fa-xmark text-brand-deep-purple"></i>
-                    </button>
-                </div>
-
-                <!-- Modal body / Tab content -->
-                <div class="z-50 bg-white ">
-                    <div x-show="selectedTab === 'Learn App'"
-                            hx-get="{% url 'opportunity:learn_module_table' request.org.slug opportunity.opportunity_id %}"
-                            hx-trigger="tabShown from:body"
-                            hx-swap="innerHTML"
-                            class=" rounded-lg h-full w-full">
-                        <div class="flex justify-center items-center h-full">
-                            <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-brand-deep-purple"></div>
-                        </div>
-                    </div>
-
-                    <!-- Deliver App Content -->
-                    <div x-show="selectedTab === 'Deliver App'"
-                            hx-get="{% url 'opportunity:deliver_unit_table' request.org.slug opportunity.opportunity_id %}"
-                            hx-trigger="tabShown from:body"
-                            hx-swap="innerHTML"
-                            class="rounded-lg h-full w-full">
-                        <div class="flex justify-center items-center h-full">
-                            <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-brand-deep-purple"></div>
-                        </div>
-                    </div>
-
-                    <!-- Payment Units Content -->
-                    <div x-show="selectedTab === 'Payments Units'"
-                            hx-get="{% url 'opportunity:payment_unit_table' request.org.slug opportunity.opportunity_id %}"
-                           hx-trigger="tabShown from:body"
-                            hx-swap="innerHTML"
-                            class="rounded-lg h-full w-full">
-                        <div class="flex justify-center items-center h-full">
-                            <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-brand-deep-purple"></div>
-                        </div>
-                    </div>
-
-                </div>
-
+<div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto">
+  <!-- Background overlay -->
+  <div class="fixed inset-0 bg-black/50 bg-opacity-50 transition-opacity"
+       @click="showModal = false;"></div>
+  <!-- Modal content -->
+  <div class="flex items-center justify-center min-h-screen p-4">
+    <div class="relative rounded-2xl bg-gray-100 shadow-xl w-2/3 h-1/2 mx-auto overflow-hidden p-3"
+         @click.away="showModal = false;">
+      <!-- Modal header with tabs -->
+      <div class="flex flex-col w-full" x-init="selectedTab='Learn App'">
+        <!-- Tabs -->
+        <div class="flex relative mx-auto items-center shadow rounded-lg justify-between w-full px-3 mb-3 bg-slate-50 h-14">
+          <ul class="tabs">
+            <li x-tooltip.raw.html.interactive="<a href='{{ opportunity.learn_app.url }}' target='_blank' class='underline'>{{ opportunity.learn_app.name }}</a>"
+                @click="selectedTab = 'Learn App'"
+                :class="{ 'active': selectedTab === 'Learn App' }">
+              <span>Learn App</span>
+              <div x-show="selectedTab === 'Learn App'"></div>
+            </li>
+            <!-- Delivery App Tab -->
+            <li x-tooltip.raw.html.interactive="<a href='{{ opportunity.deliver_app.url }}' target='_blank' class='underline'>{{ opportunity.deliver_app.name }}</a>"
+                @click="selectedTab = 'Deliver App'"
+                :class="{ 'active': selectedTab === 'Deliver App' }">
+              <span>Deliver App</span>
+              <div x-show="selectedTab === 'Deliver App'"></div>
+            </li>
+            <!-- Payment Units Tab -->
+            <li @click="selectedTab = 'Payments Units'"
+                :class="{ 'active': selectedTab === 'Payments Units' }">
+              <span>Payment Units</span>
+              <div x-show="selectedTab === 'Payments Units'"></div>
+            </li>
+          </ul>
+          <!-- Close button -->
+          <button @click="showModal = false;" id="button" class="button-icon">
+            <i class="fa-solid fa-xmark text-brand-deep-purple"></i>
+          </button>
+        </div>
+        <!-- Modal body / Tab content -->
+        <div class="z-50 bg-white ">
+          <div x-show="selectedTab === 'Learn App'"
+               hx-get="{% url 'opportunity:learn_module_table' request.org.slug opportunity.opportunity_id %}"
+               hx-trigger="tabShown from:body"
+               hx-swap="innerHTML"
+               class=" rounded-lg h-full w-full">
+            <div class="flex justify-center items-center h-full">
+              <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-brand-deep-purple"></div>
+            </div>
+          </div>
+          <!-- Deliver App Content -->
+          <div x-show="selectedTab === 'Deliver App'"
+               hx-get="{% url 'opportunity:deliver_unit_table' request.org.slug opportunity.opportunity_id %}"
+               hx-trigger="tabShown from:body"
+               hx-swap="innerHTML"
+               class="rounded-lg h-full w-full">
+            <div class="flex justify-center items-center h-full">
+              <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-brand-deep-purple"></div>
+            </div>
+          </div>
+          <!-- Payment Units Content -->
+          <div x-show="selectedTab === 'Payments Units'"
+               hx-get="{% url 'opportunity:payment_unit_table' request.org.slug opportunity.opportunity_id %}"
+               hx-trigger="tabShown from:body"
+               hx-swap="innerHTML"
+               class="rounded-lg h-full w-full">
+            <div class="flex justify-center items-center h-full">
+              <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-brand-deep-purple"></div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/opportunity/opportunity_worker.html b/commcare_connect/templates/opportunity/opportunity_worker.html
index dc44232da1..9d208b9e98 100644
--- a/commcare_connect/templates/opportunity/opportunity_worker.html
+++ b/commcare_connect/templates/opportunity/opportunity_worker.html
@@ -1,88 +1,69 @@
 {% extends "base.html" %}
 {% load static %}
 {% block css %}
-{{ block.super }}
-<link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 {% endblock css %}
 {% block javascript %}
-{{ block.super }}
-<script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
+  {{ block.super }}
+  <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
 {% endblock javascript %}
 {% block content %}
-{% load crispy_forms_tags %}
-
-{% include 'components/breadcrumbs.html' with path=path %}
-
-<div id="loadingIndicator" class="loading-indicator htmx-indicator">
+  {% load crispy_forms_tags %}
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <div id="loadingIndicator" class="loading-indicator htmx-indicator">
     <div class="loading-content">
-    <div class="loading-spinner"></div>
-    <p class="loading-text">Loading...</p>
+      <div class="loading-spinner"></div>
+      <p class="loading-text">Loading...</p>
     </div>
-</div>
-
-<div class="flex flex-col w-full gap-2" x-data="connectWorkers()">
+  </div>
+  <div class="flex flex-col w-full gap-2" x-data="connectWorkers()">
     <!-- Tabs -->
     <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14">
-    <ul id="tabs" class="tabs">
-      {% for tab in tabs %}
-      <li
-        id="{{ tab.key }}-tab"
-        hx-get="{{ tab.url }}"
-        hx-indicator="#loadingIndicator"
-        hx-push-url="true"
-        {% if tab.key == active_tab %}
-        hx-trigger="load"
-        {% endif %}
-        class="tab-item {% if tab.key == active_tab %}active{% endif %}"
-      >
-        <span>{{ tab.label }}</span>
-        {% if tab.key == active_tab %}
-        <div></div>
-        {% endif %}
-      </li>
-      {% endfor %}
-    </ul>
-    <div class="flex justify-end gap-2">
+      <ul id="tabs" class="tabs">
+        {% for tab in tabs %}
+          <li id="{{ tab.key }}-tab"
+              hx-get="{{ tab.url }}"
+              hx-indicator="#loadingIndicator"
+              hx-push-url="true"
+              {% if tab.key == active_tab %}hx-trigger="load"{% endif %}
+              class="tab-item {% if tab.key == active_tab %}active{% endif %}">
+            <span>{{ tab.label }}</span>
+            {% if tab.key == active_tab %}<div></div>{% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+      <div class="flex justify-end gap-2">
         <!-- Tab Options -->
         {% if export_task_id %}
-        <div class="flex">
-            <div
-            hx-get="{% url 'opportunity:export_status' request.org.slug export_task_id %}"
-            hx-target="this"
-            hx-trigger="load"
-            hx-swap="outerHTML"
-            class="flex items-center justify-center"
-            >
-            <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-blue-500"></div>
-            <span class="sr-only">Loading...</span>
+          <div class="flex">
+            <div hx-get="{% url 'opportunity:export_status' request.org.slug export_task_id %}"
+                 hx-target="this"
+                 hx-trigger="load"
+                 hx-swap="outerHTML"
+                 class="flex items-center justify-center">
+              <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-blue-500"></div>
+              <span class="sr-only">Loading...</span>
             </div>
-        </div>
+          </div>
         {% endif %}
-        <div id="tab-options" class="flex gap-x-4 items-center">
-        </div>
+        <div id="tab-options" class="flex gap-x-4 items-center"></div>
+      </div>
     </div>
-    </div>
-
     <!-- Tab Content Container -->
-    <div
-        id="table"
-        class="w-full"
-    ></div>
-</div>
+    <div id="table" class="w-full"></div>
+  </div>
 {% endblock content %}
-
 {% block inline_javascript %}
-
-{% if filter_usage_data %}
-<script>
+  {% if filter_usage_data %}
+    <script>
   window.addEventListener('DOMContentLoaded', () => {
     const data = {{ filter_usage_data|safe }};
     window.gtmSendEvent('filters_applied', data);
   });
-</script>
-{% endif %}
-
-<script>
+    </script>
+  {% endif %}
+  <script>
   document.addEventListener('alpine:init', () => {
     Alpine.data('connectWorkers', () => ({
       showWorkerExportModal: false,
@@ -107,5 +88,5 @@
       }
     }));
   });
-</script>
+  </script>
 {% endblock inline_javascript %}
diff --git a/commcare_connect/templates/opportunity/opportunity_worker_learn.html b/commcare_connect/templates/opportunity/opportunity_worker_learn.html
index a9b98492e0..a5bd64e792 100644
--- a/commcare_connect/templates/opportunity/opportunity_worker_learn.html
+++ b/commcare_connect/templates/opportunity/opportunity_worker_learn.html
@@ -1,32 +1,28 @@
 {% extends "base.html" %}
 {% load render_table from django_tables2 %}
-
 {% block content %}
-{% include 'components/breadcrumbs.html' with path=path %}
-
-<div class="flex flex-col w-full gap-2">
-  <div class="flex items-center w-full gap-4 p-4 min-h-32 profile-bg bg-brand-indigo rounded-2xl">
-    {% include "components/worker_page/profile.html" with opportunity_access=access %}
-    <div class="flex items-center gap-4 w-full">
-      <div class="w-1/5 h-full bg-white/10 text-white relative flex flex-col justify-between p-4 rounded-lg">
-        <div class="flex justify-between items-center">
-          <div class="text-2xl">{{ total_learn_duration }}</div>
-          <div class="hidden lg:block">
-            <i class="fa-solid fa-book-open text-xl"></i>
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <div class="flex flex-col w-full gap-2">
+    <div class="flex items-center w-full gap-4 p-4 min-h-32 profile-bg bg-brand-indigo rounded-2xl">
+      {% include "components/worker_page/profile.html" with opportunity_access=access %}
+      <div class="flex items-center gap-4 w-full">
+        <div class="w-1/5 h-full bg-white/10 text-white relative flex flex-col justify-between p-4 rounded-lg">
+          <div class="flex justify-between items-center">
+            <div class="text-2xl">{{ total_learn_duration }}</div>
+            <div class="hidden lg:block">
+              <i class="fa-solid fa-book-open text-xl"></i>
+            </div>
+          </div>
+          <div class="pt-4 text-sm flex items-center justify-between">
+            <span>Total Time Learning</span>
           </div>
-        </div>
-        <div class="pt-4 text-sm flex items-center justify-between">
-          <span>Total Time Learning</span>
         </div>
       </div>
     </div>
+    <!-- Tabs -->
+    <div class="relative flex items-center justify-between w-full px-4 mx-auto mb-2 rounded-lg shadow-sm bg-slate-50 h-14">
+      <p class="text-sm font-medium text-brand-deep-purple">Learn Progress</p>
+    </div>
   </div>
-
-  <!-- Tabs -->
-  <div class="relative flex items-center justify-between w-full px-4 mx-auto mb-2 rounded-lg shadow-sm bg-slate-50 h-14">
-    <p class="text-sm font-medium text-brand-deep-purple">Learn Progress</p>
-  </div>
-
-</div>
-{% render_table table %}
+  {% render_table table %}
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/opportunity_worker_progress.html b/commcare_connect/templates/opportunity/opportunity_worker_progress.html
index 4ce28820e0..9169c197f6 100644
--- a/commcare_connect/templates/opportunity/opportunity_worker_progress.html
+++ b/commcare_connect/templates/opportunity/opportunity_worker_progress.html
@@ -1,69 +1,63 @@
 {% if skeleton %}
-<!-- Skeleton Loader with HTMX call -->
-<div
-  id="worker-progress-container"
-  hx-get="{% url 'opportunity:worker_progress_stats' request.org.slug object.id %}"
-  hx-trigger="load"
-  hx-target="#worker-progress-container"
-  hx-swap="innerHTML"
->
-  <div class="flex gap-4 w-full justify-between p-4 rounded-b-xl bg-white animate-pulse">
-    {% for _ in "123" %}
-    <div class="flex flex-col p-2 bg-indigo-50 rounded-xl w-full">
-      <!-- Section title skeleton -->
-      <div class="h-4 w-1/3 bg-indigo-200 rounded my-2"></div>
-
-      <div class="bg-white p-4 rounded-lg">
-        {% for _ in "123" %}
-        <div class="flex gap-8 w-full items-end rounded-lg my-3">
-          <div class="flex flex-col gap-1.5 w-full">
-            <div class="flex gap-4 items-center">
-              <!-- Progress title skeleton -->
-              <div class="h-3 w-1/4 bg-gray-300 rounded"></div>
-              <!-- Badge skeleton -->
-              <div class="h-5 w-10 bg-indigo-100 rounded-full"></div>
-            </div>
-            <!-- Progress bar skeleton -->
-            <div class="w-full bg-gray-200 rounded-full h-2.5">
-              <div class="bg-indigo-300 h-2.5 rounded-full" style="width: 50%"></div>
-            </div>
+  <!-- Skeleton Loader with HTMX call -->
+  <div id="worker-progress-container"
+       hx-get="{% url 'opportunity:worker_progress_stats' request.org.slug object.id %}"
+       hx-trigger="load"
+       hx-target="#worker-progress-container"
+       hx-swap="innerHTML">
+    <div class="flex gap-4 w-full justify-between p-4 rounded-b-xl bg-white animate-pulse">
+      {% for _ in "123" %}
+        <div class="flex flex-col p-2 bg-indigo-50 rounded-xl w-full">
+          <!-- Section title skeleton -->
+          <div class="h-4 w-1/3 bg-indigo-200 rounded my-2"></div>
+          <div class="bg-white p-4 rounded-lg">
+            {% for _ in "123" %}
+              <div class="flex gap-8 w-full items-end rounded-lg my-3">
+                <div class="flex flex-col gap-1.5 w-full">
+                  <div class="flex gap-4 items-center">
+                    <!-- Progress title skeleton -->
+                    <div class="h-3 w-1/4 bg-gray-300 rounded"></div>
+                    <!-- Badge skeleton -->
+                    <div class="h-5 w-10 bg-indigo-100 rounded-full"></div>
+                  </div>
+                  <!-- Progress bar skeleton -->
+                  <div class="w-full bg-gray-200 rounded-full h-2.5">
+                    <div class="bg-indigo-300 h-2.5 rounded-full" style="width: 50%"></div>
+                  </div>
+                </div>
+                <!-- Total skeleton -->
+                <div class="h-5 w-6 bg-gray-300 rounded"></div>
+              </div>
+            {% endfor %}
           </div>
-          <!-- Total skeleton -->
-          <div class="h-5 w-6 bg-gray-300 rounded"></div>
         </div>
-        {% endfor %}
-      </div>
+      {% endfor %}
     </div>
-    {% endfor %}
   </div>
-</div>
-
 {% else %}
-<!-- Actual Worker Progress UI -->
-<div class="flex gap-4 w-full justify-between p-4 rounded-b-xl bg-white">
-  {% for data in worker_progress %}
-  <div class="flex flex-col p-2 bg-indigo-50 rounded-xl w-full">
-    <h4 class="text-sm font-medium py-2">{{ data.title }}</h4>
-
-    <div class="bg-white p-4 rounded-lg">
-      {% for progress in data.progress %}
-      <div class="flex gap-4 w-full items-end rounded-lg my-3">
-        <div class="flex-1 flex flex-col gap-1.5 w-full">
-          <div class="flex gap-4 items-center">
-            <span class="text-sm block">{{ progress.title }}</span>
-            {% if progress.badge_type %}
-            <span class="badge badge-sm primary-light">{{ progress.value }}</span>
-            {% endif %}
-          </div>
-          <div class="w-full bg-gray-200 rounded-full h-2.5">
-            <div class="bg-brand-indigo h-2.5 rounded-full" style="width: {{ progress.percent }}%"></div>
-          </div>
+  <!-- Actual Worker Progress UI -->
+  <div class="flex gap-4 w-full justify-between p-4 rounded-b-xl bg-white">
+    {% for data in worker_progress %}
+      <div class="flex flex-col p-2 bg-indigo-50 rounded-xl w-full">
+        <h4 class="text-sm font-medium py-2">{{ data.title }}</h4>
+        <div class="bg-white p-4 rounded-lg">
+          {% for progress in data.progress %}
+            <div class="flex gap-4 w-full items-end rounded-lg my-3">
+              <div class="flex-1 flex flex-col gap-1.5 w-full">
+                <div class="flex gap-4 items-center">
+                  <span class="text-sm block">{{ progress.title }}</span>
+                  {% if progress.badge_type %}<span class="badge badge-sm primary-light">{{ progress.value }}</span>{% endif %}
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-2.5">
+                  <div class="bg-brand-indigo h-2.5 rounded-full"
+                       style="width: {{ progress.percent }}%"></div>
+                </div>
+              </div>
+              <span class="text-lg">{{ progress.total }}</span>
+            </div>
+          {% endfor %}
         </div>
-        <span class="text-lg">{{ progress.total }}</span>
       </div>
-      {% endfor %}
-    </div>
+    {% endfor %}
   </div>
-  {% endfor %}
-</div>
 {% endif %}
diff --git a/commcare_connect/templates/opportunity/partials/active_toggle_metadata.html b/commcare_connect/templates/opportunity/partials/active_toggle_metadata.html
index c60bbc4dfe..686b0789ca 100644
--- a/commcare_connect/templates/opportunity/partials/active_toggle_metadata.html
+++ b/commcare_connect/templates/opportunity/partials/active_toggle_metadata.html
@@ -1,25 +1,27 @@
 {% load i18n %}
 {% if latest_active_event %}
-<div class="flex items-center justify-between px-4 ps-0 pb-3 -mt-3">
+  <div class="flex items-center justify-between px-4 ps-0 pb-3 -mt-3">
     <p class="text-xs text-slate-500">
-        {% trans 'Last changed by' %}
-        {% with ctx=latest_active_event.pgh_context %}
+      {% trans 'Last changed by' %}
+      {% with ctx=latest_active_event.pgh_context %}
         {% if ctx and ctx.metadata and ctx.metadata.username %}
-            {% if ctx.metadata.username == "system" %}
+          {% if ctx.metadata.username == "system" %}
             <span class="font-medium">{% trans 'System' %}</span>
-            {% else %}
+          {% else %}
             <span class="font-medium">{{ ctx.metadata.username }}</span>
-            {% endif %}
+          {% endif %}
         {% else %}
-            <span class="font-medium">{% trans 'Unavailable' %}</span>
+          <span class="font-medium">{% trans 'Unavailable' %}</span>
         {% endif %}
-        {% endwith %}
-        {% blocktrans with date=latest_active_event.pgh_created_at|date:"d M Y" %}on {{ date }}{% endblocktrans %}
+      {% endwith %}
+      {% blocktrans with date=latest_active_event.pgh_created_at|date:"d M Y" %}on {{ date }}{% endblocktrans %}
     </p>
-    <button type="button" @click="showActiveHistory = true" aria-label="View active status history"
-        :aria-expanded="showActiveHistory"
-        class="text-xs text-brand-cornflower-blue underline underline-offset-2 whitespace-nowrap">
-        {% trans 'View history' %}
+    <button type="button"
+            @click="showActiveHistory = true"
+            aria-label="View active status history"
+            :aria-expanded="showActiveHistory"
+            class="text-xs text-brand-cornflower-blue underline underline-offset-2 whitespace-nowrap">
+      {% trans 'View history' %}
     </button>
-</div>
+  </div>
 {% endif %}
diff --git a/commcare_connect/templates/opportunity/partials/invoice_line_items.html b/commcare_connect/templates/opportunity/partials/invoice_line_items.html
index 4503c62762..a66b0283fb 100644
--- a/commcare_connect/templates/opportunity/partials/invoice_line_items.html
+++ b/commcare_connect/templates/opportunity/partials/invoice_line_items.html
@@ -1,6 +1,3 @@
 {% load i18n %}
 {% load django_tables2 %}
-
-<div class="overflow-x-auto">
-    {% render_table table %}
-</div>
+<div class="overflow-x-auto">{% render_table table %}</div>
diff --git a/commcare_connect/templates/opportunity/partials/revoke_suspension.html b/commcare_connect/templates/opportunity/partials/revoke_suspension.html
index f7f2d55f93..30f24db846 100644
--- a/commcare_connect/templates/opportunity/partials/revoke_suspension.html
+++ b/commcare_connect/templates/opportunity/partials/revoke_suspension.html
@@ -1,10 +1,6 @@
 {% load i18n %}
-
 {% if has_suspension_perm %}
-<button
-  hx-post="{{ revoke_url }}"
-  hx-vals='{"next": "{{ request.path }}"}'
-  class="button button-sm primary-light">
-  {% translate "Revoke" %}
-</button>
+  <button hx-post="{{ revoke_url }}"
+          hx-vals='{"next": "{{ request.path }}"}'
+          class="button button-sm primary-light">{% translate "Revoke" %}</button>
 {% endif %}
diff --git a/commcare_connect/templates/opportunity/payments.html b/commcare_connect/templates/opportunity/payments.html
index bbf1f49664..fa91d04a5d 100644
--- a/commcare_connect/templates/opportunity/payments.html
+++ b/commcare_connect/templates/opportunity/payments.html
@@ -1,22 +1,22 @@
 {% extends "opportunity/worker_list_base.html" %}
 {% load i18n %}
-
 {% block tab_options %}
   <div x-data="{showPaymentImportModal: false, showPaymentExportModal: false}">
-      <button type="button" class="button-icon shadow-sm" @click="showPaymentImportModal= true"
-              {% if request.org_membership.is_viewer %} disabled {% endif %}
-      >
-        <i class="fa-solid fa-upload text-brand-deep-purple"></i>
-      </button>
-      <button type="button" class="button-icon shadow-sm" @click="showPaymentExportModal = true"
-              {% if request.org_membership.is_viewer %} disabled {% endif %}
-      >
-        <i class="fa-solid fa-download text-brand-deep-purple"></i>
-      </button>
-      {% url 'opportunity:payment_import' request.org.slug opportunity.opportunity_id as payment_import_url %}
-      {% include "components/worker_page/import_modal.html" with modal_name="showPaymentImportModal" modal_title=_("Import Payment Records") import_url=payment_import_url input_name="payments" input_help_text=_('The file must contain at least the "Username", "Amount" and "Payment Date" columns.') %}
-
-      {% url 'opportunity:payment_export' org_slug=request.org.slug opp_id=opportunity.opportunity_id as payment_export_url %}
-      {% include "components/worker_page/export_modal.html" with modal_name="showPaymentExportModal" modal_title=_("Export Workers for Payments") export_url=payment_export_url export_form=export_form %}
+    <button type="button"
+            class="button-icon shadow-sm"
+            @click="showPaymentImportModal= true"
+            {% if request.org_membership.is_viewer %}disabled{% endif %}>
+      <i class="fa-solid fa-upload text-brand-deep-purple"></i>
+    </button>
+    <button type="button"
+            class="button-icon shadow-sm"
+            @click="showPaymentExportModal = true"
+            {% if request.org_membership.is_viewer %}disabled{% endif %}>
+      <i class="fa-solid fa-download text-brand-deep-purple"></i>
+    </button>
+    {% url 'opportunity:payment_import' request.org.slug opportunity.opportunity_id as payment_import_url %}
+    {% include "components/worker_page/import_modal.html" with modal_name="showPaymentImportModal" modal_title=_("Import Payment Records") import_url=payment_import_url input_name="payments" input_help_text=_('The file must contain at least the "Username", "Amount" and "Payment Date" columns.') %}
+    {% url 'opportunity:payment_export' org_slug=request.org.slug opp_id=opportunity.opportunity_id as payment_export_url %}
+    {% include "components/worker_page/export_modal.html" with modal_name="showPaymentExportModal" modal_title=_("Export Workers for Payments") export_url=payment_export_url export_form=export_form %}
   </div>
 {% endblock %}
diff --git a/commcare_connect/templates/opportunity/send_message.html b/commcare_connect/templates/opportunity/send_message.html
index 7a0cb820ff..88ec5362ec 100644
--- a/commcare_connect/templates/opportunity/send_message.html
+++ b/commcare_connect/templates/opportunity/send_message.html
@@ -4,30 +4,21 @@
 {% load crispy_forms_tags %}
 {% load duration_minutes %}
 {% load tailwind_filters %}
-
-{% if title %}{% block title %}{{ title }}{% endblock %} {% endif %}
-
+{% if title %}
+  {% block title %}{{ title }}{% endblock %}
+{% endif %}
 {% block content %}
   {% include 'components/breadcrumbs.html' with path=path %}
   <div class="md:max-w-screen-lg mx-auto flex flex-col gap-6">
     {% if form_title %}<h1 class="title">{{ form_title }}</h1>{% endif %}
     <form method="post"
-          x-data="{
-            selectAll: false,
-            selectedUsers: [],
-            toggleSelectAll() {
-              this.selectAll = !this.selectAll;
-              if(this.selectAll)
-                this.selectedUsers = JSON.parse(document.getElementById('user_ids').textContent);
-              else
-                this.selectedUsers = [];
-            }
-          }"
-    >
+          x-data="{ selectAll: false, selectedUsers: [], toggleSelectAll() { this.selectAll = !this.selectAll; if(this.selectAll) this.selectedUsers = JSON.parse(document.getElementById('user_ids').textContent); else this.selectedUsers = []; } }">
       {% csrf_token %}
       {% if form.selected_users.errors %}
         <div class="flex justify-between items-center warning-light p-4 rounded-lg mb-2"
-            x-data="{showAlert: true}" x-show="showAlert" x-cloak>
+             x-data="{showAlert: true}"
+             x-show="showAlert"
+             x-cloak>
           Please select users to send message.
           <button type="button" class="button-icon" @click="showAlert = false">
             <i class="fa-solid fa-xmark"></i>
@@ -40,24 +31,32 @@
             <p class="title-sm">Select Users*</p>
             <table class="base-table">
               <thead class="table-primary">
-              <tr>
-                <th><input type="checkbox" class="simple-checkbox" @click="toggleSelectAll()" x-bind:checked="selectAll" /></th>
-                <th>Name</th>
-                <th>Username</th>
-              </tr>
-              </thead>
-              <tbody>
-              {% for user in users %}
                 <tr>
-                  <td>
-                    <input type="checkbox" name="selected_users" id="id_selected_users" value={{ user.id }}
-                           x-model="selectedUsers"
-                           class="simple-checkbox {% if form.selected_users.errors %}is-invalid{% endif %}"/>
-                  </td>
-                  <td>{{ user.name }}</td>
-                  <td>{{ user.username }}</td>
+                  <th>
+                    <input type="checkbox"
+                           class="simple-checkbox"
+                           @click="toggleSelectAll()"
+                           x-bind:checked="selectAll" />
+                  </th>
+                  <th>Name</th>
+                  <th>Username</th>
                 </tr>
-              {% endfor %}
+              </thead>
+              <tbody>
+                {% for user in users %}
+                  <tr>
+                    <td>
+                      <input type="checkbox"
+                             name="selected_users"
+                             id="id_selected_users"
+                             value="{{ user.id }}"
+                             x-model="selectedUsers"
+                             class="simple-checkbox {% if form.selected_users.errors %}is-invalid{% endif %}" />
+                    </td>
+                    <td>{{ user.name }}</td>
+                    <td>{{ user.username }}</td>
+                  </tr>
+                {% endfor %}
               </tbody>
             </table>
           </div>
@@ -76,9 +75,11 @@
         </div>
       {% else %}
         <div class="text-center">
-          <b>No Users yet.</b> <br/>
-          <a class="button button-md primary-dark mt-2" href="{% url "opportunity:list" org_slug=request.org.slug %}">All
-            Opportunities</a>
+          <b>No Users yet.</b>
+          <br />
+          <a class="button button-md primary-dark mt-2"
+             href="{% url "opportunity:list" org_slug=request.org.slug %}">All
+          Opportunities</a>
         </div>
       {% endif %}
     </form>
diff --git a/commcare_connect/templates/opportunity/steps.html b/commcare_connect/templates/opportunity/steps.html
index b48d66d51c..3ce19e767e 100644
--- a/commcare_connect/templates/opportunity/steps.html
+++ b/commcare_connect/templates/opportunity/steps.html
@@ -1,19 +1,27 @@
 {% load static %}
 {% load crispy_forms_tags %}
-
 <div class="stepper mb-4" id="nav-tab" role="tablist">
-  <a class="{% if step == 'step1' %}active{% endif %}" id="step1-tab" data-toggle="tab" {% if pk and org_slug %}href="{% url 'opportunity:init_edit' org_slug=org_slug opp_id=pk %}"{% endif %}>
+  <a class="{% if step == 'step1' %}active{% endif %}"
+     id="step1-tab"
+     data-toggle="tab"
+     {% if pk and org_slug %}href="{% url 'opportunity:init_edit' org_slug=org_slug opp_id=pk %}"{% endif %}>
     <h6>1</h6>
     <span>Create Opportunity</span>
   </a>
   <hr class="border-t-2 border-dashed border-gray-300 w-full">
-  <a class="{% if step == 'step2' %}active{% endif %}" id="step2-tab" data-toggle="tab" href="{% if pk %} {% url 'opportunity:add_payment_units' org_slug=org_slug opp_id=pk %}{% endif %}">
+  <a class="{% if step == 'step2' %}active{% endif %}"
+     id="step2-tab"
+     data-toggle="tab"
+     href="{% if pk %} {% url 'opportunity:add_payment_units' org_slug=org_slug opp_id=pk %}{% endif %}">
     <h6>2</h6>
     <span>Payment Unit</span>
   </a>
   <hr class="border-t-2 border-dashed border-gray-300 w-full">
-  <a class="{% if step == 'step3' %}active{% endif %}" id="step3-tab" data-toggle="tab" href="{% if pk %} {% url 'opportunity:finalize' org_slug=org_slug opp_id=pk %}{% endif %}">
+  <a class="{% if step == 'step3' %}active{% endif %}"
+     id="step3-tab"
+     data-toggle="tab"
+     href="{% if pk %} {% url 'opportunity:finalize' org_slug=org_slug opp_id=pk %}{% endif %}">
     <h6>3</h6>
     <span>Budget</span>
   </a>
- </div>
+</div>
diff --git a/commcare_connect/templates/opportunity/suspended_users.html b/commcare_connect/templates/opportunity/suspended_users.html
index f924f0d004..809aff3856 100644
--- a/commcare_connect/templates/opportunity/suspended_users.html
+++ b/commcare_connect/templates/opportunity/suspended_users.html
@@ -1,9 +1,7 @@
 {% extends "base.html" %}
 {% load django_tables2 %}
 {% load static %}
-
 {% block title %}{{ request.org }} - Suspended Users{% endblock %}
-
 {% block content %}
   {% include 'components/breadcrumbs.html' with path=path %}
   {% render_table table %}
diff --git a/commcare_connect/templates/opportunity/task_types_config.html b/commcare_connect/templates/opportunity/task_types_config.html
index 55123cc0bf..a763f45f0e 100644
--- a/commcare_connect/templates/opportunity/task_types_config.html
+++ b/commcare_connect/templates/opportunity/task_types_config.html
@@ -1,59 +1,47 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load django_tables2 %}
-
-
-{% block title %}{{ request.org }} - {% translate "Configure Task Types" %}{% endblock %}
-
+{% block title %}
+  {{ request.org }} - {% translate "Configure Task Types" %}
+{% endblock %}
 {% block content %}
-{% include 'components/breadcrumbs.html' with path=path %}
-
-<div class="container md:max-w-screen-lg mx-auto flex flex-col gap-6"
-     x-data="{
-       showCreateTaskTypeModal: {% if form.errors %}true{% else %}false{% endif %},
-       showEditTaskTypeModal: false,
-       editTaskError: false,
-       task_units: {{ form.task_units_data }},
-       onTaskUnitSelectChange(taskUnitId) {
-         const unit = this.task_units[taskUnitId];
-         if (unit) {
-           document.getElementById('id_name').value = unit.name;
-           document.getElementById('id_description').value = unit.description;
-         }
-       }
-     }">
-  <h2 class="title">{% translate "Configure Task Types" %}</h2>
-
-  <div x-show="editTaskError" x-cloak
-    class="flex items-center justify-between p-4 rounded-lg border-[0.5px] bg-message-error text-message-error-text border-message-error-border">
-    <div class="flex items-center gap-2">
-      <i class="fa-solid fa-circle-exclamation"></i>
-      <span>{% translate "Failed to load task type. Please try again." %}</span>
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <div class="container md:max-w-screen-lg mx-auto flex flex-col gap-6" x-data="{ showCreateTaskTypeModal:
+    {% if form.errors %}
+      true
+    {% else %}
+      false
+    {% endif %}
+    , showEditTaskTypeModal: false, editTaskError: false, task_units: {{ form.task_units_data }}, onTaskUnitSelectChange(taskUnitId) { const unit = this.task_units[taskUnitId]; if (unit) { document.getElementById('id_name').value = unit.name; document.getElementById('id_description').value = unit.description; } } }">
+    <h2 class="title">{% translate "Configure Task Types" %}</h2>
+    <div x-show="editTaskError"
+         x-cloak
+         class="flex items-center justify-between p-4 rounded-lg border-[0.5px] bg-message-error text-message-error-text border-message-error-border">
+      <div class="flex items-center gap-2">
+        <i class="fa-solid fa-circle-exclamation"></i>
+        <span>{% translate "Failed to load task type. Please try again." %}</span>
+      </div>
+      <button type="button"
+              class="ml-4 text-xl font-light hover:font-normal focus:outline-none"
+              aria-label="Close"
+              @click="editTaskError = false">&times;</button>
     </div>
-    <button type="button" class="ml-4 text-xl font-light hover:font-normal focus:outline-none" aria-label="Close"
-      @click="editTaskError = false">&times;</button>
-  </div>
-
-  <div class="card_bg">
-    <div class="flex items-center gap-2 text-sm">
-      <span class="font-medium text-gray-600">{% translate "Connected Delivery App:" %}</span>
-      <span>{{ opportunity.deliver_app.name }}</span>
+    <div class="card_bg">
+      <div class="flex items-center gap-2 text-sm">
+        <span class="font-medium text-gray-600">{% translate "Connected Delivery App:" %}</span>
+        <span>{{ opportunity.deliver_app.name }}</span>
+      </div>
     </div>
+    <div class="card_bg !p-0 overflow-hidden">{% render_table table %}</div>
+    <div class="flex justify-end">
+      <button type="button"
+              class="button button-md primary-dark"
+              @click="showCreateTaskTypeModal = true">
+        <i class="fa-solid fa-plus mr-2"></i>
+        {% translate "Add New Task Type" %}
+      </button>
+    </div>
+    {% include "opportunity/new_task_type_modal.html" %}
+    {% include "opportunity/edit_task_type_modal.html" %}
   </div>
-
-  <div class="card_bg !p-0 overflow-hidden">
-    {% render_table table %}
-  </div>
-
-  <div class="flex justify-end">
-    <button type="button" class="button button-md primary-dark" @click="showCreateTaskTypeModal = true">
-      <i class="fa-solid fa-plus mr-2"></i>
-      {% translate "Add New Task Type" %}
-    </button>
-  </div>
-
-  {% include "opportunity/new_task_type_modal.html" %}
-  {% include "opportunity/edit_task_type_modal.html" %}
-</div>
-
 {% endblock content %}
diff --git a/commcare_connect/templates/opportunity/tasks.html b/commcare_connect/templates/opportunity/tasks.html
index 65f13663f7..4ecd8877f6 100644
--- a/commcare_connect/templates/opportunity/tasks.html
+++ b/commcare_connect/templates/opportunity/tasks.html
@@ -1,7 +1,6 @@
 {% extends "opportunity/worker_list_base.html" %}
 {% load i18n %}
 {% load crispy_forms_tags %}
-
 {% block tab_options %}
   {% include "components/filter_modal.html" with form_id="taskFilterForm" hx_indicator="#loadingIndicator" %}
   {% include "components/tomselect_init.html" %}
diff --git a/commcare_connect/templates/opportunity/user_task_details.html b/commcare_connect/templates/opportunity/user_task_details.html
index 453805c465..0b03164a95 100644
--- a/commcare_connect/templates/opportunity/user_task_details.html
+++ b/commcare_connect/templates/opportunity/user_task_details.html
@@ -1,73 +1,9 @@
 {% load i18n %}
-
-<div class="flex flex-col gap-6" x-data="{
-    slides: [
-      {% for image in images %}
-        { src: '{% url 'opportunity:fetch_attachment' org_slug=request.org.slug opp_id=completed_task.opportunity_access.opportunity.opportunity_id blob_id=image.blob_id %}', alt: '' },
-      {% endfor %}
-    ],
-    currentIndex: 0,
-    modalCurrentIndex: 0,
-    visibleSlides: 3,
-    modalVisibleSlides: 5,
-    popupOpen: false,
-
-    get visibleImages() {
-        const start = this.currentIndex;
-        return this.slides.slice(start, start + this.visibleSlides);
-    },
-
-    get modalThumbnails() {
-        const totalSlides = this.slides.length;
-        const halfVisible = Math.floor(this.modalVisibleSlides / 2);
-        let start = this.modalCurrentIndex - halfVisible;
-
-        if (start < 0) start = 0;
-        if (start + this.modalVisibleSlides > totalSlides) {
-            start = Math.max(0, totalSlides - this.modalVisibleSlides);
-        }
-
-        return this.slides.slice(start, Math.min(start + this.modalVisibleSlides, totalSlides));
-    },
-
-    nextSlide() {
-        if (this.currentIndex + this.visibleSlides < this.slides.length) {
-            this.currentIndex++;
-        }
-    },
-
-    prevSlide() {
-        if (this.currentIndex > 0) {
-            this.currentIndex--;
-        }
-    },
-
-    nextModal() {
-        if (this.modalCurrentIndex < this.slides.length - 1) {
-            this.modalCurrentIndex++;
-        }
-    },
-
-    prevModal() {
-        if (this.modalCurrentIndex > 0) {
-            this.modalCurrentIndex--;
-        }
-    },
-
-    openPopup(index) {
-        this.modalCurrentIndex = index;
-        this.popupOpen = true;
-    },
-
-    closePopup() {
-        this.popupOpen = false;
-    },
-
-    setModalImage(index) {
-        this.modalCurrentIndex = index;
-    }
-}">
-
+<div class="flex flex-col gap-6" x-data="{ slides: [
+  {% for image in images %}
+    { src: '{% url 'opportunity:fetch_attachment' org_slug=request.org.slug opp_id=completed_task.opportunity_access.opportunity.opportunity_id blob_id=image.blob_id %}', alt: '' },
+  {% endfor %}
+  ], currentIndex: 0, modalCurrentIndex: 0, visibleSlides: 3, modalVisibleSlides: 5, popupOpen: false,  get visibleImages() { const start = this.currentIndex; return this.slides.slice(start, start + this.visibleSlides); },  get modalThumbnails() { const totalSlides = this.slides.length; const halfVisible = Math.floor(this.modalVisibleSlides / 2); let start = this.modalCurrentIndex - halfVisible;  if (start < 0) start = 0; if (start + this.modalVisibleSlides > totalSlides) { start = Math.max(0, totalSlides - this.modalVisibleSlides); }  return this.slides.slice(start, Math.min(start + this.modalVisibleSlides, totalSlides)); },  nextSlide() { if (this.currentIndex + this.visibleSlides < this.slides.length) { this.currentIndex++; } },  prevSlide() { if (this.currentIndex > 0) { this.currentIndex--; } },  nextModal() { if (this.modalCurrentIndex < this.slides.length - 1) { this.modalCurrentIndex++; } },  prevModal() { if (this.modalCurrentIndex > 0) { this.modalCurrentIndex--; } },  openPopup(index) { this.modalCurrentIndex = index; this.popupOpen = true; },  closePopup() { this.popupOpen = false; },  setModalImage(index) { this.modalCurrentIndex = index; } }">
   <!-- Information -->
   <div class="grid grid-cols-3 gap-4">
     <p class="text-sm font-medium text-brand-deep-purple col-span-3">{% translate "Information" %}</p>
@@ -76,10 +12,10 @@
       <div class="text-sm font-normal text-brand-deep-purple">{{ completed_task.task.name }}</div>
     </div>
     {% if completed_task.task.description %}
-    <div class="col-span-3">
-      <div class="text-sm text-brand-blue-light">{% translate "Description" %}</div>
-      <div class="text-sm font-normal text-brand-deep-purple">{{ completed_task.task.description }}</div>
-    </div>
+      <div class="col-span-3">
+        <div class="text-sm text-brand-blue-light">{% translate "Description" %}</div>
+        <div class="text-sm font-normal text-brand-deep-purple">{{ completed_task.task.description }}</div>
+      </div>
     {% endif %}
     <div>
       <div class="text-sm text-brand-blue-light">{% translate "Status" %}</div>
@@ -88,7 +24,11 @@
     <div>
       <div class="text-sm text-brand-blue-light">{% translate "Assigned By" %}</div>
       <div class="text-sm font-normal text-brand-deep-purple">
-        {% if completed_task.assigned_by %}{{ completed_task.assigned_by.name }}{% else %}{% translate "Deleted user" %}{% endif %}
+        {% if completed_task.assigned_by %}
+          {{ completed_task.assigned_by.name }}
+        {% else %}
+          {% translate "Deleted user" %}
+        {% endif %}
       </div>
     </div>
     <div>
@@ -104,123 +44,113 @@
       <div class="text-sm font-normal text-brand-deep-purple">{{ completed_task.completed_at }}</div>
     </div>
   </div>
-
   {% if can_manage_tasks and completed_task.status == "assigned" %}
-  <div class="flex justify-end">
-    <button
-        type="button"
-        class="button button-md outline-style"
-        hx-get="{% url 'opportunity:edit_assigned_task' request.org.slug completed_task.opportunity_access.opportunity.opportunity_id completed_task.pk %}"
-        hx-target="#edit-assigned-task-form"
-        hx-swap="innerHTML"
-        hx-select="unset"
-        @htmx:after-request="if ($event.detail.successful) {
-                showEditTaskModal = true; editTaskError = false
-            } else { editTaskError = true }">
-      <i class="fa-regular fa-pen-to-square mr-1"></i> {% translate "Edit" %}
-    </button>
-  </div>
+    <div class="flex justify-end">
+      <button type="button"
+              class="button button-md outline-style"
+              hx-get="{% url 'opportunity:edit_assigned_task' request.org.slug completed_task.opportunity_access.opportunity.opportunity_id completed_task.pk %}"
+              hx-target="#edit-assigned-task-form"
+              hx-swap="innerHTML"
+              hx-select="unset"
+              @htmx:after-request="if ($event.detail.successful) { showEditTaskModal = true; editTaskError = false } else { editTaskError = true }">
+        <i class="fa-regular fa-pen-to-square mr-1"></i> {% translate "Edit" %}
+      </button>
+    </div>
   {% endif %}
-
   {% if images %}
-  <hr class="h-px bg-gray-200 border-0">
-
-  <!-- Media Section -->
-  <div class="flex justify-between">
-    <p class="text-sm font-medium text-brand-deep-purple">{% translate "Media" %}</p>
-    <div class="flex gap-2">
-      <button class="button-icon" @click="prevSlide()" :disabled="currentIndex === 0">
-        <i class="cursor-pointer fa-solid fa-arrow-left"
-           :class="currentIndex === 0 ? 'text-slate-200' : 'text-brand-deep-purple'"></i>
-      </button>
-      <button class="button-icon" @click="nextSlide()" :disabled="currentIndex + visibleSlides >= slides.length">
-        <i class="cursor-pointer fa-solid fa-arrow-right"
-           :class="currentIndex + visibleSlides >= slides.length ? 'text-slate-200' : 'text-brand-deep-purple'"></i>
-      </button>
+    <hr class="h-px bg-gray-200 border-0">
+    <!-- Media Section -->
+    <div class="flex justify-between">
+      <p class="text-sm font-medium text-brand-deep-purple">{% translate "Media" %}</p>
+      <div class="flex gap-2">
+        <button class="button-icon"
+                @click="prevSlide()"
+                :disabled="currentIndex === 0">
+          <i class="cursor-pointer fa-solid fa-arrow-left"
+             :class="currentIndex === 0 ? 'text-slate-200' : 'text-brand-deep-purple'"></i>
+        </button>
+        <button class="button-icon"
+                @click="nextSlide()"
+                :disabled="currentIndex + visibleSlides >= slides.length">
+          <i class="cursor-pointer fa-solid fa-arrow-right"
+             :class="currentIndex + visibleSlides >= slides.length ? 'text-slate-200' : 'text-brand-deep-purple'"></i>
+        </button>
+      </div>
+    </div>
+    <div class="grid grid-cols-9 gap-4 cursor-pointer">
+      <template x-for="(slide, index) in visibleImages" :key="index">
+        <img :src="slide.src"
+             :alt="slide.alt"
+             class="object-cover col-span-3 rounded-2xl aspect-square hover:opacity-90 transition-opacity"
+             @click="openPopup(index + currentIndex)" />
+      </template>
     </div>
-  </div>
-
-  <div class="grid grid-cols-9 gap-4 cursor-pointer">
-    <template x-for="(slide, index) in visibleImages" :key="index">
-      <img :src="slide.src"
-           :alt="slide.alt"
-           class="object-cover col-span-3 rounded-2xl aspect-square hover:opacity-90 transition-opacity"
-           @click="openPopup(index + currentIndex)"/>
-    </template>
-  </div>
   {% endif %}
-
   {% if hq_link %}
-  <hr class="h-px bg-gray-200 border-0">
-
-  <p class="text-sm font-medium text-brand-deep-purple">{% translate "Further Information" %}</p>
-  <div class="flex">
-    <a class="button button-md button-outline-rounded" href="{{ hq_link }}">
-      {% translate "View Form in CommCareHQ" %} <i class="fa-solid fa-arrow-right"></i>
-    </a>
-  </div>
+    <hr class="h-px bg-gray-200 border-0">
+    <p class="text-sm font-medium text-brand-deep-purple">{% translate "Further Information" %}</p>
+    <div class="flex">
+      <a class="button button-md button-outline-rounded" href="{{ hq_link }}">
+        {% translate "View Form in CommCareHQ" %} <i class="fa-solid fa-arrow-right"></i>
+      </a>
+    </div>
   {% endif %}
-
   <!-- Media Popup Modal -->
   {% if images %}
-  <div x-cloak
-       class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-       x-show="popupOpen"
-       @click.self="closePopup()"
-       x-transition.opacity>
-    <div class="relative max-w-lg p-4 bg-white rounded-lg popup-content">
-      <div class="flex justify-between mb-2">
-        <p class="text-sm font-medium text-brand-deep-purple">{% translate "Media" %}</p>
-        <button class="button-icon cursor-pointer" @click="closePopup()">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
-      </div>
-
-      <!-- Main Image -->
-      <div class="relative">
-        <img :src="slides[modalCurrentIndex].src"
-             :alt="slides[modalCurrentIndex].alt"
-             class="object-contain w-full rounded-lg max-h-[60vh]"/>
-        <button class="absolute bottom-2 right-2 button-icon">
-          <a :href="slides[modalCurrentIndex].src"
-             download="downloaded-image.jpg"
-             aria-label="Download Image">
-            <i class="fa-solid fa-download text-brand-deep-purple"></i>
-          </a>
-        </button>
-      </div>
-
-      <!-- Thumbnails -->
-      <div class="relative w-full flex items-center justify-center gap-4 mt-4">
-        <button class="absolute -left-1 z-10 px-4.5 py-2 bg-white border-2 rounded-3xl border-brand-border-light"
-                @click="prevModal()"
-                :disabled="modalCurrentIndex === 0"
-                :class="{'opacity-50': modalCurrentIndex === 0}">
-          <i class="fa-solid fa-arrow-left"></i>
-        </button>
-
-        <div class="flex justify-center gap-2 px-16 overflow-hidden">
-          <template x-for="(slide, idx) in modalThumbnails" :key="idx">
-            <div class="relative w-16 h-16 flex-shrink-0 cursor-pointer" @click="setModalImage(slides.indexOf(slide))">
-              <img :src="slide.src"
-                   :alt="slide.alt"
-                   class="object-cover w-full h-full rounded-lg"/>
-              <div x-show="slides.indexOf(slide) === modalCurrentIndex"
-                   class="absolute inset-0 bg-black/40 rounded-lg pointer-events-none transition-all duration-300">
+    <div x-cloak
+         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+         x-show="popupOpen"
+         @click.self="closePopup()"
+         x-transition.opacity>
+      <div class="relative max-w-lg p-4 bg-white rounded-lg popup-content">
+        <div class="flex justify-between mb-2">
+          <p class="text-sm font-medium text-brand-deep-purple">{% translate "Media" %}</p>
+          <button class="button-icon cursor-pointer" @click="closePopup()">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+        <!-- Main Image -->
+        <div class="relative">
+          <img :src="slides[modalCurrentIndex].src"
+               :alt="slides[modalCurrentIndex].alt"
+               class="object-contain w-full rounded-lg max-h-[60vh]" />
+          <button class="absolute bottom-2 right-2 button-icon">
+            <a :href="slides[modalCurrentIndex].src"
+               download="downloaded-image.jpg"
+               aria-label="Download Image">
+              <i class="fa-solid fa-download text-brand-deep-purple"></i>
+            </a>
+          </button>
+        </div>
+        <!-- Thumbnails -->
+        <div class="relative w-full flex items-center justify-center gap-4 mt-4">
+          <button class="absolute -left-1 z-10 px-4.5 py-2 bg-white border-2 rounded-3xl border-brand-border-light"
+                  @click="prevModal()"
+                  :disabled="modalCurrentIndex === 0"
+                  :class="{'opacity-50': modalCurrentIndex === 0}">
+            <i class="fa-solid fa-arrow-left"></i>
+          </button>
+          <div class="flex justify-center gap-2 px-16 overflow-hidden">
+            <template x-for="(slide, idx) in modalThumbnails" :key="idx">
+              <div class="relative w-16 h-16 flex-shrink-0 cursor-pointer"
+                   @click="setModalImage(slides.indexOf(slide))">
+                <img :src="slide.src"
+                     :alt="slide.alt"
+                     class="object-cover w-full h-full rounded-lg" />
+                <div x-show="slides.indexOf(slide) === modalCurrentIndex"
+                     class="absolute inset-0 bg-black/40 rounded-lg pointer-events-none transition-all duration-300">
+                </div>
               </div>
-            </div>
-          </template>
+            </template>
+          </div>
+          <button class="absolute -right-1 z-10 px-4.5 py-2 bg-white border-2 rounded-3xl border-brand-border-light"
+                  @click="nextModal()"
+                  :disabled="modalCurrentIndex >= slides.length - 1"
+                  :class="{'opacity-50': modalCurrentIndex >= slides.length - 1}">
+            <i class="fa-solid fa-arrow-right"></i>
+          </button>
         </div>
-
-        <button class="absolute -right-1 z-10 px-4.5 py-2 bg-white border-2 rounded-3xl border-brand-border-light"
-                @click="nextModal()"
-                :disabled="modalCurrentIndex >= slides.length - 1"
-                :class="{'opacity-50': modalCurrentIndex >= slides.length - 1}">
-          <i class="fa-solid fa-arrow-right"></i>
-        </button>
       </div>
     </div>
-  </div>
   {% endif %}
-
 </div>
diff --git a/commcare_connect/templates/opportunity/user_tasks.html b/commcare_connect/templates/opportunity/user_tasks.html
index 5ce3fd96cf..3786021c17 100644
--- a/commcare_connect/templates/opportunity/user_tasks.html
+++ b/commcare_connect/templates/opportunity/user_tasks.html
@@ -1,140 +1,127 @@
 {% extends 'base.html' %}
-
 {% load i18n %}
 {% load django_tables2 %}
 {% load crispy_forms_tags %}
-
 {% block content %}
-{% include 'components/breadcrumbs.html' with path=path %}
-<div class="w-full space-y-4"
-     x-data="{
-       showCreateTaskModal: false,
-       showEditTaskModal: false,
-       showFilterModal: false,
-       editTaskError: false,
-       ...selectableTable()
-     }"
-  >
-  <div x-show="editTaskError" x-cloak role="alert"
-    class="flex items-center justify-between p-4 rounded-lg border-[0.5px] bg-message-error text-message-error-text border-message-error-border">
-    <div class="flex items-center gap-2">
-      <i class="fa-solid fa-circle-exclamation"></i>
-      <span>{% trans "Failed to load task. Please try again." %}</span>
-    </div>
-    <button type="button" class="ml-4 text-xl font-light hover:font-normal focus:outline-none" aria-label="{% trans "Close" %}"
-      @click="editTaskError = false">&times;</button>
-  </div>
-
-  {% include "components/worker_page/worker_profile_kpi.html" %}
-  <div class="relative">
-    {% include 'components/worker_page/visit_task_tabs.html' %}
-    <div class="absolute right-4 top-1/2 -translate-y-1/2">
-      <button type="button" @click="showFilterModal = true" class="relative button-icon shadow-sm">
-        <i class="fa-solid fa-sliders text-brand-deep-purple"></i>
-        {% if filters_applied_count %}
-        <span class="absolute flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-brand-marigold border-2 border-white rounded-full transform translate-x-1/2 -translate-y-1/2">
-          {{ filters_applied_count }}
-        </span>
-        {% endif %}
-      </button>
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <div class="w-full space-y-4"
+       x-data="{ showCreateTaskModal: false, showEditTaskModal: false, showFilterModal: false, editTaskError: false, ...selectableTable() }">
+    <div x-show="editTaskError"
+         x-cloak
+         role="alert"
+         class="flex items-center justify-between p-4 rounded-lg border-[0.5px] bg-message-error text-message-error-text border-message-error-border">
+      <div class="flex items-center gap-2">
+        <i class="fa-solid fa-circle-exclamation"></i>
+        <span>{% trans "Failed to load task. Please try again." %}</span>
+      </div>
+      <button type="button"
+              class="ml-4 text-xl font-light hover:font-normal focus:outline-none"
+              aria-label="{% trans "Close" %}"
+              @click="editTaskError = false">&times;</button>
     </div>
-  </div>
-
-  <div x-show="showFilterModal" x-cloak class="modal-backdrop">
-    <div class="modal">
-      <div class="header text-lg font-semibold text-brand-deep-purple">
-        <h1>{% trans "Filters" %}</h1>
-        <button @click="showFilterModal = false">
-          <i class="fa-solid fa-xmark text-xl"></i>
+    {% include "components/worker_page/worker_profile_kpi.html" %}
+    <div class="relative">
+      {% include 'components/worker_page/visit_task_tabs.html' %}
+      <div class="absolute right-4 top-1/2 -translate-y-1/2">
+        <button type="button"
+                @click="showFilterModal = true"
+                class="relative button-icon shadow-sm">
+          <i class="fa-solid fa-sliders text-brand-deep-purple"></i>
+          {% if filters_applied_count %}
+            <span class="absolute flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-brand-marigold border-2 border-white rounded-full transform translate-x-1/2 -translate-y-1/2">
+              {{ filters_applied_count }}
+            </span>
+          {% endif %}
         </button>
       </div>
-      <form id="userTaskFilterForm" method="get" action="." class="content">
-        <input type="hidden" name="user" value="{{ request.GET.user }}">
-        <div class="modal-body">
-          {% crispy filter_form %}
-        </div>
-        <div class="footer">
-          <button type="button" @click="showFilterModal = false" class="button button-md outline-style">{% trans "Close" %}</button>
-          <button form="userTaskFilterForm" type="submit" @click="showFilterModal = false" class="button button-md primary-dark">
-            {% trans "Apply" %}
+    </div>
+    <div x-show="showFilterModal" x-cloak class="modal-backdrop">
+      <div class="modal">
+        <div class="header text-lg font-semibold text-brand-deep-purple">
+          <h1>{% trans "Filters" %}</h1>
+          <button @click="showFilterModal = false">
+            <i class="fa-solid fa-xmark text-xl"></i>
           </button>
         </div>
-      </form>
-    </div>
-  </div>
-  {% include "components/tomselect_init.html" %}
-
-  <div class="w-full grid grid-cols-10 gap-2">
-    <div class="col-span-6" hx-indicator="#loading-spinner">
-      <div
-        hx-get="{% url 'opportunity:user_tasks_table' request.org.slug opportunity.opportunity_id %}{% querystring %}"
-        hx-trigger="load" hx-swap="outerHTML"></div>
-      {% if can_manage_tasks %}
-      <div class="flex gap-4 items-center justify-start mt-4">
-        <form x-ref="deleteTasksForm"
-          hx-post="{{ delete_tasks_url }}"
-          hx-trigger="submit" class="hidden">
-          {% csrf_token %}
-          <template x-for="id in selected">
-            <input type="hidden" name="task_ids" :value="id">
-          </template>
+        <form id="userTaskFilterForm" method="get" action="." class="content">
+          <input type="hidden" name="user" value="{{ request.GET.user }}">
+          <div class="modal-body">{% crispy filter_form %}</div>
+          <div class="footer">
+            <button type="button"
+                    @click="showFilterModal = false"
+                    class="button button-md outline-style">{% trans "Close" %}</button>
+            <button form="userTaskFilterForm"
+                    type="submit"
+                    @click="showFilterModal = false"
+                    class="button button-md primary-dark">{% trans "Apply" %}</button>
+          </div>
         </form>
-        <button type="button" class="button button-md primary-dark" @click="showCreateTaskModal = true">
-          <i class="fa-solid fa-plus mr-2"></i>
-          {% trans "Create Task" %}
-        </button>
-        <button type="button" class="button button-md bg-red-600 hover:bg-red-700 text-white"
-          @click="$store.confirmModal.show({
-            title: '{% trans "Delete Tasks" %}',
-            message: '{% trans "Are you sure you want to delete these tasks? This action can not be undone." %}',
-            confirmBtnText: '{% trans "Delete" %}',
-            confirmBtnRed: true,
-            formRef: $refs.deleteTasksForm,
-          })"
-          :disabled="selected.length === 0">
-          <i class="fa-solid fa-trash mr-2"></i>
-          <span x-text="selected.length === 0
-            ? '{% trans "Delete Tasks" %}'
-            : selected.length === 1
-              ? '{% trans "Delete 1 Task" %}'
-              : '{% trans "Delete" %} ' + selected.length + ' {% trans "Tasks" %}'">
-          </span>
-        </button>
       </div>
-      {% endif %}
     </div>
-
-    <div class="col-span-4 relative" hx-indicator="#task-loading-indicator">
-      <div class="absolute inset-0">
-        <div class="flex flex-col gap-2 h-full">
-          <div class="flex items-center justify-between px-4 bg-white rounded-lg shadow-sm h-14">
-            <p class="text-sm font-normal text-brand-deep-purple">{% translate "Details" %}</p>
+    {% include "components/tomselect_init.html" %}
+    <div class="w-full grid grid-cols-10 gap-2">
+      <div class="col-span-6" hx-indicator="#loading-spinner">
+        <div hx-get="{% url 'opportunity:user_tasks_table' request.org.slug opportunity.opportunity_id %}{% querystring %}"
+             hx-trigger="load"
+             hx-swap="outerHTML"></div>
+        {% if can_manage_tasks %}
+          <div class="flex gap-4 items-center justify-start mt-4">
+            <form x-ref="deleteTasksForm"
+                  hx-post="{{ delete_tasks_url }}"
+                  hx-trigger="submit"
+                  class="hidden">
+              {% csrf_token %}
+              <template x-for="id in selected">
+                <input type="hidden" name="task_ids" :value="id">
+              </template>
+            </form>
+            <button type="button"
+                    class="button button-md primary-dark"
+                    @click="showCreateTaskModal = true">
+              <i class="fa-solid fa-plus mr-2"></i>
+              {% trans "Create Task" %}
+            </button>
+            <button type="button"
+                    class="button button-md bg-red-600 hover:bg-red-700 text-white"
+                    @click="$store.confirmModal.show({ title: '{% trans "Delete Tasks" %}', message: '{% trans "Are you sure you want to delete these tasks? This action can not be undone." %}', confirmBtnText: '{% trans "Delete" %}', confirmBtnRed: true, formRef: $refs.deleteTasksForm, })"
+                    :disabled="selected.length === 0">
+              <i class="fa-solid fa-trash mr-2"></i>
+              <span x-text="selected.length === 0 ? '{% trans "Delete Tasks" %}' : selected.length === 1 ? '{% trans "Delete 1 Task" %}' : '{% trans "Delete" %} ' + selected.length + ' {% trans "Tasks" %}'">
+              </span>
+            </button>
           </div>
-          <div class="p-4 rounded-lg shadow-sm flex-1 bg-white overflow-y-auto scrollbar-hide scrollbar-default">
-            <div id="task-details">
-              <div class="flex justify-items-center align-items-center">
-                <span>{% translate "Please select a task to load details." %}</span>
-              </div>
+        {% endif %}
+      </div>
+      <div class="col-span-4 relative" hx-indicator="#task-loading-indicator">
+        <div class="absolute inset-0">
+          <div class="flex flex-col gap-2 h-full">
+            <div class="flex items-center justify-between px-4 bg-white rounded-lg shadow-sm h-14">
+              <p class="text-sm font-normal text-brand-deep-purple">{% translate "Details" %}</p>
             </div>
-            <div id="task-loading-indicator" role="status"
-              class="htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
-              <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-mango border-t-transparent"></div>
-              <span class="sr-only">{% translate "Loading..." %}</span>
+            <div class="p-4 rounded-lg shadow-sm flex-1 bg-white overflow-y-auto scrollbar-hide scrollbar-default">
+              <div id="task-details">
+                <div class="flex justify-items-center align-items-center">
+                  <span>{% translate "Please select a task to load details." %}</span>
+                </div>
+              </div>
+              <div id="task-loading-indicator"
+                   role="status"
+                   class="htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
+                <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-mango border-t-transparent"></div>
+                <span class="sr-only">{% translate "Loading..." %}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    {% if can_manage_tasks %}
+      {% include 'tasks/new_task_modal.html' with modal_name="showCreateTaskModal" form=create_task_form %}
+      {% include 'opportunity/edit_assigned_task_modal.html' %}
+      {% include 'components/confirm_modal.html' %}
+    {% endif %}
   </div>
-
-  {% if can_manage_tasks %}
-  {% include 'tasks/new_task_modal.html' with modal_name="showCreateTaskModal" form=create_task_form %}
-  {% include 'opportunity/edit_assigned_task_modal.html' %}
-  {% include 'components/confirm_modal.html' %}
-  {% endif %}
-</div>
 {% endblock %}
-
 {% block inline_javascript %}
-{% include "components/tables/selectable_table.html" %}
+  {% include "components/tables/selectable_table.html" %}
 {% endblock %}
diff --git a/commcare_connect/templates/opportunity/user_visit_details.html b/commcare_connect/templates/opportunity/user_visit_details.html
index d7ffca8c31..d60cd8d4c4 100644
--- a/commcare_connect/templates/opportunity/user_visit_details.html
+++ b/commcare_connect/templates/opportunity/user_visit_details.html
@@ -1,133 +1,54 @@
 {% load duration_minutes %}
 {% load static %}
 {% load i18n %}
-
-<div class="flex flex-col gap-6" x-data="{
-    slides: [
-      {% for image in user_visit.images %}
-        { src: '{% url 'opportunity:fetch_attachment' org_slug=request.org.slug opp_id=user_visit.opportunity.opportunity_id blob_id=image.blob_id %}' },
-      {% endfor %}
-    ],
-    currentIndex: 0,
-    modalCurrentIndex: 0,
-    visibleSlides: 3,
-    modalVisibleSlides: 5,
-    popupOpen: false,
-    messages: [{ expanded: false }],
-
-    get visibleImages() {
-        const start = this.currentIndex;
-        return this.slides.slice(start, start + this.visibleSlides);
-    },
-
-    get modalThumbnails() {
-        const totalSlides = this.slides.length;
-        const halfVisible = Math.floor(this.modalVisibleSlides / 2);
-        let start = this.modalCurrentIndex - halfVisible;
-
-        if (start < 0) start = 0;
-        if (start + this.modalVisibleSlides > totalSlides) {
-            start = Math.max(0, totalSlides - this.modalVisibleSlides);
-        }
-
-        return this.slides.slice(start, Math.min(start + this.modalVisibleSlides, totalSlides));
-    },
-
-    // Carousel navigation
-    nextSlide() {
-        if (this.currentIndex + this.visibleSlides < this.slides.length) {
-            this.currentIndex++;
-        }
-    },
-
-    prevSlide() {
-        if (this.currentIndex > 0) {
-            this.currentIndex--;
-        }
-    },
-
-    // Modal navigation
-    nextModal() {
-        if (this.modalCurrentIndex < this.slides.length - 1) {
-            this.modalCurrentIndex++;
-        }
-    },
-
-    prevModal() {
-        if (this.modalCurrentIndex > 0) {
-            this.modalCurrentIndex--;
-        }
-    },
-
-    openPopup(index) {
-        this.modalCurrentIndex = index;
-        this.popupOpen = true;
-    },
-
-    closePopup() {
-        this.popupOpen = false;
-    },
-
-    setModalImage(index) {
-        this.modalCurrentIndex = index;
-    }
-}"
-  hx-get="{% url "opportunity:user_visit_details" request.org.slug user_visit.opportunity.opportunity_id user_visit.user_visit_id %}"
-  hx-swap="outerHTML"
-  hx-trigger="reload_table from:body"
-  hx-indicator="#visit-loading-indicator"
-  hx-on:before-swap="removeMap()"
-  hx-on::after-settle="loadMap()">
+<div class="flex flex-col gap-6" x-data="{ slides: [
+  {% for image in user_visit.images %}
+    { src: '{% url 'opportunity:fetch_attachment' org_slug=request.org.slug opp_id=user_visit.opportunity.opportunity_id blob_id=image.blob_id %}' },
+  {% endfor %}
+  ], currentIndex: 0, modalCurrentIndex: 0, visibleSlides: 3, modalVisibleSlides: 5, popupOpen: false, messages: [{ expanded: false }],  get visibleImages() { const start = this.currentIndex; return this.slides.slice(start, start + this.visibleSlides); },  get modalThumbnails() { const totalSlides = this.slides.length; const halfVisible = Math.floor(this.modalVisibleSlides / 2); let start = this.modalCurrentIndex - halfVisible;  if (start < 0) start = 0; if (start + this.modalVisibleSlides > totalSlides) { start = Math.max(0, totalSlides - this.modalVisibleSlides); }  return this.slides.slice(start, Math.min(start + this.modalVisibleSlides, totalSlides)); },  // Carousel navigation nextSlide() { if (this.currentIndex + this.visibleSlides < this.slides.length) { this.currentIndex++; } },  prevSlide() { if (this.currentIndex > 0) { this.currentIndex--; } },  // Modal navigation nextModal() { if (this.modalCurrentIndex < this.slides.length - 1) { this.modalCurrentIndex++; } },  prevModal() { if (this.modalCurrentIndex > 0) { this.modalCurrentIndex--; } },  openPopup(index) { this.modalCurrentIndex = index; this.popupOpen = true; },  closePopup() { this.popupOpen = false; },  setModalImage(index) { this.modalCurrentIndex = index; } }" hx-get="{% url "opportunity:user_visit_details" request.org.slug user_visit.opportunity.opportunity_id user_visit.user_visit_id %}" hx-swap="outerHTML" hx-trigger="reload_table from:body" hx-indicator="#visit-loading-indicator" hx-on:before-swap="removeMap()" hx-on::after-settle="loadMap()">
   <!-- Message Section -->
-
   {% if user_visit.reason %}
-  <div class="px-4 py-3 mt-1 mb-3 border rounded-md border-gray-200 bg-slate-50">
-    <div class="flex items-center gap-4">
-      <i class="text-lg fa-solid fa-message text-brand-deep-purple"></i>
-      <div class="flex items-center gap-1">
-        <span class="text-xs text-brand-blue-light">{{ user_visit.status_modified_date }}</span>
-        <span class="flex items-center text-xs text-brand-blue-light">
-          <span class="mr-1 text-2xl text-brand-indigo">•</span>
-          {{ user_visit.opportunity.organization.name }}
-        </span>
+    <div class="px-4 py-3 mt-1 mb-3 border rounded-md border-gray-200 bg-slate-50">
+      <div class="flex items-center gap-4">
+        <i class="text-lg fa-solid fa-message text-brand-deep-purple"></i>
+        <div class="flex items-center gap-1">
+          <span class="text-xs text-brand-blue-light">{{ user_visit.status_modified_date }}</span>
+          <span class="flex items-center text-xs text-brand-blue-light">
+            <span class="mr-1 text-2xl text-brand-indigo">•</span>
+            {{ user_visit.opportunity.organization.name }}
+          </span>
+        </div>
       </div>
-    </div>
-    <div>
-      <div class="flex items-center gap-4 mt-2">
-        <i class="text-lg cursor-pointer fa-solid fa-arrows-turn-to-dots text-brand-blue-light"
-           @click="message.expanded = !message.expanded"></i>
-        <p class="text-xs text-brand-deep-purple">
-          {{ user_visit.reason }}
-        </p>
+      <div>
+        <div class="flex items-center gap-4 mt-2">
+          <i class="text-lg cursor-pointer fa-solid fa-arrows-turn-to-dots text-brand-blue-light"
+             @click="message.expanded = !message.expanded"></i>
+          <p class="text-xs text-brand-deep-purple">{{ user_visit.reason }}</p>
+        </div>
       </div>
     </div>
-  </div>
   {% endif %}
-
   {% if user_visit.justification %}
-  <div class="px-4 py-3 mt-1 mb-3 border rounded-md border-gray-200 bg-slate-50">
-    <div class="flex items-center gap-4">
-      <i class="text-lg fa-solid fa-message text-brand-deep-purple"></i>
-      <div class="flex items-center gap-1">
-        <span class="text-xs text-brand-blue-light">{{ user_visit.status_modified_date }}</span>
-        <span class="flex items-center text-xs text-brand-blue-light">
-          <span class="mr-1 text-2xl text-brand-indigo">•</span>
-          {{ user_visit.opportunity.organization.name }}
-        </span>
+    <div class="px-4 py-3 mt-1 mb-3 border rounded-md border-gray-200 bg-slate-50">
+      <div class="flex items-center gap-4">
+        <i class="text-lg fa-solid fa-message text-brand-deep-purple"></i>
+        <div class="flex items-center gap-1">
+          <span class="text-xs text-brand-blue-light">{{ user_visit.status_modified_date }}</span>
+          <span class="flex items-center text-xs text-brand-blue-light">
+            <span class="mr-1 text-2xl text-brand-indigo">•</span>
+            {{ user_visit.opportunity.organization.name }}
+          </span>
+        </div>
       </div>
-    </div>
-    <div>
-      <div class="flex items-center gap-4 mt-2">
-        <i class="text-lg cursor-pointer fa-solid fa-arrows-turn-to-dots text-brand-blue-light"
-           @click="message.expanded = !message.expanded"></i>
-        <p class="text-xs text-brand-deep-purple">
-          {{ user_visit.justification }}
-        </p>
+      <div>
+        <div class="flex items-center gap-4 mt-2">
+          <i class="text-lg cursor-pointer fa-solid fa-arrows-turn-to-dots text-brand-blue-light"
+             @click="message.expanded = !message.expanded"></i>
+          <p class="text-xs text-brand-deep-purple">{{ user_visit.justification }}</p>
+        </div>
       </div>
     </div>
-  </div>
   {% endif %}
-
   <!-- Information -->
   <div class="grid grid-cols-3 gap-4">
     <p class="text-sm font-medium text-brand-deep-purple col-span-3">{% translate "Information" %}</p>
@@ -144,46 +65,47 @@
       <div class="text-sm font-normal text-brand-deep-purple">{{ user_visit.entity_id }}</div>
     </div>
   </div>
-
   <hr class="h-px bg-gray-200 border-0">
-
   <!-- Media Section -->
   {% if user_visit.images %}
-  <div class="flex justify-between">
-    <p class="text-sm font-medium text-brand-deep-purple">{% translate "Media" %}</p>
-    <div class="flex gap-2">
-      <button class="button-icon" @click="prevSlide()" :disabled="currentIndex === 0">
-        <i class="cursor-pointer fa-solid fa-arrow-left"
-           :class="currentIndex === 0 ? 'text-slate-200' : 'text-brand-deep-purple'"></i>
-      </button>
-      <button class="button-icon" @click="nextSlide()" :disabled="currentIndex + visibleSlides >= slides.length">
-        <i class="cursor-pointer fa-solid fa-arrow-right"
-           :class="currentIndex + visibleSlides >= slides.length ? 'text-slate-200' : 'text-brand-deep-purple'"></i>
-      </button>
+    <div class="flex justify-between">
+      <p class="text-sm font-medium text-brand-deep-purple">{% translate "Media" %}</p>
+      <div class="flex gap-2">
+        <button class="button-icon"
+                @click="prevSlide()"
+                :disabled="currentIndex === 0">
+          <i class="cursor-pointer fa-solid fa-arrow-left"
+             :class="currentIndex === 0 ? 'text-slate-200' : 'text-brand-deep-purple'"></i>
+        </button>
+        <button class="button-icon"
+                @click="nextSlide()"
+                :disabled="currentIndex + visibleSlides >= slides.length">
+          <i class="cursor-pointer fa-solid fa-arrow-right"
+             :class="currentIndex + visibleSlides >= slides.length ? 'text-slate-200' : 'text-brand-deep-purple'"></i>
+        </button>
+      </div>
     </div>
-  </div>
-
-  <div class="grid grid-cols-9 gap-4 cursor-pointer values">
-    <template x-for="(slide, index) in visibleImages" :key="index">
-      <img :src="slide.src"
-           :alt="slide.alt"
-           class="object-cover col-span-3 imageopen rounded-2xl aspect-square hover:opacity-90 transition-opacity"
-           @click="openPopup(index + currentIndex)"/>
-    </template>
-  </div>
-
-  <hr class="h-px bg-gray-200 border-0">
+    <div class="grid grid-cols-9 gap-4 cursor-pointer values">
+      <template x-for="(slide, index) in visibleImages" :key="index">
+        <img :src="slide.src"
+             :alt="slide.alt"
+             class="object-cover col-span-3 imageopen rounded-2xl aspect-square hover:opacity-90 transition-opacity"
+             @click="openPopup(index + currentIndex)" />
+      </template>
+    </div>
+    <hr class="h-px bg-gray-200 border-0">
   {% endif %}
-
   <!-- Verification Flags -->
   <div class="flex flex-col gap-4">
     <p class="text-sm font-medium text-brand-deep-purple">{% translate "Verification Parameters" %}</p>
     <div class="grid grid-cols-3 gap-4">
       {% if user_visit.location %}
-      <div>
-        <div class="text-sm text-brand-blue-light">{% translate "Location" %}</div>
-        <div class="text-sm font-normal text-brand-deep-purple">{% translate "Less than" %} {{ min_allowed_distance }} {% translate "metres from another visit" %}</div>
-      </div>
+        <div>
+          <div class="text-sm text-brand-blue-light">{% translate "Location" %}</div>
+          <div class="text-sm font-normal text-brand-deep-purple">
+            {% translate "Less than" %} {{ min_allowed_distance }} {% translate "metres from another visit" %}
+          </div>
+        </div>
       {% endif %}
       <div>
         <div class="text-sm text-brand-blue-light">{% translate "Form Duration" %}</div>
@@ -191,12 +113,15 @@
       </div>
     </div>
     <div x-data="{visible: false}">
-      <div class="flex flex-row gap-4 rounded border border-brand-marigold bg-brand-marigold/15 items-center text-brand-marigold" @click="visible = !visible">
+      <div class="flex flex-row gap-4 rounded border border-brand-marigold bg-brand-marigold/15 items-center text-brand-marigold"
+           @click="visible = !visible">
         <i class="fa-solid fa-triangle-exclamation ml-2"></i>
         <span class="flex-1" class="">{{ flag_count }} {% translate "issues detected" %}</span>
-        <i :class="visible ? 'rotate-180' : ''" class="fa-solid fa-chevron-down transition-all mr-2"></i>
+        <i :class="visible ? 'rotate-180' : ''"
+           class="fa-solid fa-chevron-down transition-all mr-2"></i>
       </div>
-      <div class="border border-brand-border-light rounded-b grid grid-cols-3 gap-4 px-3 py-2" x-show="visible">
+      <div class="border border-brand-border-light rounded-b grid grid-cols-3 gap-4 px-3 py-2"
+           x-show="visible">
         {% if user_visit.flagged %}
           {% for flag in flags %}
             <div>
@@ -206,51 +131,56 @@
           {% endfor %}
         {% endif %}
         {% if attachment_flagged %}
-        <div>
-          <div class="text-sm text-brand-blue-light">{% translate "Photos" %}</div>
-          <div class="text-sm font-normal text-brand-deep-purple">{{ user_visit.images|yesno:"Yes,No" }}</div>
-        </div>
+          <div>
+            <div class="text-sm text-brand-blue-light">{% translate "Photos" %}</div>
+            <div class="text-sm font-normal text-brand-deep-purple">{{ user_visit.images|yesno:"Yes,No" }}</div>
+          </div>
         {% endif %}
       </div>
     </div>
   </div>
-
   <hr class="h-px bg-gray-200 border-0">
-
   <!-- Map -->
   {% if user_visit.location %}
-  <div>
-    <p class="mb-3 text-sm font-medium text-brand-deep-purple">{% translate "Map" %}</p>
-    <div class="relative">
-      <div class="w-full rounded-lg h-64" id="user-visit-map"></div>
-      <div id="mapbox-menu" class="absolute top-0 left-0 m-1 inline-flex primary-light rounded-lg">
-        <label class="py-1 px-2 text-sm has-checked:bg-brand-indigo has-checked:text-white rounded-lg">
-          <input class="hidden" type="radio" name="options" id="streets-v12" checked> {% translate "Streets" %}
-        </label>
-        <label class="py-1 px-2 text-sm has-checked:bg-brand-indigo has-checked:text-white rounded-lg">
-          <input class="hidden" type="radio" name="options" id="satellite-streets-v12"> {% translate "Satellite" %}
-        </label>
-      </div>
-
-      <div id="legend" class="absolute right-0 top-0 bg-white/75 p-2 rounded-lg m-1">
-        <h4 class="text-sm font-bold">Service Records</h4>
-        <div class="text-sm"><i class="fa-solid fa-location-dot text-green-600"></i> {% translate "Under review" %}</div>
-        <div class="text-sm"><i class="fa-solid fa-location-dot text-sky-600"></i> {% translate "Closest from this user" %}</div>
-        <div class="text-sm"><i class="fa-solid fa-location-dot text-red-600"></i> {% translate "Closest from others" %}</div>
+    <div>
+      <p class="mb-3 text-sm font-medium text-brand-deep-purple">{% translate "Map" %}</p>
+      <div class="relative">
+        <div class="w-full rounded-lg h-64" id="user-visit-map"></div>
+        <div id="mapbox-menu"
+             class="absolute top-0 left-0 m-1 inline-flex primary-light rounded-lg">
+          <label class="py-1 px-2 text-sm has-checked:bg-brand-indigo has-checked:text-white rounded-lg">
+            <input class="hidden" type="radio" name="options" id="streets-v12" checked>
+            {% translate "Streets" %}
+          </label>
+          <label class="py-1 px-2 text-sm has-checked:bg-brand-indigo has-checked:text-white rounded-lg">
+            <input class="hidden" type="radio" name="options" id="satellite-streets-v12">
+            {% translate "Satellite" %}
+          </label>
+        </div>
+        <div id="legend"
+             class="absolute right-0 top-0 bg-white/75 p-2 rounded-lg m-1">
+          <h4 class="text-sm font-bold">Service Records</h4>
+          <div class="text-sm">
+            <i class="fa-solid fa-location-dot text-green-600"></i> {% translate "Under review" %}
+          </div>
+          <div class="text-sm">
+            <i class="fa-solid fa-location-dot text-sky-600"></i> {% translate "Closest from this user" %}
+          </div>
+          <div class="text-sm">
+            <i class="fa-solid fa-location-dot text-red-600"></i> {% translate "Closest from others" %}
+          </div>
+        </div>
       </div>
     </div>
-  </div>
   {% endif %}
-
   {% if perms.users.view_commcarehq_form_link %}
-  <hr class="h-px bg-gray-200 border-0">
-
-  <p class="text-sm font-medium text-brand-deep-purple">{% translate "Further Information" %}</p>
-  <div class="flex">
-    <a class="button button-md button-outline-rounded" href="{{ user_visit.hq_link }}">{% translate "View Form in CommCareHQ" %} <i class="fa-solid fa-arrow-right"></i></a>
-  </div>
+    <hr class="h-px bg-gray-200 border-0">
+    <p class="text-sm font-medium text-brand-deep-purple">{% translate "Further Information" %}</p>
+    <div class="flex">
+      <a class="button button-md button-outline-rounded"
+         href="{{ user_visit.hq_link }}">{% translate "View Form in CommCareHQ" %} <i class="fa-solid fa-arrow-right"></i></a>
+    </div>
   {% endif %}
-
   <!-- Popup Modal -->
   <div x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
@@ -264,14 +194,12 @@ <h4 class="text-sm font-bold">Service Records</h4>
           <i class="fa-solid fa-xmark"></i>
         </button>
       </div>
-
       <!-- Main Image -->
       <div class="relative">
         <img :src="slides[modalCurrentIndex].src"
              :alt="slides[modalCurrentIndex].alt"
-             class="object-contain w-full rounded-lg max-h-[60vh]"/>
-        <button
-          class="absolute bottom-2 right-2 button-icon">
+             class="object-contain w-full rounded-lg max-h-[60vh]" />
+        <button class="absolute bottom-2 right-2 button-icon">
           <a :href="slides[modalCurrentIndex].src"
              download="downloaded-image.jpg"
              aria-label="Download Image">
@@ -279,7 +207,6 @@ <h4 class="text-sm font-bold">Service Records</h4>
           </a>
         </button>
       </div>
-
       <!-- Thumbnails -->
       <div class="relative w-full flex items-center justify-center gap-4 mt-4">
         <button class="absolute -left-1 z-10 px-4.5 py-2 bg-white border-2 rounded-3xl border-brand-border-light"
@@ -288,24 +215,19 @@ <h4 class="text-sm font-bold">Service Records</h4>
                 :class="{'opacity-50': modalCurrentIndex === 0}">
           <i class="fa-solid fa-arrow-left"></i>
         </button>
-
         <div class="flex justify-center gap-2 px-16 overflow-hidden">
           <template x-for="(slide, idx) in modalThumbnails" :key="idx">
-            <div class="relative w-16 h-16 flex-shrink-0 cursor-pointer" @click="setModalImage(slides.indexOf(slide))">
-              <img
-                :src="slide.src"
-                :alt="slide.alt"
-                class="object-cover w-full h-full rounded-lg"
-              />
-              <div
-                x-show="slides.indexOf(slide) === modalCurrentIndex"
-                class="absolute inset-0 bg-black/40 rounded-lg pointer-events-none transition-all duration-300">
+            <div class="relative w-16 h-16 flex-shrink-0 cursor-pointer"
+                 @click="setModalImage(slides.indexOf(slide))">
+              <img :src="slide.src"
+                   :alt="slide.alt"
+                   class="object-cover w-full h-full rounded-lg" />
+              <div x-show="slides.indexOf(slide) === modalCurrentIndex"
+                   class="absolute inset-0 bg-black/40 rounded-lg pointer-events-none transition-all duration-300">
               </div>
             </div>
           </template>
         </div>
-
-
         <button class="absolute -right-1 z-10 px-4.5 py-2 bg-white border-2 rounded-3xl border-brand-border-light"
                 @click="nextModal()"
                 :disabled="modalCurrentIndex >= slides.length - 1"
@@ -316,120 +238,111 @@ <h4 class="text-sm font-bold">Service Records</h4>
     </div>
   </div>
 </div>
-
 <div class="flex justify-end gap-4 items-center h-14 bg-white rounded-lg shadow-sm pe-2"
-  x-data="{showRejectModal: false, showApproveModal: false}"
-  id="visit-actions"
-  hx-swap-oob="true">
-{% if request.is_opportunity_pm %}
-  {% if user_visit.review_created_on %}
-  <div class="flex gap-4">
-    <form hx-post="{% url "opportunity:user_visit_review" request.org.slug user_visit.opportunity.opportunity_id %}"
-      hx-swap="none">
-      <input type="hidden" value="{{ user_visit.pk }}" name="pk" />
-      <button class="button button-md outline-style"
-        {% if user_visit.review_status == "pending" %}value="disagree"{% else %}disabled{% endif %}
-        name="review_status">
-        {% translate "Disagree" %}
-      </button>
-      <button class="button button-md primary-dark"
-        {% if user_visit.review_status != "agree" %}value="agree"{% else %}disabled{% endif %}
-        name="review_status">
-        {% translate "Agree" %}
-      </button>
-    </form>
-  </div>
-  {% endif %}
-{% else %}
-  <div>
-    <button class="button button-md negative-light"
-    {% if request.org_membership.is_viewer %} disabled {% else %}
-    {% if user_visit.status == "rejected" or user_visit.review_status == "agree" %}
-      disabled
-    {% else %}
-      @click="showRejectModal = true; showApproveModal = false;"
-    {% endif %}
-    {% endif %}>
-      {% translate "Reject" %}
-    </button>
-    <button class="button button-md positive-light"
-    {% if request.org_membership.is_viewer %} disabled {% else %}
-    {% if user_visit.status != "approved" or user_visit.review_status == "disagree" %}
-      {% if user_visit.opportunity.managed %}
-      @click="showRejectModal = false; showApproveModal = true;"
-      {% else %}
-      hx-post="{% url "opportunity:approve_visits" org_slug=request.org.slug opp_id=user_visit.opportunity.opportunity_id %}"
-      hx-vals='{"visit_ids[]": "{{ user_visit.id }}"}'
-      hx-swap="none"
-      {% endif %}
-    {% else %}
-      disabled
-    {% endif %}
-    {% endif %}>
-      {% translate "Approve" %}
-    </button>
-  </div>
-
-  <div x-cloak x-show="showRejectModal" x-transition.opacity class="modal-backdrop">
-    <div @click.away="showRejectModal = false" x-transition class="modal">
-      <div class="header flex justify-between items-center">
-        <h2 class="title">{% translate "Reason for Rejection" %}</h2>
-        <button @click="showRejectModal = false" class="button-icon" aria-label="Close">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
+     x-data="{showRejectModal: false, showApproveModal: false}"
+     id="visit-actions"
+     hx-swap-oob="true">
+  {% if request.is_opportunity_pm %}
+    {% if user_visit.review_created_on %}
+      <div class="flex gap-4">
+        <form hx-post="{% url "opportunity:user_visit_review" request.org.slug user_visit.opportunity.opportunity_id %}"
+              hx-swap="none">
+          <input type="hidden" value="{{ user_visit.pk }}" name="pk" />
+          <button class="button button-md outline-style"
+                  {% if user_visit.review_status == "pending" %}value="disagree"{% else %}disabled{% endif %}
+                  name="review_status">{% translate "Disagree" %}</button>
+          <button class="button button-md primary-dark"
+                  {% if user_visit.review_status != "agree" %}value="agree"{% else %}disabled{% endif %}
+                  name="review_status">{% translate "Agree" %}</button>
+        </form>
       </div>
-      <form hx-post="{% url 'opportunity:reject_visits' org_slug=request.org.slug opp_id=user_visit.opportunity.opportunity_id  %}"
-        hx-swap="none"
-        @submit="showRejectModal = false">
-        {% csrf_token %}
-        <div class="py-4">
-          <textarea class="base-textarea" id="rejection-reason" rows="3" name="reason" id="reason"
-            placeholder="Please provide a reason for rejecting visit.">{{ reason }}</textarea>
-        </div>
-        <input type="hidden" name="visit_ids[]" value="{{ user_visit.id }}">
-        <div class="footer flex justify-end">
-          <button @click="showRejectModal = false" type="button" class="button button-md outline-style">
-            {% translate "Close" %}
-          </button>
-          <button type="submit" class="button button-md negative-dark">
-            {% translate "Reject" %}
-          </button>
-        </div>
-      </form>
+    {% endif %}
+  {% else %}
+    <div>
+      <button class="button button-md negative-light"
+              {% if request.org_membership.is_viewer %} disabled {% else %} {% if user_visit.status == "rejected" or user_visit.review_status == "agree" %} disabled {% else %} @click="showRejectModal = true; showApproveModal = false;" {% endif %}
+              {% endif %}>{% translate "Reject" %}</button>
+      <button class="button button-md positive-light"
+              {% if request.org_membership.is_viewer %} disabled {% else %} {% if user_visit.status != "approved" or user_visit.review_status == "disagree" %} {% if user_visit.opportunity.managed %} @click="showRejectModal = false; showApproveModal = true;" {% else %} hx-post="{% url "opportunity:approve_visits" org_slug=request.org.slug opp_id=user_visit.opportunity.opportunity_id %}" hx-vals='{"visit_ids[]": "{{ user_visit.id }}"}' hx-swap="none" {% endif %}
+              {% else %}
+              disabled
+              {% endif %}
+              {% endif %}>{% translate "Approve" %}</button>
     </div>
-  </div>
-
-  {% if user_visit.opportunity.managed %}
-  <div x-cloak x-show="showApproveModal" x-transition.opacity class="modal-backdrop">
-    <div @click.away="showApproveModal = false" x-transition class="modal">
-      <div class="header flex justify-between items-center">
-        <h2 class="title">{% translate "Justification for Approval" %}</h2>
-        <button @click="showApproveModal = false" class="button-icon" aria-label="Close">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
-      </div>
-      <form hx-post="{% url "opportunity:approve_visits" org_slug=request.org.slug opp_id=user_visit.opportunity.opportunity_id %}"
-        hx-swap="none"
-        @submit="showApproveModal = false">
-        {% csrf_token %}
-        <div class="py-4">
-          <textarea required class="base-textarea" id="justification" rows="3" name="justification"
-            placeholder="Please provide a reason for approving flagged visits.">{{ justification }}</textarea>
-        </div>
-        <input type="hidden" name="visit_ids[]" value="{{ user_visit.id }}">
-        <div class="footer flex justify-end">
-          <button @click="showApproveModal = false" type="button" class="button button-md outline-style">
-            {% translate "Close" %}
+    <div x-cloak
+         x-show="showRejectModal"
+         x-transition.opacity
+         class="modal-backdrop">
+      <div @click.away="showRejectModal = false" x-transition class="modal">
+        <div class="header flex justify-between items-center">
+          <h2 class="title">{% translate "Reason for Rejection" %}</h2>
+          <button @click="showRejectModal = false"
+                  class="button-icon"
+                  aria-label="Close">
+            <i class="fa-solid fa-xmark"></i>
           </button>
-          <button type="submit" class="button button-md positive-dark">{% translate "Approve" %}</button>
         </div>
-      </form>
+        <form hx-post="{% url 'opportunity:reject_visits' org_slug=request.org.slug opp_id=user_visit.opportunity.opportunity_id %}"
+              hx-swap="none"
+              @submit="showRejectModal = false">
+          {% csrf_token %}
+          <div class="py-4">
+            <textarea class="base-textarea"
+                      id="rejection-reason"
+                      rows="3"
+                      name="reason"
+                      id="reason"
+                      placeholder="Please provide a reason for rejecting visit.">{{ reason }}</textarea>
+          </div>
+          <input type="hidden" name="visit_ids[]" value="{{ user_visit.id }}">
+          <div class="footer flex justify-end">
+            <button @click="showRejectModal = false"
+                    type="button"
+                    class="button button-md outline-style">{% translate "Close" %}</button>
+            <button type="submit" class="button button-md negative-dark">{% translate "Reject" %}</button>
+          </div>
+        </form>
+      </div>
     </div>
-  </div>
+    {% if user_visit.opportunity.managed %}
+      <div x-cloak
+           x-show="showApproveModal"
+           x-transition.opacity
+           class="modal-backdrop">
+        <div @click.away="showApproveModal = false" x-transition class="modal">
+          <div class="header flex justify-between items-center">
+            <h2 class="title">{% translate "Justification for Approval" %}</h2>
+            <button @click="showApproveModal = false"
+                    class="button-icon"
+                    aria-label="Close">
+              <i class="fa-solid fa-xmark"></i>
+            </button>
+          </div>
+          <form hx-post="{% url "opportunity:approve_visits" org_slug=request.org.slug opp_id=user_visit.opportunity.opportunity_id %}"
+                hx-swap="none"
+                @submit="showApproveModal = false">
+            {% csrf_token %}
+            <div class="py-4">
+              <textarea required
+                        class="base-textarea"
+                        id="justification"
+                        rows="3"
+                        name="justification"
+                        placeholder="Please provide a reason for approving flagged visits.">{{ justification }}</textarea>
+            </div>
+            <input type="hidden" name="visit_ids[]" value="{{ user_visit.id }}">
+            <div class="footer flex justify-end">
+              <button @click="showApproveModal = false"
+                      type="button"
+                      class="button button-md outline-style">{% translate "Close" %}</button>
+              <button type="submit" class="button button-md positive-dark">{% translate "Approve" %}</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    {% endif %}
   {% endif %}
-{% endif %}
 </div>
-
 {{ visit_data|json_script:"visit_data" }}
 {{ user_forms|json_script:"user_forms" }}
 {{ other_forms|json_script:"other_forms" }}
diff --git a/commcare_connect/templates/opportunity/user_visit_verification.html b/commcare_connect/templates/opportunity/user_visit_verification.html
index 319782e626..d352265801 100644
--- a/commcare_connect/templates/opportunity/user_visit_verification.html
+++ b/commcare_connect/templates/opportunity/user_visit_verification.html
@@ -1,64 +1,60 @@
 {% extends 'base.html' %}
-
 {% load static %}
 {% load django_tables2 %}
 {% load i18n %}
 {% load humanize %}
 {% block css %}
-{{ block.super }}
-<link rel="stylesheet" href="{% static 'bundles/css/mapbox.css' %}">
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'bundles/css/mapbox.css' %}">
 {% endblock %}
-
 {% block javascript %}
-{{ block.super }}
-<script src="{% static 'bundles/js/mapbox-bundle.js' %}" defer></script>
+  {{ block.super }}
+  <script src="{% static 'bundles/js/mapbox-bundle.js' %}" defer></script>
 {% endblock javascript %}
-
 {% block content %}
-{% include 'components/breadcrumbs.html' with path=path %}
-<div class="w-full space-y-4">
-  {% include "components/worker_page/worker_profile_kpi.html" %}
-
-  {% if show_worker_tasks_tabs %}
-    {% include 'components/worker_page/visit_task_tabs.html' %}
-  {% endif %}
-
-  <div class="w-full grid grid-cols-10 gap-2">
-    <div class="col-span-6" hx-indicator="#loading-spinner">
-      <div
-        hx-get="{% url 'opportunity:user_visit_verification_table' request.org.slug opportunity.opportunity_id %}{% querystring %}"
-        hx-trigger="load" hx-swap="outerHTML"></div>
-    </div>
-
-    <div class="col-span-4 relative" hx-indicator="#visit-loading-indicator">
-      <div class="absolute inset-0">
-        <div class="flex flex-col gap-2 h-full">
-          <div class="flex items-center justify-between px-4 bg-white rounded-lg shadow-sm h-14">
-            <p class="text-sm font-normal text-brand-deep-purple">Details</p>
-          </div>
-          <div class="p-4 rounded-lg shadow-sm flex-1 bg-white overflow-y-auto scrollbar-hide scrollbar-default">
-            <div id="visit-details" hx-on:before-swap="removeMap()" hx-on::after-settle="loadMap()">
-              <div class="flex justify-items-center align-items-center">
-                <span>Please select a visit to load details.</span>
-              </div>
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <div class="w-full space-y-4">
+    {% include "components/worker_page/worker_profile_kpi.html" %}
+    {% if show_worker_tasks_tabs %}
+      {% include 'components/worker_page/visit_task_tabs.html' %}
+    {% endif %}
+    <div class="w-full grid grid-cols-10 gap-2">
+      <div class="col-span-6" hx-indicator="#loading-spinner">
+        <div hx-get="{% url 'opportunity:user_visit_verification_table' request.org.slug opportunity.opportunity_id %}{% querystring %}"
+             hx-trigger="load"
+             hx-swap="outerHTML"></div>
+      </div>
+      <div class="col-span-4 relative" hx-indicator="#visit-loading-indicator">
+        <div class="absolute inset-0">
+          <div class="flex flex-col gap-2 h-full">
+            <div class="flex items-center justify-between px-4 bg-white rounded-lg shadow-sm h-14">
+              <p class="text-sm font-normal text-brand-deep-purple">Details</p>
             </div>
-            <div id="visit-loading-indicator" role="status"
-              class="htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
-              <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-mango border-t-transparent"></div>
-              <span class="sr-only">Loading...</span>
+            <div class="p-4 rounded-lg shadow-sm flex-1 bg-white overflow-y-auto scrollbar-hide scrollbar-default">
+              <div id="visit-details"
+                   hx-on:before-swap="removeMap()"
+                   hx-on::after-settle="loadMap()">
+                <div class="flex justify-items-center align-items-center">
+                  <span>Please select a visit to load details.</span>
+                </div>
+              </div>
+              <div id="visit-loading-indicator"
+                   role="status"
+                   class="htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
+                <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-mango border-t-transparent"></div>
+                <span class="sr-only">Loading...</span>
+              </div>
             </div>
+            <div id="visit-actions"></div>
           </div>
-          <div id="visit-actions"></div>
         </div>
       </div>
     </div>
   </div>
-</div>
 {% endblock %}
-
 {% block inline_javascript %}
-{{ block.super }}
-<script type="text/javascript">
+  {{ block.super }}
+  <script type="text/javascript">
   document.addEventListener('alpine:init', () => {
     Alpine.data('visitVerification', (initialTab, defaultPage) => ({
       activeTab: initialTab,
@@ -288,5 +284,5 @@
       };
     }
   }
-</script>
+  </script>
 {% endblock inline_javascript %}
diff --git a/commcare_connect/templates/opportunity/user_visit_verification_table.html b/commcare_connect/templates/opportunity/user_visit_verification_table.html
index 859e85763b..1252bc2d3e 100644
--- a/commcare_connect/templates/opportunity/user_visit_verification_table.html
+++ b/commcare_connect/templates/opportunity/user_visit_verification_table.html
@@ -1,63 +1,59 @@
 {% load django_tables2 %}
-
 <div x-cloak
      x-data="visitVerification('{{ request.GET.filter_status|default:"all" }}', {{ request.GET.page|default:"1" }})"
-     @change="!$event.target.matches('input[name=row_select], input[name=select_all], textarea[name=reason], textarea[name=justification]') ? updateUrlAndRequest() : null"
->
- <form
-      x-ref="visitForm"
-      class="flex flex-col w-full gap-2"
-      hx-get="{% url 'opportunity:user_visit_verification_table' request.org.slug opportunity.opportunity_id %}"
-      hx-trigger="reload_table from:body"
-      hx-swap="outerHTML"
-  >
-  <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14 better-tabs overflow-x-auto">
-    <div class="tabs">
-      {% for tab in tabs %}
-        <label class="tab" :class="{ 'tab-active': activeTab == '{{ tab.name }}'}">
-          <input class="peer sr-only" type="radio" value="{{ tab.name }}" name="filter_status"
-                 x-model="activeTab"
-                 @click="page = 1"
-            {% if not request.GET.filter_status and forloop.first %}
-                 checked="checked" {% elif request.GET.filter_status == tab.name %}
-                 checked="checked" {% endif %}/>
-          {{ tab.label }}
-        <span>(<span>{{ tab.count }}</span>)</span>
-        </label>
-      {% endfor %}
-    </div>
-
-    {% if not request.is_opportunity_pm and request.org_membership and not request.org_membership.is_viewer %}
-      <div x-show="selected?.length" class="flex gap-2">
-        <button type="button" @click="showBulkRejectModal = true;" class="ga-bulk-reject button button-md outline-style">Reject All</button>
-        <button type="button" @click="showBulkApproveModal = true;" class="ga-bulk-approve button button-md primary-dark">Approve All</button>
+     @change="!$event.target.matches('input[name=row_select], input[name=select_all], textarea[name=reason], textarea[name=justification]') ? updateUrlAndRequest() : null">
+  <form x-ref="visitForm"
+        class="flex flex-col w-full gap-2"
+        hx-get="{% url 'opportunity:user_visit_verification_table' request.org.slug opportunity.opportunity_id %}"
+        hx-trigger="reload_table from:body"
+        hx-swap="outerHTML">
+    <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14 better-tabs overflow-x-auto">
+      <div class="tabs">
+        {% for tab in tabs %}
+          <label class="tab" :class="{ 'tab-active': activeTab == '{{ tab.name }}'}">
+            <input class="peer sr-only"
+                   type="radio"
+                   value="{{ tab.name }}"
+                   name="filter_status"
+                   x-model="activeTab"
+                   @click="page = 1"
+                   {% if not request.GET.filter_status and forloop.first %} checked="checked" {% elif request.GET.filter_status == tab.name %} checked="checked" {% endif %} />
+            {{ tab.label }}
+            <span>(<span>{{ tab.count }}</span>)</span>
+          </label>
+        {% endfor %}
       </div>
-    {% endif %}
-
-  </div>
-
-  <!-- Tab Content Container with Loading Animation -->
-  <div class="w-full relative shadow-sm flex-1 rounded-lg">
-    <div class="flex flex-col w-full gap-2 min-h-160">
-      {% render_table table %}
+      {% if not request.is_opportunity_pm and request.org_membership and not request.org_membership.is_viewer %}
+        <div x-show="selected?.length" class="flex gap-2">
+          <button type="button"
+                  @click="showBulkRejectModal = true;"
+                  class="ga-bulk-reject button button-md outline-style">Reject All</button>
+          <button type="button"
+                  @click="showBulkApproveModal = true;"
+                  class="ga-bulk-approve button button-md primary-dark">Approve All</button>
+        </div>
+      {% endif %}
     </div>
-    <div id="loading-spinner" role="status"
-         class="htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
-      <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-mango border-t-transparent"></div>
-      <span class="sr-only">Loading...</span>
+    <!-- Tab Content Container with Loading Animation -->
+    <div class="w-full relative shadow-sm flex-1 rounded-lg">
+      <div class="flex flex-col w-full gap-2 min-h-160">{% render_table table %}</div>
+      <div id="loading-spinner"
+           role="status"
+           class="htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
+        <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-mango border-t-transparent"></div>
+        <span class="sr-only">Loading...</span>
+      </div>
     </div>
-  </div>
-  <input type="hidden" name="page" value="{{ request.GET.page|default:1 }}" x-model="page" />
-  <input type="hidden" name="sort" value="{{ request.GET.sort|default:'' }}" />
-  {% for name, value in persisted_filters %}
-    <input type="hidden" name="{{ name }}" value="{{ value }}">
-  {% endfor %}
-</form>
-
-<!--Bulk Approve Modal -->
-{% url 'opportunity:reject_visits' org_slug=request.org.slug opp_id=opportunity.opportunity_id as reject_url %}
-{% url 'opportunity:approve_visits' org_slug=request.org.slug opp_id=opportunity.opportunity_id as approve_url %}
-{% include 'opportunity/bulk_approval_reject_modal.html' with modal_name="showBulkApproveModal" title=opportunity.managed|yesno:"Justification for Approval,Confirm Approval" form_action=approve_url textarea_required=opportunity.managed textarea_placeholder="Please provide a reason for approving flagged visits." textarea_name="justification" note_text="Note: Visits that are already approved will not be affected by this action or have already been accepted by a PM" submit_btn_text="Approve" submit_btn_class="positive-dark" %}
-{% include "opportunity/bulk_approval_reject_modal.html" with modal_name="showBulkRejectModal" title="Reason for Rejection" form_action=reject_url textarea_required=True textarea_placeholder="Please provide a reason for rejecting visit." textarea_name="reason" note_text="Note: Visits that are already rejected will not be affected by this action." submit_btn_text="Reject" submit_btn_class="negative-dark" %}
-
+    <input type="hidden"
+           name="page"
+           value="{{ request.GET.page|default:1 }}"
+           x-model="page" />
+    <input type="hidden" name="sort" value="{{ request.GET.sort|default:'' }}" />
+    {% for name, value in persisted_filters %}<input type="hidden" name="{{ name }}" value="{{ value }}">{% endfor %}
+  </form>
+  <!--Bulk Approve Modal -->
+  {% url 'opportunity:reject_visits' org_slug=request.org.slug opp_id=opportunity.opportunity_id as reject_url %}
+  {% url 'opportunity:approve_visits' org_slug=request.org.slug opp_id=opportunity.opportunity_id as approve_url %}
+  {% include 'opportunity/bulk_approval_reject_modal.html' with modal_name="showBulkApproveModal" title=opportunity.managed|yesno:"Justification for Approval,Confirm Approval" form_action=approve_url textarea_required=opportunity.managed textarea_placeholder="Please provide a reason for approving flagged visits." textarea_name="justification" note_text="Note: Visits that are already approved will not be affected by this action or have already been accepted by a PM" submit_btn_text="Approve" submit_btn_class="positive-dark" %}
+  {% include "opportunity/bulk_approval_reject_modal.html" with modal_name="showBulkRejectModal" title="Reason for Rejection" form_action=reject_url textarea_required=True textarea_placeholder="Please provide a reason for rejecting visit." textarea_name="reason" note_text="Note: Visits that are already rejected will not be affected by this action." submit_btn_text="Reject" submit_btn_class="negative-dark" %}
 </div>
diff --git a/commcare_connect/templates/opportunity/verification_flags_config.html b/commcare_connect/templates/opportunity/verification_flags_config.html
index 69f505c12a..414ef8706e 100644
--- a/commcare_connect/templates/opportunity/verification_flags_config.html
+++ b/commcare_connect/templates/opportunity/verification_flags_config.html
@@ -3,83 +3,64 @@
 {% load crispy_forms_tags %}
 {% load duration_minutes %}
 {% load tailwind_filters %}
-
 {% block content %}
-{% include 'components/breadcrumbs.html' with path=path %}
-
-<div class="container md:max-w-screen-lg mx-auto flex flex-col gap-6">
-  <h2 class="title">Verification Flags Configuration</h2>
-
-  <form method="post" class="flex flex-col gap-4 space-y-6">
-    {% csrf_token %}
-
-    <div class="space-y-2">
-      <div class="card_bg">
-        <div class="flex flex-col gap-4">
-          {% crispy form %}
+  {% include 'components/breadcrumbs.html' with path=path %}
+  <div class="container md:max-w-screen-lg mx-auto flex flex-col gap-6">
+    <h2 class="title">Verification Flags Configuration</h2>
+    <form method="post" class="flex flex-col gap-4 space-y-6">
+      {% csrf_token %}
+      <div class="space-y-2">
+        <div class="card_bg">
+          <div class="flex flex-col gap-4">{% crispy form %}</div>
         </div>
       </div>
-    </div>
-
-    <div class="space-y-2">
-      <h3 class="title-sm">Deliver Unit Flags</h3>
-      <div class="card_bg">
-        {% crispy deliver_unit_formset deliver_unit_formset.empty_form.helper %}
+      <div class="space-y-2">
+        <h3 class="title-sm">Deliver Unit Flags</h3>
+        <div class="card_bg">{% crispy deliver_unit_formset deliver_unit_formset.empty_form.helper %}</div>
       </div>
-    </div>
-
-    <div x-data="form_json_formset" class="space-y-4">
-      <div class="flex justify-between mb-2">
-        <h3 class="title-sm">Form Validation Rules</h3>
-        <button type="button" class="button-icon primary-dark" @click="addForm()">
-          <i class="fa-solid fa-plus"></i>
-        </button>
-      </div>
-
-      {{ form_json_formset.management_form|crispy }}
-
-      <template>
-        <div class="card_bg" id="form_json_form">
-          <div class="flex justify-end">
-            <button type="button" class="button-icon negative-light" aria-label="Delete" @click="deleteForm()">
-              <i class="fa-solid fa-trash"></i>
-            </button>
-          </div>
-          <div class="p-4">
-            {% crispy form_json_formset.empty_form form_json_formset.empty_form.helper %}
-          </div>
+      <div x-data="form_json_formset" class="space-y-4">
+        <div class="flex justify-between mb-2">
+          <h3 class="title-sm">Form Validation Rules</h3>
+          <button type="button" class="button-icon primary-dark" @click="addForm()">
+            <i class="fa-solid fa-plus"></i>
+          </button>
         </div>
-      </template>
-
-      <div id="form_json_forms" class="flex flex-col gap-4 space-y-2">
-        {% for form in form_json_formset %}
+        {{ form_json_formset.management_form|crispy }}
+        <template>
           <div class="card_bg" id="form_json_form">
             <div class="flex justify-end">
-              <button type="button" class="button-icon negative-light" aria-label="Delete"
-                {% if not form.instance.id %}
-                  @click="deleteForm()"
-                {% else %}
-                  hx-delete="{% url "opportunity:delete_form_json_rule" org_slug=request.org.slug opp_id=opportunity.opportunity_id pk=form.instance.form_json_validation_rules_id %}"
-                  hx-target="closest #form_json_form"
-                  hx-swap="outerHTML"
-                  @click="decrementFormCount()"
-                {% endif %}>
+              <button type="button"
+                      class="button-icon negative-light"
+                      aria-label="Delete"
+                      @click="deleteForm()">
                 <i class="fa-solid fa-trash"></i>
               </button>
             </div>
-            {% crispy form form.helper %}
+            <div class="p-4">{% crispy form_json_formset.empty_form form_json_formset.empty_form.helper %}</div>
           </div>
-        {% endfor %}
+        </template>
+        <div id="form_json_forms" class="flex flex-col gap-4 space-y-2">
+          {% for form in form_json_formset %}
+            <div class="card_bg" id="form_json_form">
+              <div class="flex justify-end">
+                <button type="button"
+                        class="button-icon negative-light"
+                        aria-label="Delete"
+                        {% if not form.instance.id %} @click="deleteForm()" {% else %} hx-delete="{% url "opportunity:delete_form_json_rule" org_slug=request.org.slug opp_id=opportunity.opportunity_id pk=form.instance.form_json_validation_rules_id %}" hx-target="closest #form_json_form" hx-swap="outerHTML" @click="decrementFormCount()" {% endif %}>
+                  <i class="fa-solid fa-trash"></i>
+                </button>
+              </div>
+              {% crispy form form.helper %}
+            </div>
+          {% endfor %}
+        </div>
       </div>
-    </div>
-
-    <div class="flex justify-end">
-      <button type="submit" class="button button-md primary-dark mb-2">Save</button>
-    </div>
-  </form>
-</div>
+      <div class="flex justify-end">
+        <button type="submit" class="button button-md primary-dark mb-2">Save</button>
+      </div>
+    </form>
+  </div>
 {% endblock content %}
-
 {% block inline_javascript %}
   <script>
     document.addEventListener("alpine:init", () => {
diff --git a/commcare_connect/templates/opportunity/worker_list_base.html b/commcare_connect/templates/opportunity/worker_list_base.html
index 5672ca33a2..421ebe8459 100644
--- a/commcare_connect/templates/opportunity/worker_list_base.html
+++ b/commcare_connect/templates/opportunity/worker_list_base.html
@@ -1,31 +1,18 @@
 {% load static i18n %}
 {% load crispy_forms_tags %}
-
 <ul id="tabs" class="tabs" hx-swap-oob="true">
   {% for tab in tabs %}
-  <li
-    id="{{ tab.key }}-tab"
-    hx-get="{{ tab.url }}"
-    hx-indicator="#loadingIndicator"
-    hx-push-url="true"
-    class="tab-item {% if tab.key == active_tab %}active{% endif %}"
-  >
-    <span>{{ tab.label }}</span>
-    {% if tab.key == active_tab %}
-    <div></div>
-    {% endif %}
-  </li>
+    <li id="{{ tab.key }}-tab"
+        hx-get="{{ tab.url }}"
+        hx-indicator="#loadingIndicator"
+        hx-push-url="true"
+        class="tab-item {% if tab.key == active_tab %}active{% endif %}">
+      <span>{{ tab.label }}</span>
+      {% if tab.key == active_tab %}<div></div>{% endif %}
+    </li>
   {% endfor %}
 </ul>
-
 <div id="tab-options" hx-swap-oob="true" class="flex gap-x-4 items-center">
-    {% block tab_options %}{% endblock %}
-</div>
-
-<div
-    id="table"
-    class="w-full"
-    hx-swap-oob="true"
->
-    {% include "components/tables/table.html" with table=table %}
+  {% block tab_options %}{% endblock %}
 </div>
+<div id="table" class="w-full" hx-swap-oob="true">{% include "components/tables/table.html" with table=table %}</div>
diff --git a/commcare_connect/templates/opportunity/worker_list_work_areas.html b/commcare_connect/templates/opportunity/worker_list_work_areas.html
index 0d36fca54a..7af4760ffb 100644
--- a/commcare_connect/templates/opportunity/worker_list_work_areas.html
+++ b/commcare_connect/templates/opportunity/worker_list_work_areas.html
@@ -1,3 +1,2 @@
 {% extends "opportunity/worker_list_base.html" %}
-
 {% block tab_options %}{% endblock %}
diff --git a/commcare_connect/templates/opportunity/worker_visit_table.html b/commcare_connect/templates/opportunity/worker_visit_table.html
index 792991304a..b8d2097dd0 100644
--- a/commcare_connect/templates/opportunity/worker_visit_table.html
+++ b/commcare_connect/templates/opportunity/worker_visit_table.html
@@ -1,11 +1,9 @@
 {% load django_tables2 i18n %}
-
 <div>
   <div class="w-full relative shadow-sm flex-1 rounded-lg">
-    <div class="flex flex-col w-full gap-2 min-h-160">
-      {% render_table table %}
-    </div>
-    <div id="loading-spinner" role="status"
+    <div class="flex flex-col w-full gap-2 min-h-160">{% render_table table %}</div>
+    <div id="loading-spinner"
+         role="status"
          class="htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
       <div class="animate-spin rounded-full h-12 w-12 border-4 border-brand-mango border-t-transparent"></div>
       <span class="sr-only">{% trans "Loading..." %}</span>
diff --git a/commcare_connect/templates/opportunity/workers.html b/commcare_connect/templates/opportunity/workers.html
index d7ba7f9a22..cbe12e1db5 100644
--- a/commcare_connect/templates/opportunity/workers.html
+++ b/commcare_connect/templates/opportunity/workers.html
@@ -1,6 +1,5 @@
 {% extends "opportunity/worker_list_base.html" %}
 {% load i18n %}
-
 {% block tab_options %}
   {% if search_term %}
     <span class="text-sm text-slate-600 italic whitespace-nowrap">
@@ -8,8 +7,10 @@
     </span>
   {% endif %}
   {# hx-preserve keeps the input (and its focus/value) alive across #tab-options OOB swaps. #}
-  <div id="worker-search" hx-preserve="true"
-       class="relative" x-data="{ search: '{{ search_term|escapejs }}' }">
+  <div id="worker-search"
+       hx-preserve="true"
+       class="relative"
+       x-data="{ search: '{{ search_term|escapejs }}' }">
     <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
     <input type="text"
            name="q"
@@ -31,22 +32,25 @@
     </button>
   </div>
   <div id="worker-tab-options" class="flex gap-x-4 items-center">
-    <button type="button" class="button-icon shadow-sm" @click="showWorkerExportModal = true"
-            {% if request.org_membership.is_viewer %} disabled {% endif %}
-    >
+    <button type="button"
+            class="button-icon shadow-sm"
+            @click="showWorkerExportModal = true"
+            {% if request.org_membership.is_viewer %}disabled{% endif %}>
       <i class="fa-solid fa-download text-brand-deep-purple"></i>
     </button>
     {% block modals %}
-        {% url 'opportunity:user_status_export' org_slug=request.org.slug opp_id=opportunity.opportunity_id as user_status_export_url %}
-        {% include "components/worker_page/export_modal.html" with modal_name="showWorkerExportModal" modal_title=_("Export Connect Workers") export_url=user_status_export_url export_form=export_form %}
-        {% include "components/worker_page/delete_invites_confirm_modal.html" with modal_name="showConfirmDeleteInvitesModal" modal_title=_("Delete Selected Invites") %}
+      {% url 'opportunity:user_status_export' org_slug=request.org.slug opp_id=opportunity.opportunity_id as user_status_export_url %}
+      {% include "components/worker_page/export_modal.html" with modal_name="showWorkerExportModal" modal_title=_("Export Connect Workers") export_url=user_status_export_url export_form=export_form %}
+      {% include "components/worker_page/delete_invites_confirm_modal.html" with modal_name="showConfirmDeleteInvitesModal" modal_title=_("Delete Selected Invites") %}
     {% endblock %}
     {% if request.org_membership.is_viewer or opportunity.has_ended %}
       <button disabled class="button-icon shadow-sm">
         <i class="fa-solid fa-plus"></i>
       </button>
     {% else %}
-      <a href="{% url 'opportunity:user_invite' request.org.slug opportunity.opportunity_id %}" class="button-icon shadow-sm" x-tooltip.raw="{% trans 'Add Worker' %}">
+      <a href="{% url 'opportunity:user_invite' request.org.slug opportunity.opportunity_id %}"
+         class="button-icon shadow-sm"
+         x-tooltip.raw="{% trans 'Add Worker' %}">
         <i class="fa-solid fa-plus"></i>
       </a>
     {% endif %}
diff --git a/commcare_connect/templates/organization/organization_create.html b/commcare_connect/templates/organization/organization_create.html
index bc1eae5c9e..7bad6b56ea 100644
--- a/commcare_connect/templates/organization/organization_create.html
+++ b/commcare_connect/templates/organization/organization_create.html
@@ -2,12 +2,10 @@
 {% load i18n %}
 {% load static %}
 {% load crispy_forms_tags %}
-
 {% block css %}
   {{ block.super }}
   <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 {% endblock %}
-
 {% block javascript %}
   {{ block.super }}
   <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
@@ -70,37 +68,27 @@
     });
   </script>
 {% endblock javascript %}
-
 {% block title %}
   {% trans "Connect - New Workspace" %}
 {% endblock title %}
-
 {% block content %}
-<div class="container md:max-w-screen-lg mx-auto flex flex-col gap-4">
-  <div class="title text-brand-deep-purple">
-    {% trans "Create a New Workspace" %}
-  </div>
-  <form action="{% url 'organization_create' %}" method="post">
-    {% csrf_token %}
-    {{ form.get_entity_wise_orgs|json_script:"entity-wise-orgs" }}
-    <div x-data="createOrgHandler(JSON.parse(document.getElementById('entity-wise-orgs').textContent))">
-      <div class="mb-4" >
-        {{ form.llo_entity|as_crispy_field }}
-      </div>
-      <div class="mb-4" x-show="isNewEntity" x-cloak x-transition>
-        {{ form.llo_entity_short_name|as_crispy_field }}
+  <div class="container md:max-w-screen-lg mx-auto flex flex-col gap-4">
+    <div class="title text-brand-deep-purple">{% trans "Create a New Workspace" %}</div>
+    <form action="{% url 'organization_create' %}" method="post">
+      {% csrf_token %}
+      {{ form.get_entity_wise_orgs|json_script:"entity-wise-orgs" }}
+      <div x-data="createOrgHandler(JSON.parse(document.getElementById('entity-wise-orgs').textContent))">
+        <div class="mb-4">{{ form.llo_entity|as_crispy_field }}</div>
+        <div class="mb-4" x-show="isNewEntity" x-cloak x-transition>{{ form.llo_entity_short_name|as_crispy_field }}</div>
+        <div class="mb-4" x-show="selectedEntity" x-cloak x-transition>{{ form.org|as_crispy_field }}</div>
+        <button class="button button-md primary-dark float-end"
+                x-show="!selectedWorkspaceSlug"
+                type="submit">{% trans "Create Workspace" %}</button>
+        <a :href="`{% url 'opportunity:list' 'SLUG_PLACEHOLDER' %}`.replace('SLUG_PLACEHOLDER', selectedWorkspaceSlug)"
+           class="button button-md primary-dark float-end"
+           x-show="selectedWorkspaceSlug"
+           x-cloak>{% trans "Switch to Selected Workspace" %}</a>
       </div>
-      <div class="mb-4" x-show="selectedEntity" x-cloak x-transition>
-        {{ form.org|as_crispy_field }}
-      </div>
-      <button class="button button-md primary-dark float-end" x-show="!selectedWorkspaceSlug" type="submit">
-        {% trans "Create Workspace" %}
-      </button>
-      <a :href="`{% url 'opportunity:list' 'SLUG_PLACEHOLDER' %}`.replace('SLUG_PLACEHOLDER', selectedWorkspaceSlug)"
-         class="button button-md primary-dark float-end" x-show="selectedWorkspaceSlug" x-cloak>
-        {% trans "Switch to Selected Workspace" %}
-      </a>
-    </div>
-  </form>
-</div>
+    </form>
+  </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/organization/organization_home.html b/commcare_connect/templates/organization/organization_home.html
index c0f86d3cec..748554310e 100644
--- a/commcare_connect/templates/organization/organization_home.html
+++ b/commcare_connect/templates/organization/organization_home.html
@@ -3,89 +3,72 @@
 {% load crispy_forms_tags %}
 {% load django_tables2 %}
 {% load i18n %}
-
 {% block css %}
   {{ block.super }}
   <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 {% endblock %}
-
 {% block javascript %}
   {{ block.super }}
   <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
 {% endblock javascript %}
-
-
 {% block content %}
-<p class="my-5 text-sm max-w-screen-lg mx-auto font-medium text-brand-deep-purple">{{request.org.name}}</p>
-
-<div
-  class="flex flex-col max-w-screen-lg mx-auto gap-2"
-  x-cloak
-  x-data="orgTabs()"
->
-  <!-- Tabs -->
+  <p class="my-5 text-sm max-w-screen-lg mx-auto font-medium text-brand-deep-purple">{{ request.org.name }}</p>
+  <div class="flex flex-col max-w-screen-lg mx-auto gap-2"
+       x-cloak
+       x-data="orgTabs()">
+    <!-- Tabs -->
     <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14">
       <ul class="tabs">
         <!-- Details Tab -->
-        <li @click="selectedTab = 'details';" :class="{'active': selectedTab !== 'details'}">
+        <li @click="selectedTab = 'details';"
+            :class="{'active': selectedTab !== 'details'}">
           <span>{% trans 'Details' %}</span>
-          <div  x-show="selectedTab === 'details'"></div>
+          <div x-show="selectedTab === 'details'"></div>
         </li>
-
-        <li @click="selectedTab = 'members';" :class="{'active': selectedTab !== 'members'}">
+        <li @click="selectedTab = 'members';"
+            :class="{'active': selectedTab !== 'members'}">
           <span>{% trans 'Members' %}</span>
-          <div  x-show="selectedTab === 'members'"></div>
+          <div x-show="selectedTab === 'members'"></div>
         </li>
       </ul>
-
-    <!-- Options -->
+      <!-- Options -->
       <div x-show="selectedTab === 'members'" class="flex items-center gap-x-4">
-        <button
-          class="button button-md bg-red-600 hover:bg-red-700 text-white"
-          :disabled="selected.length === 0"
-          @click="showConfirmRemoveMembershipModal = true"
-        >
+        <button class="button button-md bg-red-600 hover:bg-red-700 text-white"
+                :disabled="selected.length === 0"
+                @click="showConfirmRemoveMembershipModal = true">
           <i class="fa-solid fa-trash"></i>
           {% trans 'Remove Member(s)' %}
         </button>
-        <button class="button button-md outline-style" @click="showAddMemberModal = true">
-          {% trans 'Add Members' %}
-        </button>
+        <button class="button button-md outline-style"
+                @click="showAddMemberModal = true">{% trans 'Add Members' %}</button>
       </div>
-  </div>
-
-  <!-- Tab Content Containers -->
-  <div class="w-full">
-    <!-- Details Content (Already rendered) -->
-    <div x-show="selectedTab === 'details'" class="w-full mt-6">
-      <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% trans 'Workspace' %}</h2>
-      <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 mb-10">
-        <form method="post" class="bg-white">
-          {% csrf_token %}
-          {% crispy form %}
-        </form>
+    </div>
+    <!-- Tab Content Containers -->
+    <div class="w-full">
+      <!-- Details Content (Already rendered) -->
+      <div x-show="selectedTab === 'details'" class="w-full mt-6">
+        <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% trans 'Workspace' %}</h2>
+        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 mb-10">
+          <form method="post" class="bg-white">
+            {% csrf_token %}
+            {% crispy form %}
+          </form>
+        </div>
       </div>
+      <div x-show="selectedTab === 'members'"
+           id="invoice_members_container"
+           class="w-full"
+           hx-get="{% url 'organization:org_member_table' request.org.slug %}?{% querystring %}"
+           hx-swap="innerHTML"
+           hx-trigger="loadMembers from:body"></div>
     </div>
-
-    <div
-    x-show="selectedTab === 'members'"
-    id="invoice_members_container"
-    class="w-full"
-    hx-get="{% url 'organization:org_member_table' request.org.slug %}?{% querystring %}"
-    hx-swap="innerHTML"
-    hx-trigger="loadMembers from:body"
-  ></div>
+    {% include "components/organization_home_page/add_org_member_modal.html" %}
+    {% include "components/organization_home_page/remove_org_member_confirm_modal.html" %}
   </div>
-
-  {% include "components/organization_home_page/add_org_member_modal.html" %}
-  {% include "components/organization_home_page/remove_org_member_confirm_modal.html" %}
-</div>
 {% endblock content %}
-
-
 {% block inline_javascript %}
-{{ block.super }}
-<script>
+  {{ block.super }}
+  <script>
   document.addEventListener('alpine:init', () => {
     Alpine.data('orgTabs', () => ({
       selectedTab: '{{ request.GET.active_tab|default:"details" }}',
@@ -139,5 +122,5 @@ <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% trans 'Workspac
       },
     }));
   });
-</script>
+  </script>
 {% endblock %}
diff --git a/commcare_connect/templates/pages/connect_user_otp.html b/commcare_connect/templates/pages/connect_user_otp.html
index 509623ec5e..36e6737ed6 100644
--- a/commcare_connect/templates/pages/connect_user_otp.html
+++ b/commcare_connect/templates/pages/connect_user_otp.html
@@ -1,11 +1,7 @@
 {% extends "base.html" %}
-
 {% load crispy_forms_tags %}
-
 {% block content %}
-<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
-    <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
-        {% crispy form %}
-    </div>
-</div>
+  <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+    <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">{% crispy form %}</div>
+  </div>
 {% endblock %}
diff --git a/commcare_connect/templates/pages/home.html b/commcare_connect/templates/pages/home.html
index 80f70d6434..554283859f 100644
--- a/commcare_connect/templates/pages/home.html
+++ b/commcare_connect/templates/pages/home.html
@@ -1,40 +1,43 @@
 {% extends "base.html" %}
-
 {% load i18n %}
-
 {% block content %}
-{% if not request.user.is_authenticated %}
-<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
-    <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl">Connect</h1>
-    <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
-      {% blocktrans %}Unlocking more impact from Frontline Workers{% endblocktrans %}
-    </p>
-    <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
-      <a href="{% url 'account_signup' %}" class="button button-md primary-dark !inline-flex items-center">
-            Create Account
-            <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-            </svg>
-      </a>
+  {% if not request.user.is_authenticated %}
+    <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+      <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl">Connect</h1>
+      <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
+        {% blocktrans %}Unlocking more impact from Frontline Workers{% endblocktrans %}
+      </p>
+      <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
+        <a href="{% url 'account_signup' %}"
+           class="button button-md primary-dark !inline-flex items-center">
+          Create Account
+          <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180"
+               aria-hidden="true"
+               xmlns="http://www.w3.org/2000/svg"
+               fill="none"
+               viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
+          </svg>
+        </a>
+      </div>
     </div>
-</div>
-{% else %}
-<div class="card_bg">
-  <div class="flex flex-col item-center justify-center gap-4 h-[80vh]">
-    <p class="max-w-1/2 mx-auto text-center text-gray-500 text-sm">
-      {% trans "Welcome to Connect." %}
-      {% if request.memberships.exists or perms.users.workspace_entity_management_access %}
-        {% blocktrans %}
+  {% else %}
+    <div class="card_bg">
+      <div class="flex flex-col item-center justify-center gap-4 h-[80vh]">
+        <p class="max-w-1/2 mx-auto text-center text-gray-500 text-sm">
+          {% trans "Welcome to Connect." %}
+          {% if request.memberships.exists or perms.users.workspace_entity_management_access %}
+            {% blocktrans %}
           You can enter an organisational workspace or create a new one through the dropdown on the top right of this page.
         {% endblocktrans %}
-      {% else %}
-        {% blocktrans %}
+          {% else %}
+            {% blocktrans %}
           You are not currently a member of any workspaces. Please ask your administrator for an invite.
         {% endblocktrans %}
-      {% endif %}
-    </p>
-    <i class="fa-solid fa-box-open text-5xl mx-auto text-gray-500"></i>
-  </div>
-</div>
-{% endif %}
+          {% endif %}
+        </p>
+        <i class="fa-solid fa-box-open text-5xl mx-auto text-gray-500"></i>
+      </div>
+    </div>
+  {% endif %}
 {% endblock %}
diff --git a/commcare_connect/templates/program/email/monthly_delivery_reminder.html b/commcare_connect/templates/program/email/monthly_delivery_reminder.html
index 9374f11ed8..7ba1d0e13d 100644
--- a/commcare_connect/templates/program/email/monthly_delivery_reminder.html
+++ b/commcare_connect/templates/program/email/monthly_delivery_reminder.html
@@ -1,16 +1,14 @@
 {% extends "email/base.html" %}
-
 {% block content %}
-<p>Hi,</p>
-
-<p>This is a reminder to review pending deliveries before the end of the month so they can be included in invoices.</p>
-
-<p>Workspace: '{{ organization.name }}'</p>
-
-<p>Please review the pending deliveries for the following opportunities:</p>
-<ul>
-{% for opportunity in opportunities %}
-    <li><a href="{{ opportunity.url }}">{{ opportunity.name }}</a></li>
-{% endfor %}
-</ul>
+  <p>Hi,</p>
+  <p>This is a reminder to review pending deliveries before the end of the month so they can be included in invoices.</p>
+  <p>Workspace: '{{ organization.name }}'</p>
+  <p>Please review the pending deliveries for the following opportunities:</p>
+  <ul>
+    {% for opportunity in opportunities %}
+      <li>
+        <a href="{{ opportunity.url }}">{{ opportunity.name }}</a>
+      </li>
+    {% endfor %}
+  </ul>
 {% endblock %}
diff --git a/commcare_connect/templates/program/email/opportunity_created.html b/commcare_connect/templates/program/email/opportunity_created.html
index 0df1e8f520..3b0cf338fc 100644
--- a/commcare_connect/templates/program/email/opportunity_created.html
+++ b/commcare_connect/templates/program/email/opportunity_created.html
@@ -1,17 +1,15 @@
 {% extends "email/base.html" %}
-
 {% block content %}
-<p>Hi,</p>
-
-<p>A new opportunity has been created for your workspace!</p>
-
-<p>
-    <strong>Opportunity:</strong> {{ opportunity.name }}<br>
-    <strong>Program:</strong> {{ opportunity.program.name }}<br>
+  <p>Hi,</p>
+  <p>A new opportunity has been created for your workspace!</p>
+  <p>
+    <strong>Opportunity:</strong> {{ opportunity.name }}
+    <br>
+    <strong>Program:</strong> {{ opportunity.program.name }}
+    <br>
     <strong>Workspace:</strong> {{ opportunity.organization.name }}
-</p>
-
-<p>
+  </p>
+  <p>
     <a href="{{ opportunity_url }}">Click here to view the opportunity</a>
-</p>
+  </p>
 {% endblock %}
diff --git a/commcare_connect/templates/program/email/opportunity_expiry_reminder.html b/commcare_connect/templates/program/email/opportunity_expiry_reminder.html
index ca6f39182d..a024298613 100644
--- a/commcare_connect/templates/program/email/opportunity_expiry_reminder.html
+++ b/commcare_connect/templates/program/email/opportunity_expiry_reminder.html
@@ -1,18 +1,20 @@
 {% extends "email/base.html" %}
-
 {% block content %}
-<p>Hi,</p>
-
-<p>This is a reminder that the following {{ opportunities|length }} opportunit{{ opportunities|length|pluralize:"y,ies" }} will end on <strong>{{ target_date }}</strong>:</p>
-
-<ul>
-{% for opp in opportunities %}
-    <li>
-        <a href="{{ opp.opportunity_url }}">{{ opp.name }}</a><br>
-        Program: {{ opp.program_name }}<br>
-        Organization: {{ opp.org_name }}<br>
+  <p>Hi,</p>
+  <p>
+    This is a reminder that the following {{ opportunities|length }} opportunit{{ opportunities|length|pluralize:"y,ies" }} will end on <strong>{{ target_date }}</strong>:
+  </p>
+  <ul>
+    {% for opp in opportunities %}
+      <li>
+        <a href="{{ opp.opportunity_url }}">{{ opp.name }}</a>
+        <br>
+        Program: {{ opp.program_name }}
+        <br>
+        Organization: {{ opp.org_name }}
+        <br>
         End Date: {{ opp.end_date }}
-    </li>
-{% endfor %}
-</ul>
+      </li>
+    {% endfor %}
+  </ul>
 {% endblock %}
diff --git a/commcare_connect/templates/program/email/program_invite_applied.html b/commcare_connect/templates/program/email/program_invite_applied.html
index 5c1f67b66f..54052dd417 100644
--- a/commcare_connect/templates/program/email/program_invite_applied.html
+++ b/commcare_connect/templates/program/email/program_invite_applied.html
@@ -1,16 +1,13 @@
 {% extends "email/base.html" %}
-
 {% block content %}
-<p>Hi,</p>
-
-<p>A new Network Manager has applied for a program.</p>
-
-<p>
-    Workspace: '{{ application.organization.name }}'<br>
+  <p>Hi,</p>
+  <p>A new Network Manager has applied for a program.</p>
+  <p>
+    Workspace: '{{ application.organization.name }}'
+    <br>
     Program: '{{ application.program.name }}'
-</p>
-
-<p>
+  </p>
+  <p>
     <a href="{{ program_url }}">Click here</a> to review the program for which the Network Manager has applied.
-</p>
+  </p>
 {% endblock %}
diff --git a/commcare_connect/templates/program/email/program_invite_notification.html b/commcare_connect/templates/program/email/program_invite_notification.html
index b3a4345664..74ea681fd5 100644
--- a/commcare_connect/templates/program/email/program_invite_notification.html
+++ b/commcare_connect/templates/program/email/program_invite_notification.html
@@ -1,11 +1,8 @@
 {% extends "email/base.html" %}
-
 {% block content %}
-<p>Hi,</p>
-
-<p>You have been invited to join the Program "{{ application.program.name }}".</p>
-
-<p>
+  <p>Hi,</p>
+  <p>You have been invited to join the Program "{{ application.program.name }}".</p>
+  <p>
     <a href="{{ program_url }}">Click here</a> to review and apply for the Program.
-</p>
+  </p>
 {% endblock %}
diff --git a/commcare_connect/templates/program/nm_home.html b/commcare_connect/templates/program/nm_home.html
index 7e200e19f3..5d090584bf 100644
--- a/commcare_connect/templates/program/nm_home.html
+++ b/commcare_connect/templates/program/nm_home.html
@@ -1,11 +1,10 @@
 {% extends 'program/program_base.html' %}
 {% load i18n %}
-
 {% block inner %}
   <div class="flex flex-col gap-4">
     {% for program in programs %}
-        <div class="flex flex-col p-6 rounded-xl shadow-sm bg-white gap-5 relative"
-             x-data="{ showOpp: false, status: '{{ program.status }}' }">
+      <div class="flex flex-col p-6 rounded-xl shadow-sm bg-white gap-5 relative"
+           x-data="{ showOpp: false, status: '{{ program.status }}' }">
         <div class="absolute w-8 bg-brand-mango h-2 top-0 -translate-y-1/2 left-6 rounded-full"></div>
         <div class="flex w-full justify-between">
           <!-- program details -->
@@ -19,82 +18,74 @@
             {% endif %}
             <p class="hint">{{ program.organization.name }}</p>
           </div>
-
           <!-- invitataion status -->
           <div class="flex items-center justify-end gap-6">
             {% if program.status %}
               <span class="badge badge-md"
-                    :class="{
-                      'warning-dark': status == 'invited',
-                      'primary-dark': status == 'applied',
-                      'positive-dark': status == 'accepted'
-                    }"
+                    :class="{ 'warning-dark': status == 'invited', 'primary-dark': status == 'applied', 'positive-dark': status == 'accepted' }"
                     x-text="status"></span>
             {% endif %}
           </div>
         </div>
-
         <div class="w-full">
           <p class="card_title">{{ program.name }}</p>
           <p class="card_description w-full max-w-1/2">{{ program.description }}</p>
         </div>
-
         <div class="infocard-dark">
-            <i class="fa-solid fa-file-circle-check"></i>
-            <div>
-                <h6>{% translate "Delivery Type" %}</h6>
-                <p>{{ program.delivery_type.name }}</p>
-            </div>
+          <i class="fa-solid fa-file-circle-check"></i>
+          <div>
+            <h6>{% translate "Delivery Type" %}</h6>
+            <p>{{ program.delivery_type.name }}</p>
+          </div>
         </div>
-
         <div class="flex justify-between items-center">
           <!-- program info -->
           <div class="flex items-center gap-6">
-              <div class="infocard-dark">
-                  <i class="fa-solid fa-calendar-check"></i>
-                  <div>
-                      <h6>{% translate "Start Date" %}</h6>
-                      <p>{{ program.start_date }}</p>
-                  </div>
+            <div class="infocard-dark">
+              <i class="fa-solid fa-calendar-check"></i>
+              <div>
+                <h6>{% translate "Start Date" %}</h6>
+                <p>{{ program.start_date }}</p>
               </div>
-              <div class="infocard-dark">
-                  <i class="fa-solid fa-arrow-right text-brand-mango"></i>
-                  <div>
-                      <h6>{% translate "End Date" %}</h6>
-                      <p>{{ program.end_date }}</p>
-                  </div>
+            </div>
+            <div class="infocard-dark">
+              <i class="fa-solid fa-arrow-right text-brand-mango"></i>
+              <div>
+                <h6>{% translate "End Date" %}</h6>
+                <p>{{ program.end_date }}</p>
               </div>
+            </div>
           </div>
         </div>
         <div class="flex flex-row-reverse">
-        {% if program.status == 'invited' %}
-          <button {% if request.org_membership.is_admin %}
-                  hx-post="{% url "program:apply_or_decline_application" request.org.slug program.program_id program.application_program_application_id "apply" %}"
-                  hx-swap="outerHTML"
-                  hx-target="body"
-                  {% else %}
-                  disabled
-                  {% endif %}
-                class="button button-sm primary-dark">
+          {% if program.status == 'invited' %}
+            <button {% if request.org_membership.is_admin %} hx-post="{% url "program:apply_or_decline_application" request.org.slug program.program_id program.application_program_application_id "apply" %}" hx-swap="outerHTML" hx-target="body" {% else %} disabled {% endif %}
+                    class="button button-sm primary-dark">
               <i class="fa-solid fa-circle-plus text-white"></i> {% translate "Apply to Program" %}
-          </button>
-        {% elif program.status == 'applied' %}
-          <button class="button button-sm neutral lg:self-end" disabled>
+            </button>
+          {% elif program.status == 'applied' %}
+            <button class="button button-sm neutral lg:self-end" disabled>
               <i class="fa-solid fa-circle-check text-green-600"></i> {% translate "Apply to Program" %}
-          </button>
-        {% elif program.status == 'accepted' %}
-          {% if program.managed_opportunities_for_org %}
-            <button class="button button-sm outline-style w-full" @click="showOpp = !showOpp">
-              <span class="relative z-20" x-text="showOpp ? '{% translate "Hide Opportunities" %}' : '{% translate "View Opportunities" %}'"></span>
-              <i class="fa-solid text-xs" :class="showOpp ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
             </button>
+          {% elif program.status == 'accepted' %}
+            {% if program.managed_opportunities_for_org %}
+              <button class="button button-sm outline-style w-full"
+                      @click="showOpp = !showOpp">
+                <span class="relative z-20"
+                      x-text="showOpp ? '{% translate "Hide Opportunities" %}' : '{% translate "View Opportunities" %}'"></span>
+                <i class="fa-solid text-xs"
+                   :class="showOpp ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+              </button>
+            {% endif %}
           {% endif %}
-        {% endif %}
         </div>
-
         {% if program.status == 'accepted' %}
           {% if program.managed_opportunities_for_org %}
-            <div id="opportunity-container" class="flex flex-col gap-y-4 py-4" style="display:none;" x-cloak x-show="showOpp">
+            <div id="opportunity-container"
+                 class="flex flex-col gap-y-4 py-4"
+                 style="display:none"
+                 x-cloak
+                 x-show="showOpp">
               {% for opportunity in program.managed_opportunities_for_org %}
                 <div class="relative flex flex-col gap-5 p-6 bg-white rounded-xl border border-gray-200">
                   <div class="flex justify-between w-full">
@@ -109,25 +100,25 @@ <h6>{% translate "End Date" %}</h6>
                       </div>
                     </div>
                   </div>
-
                   <div class="flex items-center justify-between">
                     <div class="flex items-center gap-6">
                       <div class="infocard-dark">
-                          <i class="fa-solid fa-calendar-check"></i>
-                          <div>
-                              <h6>Start Date</h6>
-                              <p>{{opportunity.start_date}}</p>
-                          </div>
+                        <i class="fa-solid fa-calendar-check"></i>
+                        <div>
+                          <h6>Start Date</h6>
+                          <p>{{ opportunity.start_date }}</p>
+                        </div>
                       </div>
                       <div class="infocard-dark">
-                          <i class="fa-solid fa-arrow-right text-brand-mango"></i>
-                          <div>
-                              <h6>End Date</h6>
-                              <p>{{opportunity.end_date}}</p>
-                          </div>
+                        <i class="fa-solid fa-arrow-right text-brand-mango"></i>
+                        <div>
+                          <h6>End Date</h6>
+                          <p>{{ opportunity.end_date }}</p>
+                        </div>
                       </div>
                     </div>
-                    <a class="button button-md button-outline-rounded" href="{% url "opportunity:detail" request.org.slug opportunity.opportunity_id %}">
+                    <a class="button button-md button-outline-rounded"
+                       href="{% url "opportunity:detail" request.org.slug opportunity.opportunity_id %}">
                       <div class="flex items-center justify-between gap-4">
                         <p class="text-sm">{% translate "View" %}</p>
                         <i class="fa-solid fa-arrow-right"></i>
diff --git a/commcare_connect/templates/program/pm_home.html b/commcare_connect/templates/program/pm_home.html
index 53638c1652..efa6efd7bc 100644
--- a/commcare_connect/templates/program/pm_home.html
+++ b/commcare_connect/templates/program/pm_home.html
@@ -2,23 +2,21 @@
 {% load humanize %}
 {% load i18n %}
 {% load static %}
-
 {% block css %}
   {{ block.super }}
   <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 {% endblock %}
-
 {% block javascript %}
   {{ block.super }}
   <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
 {% endblock javascript %}
-
 {% block inner %}
-<div x-data="{showProgramEditModal: false}">
-  <div class="flex flex-col gap-4">
-    {% for program in programs %}
-      <div class="flex flex-col p-6 rounded-xl shadow-sm bg-white gap-5 relative" x-data="{showOpp: false, showInviteModal: false}">
-        <div class="absolute w-8 bg-brand-mango h-2 top-0 -translate-y-1/2 left-6 rounded-full"></div>
+  <div x-data="{showProgramEditModal: false}">
+    <div class="flex flex-col gap-4">
+      {% for program in programs %}
+        <div class="flex flex-col p-6 rounded-xl shadow-sm bg-white gap-5 relative"
+             x-data="{showOpp: false, showInviteModal: false}">
+          <div class="absolute w-8 bg-brand-mango h-2 top-0 -translate-y-1/2 left-6 rounded-full"></div>
           <div class="flex w-full justify-between">
             <div class="w-full">
               <p class="card_title">{{ program.name }}</p>
@@ -26,33 +24,44 @@
             </div>
             <div class="flex items-start justify-end gap-6">
               <button class="button-icon"
-                hx-get="{% url "program:edit" request.org.slug program.program_id %}"
-                hx-target="#program-edit-form"
-                @htmx:after-request="showProgramEditModal = true">
+                      hx-get="{% url "program:edit" request.org.slug program.program_id %}"
+                      hx-target="#program-edit-form"
+                      @htmx:after-request="showProgramEditModal = true">
                 <i class="fa-solid fa-pen"></i>
               </button>
-              <button class="button button-sm outline-style" @click="showInviteModal = true">{% translate "Invite" %}</button>
-              <div x-cloak x-show="showInviteModal" x-transition.opacity class="modal-backdrop" >
+              <button class="button button-sm outline-style"
+                      @click="showInviteModal = true">{% translate "Invite" %}</button>
+              <div x-cloak
+                   x-show="showInviteModal"
+                   x-transition.opacity
+                   class="modal-backdrop">
                 <div @click.away="showInviteModal = false" x-transition class="modal">
                   <div class="header">
                     <h2 class="title">{% translate "Invite Workspace" %}</h2>
-                    <button @click="showInviteModal = false" class="button-icon" aria-label="Close">
+                    <button @click="showInviteModal = false"
+                            class="button-icon"
+                            aria-label="Close">
                       <i class="fa-solid fa-xmark text-xl"></i>
                     </button>
                   </div>
-                  <form action="{% url "program:invite_organization" org_slug=request.org.slug pk=program.program_id %}" method="post">
+                  <form action="{% url "program:invite_organization" org_slug=request.org.slug pk=program.program_id %}"
+                        method="post">
                     {% csrf_token %}
                     <div class="flex flex-col gap-2 py-4">
                       <label for="organization" class="title-sm">{% translate "Workspace" %}</label>
-                      <select id="organization" name="organization" required data-tomselect data-tomselect:no-remove-button>
-                        {% for org in organizations %}
-                          <option value="{{ org.slug }}">{{ org.name }}</option>
-                        {% endfor %}
+                      <select id="organization"
+                              name="organization"
+                              required
+                              data-tomselect
+                              data-tomselect:no-remove-button>
+                        {% for org in organizations %}<option value="{{ org.slug }}">{{ org.name }}</option>{% endfor %}
                       </select>
                       <span class="hint">{% blocktrans %}Select the workspace you want to invite.{% endblocktrans %}</span>
                     </div>
                     <div class="footer">
-                      <button type="button" @click="showInviteModal = false" class="button button-md outline-style">{% translate "Close" %}</button>
+                      <button type="button"
+                              @click="showInviteModal = false"
+                              class="button button-md outline-style">{% translate "Close" %}</button>
                       <button type="submit" class="button button-md primary-dark">{% translate "Invite" %}</button>
                     </div>
                   </form>
@@ -61,168 +70,165 @@ <h2 class="title">{% translate "Invite Workspace" %}</h2>
             </div>
           </div>
           {% with applications=program.applications_with_budget|default:program.programapplication_set.all %}
-
-          <div class="infocard-dark">
+            <div class="infocard-dark">
               <i class="fa-solid fa-file-circle-check"></i>
               <div>
-                  <h6>{% translate "Delivery Type" %}</h6>
-                  <p>{{program.delivery_type.name}}</p>
+                <h6>{% translate "Delivery Type" %}</h6>
+                <p>{{ program.delivery_type.name }}</p>
               </div>
-          </div>
-
-          <div class="flex xl:items-center items-start xl:flex-row flex-col lg:gap-6 gap-3">
-            <div class="flex flex-row items-center lg:gap-6 gap-3">
-              <div class="infocard-dark">
+            </div>
+            <div class="flex xl:items-center items-start xl:flex-row flex-col lg:gap-6 gap-3">
+              <div class="flex flex-row items-center lg:gap-6 gap-3">
+                <div class="infocard-dark">
                   <i class="fa-solid fa-calendar-check"></i>
                   <div>
-                      <h6>{% translate "Start Date" %}</h6>
-                      <p>{{program.start_date}}</p>
+                    <h6>{% translate "Start Date" %}</h6>
+                    <p>{{ program.start_date }}</p>
                   </div>
-              </div>
-              <i class="fa-solid fa-arrow-right text-brand-mango"></i>
-              <div class="infocard-dark">
+                </div>
+                <i class="fa-solid fa-arrow-right text-brand-mango"></i>
+                <div class="infocard-dark">
                   <div>
-                      <h6>{% translate "End Date" %}</h6>
-                      <p>{{program.end_date}}</p>
+                    <h6>{% translate "End Date" %}</h6>
+                    <p>{{ program.end_date }}</p>
                   </div>
+                </div>
               </div>
-            </div>
-            <div class="line my-2 h-8 w-0.5 bg-gray-200 lg:block hidden"></div>
-            <div class="flex flex-row gap-8">
-              <div class="infocard-dark">
+              <div class="line my-2 h-8 w-0.5 bg-gray-200 lg:block hidden"></div>
+              <div class="flex flex-row gap-8">
+                <div class="infocard-dark">
                   <i class="fa-solid fa-money-bill-wave"></i>
                   <div>
-                      <h6>{% translate "Budget" %}</h6>
-                      <p>{{program.budget|intcomma}} {{program.currency_code|default:''}}</p>
+                    <h6>{% translate "Budget" %}</h6>
+                    <p>{{ program.budget|intcomma }} {{ program.currency_code|default:'' }}</p>
                   </div>
-              </div>
-              <div class="infocard-dark">
+                </div>
+                <div class="infocard-dark">
                   <i class="fa-solid fa-hand-holding-dollar"></i>
                   <div>
-                      <h6 class="whitespace-nowrap">{% translate "Allocated Budget" %}</h6>
-                      <p>{{program.allocated_budget|default:0|intcomma}} {{program.currency_code|default:''}}</p>
+                    <h6 class="whitespace-nowrap">{% translate "Allocated Budget" %}</h6>
+                    <p>{{ program.allocated_budget|default:0|intcomma }} {{ program.currency_code|default:'' }}</p>
                   </div>
+                </div>
               </div>
             </div>
-          </div>
-
-          <!-- progress -->
-          <div class="bg-neutral-100 rounded-lg w-full h-20 flex items-center px-5 justify-evenly gap-6">
-            <div class="infocard-dark !w-fit">
+            <!-- progress -->
+            <div class="bg-neutral-100 rounded-lg w-full h-20 flex items-center px-5 justify-evenly gap-6">
+              <div class="infocard-dark !w-fit">
                 <i class="fa-solid fa-envelope"></i>
                 <div>
-                    <h6>{% translate "Invited" %}</h6>
-                    <p>{{program.invited}}</p>
+                  <h6>{% translate "Invited" %}</h6>
+                  <p>{{ program.invited }}</p>
                 </div>
-            </div>
-            <i class="fa-solid fa-arrow-right text-brand-mango"></i>
-            <div class="infocard-dark !w-fit">
+              </div>
+              <i class="fa-solid fa-arrow-right text-brand-mango"></i>
+              <div class="infocard-dark !w-fit">
                 <i class="fa-solid fa-file-lines"></i>
                 <div>
-                    <h6>{% translate "Applied" %}</h6>
-                    <p>{{program.applied}}</p>
+                  <h6>{% translate "Applied" %}</h6>
+                  <p>{{ program.applied }}</p>
                 </div>
-            </div>
-            <i class="fa-solid fa-arrow-right text-brand-mango"></i>
-            <div class="infocard-dark !w-fit">
+              </div>
+              <i class="fa-solid fa-arrow-right text-brand-mango"></i>
+              <div class="infocard-dark !w-fit">
                 <i class="fa-solid fa-circle-check"></i>
                 <div>
-                    <h6>{% translate "Accepted" %}</h6>
-                    <p>{{program.accepted}}</p>
+                  <h6>{% translate "Accepted" %}</h6>
+                  <p>{{ program.accepted }}</p>
                 </div>
+              </div>
             </div>
-          </div>
-
-          {% if applications %}
-            <button class="button button-sm outline-style" @click="showOpp = !showOpp">
-              <span class="relative z-20" x-text="showOpp ? 'Hide Status' : 'View Status'"></span>
-              <i class="fa-solid text-xs" :class="showOpp ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
-            </button>
-          {% endif %}
-
-          <div class="flex flex-col gap-y-4" x-cloak x-show="showOpp">
-          {% for application in applications %}
-            <div class="relative flex flex-col gap-5 p-6 bg-white rounded-xl border border-gray-200">
-              <div class="flex justify-between w-full">
-                <div class="flex justify-between w-full">
-                  <div class="flex flex-col font-normal">
-                    <p class="hint">{{ application.date_created|date }}</p>
-
-                    <div class="flex flex-col gap-2">
-                      <p class="card_title">{{ application.organization.name }}</p>
-                      <p class="hint">
-                        {% translate "Current Budget" %}:
-                        {{ application.current_budget|default:0|intcomma }} {{ program.currency_code|default:'' }}
-                      </p>
+            {% if applications %}
+              <button class="button button-sm outline-style" @click="showOpp = !showOpp">
+                <span class="relative z-20"
+                      x-text="showOpp ? 'Hide Status' : 'View Status'"></span>
+                <i class="fa-solid text-xs"
+                   :class="showOpp ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+              </button>
+            {% endif %}
+            <div class="flex flex-col gap-y-4" x-cloak x-show="showOpp">
+              {% for application in applications %}
+                <div class="relative flex flex-col gap-5 p-6 bg-white rounded-xl border border-gray-200">
+                  <div class="flex justify-between w-full">
+                    <div class="flex justify-between w-full">
+                      <div class="flex flex-col font-normal">
+                        <p class="hint">{{ application.date_created|date }}</p>
+                        <div class="flex flex-col gap-2">
+                          <p class="card_title">{{ application.organization.name }}</p>
+                          <p class="hint">
+                            {% translate "Current Budget" %}:
+                            {{ application.current_budget|default:0|intcomma }} {{ program.currency_code|default:'' }}
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex items-start">
+                        {% if application.status == 'rejected' %}
+                          <span class="badge badge-md negative-dark">{% translate "Rejected" %}</span>
+                        {% elif application.status == 'declined' %}
+                          <span class="badge badge-md negative-dark">{% translate "Declined" %}</span>
+                        {% elif application.status == 'invited' %}
+                          <span class="badge badge-md warning-dark">{% translate "Invited" %}</span>
+                        {% elif application.status == 'applied' %}
+                          <span class="badge badge-md primary-dark">{% translate "Applied" %}</span>
+                        {% elif application.status == 'accepted' %}
+                          <span class="badge badge-md positive-dark">{% translate "Accepted" %}</span>
+                        {% endif %}
+                      </div>
                     </div>
                   </div>
-                  <div class="flex items-start">
-                    {% if application.status == 'rejected' %}
-                      <span class="badge badge-md negative-dark">{% translate "Rejected" %}</span>
-                    {% elif application.status == 'declined' %}
-                      <span class="badge badge-md negative-dark">{% translate "Declined" %}</span>
-                    {% elif application.status == 'invited' %}
-                      <span class="badge badge-md warning-dark">{% translate "Invited" %}</span>
-                    {% elif application.status == 'applied' %}
-                      <span class="badge badge-md primary-dark">{% translate "Applied" %}</span>
+                  <div class="flex items-center justify-end">
+                    {% if application.status == 'applied' %}
+                      <div class="flex gap-2">
+                        <button class="button button-md outline-style"
+                                value="reject"
+                                hx-post="{% url 'program:manage_application' request.org.slug application.id 'reject' %}"
+                                hx-swap="outerHTML"
+                                hx-target="body">{% translate "Reject" %}</button>
+                        <button class="button button-md primary-dark"
+                                value="accept"
+                                hx-post="{% url 'program:manage_application' request.org.slug application.id 'accept' %}"
+                                hx-swap="outerHTML"
+                                hx-target="body">{% translate "Accept" %}</button>
+                      </div>
                     {% elif application.status == 'accepted' %}
-                      <span class="badge badge-md positive-dark">{% translate "Accepted" %}</span>
+                      <a class="button button-md button-outline-rounded me-1"
+                         href="{% url "program:opportunity_init" request.org.slug program.program_id %}">
+                        <div class="flex items-center justify-between gap-4">
+                          <p class="text-sm">{% translate "Create Opportunity" %}</p>
+                          <i class="fa-solid fa-arrow-right"></i>
+                        </div>
+                      </a>
+                      <a class="button button-md button-outline-rounded"
+                         href="{% url "opportunity:list" request.org.slug %}?program={{ program.slug }}">
+                        <div class="flex items-center justify-between gap-4">
+                          <p class="text-sm">{% translate "View Opportunities" %}</p>
+                          <i class="fa-solid fa-arrow-right"></i>
+                        </div>
+                      </a>
                     {% endif %}
                   </div>
                 </div>
-              </div>
-
-              <div class="flex items-center justify-end">
-                {% if application.status == 'applied' %}
-                <div class="flex gap-2">
-                  <button class="button button-md outline-style" value="reject"
-                    hx-post="{% url 'program:manage_application' request.org.slug application.id 'reject' %}"
-                    hx-swap="outerHTML"
-                    hx-target="body">
-                    {% translate "Reject" %}
-                  </button>
-                  <button class="button button-md primary-dark" value="accept"
-                    hx-post="{% url 'program:manage_application' request.org.slug application.id 'accept' %}"
-                    hx-swap="outerHTML"
-                    hx-target="body">
-                    {% translate "Accept" %}
-                  </button>
-                </div>
-                {% elif application.status == 'accepted' %}
-                <a class="button button-md button-outline-rounded me-1"
-                  href="{% url "program:opportunity_init" request.org.slug program.program_id %}">
-                  <div class="flex items-center justify-between gap-4">
-                    <p class="text-sm">{% translate "Create Opportunity" %}</p>
-                    <i class="fa-solid fa-arrow-right"></i>
-                  </div>
-                </a>
-                <a class="button button-md button-outline-rounded"
-                  href="{% url "opportunity:list" request.org.slug %}?program={{program.slug}}">
-                  <div class="flex items-center justify-between gap-4">
-                    <p class="text-sm">{% translate "View Opportunities" %}</p>
-                    <i class="fa-solid fa-arrow-right"></i>
-                  </div>
-                </a>
-                {% endif %}
-              </div>
+              {% endfor %}
             </div>
-          {% endfor %}
-          </div>
           {% endwith %}
+        </div>
+      {% endfor %}
+    </div>
+    <div x-cloak
+         x-show="showProgramEditModal"
+         x-transition.opacity
+         class="modal-backdrop">
+      <div @click.away="showProgramEditModal = false" x-transition class="modal">
+        <div class="header flex justify-between items-center mb-2">
+          <h2 class="title">{% translate "Edit Program" %}</h2>
+          <button @click="showProgramEditModal = false"
+                  class="button-icon"
+                  aria-label="Close">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+        <div id="program-edit-form"></div>
       </div>
-    {% endfor %}
-  </div>
-
-  <div x-cloak x-show="showProgramEditModal" x-transition.opacity class="modal-backdrop">
-    <div @click.away="showProgramEditModal = false" x-transition class="modal">
-      <div class="header flex justify-between items-center mb-2">
-        <h2 class="title">{% translate "Edit Program" %}</h2>
-        <button @click="showProgramEditModal = false" class="button-icon" aria-label="Close">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
-      </div>
-      <div id="program-edit-form"></div>
     </div>
   </div>
-</div>
 {% endblock %}
diff --git a/commcare_connect/templates/program/program_base.html b/commcare_connect/templates/program/program_base.html
index f8d386fbe4..aab0221d44 100644
--- a/commcare_connect/templates/program/program_base.html
+++ b/commcare_connect/templates/program/program_base.html
@@ -1,81 +1,86 @@
 {% extends 'base.html' %}
-
 {% block content %}
-<div class="grid grid-cols-1 lg:grid-cols-3 gap-4" x-data="{showProgramAddModal: false}">
-  <div class="col-span-2">
-    <div class="flex justify-between">
-      <h2 class="mb-4 text-brand-deep-purple font-medium text-sm">Programs</h2>
-      {% if is_program_manager %}
-      <div class="flex items-center gap-2">
-        <button class="button button-md button-outline-rounded"
-          hx-get="{% url "program:init" request.org.slug %}"
-          hx-target="#program-add-form"
-          @htmx:after-request="showProgramAddModal = true">
-           <div class="flex items-center justify-between gap-4">
-             <p class="text-sm">
-               Add Programs
-             </p>
-             <i class="fa-solid fa-plus"></i>
-           </div>
-       </button>
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4"
+       x-data="{showProgramAddModal: false}">
+    <div class="col-span-2">
+      <div class="flex justify-between">
+        <h2 class="mb-4 text-brand-deep-purple font-medium text-sm">Programs</h2>
+        {% if is_program_manager %}
+          <div class="flex items-center gap-2">
+            <button class="button button-md button-outline-rounded"
+                    hx-get="{% url "program:init" request.org.slug %}"
+                    hx-target="#program-add-form"
+                    @htmx:after-request="showProgramAddModal = true">
+              <div class="flex items-center justify-between gap-4">
+                <p class="text-sm">Add Programs</p>
+                <i class="fa-solid fa-plus"></i>
+              </div>
+            </button>
+          </div>
+        {% endif %}
       </div>
-      {% endif %}
     </div>
-  </div>
-  <div class="col-span-1">
-    <div class="mb-4 text-brand-deep-purple font-medium text-sm">Recent Activities</div>
-  </div>
-
-  <div class="col-span-2">
-    {% block inner %}
-    {% endblock inner %}
-  </div>
-  <div class="col-span-1">
-    <div class="bg-gray-100 rounded-lg overflow-y-hidden hover:overflow-y-auto">
-      <div class="flex flex-col gap-4">
-        {% for data in recent_activities %}
-          <div class="activity-comp flex flex-col p-6 rounded-lg bg-white gap-5" x-data="{ expanded: false }">
-            <div class="flex gap-4 items-center">
-              <i class="fa-solid fa-clock-rotate-left"></i>
-              <p class="text-base">{{ data.title }}</p>
-            </div>
-            {% for row in data.rows %}
-            <div class="flex justify-between items-center gap-4" {% if forloop.counter > 2 %}x-cloak x-show="expanded"{% endif %}>
-              <div class="flex-1 min-w-0">
-                <p class="title">{{ row.opportunity__name }}</p>
-                <p class="hint">{{ row.opportunity__organization__name }}</p>
+    <div class="col-span-1">
+      <div class="mb-4 text-brand-deep-purple font-medium text-sm">Recent Activities</div>
+    </div>
+    <div class="col-span-2">
+      {% block inner %}
+      {% endblock inner %}
+    </div>
+    <div class="col-span-1">
+      <div class="bg-gray-100 rounded-lg overflow-y-hidden hover:overflow-y-auto">
+        <div class="flex flex-col gap-4">
+          {% for data in recent_activities %}
+            <div class="activity-comp flex flex-col p-6 rounded-lg bg-white gap-5"
+                 x-data="{ expanded: false }">
+              <div class="flex gap-4 items-center">
+                <i class="fa-solid fa-clock-rotate-left"></i>
+                <p class="text-base">{{ data.title }}</p>
               </div>
-              <a class="button button-sm button-outline-rounded flex-shrink-0" href="{{ row.url }}">
-                <div class="flex items-center gap-4">
-                  <p class="{% if row.small_text %}text-sm{% else %}text-2xl{% endif %}">{{ row.count }}</p>
-                  <i class="fa-solid fa-arrow-right"></i>
+              {% for row in data.rows %}
+                <div class="flex justify-between items-center gap-4"
+                     {% if forloop.counter > 2 %}x-cloak x-show="expanded"{% endif %}>
+                  <div class="flex-1 min-w-0">
+                    <p class="title">{{ row.opportunity__name }}</p>
+                    <p class="hint">{{ row.opportunity__organization__name }}</p>
+                  </div>
+                  <a class="button button-sm button-outline-rounded flex-shrink-0"
+                     href="{{ row.url }}">
+                    <div class="flex items-center gap-4">
+                      <p class="{% if row.small_text %}text-sm{% else %}text-2xl{% endif %}">{{ row.count }}</p>
+                      <i class="fa-solid fa-arrow-right"></i>
+                    </div>
+                  </a>
                 </div>
-              </a>
-            </div>
-            {% endfor %}
-            <div class="flex justify-end" x-show="{{ data.rows|length }} > 2">
-              <button class="button-text" @click="expanded = !expanded">
-                <span x-text="expanded ? 'less' : 'more'"></span>
-                <i :class="expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'"></i>
-              </button>
+              {% endfor %}
+              <div class="flex justify-end" x-show="{{ data.rows|length }} > 2">
+                <button class="button-text" @click="expanded = !expanded">
+                  <span x-text="expanded ? 'less' : 'more'"></span>
+                  <i :class="expanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'"></i>
+                </button>
+              </div>
             </div>
-          </div>
-        {% endfor %}
+          {% endfor %}
+        </div>
       </div>
     </div>
-  </div>
-  {% if is_program_manager %}
-  <div x-cloak x-show="showProgramAddModal" x-transition.opacity class="modal-backdrop">
-    <div @click.away="showProgramAddModal = false" x-transition class="modal">
-      <div class="header flex justify-between items-center mb-2">
-        <h2 class="title">Create Program</h2>
-        <button @click="showProgramAddModal = false" class="button-icon" aria-label="Close">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
+    {% if is_program_manager %}
+      <div x-cloak
+           x-show="showProgramAddModal"
+           x-transition.opacity
+           class="modal-backdrop">
+        <div @click.away="showProgramAddModal = false" x-transition class="modal">
+          <div class="header flex justify-between items-center mb-2">
+            <h2 class="title">Create Program</h2>
+            <button @click="showProgramAddModal = false"
+                    class="button-icon"
+                    aria-label="Close">
+              <i class="fa-solid fa-xmark"></i>
+            </button>
+          </div>
+          <div id="program-add-form"></div>
+        </div>
       </div>
-      <div id="program-add-form"></div>
-    </div>
+    {% endif %}
   </div>
-  {% endif %}
-</div>
 {% endblock %}
diff --git a/commcare_connect/templates/program/program_form.html b/commcare_connect/templates/program/program_form.html
index 1c1672655f..c8afceb054 100644
--- a/commcare_connect/templates/program/program_form.html
+++ b/commcare_connect/templates/program/program_form.html
@@ -1,11 +1,8 @@
 {% load crispy_forms_tags %}
-
-<form
-    hx-post="{{ hx_post_url }}"
-    hx-target="{{ hx_target }}"
-    hx-swap="innerHTML"
-    method="post"
->
-    {% csrf_token %}
-    {% crispy form %}
+<form hx-post="{{ hx_post_url }}"
+      hx-target="{{ hx_target }}"
+      hx-swap="innerHTML"
+      method="post">
+  {% csrf_token %}
+  {% crispy form %}
 </form>
diff --git a/commcare_connect/templates/reports/admin.html b/commcare_connect/templates/reports/admin.html
index 6361420bc6..038843b1d2 100644
--- a/commcare_connect/templates/reports/admin.html
+++ b/commcare_connect/templates/reports/admin.html
@@ -2,12 +2,9 @@
 {% load static %}
 {% load crispy_forms_tags %}
 {% load django_tables2 %}
-
-
 {% block title %}Admin Data{% endblock %}
-
 {% block content %}
   <h2 class="mb-2">Admin Data Report by Quarter</h2>
-  <hr/>
+  <hr />
   {% render_table table %}
 {% endblock content %}
diff --git a/commcare_connect/templates/reports/invoice_report.html b/commcare_connect/templates/reports/invoice_report.html
index b780be6bac..3bbd7f738c 100644
--- a/commcare_connect/templates/reports/invoice_report.html
+++ b/commcare_connect/templates/reports/invoice_report.html
@@ -1,106 +1,81 @@
-    {% extends 'base.html' %}
-    {% load static i18n %}
-    {% load render_table from django_tables2 %}
-    {% load crispy_forms_tags %}
-
-    {% block css %}
-    {{ block.super }}
-    <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
-    {% endblock css %}
-    {% block javascript %}
-    {{ block.super }}
-    <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
-    {% endblock javascript %}
-
-    {% block content %}
-    <div class="flex items-center justify-center">
-        <div class="flex flex-col gap-2 w-full">
-
-            <!-- Header -->
-            <div
-                class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14">
-                <p class="text-brand-deep-purple">
-                    {{ title }}
-                </p>
-
-                <div class="flex gap-x-4" x-cloak x-data="{ showFilterModal: false }">
-
-                    {% if task_id %}
-                    <div class="flex">
-                        <div
-                        hx-get="{% url 'reports:export_status' task_id  %}"
-                        hx-target="this"
-                        hx-trigger="load"
-                        hx-swap="outerHTML"
-                        class="flex items-center justify-center"
-                        >
-                        <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-blue-500"></div>
-                        <span class="sr-only">{% trans "Loading..." %}</span>
-                        </div>
-                    </div>
-                    {% else %}
-                       <button
-                            type="button"
-                            x-tooltip.raw="Export uses the currently applied filters."
-                            hx-post="{% url 'reports:export_invoice_report' %}"
-                            hx-include="#filterForm"
-                            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                            class="relative button-icon"
-                        >
-                            <i class="fa-solid fa-download text-brand-deep-purple"></i>
-                        </button>
-                    {% endif %}
-
-                    <!-- Filter button -->
-                    <button title="Filters" type="button" @click="showFilterModal = true" class="relative button-icon">
-                        <i class="fa-solid fa-sliders text-brand-deep-purple"></i>
-
-                        {% if filters_applied_count %}
-                        <span class="absolute flex items-center justify-center
-                            w-5 h-5 text-xs font-bold text-white
-                            bg-brand-marigold border-2 border-white rounded-full
-                            transform translate-x-1/2 -translate-y-1/2">
-                            {{ filters_applied_count }}
-                        </span>
-                        {% endif %}
-                    </button>
-
-                    <!-- Filter Modal -->
-                    <div x-show="showFilterModal" class="modal-backdrop">
-                        <div class="modal">
-                            <div class="header text-lg font-semibold text-brand-deep-purple">
-                                <h1>{% trans "Filters" %}</h1>
-                                <button @click="showFilterModal = false">
-                                    <i class="fa-solid fa-xmark text-xl"></i>
-                                </button>
-                            </div>
-
-                            <form id="filterForm" method="get">
-                                <div class="modal-body">
-                                    {% crispy filter.form %}
-                                </div>
-
-                                <div class="footer">
-                                    <button type="button" @click="showFilterModal = false"
-                                        class="button button-md outline-style">
-                                        {% trans "Close" %}
-                                    </button>
-
-                                    <button type="submit" @click="showFilterModal = false"
-                                        class="button button-md primary-dark">
-                                        {% trans "Apply" %}
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-
+{% extends 'base.html' %}
+{% load static i18n %}
+{% load render_table from django_tables2 %}
+{% load crispy_forms_tags %}
+{% block css %}
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
+{% endblock css %}
+{% block javascript %}
+  {{ block.super }}
+  <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
+{% endblock javascript %}
+{% block content %}
+  <div class="flex items-center justify-center">
+    <div class="flex flex-col gap-2 w-full">
+      <!-- Header -->
+      <div class="flex relative mx-auto items-center justify-between w-full px-4 bg-slate-50 rounded-lg shadow-sm h-14">
+        <p class="text-brand-deep-purple">{{ title }}</p>
+        <div class="flex gap-x-4" x-cloak x-data="{ showFilterModal: false }">
+          {% if task_id %}
+            <div class="flex">
+              <div hx-get="{% url 'reports:export_status' task_id %}"
+                   hx-target="this"
+                   hx-trigger="load"
+                   hx-swap="outerHTML"
+                   class="flex items-center justify-center">
+                <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-blue-500"></div>
+                <span class="sr-only">{% trans "Loading..." %}</span>
+              </div>
+            </div>
+          {% else %}
+            <button type="button"
+                    x-tooltip.raw="Export uses the currently applied filters."
+                    hx-post="{% url 'reports:export_invoice_report' %}"
+                    hx-include="#filterForm"
+                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                    class="relative button-icon">
+              <i class="fa-solid fa-download text-brand-deep-purple"></i>
+            </button>
+          {% endif %}
+          <!-- Filter button -->
+          <button title="Filters"
+                  type="button"
+                  @click="showFilterModal = true"
+                  class="relative button-icon">
+            <i class="fa-solid fa-sliders text-brand-deep-purple"></i>
+            {% if filters_applied_count %}
+              <span class="absolute flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-brand-marigold border-2 border-white rounded-full transform translate-x-1/2 -translate-y-1/2">
+                {{ filters_applied_count }}
+              </span>
+            {% endif %}
+          </button>
+          <!-- Filter Modal -->
+          <div x-show="showFilterModal" class="modal-backdrop">
+            <div class="modal">
+              <div class="header text-lg font-semibold text-brand-deep-purple">
+                <h1>{% trans "Filters" %}</h1>
+                <button @click="showFilterModal = false">
+                  <i class="fa-solid fa-xmark text-xl"></i>
+                </button>
+              </div>
+              <form id="filterForm" method="get">
+                <div class="modal-body">{% crispy filter.form %}</div>
+                <div class="footer">
+                  <button type="button"
+                          @click="showFilterModal = false"
+                          class="button button-md outline-style">{% trans "Close" %}</button>
+                  <button type="submit"
+                          @click="showFilterModal = false"
+                          class="button button-md primary-dark">{% trans "Apply" %}</button>
                 </div>
+              </form>
             </div>
-            <!-- Table -->
-            {% render_table table %}
-
+          </div>
         </div>
-
-</div>
+      </div>
+      <!-- Table -->
+      {% render_table table %}
+    </div>
+  </div>
 {% endblock %}
diff --git a/commcare_connect/templates/reports/report_table.html b/commcare_connect/templates/reports/report_table.html
index d8eda7cc6f..2a770c470f 100644
--- a/commcare_connect/templates/reports/report_table.html
+++ b/commcare_connect/templates/reports/report_table.html
@@ -1,38 +1,32 @@
 {% extends "base.html" %}
-
 {% load render_table from django_tables2 %}
 {% load i18n %}
 {% load static %}
 {% load crispy_forms_tags %}
-
 {% block content %}
-    <h1>Delivery Stats Report</h1>
-
-    <div id="loadingIndicator" class="loading-indicator htmx-indicator">
-        <div class="loading-content">
-            <div class="loading-spinner"></div>
-            <p class="loading-text">{% trans "Loading..." %}</p>
-        </div>
+  <h1>Delivery Stats Report</h1>
+  <div id="loadingIndicator" class="loading-indicator htmx-indicator">
+    <div class="loading-content">
+      <div class="loading-spinner"></div>
+      <p class="loading-text">{% trans "Loading..." %}</p>
     </div>
-
-    <form hx-get="{{ report_url }}"
-          hx-target="div.table-container"
-          hx-swap="outerHTML"
-          hx-trigger="change"
-          hx-push-url="true"
-          hx-params="not csrfmiddlewaretoken"
-          hx-indicator="#loadingIndicator"
-          class="form-inline">
-        {% crispy filter.form %}
-    </form>
-
-    {% render_table table %}
+  </div>
+  <form hx-get="{{ report_url }}"
+        hx-target="div.table-container"
+        hx-swap="outerHTML"
+        hx-trigger="change"
+        hx-push-url="true"
+        hx-params="not csrfmiddlewaretoken"
+        hx-indicator="#loadingIndicator"
+        class="form-inline">
+    {% crispy filter.form %}
+  </form>
+  {% render_table table %}
 {% endblock %}
-
 {% block javascript %}
-{{ block.super }}
-<script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
-<script>
+  {{ block.super }}
+  <script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
+  <script>
  window.addEventListener("DOMContentLoaded", (e) => {
   monthPickr("#id_from_date", {
     altInput: true,
@@ -47,11 +41,9 @@ <h1>Delivery Stats Report</h1>
     altFormat: "F Y",
   });
  })
-</script>
-
+  </script>
 {% endblock %}
-
 {% block css %}
-{{ block.super }}
-<link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
+  {{ block.super }}
+  <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 {% endblock %}
diff --git a/commcare_connect/templates/tables/single_table.html b/commcare_connect/templates/tables/single_table.html
index 8fe0be67cd..a776f58038 100644
--- a/commcare_connect/templates/tables/single_table.html
+++ b/commcare_connect/templates/tables/single_table.html
@@ -1,4 +1,2 @@
 {% load django_tables2 %}
-<div class="table-responsive">
-  {% render_table table %}
-</div>
+<div class="table-responsive">{% render_table table %}</div>
diff --git a/commcare_connect/templates/tables/table_manage_action.html b/commcare_connect/templates/tables/table_manage_action.html
index ca55184b83..274e1b660b 100644
--- a/commcare_connect/templates/tables/table_manage_action.html
+++ b/commcare_connect/templates/tables/table_manage_action.html
@@ -1,13 +1,16 @@
 {% load i18n %}
 {% for button in buttons %}
-   {% if button.post %}
+  {% if button.post %}
     <!-- Render the form with POST button -->
     <form action="{{ button.url }}" method="post" class="d-inline">
       {% csrf_token %}
-      <button type="submit" class="btn btn-{{ button.color|default:'primary' }} btn-sm"
+      <button type="submit"
+              class="btn btn-{{ button.color|default:'primary' }} btn-sm"
               {% if button.disable %}disabled{% endif %}>
         {% if button.icon %}<span class="{{ button.icon }}"></span>{% endif %}
-        <span class="d-none d-md-inline">{% if button.icon %}&nbsp;{% endif %}{% translate button.text %}</span>
+        <span class="d-none d-md-inline">
+          {% if button.icon %}&nbsp;{% endif %}
+        {% translate button.text %}</span>
       </button>
     </form>
   {% else %}
@@ -17,7 +20,9 @@
        tabindex="-1"
        aria-disabled="{% if button.disable %}true{% else %}false{% endif %}">
       {% if button.icon %}<span class="{{ button.icon }}"></span>{% endif %}
-      <span class="d-none d-md-inline">{% if button.icon %}&nbsp;{% endif %}{% translate button.text %}</span>
+      <span class="d-none d-md-inline">
+        {% if button.icon %}&nbsp;{% endif %}
+      {% translate button.text %}</span>
     </a>
   {% endif %}
 {% endfor %}
diff --git a/commcare_connect/templates/tables/table_placeholder.html b/commcare_connect/templates/tables/table_placeholder.html
index cb838455a5..1acee01d0a 100644
--- a/commcare_connect/templates/tables/table_placeholder.html
+++ b/commcare_connect/templates/tables/table_placeholder.html
@@ -1,16 +1,20 @@
 <table class="table border placeholder-glow">
   <thead>
-  <tr>
-    {% for i in "x"|rjust:num_cols %}
-    <th><span class="placeholder col-8"></span></th>
-    {% endfor %}
-  </tr>
+    <tr>
+      {% for i in "x"|rjust:num_cols %}
+        <th>
+          <span class="placeholder col-8"></span>
+        </th>
+      {% endfor %}
+    </tr>
   </thead>
   <tbody>
-  <tr>
-    {% for i in "x"|rjust:num_cols %}
-    <td><span class="placeholder col-8"></span></td>
-    {% endfor %}
-  </tr>
+    <tr>
+      {% for i in "x"|rjust:num_cols %}
+        <td>
+          <span class="placeholder col-8"></span>
+        </td>
+      {% endfor %}
+    </tr>
   </tbody>
 </table>
diff --git a/commcare_connect/templates/tasks/new_task_modal.html b/commcare_connect/templates/tasks/new_task_modal.html
index 2f26f618a1..ebdb63f58b 100644
--- a/commcare_connect/templates/tasks/new_task_modal.html
+++ b/commcare_connect/templates/tasks/new_task_modal.html
@@ -1,51 +1,56 @@
 {% load i18n %}
 {% load crispy_forms_tags %}
 {% load static %}
-
 <link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
 <script src="{% static 'bundles/js/tomselect-bundle.js' %}"></script>
-
-
-<div x-show="{{ modal_name }}" x-cloak x-transition.opacity class="modal-backdrop" role="dialog" aria-modal="true"
-    aria-labelledby="new-task-modal-title"
-    @keydown.escape.window="{{ modal_name }} = false"
-    @create-task-success.window="{{ modal_name }} = false">
-    <div @click.outside="{{ modal_name }} = false" class="modal">
-
-        <div class="flex justify-between items-start mb-4">
-            <div>
-                <div class="flex items-center gap-3 mb-1">
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 shrink-0">
-                        <i class="fa-solid fa-list-check" aria-hidden="true"></i>
-                    </div>
-                    <h2 id="new-task-modal-title" class="text-xl font-bold text-brand-deep-purple">
-                        {% trans "Create Task" %}
-                    </h2>
-                </div>
-                <p class="text-sm text-gray-500 mt-1">
-                    {% trans "Create a new task, and assign it to the relevant Connect Worker." %}
-                </p>
-            </div>
-            <button type="button" class="button-icon" @click="{{ modal_name }} = false"
-                    aria-label="{% trans 'Close dialog' %}">
-                <i class="fa-solid fa-xmark cursor-pointer" aria-hidden="true"></i>
-            </button>
+<div x-show="{{ modal_name }}"
+     x-cloak
+     x-transition.opacity
+     class="modal-backdrop"
+     role="dialog"
+     aria-modal="true"
+     aria-labelledby="new-task-modal-title"
+     @keydown.escape.window="{{ modal_name }} = false"
+     @create-task-success.window="{{ modal_name }} = false">
+  <div @click.outside="{{ modal_name }} = false" class="modal">
+    <div class="flex justify-between items-start mb-4">
+      <div>
+        <div class="flex items-center gap-3 mb-1">
+          <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 shrink-0">
+            <i class="fa-solid fa-list-check" aria-hidden="true"></i>
+          </div>
+          <h2 id="new-task-modal-title"
+              class="text-xl font-bold text-brand-deep-purple">{% trans "Create Task" %}</h2>
         </div>
-        <div id="create-task-form-wrapper">
-            <form id="create-task-form" method="post" action="{{ create_task_url }}" hx-post="{{ create_task_url }}"
-                hx-target="#create-task-form-wrapper" hx-select="#create-task-form-wrapper" hx-swap="outerHTML">
-                {% csrf_token %}
-                {% crispy form %}
-                <div class="flex justify-between gap-3 pt-2">
-                    <button type="button" @click="{{ modal_name }} = false" class="button button-md outline-style flex-1">
-                        {% trans "Cancel" %}
-                    </button>
-                    <button type="submit" class="button button-md primary-dark flex-1">
-                        {% trans "Save Changes" %}
-                    </button>
-                </div>
-            </form>
-            {% include "components/tomselect_init.html" %}
+        <p class="text-sm text-gray-500 mt-1">
+          {% trans "Create a new task, and assign it to the relevant Connect Worker." %}
+        </p>
+      </div>
+      <button type="button"
+              class="button-icon"
+              @click="{{ modal_name }} = false"
+              aria-label="{% trans 'Close dialog' %}">
+        <i class="fa-solid fa-xmark cursor-pointer" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div id="create-task-form-wrapper">
+      <form id="create-task-form"
+            method="post"
+            action="{{ create_task_url }}"
+            hx-post="{{ create_task_url }}"
+            hx-target="#create-task-form-wrapper"
+            hx-select="#create-task-form-wrapper"
+            hx-swap="outerHTML">
+        {% csrf_token %}
+        {% crispy form %}
+        <div class="flex justify-between gap-3 pt-2">
+          <button type="button"
+                  @click="{{ modal_name }} = false"
+                  class="button button-md outline-style flex-1">{% trans "Cancel" %}</button>
+          <button type="submit" class="button button-md primary-dark flex-1">{% trans "Save Changes" %}</button>
         </div>
+      </form>
+      {% include "components/tomselect_init.html" %}
     </div>
+  </div>
 </div>
diff --git a/commcare_connect/templates/users/accept_invite_confirm.html b/commcare_connect/templates/users/accept_invite_confirm.html
index 74b7a1d09c..4230198066 100644
--- a/commcare_connect/templates/users/accept_invite_confirm.html
+++ b/commcare_connect/templates/users/accept_invite_confirm.html
@@ -1,23 +1,18 @@
 {% extends 'base.html' %}
 {% load i18n %}
-
 {% block has_sidebar %}false{% endblock %}
 {% block sidenav %}{% endblock %}
-
-
 {% block content %}
-  <div id="accept-invite" class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow">
+  <div id="accept-invite"
+       class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow">
     <h1 class="text-2xl font-semibold mb-4">{% trans "Accept Invitation" %}</h1>
     <p class="mb-4">
-        {% translate "You have been invited to a job" %} <strong>{{ opportunity_name }}</strong>.
+      {% translate "You have been invited to a job" %} <strong>{{ opportunity_name }}</strong>.
     </p>
     <p class="mb-6">{% translate "Click the button below to accept it." %}</p>
-      <button
-        hx-post="{{ request.path }}"
-        hx-target="#accept-invite"
-        hx-swap="outerHTML"
-        class="bg-brand-mango text-white px-4 py-2 rounded">
-        {% translate "Accept Invitation" %}
-      </button>
+    <button hx-post="{{ request.path }}"
+            hx-target="#accept-invite"
+            hx-swap="outerHTML"
+            class="bg-brand-mango text-white px-4 py-2 rounded">{% translate "Accept Invitation" %}</button>
   </div>
 {% endblock %}
diff --git a/commcare_connect/templates/users/demo_tokens.html b/commcare_connect/templates/users/demo_tokens.html
index 995924add0..365ecccc88 100644
--- a/commcare_connect/templates/users/demo_tokens.html
+++ b/commcare_connect/templates/users/demo_tokens.html
@@ -1,29 +1,27 @@
 {% extends "base.html" %}
 {% load static %}
 {% load crispy_forms_tags %}
-
 {% block title %}Demo Tokens{% endblock %}
-
 {% block content %}
-<div class="container">
-  <h2 class="mb-4">Demo Users</h2>
-  <div class="card shadow-sm p-3">
-    <table class="table table-striped mb-0">
-      <thead>
-        <tr>
-          <th>Phone Number</th>
-          <th>Token</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for user in demo_users %}
-        <tr>
-          <td>{{ user.phone_number }}</td>
-          <td>{{ user.token }}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="container">
+    <h2 class="mb-4">Demo Users</h2>
+    <div class="card shadow-sm p-3">
+      <table class="table table-striped mb-0">
+        <thead>
+          <tr>
+            <th>Phone Number</th>
+            <th>Token</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for user in demo_users %}
+            <tr>
+              <td>{{ user.phone_number }}</td>
+              <td>{{ user.token }}</td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </div>
-</div>
 {% endblock content %}
diff --git a/commcare_connect/templates/users/internal_features.html b/commcare_connect/templates/users/internal_features.html
index d4f3373ef2..a7dd42d420 100644
--- a/commcare_connect/templates/users/internal_features.html
+++ b/commcare_connect/templates/users/internal_features.html
@@ -2,24 +2,20 @@
 {% load static %}
 {% load crispy_forms_tags %}
 {% load i18n %}
-
 {% block title %}Internal Features{% endblock %}
-
 {% block content %}
-<div class="container">
+  <div class="container">
     <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% translate "Internal Features" %}</h2>
     <div class="grid gap-2 grid-cols-4">
-    {% for feature in features %}
-      {% if feature.perm in perms %}
-        <div class="card_bg">
-          <h3 class="card_title mb-2">{{ feature.name }}</h3>
-          {% if feature.description %}
-            <p class="card_description mb-2">{{ feature.description }}</p>
-          {% endif %}
-        <a class="mt-2 button button-md primary-dark" href="{{feature.url}}">{% translate "Open" %} <i class="fa-solid fa-arrow-right"></i></a>
-        </div>
-      {% endif %}
-    {% endfor %}
+      {% for feature in features %}
+        {% if feature.perm in perms %}
+          <div class="card_bg">
+            <h3 class="card_title mb-2">{{ feature.name }}</h3>
+            {% if feature.description %}<p class="card_description mb-2">{{ feature.description }}</p>{% endif %}
+            <a class="mt-2 button button-md primary-dark" href="{{ feature.url }}">{% translate "Open" %} <i class="fa-solid fa-arrow-right"></i></a>
+          </div>
+        {% endif %}
+      {% endfor %}
     </div>
-</div>
+  </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/users/permission_management.html b/commcare_connect/templates/users/permission_management.html
index f120911a3a..4e50a0588e 100644
--- a/commcare_connect/templates/users/permission_management.html
+++ b/commcare_connect/templates/users/permission_management.html
@@ -1,34 +1,30 @@
 {% extends "base.html" %}
 {% load i18n %}
-
-{% block title %}{% translate "Permission Management" %}{% endblock %}
-
+{% block title %}
+  {% translate "Permission Management" %}
+{% endblock %}
 {% block content %}
-<div class="container">
+  <div class="container">
     <h2 class="text-xl font-semibold text-brand-deep-purple mb-4">{% translate "Permission Management" %}</h2>
     <div class="card_bg mb-4">
-        <form hx-get="{% url 'users:permission_management_search' %}"
-              hx-target="#results"
-              hx-swap="innerHTML"
-              class="flex items-end gap-4">
-            <div class="flex-1 input-group">
-                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
-                    {% translate "User Email" %}
-                </label>
-                <div class="simple-input">
-                    <input type="email"
-                           name="email"
-                           id="email"
-                           placeholder="user@example.com"
-                           required>
-                    <i class="fa-solid fa-envelope"></i>
-                </div>
-            </div>
-            <button type="submit" class="button button-md primary-dark">
-                {% translate "Search" %}
-            </button>
-        </form>
+      <form hx-get="{% url 'users:permission_management_search' %}"
+            hx-target="#results"
+            hx-swap="innerHTML"
+            class="flex items-end gap-4">
+        <div class="flex-1 input-group">
+          <label for="email" class="block text-sm font-medium text-gray-700 mb-1">{% translate "User Email" %}</label>
+          <div class="simple-input">
+            <input type="email"
+                   name="email"
+                   id="email"
+                   placeholder="user@example.com"
+                   required>
+            <i class="fa-solid fa-envelope"></i>
+          </div>
+        </div>
+        <button type="submit" class="button button-md primary-dark">{% translate "Search" %}</button>
+      </form>
     </div>
     <div id="results"></div>
-</div>
+  </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/users/permission_management_results.html b/commcare_connect/templates/users/permission_management_results.html
index 7066611a6c..cc0dbfd071 100644
--- a/commcare_connect/templates/users/permission_management_results.html
+++ b/commcare_connect/templates/users/permission_management_results.html
@@ -1,45 +1,40 @@
 {% load i18n %}
-
 {% if not_found %}
-<div class="rounded-md bg-yellow-50 p-4">
+  <div class="rounded-md bg-yellow-50 p-4">
     <p class="text-sm text-yellow-700">{% translate "No user found with that email." %}</p>
-</div>
+  </div>
 {% elif target_user %}
-<div class="card_bg">
+  <div class="card_bg">
     {% if success %}
-    <div class="rounded-md bg-green-50 p-4 mb-4">
+      <div class="rounded-md bg-green-50 p-4 mb-4">
         <p class="text-sm text-green-700">{% translate "Permissions updated successfully." %}</p>
-    </div>
+      </div>
     {% endif %}
-
     <h3 class="card_title mb-1">{{ target_user.name|default:target_user.email }}</h3>
     <p class="text-sm text-gray-500 mb-4">{{ target_user.email }}</p>
-
     <form hx-post="{% url 'users:permission_management_update' %}"
           hx-target="#results"
           hx-swap="innerHTML">
-        <input type="hidden" name="user_id" value="{{ target_user.id }}">
-        <div class="space-y-3">
-            {% for perm in permissions %}
-            <label class="flex items-center gap-3">
-                <input type="checkbox"
-                       name="permissions"
-                       value="{{ perm.codename }}"
-                       {% if perm.has_perm %}checked{% endif %}
-                       {% if is_self and perm.codename == "manage_internal_permissions" %}disabled title="{% translate 'You cannot remove this permission from yourself.' %}"{% endif %}
-                       class="rounded border-gray-300 text-brand-deep-purple focus:ring-brand-deep-purple">
-                <span class="text-sm">
-                    <span class="font-medium">{{ perm.codename }}</span>
-                    <span class="text-gray-500">— {{ perm.name }}</span>
-                </span>
-            </label>
-            {% endfor %}
-        </div>
-        <div class="mt-4">
-            <button type="submit" class="button button-md primary-dark">
-                {% translate "Save Permissions" %}
-            </button>
-        </div>
+      <input type="hidden" name="user_id" value="{{ target_user.id }}">
+      <div class="space-y-3">
+        {% for perm in permissions %}
+          <label class="flex items-center gap-3">
+            <input type="checkbox"
+                   name="permissions"
+                   value="{{ perm.codename }}"
+                   {% if perm.has_perm %}checked{% endif %}
+                   {% if is_self and perm.codename == "manage_internal_permissions" %}disabled title="{% translate 'You cannot remove this permission from yourself.' %}"{% endif %}
+                   class="rounded border-gray-300 text-brand-deep-purple focus:ring-brand-deep-purple">
+            <span class="text-sm">
+              <span class="font-medium">{{ perm.codename }}</span>
+              <span class="text-gray-500">— {{ perm.name }}</span>
+            </span>
+          </label>
+        {% endfor %}
+      </div>
+      <div class="mt-4">
+        <button type="submit" class="button button-md primary-dark">{% translate "Save Permissions" %}</button>
+      </div>
     </form>
-</div>
+  </div>
 {% endif %}
diff --git a/commcare_connect/templates/users/user_detail.html b/commcare_connect/templates/users/user_detail.html
index ca7832abdc..b489bf0638 100644
--- a/commcare_connect/templates/users/user_detail.html
+++ b/commcare_connect/templates/users/user_detail.html
@@ -1,8 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
-
 {% block title %}User: {{ object.name }}{% endblock %}
-
 {% block content %}
   <div class="bg-white col-md-6 offset-md-3 shadow">
     <div class="row mt-5 pt-4">
@@ -10,20 +8,18 @@
         <h2>{{ object.name }}</h2>
       </div>
     </div>
-
     {% if object == request.user %}
       <!-- Action buttons -->
       <div class="row pb-4">
-
         <div class="col-sm-12 text-center">
           <a class="btn btn-primary" href="{% url 'users:update' %}" role="button"><i class="bi bi-info-circle"></i> My Info</a>
-          <a class="btn btn-primary" href="{% url 'account_email' %}" role="button"><i class="bi bi-envelope"></i> E-Mail</a>
+          <a class="btn btn-primary"
+             href="{% url 'account_email' %}"
+             role="button"><i class="bi bi-envelope"></i> E-Mail</a>
           <!-- Your Stuff: Custom user template urls -->
         </div>
-
       </div>
       <!-- End Action buttons -->
     {% endif %}
-
   </div>
 {% endblock content %}
diff --git a/commcare_connect/templates/users/user_form.html b/commcare_connect/templates/users/user_form.html
index 78c2c941ec..f0e4088e98 100644
--- a/commcare_connect/templates/users/user_form.html
+++ b/commcare_connect/templates/users/user_form.html
@@ -1,11 +1,10 @@
 {% load crispy_forms_tags %}
-
 {% block content %}
-    <form method="post" action="{% url 'users:update' %}">
-      {% csrf_token %}
-      {{ form|crispy }}
-      <div class="mt-4 text-right">
-          <button type="submit" class="button button-md primary-dark">Update</button>
-      </div>
-    </form>
+  <form method="post" action="{% url 'users:update' %}">
+    {% csrf_token %}
+    {{ form|crispy }}
+    <div class="mt-4 text-right">
+      <button type="submit" class="button button-md primary-dark">Update</button>
+    </div>
+  </form>
 {% endblock %}

From acef0250e625dedf6ff14a0cbc1e2df6b7a5ef1a Mon Sep 17 00:00:00 2001
From: Zandre Engelbrecht <zengelbrecht@dimagi.com>
Date: Thu, 7 May 2026 15:02:39 +0200
Subject: [PATCH 2/2] fix: lowercase form method and remove empty class
 attributes (H029, H026)

---
 commcare_connect/templates/account/password_change.html         | 2 +-
 commcare_connect/templates/account/password_set.html            | 2 +-
 .../templates/components/dropdowns/text_button_dropdown.html    | 2 +-
 commcare_connect/templates/layouts/sidenav.html                 | 2 +-
 .../templates/microplanning/import_work_area_modal.html         | 2 +-
 commcare_connect/templates/opportunity/invoice_detail.html      | 2 +-
 commcare_connect/templates/opportunity/user_visit_details.html  | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/commcare_connect/templates/account/password_change.html b/commcare_connect/templates/account/password_change.html
index a6ae85871a..c1c268f280 100644
--- a/commcare_connect/templates/account/password_change.html
+++ b/commcare_connect/templates/account/password_change.html
@@ -6,7 +6,7 @@
 {% endblock %}
 {% block inner %}
   <h1>{% translate "Change Password" %}</h1>
-  <form method="POST"
+  <form method="post"
         action="{% url 'account_change_password' %}"
         class="password_change">
     {% csrf_token %}
diff --git a/commcare_connect/templates/account/password_set.html b/commcare_connect/templates/account/password_set.html
index edcd43a090..f8437ba89b 100644
--- a/commcare_connect/templates/account/password_set.html
+++ b/commcare_connect/templates/account/password_set.html
@@ -6,7 +6,7 @@
 {% endblock %}
 {% block inner %}
   <h1 class="mb-4">{% translate "Set Password" %}</h1>
-  <form method="POST"
+  <form method="post"
         action="{% url 'account_set_password' %}"
         class="password_set">
     {% csrf_token %}
diff --git a/commcare_connect/templates/components/dropdowns/text_button_dropdown.html b/commcare_connect/templates/components/dropdowns/text_button_dropdown.html
index f3faa3b9cb..bac7e9db2d 100644
--- a/commcare_connect/templates/components/dropdowns/text_button_dropdown.html
+++ b/commcare_connect/templates/components/dropdowns/text_button_dropdown.html
@@ -16,7 +16,7 @@
        :style="dropdownStyle"
        class="dropdown-content z-40 w-48 rounded-lg bg-white shadow-lg py-2 px-3 border border-gray-200 min-w-8">
     <p class="text-blue-light text-xs mb-1">{{ title|default:'' }}</p>
-    <div class="">
+    <div>
       {% for item in list %}
         <a href="{{ item.url }}"
            class="block w-full text-left bg-transparent border-0 px-2 my-2 hover:bg-slate-100 rounded">
diff --git a/commcare_connect/templates/layouts/sidenav.html b/commcare_connect/templates/layouts/sidenav.html
index 40854b2f35..8dcfe1d580 100644
--- a/commcare_connect/templates/layouts/sidenav.html
+++ b/commcare_connect/templates/layouts/sidenav.html
@@ -5,7 +5,7 @@
   <!-- Top Section -->
   <div>
     <!-- Logo Section -->
-    <div class="">
+    <div>
       <div class="flex p-2 justify-start">
         <div x-show.immediate="!sidebarOpen" class=" h-12 transition-none">
           <img src="{% static 'images/logo.svg' %}"
diff --git a/commcare_connect/templates/microplanning/import_work_area_modal.html b/commcare_connect/templates/microplanning/import_work_area_modal.html
index 720aad4603..e0fd9722f5 100644
--- a/commcare_connect/templates/microplanning/import_work_area_modal.html
+++ b/commcare_connect/templates/microplanning/import_work_area_modal.html
@@ -59,7 +59,7 @@ <h3 class="text-sm font-semibold text-gray-900 flex items-center gap-2 mb-3">
         </div>
       {% else %}
         <!-- Upload Form -->
-        <form method="POST"
+        <form method="post"
               enctype="multipart/form-data"
               action="{% url 'microplanning:upload_work_areas' request.org.slug request.opportunity.opportunity_id %}"
               class="content">
diff --git a/commcare_connect/templates/opportunity/invoice_detail.html b/commcare_connect/templates/opportunity/invoice_detail.html
index 1c9513e817..b791c7bdf2 100644
--- a/commcare_connect/templates/opportunity/invoice_detail.html
+++ b/commcare_connect/templates/opportunity/invoice_detail.html
@@ -73,7 +73,7 @@
 {% if show_payment_invoice_invoice_ticket_link_form %}
   <br />
   <div class="card_bg">
-    <form method="POST"
+    <form method="post"
           action="{% url 'opportunity:update_invoice_invoice_ticket_link' org_slug=request.org.slug opp_id=opportunity.opportunity_id invoice_id=object.payment_invoice_id %}">
       {% csrf_token %}
       <div class="mb-4">
diff --git a/commcare_connect/templates/opportunity/user_visit_details.html b/commcare_connect/templates/opportunity/user_visit_details.html
index d60cd8d4c4..f3af8d3767 100644
--- a/commcare_connect/templates/opportunity/user_visit_details.html
+++ b/commcare_connect/templates/opportunity/user_visit_details.html
@@ -116,7 +116,7 @@
       <div class="flex flex-row gap-4 rounded border border-brand-marigold bg-brand-marigold/15 items-center text-brand-marigold"
            @click="visible = !visible">
         <i class="fa-solid fa-triangle-exclamation ml-2"></i>
-        <span class="flex-1" class="">{{ flag_count }} {% translate "issues detected" %}</span>
+        <span class="flex-1">{{ flag_count }} {% translate "issues detected" %}</span>
         <i :class="visible ? 'rotate-180' : ''"
            class="fa-solid fa-chevron-down transition-all mr-2"></i>
       </div>