Removed most of w3 and working on fixing the forms.

9 files changed, 480 insertions, 728 deletions

diff --git a/engagements/forms.py b/engagements/forms.py
index ae01916..a1c3c44 100644
--- a/engagements/forms.py
+++ b/engagements/forms.py
@@ -1,74 +1,56 @@
-from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Field, Fieldset, Layout, Submit
 from django import forms
 from django.forms.widgets import HiddenInput
 
 from .models import Engagement, EngagementEffort
 
+
 # TODO - need to handle errors correctly in this form and in the template
 
 
 class EngagementEffortReportingCreateForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.layout = Layout(
-            Fieldset(
-                "This is a form",
-                Field("is_planned"),
-                Field("proposed_start_date", css_class="w3-input w3-border w3-round", type="date"),
-                Field("proposed_end_date", css_class="w3-input w3-border w3-round"),
-                "officers",
-                "notes",
-            ),
-            Submit("submit", "Submit", css_class="w3-button w3-green"),
-        )
+        self.fields['is_planned'].widget.attrs.update({"class": "select-lg"})
+        # for field in self.fields.values():
+        #     field.widget.attrs['class'] = 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
 
     class Meta:
         model = EngagementEffort
         fields = [
-            "is_planned",
-            "proposed_start_date",
-            "proposed_end_date",
-            "officers",
-            "notes",
+            'is_planned',
+            'proposed_start_date',
+            'proposed_end_date',
+            'officers',
+            'notes',
         ]
-        help_texts = {
-            "is_planned": ("<br><small><em>To distinguish planned events from retrospective recording</em></small>")
-        }
         widgets = {
-            "proposed_start_date": forms.DateTimeInput(
+            # 'is_planned': forms.Select(
+            #     choices=(
+            #         (True, "YES"),
+            #         (False, "NO"),
+            #     ),
+            #     attrs={'class': 'select-lg w-full max-w-xs'}
+            # ),
+            'proposed_start_date': forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
-                    "type": "datetime-local",
+                    'type': 'datetime-local',
+                    'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
                 },
-                format="j M y H:i",
+                format='j M y H:i',
             ),
-            "proposed_end_date": forms.DateTimeInput(
+            'proposed_end_date': forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
-                    "type": "datetime-local",
+                    'type': 'datetime-local',
+                    'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
                 },
-                format="j M y H:i",
+                format='j M y H:i',
             ),
+            'officers': forms.SelectMultiple(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}),
+            'notes': forms.Textarea(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50', 'rows': 3}),
         }
 
 
 class EngagementEffortRegulationCreateForm(forms.ModelForm):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.layout = Layout(
-            Fieldset(
-                "This is a form",
-                Field("is_planned"),
-                Field("proposed_start_date", css_class="w3-input w3-border w3-round", type="date"),
-                Field("proposed_end_date", css_class="w3-input w3-border w3-round"),
-                "sub_instruments",
-                "officers",
-            ),
-            Submit("submit", "Submit", css_class="w3-button w3-green"),
-        )
 
     class Meta:
         model = EngagementEffort
@@ -86,14 +68,12 @@ class EngagementEffortRegulationCreateForm(forms.ModelForm):
         widgets = {
             "proposed_start_date": forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
                     "type": "datetime-local",
                 },
                 format="j M y H:i",
             ),
             "proposed_end_date": forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
                     "type": "datetime-local",
                 },
                 format="j M y H:i",
@@ -102,20 +82,6 @@ class EngagementEffortRegulationCreateForm(forms.ModelForm):
 
 
 class EngagementEffortPlanningCreateForm(forms.ModelForm):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.layout = Layout(
-            Fieldset(
-                "This is a form",
-                Field("is_planned"),
-                Field("proposed_start_date", css_class="w3-input w3-border w3-round", type="date"),
-                Field("proposed_end_date", css_class="w3-input w3-border w3-round"),
-                "officers",
-                "notes",
-            ),
-            Submit("submit", "Submit", css_class="w3-button w3-green"),
-        )
 
     class Meta:
         model = EngagementEffort
@@ -132,14 +98,12 @@ class EngagementEffortPlanningCreateForm(forms.ModelForm):
         widgets = {
             "proposed_start_date": forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
                     "type": "datetime-local",
                 },
                 format="j M y H:i",
             ),
             "proposed_end_date": forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
                     "type": "datetime-local",
                 },
                 format="j M y H:i",
@@ -150,22 +114,15 @@ class EngagementEffortPlanningCreateForm(forms.ModelForm):
 class EngagementEffortTravelCreateForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.layout = Layout(
-            Fieldset(
-                "This is a form",
-                Field("is_planned"),
-                Field("proposed_start_date", css_class="w3-input w3-border w3-round", type="date"),
-                Field("proposed_end_date", css_class="w3-input w3-border w3-round"),
-                "officers",
-            ),
-            Submit("submit", "Submit", css_class="w3-button w3-green"),
-        )
+        self.fields['is_planned'].widget.attrs.update({"class": "select-lg"})
+        for field in self.fields.values():
+            field.widget.attrs['class'] = 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
 
     class Meta:
         model = EngagementEffort
         fields = ["is_planned", "proposed_start_date", "proposed_end_date", "officers"]
         widgets = {
+            "is_planned": forms.Select(choices=((True, "YES"), (False, "NO")), attrs={"class": "select select-bordered w-full max-w-xs"}),
             "proposed_start_date": forms.DateTimeInput(attrs={"type": "datetime-local"}),
             "proposed_end_date": forms.DateTimeInput(attrs={"type": "datetime-local"}),
         }
@@ -174,40 +131,44 @@ class EngagementEffortTravelCreateForm(forms.ModelForm):
 class EngagementEffortCreateForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.fields["engagement"].widget = HiddenInput()
-        self.fields["effort_type"].widget = HiddenInput()
+        self.fields['engagement'].widget = HiddenInput()
+        self.fields['effort_type'].widget = HiddenInput()
         if kwargs.get("initial"):
             if not kwargs["initial"]["effort_type"] == "REGULATION":
                 self.fields["sub_instruments"].widget = HiddenInput()
 
+        # Apply Tailwind classes to all visible fields
+        # for field in self.visible_fields():
+        #     field.widget.attrs['class'] = 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
+
     class Meta:
         model = EngagementEffort
         fields = "__all__"
         widgets = {
-            "is_planned": forms.Select(
-                choices=(
-                    (True, "YES"),
-                    (False, "NO"),
-                ),
-                attrs={"class": "w3-border"},
-            ),
+            # "is_planned": forms.Select(
+            #     choices=(
+            #         (True, "YES"),
+            #         (False, "NO"),
+            #     ),
+            #     attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}
+            # ),
             "proposed_start_date": forms.DateTimeInput(
-                attrs={"class": "w3-input w3-border w3-round", "type": "date"},
+                attrs={
+                    "type": "datetime-local",
+                    "class": "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                },
                 format="j M y H:i",
             ),
             "proposed_end_date": forms.DateTimeInput(
-                attrs={"class": "w3-input w3-border w3-round", "type": "date"},
+                attrs={
+                    "type": "datetime-local",
+                    "class": "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                },
                 format="j M y H:i",
             ),
-            "effort_type": forms.Select(attrs={"class": "w3-select w3-border w3-round"}),
-            "officers": forms.SelectMultiple(attrs={"class": "w3-select w3-border w3-round"}),
-            "sub_instruments": forms.SelectMultiple(attrs={"class": "w3-select w3-border w3-round"}),
-        }
-        help_texts = {
-            "proposed_start_date": "<small><em>YYYY-MM-DD HH:MM</em> "
-            "(<strong>Please include time here</strong>)</small>",
-            "proposed_end_date": "<small><em>YYYY-MM-DD HH:MM</em> "
-            "(<strong>Please include time here</strong>)</small>",
+            "effort_type": forms.Select(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}),
+            "officers": forms.SelectMultiple(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}),
+            "sub_instruments": forms.SelectMultiple(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}),
         }
 
 
@@ -235,8 +196,8 @@ class EngagementCreateForm(forms.ModelForm):
             "proposed_end_date": "<small><em>YYYY-MM-DD</em></small>",
         }
         widgets = {
-            "proposed_start_date": forms.DateInput(attrs={"class": "w3-input w3-border w3-round", "type": "date"}),
-            "proposed_end_date": forms.DateInput(attrs={"class": "w3-input w3-border w3-round", "type": "date"}),
-            "engagement_type": forms.Select(attrs={"class": "w3-select w3-input w3-border w3-round"}),
-            "officers": forms.SelectMultiple(attrs={"class": "w3-input w3-border w3-round"}),
+            "proposed_start_date": forms.DateInput(attrs={"type": "date"}),
+            "proposed_end_date": forms.DateInput(attrs={"type": "date"}),
+            "engagement_type": forms.Select(),
+            "officers": forms.SelectMultiple(),
         }
diff --git a/engagements/templates/engagements/engagement_create.html b/engagements/templates/engagements/engagement_create.html
index 1e72ca0..e4aeee6 100644
--- a/engagements/templates/engagements/engagement_create.html
+++ b/engagements/templates/engagements/engagement_create.html
@@ -3,27 +3,49 @@
 {% block title %}Create new engagement{% endblock title %}
 
 {% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold text-center">{{ title }}</h2>
+        </header>
+        <div class="p-6">
+            <div class="mb-8">
+                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
+                    <h4 class="text-lg font-semibold mb-2">Step 1</h4>
+                    <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
+                    <h4 class="text-lg font-semibold mb-2">Step 2</h4>
+                    <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+                </div>
+            </div>
 
-<div class="w3-container w3-cell-row w3-margin-bottom">
-    <h2>{{ title }}</h2>
-    <div class="w3-panel w3-light-blue w3-round w3-leftbar w3-border-blue w3-display-container">
-
-        <span onclick="this.parentElement.style.display='none'"
-              class="w3-button w3-display-topright">&times;</span>
-        <h4>Step 1</h4>
-        <p>To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional),the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
-        <h4>Step 2</h4>
-        <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each compontent can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
-    </div>
-
-    <hr>
-    <div class="w3-container w3-cell-middle">
-        <h4>Enter main details:</h4>
-        <form method="post">{% csrf_token %}
-            {{ form.as_p }}
-            <input type="submit" class="w3-btn w3-green" value="Save">
-        </form>
+            <div class="mt-8">
+                <h4 class="text-xl font-semibold mb-4">Enter main details:</h4>
+                <form method="post" class="space-y-6">
+                    {% csrf_token %}
+                    {% for field in form %}
+                        <div>
+                            <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">
+                                {{ field.label }}
+                            </label>
+                            <div class="mt-1">
+                                {{ field }}
+                            </div>
+                            {% if field.help_text %}
+                                <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p>
+                            {% endif %}
+                            {% for error in field.errors %}
+                                <p class="mt-2 text-sm text-red-600">{{ error }}</p>
+                            {% endfor %}
+                        </div>
+                    {% endfor %}
+                    <div>
+                        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                            Save
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
 </div>
-
 {% endblock content %}
diff --git a/engagements/templates/engagements/engagement_detail.html b/engagements/templates/engagements/engagement_detail.html
index 85ef220..c75523b 100644
--- a/engagements/templates/engagements/engagement_detail.html
+++ b/engagements/templates/engagements/engagement_detail.html
@@ -4,75 +4,110 @@
 {% block title %}{{ engagement }}{% endblock title %}
 
 {% block content %}
+    <div class="container mx-auto px-4 py-8">
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <header class="bg-blue-100 p-4">
+                <h2 class="text-3xl font-bold text-center">{{ engagement.friendly_type }}
+                    at {{ engagement.external_party }}</h2>
+            </header>
+            <div class="p-4">
+                <div class="mb-4">
+                    <a href="{% url 'engagements:edit' engagement.pk %}" class="text-blue-600 hover:underline">Edit
+                        Engagement</a>
+                </div>
 
-<div class="w3-container">
-    <div class="w3-container w3-center">
-        <h2>{{ engagement.friendly_type }} at {{ engagement.external_party }}</h2>
-    </div>
-    <div class="w3-row">
-        <div class="w3-container">
-            <div>
-                <a href="{% url 'engagements:edit' engagement.pk %}">Edit Engagement</a>
-            </div>
-            <section class="w3-container w3-blue">
-                <h3>Details</h3>
-            </section>
-            <table class="w3-table w3-border w3-light-gray w3-bordered">
-                <tr>
-                    <td><strong>Date</strong></td>
-                    <td>{{ engagement.proposed_start_date|date:'l' }} - {{ engagement.proposed_start_date|date:'j M Y' }}</td>
-                </tr>
-                <tr>
-                    <td><strong>Site/Operation:</strong></td>
-                    <td>{{ engagement.external_party }} </td>
-                </tr>
-                <tr>
-                    <td><strong>Subject of Activity</strong></td>
-                    <td>
-                        <p>Summmary text</p>
-                        <ul class="w3-ul">
-                            {% for t in dscs %}
-                            <li><a href='#'>{{ t }}</a></li>
-                            {% endfor %}
-                        </ul>
-                    </td>
-                </tr>
-                <tr>
-                    <td><strong>Inspectors:</strong></td>
-                    <td>{{ engagement.officers.all|commalist }}</td>
-                </tr>
-                <tr>
-                    <td><strong>Planned Effort:</strong></td>
-                    <td>{{ effort_planned|floatformat }} hrs</td>
-                </tr>
-                <tr>
-                    <td><strong>Actual Effort:</strong></td>
-                    <td>{{ effort_actual|floatformat }} hrs</td>
-                </tr>
-                <tr>
-                    <td><strong>Total Effort:</strong></td>
-                    <td>{{ effort_total|floatformat }} hrs</td>
-                </tr>
-            </table>
-            <hr>
-        </div>
+                <h3 class="text-2xl font-semibold mb-4">Details</h3>
+                <div class="bg-white shadow-sm rounded-lg overflow-hidden">
+                    <table class="min-w-full divide-y divide-gray-200 text-sm">
+                        <tbody>
+                            <tr class="bg-gray-50">
+                                <td class="px-4 py-2 font-semibold text-gray-700">Date</td>
+                                <td class="px-4 py-2 text-gray-900">
+                                    {{ engagement.proposed_start_date|date:'l' }} -
+                                    {{ engagement.proposed_start_date|date:'j M Y' }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="px-4 py-2 font-semibold text-gray-700">Site/Operation</td>
+                                <td class="px-4 py-2 text-gray-900">{{ engagement.external_party }}</td>
+                            </tr>
+                            <tr class="bg-gray-50">
+                                <td class="px-4 py-2 font-semibold text-gray-700">Subject of Activity</td>
+                                <td class="px-4 py-2 text-gray-900">
+                                    <p class="mb-2">Summary text</p>
+                                    <table class="min-w-full divide-y divide-gray-200">
+                                        <thead class="bg-gray-50">
+                                        <tr>
+                                            <th scope="col"
+                                                class="px-3 py-2 text-left text-sm font-medium text-gray-700 uppercase tracking-wider">
+                                                DSC
+                                            </th>
+                                        </tr>
+                                        </thead>
+                                        <tbody class="bg-white divide-y divide-gray-200">
+                                        {% for t in dscs %}
+                                            <tr>
+                                                <td class="px-3 py-2 whitespace-nowrap text-base">
+                                                    <a href='#' class="text-blue-600 hover:underline">{{ t }}</a>
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="px-4 py-2 font-semibold text-gray-700">Inspectors</td>
+                                <td class="px-4 py-2 text-gray-900">{{ engagement.officers.all|commalist }}</td>
+                            </tr>
+                            <tr class="bg-gray-50">
+                                <td class="px-4 py-2 font-semibold text-gray-700">Planned Effort</td>
+                                <td class="px-4 py-2 text-gray-900">{{ effort_planned|floatformat }} hrs</td>
+                            </tr>
+                            <tr>
+                                <td class="px-4 py-2 font-semibold text-gray-700">Actual Effort</td>
+                                <td class="px-4 py-2 text-gray-900">{{ effort_actual|floatformat }} hrs</td>
+                            </tr>
+                            <tr class="bg-gray-50">
+                                <td class="px-4 py-2 font-semibold text-gray-700">Total Effort</td>
+                                <td class="px-4 py-2 text-gray-900">{{ effort_total|floatformat }} hrs</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
 
-        <div class="w3-container w3-light-gray">
-            <h3>Effort for this engagement</h3>
-            Add:
-            <a href="{% url 'engagements:effort_create' engagement.pk "TRAVEL" %}">Travel</a> |
-            <a href="{% url 'engagements:effort_create' engagement.pk "PLANNING" %}">Planning</a> |
-            <a href="{% url 'engagements:effort_create' engagement.pk "REGULATION" %}">Regulation</a> |
-            <a href="{% url 'engagements:effort_create' engagement.pk "REPORTING" %}">Reporting</a>
+                <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8">
+                    <div class="px-4 py-5 sm:px-6 bg-blue-100">
+                        <h3 class="text-2xl font-semibold text-black">Effort for this engagement</h3>
+                    </div>
+                    <div class="border-t border-gray-200">
+                        <div class="px-4 py-5 sm:p-6">
+                            <div class="mb-4">
+                                <span class="font-medium">Add:</span>
+                                <a href="{% url 'engagements:effort_create' engagement.pk 'TRAVEL' %}"
+                                   class="text-blue-600 hover:underline ml-2">Travel</a>
+                                <a href="{% url 'engagements:effort_create' engagement.pk 'PLANNING' %}" class="text-blue-600 hover:underline ml-2">Planning</a>
+                                <a href="{% url 'engagements:effort_create' engagement.pk "REGULATION" %}"
+                                   class="text-blue-600 hover:underline ml-2">Regulation</a>
+                                <a href="{% url 'engagements:effort_create' engagement.pk "REPORTING" %}"
+                                   class="text-blue-600 hover:underline ml-2">Reporting</a>
+                            </div>
 
-            {% if effort %}
-            {% for e in effort.all %}
-            <div id="planned_swap_{{ e.id }}">
-                {% include "engagements/snippets/effort_summary_panel.html" with e=e %}
+                            {% if effort %}
+                                <div class="space-y-4">
+                                    {% for e in effort.all %}
+                                        <div id="planned_swap_{{ e.id }}" class="bg-gray-50 p-4 rounded-lg">
+                                            {% include "engagements/snippets/effort_summary_panel.html" with e=e %}
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                            {% else %}
+                                <p class="text-gray-500">No effort records found for this engagement.</p>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
             </div>
-            {% endfor %}
-            {% endif %}
         </div>
     </div>
-
-    {% endblock content %}
+{% endblock content %}
diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html
index 65e2e21..b776fd8 100644
--- a/engagements/templates/engagements/engagement_effort_create.html
+++ b/engagements/templates/engagements/engagement_effort_create.html
@@ -1,20 +1,34 @@
 {% extends "core/base.html" %}
 
-{% load crispy_forms_tags %}
-
 {% block title %}Add {{ etype }} effort to Engagement{% endblock title %}
 
 {% block content %}
 
-    <div class="w3-container w3-cell-row w3-margin-bottom">
-        <h2>Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event at  {{ engagement.external_party }} on {{ engagement.proposed_start_date }}</h2>
+   <div class="container mx-auto max-w-2xl mt-8">
+    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        <h2 class="text-2xl font-bold mb-6">Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event</h2>
+        <p class="mb-6">{{ engagement.external_party }} on {{ engagement.proposed_start_date }}</p>
 
-        <div class="w3-container w3-cell-middle">
-            <h4>Enter details:</h4>
-            <form method="post">{% csrf_token %}
-                {% crispy form form.helper %}
-            </form>
-        </div>
+        <form method="post" class="space-y-6">
+            {% csrf_token %}
+            {% for field in form %}
+                <div class="mb-4">
+                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                        {{ field.label }}
+                    </label>
+                    {{ field }}
+                    {% if field.help_text %}
+                        <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
+                    {% endif %}
+                </div>
+            {% endfor %}
+            <div class="mt-6">
+                <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    Submit
+                </button>
+            </div>
+        </form>
     </div>
+</div>
 
 {% endblock content %}
diff --git a/engagements/templates/engagements/engagement_form.html b/engagements/templates/engagements/engagement_form.html
index e05c639..3dfe249 100644
--- a/engagements/templates/engagements/engagement_form.html
+++ b/engagements/templates/engagements/engagement_form.html
@@ -3,30 +3,66 @@
 {% load static %}
 
 {% block title %}Create new engagement{% endblock title %}
-{% block extra_head_tags %}
-<link rel="stylesheet" href="{% static 'css/styles.css' %}"/>
-{% endblock extra_head_tags %}
 
 {% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold text-center">{{ title }}</h2>
+        </header>
+        <div class="p-6">
+            <div class="mb-8">
+                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
+                    <h4 class="text-lg font-semibold mb-2">Step 1</h4>
+                    <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
+                    <h4 class="text-lg font-semibold mb-2">Step 2</h4>
+                    <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+                </div>
+            </div>
 
-<div class="format-container">
-    <div class="form-thing">
-        <h2>{{ title }}</h2>
-        <p>TAKE THIS OUT</p>
-        <span onclick="this.parentElement.style.display='none'"
-              class="w3-button w3-display-topright">&times;</span>
-        <h4>Step 1</h4>
-        <p>To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional),the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
-        <h4>Step 2</h4>
-        <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each compontent can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
-    </div>
-    <div class="form-thing">
-        <h4>Enter main details:</h4>
-        <form method="post">{% csrf_token %}
-            {{ form.as_p }}
-            <input type="submit" class="w3-btn w3-green" value="Save">
-        </form>
+            <div class="mt-8">
+                <h4 class="text-xl font-semibold mb-4">Enter main details:</h4>
+                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+                    <div class="px-4 py-5 sm:p-6">
+                        <form method="post" class="space-y-6">
+                            {% csrf_token %}
+                            {% for field in form %}
+                                <div class="mb-4">
+                                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
+                                        {{ field.label }}
+                                    </label>
+                                    {% if field.field.widget.input_type == 'checkbox' %}
+                                        <div class="flex items-center">
+                                            <input type="checkbox" name="{{ field.name }}" id="{{ field.id_for_label }}" {% if field.value %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                                            <span class="ml-2 text-gray-700">{{ field.help_text|safe }}</span>
+                                        </div>
+                                    {% elif field.field.widget.input_type == 'select' %}
+                                        <select name="{{ field.name }}" id="{{ field.id_for_label }}" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
+                                            {% for choice in field.field.choices %}
+                                                <option value="{{ choice.0 }}" {% if choice.0 == field.value %}selected{% endif %}>{{ choice.1 }}</option>
+                                            {% endfor %}
+                                        </select>
+                                    {% else %}
+                                        <input type="{{ field.field.widget.input_type }}" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value|default:'' }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
+                                    {% endif %}
+                                    {% if field.help_text and field.field.widget.input_type != 'checkbox' %}
+                                        <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p>
+                                    {% endif %}
+                                    {% for error in field.errors %}
+                                        <p class="mt-2 text-sm text-red-600">{{ error }}</p>
+                                    {% endfor %}
+                                </div>
+                            {% endfor %}
+                            <div>
+                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                    Save
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
-
 {% endblock content %}
diff --git a/engagements/templates/engagements/ep_org.html b/engagements/templates/engagements/ep_org.html
index 370a117..9fbb9dd 100644
--- a/engagements/templates/engagements/ep_org.html
+++ b/engagements/templates/engagements/ep_org.html
@@ -1,429 +1,111 @@
 {% extends "core/base.html" %}
-
 {% block title %}Create new engagement{% endblock title %}
-
 {% load table_extras %}
-
 {% load static %}
 
 {% block content %}
-
-<div class="container">
-
-  <h2 class="text-3xl mx-auto m-3">Engagement Plans for {{ entity.name }}</h2>
-    
-  <a href="{% url 'engagements:create' entity.slug 'reg' %}" class="link">Add New Regulatory Engagement</a> | <a href="{% url 'engagements:create' entity.slug %}">Add New Engagement</a>
-</div>
-
-<div class="ontainer">
-    <h3 class="text-2xl mx-auto m-3">2023</h3>
-    <table class="table table-sm">
-        <thead>
-            <tr>
-                <th>Start Date</th>
-                <th>End Date</th>
-                <th>Engagement</th>
-                <th>Engagement Type</th>
-                <th>Area/Theme</th>
-                <th>Inspectors Involved</th>
-                <th>DSCs</th>
-                <th>Travel Effort</th>
-                <th>Planning and Regulation Effort</th>
-                <th>Completion Status</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for e in engagements %}
-            <tr>
-                <td>{{ e.proposed_start_date|date:'j M Y' }}</td>
-                <td>{{ e.proposed_end_date|date:'j M Y' }}</td>
-                <td><a href="{% url 'engagements:engagement_detail' e.pk %}">{{ e }}</a></td>
-                <td>{{ e.friendly_type }}</td>
-                <td>Area Theme</td>
-                <td>
-                    <ul class="w3-ul">
-                    {% for inspector in e.officers.all %}
-                        <li>{{ inspector }} </li>
-                    {% endfor %}
-                    </ul>
-                </td>
-                <td>
-                    <ul class="w3-ul">
-                        {% for dsc in e.dscs %}
-                        <li><a href="#">{{ dsc.short }}</a></li>
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold">Engagement Plans for {{ entity.name }}</h2>
+        </header>
+        <div class="p-4">
+            <div class="mb-4">
+                <a href="{% url 'engagements:create' entity.slug 'reg' %}" class="text-blue-600 hover:underline">Add New Regulatory Engagement</a> | 
+                <a href="{% url 'engagements:create' entity.slug %}" class="text-blue-600 hover:underline">Add New Engagement</a>
+            </div>
+
+            <h3 class="text-2xl font-semibold mb-4">2023</h3>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Engagement</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Engagement Type</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Area/Theme</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Inspectors Involved</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSCs</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Travel Effort</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Planning and Regulation Effort</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completion Status</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        {% for e in engagements %}
+                        <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.proposed_start_date|date:'j M Y' }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.proposed_end_date|date:'j M Y' }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 hover:underline">
+                                <a href="{% url 'engagements:engagement_detail' e.pk %}">{{ e }}</a>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.friendly_type }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Area Theme</td>
+                            <td class="px-6 py-4 text-sm text-gray-500">
+                                <ul class="list-disc list-inside">
+                                {% for inspector in e.officers.all %}
+                                    <li>{{ inspector }}</li>
+                                {% endfor %}
+                                </ul>
+                            </td>
+                            <td class="px-6 py-4 text-sm text-gray-500">
+                                <ul class="list-disc list-inside">
+                                {% for dsc in e.dscs %}
+                                    <li><a href="#" class="text-blue-600 hover:underline">{{ dsc.short }}</a></li>
+                                {% endfor %}
+                                </ul>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TBC</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TBC</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Incomplete</td>
+                        </tr>
                         {% endfor %}
-                    </ul>
-                </td>
-                <td>TBC</td>
-                <td>TBC</td>
-                <td class="ep-table">Incomplete</td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-
-</div>
-
-<hr>
-
-<div class="container">
-    <div class="w3-cell-row">
-        <div class="w3-container w3-cell">
-            <h3>Total DSC coverage</h3>
-            <table class="summary-table">
-                <tr>
-                    <th>DSC</th>
-                    <th>Allocated time</th>
-                </tr>
-                {% for dsc in dscs %}
-                <tr>
-                    <td>{{ dsc }} </td>
-                    <td>{{ dsc | effort_for_org:entity }}</td>
-                </tr>
-                {% endfor %}
-            </table>
-        </div>
-        <div class="w3-container w3-cell">
-            <h3>Another table of data</h3>
-            <table class="summary-table">
-                <tr>
-                    <th>DSC</th>
-                    <th>Allocated time</th>
-                </tr>
-                {% for dsc in dscs %}
-                <tr>
-                    <td>{{ dsc }} </td>
-                    <td>{{ dsc | effort_for_org:entity }}</td>
-                </tr>
-                {% endfor %}
-            </table>
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Total DSC coverage</h3>
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSC</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocated time</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            {% for dsc in dscs %}
+                            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc | effort_for_org:entity }}</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Another table of data</h3>
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSC</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocated time</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            {% for dsc in dscs %}
+                            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc | effort_for_org:entity }}</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
-
     </div>
 </div>
-
-<style type="text/css" media="screen">
-
-  /* (A) CONTAINER */
-  /* https://code-boxx.com/beginner-create-grid-html-css/ */
-    #grid-col {
-
-    /* (A1) GRID LAYOUT */
-    display: grid;
-
-    /* (A2) SPECIFY COLUMNS */
-      grid-template-columns: 75px repeat(31, 40px);
-
-    /* we can also specify exact pixels, percentage, repeat
-      grid-template-columns: 50px 100px 150px;
-      grid-template-columns: 25% 50% 25%;
-      grid-template-columns: 100px 20% auto;
-      grih-template-columns: repeat(3, auto); */
-    }
-
-    /* (B) GRID CELLS */
-    div.cell {
-        background: white;
-        border: 1px solid lightgray;
-        padding: 10px;
-    }
-
-    div.cellred{
-        background: red;
-        border: 1px solid lightgray;
-        padding: 10px;
-    }
-
-    div.cellyellow{
-        background: yellow;
-        border: 1px solid lightgray;
-        padding: 10px;
-    }
-    div.cellorange{
-        background: orange;
-        border: 1px solid lightgray;
-        padding: 10px;
-    }
-    /* (C) RESPONSIVE - 1 COLUMN ON SMALL SCREENS */
- /*   @media screen and (max-width: 640px) {
-        #grid-col { grid-template-columns: 100%; }
-    }
- */
-/* </style>
-<!-- <div class="w3-container w3-padding-16"> -->
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell"></div><div class="cell">1</div> -->
-<!--        <div class="cell">2</div><div class="cell">3</div> -->
-<!--        <div class="cell">4</div><div class="cell">5</div> -->
-<!--        <div class="cell">6</div><div class="cell">7</div> -->
-<!--        <div class="cell">8</div><div class="cell">9</div> -->
-<!--        <div class="cell">10</div><div class="cell">11</div> -->
-<!--        <div class="cell">12</div><div class="cell">13</div> -->
-<!--        <div class="cell">14</div><div class="cell">15</div> -->
-<!--        <div class="cell">16</div><div class="cell">17</div> -->
-<!--        <div class="cell">18</div><div class="cell">19</div> -->
-<!--        <div class="cell">20</div><div class="cell">21</div> -->
-<!--        <div class="cell">22</div><div class="cell">23</div> -->
-<!--        <div class="cell">24</div><div class="cell">25</div> -->
-<!--        <div class="cell">26</div><div class="cell">27</div> -->
-<!--        <div class="cell">28</div><div class="cell">29</div> -->
-<!--        <div class="cell">30</div><div class="cell">31</div> -->
-<!--      </div> -->
-<!--     </div> -->
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Jan</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--         <div class="cellred"><small></small></div><div class="cellred"><small></small></div> -->
-<!--         <div class="cellred"><small></small></div><div class="cellred"><small></small></div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Feb</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> -->
-<!--        <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Mar</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!--        <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!--        <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!--        <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Apr</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">May</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Jun</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Jul</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Aug</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Sep</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Oct</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Nov</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Dec</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-
-<script src="{% static 'js/yoap.js' %}"></script>
-
 {% endblock content %}
diff --git a/engagements/templates/engagements/index.html b/engagements/templates/engagements/index.html
index dbd62f9..a63aceb 100644
--- a/engagements/templates/engagements/index.html
+++ b/engagements/templates/engagements/index.html
@@ -3,27 +3,33 @@
 {% block title %}Engagements{% endblock title %}
 
 {% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold">Engagement Planning</h2>
+        </header>
+        <div class="p-4">
+            <h3 class="text-2xl font-semibold mb-4">Your entities</h3>
 
-    <div class="container">
-        <h2 class="text-3xl mx-auto m-3">Engagement Planning</h2>
-        <h1 class="text-2xl mx-auto m-3">Your entities</h1>
-
-        <table class="table table-sm">
-            <thead>
-            <tr>
-                <th>Engagement Plan</th>
-                <th>Scheduled Engagements</th>
-                <th>Total time</th>
-            </tr>
-            </thead>
-            {% for e in entities %}
-                <tr>
-                    <td><a href="{% url 'engagements:plan_for_org' e.slug %}">{{ e.name }}</a></td>
-                    <td>{{ e.engagement_set.all.count }}</td>
-                    <td>NA</td>
-                </tr>
-            {% endfor %}
-        </table>
+            <table class="w-full mb-4">
+                <thead>
+                    <tr class="bg-gray-200">
+                        <th class="p-2 text-left">Engagement Plan</th>
+                        <th class="p-2 text-left">Scheduled Engagements</th>
+                        <th class="p-2 text-left">Total time</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for e in entities %}
+                    <tr class="{% cycle 'bg-white' 'bg-gray-100' %}">
+                        <td class="p-2"><a href="{% url 'engagements:plan_for_org' e.slug %}" class="text-blue-600 hover:underline">{{ e.name }}</a></td>
+                        <td class="p-2">{{ e.engagement_set.all.count }}</td>
+                        <td class="p-2">NA</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
-
+</div>
 {% endblock content %}
diff --git a/engagements/templates/engagements/organisations.html b/engagements/templates/engagements/organisations.html
index 7991784..f2605c4 100644
--- a/engagements/templates/engagements/organisations.html
+++ b/engagements/templates/engagements/organisations.html
@@ -4,49 +4,53 @@
 {% block title %}Regulated Entities{% endblock title %}
 
 {% block content %}
-
-    <div class="container mx-auto">
-        <h1 class="text-3xl mx-auto m-3">Regulated Entities</h1>
-        <div class="overflow x-auto">
-            <table class="table table-sm table-zebra">
-                <thead>
-                <tr>
-                    <th>Entity</th>
-                    <th>Team</th>
-                    <th>Lead Inspector[s]</th>
-                    <th>Responsible Person[s]</th>
-                    <th>Accountable Person[s]</th>
-                </tr>
-                </thead>
-                {% for e in entities %}
-                    <tr>
-                        <td>{{ e.name }}</td>
-                        <td>{{ e.lead_team }}</td>
-                        <td>
-                            {% if e.lead_inspector.all %}
-                                {{ e.lead_inspector.all|commalist }}
-                            {% endif %}
-                        </td>
-                        <td>
-                            <!-- rp -->
-                            {% if e.rp.all %}
-                                {% for p in e.rp.all %}
-                                    {{ p }}
-                                {% endfor %}
-                            {% endif %}
-                        </td>
-                        <td>
-                            <!-- ap -->
-                            {% if e.ap.all %}
-                                {% for p in e.ap.all %}
-                                    {{ p }}
-                                {% endfor %}
-                            {% endif %}
-                        </td>
-                    </tr>
-                {% endfor %}
-            </table>
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h1 class="text-3xl font-bold">Regulated Entities</h1>
+        </header>
+        <div class="p-4">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entity</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Team</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lead Inspector[s]</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Responsible Person[s]</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Accountable Person[s]</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        {% for e in entities %}
+                            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"><a href="#" class="text-blue-600 hover:text-blue-900">{{ e.name }}</a></td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.lead_team }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {% if e.lead_inspector.all %}
+                                        {{ e.lead_inspector.all|commalist }}
+                                    {% endif %}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {% if e.rp.all %}
+                                        {% for p in e.rp.all %}
+                                            {{ p }}{% if not forloop.last %}, {% endif %}
+                                        {% endfor %}
+                                    {% endif %}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {% if e.ap.all %}
+                                        {% for p in e.ap.all %}
+                                            {{ p }}{% if not forloop.last %}, {% endif %}
+                                        {% endfor %}
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
-
+</div>
 {% endblock content %}
diff --git a/engagements/templates/engagements/snippets/effort_summary_panel.html b/engagements/templates/engagements/snippets/effort_summary_panel.html
index 235a67a..d0dc256 100644
--- a/engagements/templates/engagements/snippets/effort_summary_panel.html
+++ b/engagements/templates/engagements/snippets/effort_summary_panel.html
@@ -1,41 +1,33 @@
 {% load table_extras %}
 
-{% if e.is_planned %}
-  <div class="w3-panel w3-pale-green w3-topbar w3-border-green">
-{% else %}
-  <div class="w3-panel w3-light-gray w3-topbar w3-border-green">
-{% endif %}
-  <div class="w3-cell-row">
-    <div class="w3-cell w3-align-left">
-      <h5>{{ e.proposed_start_date|date:'j M Y' }} - {{ e.effort_type }}</h5>
-    </div>
-    <div class="w3-cell w3-right-align">
-      <p> {{ e.effort_total_hours|floatformat }} hrs</p>
-      Planned: {{ e.is_planned }}
-      <button hx-get="{% url 'engagements:htmx-effort-planned' e.id %}" hx-target="#planned_swap_{{ e.id }}">
-          Flip
+<div class="bg-white shadow-sm rounded-lg overflow-hidden border {% if e.is_planned %}border-green-500{% else %}border-gray-300{% endif %} mb-4">
+  <div class="px-4 py-3 bg-gray-50 flex justify-between items-center">
+    <h5 class="text-lg font-semibold">{{ e.proposed_start_date|date:'j M Y' }} - {{ e.effort_type }}</h5>
+    <div class="text-right">
+      <p class="text-sm font-medium">{{ e.effort_total_hours|floatformat }} hrs</p>
+      <span class="text-sm text-gray-500">Planned: {{ e.is_planned|yesno:"Yes,No" }}</span>
+      <button hx-get="{% url 'engagements:htmx-effort-planned' e.id %}" hx-target="#planned_swap_{{ e.id }}" class="ml-2 px-2 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600">
+        Flip
       </button>
     </div>
   </div>
-  <div>
-    <strong>Inspectors:</strong> {{ e.officers.all|commalist }}
-  </div>
-  <div>
-    <strong>Start time</strong>: {{ e.proposed_start_date|date:'H:i' }}
-    {% if e.proposed_end_date %}
-      - {{ e.proposed_end_date|date:'H:i' }}
-    {% endif %}
-  </div>
-
-  <div>
+  <div class="px-4 py-3">
+    <p class="mb-2"><strong class="font-medium">Inspectors:</strong> {{ e.officers.all|commalist }}</p>
+    <p class="mb-2">
+      <strong class="font-medium">Start time:</strong> {{ e.proposed_start_date|date:'H:i' }}
+      {% if e.proposed_end_date %}
+        - {{ e.proposed_end_date|date:'H:i' }}
+      {% endif %}
+    </p>
     {% if e.sub_instruments.all %}
-      <strong>DSCs</strong>:
-    <ul>
-      {% for dsc in e.sub_instruments.all %}
-        <li><a href="#">{{ dsc.title }}</a></li>
-      {% endfor %}
-  </ul>
+      <div>
+        <strong class="font-medium">DSCs:</strong>
+        <ul class="list-disc list-inside mt-1 ml-4">
+          {% for dsc in e.sub_instruments.all %}
+            <li><a href="#" class="text-blue-600 hover:underline">{{ dsc.title }}</a></li>
+          {% endfor %}
+        </ul>
+      </div>
     {% endif %}
-
   </div>
 </div>