Removed most of w3 and working on fixing the forms.

14 files changed, 1162 insertions, 914 deletions

diff --git a/conf/settings/base.py b/conf/settings/base.py
index ce622eb..fb9b658 100644
--- a/conf/settings/base.py
+++ b/conf/settings/base.py
@@ -50,7 +50,6 @@ INSTALLED_APPS = [
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
-    "crispy_forms",
     "django_htmx",
     # "debug_toolbar",
 ]
@@ -97,8 +96,6 @@ TEMPLATES = [
     },
 ]
 
-CRISPY_ALLOWED_TEMPLATE_PACKS = ("w3",)
-CRISPY_TEMPLATE_PACK = "w3"
 
 WSGI_APPLICATION = "ded.wsgi.application"
 
diff --git a/core/static/css/output.css b/core/static/css/output.css
index e8bd71c..e25155d 100644
--- a/core/static/css/output.css
+++ b/core/static/css/output.css
@@ -916,12 +916,6 @@ html {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
-
-  .table-zebra tr.hover:hover,
-  .table-zebra tr.hover:nth-child(even):hover {
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-  }
 }
 
 .btn {
@@ -1112,48 +1106,7 @@ html {
   min-height: fit-content;
 }
 
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown > *:not(summary):focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.dropdown .dropdown-content {
-  position: absolute;
-}
-
-.dropdown:is(:not(details)) .dropdown-content {
-  visibility: hidden;
-  opacity: 0;
-  transform-origin: top;
-  --tw-scale-x: .95;
-  --tw-scale-y: .95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-duration: 200ms;
-}
-
-.dropdown.dropdown-open .dropdown-content,
-.dropdown:not(.dropdown-hover):focus .dropdown-content,
-.dropdown:focus-within .dropdown-content {
-  visibility: visible;
-  opacity: 1;
-}
-
 @media (hover: hover) {
-  .dropdown.dropdown-hover:hover .dropdown-content {
-    visibility: visible;
-    opacity: 1;
-  }
-
   .btm-nav > *.disabled:hover,
       .btm-nav > *[disabled]:hover {
     pointer-events: none;
@@ -1227,12 +1180,6 @@ html {
     }
   }
 
-  .dropdown.dropdown-hover:hover .dropdown-content {
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
   .tab[disabled],
     .tab[disabled]:hover {
     cursor: not-allowed;
@@ -1241,10 +1188,6 @@ html {
   }
 }
 
-.dropdown:is(details) summary::-webkit-details-marker {
-  display: none;
-}
-
 .form-control {
   display: flex;
   flex-direction: column;
@@ -1288,12 +1231,6 @@ html {
   margin-inline-end: -1rem;
 }
 
-.join .dropdown .join-item:first-child:not(:last-child),
-  .join *:first-child:not(:last-child) .dropdown .join-item {
-  border-start-end-radius: inherit;
-  border-end-end-radius: inherit;
-}
-
 .link {
   cursor: pointer;
   text-decoration-line: underline;
@@ -1376,6 +1313,40 @@ html {
   --tw-border-opacity: 0.2;
 }
 
+.select {
+  display: inline-flex;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 3rem;
+  min-height: 3rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 2.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 2;
+  border-radius: var(--rounded-btn, 0.5rem);
+  border-width: 1px;
+  border-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 20px) calc(1px + 50%),
+    calc(100% - 16.1px) calc(1px + 50%);
+  background-size: 4px 4px,
+    4px 4px;
+  background-repeat: no-repeat;
+}
+
+.select[multiple] {
+  height: auto;
+}
+
 .tabs {
   display: grid;
   align-items: flex-end;
@@ -1485,11 +1456,6 @@ input.tab:checked + .tab-content,
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
 
-.table-zebra tbody tr:nth-child(even) :where(.table-pin-cols tr th) {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-}
-
 .btm-nav > *:where(.active) {
   border-top-width: 2px;
   --tw-bg-opacity: 1;
@@ -1833,14 +1799,6 @@ details.collapse summary::-webkit-details-marker {
   content: "−";
 }
 
-.dropdown.dropdown-open .dropdown-content,
-.dropdown:focus .dropdown-content,
-.dropdown:focus-within .dropdown-content {
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .input input {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
@@ -2059,6 +2017,50 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
+.select:focus {
+  box-shadow: none;
+  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
+
+.select-disabled,
+  .select:disabled,
+  .select[disabled] {
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+  color: var(--fallback-bc,oklch(var(--bc)/0.4));
+}
+
+.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+  --tw-placeholder-opacity: 0.2;
+}
+
+.select-disabled::placeholder,
+  .select:disabled::placeholder,
+  .select[disabled]::placeholder {
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
+  --tw-placeholder-opacity: 0.2;
+}
+
+.select-multiple,
+  .select[multiple],
+  .select[size].select:not([size="1"]) {
+  background-image: none;
+  padding-right: 1rem;
+}
+
+[dir="rtl"] .select {
+  background-position: calc(0% + 12px) calc(1px + 50%),
+    calc(0% + 16px) calc(1px + 50%);
+}
+
 @keyframes skeleton {
   from {
     background-position: 150%;
@@ -2349,36 +2351,80 @@ details.collapse summary::-webkit-details-marker {
   margin: 0px;
 }
 
-.m-3 {
-  margin: 0.75rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .mb-0 {
   margin-bottom: 0px;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
 
+.flex {
+  display: flex;
+}
+
 .table {
   display: table;
 }
@@ -2391,25 +2437,291 @@ details.collapse summary::-webkit-details-marker {
   display: none;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
 .h-auto {
   height: auto;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.min-w-full {
+  min-width: 100%;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.list-inside {
+  list-style-position: inside;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-l-4 {
+  border-left-width: 4px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-yellow-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(234 179 8 / var(--tw-border-opacity));
+}
+
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.p-3 {
-  padding: 0.75rem;
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.pe-3 {
-  padding-inline-end: 0.75rem;
+.bg-yellow-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
 }
 
 .text-2xl {
@@ -2427,7 +2739,195 @@ details.collapse summary::-webkit-details-marker {
   line-height: 2.5rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
+}
+
+.hover\:text-blue-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+.hover\:text-blue-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-indigo-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+@media (min-width: 640px) {
+  .sm\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .sm\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
\ No newline at end of file
diff --git a/core/templates/core/base.html b/core/templates/core/base.html
index 65c1842..682395f 100644
--- a/core/templates/core/base.html
+++ b/core/templates/core/base.html
@@ -27,28 +27,26 @@
 </head>
 <body>
 {% block navbar %}
-<div class="navbar bg-blue-500">
-  <!-- <a href="/" class="w3-bar-item w3-button w3-dark-gray w3-xxlarge"><i class="fa fa-home"></i></a> -->
-  <a href="#" class="text-3xl pe-3">Home</a>
-  <a href="{% url 'engagements:home' %}" class="text-3xl link pe-3">Engagement Plans</a>
-  <a href="{% url 'engagements:regulatedentities' %}" class="text-3xl link pe-3">Regulated Entities</a>
-  <a href="#" class="text-3xl link pe-3">Reporting</a>
-  <a href="#" class="text-3xl link pe-3">Dashboards</a>
-  <div class="dropdown">
-    <button class="w3-button w3-large">Teams</button>
-    <div class="w3-dropdown-content w3-bar-block w3-card-4">
-      <a href="#" class="w3-bar-item w3-button">Submarines and Propulsion</a>
-      <a href="#" class="w3-bar-item w3-button">Transport</a>
+<nav class="bg-blue-600 p-4">
+  <div class="container mx-auto flex items-center justify-between">
+    <div class="flex items-center space-x-4">
+      <a href="#" class="text-white text-xl font-semibold">Home</a>
+      <a href="{% url 'engagements:home' %}" class="text-white hover:text-blue-200">Engagement Plans</a>
+      <a href="{% url 'engagements:regulatedentities' %}" class="text-white hover:text-blue-200">Regulated Entities</a>
+      <a href="#" class="text-white hover:text-blue-200">Reporting</a>
+      <a href="#" class="text-white hover:text-blue-200">Dashboards</a>
+    </div>
+    <div class="flex items-center space-x-4">
+      {% if request.user.is_authenticated %}
+        <span class="text-white">{{ user }}</span>
+        <a href="{% url 'logout' %}" class="text-white hover:text-blue-200">Log Out</a>
+      {% else %}
+        <a href="{% url 'login' %}" class="text-white hover:text-blue-200">Log In</a>
+      {% endif %}
+      <a href="#" class="text-white hover:text-blue-200">Help</a>
     </div>
   </div>
-    {% if request.user.is_authenticated %}
-    <a class="w3-bar-item w3-right w3-button w3-large" href="#">{{ user }}</a>
-    <a class="w3-bar-item w3-right w3-button w3-large" href="{% url 'logout' %}">Log Out</a>
-    {% else %}
-    <a class="w3-bar-item w3-right w3-button w3-large" href="{% url 'login' %}">Log In</a>
-    {% endif %}
-  <a href="#" class="w3-right w3-bar-item w3-button w3-large">Help</a>
-</div>
+</nav>
 {% endblock navbar %}
 
   <div class="container mx-auto">
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index a2c9307..ae25fbd 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -4,101 +4,103 @@
 {% block title %}DefNucSyR Engagement Database (DED) - Information Management for DefNucSyR{% endblock title %}
 
 {% block content %}
+    <div class="container mx-auto px-4 py-8">
+        <h1 class="text-4xl font-bold mb-8">DED - Information Management for DefNucSyR</h1>
 
-    <div class="bg-blue-500 text-white p-3 my-2">
-        This is a Tailwind styled div.
-    </div>
-
-    <div class="container mx-auto">
-        <h1 class="text-4xl">DED - Information Management for DefNucSyR</h1>
-        <div class="w3-panel w3-leftbar w3-sand w3-xlarge w3-serif w3-display-container">
-        <span onclick="this.parentElement.style.display='none'"
-              class="w3-button w3-display-topright">&times;</span>
-            <h3>Quote of the day</h3>
-            <p>This is a placeholder for some interesting test. Use of lose.</p>
+        <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-8">
+            <div class="flex justify-between items-center">
+                <h3 class="text-xl font-semibold">Quote of the day</h3>
+                <button class="text-gray-600 hover:text-gray-800"
+                        onclick="this.parentElement.parentElement.style.display='none'">&times;
+                </button>
+            </div>
+            <p class="mt-2">This is a placeholder for some interesting test. Use or lose.</p>
         </div>
 
-        <p>{% lorem %}</p>
+        <p class="mb-8">{% lorem %}</p>
 
-        <div class="container">
-            <header class="text-3xl">
-                <h3>Submarines and Propulsion</h3>
-            </header>
-            <div class="w3-container">
-
-                <h3 class="text-2xl">Assessments & Inspections:</h3>
-                <table class="table table-zebra">
-                    <tr>
-                        <th>Start Date</th>
-                        <th>End Date</th>
-                        <th>Event</th>
-                        <th>Site</th>
-                        <th>Inspectors</th>
+        <div class="mb-12">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold">Submarines and Propulsion</h2>
+        </header>
+        <div class="p-4">
+            <h3 class="text-2xl font-semibold mb-4">Assessments & Inspections:</h3>
+            <table class="w-full mb-4">
+                <thead>
+                    <tr class="bg-gray-200">
+                        <th class="p-2 text-left">Start Date</th>
+                        <th class="p-2 text-left">End Date</th>
+                        <th class="p-2 text-left">Event</th>
+                        <th class="p-2 text-left">Site</th>
+                        <th class="p-2 text-left">Inspectors</th>
                     </tr>
+                </thead>
+                <tbody>
                     {% for s in subs_regulatory %}
-                        <tr>
-                            <td>{{ s.proposed_start_date|date:'j M y' }}</td>
-                            <td>{{ s.proposed_end_date|date:'j M y' }}</td>
-                            <td><a href="{% url 'engagements:engagement_detail' s.pk %}">{{ s }}</a></td>
-                            <td>{{ s.external_party }}</td>
-                            <td>
-                                {% if s.officers.all %}
-                                    {{ s.officers.all|commalist }}
-                                {% endif %}
-                            </td>
-                        </tr>
+                    <tr class="{% cycle 'bg-white' 'bg-gray-100' %}">
+                        <td class="p-2">{{ s.proposed_start_date|date:'j M y' }}</td>
+                        <td class="p-2">{{ s.proposed_end_date|date:'j M y' }}</td>
+                        <td class="p-2"><a href="{% url 'engagements:engagement_detail' s.pk %}" class="text-blue-600 hover:underline">{{ s }}</a></td>
+                        <td class="p-2">{{ s.external_party }}</td>
+                        <td class="p-2">
+                            {% if s.officers.all %}
+                                {{ s.officers.all|commalist }}
+                            {% endif %}
+                        </td>
+                    </tr>
                     {% endfor %}
-                </table>
-                <div class="w3-cell-row">
-                    <div class="w3-cell w3-left">
-                        <a href="{% url 'engagements:create' 'reg' %}" class="w3-button w3-round w3-blue">Add New</a>
-                    </div>
-                    <div class="w3-cell w3-right">
-                        <small>See <a href="#">Enagements</a> for full list</small>
-                    </div>
-                </div>
-                <hr>
-                <h4>Non-regulatory events:</h4>
-                <table class="table table-zebra">
-                    <tr>
-                        <th>Start Date</th>
-                        <th>End Date</th>
-                        <th>Summary</th>
+                </tbody>
+            </table>
+
+            <div class="flex justify-between items-center mb-8">
+                <a href="{% url 'engagements:create' 'reg' %}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add New</a>
+                <small>See <a href="#" class="text-blue-600 hover:underline">Engagements</a> for full list</small>
+            </div>
+
+            <div class="border-b border-gray-300 my-8"></div>
+
+            <h4 class="text-xl font-semibold mb-4">Non-regulatory events:</h4>
+            <table class="w-full mb-4">
+                <thead>
+                    <tr class="bg-gray-200">
+                        <th class="p-2 text-left">Start Date</th>
+                        <th class="p-2 text-left">End Date</th>
+                        <th class="p-2 text-left">Summary</th>
                     </tr>
+                </thead>
+                <tbody>
                     {% if not subs %}
-                        <tr>
-                            <td>None</td>
-                            <td>None</td>
-                            <td>None</td>
-                        </tr>
+                    <tr>
+                        <td class="p-2" colspan="3">No events found</td>
+                    </tr>
                     {% else %}
                         {% for s in subs %}
-                            <tr>
-                                <td>{{ s.proposed_start_date|date:'j M y' }}</td>
-                                <td>{{ s.proposed_end_date|date:'j M y' }}</td>
-                                <td><a href="#">{{ s }}</a></td>
-                            </tr>
+                        <tr class="{% cycle 'bg-white' 'bg-gray-100' %}">
+                            <td class="p-2">{{ s.proposed_start_date|date:'j M y' }}</td>
+                            <td class="p-2">{{ s.proposed_end_date|date:'j M y' }}</td>
+                            <td class="p-2"><a href="#" class="text-blue-600 hover:underline">{{ s }}</a></td>
+                        </tr>
                         {% endfor %}
                     {% endif %}
-                </table>
-                <div>
-                    <button class="w3-button w3-round w3-blue">Add New</button>
-                </div>
-
-                <p>{% lorem %}</p>
+                </tbody>
+            </table>
 
+            <div class="mt-4">
+                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add New</button>
             </div>
         </div>
+    </div>
+</div>
+
 
-        <div class="w3-card-2 w3-margin-top">
-            <header class="w3-container w3-light-blue">
-                <h3>Transport</h3>
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <header class="bg-blue-100 p-4">
+                <h3 class="text-2xl font-bold">Transport</h3>
             </header>
-            <div class="w3-container">
+            <div class="p-4">
                 <p>{% lorem %}</p>
             </div>
         </div>
-
     </div>
-
 {% endblock content %}
diff --git a/engagements/forms.py b/engagements/forms.py
index ae01916..a1c3c44 100644
--- a/engagements/forms.py
+++ b/engagements/forms.py
@@ -1,74 +1,56 @@
-from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Field, Fieldset, Layout, Submit
 from django import forms
 from django.forms.widgets import HiddenInput
 
 from .models import Engagement, EngagementEffort
 
+
 # TODO - need to handle errors correctly in this form and in the template
 
 
 class EngagementEffortReportingCreateForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.layout = Layout(
-            Fieldset(
-                "This is a form",
-                Field("is_planned"),
-                Field("proposed_start_date", css_class="w3-input w3-border w3-round", type="date"),
-                Field("proposed_end_date", css_class="w3-input w3-border w3-round"),
-                "officers",
-                "notes",
-            ),
-            Submit("submit", "Submit", css_class="w3-button w3-green"),
-        )
+        self.fields['is_planned'].widget.attrs.update({"class": "select-lg"})
+        # for field in self.fields.values():
+        #     field.widget.attrs['class'] = 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
 
     class Meta:
         model = EngagementEffort
         fields = [
-            "is_planned",
-            "proposed_start_date",
-            "proposed_end_date",
-            "officers",
-            "notes",
+            'is_planned',
+            'proposed_start_date',
+            'proposed_end_date',
+            'officers',
+            'notes',
         ]
-        help_texts = {
-            "is_planned": ("<br><small><em>To distinguish planned events from retrospective recording</em></small>")
-        }
         widgets = {
-            "proposed_start_date": forms.DateTimeInput(
+            # 'is_planned': forms.Select(
+            #     choices=(
+            #         (True, "YES"),
+            #         (False, "NO"),
+            #     ),
+            #     attrs={'class': 'select-lg w-full max-w-xs'}
+            # ),
+            'proposed_start_date': forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
-                    "type": "datetime-local",
+                    'type': 'datetime-local',
+                    'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
                 },
-                format="j M y H:i",
+                format='j M y H:i',
             ),
-            "proposed_end_date": forms.DateTimeInput(
+            'proposed_end_date': forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
-                    "type": "datetime-local",
+                    'type': 'datetime-local',
+                    'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
                 },
-                format="j M y H:i",
+                format='j M y H:i',
             ),
+            'officers': forms.SelectMultiple(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}),
+            'notes': forms.Textarea(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50', 'rows': 3}),
         }
 
 
 class EngagementEffortRegulationCreateForm(forms.ModelForm):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.layout = Layout(
-            Fieldset(
-                "This is a form",
-                Field("is_planned"),
-                Field("proposed_start_date", css_class="w3-input w3-border w3-round", type="date"),
-                Field("proposed_end_date", css_class="w3-input w3-border w3-round"),
-                "sub_instruments",
-                "officers",
-            ),
-            Submit("submit", "Submit", css_class="w3-button w3-green"),
-        )
 
     class Meta:
         model = EngagementEffort
@@ -86,14 +68,12 @@ class EngagementEffortRegulationCreateForm(forms.ModelForm):
         widgets = {
             "proposed_start_date": forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
                     "type": "datetime-local",
                 },
                 format="j M y H:i",
             ),
             "proposed_end_date": forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
                     "type": "datetime-local",
                 },
                 format="j M y H:i",
@@ -102,20 +82,6 @@ class EngagementEffortRegulationCreateForm(forms.ModelForm):
 
 
 class EngagementEffortPlanningCreateForm(forms.ModelForm):
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.layout = Layout(
-            Fieldset(
-                "This is a form",
-                Field("is_planned"),
-                Field("proposed_start_date", css_class="w3-input w3-border w3-round", type="date"),
-                Field("proposed_end_date", css_class="w3-input w3-border w3-round"),
-                "officers",
-                "notes",
-            ),
-            Submit("submit", "Submit", css_class="w3-button w3-green"),
-        )
 
     class Meta:
         model = EngagementEffort
@@ -132,14 +98,12 @@ class EngagementEffortPlanningCreateForm(forms.ModelForm):
         widgets = {
             "proposed_start_date": forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
                     "type": "datetime-local",
                 },
                 format="j M y H:i",
             ),
             "proposed_end_date": forms.DateTimeInput(
                 attrs={
-                    "class": "w3-input w3-border w3-round",
                     "type": "datetime-local",
                 },
                 format="j M y H:i",
@@ -150,22 +114,15 @@ class EngagementEffortPlanningCreateForm(forms.ModelForm):
 class EngagementEffortTravelCreateForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.helper = FormHelper()
-        self.helper.layout = Layout(
-            Fieldset(
-                "This is a form",
-                Field("is_planned"),
-                Field("proposed_start_date", css_class="w3-input w3-border w3-round", type="date"),
-                Field("proposed_end_date", css_class="w3-input w3-border w3-round"),
-                "officers",
-            ),
-            Submit("submit", "Submit", css_class="w3-button w3-green"),
-        )
+        self.fields['is_planned'].widget.attrs.update({"class": "select-lg"})
+        for field in self.fields.values():
+            field.widget.attrs['class'] = 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
 
     class Meta:
         model = EngagementEffort
         fields = ["is_planned", "proposed_start_date", "proposed_end_date", "officers"]
         widgets = {
+            "is_planned": forms.Select(choices=((True, "YES"), (False, "NO")), attrs={"class": "select select-bordered w-full max-w-xs"}),
             "proposed_start_date": forms.DateTimeInput(attrs={"type": "datetime-local"}),
             "proposed_end_date": forms.DateTimeInput(attrs={"type": "datetime-local"}),
         }
@@ -174,40 +131,44 @@ class EngagementEffortTravelCreateForm(forms.ModelForm):
 class EngagementEffortCreateForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.fields["engagement"].widget = HiddenInput()
-        self.fields["effort_type"].widget = HiddenInput()
+        self.fields['engagement'].widget = HiddenInput()
+        self.fields['effort_type'].widget = HiddenInput()
         if kwargs.get("initial"):
             if not kwargs["initial"]["effort_type"] == "REGULATION":
                 self.fields["sub_instruments"].widget = HiddenInput()
 
+        # Apply Tailwind classes to all visible fields
+        # for field in self.visible_fields():
+        #     field.widget.attrs['class'] = 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
+
     class Meta:
         model = EngagementEffort
         fields = "__all__"
         widgets = {
-            "is_planned": forms.Select(
-                choices=(
-                    (True, "YES"),
-                    (False, "NO"),
-                ),
-                attrs={"class": "w3-border"},
-            ),
+            # "is_planned": forms.Select(
+            #     choices=(
+            #         (True, "YES"),
+            #         (False, "NO"),
+            #     ),
+            #     attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}
+            # ),
             "proposed_start_date": forms.DateTimeInput(
-                attrs={"class": "w3-input w3-border w3-round", "type": "date"},
+                attrs={
+                    "type": "datetime-local",
+                    "class": "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                },
                 format="j M y H:i",
             ),
             "proposed_end_date": forms.DateTimeInput(
-                attrs={"class": "w3-input w3-border w3-round", "type": "date"},
+                attrs={
+                    "type": "datetime-local",
+                    "class": "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                },
                 format="j M y H:i",
             ),
-            "effort_type": forms.Select(attrs={"class": "w3-select w3-border w3-round"}),
-            "officers": forms.SelectMultiple(attrs={"class": "w3-select w3-border w3-round"}),
-            "sub_instruments": forms.SelectMultiple(attrs={"class": "w3-select w3-border w3-round"}),
-        }
-        help_texts = {
-            "proposed_start_date": "<small><em>YYYY-MM-DD HH:MM</em> "
-            "(<strong>Please include time here</strong>)</small>",
-            "proposed_end_date": "<small><em>YYYY-MM-DD HH:MM</em> "
-            "(<strong>Please include time here</strong>)</small>",
+            "effort_type": forms.Select(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}),
+            "officers": forms.SelectMultiple(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}),
+            "sub_instruments": forms.SelectMultiple(attrs={'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'}),
         }
 
 
@@ -235,8 +196,8 @@ class EngagementCreateForm(forms.ModelForm):
             "proposed_end_date": "<small><em>YYYY-MM-DD</em></small>",
         }
         widgets = {
-            "proposed_start_date": forms.DateInput(attrs={"class": "w3-input w3-border w3-round", "type": "date"}),
-            "proposed_end_date": forms.DateInput(attrs={"class": "w3-input w3-border w3-round", "type": "date"}),
-            "engagement_type": forms.Select(attrs={"class": "w3-select w3-input w3-border w3-round"}),
-            "officers": forms.SelectMultiple(attrs={"class": "w3-input w3-border w3-round"}),
+            "proposed_start_date": forms.DateInput(attrs={"type": "date"}),
+            "proposed_end_date": forms.DateInput(attrs={"type": "date"}),
+            "engagement_type": forms.Select(),
+            "officers": forms.SelectMultiple(),
         }
diff --git a/engagements/templates/engagements/engagement_create.html b/engagements/templates/engagements/engagement_create.html
index 1e72ca0..e4aeee6 100644
--- a/engagements/templates/engagements/engagement_create.html
+++ b/engagements/templates/engagements/engagement_create.html
@@ -3,27 +3,49 @@
 {% block title %}Create new engagement{% endblock title %}
 
 {% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold text-center">{{ title }}</h2>
+        </header>
+        <div class="p-6">
+            <div class="mb-8">
+                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
+                    <h4 class="text-lg font-semibold mb-2">Step 1</h4>
+                    <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
+                    <h4 class="text-lg font-semibold mb-2">Step 2</h4>
+                    <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+                </div>
+            </div>
 
-<div class="w3-container w3-cell-row w3-margin-bottom">
-    <h2>{{ title }}</h2>
-    <div class="w3-panel w3-light-blue w3-round w3-leftbar w3-border-blue w3-display-container">
-
-        <span onclick="this.parentElement.style.display='none'"
-              class="w3-button w3-display-topright">&times;</span>
-        <h4>Step 1</h4>
-        <p>To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional),the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
-        <h4>Step 2</h4>
-        <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each compontent can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
-    </div>
-
-    <hr>
-    <div class="w3-container w3-cell-middle">
-        <h4>Enter main details:</h4>
-        <form method="post">{% csrf_token %}
-            {{ form.as_p }}
-            <input type="submit" class="w3-btn w3-green" value="Save">
-        </form>
+            <div class="mt-8">
+                <h4 class="text-xl font-semibold mb-4">Enter main details:</h4>
+                <form method="post" class="space-y-6">
+                    {% csrf_token %}
+                    {% for field in form %}
+                        <div>
+                            <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">
+                                {{ field.label }}
+                            </label>
+                            <div class="mt-1">
+                                {{ field }}
+                            </div>
+                            {% if field.help_text %}
+                                <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p>
+                            {% endif %}
+                            {% for error in field.errors %}
+                                <p class="mt-2 text-sm text-red-600">{{ error }}</p>
+                            {% endfor %}
+                        </div>
+                    {% endfor %}
+                    <div>
+                        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                            Save
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
 </div>
-
 {% endblock content %}
diff --git a/engagements/templates/engagements/engagement_detail.html b/engagements/templates/engagements/engagement_detail.html
index 85ef220..c75523b 100644
--- a/engagements/templates/engagements/engagement_detail.html
+++ b/engagements/templates/engagements/engagement_detail.html
@@ -4,75 +4,110 @@
 {% block title %}{{ engagement }}{% endblock title %}
 
 {% block content %}
+    <div class="container mx-auto px-4 py-8">
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <header class="bg-blue-100 p-4">
+                <h2 class="text-3xl font-bold text-center">{{ engagement.friendly_type }}
+                    at {{ engagement.external_party }}</h2>
+            </header>
+            <div class="p-4">
+                <div class="mb-4">
+                    <a href="{% url 'engagements:edit' engagement.pk %}" class="text-blue-600 hover:underline">Edit
+                        Engagement</a>
+                </div>
 
-<div class="w3-container">
-    <div class="w3-container w3-center">
-        <h2>{{ engagement.friendly_type }} at {{ engagement.external_party }}</h2>
-    </div>
-    <div class="w3-row">
-        <div class="w3-container">
-            <div>
-                <a href="{% url 'engagements:edit' engagement.pk %}">Edit Engagement</a>
-            </div>
-            <section class="w3-container w3-blue">
-                <h3>Details</h3>
-            </section>
-            <table class="w3-table w3-border w3-light-gray w3-bordered">
-                <tr>
-                    <td><strong>Date</strong></td>
-                    <td>{{ engagement.proposed_start_date|date:'l' }} - {{ engagement.proposed_start_date|date:'j M Y' }}</td>
-                </tr>
-                <tr>
-                    <td><strong>Site/Operation:</strong></td>
-                    <td>{{ engagement.external_party }} </td>
-                </tr>
-                <tr>
-                    <td><strong>Subject of Activity</strong></td>
-                    <td>
-                        <p>Summmary text</p>
-                        <ul class="w3-ul">
-                            {% for t in dscs %}
-                            <li><a href='#'>{{ t }}</a></li>
-                            {% endfor %}
-                        </ul>
-                    </td>
-                </tr>
-                <tr>
-                    <td><strong>Inspectors:</strong></td>
-                    <td>{{ engagement.officers.all|commalist }}</td>
-                </tr>
-                <tr>
-                    <td><strong>Planned Effort:</strong></td>
-                    <td>{{ effort_planned|floatformat }} hrs</td>
-                </tr>
-                <tr>
-                    <td><strong>Actual Effort:</strong></td>
-                    <td>{{ effort_actual|floatformat }} hrs</td>
-                </tr>
-                <tr>
-                    <td><strong>Total Effort:</strong></td>
-                    <td>{{ effort_total|floatformat }} hrs</td>
-                </tr>
-            </table>
-            <hr>
-        </div>
+                <h3 class="text-2xl font-semibold mb-4">Details</h3>
+                <div class="bg-white shadow-sm rounded-lg overflow-hidden">
+                    <table class="min-w-full divide-y divide-gray-200 text-sm">
+                        <tbody>
+                            <tr class="bg-gray-50">
+                                <td class="px-4 py-2 font-semibold text-gray-700">Date</td>
+                                <td class="px-4 py-2 text-gray-900">
+                                    {{ engagement.proposed_start_date|date:'l' }} -
+                                    {{ engagement.proposed_start_date|date:'j M Y' }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="px-4 py-2 font-semibold text-gray-700">Site/Operation</td>
+                                <td class="px-4 py-2 text-gray-900">{{ engagement.external_party }}</td>
+                            </tr>
+                            <tr class="bg-gray-50">
+                                <td class="px-4 py-2 font-semibold text-gray-700">Subject of Activity</td>
+                                <td class="px-4 py-2 text-gray-900">
+                                    <p class="mb-2">Summary text</p>
+                                    <table class="min-w-full divide-y divide-gray-200">
+                                        <thead class="bg-gray-50">
+                                        <tr>
+                                            <th scope="col"
+                                                class="px-3 py-2 text-left text-sm font-medium text-gray-700 uppercase tracking-wider">
+                                                DSC
+                                            </th>
+                                        </tr>
+                                        </thead>
+                                        <tbody class="bg-white divide-y divide-gray-200">
+                                        {% for t in dscs %}
+                                            <tr>
+                                                <td class="px-3 py-2 whitespace-nowrap text-base">
+                                                    <a href='#' class="text-blue-600 hover:underline">{{ t }}</a>
+                                                </td>
+                                            </tr>
+                                        {% endfor %}
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="px-4 py-2 font-semibold text-gray-700">Inspectors</td>
+                                <td class="px-4 py-2 text-gray-900">{{ engagement.officers.all|commalist }}</td>
+                            </tr>
+                            <tr class="bg-gray-50">
+                                <td class="px-4 py-2 font-semibold text-gray-700">Planned Effort</td>
+                                <td class="px-4 py-2 text-gray-900">{{ effort_planned|floatformat }} hrs</td>
+                            </tr>
+                            <tr>
+                                <td class="px-4 py-2 font-semibold text-gray-700">Actual Effort</td>
+                                <td class="px-4 py-2 text-gray-900">{{ effort_actual|floatformat }} hrs</td>
+                            </tr>
+                            <tr class="bg-gray-50">
+                                <td class="px-4 py-2 font-semibold text-gray-700">Total Effort</td>
+                                <td class="px-4 py-2 text-gray-900">{{ effort_total|floatformat }} hrs</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
 
-        <div class="w3-container w3-light-gray">
-            <h3>Effort for this engagement</h3>
-            Add:
-            <a href="{% url 'engagements:effort_create' engagement.pk "TRAVEL" %}">Travel</a> |
-            <a href="{% url 'engagements:effort_create' engagement.pk "PLANNING" %}">Planning</a> |
-            <a href="{% url 'engagements:effort_create' engagement.pk "REGULATION" %}">Regulation</a> |
-            <a href="{% url 'engagements:effort_create' engagement.pk "REPORTING" %}">Reporting</a>
+                <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8">
+                    <div class="px-4 py-5 sm:px-6 bg-blue-100">
+                        <h3 class="text-2xl font-semibold text-black">Effort for this engagement</h3>
+                    </div>
+                    <div class="border-t border-gray-200">
+                        <div class="px-4 py-5 sm:p-6">
+                            <div class="mb-4">
+                                <span class="font-medium">Add:</span>
+                                <a href="{% url 'engagements:effort_create' engagement.pk 'TRAVEL' %}"
+                                   class="text-blue-600 hover:underline ml-2">Travel</a>
+                                <a href="{% url 'engagements:effort_create' engagement.pk 'PLANNING' %}" class="text-blue-600 hover:underline ml-2">Planning</a>
+                                <a href="{% url 'engagements:effort_create' engagement.pk "REGULATION" %}"
+                                   class="text-blue-600 hover:underline ml-2">Regulation</a>
+                                <a href="{% url 'engagements:effort_create' engagement.pk "REPORTING" %}"
+                                   class="text-blue-600 hover:underline ml-2">Reporting</a>
+                            </div>
 
-            {% if effort %}
-            {% for e in effort.all %}
-            <div id="planned_swap_{{ e.id }}">
-                {% include "engagements/snippets/effort_summary_panel.html" with e=e %}
+                            {% if effort %}
+                                <div class="space-y-4">
+                                    {% for e in effort.all %}
+                                        <div id="planned_swap_{{ e.id }}" class="bg-gray-50 p-4 rounded-lg">
+                                            {% include "engagements/snippets/effort_summary_panel.html" with e=e %}
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                            {% else %}
+                                <p class="text-gray-500">No effort records found for this engagement.</p>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
             </div>
-            {% endfor %}
-            {% endif %}
         </div>
     </div>
-
-    {% endblock content %}
+{% endblock content %}
diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html
index 65e2e21..b776fd8 100644
--- a/engagements/templates/engagements/engagement_effort_create.html
+++ b/engagements/templates/engagements/engagement_effort_create.html
@@ -1,20 +1,34 @@
 {% extends "core/base.html" %}
 
-{% load crispy_forms_tags %}
-
 {% block title %}Add {{ etype }} effort to Engagement{% endblock title %}
 
 {% block content %}
 
-    <div class="w3-container w3-cell-row w3-margin-bottom">
-        <h2>Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event at  {{ engagement.external_party }} on {{ engagement.proposed_start_date }}</h2>
+   <div class="container mx-auto max-w-2xl mt-8">
+    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        <h2 class="text-2xl font-bold mb-6">Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event</h2>
+        <p class="mb-6">{{ engagement.external_party }} on {{ engagement.proposed_start_date }}</p>
 
-        <div class="w3-container w3-cell-middle">
-            <h4>Enter details:</h4>
-            <form method="post">{% csrf_token %}
-                {% crispy form form.helper %}
-            </form>
-        </div>
+        <form method="post" class="space-y-6">
+            {% csrf_token %}
+            {% for field in form %}
+                <div class="mb-4">
+                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
+                        {{ field.label }}
+                    </label>
+                    {{ field }}
+                    {% if field.help_text %}
+                        <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
+                    {% endif %}
+                </div>
+            {% endfor %}
+            <div class="mt-6">
+                <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    Submit
+                </button>
+            </div>
+        </form>
     </div>
+</div>
 
 {% endblock content %}
diff --git a/engagements/templates/engagements/engagement_form.html b/engagements/templates/engagements/engagement_form.html
index e05c639..3dfe249 100644
--- a/engagements/templates/engagements/engagement_form.html
+++ b/engagements/templates/engagements/engagement_form.html
@@ -3,30 +3,66 @@
 {% load static %}
 
 {% block title %}Create new engagement{% endblock title %}
-{% block extra_head_tags %}
-<link rel="stylesheet" href="{% static 'css/styles.css' %}"/>
-{% endblock extra_head_tags %}
 
 {% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold text-center">{{ title }}</h2>
+        </header>
+        <div class="p-6">
+            <div class="mb-8">
+                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
+                    <h4 class="text-lg font-semibold mb-2">Step 1</h4>
+                    <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
+                    <h4 class="text-lg font-semibold mb-2">Step 2</h4>
+                    <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+                </div>
+            </div>
 
-<div class="format-container">
-    <div class="form-thing">
-        <h2>{{ title }}</h2>
-        <p>TAKE THIS OUT</p>
-        <span onclick="this.parentElement.style.display='none'"
-              class="w3-button w3-display-topright">&times;</span>
-        <h4>Step 1</h4>
-        <p>To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional),the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
-        <h4>Step 2</h4>
-        <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each compontent can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
-    </div>
-    <div class="form-thing">
-        <h4>Enter main details:</h4>
-        <form method="post">{% csrf_token %}
-            {{ form.as_p }}
-            <input type="submit" class="w3-btn w3-green" value="Save">
-        </form>
+            <div class="mt-8">
+                <h4 class="text-xl font-semibold mb-4">Enter main details:</h4>
+                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+                    <div class="px-4 py-5 sm:p-6">
+                        <form method="post" class="space-y-6">
+                            {% csrf_token %}
+                            {% for field in form %}
+                                <div class="mb-4">
+                                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
+                                        {{ field.label }}
+                                    </label>
+                                    {% if field.field.widget.input_type == 'checkbox' %}
+                                        <div class="flex items-center">
+                                            <input type="checkbox" name="{{ field.name }}" id="{{ field.id_for_label }}" {% if field.value %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                                            <span class="ml-2 text-gray-700">{{ field.help_text|safe }}</span>
+                                        </div>
+                                    {% elif field.field.widget.input_type == 'select' %}
+                                        <select name="{{ field.name }}" id="{{ field.id_for_label }}" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
+                                            {% for choice in field.field.choices %}
+                                                <option value="{{ choice.0 }}" {% if choice.0 == field.value %}selected{% endif %}>{{ choice.1 }}</option>
+                                            {% endfor %}
+                                        </select>
+                                    {% else %}
+                                        <input type="{{ field.field.widget.input_type }}" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value|default:'' }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
+                                    {% endif %}
+                                    {% if field.help_text and field.field.widget.input_type != 'checkbox' %}
+                                        <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p>
+                                    {% endif %}
+                                    {% for error in field.errors %}
+                                        <p class="mt-2 text-sm text-red-600">{{ error }}</p>
+                                    {% endfor %}
+                                </div>
+                            {% endfor %}
+                            <div>
+                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                    Save
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
-
 {% endblock content %}
diff --git a/engagements/templates/engagements/ep_org.html b/engagements/templates/engagements/ep_org.html
index 370a117..9fbb9dd 100644
--- a/engagements/templates/engagements/ep_org.html
+++ b/engagements/templates/engagements/ep_org.html
@@ -1,429 +1,111 @@
 {% extends "core/base.html" %}
-
 {% block title %}Create new engagement{% endblock title %}
-
 {% load table_extras %}
-
 {% load static %}
 
 {% block content %}
-
-<div class="container">
-
-  <h2 class="text-3xl mx-auto m-3">Engagement Plans for {{ entity.name }}</h2>
-    
-  <a href="{% url 'engagements:create' entity.slug 'reg' %}" class="link">Add New Regulatory Engagement</a> | <a href="{% url 'engagements:create' entity.slug %}">Add New Engagement</a>
-</div>
-
-<div class="ontainer">
-    <h3 class="text-2xl mx-auto m-3">2023</h3>
-    <table class="table table-sm">
-        <thead>
-            <tr>
-                <th>Start Date</th>
-                <th>End Date</th>
-                <th>Engagement</th>
-                <th>Engagement Type</th>
-                <th>Area/Theme</th>
-                <th>Inspectors Involved</th>
-                <th>DSCs</th>
-                <th>Travel Effort</th>
-                <th>Planning and Regulation Effort</th>
-                <th>Completion Status</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for e in engagements %}
-            <tr>
-                <td>{{ e.proposed_start_date|date:'j M Y' }}</td>
-                <td>{{ e.proposed_end_date|date:'j M Y' }}</td>
-                <td><a href="{% url 'engagements:engagement_detail' e.pk %}">{{ e }}</a></td>
-                <td>{{ e.friendly_type }}</td>
-                <td>Area Theme</td>
-                <td>
-                    <ul class="w3-ul">
-                    {% for inspector in e.officers.all %}
-                        <li>{{ inspector }} </li>
-                    {% endfor %}
-                    </ul>
-                </td>
-                <td>
-                    <ul class="w3-ul">
-                        {% for dsc in e.dscs %}
-                        <li><a href="#">{{ dsc.short }}</a></li>
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold">Engagement Plans for {{ entity.name }}</h2>
+        </header>
+        <div class="p-4">
+            <div class="mb-4">
+                <a href="{% url 'engagements:create' entity.slug 'reg' %}" class="text-blue-600 hover:underline">Add New Regulatory Engagement</a> | 
+                <a href="{% url 'engagements:create' entity.slug %}" class="text-blue-600 hover:underline">Add New Engagement</a>
+            </div>
+
+            <h3 class="text-2xl font-semibold mb-4">2023</h3>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Engagement</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Engagement Type</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Area/Theme</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Inspectors Involved</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSCs</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Travel Effort</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Planning and Regulation Effort</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completion Status</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        {% for e in engagements %}
+                        <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.proposed_start_date|date:'j M Y' }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.proposed_end_date|date:'j M Y' }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600 hover:underline">
+                                <a href="{% url 'engagements:engagement_detail' e.pk %}">{{ e }}</a>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.friendly_type }}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Area Theme</td>
+                            <td class="px-6 py-4 text-sm text-gray-500">
+                                <ul class="list-disc list-inside">
+                                {% for inspector in e.officers.all %}
+                                    <li>{{ inspector }}</li>
+                                {% endfor %}
+                                </ul>
+                            </td>
+                            <td class="px-6 py-4 text-sm text-gray-500">
+                                <ul class="list-disc list-inside">
+                                {% for dsc in e.dscs %}
+                                    <li><a href="#" class="text-blue-600 hover:underline">{{ dsc.short }}</a></li>
+                                {% endfor %}
+                                </ul>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TBC</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TBC</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Incomplete</td>
+                        </tr>
                         {% endfor %}
-                    </ul>
-                </td>
-                <td>TBC</td>
-                <td>TBC</td>
-                <td class="ep-table">Incomplete</td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-
-</div>
-
-<hr>
-
-<div class="container">
-    <div class="w3-cell-row">
-        <div class="w3-container w3-cell">
-            <h3>Total DSC coverage</h3>
-            <table class="summary-table">
-                <tr>
-                    <th>DSC</th>
-                    <th>Allocated time</th>
-                </tr>
-                {% for dsc in dscs %}
-                <tr>
-                    <td>{{ dsc }} </td>
-                    <td>{{ dsc | effort_for_org:entity }}</td>
-                </tr>
-                {% endfor %}
-            </table>
-        </div>
-        <div class="w3-container w3-cell">
-            <h3>Another table of data</h3>
-            <table class="summary-table">
-                <tr>
-                    <th>DSC</th>
-                    <th>Allocated time</th>
-                </tr>
-                {% for dsc in dscs %}
-                <tr>
-                    <td>{{ dsc }} </td>
-                    <td>{{ dsc | effort_for_org:entity }}</td>
-                </tr>
-                {% endfor %}
-            </table>
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Total DSC coverage</h3>
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSC</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocated time</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            {% for dsc in dscs %}
+                            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc | effort_for_org:entity }}</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Another table of data</h3>
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DSC</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocated time</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            {% for dsc in dscs %}
+                            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ dsc | effort_for_org:entity }}</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
-
     </div>
 </div>
-
-<style type="text/css" media="screen">
-
-  /* (A) CONTAINER */
-  /* https://code-boxx.com/beginner-create-grid-html-css/ */
-    #grid-col {
-
-    /* (A1) GRID LAYOUT */
-    display: grid;
-
-    /* (A2) SPECIFY COLUMNS */
-      grid-template-columns: 75px repeat(31, 40px);
-
-    /* we can also specify exact pixels, percentage, repeat
-      grid-template-columns: 50px 100px 150px;
-      grid-template-columns: 25% 50% 25%;
-      grid-template-columns: 100px 20% auto;
-      grih-template-columns: repeat(3, auto); */
-    }
-
-    /* (B) GRID CELLS */
-    div.cell {
-        background: white;
-        border: 1px solid lightgray;
-        padding: 10px;
-    }
-
-    div.cellred{
-        background: red;
-        border: 1px solid lightgray;
-        padding: 10px;
-    }
-
-    div.cellyellow{
-        background: yellow;
-        border: 1px solid lightgray;
-        padding: 10px;
-    }
-    div.cellorange{
-        background: orange;
-        border: 1px solid lightgray;
-        padding: 10px;
-    }
-    /* (C) RESPONSIVE - 1 COLUMN ON SMALL SCREENS */
- /*   @media screen and (max-width: 640px) {
-        #grid-col { grid-template-columns: 100%; }
-    }
- */
-/* </style>
-<!-- <div class="w3-container w3-padding-16"> -->
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell"></div><div class="cell">1</div> -->
-<!--        <div class="cell">2</div><div class="cell">3</div> -->
-<!--        <div class="cell">4</div><div class="cell">5</div> -->
-<!--        <div class="cell">6</div><div class="cell">7</div> -->
-<!--        <div class="cell">8</div><div class="cell">9</div> -->
-<!--        <div class="cell">10</div><div class="cell">11</div> -->
-<!--        <div class="cell">12</div><div class="cell">13</div> -->
-<!--        <div class="cell">14</div><div class="cell">15</div> -->
-<!--        <div class="cell">16</div><div class="cell">17</div> -->
-<!--        <div class="cell">18</div><div class="cell">19</div> -->
-<!--        <div class="cell">20</div><div class="cell">21</div> -->
-<!--        <div class="cell">22</div><div class="cell">23</div> -->
-<!--        <div class="cell">24</div><div class="cell">25</div> -->
-<!--        <div class="cell">26</div><div class="cell">27</div> -->
-<!--        <div class="cell">28</div><div class="cell">29</div> -->
-<!--        <div class="cell">30</div><div class="cell">31</div> -->
-<!--      </div> -->
-<!--     </div> -->
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Jan</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--         <div class="cellred"><small></small></div><div class="cellred"><small></small></div> -->
-<!--         <div class="cellred"><small></small></div><div class="cellred"><small></small></div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Feb</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> -->
-<!--        <div class="cellyellow"><small></small></div><div class="cellyellow"><small></small></div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Mar</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!--        <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!--        <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!--        <div class="cellorange"><small></small></div><div class="cellorange"><small></small></div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--        <div class="cell">-</div><div class="cell">-</div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Apr</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">May</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Jun</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Jul</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Aug</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Sep</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Oct</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Nov</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-<!--     <div class="grid"> -->
-<!--      <div id="grid-col"> -->
-<!--        <div class="cell">Dec</div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--        <div class="cell"></div><div class="cell"></div> -->
-<!--      </div> -->
-<!--     </div> -->
-
-
-<script src="{% static 'js/yoap.js' %}"></script>
-
 {% endblock content %}
diff --git a/engagements/templates/engagements/index.html b/engagements/templates/engagements/index.html
index dbd62f9..a63aceb 100644
--- a/engagements/templates/engagements/index.html
+++ b/engagements/templates/engagements/index.html
@@ -3,27 +3,33 @@
 {% block title %}Engagements{% endblock title %}
 
 {% block content %}
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h2 class="text-3xl font-bold">Engagement Planning</h2>
+        </header>
+        <div class="p-4">
+            <h3 class="text-2xl font-semibold mb-4">Your entities</h3>
 
-    <div class="container">
-        <h2 class="text-3xl mx-auto m-3">Engagement Planning</h2>
-        <h1 class="text-2xl mx-auto m-3">Your entities</h1>
-
-        <table class="table table-sm">
-            <thead>
-            <tr>
-                <th>Engagement Plan</th>
-                <th>Scheduled Engagements</th>
-                <th>Total time</th>
-            </tr>
-            </thead>
-            {% for e in entities %}
-                <tr>
-                    <td><a href="{% url 'engagements:plan_for_org' e.slug %}">{{ e.name }}</a></td>
-                    <td>{{ e.engagement_set.all.count }}</td>
-                    <td>NA</td>
-                </tr>
-            {% endfor %}
-        </table>
+            <table class="w-full mb-4">
+                <thead>
+                    <tr class="bg-gray-200">
+                        <th class="p-2 text-left">Engagement Plan</th>
+                        <th class="p-2 text-left">Scheduled Engagements</th>
+                        <th class="p-2 text-left">Total time</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for e in entities %}
+                    <tr class="{% cycle 'bg-white' 'bg-gray-100' %}">
+                        <td class="p-2"><a href="{% url 'engagements:plan_for_org' e.slug %}" class="text-blue-600 hover:underline">{{ e.name }}</a></td>
+                        <td class="p-2">{{ e.engagement_set.all.count }}</td>
+                        <td class="p-2">NA</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
-
+</div>
 {% endblock content %}
diff --git a/engagements/templates/engagements/organisations.html b/engagements/templates/engagements/organisations.html
index 7991784..f2605c4 100644
--- a/engagements/templates/engagements/organisations.html
+++ b/engagements/templates/engagements/organisations.html
@@ -4,49 +4,53 @@
 {% block title %}Regulated Entities{% endblock title %}
 
 {% block content %}
-
-    <div class="container mx-auto">
-        <h1 class="text-3xl mx-auto m-3">Regulated Entities</h1>
-        <div class="overflow x-auto">
-            <table class="table table-sm table-zebra">
-                <thead>
-                <tr>
-                    <th>Entity</th>
-                    <th>Team</th>
-                    <th>Lead Inspector[s]</th>
-                    <th>Responsible Person[s]</th>
-                    <th>Accountable Person[s]</th>
-                </tr>
-                </thead>
-                {% for e in entities %}
-                    <tr>
-                        <td>{{ e.name }}</td>
-                        <td>{{ e.lead_team }}</td>
-                        <td>
-                            {% if e.lead_inspector.all %}
-                                {{ e.lead_inspector.all|commalist }}
-                            {% endif %}
-                        </td>
-                        <td>
-                            <!-- rp -->
-                            {% if e.rp.all %}
-                                {% for p in e.rp.all %}
-                                    {{ p }}
-                                {% endfor %}
-                            {% endif %}
-                        </td>
-                        <td>
-                            <!-- ap -->
-                            {% if e.ap.all %}
-                                {% for p in e.ap.all %}
-                                    {{ p }}
-                                {% endfor %}
-                            {% endif %}
-                        </td>
-                    </tr>
-                {% endfor %}
-            </table>
+<div class="container mx-auto px-4 py-8">
+    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+        <header class="bg-blue-100 p-4">
+            <h1 class="text-3xl font-bold">Regulated Entities</h1>
+        </header>
+        <div class="p-4">
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entity</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Team</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lead Inspector[s]</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Responsible Person[s]</th>
+                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Accountable Person[s]</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        {% for e in entities %}
+                            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"><a href="#" class="text-blue-600 hover:text-blue-900">{{ e.name }}</a></td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.lead_team }}</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {% if e.lead_inspector.all %}
+                                        {{ e.lead_inspector.all|commalist }}
+                                    {% endif %}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {% if e.rp.all %}
+                                        {% for p in e.rp.all %}
+                                            {{ p }}{% if not forloop.last %}, {% endif %}
+                                        {% endfor %}
+                                    {% endif %}
+                                </td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    {% if e.ap.all %}
+                                        {% for p in e.ap.all %}
+                                            {{ p }}{% if not forloop.last %}, {% endif %}
+                                        {% endfor %}
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
-
+</div>
 {% endblock content %}
diff --git a/engagements/templates/engagements/snippets/effort_summary_panel.html b/engagements/templates/engagements/snippets/effort_summary_panel.html
index 235a67a..d0dc256 100644
--- a/engagements/templates/engagements/snippets/effort_summary_panel.html
+++ b/engagements/templates/engagements/snippets/effort_summary_panel.html
@@ -1,41 +1,33 @@
 {% load table_extras %}
 
-{% if e.is_planned %}
-  <div class="w3-panel w3-pale-green w3-topbar w3-border-green">
-{% else %}
-  <div class="w3-panel w3-light-gray w3-topbar w3-border-green">
-{% endif %}
-  <div class="w3-cell-row">
-    <div class="w3-cell w3-align-left">
-      <h5>{{ e.proposed_start_date|date:'j M Y' }} - {{ e.effort_type }}</h5>
-    </div>
-    <div class="w3-cell w3-right-align">
-      <p> {{ e.effort_total_hours|floatformat }} hrs</p>
-      Planned: {{ e.is_planned }}
-      <button hx-get="{% url 'engagements:htmx-effort-planned' e.id %}" hx-target="#planned_swap_{{ e.id }}">
-          Flip
+<div class="bg-white shadow-sm rounded-lg overflow-hidden border {% if e.is_planned %}border-green-500{% else %}border-gray-300{% endif %} mb-4">
+  <div class="px-4 py-3 bg-gray-50 flex justify-between items-center">
+    <h5 class="text-lg font-semibold">{{ e.proposed_start_date|date:'j M Y' }} - {{ e.effort_type }}</h5>
+    <div class="text-right">
+      <p class="text-sm font-medium">{{ e.effort_total_hours|floatformat }} hrs</p>
+      <span class="text-sm text-gray-500">Planned: {{ e.is_planned|yesno:"Yes,No" }}</span>
+      <button hx-get="{% url 'engagements:htmx-effort-planned' e.id %}" hx-target="#planned_swap_{{ e.id }}" class="ml-2 px-2 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600">
+        Flip
       </button>
     </div>
   </div>
-  <div>
-    <strong>Inspectors:</strong> {{ e.officers.all|commalist }}
-  </div>
-  <div>
-    <strong>Start time</strong>: {{ e.proposed_start_date|date:'H:i' }}
-    {% if e.proposed_end_date %}
-      - {{ e.proposed_end_date|date:'H:i' }}
-    {% endif %}
-  </div>
-
-  <div>
+  <div class="px-4 py-3">
+    <p class="mb-2"><strong class="font-medium">Inspectors:</strong> {{ e.officers.all|commalist }}</p>
+    <p class="mb-2">
+      <strong class="font-medium">Start time:</strong> {{ e.proposed_start_date|date:'H:i' }}
+      {% if e.proposed_end_date %}
+        - {{ e.proposed_end_date|date:'H:i' }}
+      {% endif %}
+    </p>
     {% if e.sub_instruments.all %}
-      <strong>DSCs</strong>:
-    <ul>
-      {% for dsc in e.sub_instruments.all %}
-        <li><a href="#">{{ dsc.title }}</a></li>
-      {% endfor %}
-  </ul>
+      <div>
+        <strong class="font-medium">DSCs:</strong>
+        <ul class="list-disc list-inside mt-1 ml-4">
+          {% for dsc in e.sub_instruments.all %}
+            <li><a href="#" class="text-blue-600 hover:underline">{{ dsc.title }}</a></li>
+          {% endfor %}
+        </ul>
+      </div>
     {% endif %}
-
   </div>
 </div>
diff --git a/requirements.txt b/requirements.txt
index 601c07a..468d422 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,5 +1,4 @@
 Django>=4.2.11,<5.0.0
-django-crispy-forms
 #django-extensions
 #faker>=13.14.0,<14.0.0
 django-htmx==1.17.3