diff --git a/commcare_connect/opportunity/tw_tables.py b/commcare_connect/opportunity/tw_tables.py
new file mode 100644
index 000000000..09df99a97
--- /dev/null
+++ b/commcare_connect/opportunity/tw_tables.py
@@ -0,0 +1,167 @@
+import django_tables2 as tables
+from django.utils.html import format_html
+from django_tables2.utils import A
+
+
+class BaseTailwindTable(tables.Table):
+    """Base table using Tailwind styling and custom template."""
+
+    class Meta:
+        template_name = "tailwind/base_table.html"  # Use your custom template
+        attrs = {"class": "w-full text-left text-sm text-gray-600"}
+
+
+class WorkerFlaggedTable(BaseTailwindTable):
+    index = tables.Column(verbose_name="", orderable=False)
+    time = tables.Column(verbose_name="Time")
+    entityName = tables.Column(verbose_name="Entity Name")
+    flags = tables.TemplateColumn(
+        verbose_name="Flags",
+        orderable=False,
+        template_code="""
+            <div class="flex relative justify-start text-sm text-brand-deep-purple font-normal w-72">
+                {% if value %}
+                    {% for flag in value|slice:":2" %}
+                        {% include "tailwind/components/badges/badge_sm.html" with text=flag %}
+                    {% endfor %}
+                    {% if value|length > 2 %}
+                        {% include "tailwind/components/badges/badge_sm_dropdown.html" with title='All Flags' list=value %}
+                    {% endif %}
+                {% endif %}
+            </div>
+        """,
+    )
+    reportIcons = tables.TemplateColumn(
+        verbose_name="",
+        orderable=False,
+        template_code="""
+
+            """,
+    )
+
+    class Meta:
+        attrs = {
+            "class": "w-full max-w-full",
+            "thead": {"class": "hidden"},
+            "tbody": {"class": "block w-full bg-gray-200 rounded-lg h-[400px] overflow-y-auto"},
+        }
+        row_attrs = {
+            "class": "flex w-full justify-between gap-x-4 p-3 bg-white hover:bg-gray-100 relative transition-colors duration-300 group",
+            "x-data": "{ hovered: false }",
+            "@mouseenter": "hovered = true",
+            "@mouseleave": "hovered = false",
+        }
+        sequence = ("index", "time", "entityName", "flags", "reportIcons")
+
+    def render_index(self, value, record):
+        return format_html(
+            """
+            <div class="flex justify-center text-sm text-brand-deep-purple font-normal w-12">
+                <span x-show="!hovered && !isRowSelected({})">{}</span>
+                <i x-show="hovered || isRowSelected({})"
+                   :class="isRowSelected({}) ? 'fa-regular fa-square-check' : 'fa-regular fa-square'"
+                   class="text-brand-deep-purple cursor-pointer"
+                   x-on:click="hovered && toggleRow({})"></i>
+            </div>
+        """,
+            value,
+            value,
+            value,
+            value,
+            value,
+        )
+
+    def render_time(self, value):
+        return format_html(
+            '<div class="flex justify-start text-sm text-brand-deep-purple font-normal w-28">{}</div>', value
+        )
+
+    def render_entityName(self, value):
+        return format_html(
+            '<div class="flex justify-start text-sm text-brand-deep-purple font-normal w-28">{}</div>', value
+        )
+
+    def render_reportIcons(self):
+        return format_html(
+            """
+            <div class="flex relative justify-start text-sm text-brand-deep-purple font-normal w-4">
+            <i class="fa-light fa-flag-swallowtail"></i>
+            </div>
+            """
+        )
+
+
+class VisitsTable(BaseTailwindTable):
+    index = tables.Column(verbose_name="#", orderable=False)
+    user_id = tables.Column(verbose_name="User ID")
+    name = tables.Column(verbose_name="Name")
+    max_visit = tables.Column(verbose_name="Max Visits")
+    used_visits = tables.Column(verbose_name="Used Visits")
+    end_date = tables.Column(verbose_name="End Date")
+
+    class Meta:
+        attrs = {
+            "thead": {"class": "hidden"},
+            "class": "",
+        }
+        row_attrs = {
+            "class": "grid grid-cols-[30px_222px_213px_168px_172px_151px] text-slate-900 pl-5 py-4 items-center text-xs ml-1"
+        }
+        sequence = ("index", "user_id", "name", "max_visit", "used_visits", "end_date")
+
+    def render_index(self, value):
+        return format_html('<div class="text-brand-deep-purple">{}</div>', value)
+
+    def render_user_id(self, value):
+        return format_html("<div>{}</div>", value)
+
+    def render_name(self, value):
+        return format_html("<div>{}</div>", value)
+
+    def render_max_visit(self, value):
+        return format_html(
+            """
+            <div x-data='{{"originalValue": "{}", "currentValue": "{}", "hasChanged": false, "isValid": true}}'
+                x-init="$watch('currentValue', value => {{
+                    if (value === '') {{
+                        currentValue = '0';
+                        return;
+                    }}
+                    hasChanged = value !== originalValue;
+                    isValid = !isNaN(value) && parseInt(value) >= 0;
+                }})">
+                <div class="flex items-center">
+                    <input
+                        type="text"
+                        x-model="currentValue"
+                        x-on:input="currentValue = $event.target.value.replace(/[^0-9]/g, '')"
+                        :class="{{
+                            'border border-transparent focus:border focus:border-slate-300 focus:outline-none rounded p-1.5 text-start': true,
+                            'w-20': !(hasChanged && isValid),
+                            'bg-indigo-100 border-none rounded-2xl w-10': hasChanged && isValid,
+                        }}"
+                        inputmode="numeric"
+                        pattern="[0-9]*"
+                        value="{}">
+                </div>
+            </div>
+            """,
+            value,
+            value,
+            value,
+        )
+
+    def render_used_visits(self, value):
+        return format_html("<div>{}</div>", value)
+
+    def render_end_date(self, value):
+        return format_html(
+            """
+            <div>
+                <input type="date"
+                class="border focus:border-slate-300 focus:outline-none rounded w-28 p-2"
+                value="{}">
+            </div>
+            """,
+            value,
+        )
diff --git a/commcare_connect/opportunity/tw_views.py b/commcare_connect/opportunity/tw_views.py
new file mode 100644
index 000000000..c839f54ab
--- /dev/null
+++ b/commcare_connect/opportunity/tw_views.py
@@ -0,0 +1,391 @@
+from django.shortcuts import render
+
+from .tw_tables import VisitsTable, WorkerFlaggedTable
+
+
+def home(request, org_slug=None, opp_id=None):
+    # Static data for the cards
+    rows = [
+        {"name": "Data Points 1", "value": "45"},
+        {"name": "Data Points 1", "value": "45"},
+        {"name": "Data Points 2", "value": "45"},
+        {"name": "Data Points 3", "value": "45"},
+        {"name": "Data Points 4", "value": "45"},
+        {"name": "Data Points 5", "value": "45"},
+        {"name": "Data Points 6", "value": "45"},
+        {"name": "Data Points 7", "value": "45"},
+        {"name": "Data Points 8", "value": "45"},
+    ]
+    timeline = [
+        {"title": "Event Title", "desc": "Additional Supporting Message with the Event", "date": "24 Feb, 2024"},
+        {"title": "Event Title", "desc": "Additional Supporting Message with the Event", "date": "24 Feb, 2024"},
+        {"title": "Event Title", "desc": "Additional Supporting Message with the Event", "date": "24 Feb, 2024"},
+    ]
+    flags = [
+        {"title": "Location", "desc": "Minimum distance between deliveries.", "value": "2.5m"},
+        {"title": "Form Duration", "desc": "Minimum time between deliveries.", "value": "10min"},
+        {"title": "Photos", "desc": "Added media for proof"},
+        {"title": "GPS location", "desc": "GPS location of the site is present"},
+    ]
+    return render(
+        request,
+        "tailwind/pages/home.html",
+        {"rows": rows, "timeline": timeline, "flags": flags, "header_title": "Worker"},
+    )
+
+
+def about(request, org_slug=None, opp_id=None):
+    return render(request, "tailwind/pages/about.html")
+
+
+def worker(request, org_slug=None, opp_id=None):
+    data = [
+        {"name": "Flagged", "count": "45", "url": "/tables"},
+        {"name": "PM Review", "count": "45", "url": "/tables"},
+        {"name": "Revalidate", "count": "45", "url": "/tables"},
+        {"name": "Approved", "count": "45", "url": "/tabls"},
+        {"name": "Rejected", "count": "45", "url": "/tables"},
+        {"name": "All", "count": "45", "url": "/tables"},
+    ]
+
+    return render(request, "tailwind/pages/worker.html", {"header_title": "Worker", "tabs": data})
+
+
+def opportunities(request, org_slug=None, opp_id=None):
+    data = [
+        {"name": "Learn App", "count": "2", "icon": "fa-book-open-cover"},
+        {"name": "Delivery App", "count": "2", "icon": "fa-clipboard-check"},
+        {"name": "Payments Units", "count": "2", "icon": "fa-hand-holding-dollar"},
+    ]
+    totalinfo = [
+        {
+            "name": "Delivery Type",
+            "count": "Early Childhood Development",
+            "icon": "fa-file-check",
+            "color": "",
+        },
+        {
+            "name": "Start Date",
+            "count": "21-Dec-2024",
+            "icon": "fa-calendar-range",
+            "color": "",
+        },
+        {
+            "name": "End Date",
+            "count": "21-Dec-2024",
+            "icon": "fa-arrow-right",
+            "color": "",
+        },
+        {
+            "name": "Total Workers",
+            "count": "248",
+            "icon": "fa-users",
+            "color": "brand-mango",
+        },
+        {
+            "name": "Total Service Deliveries",
+            "count": "350",
+            "icon": "fa-gears",
+            "color": "",
+        },
+        {
+            "name": "Worker Budget",
+            "count": "₹250,000",
+            "icon": "fa-money-bill",
+            "color": "",
+        },
+    ]
+    opList = [
+        {
+            "opName": "Workers",
+            "opLabel": "Active Yesterday",
+            "opValue": "10",
+            "ops": [
+                {"icon": "fa-user-group", "name": "Workers", "status": "Invited", "value": "25"},
+                {"icon": "fa-user-check", "name": "Workers", "status": "Yet to Accept Invitation", "value": "12"},
+                {
+                    "icon": "fa-clipboard-list",
+                    "name": "Workers",
+                    "status": "Inactive last 3 days",
+                    "value": "7",
+                    "type": "2",
+                },
+            ],
+        },
+        {
+            "opName": "Deliveries",
+            "opLabel": "Last Delivery",
+            "opValue": "10 Feb, 2025 | 14:67",
+            "ops": [
+                {
+                    "icon": "fa-clipboard-list-check",
+                    "name": "Deliveries",
+                    "status": "Total",
+                    "value": "248",
+                    "incr": "6",
+                },
+                {
+                    "icon": "fa-clipboard-list-check",
+                    "name": "Deliveries",
+                    "status": "Awaiting Flag Review",
+                    "value": "32",
+                },
+            ],
+        },
+        {
+            "opName": "Worker Payments",
+            "opLabel": "Last Payment ",
+            "opValue": "10 Feb, 2025 | 14:67",
+            "ops": [
+                {
+                    "icon": "fa-hand-holding-dollar",
+                    "name": "Payments",
+                    "status": "Earned",
+                    "value": "₹25,000",
+                    "incr": "6",
+                },
+                {"icon": "fa-light", "name": "Payments", "status": "Due", "value": "₹1,200"},
+            ],
+        },
+    ]
+    return render(
+        request,
+        "tailwind/pages/opportunities.html",
+        {"data": data, "totalinfo": totalinfo, "opList": opList, "header_title": "Opportunities"},
+    )
+
+
+def flagged_workers(request, org_slug=None, opp_id=None):
+    # Sample dynamic data (replace with your actual data source later)
+    data = [
+        {
+            "index": 1,
+            "time": "14:56",
+            "entityName": "Violla Maeya",
+            "flags": ["Location", "Form Duration", "Photos", "Flag Name 1", "Flag Name 2", "Flag Name 3"],
+        },
+        {"index": 2, "time": "14:57", "entityName": "John Doe", "flags": ["Location", "Photos"]},
+        {
+            "index": 3,
+            "time": "14:58",
+            "entityName": "Jane Smith",
+            "flags": ["Form Duration", "Flag Name 1", "Flag Name 2"],
+        },
+        {"index": 4, "time": "14:59", "entityName": "Alex Brown", "flags": []},
+        {"index": 5, "time": "15:00", "entityName": "Violla Maeya", "flags": ["Location", "Form Duration", "Photos"]},
+        {
+            "index": 11,
+            "time": "14:56",
+            "entityName": "Violla Maeya",
+            "flags": ["Location", "Form Duration", "Photos", "Flag Name 1", "Flag Name 2", "Flag Name 3"],
+        },
+        {"index": 12, "time": "14:57", "entityName": "John Doe", "flags": ["Location", "Photos"]},
+        {
+            "index": 13,
+            "time": "14:58",
+            "entityName": "Jane Smith",
+            "flags": ["Form Duration", "Flag Name 1", "Flag Name 2"],
+        },
+        {"index": 14, "time": "14:59", "entityName": "Alex Brown", "flags": []},
+        {"index": 15, "time": "15:00", "entityName": "Violla Maeya", "flags": ["Location", "Form Duration", "Photos"]},
+        {
+            "index": 21,
+            "time": "14:56",
+            "entityName": "Violla Maeya",
+            "flags": ["Location", "Form Duration", "Photos", "Flag Name 1", "Flag Name 2", "Flag Name 3"],
+        },
+        {"index": 22, "time": "14:57", "entityName": "John Doe", "flags": ["Location", "Photos"]},
+        {
+            "index": 23,
+            "time": "14:58",
+            "entityName": "Jane Smith",
+            "flags": ["Form Duration", "Flag Name 1", "Flag Name 2"],
+        },
+        {"index": 24, "time": "14:59", "entityName": "Alex Brown", "flags": []},
+        {"index": 25, "time": "15:00", "entityName": "Violla Maeya", "flags": ["Location", "Form Duration", "Photos"]},
+        {
+            "index": 31,
+            "time": "14:56",
+            "entityName": "Violla Maeya",
+            "flags": ["Location", "Form Duration", "Photos", "Flag Name 1", "Flag Name 2", "Flag Name 3"],
+        },
+        {"index": 32, "time": "14:57", "entityName": "John Doe", "flags": ["Location", "Photos"]},
+        {
+            "index": 33,
+            "time": "14:58",
+            "entityName": "Jane Smith",
+            "flags": ["Form Duration", "Flag Name 1", "Flag Name 2"],
+        },
+        {"index": 34, "time": "14:59", "entityName": "Alex Brown", "flags": []},
+        {"index": 35, "time": "15:00", "entityName": "Violla Maeya", "flags": ["Location", "Form Duration", "Photos"]},
+    ]
+    table = WorkerFlaggedTable(data)
+    return render(request, "tailwind/components/tables/worker_flagged_table.html", {"table": table})
+
+
+def opportunity_visits(request, org_slug=None, opp_id=None):
+    data = [
+        {
+            "index": 1,
+            "user_id": "AB12CD34EF56",
+            "name": "John Doe",
+            "max_visit": 120,
+            "used_visits": 89,
+            "end_date": "2025-07-12",
+        },
+        {
+            "index": 2,
+            "user_id": "XY98GH76IJ54",
+            "name": "Alice Smith",
+            "max_visit": 150,
+            "used_visits": 45,
+            "end_date": "2025-09-30",
+        },
+        {
+            "index": 3,
+            "user_id": "MN45KL89OP12",
+            "name": "Bob Johnson",
+            "max_visit": 100,
+            "used_visits": 72,
+            "end_date": "2026-02-15",
+        },
+        {
+            "index": 4,
+            "user_id": "QR23ST56UV78",
+            "name": "Emma Wilson",
+            "max_visit": 180,
+            "used_visits": 160,
+            "end_date": "2025-11-20",
+        },
+        {
+            "index": 5,
+            "user_id": "WX67YZ12AB34",
+            "name": "Michael Brown",
+            "max_visit": 90,
+            "used_visits": 25,
+            "end_date": "2026-05-10",
+        },
+        {
+            "index": 6,
+            "user_id": "KL34MN78OP56",
+            "name": "Sophia Martinez",
+            "max_visit": 130,
+            "used_visits": 98,
+            "end_date": "2025-08-21",
+        },
+        {
+            "index": 7,
+            "user_id": "UV12WX34YZ56",
+            "name": "James Anderson",
+            "max_visit": 170,
+            "used_visits": 140,
+            "end_date": "2026-04-05",
+        },
+        {
+            "index": 8,
+            "user_id": "CD78EF12GH34",
+            "name": "Olivia Taylor",
+            "max_visit": 200,
+            "used_visits": 180,
+            "end_date": "2025-12-25",
+        },
+        {
+            "index": 9,
+            "user_id": "IJ45KL67MN89",
+            "name": "William Harris",
+            "max_visit": 95,
+            "used_visits": 50,
+            "end_date": "2025-06-18",
+        },
+        {
+            "index": 10,
+            "user_id": "OP23QR45ST67",
+            "name": "Charlotte White",
+            "max_visit": 160,
+            "used_visits": 130,
+            "end_date": "2026-07-01",
+        },
+        {
+            "index": 11,
+            "user_id": "EF12GH34IJ56",
+            "name": "Benjamin Lewis",
+            "max_visit": 110,
+            "used_visits": 85,
+            "end_date": "2025-10-11",
+        },
+        {
+            "index": 12,
+            "user_id": "ST78UV12WX34",
+            "name": "Mia Scott",
+            "max_visit": 140,
+            "used_visits": 95,
+            "end_date": "2026-03-30",
+        },
+        {
+            "index": 13,
+            "user_id": "YZ45AB67CD89",
+            "name": "Elijah Hall",
+            "max_visit": 180,
+            "used_visits": 170,
+            "end_date": "2025-09-09",
+        },
+        {
+            "index": 14,
+            "user_id": "GH23IJ45KL67",
+            "name": "Amelia Young",
+            "max_visit": 125,
+            "used_visits": 110,
+            "end_date": "2026-01-25",
+        },
+        {
+            "index": 15,
+            "user_id": "MN78OP12QR34",
+            "name": "Lucas King",
+            "max_visit": 190,
+            "used_visits": 150,
+            "end_date": "2025-11-15",
+        },
+        {
+            "index": 16,
+            "user_id": "WX45YZ67AB89",
+            "name": "Harper Wright",
+            "max_visit": 105,
+            "used_visits": 70,
+            "end_date": "2026-06-20",
+        },
+        {
+            "index": 17,
+            "user_id": "CD12EF34GH56",
+            "name": "Henry Green",
+            "max_visit": 175,
+            "used_visits": 160,
+            "end_date": "2025-12-01",
+        },
+        {
+            "index": 18,
+            "user_id": "IJ78KL12MN34",
+            "name": "Evelyn Adams",
+            "max_visit": 115,
+            "used_visits": 90,
+            "end_date": "2026-05-17",
+        },
+        {
+            "index": 19,
+            "user_id": "OP45QR67ST89",
+            "name": "Alexander Nelson",
+            "max_visit": 145,
+            "used_visits": 120,
+            "end_date": "2025-08-05",
+        },
+        {
+            "index": 20,
+            "user_id": "UV23WX45YZ67",
+            "name": "Isabella Carter",
+            "max_visit": 135,
+            "used_visits": 100,
+            "end_date": "2026-02-22",
+        },
+    ]
+
+    table = VisitsTable(data)
+    return render(request, "tailwind/pages/opportunity_visits.html", {"table": table})
diff --git a/commcare_connect/opportunity/urls.py b/commcare_connect/opportunity/urls.py
index ff26f8161..d339bb94a 100644
--- a/commcare_connect/opportunity/urls.py
+++ b/commcare_connect/opportunity/urls.py
@@ -1,6 +1,6 @@
 from django.urls import path
 
-from commcare_connect.opportunity import views
+from commcare_connect.opportunity import tw_views, views
 from commcare_connect.opportunity.views import (
     OpportunityCompletedWorkTable,
     OpportunityCreate,
@@ -52,6 +52,10 @@
     user_visits_list,
     verification_flags_config,
     visit_verification,
+    worker_deliver,
+    worker_learn,
+    worker_list,
+    worker_verify,
 )
 
 app_name = "opportunity"
@@ -108,6 +112,10 @@
     path("<int:opp_id>/suspend_user/<int:pk>/", view=suspend_user, name="suspend_user"),
     path("<int:opp_id>/revoke_user_suspension/<int:pk>/", view=revoke_user_suspension, name="revoke_user_suspension"),
     path("<int:opp_id>/delete_form_json_rule/<int:pk>/", view=delete_form_json_rule, name="delete_form_json_rule"),
+    path("<int:opp_id>/workers/list/", view=worker_list, name="worker_list"),
+    path("<int:opp_id>/workers/learn/", view=worker_learn, name="worker_learn"),
+    path("<int:opp_id>/workers/deliver/", view=worker_deliver, name="worker_deliver"),
+    path("<int:opp_id>/workers/verify/", view=worker_verify, name="worker_verify"),
     path("<int:pk>/catchment_area_export/", view=export_catchment_area, name="catchment_area_export"),
     path("<int:pk>/catchment_area_import/", view=import_catchment_area, name="catchment_area_import"),
     path("<int:pk>/payment_report/", payment_report, name="payment_report"),
@@ -119,4 +127,9 @@
     path("<int:pk>/invoice/approve/", views.invoice_approve, name="invoice_approve"),
     path("<int:opp_id>/user_invite_delete/<int:pk>/", views.user_invite_delete, name="user_invite_delete"),
     path("<int:opp_id>/resend_invite/<int:pk>", resend_user_invite, name="resend_user_invite"),
+    # New tailwind based views
+    path("<int:opp_id>/tw/worker/", tw_views.worker, name="tw_worker"),
+    path("<int:opp_id>/tw/opportunities/", tw_views.opportunities, name="tw_opportunities"),
+    path("<int:opp_id>/tw/flagged_workers/", tw_views.flagged_workers, name="tw_flagged_workers"),
+    path("<int:opp_id>/tw/visits/", tw_views.opportunity_visits, name="tw_visits"),
 ]
diff --git a/commcare_connect/opportunity/views.py b/commcare_connect/opportunity/views.py
index a869ecc21..798d3040e 100644
--- a/commcare_connect/opportunity/views.py
+++ b/commcare_connect/opportunity/views.py
@@ -1321,3 +1321,19 @@ def resend_user_invite(request, org_slug, opp_id, pk):
         invite_user.delay(user.id, access.pk)
 
     return HttpResponse("The invitation has been successfully resent to the user.")
+
+
+def worker_list(request, org_slug=None, opp_id=None):
+    return render(request, "opportunity/tailwind/workers.html")
+
+
+def worker_learn(request, org_slug=None, opp_id=None):
+    return render(request, "opportunity/tailwind/learn.html")
+
+
+def worker_deliver(request, org_slug=None, opp_id=None):
+    return render(request, "opportunity/tailwind/deliver.html")
+
+
+def worker_verify(request, org_slug=None, opp_id=None):
+    return render(request, "opportunity/tailwind/verify.html")
diff --git a/commcare_connect/program/urls.py b/commcare_connect/program/urls.py
index 7d9cd6c1e..efd483110 100644
--- a/commcare_connect/program/urls.py
+++ b/commcare_connect/program/urls.py
@@ -12,10 +12,12 @@
     dashboard,
     invite_organization,
     manage_application,
+    program_home,
 )
 
 app_name = "program"
 urlpatterns = [
+    path("home", view=program_home, name="home"),
     path("", view=ProgramList.as_view(), name="list"),
     path("init/", view=ProgramCreateOrUpdate.as_view(), name="init"),
     path("<int:pk>/edit", view=ProgramCreateOrUpdate.as_view(), name="edit"),
diff --git a/commcare_connect/program/views.py b/commcare_connect/program/views.py
index ff60a8b56..c90d6f438 100644
--- a/commcare_connect/program/views.py
+++ b/commcare_connect/program/views.py
@@ -6,6 +6,7 @@
 from django.views.generic import ListView, UpdateView
 from django_tables2 import SingleTableView
 
+from commcare_connect.opportunity.models import UserVisit
 from commcare_connect.opportunity.views import OpportunityInit
 from commcare_connect.organization.decorators import org_admin_required, org_program_manager_required
 from commcare_connect.organization.models import Organization
@@ -277,3 +278,47 @@ def get_queryset(self):
         start_date = self.request.GET.get("start_date") or None
         end_date = self.request.GET.get("end_date") or None
         return get_delivery_performance_report(program, start_date, end_date)
+
+
+from django.contrib.auth.decorators import login_required, user_passes_test
+
+
+# @login_required
+# @user_passes_test(lambda u: u.is_superuser)
+def program_home(request, org_slug):
+    from django.db.models import Count, F
+
+    # Fetch the organization by slug
+    org = Organization.objects.get(slug=org_slug)
+
+    # Get ProgramApplications with related Program details
+    apps = (
+        ProgramApplication.objects.filter(organization=org)
+        .select_related("program", "program__organization", "program__delivery_type")
+        .order_by("-date_created")
+        .values(
+            "program__name",
+            "program__start_date",
+            "program__end_date",
+            "program__description",
+            "status",
+            "program__organization__name",
+            "program__delivery_type__name",
+            "date_created",
+        )
+    )
+
+    # Sort by ProgramApplication date first, then Program start_date
+    results = sorted(apps, key=lambda x: (x["date_created"], x["program__start_date"]), reverse=True)
+    pending_counts = (
+        UserVisit.objects.filter(status="pending")
+        .values("opportunity__id", "opportunity__name", "opportunity__organization__name")  # Separate field names
+        .annotate(count=Count("id"))
+    )
+    context = {
+        "program_apps": results,
+        "review_counts": pending_counts,
+        "pending_payments": pending_counts, # Todo
+        "inactive_workers": pending_counts, # Todo
+    }  # The queryset from the ORM query
+    return render(request, "program/tailwind/home.html", context)
diff --git a/commcare_connect/static/css/tailwind.css b/commcare_connect/static/css/tailwind.css
new file mode 100644
index 000000000..f71140e11
--- /dev/null
+++ b/commcare_connect/static/css/tailwind.css
@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+
+@theme {
+  --color-brand-deep-purple: #16006D;
+  --color-brand-indigo: #3843D0;
+  --color-brand-cornflower-blue: #5D70D2;
+  --color-brand-sky: #8EA1FF;
+  --color-brand-sunset: #E44434;
+  --color-brand-mango: #FC5F36;
+  --color-brand-marigold: #FEAF31;
+  --color-brand-blue-light: #94A3B8;
+  --color-brand-sunset-light: #FC5F3633;
+  --color-brand-border-light: #E2E8F0;
+}
diff --git a/commcare_connect/static/images/history.svg b/commcare_connect/static/images/history.svg
new file mode 100644
index 000000000..cb2d4c547
--- /dev/null
+++ b/commcare_connect/static/images/history.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class='h-4 w-4 text-[#16006D]' viewBox="0 0 512 512">
+   <path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z" fill="currentColor"/>
+</svg>
diff --git a/commcare_connect/static/images/logo.svg b/commcare_connect/static/images/logo.svg
new file mode 100644
index 000000000..ecd4ce2c1
--- /dev/null
+++ b/commcare_connect/static/images/logo.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.7167 17.978C33.1759 16.074 31.9268 14.4924 30.1979 13.5278C29.3093 13.0327 28.3471 12.7332 27.3646 12.6291C27.3189 12.2153 27.2453 11.8015 27.131 11.3928C26.5903 9.48884 25.3412 7.90726 23.6123 6.94259C21.8834 5.97791 19.8828 5.74435 17.9787 6.28508C16.0746 6.82581 14.493 8.07481 13.5283 9.8036C13.0332 10.6921 12.7336 11.6543 12.6295 12.6367C12.2157 12.6824 11.8019 12.756 11.3932 12.8703C9.48906 13.411 7.90738 14.66 6.94264 16.3888C5.97791 18.1176 5.74434 20.118 6.2851 22.022C6.82586 23.926 8.07494 25.5075 9.80385 26.4722C10.6924 26.9672 11.6546 27.2668 12.6371 27.3709C12.6828 27.7847 12.7564 28.1985 12.8707 28.6072C13.4115 30.5112 14.6605 32.0927 16.3895 33.0574C18.1184 34.0221 20.1189 34.2556 22.023 33.7149C23.9271 33.1742 25.5088 31.9252 26.4735 30.1964C26.9686 29.3079 27.2681 28.3457 27.3722 27.3633C27.786 27.3176 28.1999 27.244 28.6086 27.1297C30.5127 26.589 32.0944 25.34 33.0591 23.6112C34.0213 21.8824 34.2549 19.882 33.7167 17.978ZM15.7751 11.0577C16.4047 9.93054 17.4354 9.11311 18.6795 8.76024C19.9234 8.40737 21.2284 8.55969 22.3581 9.18929C23.4879 9.81886 24.3028 10.8495 24.6557 12.0934C24.7243 12.3321 24.7674 12.5733 24.7979 12.817C24.9045 13.6648 24.7903 14.5204 24.4501 15.3124C24.3841 15.4673 24.3104 15.6221 24.2267 15.7719C24.0362 16.1147 23.6859 16.696 23.2645 17.3814C21.5635 16.305 18.1513 14.1548 17.0267 13.5278C16.4453 13.2028 15.8309 12.9693 15.2013 12.8119C15.2749 12.2026 15.4679 11.6086 15.7751 11.0577ZM21.9037 20.0013C21.9037 21.0523 21.0506 21.9052 19.9996 21.9052C18.9486 21.9052 18.0955 21.0523 18.0955 20.0013C18.0955 18.9503 18.9486 18.0973 19.9996 18.0973C21.0506 18.0973 21.9037 18.9503 21.9037 20.0013ZM13.5257 22.974C13.2008 23.5553 12.9672 24.1697 12.8098 24.7993C12.2005 24.7231 11.6064 24.5302 11.0555 24.223C9.92824 23.5934 9.11078 22.5628 8.75787 21.3188C8.40498 20.0749 8.55731 18.77 9.18693 17.6403C9.81656 16.5106 10.8473 15.6958 12.0913 15.3429C12.33 15.2744 12.5711 15.2312 12.8148 15.2007C13.6628 15.0941 14.5184 15.2083 15.3105 15.5485C15.4653 15.6145 15.6202 15.6907 15.77 15.7745C16.1127 15.9648 16.6941 16.3152 17.3796 16.7366C16.3032 18.4375 14.1553 21.852 13.5257 22.974ZM24.2241 28.9423C23.5945 30.0695 22.5638 30.8869 21.3197 31.2398C20.0758 31.5927 18.7708 31.4403 17.6411 30.8107C16.5113 30.1812 15.6963 29.1505 15.3435 27.9066C15.2749 27.6679 15.2317 27.4267 15.2013 27.1831C15.0947 26.3352 15.2089 25.4796 15.5466 24.6876C15.6126 24.5327 15.6862 24.3779 15.7725 24.2281C15.963 23.8854 16.3133 23.304 16.7347 22.6186C18.4357 23.695 21.8478 25.8452 22.9725 26.4722C23.5539 26.7972 24.1683 27.0307 24.7979 27.1881C24.7243 27.7974 24.5313 28.3914 24.2241 28.9423ZM30.8098 22.3571C30.1801 23.4868 29.1494 24.3017 27.9054 24.6546C27.6667 24.7231 27.4256 24.7663 27.1818 24.7967C26.3339 24.9034 25.4783 24.7891 24.6862 24.449C24.5313 24.3829 24.3764 24.3093 24.2267 24.223C23.8839 24.0326 23.3025 23.6823 22.6171 23.2609C23.6935 21.56 25.8439 18.1481 26.4709 17.0235C26.7959 16.4421 27.0295 15.8278 27.1869 15.1982C27.7962 15.2744 28.3903 15.4673 28.9412 15.7745C30.0684 16.4041 30.8859 17.4347 31.2388 18.6786C31.5917 19.9226 31.4393 21.23 30.8098 22.3571Z" fill="white"/>
+</svg>
diff --git a/commcare_connect/static/js/tailwind.js b/commcare_connect/static/js/tailwind.js
new file mode 100644
index 000000000..6a3f04e35
--- /dev/null
+++ b/commcare_connect/static/js/tailwind.js
@@ -0,0 +1 @@
+import '../sass/tailwind.css';
diff --git a/commcare_connect/templates/logo.svg b/commcare_connect/templates/logo.svg
new file mode 100644
index 000000000..ecd4ce2c1
--- /dev/null
+++ b/commcare_connect/templates/logo.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.7167 17.978C33.1759 16.074 31.9268 14.4924 30.1979 13.5278C29.3093 13.0327 28.3471 12.7332 27.3646 12.6291C27.3189 12.2153 27.2453 11.8015 27.131 11.3928C26.5903 9.48884 25.3412 7.90726 23.6123 6.94259C21.8834 5.97791 19.8828 5.74435 17.9787 6.28508C16.0746 6.82581 14.493 8.07481 13.5283 9.8036C13.0332 10.6921 12.7336 11.6543 12.6295 12.6367C12.2157 12.6824 11.8019 12.756 11.3932 12.8703C9.48906 13.411 7.90738 14.66 6.94264 16.3888C5.97791 18.1176 5.74434 20.118 6.2851 22.022C6.82586 23.926 8.07494 25.5075 9.80385 26.4722C10.6924 26.9672 11.6546 27.2668 12.6371 27.3709C12.6828 27.7847 12.7564 28.1985 12.8707 28.6072C13.4115 30.5112 14.6605 32.0927 16.3895 33.0574C18.1184 34.0221 20.1189 34.2556 22.023 33.7149C23.9271 33.1742 25.5088 31.9252 26.4735 30.1964C26.9686 29.3079 27.2681 28.3457 27.3722 27.3633C27.786 27.3176 28.1999 27.244 28.6086 27.1297C30.5127 26.589 32.0944 25.34 33.0591 23.6112C34.0213 21.8824 34.2549 19.882 33.7167 17.978ZM15.7751 11.0577C16.4047 9.93054 17.4354 9.11311 18.6795 8.76024C19.9234 8.40737 21.2284 8.55969 22.3581 9.18929C23.4879 9.81886 24.3028 10.8495 24.6557 12.0934C24.7243 12.3321 24.7674 12.5733 24.7979 12.817C24.9045 13.6648 24.7903 14.5204 24.4501 15.3124C24.3841 15.4673 24.3104 15.6221 24.2267 15.7719C24.0362 16.1147 23.6859 16.696 23.2645 17.3814C21.5635 16.305 18.1513 14.1548 17.0267 13.5278C16.4453 13.2028 15.8309 12.9693 15.2013 12.8119C15.2749 12.2026 15.4679 11.6086 15.7751 11.0577ZM21.9037 20.0013C21.9037 21.0523 21.0506 21.9052 19.9996 21.9052C18.9486 21.9052 18.0955 21.0523 18.0955 20.0013C18.0955 18.9503 18.9486 18.0973 19.9996 18.0973C21.0506 18.0973 21.9037 18.9503 21.9037 20.0013ZM13.5257 22.974C13.2008 23.5553 12.9672 24.1697 12.8098 24.7993C12.2005 24.7231 11.6064 24.5302 11.0555 24.223C9.92824 23.5934 9.11078 22.5628 8.75787 21.3188C8.40498 20.0749 8.55731 18.77 9.18693 17.6403C9.81656 16.5106 10.8473 15.6958 12.0913 15.3429C12.33 15.2744 12.5711 15.2312 12.8148 15.2007C13.6628 15.0941 14.5184 15.2083 15.3105 15.5485C15.4653 15.6145 15.6202 15.6907 15.77 15.7745C16.1127 15.9648 16.6941 16.3152 17.3796 16.7366C16.3032 18.4375 14.1553 21.852 13.5257 22.974ZM24.2241 28.9423C23.5945 30.0695 22.5638 30.8869 21.3197 31.2398C20.0758 31.5927 18.7708 31.4403 17.6411 30.8107C16.5113 30.1812 15.6963 29.1505 15.3435 27.9066C15.2749 27.6679 15.2317 27.4267 15.2013 27.1831C15.0947 26.3352 15.2089 25.4796 15.5466 24.6876C15.6126 24.5327 15.6862 24.3779 15.7725 24.2281C15.963 23.8854 16.3133 23.304 16.7347 22.6186C18.4357 23.695 21.8478 25.8452 22.9725 26.4722C23.5539 26.7972 24.1683 27.0307 24.7979 27.1881C24.7243 27.7974 24.5313 28.3914 24.2241 28.9423ZM30.8098 22.3571C30.1801 23.4868 29.1494 24.3017 27.9054 24.6546C27.6667 24.7231 27.4256 24.7663 27.1818 24.7967C26.3339 24.9034 25.4783 24.7891 24.6862 24.449C24.5313 24.3829 24.3764 24.3093 24.2267 24.223C23.8839 24.0326 23.3025 23.6823 22.6171 23.2609C23.6935 21.56 25.8439 18.1481 26.4709 17.0235C26.7959 16.4421 27.0295 15.8278 27.1869 15.1982C27.7962 15.2744 28.3903 15.4673 28.9412 15.7745C30.0684 16.4041 30.8859 17.4347 31.2388 18.6786C31.5917 19.9226 31.4393 21.23 30.8098 22.3571Z" fill="white"/>
+</svg>
diff --git a/commcare_connect/templates/opportunity/tailwind/deliver.html b/commcare_connect/templates/opportunity/tailwind/deliver.html
new file mode 100644
index 000000000..ba52afe99
--- /dev/null
+++ b/commcare_connect/templates/opportunity/tailwind/deliver.html
@@ -0,0 +1,7 @@
+{% extends "tailwind/base.html" %}
+
+{% block content %}
+<div class="mt-4">
+  <h1>Override as needed</h1>
+</div>
+{% endblock content %}
diff --git a/commcare_connect/templates/opportunity/tailwind/learn.html b/commcare_connect/templates/opportunity/tailwind/learn.html
new file mode 100644
index 000000000..ba52afe99
--- /dev/null
+++ b/commcare_connect/templates/opportunity/tailwind/learn.html
@@ -0,0 +1,7 @@
+{% extends "tailwind/base.html" %}
+
+{% block content %}
+<div class="mt-4">
+  <h1>Override as needed</h1>
+</div>
+{% endblock content %}
diff --git a/commcare_connect/templates/opportunity/tailwind/payments.html b/commcare_connect/templates/opportunity/tailwind/payments.html
new file mode 100644
index 000000000..ba52afe99
--- /dev/null
+++ b/commcare_connect/templates/opportunity/tailwind/payments.html
@@ -0,0 +1,7 @@
+{% extends "tailwind/base.html" %}
+
+{% block content %}
+<div class="mt-4">
+  <h1>Override as needed</h1>
+</div>
+{% endblock content %}
diff --git a/commcare_connect/templates/opportunity/tailwind/verify.html b/commcare_connect/templates/opportunity/tailwind/verify.html
new file mode 100644
index 000000000..ba52afe99
--- /dev/null
+++ b/commcare_connect/templates/opportunity/tailwind/verify.html
@@ -0,0 +1,7 @@
+{% extends "tailwind/base.html" %}
+
+{% block content %}
+<div class="mt-4">
+  <h1>Override as needed</h1>
+</div>
+{% endblock content %}
diff --git a/commcare_connect/templates/opportunity/tailwind/workers.html b/commcare_connect/templates/opportunity/tailwind/workers.html
new file mode 100644
index 000000000..ba52afe99
--- /dev/null
+++ b/commcare_connect/templates/opportunity/tailwind/workers.html
@@ -0,0 +1,7 @@
+{% extends "tailwind/base.html" %}
+
+{% block content %}
+<div class="mt-4">
+  <h1>Override as needed</h1>
+</div>
+{% endblock content %}
diff --git a/commcare_connect/templates/program/tailwind/home.html b/commcare_connect/templates/program/tailwind/home.html
new file mode 100644
index 000000000..1706701b1
--- /dev/null
+++ b/commcare_connect/templates/program/tailwind/home.html
@@ -0,0 +1,81 @@
+{% extends "tailwind/base.html" %}
+
+{% block content %}
+<div id="content-area" class="md:max-w-screen-2xl mx-auto flex flex-row gap-4 min-h-screen">
+   <!-- Left Column -->
+   <div class="w-2/3">
+      <h2 class="mb-4 text-test-red font-medium text-sm">Programs</h2>
+      <div class="flex flex-col gap-4">
+         {% for app in program_apps %}
+         <div class="bg-white p-6 rounded-lg shadow-lg relative">
+            <div class="absolute -top-1 left-4 h-[8px] w-[26px] bg-orange-400 rounded z-[50]"></div>
+
+            <!-- Header Section -->
+            <div class="flex justify-between items-center text-gray-500 text-sm mb-3">
+               <div class="flex items-center gap-3">
+                  <span>{{ app.date_created|date:"d M, Y" }}</span>
+                  <span class="flex items-center">
+                     <span class="text-orange-400 text-lg mx-1">•</span>
+                     {{ app.program__organization__name }}
+                  </span>
+               </div>
+               <span class="bg-[#FEAF31] text-[#16006D] text-sm px-3 py-1 rounded-full">
+                  {{ app.status|title }}
+               </span>
+            </div>
+
+            <!-- Program Name -->
+            <h3 class="text-xl font-bold text-indigo-900">{{ app.program__name }}</h3>
+
+            <!-- Description -->
+            <p class="text-gray-500 text-sm mt-2">
+               {{ app.program__description|default:"No description available." }}
+            </p>
+
+            <!-- Program Details -->
+            <div class="flex items-center justify-between mt-4">
+               <div class="flex items-center gap-8">
+                  <!-- Delivery Type -->
+                  <div>
+                     <p class="text-gray-400">Delivery Type</p>
+                     <p class="font-bold text-blue-900">{{ app.program__delivery_type__name }}</p>
+                  </div>
+
+                  <!-- Dates -->
+                  <div class="flex items-center gap-4">
+                     <div>
+                        <p class="text-gray-400">Start Date</p>
+                        <p class="font-bold text-blue-900">{{ app.program__start_date|date:"d-M-Y" }}</p>
+                     </div>
+                     <div>
+                        <p class="text-gray-400">End Date</p>
+                        <p class="font-bold text-blue-900">{{ app.program__end_date|date:"d-M-Y" }}</p>
+                     </div>
+                  </div>
+               </div>
+
+               <!-- Apply Button -->
+               <button class="bg-brand-indigo text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-800 transition">
+                  Apply
+               </button>
+            </div>
+         </div>
+         {% empty %}
+         <p class="text-gray-500">No programs found.</p>
+         {% endfor %}
+      </div>
+   </div>
+
+   <!-- Right Column -->
+   <div class="w-1/3">
+      <div class="mb-4 text-brand-deep-purple font-medium text-sm">Recent Activities</div>
+      <div class="bg-gray-100 rounded-lg overflow-y-hidden hover:overflow-y-auto">
+         <div class="flex flex-col gap-4">
+            {% include 'tailwind/components/cards/activity_card.html' with title="Visits Pending Review" rows=review_counts icon="fa-clock-rotate-left" %}
+            {% include 'tailwind/components/cards/activity_card.html' with title="Pending Payment" rows=pending_payments icon="fa-hand-holding-dollar" %}
+            {% include 'tailwind/components/cards/activity_card.html' with title="Inactive Workers" rows=inactive_workers icon="fa-user-slash" %}
+         </div>
+      </div>
+   </div>
+</div>
+{% endblock %}
diff --git a/commcare_connect/templates/tailwind/base.html b/commcare_connect/templates/tailwind/base.html
new file mode 100644
index 000000000..ea7f3eb66
--- /dev/null
+++ b/commcare_connect/templates/tailwind/base.html
@@ -0,0 +1,34 @@
+{% 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>CommCareConnect</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/Atugatran/FontAwesome6Pro@main/css/all.min.css" />
+    {% endblock %}
+    {% block javascript %}
+      <!-- Vendor dependencies bundled as one file -->
+      <script src="{% static 'bundles/js/vendors-bundle.js' %}" defer></script>
+      <script src="{% static 'bundles/js/tailwind-bundle.js' %}" defer></script>
+      <script src="https://unpkg.com/htmx.org/dist/ext/loading-states.js"></script>
+    {% endblock javascript %}
+  </head>
+  <body id="content-body" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="flex flex-col justify-center pl-16 overflow-x-hidden bg-gray-100 font-work-sans">
+    {% include 'tailwind/layouts/sidenav.html'%}
+    <div class="flex-1  px-4">
+      {% include 'tailwind/layouts/header.html'%}
+      <div class="h-5 w-full mt-16"></div>
+      <main id="content" class="">
+        {% block content %}
+        {% endblock %}
+      </main>
+    </div>
+
+  </body>
+</html>
diff --git a/commcare_connect/templates/tailwind/base_table.html b/commcare_connect/templates/tailwind/base_table.html
new file mode 100644
index 000000000..4721997fa
--- /dev/null
+++ b/commcare_connect/templates/tailwind/base_table.html
@@ -0,0 +1,113 @@
+{% load django_tables2 %}
+{% load i18n l10n %}
+{% block table-wrapper %}
+<div class="overflow-x-auto">
+    {% block table %}
+        <table {% render_attrs table.attrs class="min-w-full divide-y divide-gray-200" %}>
+            {% block table.thead %}
+            {% if table.show_header %}
+                <thead {{ table.attrs.thead.as_html }} class="bg-gray-50">
+                <tr>
+                {% for column in table.columns %}
+                    <th {{ column.attrs.th.as_html }} scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {% if column.orderable %}
+                            <a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}">{{ column.header }}</a>
+                        {% else %}
+                            {{ column.header }}
+                        {% endif %}
+                    </th>
+                {% endfor %}
+                </tr>
+                </thead>
+            {% endif %}
+            {% endblock table.thead %}
+            {% block table.tbody %}
+                <tbody {{ table.attrs.tbody.as_html }} class="bg-white divide-y divide-gray-200">
+                {% for row in table.paginated_rows %}
+                    {% block table.tbody.row %}
+                    <tr {{ row.attrs.as_html }}>
+                        {% for column, cell in row.items %}
+                            <td {{ column.attrs.td.as_html }} class="px-6 py-4 whitespace-nowrap">
+                                {% if column.localize == None %}
+                                    {{ cell }}
+                                {% else %}
+                                    {% if column.localize %}
+                                        {{ cell|localize }}
+                                    {% else %}
+                                        {{ cell|unlocalize }}
+                                    {% endif %}
+                                {% endif %}
+                            </td>
+                        {% endfor %}
+                    </tr>
+                    {% endblock table.tbody.row %}
+                {% empty %}
+                    {% if table.empty_text %}
+                    {% block table.tbody.empty_text %}
+                        <tr>
+                            <td colspan="{{ table.columns|length }}" class="px-6 py-4 text-center text-gray-500">
+                                {{ table.empty_text }}
+                            </td>
+                        </tr>
+                    {% endblock table.tbody.empty_text %}
+                    {% endif %}
+                {% endfor %}
+                </tbody>
+            {% endblock table.tbody %}
+            {% block table.tfoot %}
+            {% if table.has_footer %}
+            <tfoot {{ table.attrs.tfoot.as_html }} class="bg-gray-50">
+                <tr>
+                {% for column in table.columns %}
+                    <td {{ column.attrs.tf.as_html }} class="px-6 py-3 text-left text-xs font-medium text-gray-500">
+                        {{ column.footer }}
+                    </td>
+                {% endfor %}
+                </tr>
+            </tfoot>
+            {% endif %}
+            {% endblock table.tfoot %}
+        </table>
+    {% endblock table %}
+
+    {% block pagination %}
+        {% if table.page and table.paginator.num_pages > 1 %}
+        <nav aria-label="Table navigation" class="mt-4">
+            <ul class="flex justify-center space-x-2">
+            {% if table.page.has_previous %}
+                {% block pagination.previous %}
+                <li>
+                    <a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}" class="px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
+                        <span aria-hidden="true">&laquo;</span>
+                        {% trans 'previous' %}
+                    </a>
+                </li>
+                {% endblock pagination.previous %}
+            {% endif %}
+            {% if table.page.has_previous or table.page.has_next %}
+            {% block pagination.range %}
+            {% for p in table.page|table_page_range:table.paginator %}
+                <li>
+                    <a class="px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 {% if table.page.number == p %}bg-gray-200{% endif %}" {% if p != '...' %}href="{% querystring table.prefixed_page_field=p %}"{% endif %}>
+                        {{ p }}
+                    </a>
+                </li>
+            {% endfor %}
+            {% endblock pagination.range %}
+            {% endif %}
+            {% if table.page.has_next %}
+                {% block pagination.next %}
+                <li>
+                    <a href="{% querystring table.prefixed_page_field=table.page.next_page_number %}" class="px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
+                        {% trans 'next' %}
+                        <span aria-hidden="true">&raquo;</span>
+                    </a>
+                </li>
+                {% endblock pagination.next %}
+            {% endif %}
+            </ul>
+        </nav>
+        {% endif %}
+    {% endblock pagination %}
+</div>
+{% endblock table-wrapper %}
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/badges/badge_md.html b/commcare_connect/templates/tailwind/components/badges/badge_md.html
new file mode 100644
index 000000000..af43d83a8
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/badges/badge_md.html
@@ -0,0 +1,5 @@
+<span
+  class="badge inline-block py-1 px-4 mx-1 text-nowrap rounded-3xl text-xs bg-{{ bg_color|default:'[#f1f5f9]' }} text-{{text_color|default:'white' }}"
+>
+  {{ text }}
+</span>
diff --git a/commcare_connect/templates/tailwind/components/badges/badge_sm.html b/commcare_connect/templates/tailwind/components/badges/badge_sm.html
new file mode 100644
index 000000000..f9cfe2233
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/badges/badge_sm.html
@@ -0,0 +1,5 @@
+<span
+  class="badge inline-block py-0.5 px-2 mx-1 text-nowrap rounded-3xl text-xs bg-{{ bg_color|default:'[#f1f5f9]' }} text-{{ text_color|default:'deep-purple' }}"
+>
+  {{ text }}
+</span>
diff --git a/commcare_connect/templates/tailwind/components/badges/badge_sm_dropdown.html b/commcare_connect/templates/tailwind/components/badges/badge_sm_dropdown.html
new file mode 100644
index 000000000..946d82f58
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/badges/badge_sm_dropdown.html
@@ -0,0 +1,73 @@
+{% comment %} {% load static %} {% endcomment %}
+
+<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 < 200 && badgeRect.top > 200;
+      
+      // Position calculation
+      let top = shouldShowAbove 
+        ? badgeRect.top + window.scrollY - 200
+        : badgeRect.bottom + window.scrollY;
+      
+      // 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="{
+    'bg-[#16006d] text-white': open,
+    'bg-[#f1f5f9] text-[#16006d]': !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;"
+  >
+    <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 %}
+    </div>
+  </div>
+</span>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/breadcrumbs/breadcrumbs_row.html b/commcare_connect/templates/tailwind/components/breadcrumbs/breadcrumbs_row.html
new file mode 100644
index 000000000..64aadfbd7
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/breadcrumbs/breadcrumbs_row.html
@@ -0,0 +1,11 @@
+<div class="flex items-center h-4 gap-2 pl-0 text-sm text-gray-600">
+    <a href="#" class="breadcrumb-link">Program</a>
+   <i class="text-gray-400 fa-solid fa-angle-right"></i>
+   <a href="#" class="breadcrumb-link">Opportunities</a>
+   <i class="text-gray-400 fa-solid fa-angle-right"></i>
+   <a href="#" class="breadcrumb-link">Opportunity Name</a>
+   <i class="text-gray-400 fa-solid fa-angle-right"></i>
+   <span class="breadcrumb-active">Worker</span>
+</div>
+
+ 
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_cancel.html b/commcare_connect/templates/tailwind/components/buttons/button_cancel.html
new file mode 100644
index 000000000..e673864d3
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_cancel.html
@@ -0,0 +1 @@
+<button class="bg-slate-50 border border-border-light text-brand-deep-purple px-8 py-2 rounded-lg transition">Cancel</button>
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_disabled.html b/commcare_connect/templates/tailwind/components/buttons/button_disabled.html
new file mode 100644
index 000000000..192b5bc78
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_disabled.html
@@ -0,0 +1,6 @@
+<button
+  disabled
+  type="button"
+  class="py-3 px-8 rounded-lg min-w-25 font-medium text-sm text-gray-300 bg-gray-100">
+  <span class="relative z-10">{{ text }}</span>
+</button>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_icon.html b/commcare_connect/templates/tailwind/components/buttons/button_icon.html
new file mode 100644
index 000000000..c73cf2f6e
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_icon.html
@@ -0,0 +1,6 @@
+<button 
+    class="aspect-square rounded-full w-10 h-10 {{ btn_style|default:"" }} hover:bg-gray-100" 
+    @click="$dispatch('button-clicked')"
+>
+    <i class="fa-light fa-{{ icon }} text-{{ icon_color }}"></i>
+</button>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_primary.html b/commcare_connect/templates/tailwind/components/buttons/button_primary.html
new file mode 100644
index 000000000..ad1047af2
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_primary.html
@@ -0,0 +1,5 @@
+<button
+  type="button"
+  class="py-3 px-8 rounded-lg min-w-25 font-medium text-sm text-white bg-brand-indigo relative overflow-hidden before:content-[''] before:absolute before:top-0 before:left-0 before:w-0 before:h-full before:bg-brand-deep-purple before:transition-all before:duration-300 before:ease-in-out before:z-0 hover:before:w-full">
+  <span class="relative z-10">{{ text }}</span>
+</button>
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_primary_sm.html b/commcare_connect/templates/tailwind/components/buttons/button_primary_sm.html
new file mode 100644
index 000000000..15c21bd00
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_primary_sm.html
@@ -0,0 +1,6 @@
+<button
+  type="button"
+  class="py-1 px-4 rounded-lg min-w-25 h-8 font-medium text-sm text-white bg-brand-indigo relative overflow-hidden before:content-[''] before:absolute before:top-0 before:left-0 before:w-0 before:h-full before:bg-[#16006D] before:transition-all before:duration-300 before:ease-in-out before:z-0 hover:before:w-full"
+>
+  <span class="relative z-10">{{ text }}</span>
+</button>
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_primary_sm_disabled.html b/commcare_connect/templates/tailwind/components/buttons/button_primary_sm_disabled.html
new file mode 100644
index 000000000..d9b01176d
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_primary_sm_disabled.html
@@ -0,0 +1,3 @@
+<button type="button" class="py-1 px-4 rounded-lg min-w-25 h-10 font-medium text-sm text-[14px] text-[#CBD5E1] bg-[#F1F5F9]" disabled>
+  {{ text }}
+</button>
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_secondary.html b/commcare_connect/templates/tailwind/components/buttons/button_secondary.html
new file mode 100644
index 000000000..3c400b088
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_secondary.html
@@ -0,0 +1,6 @@
+<button
+  type="button"
+  @click="$dispatch('button-clicked')"
+  class="py-3 px-8 min-w-25 font-medium text-sm text-brand-deep-purple border border-gray-300 rounded-lg flex items-center gap-2 hover:bg-brand-indigo-100">
+  <span class="relative z-10">{{ text }}</span> 
+</button> 
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_secondary_rounded.html b/commcare_connect/templates/tailwind/components/buttons/button_secondary_rounded.html
new file mode 100644
index 000000000..5256aca63
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_secondary_rounded.html
@@ -0,0 +1,4 @@
+<button class="flex items-center h-10 gap-4 px-4 py-2 border rounded-full" @click="$dispatch('button-clicked')">
+  <p class="text-xl font-normal text-slate-900">{{ text }}</p>
+  <i class="fa-regular fa-arrow-right text-brand-indigo"></i>
+</button>
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_secondary_sm.html b/commcare_connect/templates/tailwind/components/buttons/button_secondary_sm.html
new file mode 100644
index 000000000..3501f6b4e
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_secondary_sm.html
@@ -0,0 +1,6 @@
+<button
+  type="button"
+  @click="$dispatch('button-clicked')"
+  class="py-1 px-4 min-w-25 h-8 font-medium text-sm text-brand-deep-purple border border-gray-300 rounded-lg flex items-center gap-2 hover:bg-brand-indigo-100">
+  <span class="relative z-10">{{ text }}</span>
+</button>
diff --git a/commcare_connect/templates/tailwind/components/buttons/button_text.html b/commcare_connect/templates/tailwind/components/buttons/button_text.html
new file mode 100644
index 000000000..7ef20002c
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/button_text.html
@@ -0,0 +1,4 @@
+<button class="bg-slate-50 text-brand-deep-purple rounded-lg transition flex gap-2 items-center">
+    <span>{{text}}</span> 
+    <i class="fa-light fa-chevron-down text-gray-400 text-xs"></i>
+</button>
diff --git a/commcare_connect/templates/tailwind/components/buttons/danger.html b/commcare_connect/templates/tailwind/components/buttons/danger.html
new file mode 100644
index 000000000..e9f302151
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/danger.html
@@ -0,0 +1,3 @@
+<button class="bg-brand-sunset hover:text-white border text-white px-8 py-2 rounded-lg transition">
+    {{text|default:"Submit"}}
+</button>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/buttons/success.html b/commcare_connect/templates/tailwind/components/buttons/success.html
new file mode 100644
index 000000000..94d947631
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/buttons/success.html
@@ -0,0 +1,3 @@
+<button class="bg-green-600 hover:text-white border text-white px-8 py-2 rounded-lg transition">
+    {{text|default:"Submit"}}
+</button>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/cards/activity_card.html b/commcare_connect/templates/tailwind/components/cards/activity_card.html
new file mode 100644
index 000000000..72a61e417
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/activity_card.html
@@ -0,0 +1,26 @@
+{% load static i18n %}
+<div class="activity-comp flex flex-col p-6 rounded-lg bg-white gap-5">
+    <div class="flex gap-4 items-center">
+        <i class="fa-light {{ icon }}"></i>
+        <p class="text-base">
+            {{ title }}
+        </p>
+    </div>
+    {% for row in rows %}
+    <div class="flex justify-between">
+        <div>
+            <p class="font-medium text-gray-900">
+                <a href="{% url 'opportunity:tw_opportunities' org_slug=request.org.slug opp_id=row.opportunity__id %}" class="hover:underline">
+                    {{ row.opportunity__name }}
+                </a>
+            </p>
+            <p class="font-normal text-xs text-gray-400">{{ row.opportunity__name }}</p>
+        </div>
+        {% include 'tailwind/components/buttons/button_secondary_rounded.html' with text=row.count %}
+
+    </div>
+    {% endfor %}
+    <div class="flex justify-end">
+        {% include 'tailwind/components/buttons/button_text.html' with text='more' %}
+    </div>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/cards/approval_card.html b/commcare_connect/templates/tailwind/components/cards/approval_card.html
new file mode 100644
index 000000000..67aab4670
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/approval_card.html
@@ -0,0 +1,24 @@
+<div class="bg-white shadow-sm p-4 rounded-lg flex flex-col gap-4 w-[80%] h-[42%]">
+  <div class="flex justify-between items-center text-gray-400 text-sm">
+    <h3 class="text-base font-medium text-brand-deep-purple">Reason for Approval</h3>
+  </div>
+  <div class="flex items-center justify-between">
+    <p class="text-black text-sm font-normal">48 items has been marked for approval Provide a justification for approving flagged visits</p>
+  </div>
+  <div class="relative">
+    <i class="fa-light fa-thumbs-up absolute left-3 top-1/2 transform -translate-y-1/2 text-sm"></i>
+    <input
+      type="text"
+      name="username"
+      placeholder="Reason"
+      class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder:text-sm"
+      hx-post="/update"
+      hx-trigger="keyup changed delay:300ms"
+      hx-target="#preview"
+      hx-swap="innerHTML"
+    />
+  </div>
+  <div class="flex justify-end gap-4 mt-2">
+    {% include "tailwind/components/buttons/button_cancel.html" %} {% include "tailwind/components/buttons/success.html" %}
+  </div>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/cards/card-toggle.html b/commcare_connect/templates/tailwind/components/cards/card-toggle.html
new file mode 100644
index 000000000..a160c5655
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/card-toggle.html
@@ -0,0 +1,13 @@
+<div 
+    class="w-full flex justify-between p-4 rounded-lg" 
+    :class="selected ? 'bg-gray-100' : 'bg-white'">
+    <div>
+        <spna class="font-medium text-gray-900 block">{{title}}</span>
+        <span class="text-xs text-gray-400 block font-normal">{{description}}</span>
+    </div>
+    <label class="relative inline-flex cursor-pointer items-center">
+        <input id="switch" type="checkbox" class="peer sr-only" />
+        <label for="switch" class="hidden"></label>
+        <div class="peer h-7 w-12 rounded-full border bg-slate-200 after:absolute after:left-1 after:top-1/4 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-green-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-green-300"></div>
+      </label> 
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/cards/card.html b/commcare_connect/templates/tailwind/components/cards/card.html
new file mode 100644
index 000000000..2127e289f
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/card.html
@@ -0,0 +1,19 @@
+<!-- card.html -->
+<div class="bg-white p-4 rounded-lg shadow-lg" 
+x-data="{ message: '' }" 
+@button-clicked="message = $event.detail.message; console.log('Button clicked')">
+    <div class="card-header mb-4">
+        <h3 class="text-lg font-semibold">{{ card.data.title }}</h3>
+        <p class="text-gray-600">{{ card.data.subtitle }}</p>
+    </div>
+
+    <div class="card-buttons space-x-2">
+        {% for button in card.data.buttons %}
+            {% if button.variant == 'button-primary' %}
+                {% include 'tailwind/components/buttons/button_primary.html' with text=button.text size=button.size %}
+            {% elif button.variant == 'button-secondary' %}
+                {% include 'tailwind/components/buttons/button_secondary.html' with text=button.text size=button.size icon=button.icon %}
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/cards/filter_card.html b/commcare_connect/templates/tailwind/components/cards/filter_card.html
new file mode 100644
index 000000000..a5707b645
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/filter_card.html
@@ -0,0 +1,53 @@
+<div class="bg-white shadow-sm p-4 rounded-lg flex flex-col gap-4 w-fit">
+  <div class="flex items-center text-gray-400 text-sm">
+    <h3 class="flex-1 text-base font-normal text-brand-deep-purple">Filter</h3>
+    <i class="fa-regular fa-bars-staggered text-black mr-6"></i>
+    <i class="fa-regular fa-xmark cursor-pointer"></i>
+  </div>
+  <div>
+    <span class="text-sm text-brand-deep-purple font-medium">Delivery Status Filters</span>
+  </div>
+  <div class="flex flex-row gap-4">
+    <div class="flex h-8 bg-neutral-100 w-fit rounded-full px-4 items-center justify-center">
+      <h3 class="text-sm font-normal text-brand-deep-purple">Overlimit</h3>
+    </div>
+    <div class="flex h-8 bg-neutral-100 w-fit rounded-full px-4 items-center justify-center">
+      <h3 class="text-sm font-normal text-brand-deep-purple">Duplicate</h3>
+    </div>
+  </div>
+  <div>
+    <span class="text-sm text-brand-deep-purple font-medium">Flags</span>
+  </div>
+  {% include "tailwind/components/cards/filter_flag_row.html" with flags=flags %}
+
+  <div class="flex flex-row mt-32">
+    <div class="flex items-center mb-4">
+      <input
+        id="default-checkbox"
+        type="checkbox"
+        value=""
+        hx-get="/checkbox-toggle"
+        class="w-4 h-4 border-gray-300 rounded-sm dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 checked:bg-transparent checked:border-transparent"
+      />
+    </div>
+    <p class="flex-1 text-xs font-normal text-brand-blue-light ml-2">
+      <span class="block">Select Filtered Pending Visits for</span>
+      Approval or Rejection
+    </p>
+    {% include "tailwind/components/buttons/button_primary.html" with text='Accept' %}
+  </div>
+
+  <script>
+    document.querySelectorAll('.toggle-icon').forEach((icon) => {
+      icon.addEventListener('click', function () {
+        const targetId = this.getAttribute('data-target')
+        const targetElement = document.getElementById(targetId)
+        if (targetElement) {
+          targetElement.classList.toggle('hidden')
+          this.classList.toggle('fa-angle-down')
+          this.classList.toggle('fa-angle-up')
+        }
+      })
+    })
+  </script>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/cards/filter_flag_row.html b/commcare_connect/templates/tailwind/components/cards/filter_flag_row.html
new file mode 100644
index 000000000..c8312ab69
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/filter_flag_row.html
@@ -0,0 +1,28 @@
+<div>
+  {% for flag in flags %}
+  <div class="flex flex-row pt-4 pb-2">
+    <div class="flex-1">
+      <h3 class="text-sm font-normal text-brand-deep-purple">{{ flag.title }}</h3>
+      <p class="text-xs font-normal text-brand-blue-light">{{ flag.desc }}</p>
+    </div>
+    <div>
+      <h3 class="text-xl font-normal text-brand-deep-purple ml-24 mr-4">{{ flag.value }}</h3>
+    </div>
+    {% if flag.title == "Location" or flag.title == "Form Duration" %}
+    <div class="flex flex-col items-end justify-end">
+      <label class="inline-flex items-center cursor-pointer">
+        <input type="checkbox" value="" class="sr-only peer" />
+        <div
+          class="relative w-11 h-6 bg-brand-border-light peer-focus:outline-none dark:peer-focus:indigo rounded-full peer dark:bg-brand-border-light peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-indigo dark:peer-checked:bg-brand-indigo"
+        ></div>
+      </label>
+      <i class="fa-light fa-angle-down cursor-pointer text-black mt-2 toggle-icon" data-target="{{ flag.title|slugify }}"></i>
+    </div>
+    {% endif %}
+  </div>
+  <div id="{{ flag.title|slugify }}" class="hidden p-10 text-sm text-gray-600"></div>
+
+  {% if flag.title != "GPS location" %}
+  <div class="border-t border-border-light w-full"></div>
+  {% endif %} {% endfor %}
+</div>
diff --git a/commcare_connect/templates/tailwind/components/cards/oppurtunity_card.html b/commcare_connect/templates/tailwind/components/cards/oppurtunity_card.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/commcare_connect/templates/tailwind/components/cards/program_card.html b/commcare_connect/templates/tailwind/components/cards/program_card.html
new file mode 100644
index 000000000..b78024d47
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/program_card.html
@@ -0,0 +1,58 @@
+<div class="program-comp flex flex-col p-6 rounded-xl shadow-sm bg-white gap-5 relative">
+  <div id="new-status" 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="flex items-center gap-2 font-normal">
+          <p class="text-xs text-gray-400 hidden">{{ date }}</p> 
+          <div class="h-2 w-2 bg-brand-marigold rounded-full"></div>
+          <p class="text-xs text-gray-400">{{ organization_name }}</p>
+      </div>
+      <div class="flex items-center justify-end gap-6">
+          {% if status == 'invited' %} 
+          {% include "tailwind/components/badges/badge_md.html" with text='invited' color='brand-deep-purple' bg_color='marigold' %} 
+          {% elif status == 'applied' %}
+          {% include "tailwind/components/buttons/button_icon.html" with style='h-5' icon='download' icon_color='gray-400' %}
+          {% include "tailwind/components/badges/badge_md.html" with text='applied' color='white' bg_color='brand-deep-purple'%} 
+          {% elif status == 'accepted' %}
+          {% include "tailwind/components/buttons/button_icon.html" with style='h-5' icon='download' icon_color='gray-400' %}
+          {% include "tailwind/components/badges/badge_md.html" with text='accepted' color='white' bg_color='green-600'%} 
+          {% endif %} 
+      </div>
+  </div>
+  <div>
+      <p class="font-medium text-lg text-brand-deep-purple">{{ name }}</p>
+      <p class="font-normal text-xs text-gray-600 w-2/4">{{ description }}</p>
+  </div>
+  <div class="flex justify-between items-center">
+       <div class="flex items-center gap-6">
+          <div>
+              <p class="font-normal text-xs text-gray-400">Delivery Type</p>
+              <p class="text-sm font-medium text-brand-deep-purple">{{ delievery_type }}</p>
+          </div>
+          <div class="line my-2 h-8 w-[2px] bg-gray-200"></div>
+          <div class="flex items-center gap-4">
+              <div> 
+                  <i class="fa-light fa-calendar-range h-5 text-blue-light"></i>
+              </div>
+              <div>
+                  <p class="font-normal text-xs text-gray-400">Start Date</p>
+                  <p class="text-sm font-medium text-brand-deep-purple">{{ start_date }}</p>
+              </div>
+              <i class="fa-light fa-arrow-right h-5 text-mango"></i> 
+              <div>
+                  <p class="font-normal text-xs text-gray-400">End Date</p>
+                  <p class="text-sm font-medium text-brand-deep-purple">{{ end_date }}</p>
+              </div> 
+          </div>
+          </div>
+      {% if status == 'invited' %}
+      {% include 'tailwind/components/buttons/button_primary.html' with text='Apply' %} 
+      {% elif status == 'applied' %}
+      {% include 'tailwind/components/buttons/button_disabled.html' with text='Apply' %}  
+      {% elif status == 'accepted' %} 
+      {% include 'tailwind/components/buttons/button_secondary.html' with text='View Opportunities' %}  
+      {% endif %}
+  </div>
+  {% if status == 'accepted' %}
+  <div id="opportunity-container" class="flex flex-col gap-y-4 py-4"></div>
+  {% endif %}
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/cards/rejection_card.html b/commcare_connect/templates/tailwind/components/cards/rejection_card.html
new file mode 100644
index 000000000..245b79dc5
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/rejection_card.html
@@ -0,0 +1,26 @@
+<div class="bg-white shadow-sm p-4 rounded-lg flex flex-col gap-4 w-[80%] h-[42%]">
+  <div class="flex justify-between items-center text-gray-400 text-sm">
+    <h3 class="text-base font-medium text-brand-deep-purple">Reason for Rejection</h3>
+  </div>
+  <div class="flex items-center justify-between">
+    <p class="text-black text-sm font-regular">
+      48 items has been marked for approval Provide a justification for approving flagged visits
+    </p>
+  </div>
+  <div class="relative">
+    <i class="fa-light fa-thumbs-down absolute left-3 top-1/2 transform -translate-y-1/2 text-sm"></i>
+    <input
+      type="text"
+      name="username"
+      placeholder="Reason"
+      class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder:text-sm"
+      hx-post="/update"
+      hx-trigger="keyup changed delay:300ms"
+      hx-target="#preview"
+      hx-swap="innerHTML"
+    />
+  </div>
+  <div class="flex justify-end gap-4 mt-2">
+    {% include "tailwind/components/buttons/button_cancel.html" %} {% include "tailwind/components/buttons/danger.html" %}
+  </div>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/cards/user_status_card.html b/commcare_connect/templates/tailwind/components/cards/user_status_card.html
new file mode 100644
index 000000000..8387f28aa
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/user_status_card.html
@@ -0,0 +1,22 @@
+<div class="bg-white shadow-sm p-4 rounded-lg flex flex-col gap-4 w-[25%] h-[25%]">
+  <div class="flex justify-between items-center text-gray-400 text-sm">
+    <h3 class="text-base font-medium text-brand-deep-purple">User Status Details</h3>
+    <i class="fa-regular fa-xmark cursor-pointer"></i>
+  </div>
+  <div class="flex items-center bg-brand-marigold bg-opacity-30 text-brand-deep-purple px-3 py-2 mt-2 rounded-lg border border-marigold">
+    <span class="flex-1 text-sm text-brand-marigold">User has yellow status</span>
+    {% include "tailwind/components/buttons/button_primary_sm.html" with text='Suspend' %}
+  </div>
+  <div>
+    <div class="flex items-center justify-between">
+      <p class="text-brand-deep-purple text-sm">Data Points</p>
+      <p class="text-brand-deep-purple text-sm">Score</p>
+    </div>
+    {% for row in rows %}
+    <div class="flex items-center justify-between mt-3">
+      <p class="text-slate-600 text-xs">{{ row.name }}</p>
+      <p class="text-slate-600 text-xs">45</p>
+    </div>
+    {% endfor %}
+  </div>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/cards/user_timeline_card.html b/commcare_connect/templates/tailwind/components/cards/user_timeline_card.html
new file mode 100644
index 000000000..bce167ab5
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/user_timeline_card.html
@@ -0,0 +1,45 @@
+<div class="bg-white shadow-sm rounded-lg flex flex-col w-[30%]">
+  <div class="flex items-center text-gray-400 text-sm p-4">
+    <i class="fa-solid fa-timeline text-brand-deep-purple cursor-pointer"></i>
+    <h3 class="flex-1 pl-4 text-base font-medium text-brand-deep-purple">User Journey Timeline</h3>
+    <i class="fa-regular fa-xmark cursor-pointer"></i>
+  </div>
+  <div class="p-4 pb-0">
+    {% for data in timeline %}
+    <div class="">
+      <div class="flex flex-row justify-between">
+        <span class="text-brand-indigo text-xs font-normal">{{data.date}}</span>
+        <div class="flex flex-col items-center">
+          <div class="w-2 h-2 rounded bg-brand-indigo"></div>
+          <div class="w-0.5 h-16 bg-brand-border-light"></div>
+        </div>
+        <div>
+          <h3 class="text-brand-deep-purple text-sm font-medium">{{data.title}}</h3>
+          <p class="text-brand-blue-light text-xs font-normal">{{data.desc}}</p>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+  <div class="flex h-12 bg-slate-500 bg-opacity-10 items-center p-4">
+    <h3 class="text-brand-deep-purple text-xs font-medium">March 2024</h3>
+  </div>
+
+  <div class="p-4 pb-0">
+    {% for data in timeline %}
+    <div class="">
+      <div class="flex flex-row justify-between">
+        <span class="text-brand-indigo text-xs font-normal">{{data.date}}</span>
+        <div class="flex flex-col items-center">
+          <div class="w-2 h-2 rounded bg-brand-indigo"></div>
+          <div class="w-0.5 h-16 bg-brand-border-light"></div>
+        </div>
+        <div>
+          <h3 class="text-brand-deep-purple text-sm font-medium">{{data.title}}</h3>
+          <p class="text-brand-blue-light text-xs font-normal">{{data.desc}}</p>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/cards/worker_page/worker_dashboard_card.html b/commcare_connect/templates/tailwind/components/cards/worker_page/worker_dashboard_card.html
new file mode 100644
index 000000000..b7c14ba25
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/cards/worker_page/worker_dashboard_card.html
@@ -0,0 +1,26 @@
+<!-- Worker Dashboard Card -->
+<div class="w-full h-full bg-white bg-opacity-10 text-white relative flex flex-col justify-between p-4 rounded-lg">
+    <div class="flex justify-between items-start">
+        <!-- Number Content -->
+        <div class="text-2xl">{{count|default:"128"}}</div>
+        <!-- Icon -->
+        <i class="fa-light fa-{{icon|default:"file"}}"></i>
+    </div>
+    <div class="pt-4 text-sm flex items-center justify-between">
+        <span>{{text|default:"Total Delieveries"}}</span>
+        {% if dropdown %}
+        <i class="fa-solid fa-caret-down ml-2 cursor-pointer" onclick="dashboardCartOpen()"></i>
+        {% endif %}
+    </div>
+    
+    {% if dropdown %}
+    <div id="dropdown-content" class="hidden absolute top-full mt-2 right-0 w-full rounded-md bg-white text-black shadow-lg p-2">
+        <ul>
+            <li class="p-1 cursor-pointer hover:bg-gray-200">Option 1</li>
+            <li class="p-1 cursor-pointer hover:bg-gray-200">Option 2</li>
+            <li class="p-1 cursor-pointer hover:bg-gray-200">Option 3</li>
+        </ul>
+    </div>
+    {% endif %}
+</div>
+ 
diff --git a/commcare_connect/templates/tailwind/components/create/details-form.html b/commcare_connect/templates/tailwind/components/create/details-form.html
new file mode 100644
index 000000000..2ed435513
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/create/details-form.html
@@ -0,0 +1,30 @@
+<div class="flex flex-col gap-4 py-8">
+    <h2>{{data.selected}}</h2>
+    <div id="opportunities-details" class="w-full rounded-lg shadow-sm bg-white p-6 grid grid-cols-2 gap-4">
+        <div class="col-span-2">
+            <h6 class="font-medium text-brand-deep-purple">Opportunity Details</h6>
+            <span class="text-sm text-gray-400">Add the details of the opportunity. All fields are mandatory.</span>
+        </div>
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/cards/card-toggle.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        
+    </div>
+    <div id="opportunity-apps" class="w-full rounded-lg shadow-sm bg-white p-6 grid grid-cols-2 gap-4">
+        <div class="col-span-2">
+            <h6 class="font-medium text-brand-deep-purple">Apps</h6>
+            <span class="text-sm text-gray-400">Add the details of the opportunity. All fields are mandatory.</span>
+        </div>
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+        {% include "tailwind/components/inputs/text-input.html" with title='Make this test opportunity' description='Test opportunities are hidden from users.' selected='True'  %}
+    </div>
+    <div class="bg-white rounded-lg shadow-sm flex justify-end p-2">
+        {% include "tailwind/components/buttons/button_primary.html" with text='Next' %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/inputs/text-input.html b/commcare_connect/templates/tailwind/components/inputs/text-input.html
new file mode 100644
index 000000000..2d641b428
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/inputs/text-input.html
@@ -0,0 +1,12 @@
+<div class="relative border h-12 rounded">
+    <i class="fa-light fa-code-merge"></i>
+    <input type="text" id="floating_outlined" class="p-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-1 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
+    <label for="floating_outlined" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">Floating outlined</label>
+</div>
+
+
+<div class="relative border h-12 rounded flex items-center">
+    <i class="fa-light fa-user w-12 text-center "></i>
+    <input type="text" id="floating_outlined" class="h-full w-full focus:outline-none focus:ring-0 appearance-none border-0" placeholder=" "/>
+    <!-- <label for="floating_outlined" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">Floating outlined</label> -->
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/activity.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/activity.html
new file mode 100644
index 000000000..2e06f0c08
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/activity.html
@@ -0,0 +1,17 @@
+<div
+  class="h-18 bg-brand-indigo flex flex-row rounded-lg p-2 px-4 items-center my-2 {% if data.type == '2' %} bg-brand-marigold bg-opacity-30 border border-marigold {% endif %}"
+>
+  <div class="w-10 h-10 flex flex-row items-center justify-center {% if data.type == '2' %} bg-brand-marigold{% endif %}">
+    <i class="fa-light {{icon}} text-white"></i>
+  </div>
+  <div class="ml-2 flex-1">
+    <h3 class="text-xs font-normal text-white opacity-60 {% if data.type == '2' %} !text-brand-marigold {% endif %}">{{name}}</h3>
+    <p class="text-brand-deep-purple text-sm font-medium text-white {% if data.type == '2' %} !text-brand-marigold{% endif %}">
+      {{status}}
+    </p>
+  </div>
+  <h3 class="text-2xl font-medium text-white {% if data.type == '2' %} !text-brand-marigold{% endif %}">{{value}}</h3>
+  {% if data.incr %} {% include "tailwind/components/badges/badge_sm.html" with text='+6 ↑' bg_color='green-600' text_color='white' %} {%
+  endif %}
+  <i class="fa-light fa-arrow-up-right text-brand-sky ml-3 {% if data.type == '2' %} !text-brand-marigold{% endif %}"></i>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/app.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/app.html
new file mode 100644
index 000000000..798b63996
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/app.html
@@ -0,0 +1,7 @@
+<div class="min-w-48 flex flex-row items-center justify-between px-4 h-10 bg-brand-indigo rounded">
+    <div class="flex items-center">
+        <i class="fa-light {{icon}} text-white text-sm"></i>
+        <h3 class="text-sm font-normal text-white flex-1 pl-2 whitespace-nowrap">{{title }}</h3>
+    </div>
+    <h3 class="text-sm font-medium text-white">{{count}}</h3>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/apps_list.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/apps_list.html
new file mode 100644
index 000000000..726ffe8a8
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/apps_list.html
@@ -0,0 +1,5 @@
+<div class="flex gap-4">
+    {% for app in data %}
+    {% include 'tailwind/components/opportunity-dashboard/app.html' with icon=app.icon title=app.name count='2'%}  
+    {% endfor %}
+</div>
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/arrow.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/arrow.html
new file mode 100644
index 000000000..9e82964e1
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/arrow.html
@@ -0,0 +1,4 @@
+<div class="relative w-32 h-0.5 bg-transparent border-dashed border-t-2 border-gray-400 my-6">
+    <!-- Left part of the open arrow -->
+    <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>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/detials.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/detials.html
new file mode 100644
index 000000000..937ee03f1
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/detials.html
@@ -0,0 +1,18 @@
+<div class="flex flex-col gap-8 w-full bg-brand-deep-purple rounded-lg p-4">
+    <div class="flex items-center">
+        <h3 class="text-sm font-medium text-brand-sky flex-1">Program Name</h3>
+        <i class="fa-light fa-bars text-white"></i>
+    </div>
+    <div class="flex justify-between items-end">
+        <div class="flex flex-col gap-2">
+            <h1 class="text-2xl font-medium text-white block">Opportunity Name</h3>
+            <p class="text-xs font-regular text-gray-100 w-6/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuni   ipsum dolor m ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuni </p>
+        </div>
+        <div class="flex mt-6">
+            {% include "tailwind/components/opportunity-dashboard/apps_list.html" with data=data %}
+        </div>
+    </div>
+    <div class="p-4 rounded-lg bg-black bg-opacity-20 w-full">
+        {% include "tailwind/components/opportunity-dashboard/info.html" with totalinfo=totalinfo %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/info.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/info.html
new file mode 100644
index 000000000..21f106a9b
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/info.html
@@ -0,0 +1,11 @@
+<div class="flex gap-2 w-full items-center justify-between">
+    {% for data in totalinfo %}
+    <div class="flex gap-2 items-start"> 
+        {% include 'tailwind/components/opportunity-dashboard/info_card.html' with icon=data.icon name=data.name count=data.count id=forloop.counter|stringformat:"s" %}  
+    </div>
+    {% if not forloop.last and forloop.counter != 2 %}
+    <div class="w-0.5 h-10 bg-white bg-opacity-30"></div>
+    {% endif %}
+    {% endfor %} 
+    <div class="">{% include 'tailwind/components/badges/badge_md.html' with text='active' bg_color='green-600' text_color='' %}</div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/info_card.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/info_card.html
new file mode 100644
index 000000000..8e8a29360
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/info_card.html
@@ -0,0 +1,7 @@
+<div class="flex gap-2 w-full">
+    <i class="fa-light {{icon}} text-brand-sky mt-1 {% if id == '3' %} !text-brand-mango {% endif %}"></i>
+    <div class="ml-3">
+        <h3 class="text-xs font-normal text-brand-sky">{{name }}</h3>
+        <p class="text-sm font-medium text-white">{{count }}</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress-breakdown.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress-breakdown.html
new file mode 100644
index 000000000..3e43987fd
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress-breakdown.html
@@ -0,0 +1,11 @@
+<div class="flex flex-col p-2  bg-indigo-50 rounded-xl w-full">
+    <h4 class="text-sm font-medium py-2">{{title}}</h4>
+    <div class="bg-white p-4 rounded-xl flex flex-col gap-4">
+        <!-- progressbar  1 -->
+        {% include 'tailwind/components/opportunity-dashboard/progress.html' with title='Total' value='70' progress='70' percentage='' visibility='hidden' %} 
+        <!-- progressbar  2 -->
+        {% include 'tailwind/components/opportunity-dashboard/progress.html' with title='Maximum' value='30' progress='30' percentage='' visibility='' %} 
+        <!-- progressbar  3 -->
+        {% include 'tailwind/components/opportunity-dashboard/progress.html' with title='Avg' value='14' progress='14' percentage='' visibility='' %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress-view.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress-view.html
new file mode 100644
index 000000000..e5b806292
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress-view.html
@@ -0,0 +1,5 @@
+<div class="flex gap-4 w-full justify-between p-4 rounded-b-xl bg-white"> 
+    {% include 'tailwind/components/opportunity-dashboard/progress-breakdown.html' with title='Daily Active Worker' data_a_title='maximum' data_a_value='50' %} 
+    {% include 'tailwind/components/opportunity-dashboard/progress-breakdown.html' with title='Daily Active Worker' data_a_title='maximum' data_a_value='50' %} 
+    {% include 'tailwind/components/opportunity-dashboard/progress-breakdown.html' with title='Daily Active Worker' data_a_title='maximum' data_a_value='50' %}
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress.html
new file mode 100644
index 000000000..33f024ed7
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/progress.html
@@ -0,0 +1,11 @@
+<div class="flex gap-8 w-full items-end rounded-lg">
+    <div class="flex flex-col gap-1 w-full">
+        <div class="flex gap-4 items-center">
+            <span class="text-sm block">{{title}}</span> <span class="rounded-full px-3 py-0.5 bg-indigo-100 text-brand-indigo text-xs {{visibility}}">{{precentage}}</span>
+        </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}}%"></div>
+        </div>
+    </div>
+    <span class="text-lg">{{value}}</span> 
+</div>  
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers-funnelview.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers-funnelview.html
new file mode 100644
index 000000000..1381d0c30
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers-funnelview.html
@@ -0,0 +1,12 @@
+<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">
+        {% include 'tailwind/components/opportunity-dashboard/workers-stage.html' with text="Invited" icon="envelope" count="25" %}
+        {% include 'tailwind/components/opportunity-dashboard/workers-stage.html' with text="Accepted" icon="circle-check" count="25" %}
+        {% include 'tailwind/components/opportunity-dashboard/workers-stage.html' with text="Started Learning" icon="book-open-cover" count="25" %}
+        {% include 'tailwind/components/opportunity-dashboard/workers-stage.html' with text="Completed Learning" icon="book-blank" count="25" %}
+        {% include 'tailwind/components/opportunity-dashboard/workers-stage.html' with text="Complted Assesment" icon="award-simple" count="25" %}
+        {% include 'tailwind/components/opportunity-dashboard/workers-stage.html' with text="Claimed Job" icon="user-check" count="25" %}
+        {% include 'tailwind/components/opportunity-dashboard/workers-stage.html' with text="Started Delivery" icon="house-chimney-user" count="25" visibility='hidden' %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers-stage.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers-stage.html
new file mode 100644
index 000000000..a942ca68b
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers-stage.html
@@ -0,0 +1,12 @@
+<div class="flex flex-col gap-2"> 
+    <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-light fa-{{ icon }}"></i>
+    </div> 
+    <div class="{{visibility}}">
+        {% include 'tailwind/components/opportunity-dashboard/arrow.html' %}
+    </div>
+   </div>
+    <p class="text-xl font-semibold text-brand-deep-purple">{{ count }}</p>
+    <p class="text-xs font-normal text-gray-500 whitespace-nowrap">{{ text }}</p>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers_activity.html b/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers_activity.html
new file mode 100644
index 000000000..452cc54ff
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-dashboard/workers_activity.html
@@ -0,0 +1,28 @@
+<div class="flex flex-row flex-wrap gap-4 p-4 rounded-t-lg bg-white">
+    {% for op in opList %}
+    <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">{{op.opName}}</h3>
+            <p class="text-brand-deep-purple text-xs font-medium"><span class="font-normal">{{op.opLabel}}</span> {{op.opValue}}</p>
+        </div>
+        {% for data in op.ops %}
+            <div class="bg-brand-indigo flex gap-2 rounded-lg p-4 items-center {% if data.type == '2' %} bg-brand-marigold bg-opacity-30 border border-marigold {% endif %}">
+                <div class="w-10 h-10 flex flex-row items-center justify-center text-white {% if data.type == '2' %} !bg-brand-marigold{% endif %} rounded-md">
+                    <i class="fa-light {{data.icon}} "></i>
+                </div>
+                <div class="flex-1">
+                    <h3 class="text-xs text-white opacity-60 {% if data.type == '2' %} !text-brand-marigold {% endif %}">{{data.name}}</h3>
+                    <p class="text-sm text-white {% if data.type == '2' %} !text-brand-marigold{% endif %}">{{data.status}}</p>
+                </div>
+                <h3 class="text-2xl font-medium text-white {% if data.type == '2' %} !text-brand-marigold{% endif %}">{{data.value}}</h3>
+                {% if data.incr %} 
+                {% include "tailwind/components/badges/badge_sm.html" with text='+6 ↑' bg_color='green-600' text_color='white' %} 
+                {% endif %}
+                <div>
+                    <i class="fa-light fa-arrow-up-right text-brand-sky text-lg {% if data.type == '2' %} !text-brand-marigold{% endif %}"></i>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+{% endfor %}
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-visits/opportunity_footer.html b/commcare_connect/templates/tailwind/components/opportunity-visits/opportunity_footer.html
new file mode 100644
index 000000000..a8fa03848
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-visits/opportunity_footer.html
@@ -0,0 +1,40 @@
+<div class="w-full flex items-center bg-white rounded-lg shadow-sm px-2 py-2">
+    {# Navigation Buttons #}
+    <div class="flex items-center space-x-4">
+        <button aria-label="Rotate Left">
+            <i class="fa-light fa-arrow-rotate-left text-lg"></i>
+        </button>
+        <button aria-label="Rotate Right">
+            <i class="fa-light fa-arrow-rotate-right text-lg"></i>
+        </button>
+    </div>
+
+    {# Pagination Controls #}
+    <div class="flex items-center space-x-4 ml-6">
+        {# Rows per Page Selector #}
+        <label class="flex items-center border border-gray-300 rounded-full px-4 py-1">
+            <span class="mr-2">Rows per page</span>
+            <select class="bg-transparent outline-none text-sm">
+                <option>12</option>
+                <option>24</option>
+                <option>36</option>
+            </select>
+        </label>
+
+        {# Page Navigation #}
+        <button aria-label="Previous Page">
+            <i class="fa-light fa-chevron-left text-lg"></i>
+        </button>
+        <input type="text" class="border border-gray-300 rounded-sm p-1 w-10 text-center" value="10">
+        <span class="text-sm">of 12</span>
+        <button aria-label="Next Page">
+            <i class="fa-light fa-chevron-right text-lg"></i>
+        </button>
+    </div>
+
+    {# Action Buttons #}
+    <div class="flex items-center ml-auto gap-4">
+        {% include "tailwind/components/buttons/button_secondary.html" with text="Reset" %}
+        {% include "tailwind/components/buttons/button_primary.html" with text="Update" %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/opportunity-visits/table_header.html b/commcare_connect/templates/tailwind/components/opportunity-visits/table_header.html
new file mode 100644
index 000000000..d235decdf
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/opportunity-visits/table_header.html
@@ -0,0 +1,10 @@
+<div class="bg-brand-border-light rounded-lg shadow-sm ">
+    <div class="grid grid-cols-[34px_222px_213px_168px_172px_151px] text-brand-deep-purple px-5  font-medium py-4 items-center text-sm">
+        <div>#</div>
+        <div>User ID</div>
+        <div>Name</div>
+        <div>Max Visit</div>
+        <div>Used Visits</div>
+        <div>End Date</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/sidenav-items.html b/commcare_connect/templates/tailwind/components/sidenav-items.html
new file mode 100644
index 000000000..24e36b281
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/sidenav-items.html
@@ -0,0 +1,10 @@
+<div class="relative p-3 rounded-lg group hover:bg-brand-sunset-light" :class="{{state}} ? 'w-full' : 'w-10'">
+    <a href={{target}} class="flex items-center justify-start">
+        <i class="fa-light fa-{{icon}}"></i>
+        <span x-show="{{state}}" x-cloak class="ml-4 text-xs">{{name}}</span>
+    </a>
+    {% if name == 'Dashboard' %}
+    <div class="absolute right-0 block w-1 rounded-lg top-1/4 h-1/2 bg-brand-mango"></div>
+    {% endif %}
+    <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">{{name}}</div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/tables/table.html b/commcare_connect/templates/tailwind/components/tables/table.html
new file mode 100644
index 000000000..601475761
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/tables/table.html
@@ -0,0 +1,24 @@
+<table>
+    <thead>
+      <tr>
+        <th>Month</th>
+        <th>Savings</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>January</td>
+        <td>$100</td>
+      </tr>
+      <tr>
+        <td>February</td>
+        <td>$80</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td>Sum</td>
+        <td>$180</td>
+      </tr>
+    </tfoot>
+</table>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/tables/worker_flagged_table-backup.html b/commcare_connect/templates/tailwind/components/tables/worker_flagged_table-backup.html
new file mode 100644
index 000000000..e51d16490
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/tables/worker_flagged_table-backup.html
@@ -0,0 +1,141 @@
+{% comment %} <!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Your Page</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Alpine.js CDN -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  </head>
+  <body class="">
+    {% endcomment %}
+    <div
+      class="w-full"
+      x-data="{
+        table: {{ table|safe }},
+        selectedRows: [],
+        init() {
+            console.log('Table data:', this.table);
+        },
+        toggleRow(index) {
+            const rowIndex = this.selectedRows.indexOf(index);
+            if (rowIndex === -1) {
+                this.selectedRows.push(index);
+            } else {
+                this.selectedRows.splice(rowIndex, 1);
+            }
+            console.log('Selected rows:', this.selectedRows);
+        },
+        toggleAll() {
+            if (this.isAllSelected()) {
+                this.selectedRows = []; // Deselect all
+            } else {
+                // Select all - get all indices from the table
+                this.selectedRows = this.table.map(row => row.index);
+            }
+            console.log('Selected rows after toggleAll:', this.selectedRows);
+        },
+        isAllSelected() {
+            return this.table.length > 0 && this.selectedRows.length === this.table.length;
+        },
+        isRowSelected(index) {
+            return this.selectedRows.includes(index);
+        }
+    }"
+    >
+      <!-- Table -->
+      <table class="w-full max-w-full">
+        <!-- Table Header -->
+        <thead class="block mb-2">
+          <tr class="flex w-full justify-between items-center gap-x-4 p-3 bg-gray-200 rounded-lg">
+            <th class="flex justify-center text-sm font-medium text-brand-deep-purple w-12">
+              <i
+                x-on:click="toggleAll()"
+                :class="isAllSelected() ? 'fa-regular fa-square-check' : 'fa-regular fa-square'"
+                class="text-xl text-brand-deep-purple cursor-pointer"
+              ></i>
+            </th>
+            <th class="flex justify-start items-center text-sm font-medium text-brand-deep-purple w-28">Time</th>
+            <th class="flex justify-start items-center text-sm font-medium text-brand-deep-purple w-28">Entity Name</th>
+            <th class="flex justify-start items-center text-sm font-medium text-brand-deep-purple w-72">Flags</th>
+            <th class="flex justify-start items-center text-sm font-medium text-brand-deep-purple w-4"></th>
+          </tr>
+        </thead>
+
+        <!-- Table Body -->
+        <div class="overflow-auto rounded-lg w-full">
+          <tbody class="block w-full bg-gray-200 rounded-lg h-[400px] overflow-y-auto">
+            <div class="w-full h-fit">
+              {% if table %} {% for row in table %}
+              <tr
+                class="flex w-full justify-between gap-x-4 p-3 bg-white hover:bg-gray-100 relative transition-colors duration-300 group"
+                x-data="{ hovered: false }"
+                @mouseenter="hovered = true"
+                @mouseleave="hovered = false"
+              >
+                <td class="flex justify-center text-sm text-brand-deep-purple font-normal w-12">
+                  <span x-show="!hovered && !isRowSelected({{ row.index }})">{{ row.index }}</span>
+                  <i
+                    x-show="hovered || isRowSelected({{ row.index }})"
+                    :class="isRowSelected({{ row.index }}) ? 'fa-regular fa-square-check' : 'fa-regular fa-square'"
+                    class="text-brand-deep-purple cursor-pointer"
+                    x-on:click="hovered && toggleRow({{ row.index }})"
+                  ></i>
+                </td>
+                <td class="flex justify-start text-sm text-brand-deep-purple font-normal w-28">{{ row.time }}</td>
+                <td class="flex justify-start text-sm text-brand-deep-purple font-normal w-28">{{ row.entityName }}</td>
+                <td class="flex relative justify-start text-sm text-brand-deep-purple font-normal w-72">
+                  {% if row.flags and row.flags|length > 0 %} {% for flag in row.flags|slice:":2" %} {% include
+                  "tailwind/components/badges/badge_sm.html" with text=flag %} {% endfor %} {% if row.flags|length > 2 %} {% include
+                  "tailwind/components/badges/badge_sm_dropdown.html" with list=row.flags %} {% comment %} {% include
+                  "tailwind/components/badges/badge_sm.html" with text=row.flags.0 %} {% endcomment %} {% endif %} {% endif %}
+                </td>
+                <td class="text-sm text-brand-deep-purple font-normal w-4">
+                  <i class="fa-light fa-flag-swallowtail text-brand-deep-purple"></i>
+                </td>
+                <span
+                  class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-brand-mango rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-300"
+                ></span>
+              </tr>
+              {% endfor %} {% else %}
+              <tr>
+                <td colspan="5" class="p-3 text-center text-gray-800 text-sm">No data available</td>
+              </tr>
+              {% endif %}
+            </div>
+          </tbody>
+        </div>
+      </table>
+      <div class="table-footer flex bg-white items-center justify-between bg-slate-50 text-xs text-brand-deep-purple p-2 rounded-lg mt-2">
+        <div class="flex items-center space-x-4">
+          <button><i class="fa-solid fa-rotate-left"></i></button>
+          <button><i class="fa-solid fa-rotate-right"></i></button>
+          <button class="bg-indigo-700 p-2 rounded-lg"><i class="fa-solid fa-map"></i></button>
+          <button><i class="fa-solid fa-table"></i></button>
+        </div>
+        <div>
+          <button class="border border-gray-300 rounded-full px-4 py-1">Flags 9 <i class="fa-solid fa-chevron-down"></i></button>
+        </div>
+        <div class="flex items-center space-x-2">
+          <div class="flex items-center border border-gray-300 rounded-full px-4 py-1">
+            <span>Rows per page</span>
+            <select>
+              <option>12</option>
+              <option>24</option>
+              <option>36</option>
+            </select>
+          </div>
+          <button><i class="fa-solid fa-chevron-left"></i></button>
+          <span>10</span>
+          <span>of 12</span>
+          <button><i class="fa-solid fa-chevron-right"></i></button>
+        </div>
+      </div>
+    </div>
+    {% comment %}
+  </body>
+</html>
+{% endcomment %}
diff --git a/commcare_connect/templates/tailwind/components/tables/worker_flagged_table.html b/commcare_connect/templates/tailwind/components/tables/worker_flagged_table.html
new file mode 100644
index 000000000..6563956d5
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/tables/worker_flagged_table.html
@@ -0,0 +1,79 @@
+<!-- templates/worker_flagged_table.html -->
+{% load render_table from django_tables2 %}
+
+<div
+  class="w-full"
+  x-data="{
+    selectedRows: [],
+    toggleRow(index) {
+        const rowIndex = this.selectedRows.indexOf(index);
+        if (rowIndex === -1) {
+            this.selectedRows.push(index);
+        } else {
+            this.selectedRows.splice(rowIndex, 1);
+        }
+    },
+    toggleAll() {
+        if (this.isAllSelected()) {
+            this.selectedRows = [];
+        } else {
+            // Get all row indices from the table data
+            this.selectedRows = [
+                {% for row in table.rows %}
+                    {{ row.record.index }}{% if not forloop.last %},{% endif %}
+                {% endfor %}
+            ];
+        }
+    },
+    isAllSelected() {
+        return {{ table.rows|length }} > 0 && this.selectedRows.length === {{ table.rows|length }};
+    },
+    isRowSelected(index) {
+        return this.selectedRows.includes(index);
+    }
+}"
+>
+      <div class="w-full max-w-full">
+        <div class="flex flex-col gap-1">
+          <div class="flex w-full justify-between items-center gap-x-4 p-3 bg-gray-200 rounded-lg mb-2">
+            <span class="flex justify-center text-sm font-medium text-brand-deep-purple w-12">
+              <i
+                x-on:click="toggleAll()"
+                :class="isAllSelected() ? 'fa-regular fa-square-check' : 'fa-regular fa-square'"
+                class="text-xl text-brand-deep-purple cursor-pointer"
+              ></i>
+            </span>
+            <span class="flex justify-start items-center text-sm font-medium text-brand-deep-purple w-28">Time</span>
+            <span class="flex justify-start items-center text-sm font-medium text-brand-deep-purple w-28">Entity Name</span>
+            <span class="flex justify-start items-center text-sm font-medium text-brand-deep-purple w-72">Flags</span>
+            <span class="flex justify-start items-center text-sm font-medium text-brand-deep-purple w-4"></span>
+          </tr>
+        </div>
+        <div class="overflow-auto rounded-lg w-full">{% render_table table %}</div>
+      </table>
+    </div>
+    <div class="flex bg-white shadow-sm items-center justify-between text-brand-deep-purple px-4 rounded-lg h-14">
+      <div class="flex items-center space-x-4">
+        <button><i class="fa-light fa-arrow-rotate-left"></i></button>
+        <button><i class="fa-light fa-arrow-rotate-right"></i></button>
+        <button class="bg-indigo-700 p-2 rounded-lg"><i class="fa-solid fa-map"></i></button>
+        <button><i class="fa-solid fa-table"></i></button>
+      </div>
+      <div>
+        <button class="border border-gray-300 rounded-full px-4 py-1">Flags 9 <i class="fa-solid fa-chevron-down"></i></button>
+      </div>
+      <div class="flex items-center space-x-2">
+        <div class="flex items-center border border-gray-300 rounded-full px-4 py-1">
+          <span>Rows per page</span>
+          <select>
+            <option>12</option>
+            <option>24</option>
+            <option>36</option>
+          </select>
+        </div>
+        <button><i class="fa-solid fa-chevron-left"></i></button>
+        <span>10</span>
+        <span>of 12</span>
+        <button><i class="fa-solid fa-chevron-right"></i></button>
+      </div>
+    </div>
diff --git a/commcare_connect/templates/tailwind/components/tabs/tabs.html b/commcare_connect/templates/tailwind/components/tabs/tabs.html
new file mode 100644
index 000000000..37bfa43c3
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/tabs/tabs.html
@@ -0,0 +1,2 @@
+{% include "tailwind/components/tabs/tabs_header.html" with tabs=tabs %}
+<div id="flagged-worker-table-container" class="relative overflow-auto"></div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/tabs/tabs_header.html b/commcare_connect/templates/tailwind/components/tabs/tabs_header.html
new file mode 100644
index 000000000..40da347e4
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/tabs/tabs_header.html
@@ -0,0 +1,27 @@
+<div x-data="{ activeTab: 0 }" class="h-14 flex gap-x-4 bg-white text-gray-400 rounded-lg shadow-sm px-4 mb-2 w-full items-center">
+  {% for tab in tabs %}
+  <div
+    class="relative cursor-pointer text-sm h-full flex items-center"
+    :class="{'text-brand-deep-purple font-medium': activeTab === {{ forloop.counter0 }} }"
+    @click="activeTab = {{ forloop.counter0 }}"
+    hx-get="{{tab.url}}"
+    hx-target="#flagged-worker-table-container"
+    hx-swap="innerHTML"
+    hx-trigger="click, load"
+  >
+    <span>{{ tab.name }}</span>
+    <span x-show="activeTab === {{ forloop.counter0 }}" class="ml-1">({{ tab.count }})</span>
+    <div
+      x-cloak
+      class="absolute bottom-0 left-1/2 -translate-x-1/2 w-10 h-1.5 bg-brand-mango rounded-t-lg"
+      x-show="activeTab === {{ forloop.counter0 }}"
+      x-transition:enter="transition ease-out duration-200"
+      x-transition:enter-start="opacity-0 translate-y-1"
+      x-transition:enter-end="opacity-100 translate-y-0"
+      x-transition:leave="transition ease-in duration-150"
+      x-transition:leave-start="opacity-100 translate-y-0"
+      x-transition:leave-end="opacity-0 translate-y-1"
+    ></div>
+</div>
+  {% endfor %}
+</div>
diff --git a/commcare_connect/templates/tailwind/components/text-input/drop_down.html b/commcare_connect/templates/tailwind/components/text-input/drop_down.html
new file mode 100644
index 000000000..25a135b4c
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/text-input/drop_down.html
@@ -0,0 +1,79 @@
+<!-- 
+ Required Params:
+ {{icon}}
+ {{options}}
+ {{input_id}}
+ {{label}}
+-->
+<div class="max-w-md min-w-[300px] mx-auto p-6">
+    <div x-data="{
+      open: false,
+      selectedOption: '',
+      leftIcon: '{{icon}}', 
+      dropdownOptions: {{options}},
+      get shouldLabelFloat() {
+        return this.selectedOption || this.open;
+      }
+    }">
+      <!-- Text field with dropdown -->
+      <div class="textfield-wrapper relative w-full">
+        <div class="relative">
+          <!-- Fixed left icon -->
+          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-black">
+            <i :class="leftIcon"></i>
+          </div>
+          
+          <input 
+            type="text" 
+            id="{{input_id}}"             
+            placeholder=""
+            class="peer w-full px-3 py-2.5 border border-brand-border-light focus:outline-none focus:border-brand-border-light hover:border-brand-border-light text-brand-blue-light bg-white rounded-md outline-none transition-colors duration-200"
+            :class="{'pl-10': leftIcon, 'pr-10': true}"
+            readonly
+            @click="open = !open"
+            x-model="selectedOption"
+            @keydown.escape="open = false"
+          />
+          
+          <label for="{{input_id}}" class="absolute left-1 top-0 text-xs transition-all duration-200 origin-[0%] -translate-y-1/2 bg-white px-1 pointer-events-none text-brand-blue-light"
+            :class="{
+              'left-10': leftIcon,
+              'top-0 text-xs translate-x-[-60%]': shouldLabelFloat,
+              'top-1/2': !shouldLabelFloat
+            }">
+            <span>{{label}}</span>
+          </label>
+          
+          <!-- Dropdown toggle button -->
+          <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-500 focus:outline-none">
+            <i class="fas fa-chevron-down transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
+          </div>
+        </div>
+  
+        <!-- Dropdown menu -->
+        <div 
+          x-show="open"
+          x-cloak
+          @click.outside="open = false"
+          x-transition:enter="transition ease-out duration-100"
+          x-transition:enter-start="transform opacity-0 scale-95"
+          x-transition:enter-end="transform opacity-100 scale-100"
+          x-transition:leave="transition ease-in duration-75"
+          x-transition:leave-start="transform opacity-100 scale-100"
+          x-transition:leave-end="transform opacity-0 scale-95"
+          class="absolute z-10 w-full mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
+          <div class="py-1">
+            <template x-for="option in dropdownOptions" :key="option">
+              <span
+                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" 
+                @click.prevent="selectedOption = option; open = false"
+              >
+                <span x-text="option"></span>
+              </span>              
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/text-input/outlined_textfield.html b/commcare_connect/templates/tailwind/components/text-input/outlined_textfield.html
new file mode 100644
index 000000000..9bea32ae3
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/text-input/outlined_textfield.html
@@ -0,0 +1,49 @@
+<!-- 
+Required Parameters:
+{{icon}}
+{{input_id}}
+{{input_name}}
+{{label}}
+-->
+<div class="max-w-md min-w-[300px] mx-auto p-6">
+    <div x-data="{
+      leftIcon: '{{icon}}', 
+      selectedOption: '',
+      isFocused: false,
+      get shouldLabelFloat() {
+        return this.selectedOption || this.isFocused;
+      }
+    }">
+      <!-- Text field -->
+      <div class="textfield-wrapper relative w-full">
+        <div class="relative">
+          <!-- Fixed left icon -->
+          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-black">
+            <i :class="leftIcon"></i>
+          </div>
+          
+          <input 
+            type="text" 
+            id="{{input_id}}" 
+            name="{{input_name}}"            
+            placeholder=""
+            class="peer w-full px-3 py-2.5 border border-brand-border-light focus:outline-none focus:border-brand-border-light hover:border-brand-border-light text-brand-blue-light bg-white rounded-md outline-none transition-colors duration-200"
+            :class="{'pl-10': leftIcon, 'pr-10': true}"
+            x-model="selectedOption"
+            @focus="isFocused = true"
+            @blur="isFocused = false"
+            @keydown.escape="isFocused = false"
+          />
+          
+          <label for="{{input_id}}" class="absolute left-1 top-0 text-xs transition-all duration-200 origin-[0%] -translate-y-1/2 bg-white px-1 pointer-events-none text-brand-blue-light"
+            :class="{
+              'left-10': leftIcon,
+              'top-0 text-xs translate-x-[-50%] text-brand-blue-light': shouldLabelFloat,
+              'top-1/2 text-lg': !shouldLabelFloat
+            }">
+            <span class="text-brand-blue-light">{{label}}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/components/worker_page/detail_panel.html b/commcare_connect/templates/tailwind/components/worker_page/detail_panel.html
new file mode 100644
index 000000000..7dab10db3
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/worker_page/detail_panel.html
@@ -0,0 +1,192 @@
+<div
+  x-data="{
+  slideIndex: 1,
+  slides: [
+      { src: '../static/images/checkup.webp', alt: 'Checkup Image 1' },
+      { src: '../static/images/checkup.jpg', alt: 'Checkup Image 2' },
+      { src: '../static/images/checkup.webp', alt: 'Checkup Image 3' },
+      { src: '../static/images/checkup.jpg', alt: 'Checkup Image 4' },
+      { src: '../static/images/checkup.webp', alt: 'Checkup Image 5' },
+      { src: '../static/images/checkup.jpg', alt: 'Checkup Image 6' }
+  ],
+  popupOpen: false,
+  popupImageSrc: '',
+  messages: [{ expanded: false }],
+  visibleSlides: 3,
+  showDivs(n) {
+      if (n > this.slides.length - this.visibleSlides + 1) this.slideIndex = 1;
+      if (n < 1) this.slideIndex = this.slides.length - this.visibleSlides + 1;
+  },
+  plusDivs(n) {
+      this.showDivs(this.slideIndex += n);
+      if (this.popupOpen) {
+          this.popupImageSrc = this.slides[this.slideIndex - 1].src;
+      }
+  },
+  openPopup(src) {
+      this.popupImageSrc = src;
+      this.popupOpen = true;
+  },
+  closePopup(event) {
+      if (event.target === event.currentTarget || !event.target.closest('.popup-content')) {
+          this.popupOpen = false;
+      }
+  }
+}"
+>
+  <div class="px-4 rounded-lg bg-white h-14 shadow-sm flex items-center">
+    <p class="text-brand-deep-purple font-normal text-sm">Details</p>
+  </div>
+
+  <div class="p-3 rounded-xl border bg-white mt-2 overflow-y-auto h-[452px]">
+    <!-- Message Section -->
+    <template x-for="(message, index) in messages" :key="index">
+      <div class="border border-border-light bg-slate-50 px-4 py-3 rounded-md mt-1 mb-3">
+        <div class="flex items-center gap-4">
+          <i class="fa-light fa-message-lines text-brand-deep-purple text-lg"></i>
+          <div class="flex items-center gap-1">
+            <span class="text-brand-blue-light text-xs">06 May, 2024</span>
+            <span class="flex items-center text-xs text-brand-blue-light">
+              <span class="text-brand-indigo text-2xl mr-1">•</span>
+              Program Manager Organization Names
+            </span>
+          </div>
+        </div>
+        <div>
+          <div class="flex items-center gap-4 mt-2">
+            <i
+              class="fa-light fa-arrows-from-dotted-line text-lg text-brand-blue-light cursor-pointer"
+              @click="message.expanded = !message.expanded"
+            ></i>
+            <p class="text-brand-deep-purple text-xs">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor arcu ac ligula luctus venenatis.
+            </p>
+          </div>
+          <div class="flex items-center gap-4 mt-2" x-show="message.expanded" x-transition>
+            <div></div>
+            <div>
+              <div class="flex items-center gap-1 ml-4">
+                <span class="text-brand-blue-light text-xs">06 May, 2024</span>
+                <span class="flex items-center text-xs text-brand-blue-light">
+                  <span class="text-brand-indigo text-2xl mr-1">•</span>
+                  Network Manager Organization Names
+                </span>
+              </div>
+              <p class="text-brand-deep-purple text-xs ml-5">
+                Lorems ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor arcu ac ligula luctus venenatis.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Media Section -->
+    <div class="flex justify-between">
+      <p class="text-brand-deep-purple font-medium text-sm">Media</p>
+      <div class="flex gap-2">
+        <div @click="plusDivs(-1)">
+          <i class="fa-light fa-arrow-left text-slate-500 cursor-pointer"></i>
+        </div>
+        <div @click="plusDivs(1)">
+          <i class="fa-light fa-arrow-right text-slate-500 cursor-pointer"></i>
+        </div>
+      </div>
+    </div>
+    <div class="values grid grid-cols-9 mt-4 gap-4 pb-5 border-b border-gray-200 cursor-pointer">
+      <template x-for="(slide, index) in slides" :key="index">
+        <img
+          :src="slide.src"
+          :alt="slide.alt"
+          class="imageopen object-cover rounded-2xl aspect-square col-span-3"
+          x-show="index + 1 >= slideIndex && index + 1 < slideIndex + visibleSlides"
+          @click="openPopup(slide.src)"
+        />
+      </template>
+    </div>
+
+    <!-- Verification Flags -->
+    <div class="pb-5 border-b border-gray-200">
+      <p class="text-brand-deep-purple font-medium text-sm mt-4">Verification flags</p>
+      <div class="flex gap-10 mt-3">
+        <div>
+          <div class="text-brand-blue-light text-sm">Location</div>
+          <div class="text-brand-deep-purple font-normal text-sm">Less than 2m</div>
+        </div>
+        <div>
+          <div class="text-brand-blue-light text-sm">Form Duration</div>
+          <div class="text-brand-deep-purple font-normal text-sm">4.6min</div>
+        </div>
+        <div>
+          <div class="text-brand-blue-light text-sm">Photos</div>
+          <div class="text-brand-deep-purple font-normal text-sm">Yes</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delivery Timestamp -->
+    <div class="mt-4 bg-slate-50 w-full rounded-lg p-4">
+      <div class="flex justify-between mb-20 items-center">
+        <p class="text-brand-deep-purple text-sm">Delivery Time-stamp</p>
+        <button class="text-sm font-medium bg-brand-indigo text-white px-2 py-1 rounded-2xl shadow-md hover:bg-blue-800 transition">
+          12 Jul, 2024
+        </button>
+      </div>
+    </div>
+
+    <!-- Map -->
+    <div class="mt-4">
+      <p class="text-brand-deep-purple font-medium text-sm mb-3">Map</p>
+      <div class="bg-slate-50 w-full rounded-lg p-4">
+        <p class="text-center mt-4 mb-20">map image</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Buttons -->
+  <div class="p-2 rounded-lg bg-white mt-2 flex justify-end gap-4 shadow-sm h-h-14">
+    <button class="text-brand-deep-purple px-8 py-2 rounded-lg border transition">Back</button>
+    <button class="bg-brand-indigo text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-800 transition">Accept</button>
+  </div>
+
+  <!-- Popup Modal -->
+  <div
+    x-cloak
+    class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"
+    x-show="popupOpen"
+    @click="closePopup($event)"
+    x-transition.opacity
+  >
+    <div class="bg-white rounded-lg overflow-y-auto relative p-4 max-w-lg popup-content">
+      <div class="flex justify-between mb-2">
+        <p class="text-brand-deep-purple font-medium text-sm">Media</p>
+        <div class="cursor-pointer" @click="closePopup($event)">
+          <i class="fa-light fa-xmark"></i>
+        </div>
+      </div>
+      <div class="relative inline-block">
+        <img :src="popupImageSrc" alt="Modal Image" class="w-full rounded-lg max-w-full h-1/2 object-contain" />
+        <a :href="popupImageSrc" download="downloaded-image.jpg" class="absolute bottom-2 right-2" aria-label="Download Image">
+          <i class="fa-light fa-download text-brand-deep-purple"></i>
+        </a>
+      </div>
+      <div class="values grid grid-cols-12 mt-4 gap-3 items-center border-b border-gray-200 w-full">
+        <div class="col-span-1 aspect-square flex justify-center items-center cursor-pointer" @click="plusDivs(-1)">
+          <i class="fa-light fa-arrow-left text-black text-lg"></i>
+        </div>
+        {% for slide in slides %}
+        <img
+          src="{{ slide.src }}"
+          alt="{{ slide.alt }}"
+          class="imageopen object-cover rounded-2xl aspect-square col-span-3"
+          x-show=" {{ forloop.counter }} >= slideIndex && {{ forloop.counter }} < slideIndex + visibleSlides"
+          @click="openPopup('{{ slide.src }}')"
+        />
+        {% endfor %}
+        <div class="col-span-1 aspect-square flex justify-center items-center cursor-pointer" @click="plusDivs(1)">
+          <i class="fa-light fa-arrow-right text-black text-lg"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/commcare_connect/templates/tailwind/components/worker_page/profile.html b/commcare_connect/templates/tailwind/components/worker_page/profile.html
new file mode 100644
index 000000000..294988553
--- /dev/null
+++ b/commcare_connect/templates/tailwind/components/worker_page/profile.html
@@ -0,0 +1,29 @@
+<div class="profile-card w=full h-full flex gap-4 text-white">
+  <div class="profile-left flex flex-col justify-center items-center">
+    <div class="h-12 w-12 rounded-full overflow-hidden relative">
+      <div class="absolute z-10 top-0 left-0 w-full h-full">
+        <svg viewBox="-600 -600 1200 1200" xmlns="http://www.w3.org/2000/svg">
+          <g transform="rotate(45)">
+            <circle r="500" stroke="red" stroke-width="200" stroke-linecap="round" pathLength="360" stroke-dasharray="90 270" fill="none"/> 
+          </g>
+        </svg>
+      </div>
+      <img
+        src="https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109"
+        alt="Profile Image z-0" 
+      />
+    </div>
+    <div class="share-icon flex justify-center mt-4">
+      <i class="fa-light fa-code-merge"></i>
+    </div>
+  </div>
+  
+  <div class="flex flex-col py-2">
+    <h2 class="text-base">Worker Name</h2>
+    <p class="text-xs">ZW69YOSSRSQ203HUNH1F</p>
+    <p class="mt-2">
+      <i class="fa-light fa-phone"></i>
+      <span class="text-xs">+25 472 643 0281</span>
+    </p>
+  </div>
+</div>
diff --git a/commcare_connect/templates/tailwind/header.html b/commcare_connect/templates/tailwind/header.html
new file mode 100644
index 000000000..348e9c787
--- /dev/null
+++ b/commcare_connect/templates/tailwind/header.html
@@ -0,0 +1,96 @@
+<style>
+.custom-header{
+    z-index: 999990;
+    margin-left: 64px;}
+    .right-side-pad{margin-right: 52px;}
+    .heading{margin-left: -8px;}
+</style>
+
+
+<header class="flex justify-between custom-header fixed top-0 bg-gray-100 left-0 right-0 w-full items-center px-6 py-4">
+    <!-- Left Section: Module Name -->
+    <h1 class="text-lg heading font-semibold text-blue-900">Dashboard</h1>
+
+    <!-- Right Section: Search, Notification, Profile Dropdown -->
+    <div class="flex items-center space-x-11 right-side-pad">
+        <!-- Search Icon -->
+       <div class='flex gap-5'>
+        <button class="text-blue-900 focus:outline-none">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.35-4.35"></path>
+            </svg>
+        </button>
+
+        <!-- Notification Icon -->
+        <button class="text-blue-900 focus:outline-none relative">
+    <div class="absolute top-1 left-[12px] transform -translate-x-1/2 -translate-y-full">
+        <div class="w-1 h-1 bg-red-500 rounded-full"></div>
+    </div>
+   <svg xmlns="http://www.w3.org/2000/svg" class='h-4 w-4 fill-[#16006D]' viewBox="0 0 448 512">
+    <path d="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/>
+    </svg>
+   </button>
+   </div>
+
+        <!-- Profile Dropdown -->
+        <div class="relative inline-block text-left">
+            <button onclick="toggleDropdown()" class="flex items-center space-x-10 focus:outline-none">
+                <div class='flex items-center gap-2'>
+                <div>
+                    <p class="text-[13px] font-[500] text-blue-900">{{ request.org.name }}</p>
+                    <p class="text-[10px] text-gray-500 text-left">{% if request.org.program_manager %}Program Manager{% else %}Network Manager{% endif %}</p>
+               </div>
+                <svg id="dropdown-icon" class="w-4 h-3 text-[#8EA1FF] transform transition-transform duration-300" fill="none"
+                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+                </svg>
+                 </div>
+                <img src="https://api.dicebear.com/7.x/pixel-art/svg?seed=JohnDoe"   class="w-10 h-10 rounded-full border border-gray-300" />
+            </button>
+
+            <!-- Dropdown Menu -->
+            <div id="dropdown-menu"
+                class="absolute left-0 mt-2 w-[180px] bg-white shadow-lg rounded-lg transition-all duration-300 transform scale-95 opacity-0 invisible">
+                <ul class="py-2">
+                  {% for membership in request.memberships %}
+                  <div class="px-3">
+                    <li class="py-2 px-3 hover:bg-gray-100 rounded cursor-pointer">
+                      <p class="text-[#16006D] text-[14px] font-[400]">{{ membership.organization.name }}</p>
+                      <p class="text-[13px] font-[300] text-[#94A3B8]">
+                        {% if membership.organization.program_manager %}Program Manager{% else %}Network Manager{% endif %}
+                      </p>
+                    </li>
+                  </div>
+                  {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+</header>
+
+<script>
+    function toggleDropdown() {
+        const dropdown = document.getElementById("dropdown-menu");
+        const icon = document.getElementById("dropdown-icon");
+
+        if (dropdown.classList.contains("invisible")) {
+            dropdown.classList.remove("invisible", "scale-95", "opacity-0");
+            dropdown.classList.add("scale-100", "opacity-100");
+            icon.classList.add("rotate-180");
+        } else {
+            dropdown.classList.add("invisible", "scale-95", "opacity-0");
+            dropdown.classList.remove("scale-100", "opacity-100");
+            icon.classList.remove("rotate-180");
+        }
+    }
+
+    document.addEventListener("click", function (event) {
+        const dropdown = document.getElementById("dropdown-menu");
+        const button = document.querySelector("[onclick='toggleDropdown()']");
+        if (!button.contains(event.target) && !dropdown.contains(event.target)) {
+            dropdown.classList.add("invisible", "scale-95", "opacity-0");
+            dropdown.classList.remove("scale-100", "opacity-100");
+            document.getElementById("dropdown-icon").classList.remove("rotate-180");
+        }
+    });
+</script>
diff --git a/commcare_connect/templates/tailwind/layouts/header.html b/commcare_connect/templates/tailwind/layouts/header.html
new file mode 100644
index 000000000..52c27f4a6
--- /dev/null
+++ b/commcare_connect/templates/tailwind/layouts/header.html
@@ -0,0 +1,88 @@
+<header class="fixed top-0 left-16 right-0 bg-gray-100 z-40">
+    <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:"CommCareConnect" }}</h1>
+
+        <!-- Right Section: Search, Notification, Profile Dropdown -->
+        <div class="flex items-center gap-x-2">
+
+            <!-- Search -->
+            <button class="text-brand-deep-purple focus:outline-none rounded-full hover:bg-white aspect-square w-10">
+                <i class="fa-light fa-magnifying-glass"></i>
+            </button>
+
+            <!-- Notification -->
+            <button class="text-brand-deep-purple focus:outline-none rounded-full hover:bg-white aspect-square w-10 relative">
+                <div class="h-2 w-2 bg-red-500 rounded-full absolute top-2 right-2"></div>
+                <i class="fa-light fa-bell"></i>
+            </button>
+
+            <!-- Organization selector -->
+            <div x-data="{ open: false }" class="relative mx-8">
+                <button @click="open = !open" class="flex items-center gap-2 focus:outline-none">
+                    <div class="text-left">
+                        <p class="text-sm font-medium text-brand-deep-purple cursor-pointer">Organization Names</p>
+                        <p class="text-xs text-gray-400">Network Manager</p>
+                    </div>
+
+                    <!-- Dropdown Toggle Icon -->
+                    <i :class="open ? 'rotate-180' : ''" class="fa-light fa-chevron-down transition-all text-xs"></i>
+                </button>
+
+                <!-- Organization Selector -->
+                <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">
+                        <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+                            <p class="text-brand-deep-purple text-sm font-medium">Meca Healthcare</p>
+                            <p class="text-xs text-gray-400">Program Manager</p>
+                        </li>
+                        <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+                            <p class="text-brand-deep-purple text-sm font-medium">Ecma Education</p>
+                            <p class="text-xs  text-gray-400">Network Manager</p>
+                        </li>
+                        <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+                            <p class="text-brand-deep-purple text-sm font-medium">Cmea Kindheart</p>
+                            <p class="text-xs  text-gray-400">Program Manager</p>
+                        </li>
+                        <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+                            <p class="text-brand-deep-purple text-sm font-medium">Acme Venture</p>
+                            <p class="text-xs  text-gray-400">Network Manager</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- User Profile -->
+            <div x-data="{ open: false }" class="relative">
+                <button @click="open = !open" class="focus:outline-none">
+                    <!-- Avatar (Not Clickable) -->
+                    <div class="w-10 h-10 aspect-square rounded-full border border-gray-300 pointer-events-none overflow-hidden bg-grey-500">
+                        <img src="https://api.dicebear.com/7.x/pixel-art/svg?seed=JohnDoe" class="w-full h-full object-fill" />
+                    </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">User Name</p>
+                            <span class="text-gray-400 text-sm">Role</span>
+                        </li>
+                        <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+                            <p class="text-brand-deep-purple">Profile</p>
+                        </li>
+                        <li class="p-2 hover:bg-gray-100 rounded cursor-pointer text-left">
+                            <p class="text-brand-deep-purple">Settings</p>
+                        </li>
+                        <li class="p-2 cursor-pointer">
+                            <div class="bg-brand-indigo text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-800 transition">
+                                Logout
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</header>
diff --git a/commcare_connect/templates/tailwind/layouts/sidenav.html b/commcare_connect/templates/tailwind/layouts/sidenav.html
new file mode 100644
index 000000000..1e2e6cede
--- /dev/null
+++ b/commcare_connect/templates/tailwind/layouts/sidenav.html
@@ -0,0 +1,37 @@
+{% load static i18n %}
+
+<div x-data="{ sidebarOpen: false }" id="sidebar" class="bg-brand-deep-purple z-50 h-screen text-white flex flex-col top-0 left-0 fixed transition-all duration-300"
+    :class="sidebarOpen ? 'w-64' : 'w-16'">
+    <div class="relative flex flex-col items-start justify-center mb-20">
+        <div class="fixed flex gap-3 pl-4 mb-10 top-4">
+            <img src="{% static 'images/logo.svg' %}" class="w-8 h-8 rounded-full   border-gray-300" />
+            <div x-show="sidebarOpen" x-cloak id="commcareText" class="text-xl font-normal text-white">
+                <p class='text-lg'>CommCare</p>
+                <p class='ml-6 -mt-2 text-lg'>Connect</p>
+            </div>
+        </div>
+        <button @click="sidebarOpen = !sidebarOpen" class="absolute w-screen mt-8 focus:outline-none top-12">
+            <div class='flex items-center justify-start w-screen gap-3 pl-6'>
+                <i :class="sidebarOpen ? 'fa-solid fa-xmark' : 'fa-regular fa-bars'" id="menuIcon"></i>
+                <span x-show="sidebarOpen" x-cloak id="menuText" class="ml-2 text-xs">Menu</span>
+            </div>
+        </button>
+    </div>
+
+    <div class="flex flex-col flex-grow mt-16">
+        <nav class="flex flex-col px-2 transition-all duration-300" id="navItems">
+            <nav class="flex flex-col px-2 transition-all duration-300" id="navItems">
+                {% url 'program:home' request.org.slug as program_home_url %}
+                {% include "tailwind/components/sidenav-items.html" with name='Programs' icon='table-columns' state='sidebarOpen' target=program_home_url %}
+                {% include "tailwind/components/sidenav-items.html" with name='Opportunities' icon='table-cells-large' state='sidebarOpen' target='/opportunities' %}
+                {% include "tailwind/components/sidenav-items.html" with name='Analytics' icon='chart-pie' state='sidebarOpen' target='/analytics' %}
+                {% include "tailwind/components/sidenav-items.html" with name='My Organization' icon='buildings' state='sidebarOpen' target='/organization' %}
+            </nav>
+        </nav>
+    </div>
+
+    <div class="flex flex-col px-2 pb-4 ">
+        {% include "tailwind/components/sidenav-items.html" with name='Help & FAQ' icon='circle-question' state='sidebarOpen' target='/help &  FAQ' %}
+        {% include "tailwind/components/sidenav-items.html" with name='Settings' icon='buildings' state='sidebarOpen' target='/settings' %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/commcare_connect/templates/tailwind/pages/create_opportunity.html b/commcare_connect/templates/tailwind/pages/create_opportunity.html
new file mode 100644
index 000000000..edaa1fab0
--- /dev/null
+++ b/commcare_connect/templates/tailwind/pages/create_opportunity.html
@@ -0,0 +1,19 @@
+<!-- dashbaord.html -->
+{% extends 'tailwind/base.html' %}
+
+{% block content %} 
+<div class="md:max-w-screen-lg mx-auto flex flex-col gap-4 min-h-screen"> 
+   <div class="flex justify-between w-full gap-4 items-center">
+      {% for data in data.stage %} 
+         <div class="flex gap-2 items-center">
+            <!-- circle -->
+            <div class="rounded-full p-2  grid place-content-center w-8 h-8 border border-brand-indigo text-brand-deep-purple {% if data.status %} bg-brand-indigo border-none text-white {% endif %}">{{data.index}}</div>
+            <!-- label -->
+            <div class="text-sm whitespace-nowrap text-gray-400 {% if data.status %} text-brand-deep-purple font-medium {% endif %}">{{data.label}}</div>
+         </div> 
+         <hr class="border-t-2 border-dashed border-gray-300 w-full  {% if  forloop.last  %} hidden {% endif %}"> 
+      {% endfor %}
+   </div>
+   {% include "tailwind/components/create/details-form.html" %}
+</div>  
+{% endblock %}
diff --git a/commcare_connect/templates/tailwind/pages/home.html b/commcare_connect/templates/tailwind/pages/home.html
new file mode 100644
index 000000000..e6db395a1
--- /dev/null
+++ b/commcare_connect/templates/tailwind/pages/home.html
@@ -0,0 +1,35 @@
+{% extends 'tailwind/base.html' %} {% block content %}
+<div class="w-full space-y-4">
+    {% comment %} <div hx-get="src/components/breadcrumb.htmx" hx-trigger="load"></div> {% endcomment %}
+    <!-- Profile & Statistic Cards Container -->
+    <div class="flex flex-wrap items-center h-32 p-2 profile-bg bg-brand-indigo rounded-2xl">
+        {% include "tailwind/components/worker_page/profile.html" %}
+        {% include "tailwind/components/cards/worker_page/worker_dashboard_card.html" %}
+      {% comment %} <div hx-get="src/components/worker-profile.htmx" hx-trigger="load"></div>
+      <div hx-get="src/components/cards/worker-dashboard-card.htmx" hx-trigger="load"></div> {% endcomment %}
+    </div>
+  
+    {% comment %} <div class="flex justify-center w-full">
+      <div class="flex flex-col w-full grid-cols-10 gap-2 lg:grid">
+        <div class="col-span-6">
+          <!-- Tabs -->
+          <div hx-get="src/components/tabs/tabs.ejs" hx-trigger="load"></div>
+        </div>
+        <div class="w-full col-span-4">
+          <div hx-get="src/components/details.ejs" hx-trigger="load"></div>
+        </div>
+      </div>
+    </div> {% endcomment %}
+
+    <div class="flex flex-row gap-4">
+    {% include "tailwind/components/cards/user_status_card.html" with rows=rows %}
+    {% include "tailwind/components/cards/user_timeline_card.html" with timeline=timeline%}
+    <div class="flex flex-col gap-4">
+      {% include "tailwind/components/cards/approval_card.html" %}
+      {% include "tailwind/components/cards/rejection_card.html" %}
+    </div>
+  </div>
+  {% include "tailwind/components/cards/filter_card.html" with flags=flags %}
+  </div>
+  
+{% endblock %}
diff --git a/commcare_connect/templates/tailwind/pages/opportunities.html b/commcare_connect/templates/tailwind/pages/opportunities.html
new file mode 100644
index 000000000..981b7c43a
--- /dev/null
+++ b/commcare_connect/templates/tailwind/pages/opportunities.html
@@ -0,0 +1,14 @@
+<!-- opportunities.html -->
+{% extends 'tailwind/base.html' %}
+
+{% block content %}
+    <div class="container md:max-w-screen-2xl mx-auto flex flex-col gap-4">
+        {% include "tailwind/components/opportunity-dashboard/detials.html" with data=data totalinfo=totalinfo %}
+        <div>
+            {% include "tailwind/components/opportunity-dashboard/workers_activity.html"%}
+            {% include 'tailwind/components/opportunity-dashboard/progress-view.html' with title='Daily Active Worker' data_a_title='maximum' data_a_value='50' %}
+        </div> 
+        {% include 'tailwind/components/opportunity-dashboard/workers-funnelview.html' %}  
+    </div>
+{% endblock %}
+
diff --git a/commcare_connect/templates/tailwind/pages/opportunity_visits.html b/commcare_connect/templates/tailwind/pages/opportunity_visits.html
new file mode 100644
index 000000000..a3ddfaf8a
--- /dev/null
+++ b/commcare_connect/templates/tailwind/pages/opportunity_visits.html
@@ -0,0 +1,25 @@
+{% extends 'tailwind/base.html' %}
+{% load django_tables2 %}
+
+{% block content %}
+    {# Main container with the table #}
+    <div class="md:max-w-screen-lg h-[calc(100vh-90px)] mx-auto flex flex-col gap-4 w-full">
+
+        {# Opportunity Name Component #}
+        <p class="text-brand-deep-purple font-medium title-sm">Opportunity Name</p>
+
+        {# Content Container #}
+        <div class="flex flex-col gap-2 min-h-screen">
+
+            {# Header Panel #}
+            <div class="w-full h-12 shadow-sm flex items-center rounded-lg bg-slate-50 px-4">
+                <p class="text-brand-deep-purple font-medium text-sm">Adding Budget</p>
+            </div>
+
+            <div class="flex-1 overflow-y-auto bg-white rounded-lg shadow-sm">
+                {% render_table table %}
+            </div>
+
+        </div>
+    </div>
+{% endblock %}
diff --git a/commcare_connect/templates/tailwind/pages/worker.html b/commcare_connect/templates/tailwind/pages/worker.html
new file mode 100644
index 000000000..b8a3d7f37
--- /dev/null
+++ b/commcare_connect/templates/tailwind/pages/worker.html
@@ -0,0 +1,30 @@
+{% extends 'tailwind/base.html' %} {% block content %}
+<div class="md:max-w-screen-2xl mx-auto flex items-center">
+  <div class="w-full space-y-4">
+    {% comment %} <div hx-get="src/components/breadcrumb.htmx" hx-trigger="load"></div> {% endcomment %}
+    <!-- Profile & Statistic Cards Container -->
+    <div class="flex gap-4  items-center h-32 p-4 profile-bg bg-brand-indigo rounded-2xl">
+        {% include "tailwind/components/worker_page/profile.html" %}
+        {% include "tailwind/components/cards/worker_page/worker_dashboard_card.html" with count='234' text='Total Delieveries' icon='memo' %} 
+        {% include "tailwind/components/cards/worker_page/worker_dashboard_card.html" with count='234' text='Flagged Delieveries' icon='flag-swallowtail' dropdown='true' %} 
+        {% include "tailwind/components/cards/worker_page/worker_dashboard_card.html" with count='234' text='Rejected Delieveries' icon='thumbs-down' dropdown='true'  %} 
+        {% include "tailwind/components/cards/worker_page/worker_dashboard_card.html" with count='234' text='Accrued Payments' icon='money-bill-simple-wave' %} 
+        {% include "tailwind/components/cards/worker_page/worker_dashboard_card.html" with count='234' text='Paid Payments' icon='hand-holding-dollar' dropdown='true' %} 
+      {% comment %} <div hx-get="src/components/worker-profile.htmx" hx-trigger="load"></div>
+      <div hx-get="src/components/cards/worker-dashboard-card.htmx" hx-trigger="load"></div> {% endcomment %}
+    </div>
+  
+    <div class="flex justify-center w-full">
+      <div class="flex flex-col w-full grid-cols-10 gap-2 lg:grid">
+        <div class="col-span-6">
+          <!-- Tabs -->
+           {% include "tailwind/components/tabs/tabs.html" with tabs=tabs %}
+        </div>
+        <div class="col-span-4">
+          {% include "tailwind/components/worker_page/detail_panel.html" %}
+        </div>
+
+      </div>
+    </div> 
+</div>
+{% endblock %}
diff --git a/commcare_connect/templates/tailwind/sidebar.html b/commcare_connect/templates/tailwind/sidebar.html
new file mode 100644
index 000000000..5fec2dfaf
--- /dev/null
+++ b/commcare_connect/templates/tailwind/sidebar.html
@@ -0,0 +1,75 @@
+{% load static i18n %}
+<div id="sidebar" class="w-16 bg-blue-900 z-[9999] h-screen text-white h-screen flex flex-col top-0 left-0 fixed  justify-between transition-all duration-300">
+    <!-- Sidebar Top: Toggle Button -->
+    <div>
+
+    <div  class="pl-4 mt-5">
+            <img src="{% static 'images/logo.svg' %}" class="w-8 h-8 rounded-full   border-gray-300" />
+        </div>
+
+        <button  class="p-6 focus:outline-none">
+           <svg xmlns="http://www.w3.org/2000/svg" class='h-4 text-white' viewBox="0 0 448 512">
+  <path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z" fill="currentColor"/>
+</svg>
+        </button>
+
+        <!-- Sidebar Icons -->
+        <nav class="mt-4 flex flex-col items-center space-y-1">
+            <a href="#" class="group flex items-center p-3 hover:bg-[#FC5F3633] rounded-lg  justify-center relative">
+                <svg xmlns="http://www.w3.org/2000/svg" class='h-4 w-4 text-white' viewBox="0 0 512 512">
+                 <path d="M448 96l0 128-160 0 0-128 160 0zm0 192l0 128-160 0 0-128 160 0zM224 224L64 224 64 96l160 0 0 128zM64 288l160 0 0 128L64 416l0-128zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z" fill="currentColor"/>
+                </svg>
+                 <div class="absolute top-1/4 right-0  h-1/2 w-1 bg-[#FC5F36] rounded-lg hidden group-hover:block"></div>
+                <span class="sidebar-text hidden ml-4">Dashboard</span>
+            </a>
+
+             <a href="#" class="group flex items-center p-3 hover:bg-[#FC5F3633] rounded-lg  justify-center relative">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-4 w-4 text-white">
+              <path d="M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 64l0 256 160 0 0-256L64 160zm384 0l-160 0 0 256 160 0 0-256z" fill="currentColor"/>
+              </svg>
+                 <div class="absolute top-1/4 right-0  h-1/2 w-1 bg-[#FC5F36] rounded-lg hidden group-hover:block"></div>
+                <span class="sidebar-text hidden ml-4">Dashboard</span>
+            </a>
+            <a href="#" class="group flex items-center p-3 hover:bg-[#FC5F3633] rounded-lg  justify-center relative">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="h-4 w-4 text-white">
+                <path d="M304 240l0-223.4c0-9 7-16.6 16-16.6C443.7 0 544 100.3 544 224c0 9-7.6 16-16.6 16L304 240zM32 272C32 150.7 122.1 50.3 239 34.3c9.2-1.3 17 6.1 17 15.4L256 288 412.5 444.5c6.7 6.7 6.2 17.7-1.5 23.1C371.8 495.6 323.8 512 272 512C139.5 512 32 404.6 32 272zm526.4 16c9.3 0 16.6 7.8 15.4 17c-7.7 55.9-34.6 105.6-73.9 142.3c-6 5.6-15.4 5.2-21.2-.7L320 288l238.4 0z" fill="currentColor"/>
+                </svg>
+                 <div class="absolute top-1/4 right-0  h-1/2 w-1 bg-[#FC5F36] rounded-lg hidden group-hover:block"></div>
+                <span class="sidebar-text hidden ml-4">Chart</span>
+            </a>
+
+             <a href="#" class="group flex items-center p-3 hover:bg-[#FC5F3633] rounded-lg  justify-center relative">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 384 512" class="text-white">
+                  <path d="M64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l80 0 0-64c0-26.5 21.5-48 48-48s48 21.5 48 48l0 64 80 0c8.8 0 16-7.2 16-16l0-384c0-8.8-7.2-16-16-16L64 48zM0 64C0 28.7 28.7 0 64 0L320 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm88 40c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16l0 48c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-48zM232 88l48 0c8.8 0 16 7.2 16 16l0 48c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-48c0-8.8 7.2-16 16-16zM88 232c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16l0 48c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-48zm144-16l48 0c8.8 0 16 7.2 16 16l0 48c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-48c0-8.8 7.2-16 16-16z" fill="currentColor"/>
+                </svg>
+                 <div class="absolute top-1/4 right-0  h-1/2 w-1 bg-[#FC5F36] rounded-lg hidden group-hover:block"></div>
+                <span class="sidebar-text hidden ml-4">Chart</span>
+            </a>
+        </nav>
+    </div>
+    <!-- Sidebar Bottom: Help & Settings -->
+    <div class="mb-4 flex flex-col items-center space-y-1">
+        <a href="#" class="group flex items-center p-3 hover:bg-[#FC5F3633] rounded-lg  justify-center relative">
+                 <svg xmlns="http://www.w3.org/2000/svg" class='h-4 w-4 text-white' viewBox="0 0 512 512">
+                 <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" fill="currentColor"/>
+                 </svg>
+                 <div class="absolute top-1/4 right-0  h-1/2 w-1 bg-[#FC5F36] rounded-lg hidden group-hover:block"></div>
+                <span class="sidebar-text hidden ml-4">Help</span>
+            </a>
+
+       <a href="#" class="group flex items-center p-3 hover:bg-[#FC5F3633] rounded-lg  justify-center relative">
+                <svg xmlns="http://www.w3.org/2000/svg" class='h-4 w-4 text-white' viewBox="0 0 512 512">
+  <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3-18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" fill="currentColor"/>
+</svg>
+                 <div class="absolute top-1/4 right-0  h-1/2 w-1 bg-[#FC5F36] rounded-lg hidden group-hover:block"></div>
+                <span class="sidebar-text hidden ml-4">Settings</span>
+            </a>
+    </div>
+</div>
+
+<script>
+    function toggleSidebar() {
+        document.getElementById("sidebar").classList.toggle("w-64");
+        document.querySelectorAll(".sidebar-text").forEach(el => el.classList.toggle("hidden"));
+    }
+</script>
diff --git a/commcare_connect/users/management/commands/promote_user_to_superuser.py b/commcare_connect/users/management/commands/promote_user_to_superuser.py
deleted file mode 100644
index 6a55de366..000000000
--- a/commcare_connect/users/management/commands/promote_user_to_superuser.py
+++ /dev/null
@@ -1,20 +0,0 @@
-from django.core.management.base import BaseCommand, CommandError
-
-from commcare_connect.users.models import User
-
-
-class Command(BaseCommand):
-    help = "Promotes the given user to a superuser and provides admin access."
-
-    def add_arguments(self, parser):
-        parser.add_argument("email", type=str)
-
-    def handle(self, email, **options):
-        try:
-            user = User.objects.get(email=email)
-        except User.DoesNotExist:
-            raise CommandError(f"No user with email {email} found!")
-        user.is_superuser = True
-        user.is_staff = True
-        user.save()
-        print(f"{email} successfully promoted to superuser and can now access the admin site")
diff --git a/commcare_connect/users/middleware.py b/commcare_connect/users/middleware.py
index 4441d9d86..bed2efb37 100644
--- a/commcare_connect/users/middleware.py
+++ b/commcare_connect/users/middleware.py
@@ -25,7 +25,16 @@ def _get_org_membership(request):
     return request._cached_org_membership
 
 
+def _get_all_memberships(request):
+    if not hasattr(request, "_cached_memberships"):
+        org = request.org
+        membership = Membership.objects.filter(user=request.user).exclude(organization=org)
+        request._cached_memberships = membership
+    return request._cached_memberships
+
+
 class OrganizationMiddleware(MiddlewareMixin):
     def process_view(self, request, view_func, view_args, view_kwargs):
         request.org = SimpleLazyObject(lambda: _get_organization(request, view_kwargs))
         request.org_membership = SimpleLazyObject(lambda: _get_org_membership(request))
+        request.memberships = SimpleLazyObject(lambda: _get_all_memberships(request))
diff --git a/config/settings/base.py b/config/settings/base.py
index c2ddd7feb..1311142a6 100644
--- a/config/settings/base.py
+++ b/config/settings/base.py
@@ -330,7 +330,7 @@
     }
 }
 
-DJANGO_TABLES2_TEMPLATE = "tables/tabbed_table.html"
+DJANGO_TABLES2_TEMPLATE = "tailwind/base_table.html"
 DJANGO_TABLES2_TABLE_ATTRS = {
     "class": "table table-bordered mb-0",
     "thead": {
diff --git a/package-lock.json b/package-lock.json
index 373efb7a7..01c220477 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,14 @@
       "name": "commcare_connect",
       "version": "0.1.0",
       "dependencies": {
+        "@tailwindcss/postcss": "^4.0.14",
         "@turf/circle": "^6.5.0",
         "alpinejs": "^3.13.0",
         "bootstrap-icons": "^1.10.5",
         "bootswatch": "^5.3.2",
         "htmx.org": "^1.9.4",
-        "mapbox-gl": "^3.1.2"
+        "mapbox-gl": "^3.1.2",
+        "tailwindcss": "^4.0.14"
       },
       "devDependencies": {
         "@babel/core": "^7.16.5",
@@ -30,7 +32,7 @@
         "mini-css-extract-plugin": "^2.4.5",
         "node-sass-tilde-importer": "^1.0.2",
         "pixrem": "^5.0.0",
-        "postcss": "^8.3.11",
+        "postcss": "^8.5.3",
         "postcss-loader": "^7.0.2",
         "postcss-preset-env": "^8.0.1",
         "sass": "^1.43.4",
@@ -45,6 +47,17 @@
         "node": "18"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -2533,6 +2546,223 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.14.tgz",
+      "integrity": "sha512-Ux9NbFkKWYE4rfUFz6M5JFLs/GEYP6ysxT8uSyPn6aTbh2K3xDE1zz++eVK4Vwx799fzMF8CID9sdHn4j/Ab8w==",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "tailwindcss": "4.0.14"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.14.tgz",
+      "integrity": "sha512-M8VCNyO/NBi5vJ2cRcI9u8w7Si+i76a7o1vveoGtbbjpEYJZYiyc7f2VGps/DqawO56l3tImIbq2OT/533jcrA==",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.0.14",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.14",
+        "@tailwindcss/oxide-darwin-x64": "4.0.14",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.14",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.14",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.14",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.14",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.14",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.14",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.14",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.14"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.14.tgz",
+      "integrity": "sha512-VBFKC2rFyfJ5J8lRwjy6ub3rgpY186kAcYgiUr8ArR8BAZzMruyeKJ6mlsD22Zp5ZLcPW/FXMasJiJBx0WsdQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.14.tgz",
+      "integrity": "sha512-U3XOwLrefGr2YQZ9DXasDSNWGPZBCh8F62+AExBEDMLDfvLLgI/HDzY8Oq8p/JtqkAY38sWPOaNnRwEGKU5Zmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.14.tgz",
+      "integrity": "sha512-V5AjFuc3ndWGnOi1d379UsODb0TzAS2DYIP/lwEbfvafUaD2aNZIcbwJtYu2DQqO2+s/XBvDVA+w4yUyaewRwg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.14.tgz",
+      "integrity": "sha512-tXvtxbaZfcPfqBwW3f53lTcyH6EDT+1eT7yabwcfcxTs+8yTPqxsDUhrqe9MrnEzpNkd+R/QAjJapfd4tjWdLg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.14.tgz",
+      "integrity": "sha512-cSeLNWWqIWeSTmBntQvyY2/2gcLX8rkPFfDDTQVF8qbRcRMVPLxBvFVJyfSAYRNch6ZyVH2GI6dtgALOBDpdNA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.14.tgz",
+      "integrity": "sha512-bwDWLBalXFMDItcSXzFk6y7QKvj6oFlaY9vM+agTlwFL1n1OhDHYLZkSjaYsh6KCeG0VB0r7H8PUJVOM1LRZyg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.14.tgz",
+      "integrity": "sha512-gVkJdnR/L6iIcGYXx64HGJRmlme2FGr/aZH0W6u4A3RgPMAb+6ELRLi+UBiH83RXBm9vwCfkIC/q8T51h8vUJQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.14.tgz",
+      "integrity": "sha512-EE+EQ+c6tTpzsg+LGO1uuusjXxYx0Q00JE5ubcIGfsogSKth8n8i2BcS2wYTQe4jXGs+BQs35l78BIPzgwLddw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.14.tgz",
+      "integrity": "sha512-KCCOzo+L6XPT0oUp2Jwh233ETRQ/F6cwUnMnR0FvMUCbkDAzHbcyOgpfuAtRa5HD0WbTbH4pVD+S0pn1EhNfbw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.14.tgz",
+      "integrity": "sha512-AHObFiFL9lNYcm3tZSPqa/cHGpM5wOrNmM2uOMoKppp+0Hom5uuyRh0QkOp7jftsHZdrZUpmoz0Mp6vhh2XtUg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.14.tgz",
+      "integrity": "sha512-rNXXMDJfCJLw/ZaFTOLOHoGULxyXfh2iXTGiChFiYTSgKBKQHIGEpV0yn5N25WGzJJ+VBnRjHzlmDqRV+d//oQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.0.14.tgz",
+      "integrity": "sha512-+uIR6KtKhla1XeIanF27KtrfYy+PX+R679v5LxbkmEZlhQe3g8rk+wKj7Xgt++rWGRuFLGMXY80Ek8JNn+kN/g==",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.0.14",
+        "@tailwindcss/oxide": "4.0.14",
+        "lightningcss": "1.29.2",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.0.14"
+      }
+    },
     "node_modules/@turf/circle": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/circle/-/circle-6.5.0.tgz",
@@ -4108,6 +4338,14 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -4198,10 +4436,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz",
-      "integrity": "sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow==",
-      "dev": true,
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -4751,8 +4988,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/grid-index": {
       "version": "1.1.0",
@@ -5327,6 +5563,223 @@
         "shell-quote": "^1.7.3"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -5623,10 +6076,9 @@
       "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "dev": true,
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
@@ -5935,10 +6387,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -6003,10 +6454,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
-      "dev": true,
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -6022,9 +6472,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -7442,10 +7892,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7595,11 +8044,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.14.tgz",
+      "integrity": "sha512-92YT2dpt671tFiHH/e1ok9D987N9fHD5VWoly1CdPD/Cd1HMglvZwP3nx2yTj2lbXDAHt8QssZkxTLCCTNL+xw=="
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
diff --git a/package.json b/package.json
index 54d099f0f..5f300298c 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "mini-css-extract-plugin": "^2.4.5",
     "node-sass-tilde-importer": "^1.0.2",
     "pixrem": "^5.0.0",
-    "postcss": "^8.3.11",
+    "postcss": "^8.5.3",
     "postcss-loader": "^7.0.2",
     "postcss-preset-env": "^8.0.1",
     "sass": "^1.43.4",
@@ -44,11 +44,13 @@
     "dev-watch": "webpack --mode development --config webpack/base.config.js --watch"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.0.14",
     "@turf/circle": "^6.5.0",
     "alpinejs": "^3.13.0",
     "bootstrap-icons": "^1.10.5",
     "bootswatch": "^5.3.2",
     "htmx.org": "^1.9.4",
-    "mapbox-gl": "^3.1.2"
+    "mapbox-gl": "^3.1.2",
+    "tailwindcss": "^4.0.14"
   }
 }
diff --git a/webpack/base.config.js b/webpack/base.config.js
index 8f1fe4de3..cfba81e55 100644
--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -8,11 +8,9 @@ module.exports = {
   context: path.join(__dirname, '../'),
   entry: {
     project: path.resolve(__dirname, '../commcare_connect/static/js/project'),
-    dashboard: path.resolve(
-      __dirname,
-      '../commcare_connect/static/js/dashboard',
-    ),
+    dashboard: path.resolve(__dirname, '../commcare_connect/static/js/dashboard'),
     vendors: path.resolve(__dirname, '../commcare_connect/static/js/vendors'),
+    tailwind: path.resolve(__dirname, '../commcare_connect/static/css/tailwind.css'),
   },
   output: {
     path: path.resolve(__dirname, '../commcare_connect/static/bundles/'),
@@ -30,9 +28,9 @@ module.exports = {
   ],
   module: {
     rules: [
-      // we pass the output from babel loader to react-hot loader
       {
         test: /\.js$/,
+        exclude: /node_modules/,
         loader: 'babel-loader',
       },
       {
@@ -44,7 +42,10 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               postcssOptions: {
-                plugins: ['postcss-preset-env', 'autoprefixer', 'pixrem'],
+                plugins: [
+                  require('@tailwindcss/postcss'),
+                  require('autoprefixer'),
+                ],
               },
             },
           },
@@ -58,4 +59,4 @@ module.exports = {
     extensions: ['.js', '.jsx'],
   },
   devtool: 'eval-cheap-source-map',
-};
+};
\ No newline at end of file