From f78793d610bba8c04157b1f5bd73df19734c2b91 Mon Sep 17 00:00:00 2001
From: Akhileshwar Shriram <112577383+AkhilTheBoss@users.noreply.github.com>
Date: Wed, 13 May 2026 16:13:38 -0700
Subject: [PATCH] feat: modified event manager to use davis-react components

---
 .../AuthenticatedStatusMessage.tsx            |   98 +-
 .../CustomForms/DeleteBlockModal.tsx          |   40 +-
 .../CustomForms/EditableFormBlock.tsx         |  109 +-
 .../components/CustomForms/HeadingBlock.tsx   |   10 +-
 .../components/CustomForms/HeadingModal.tsx   |   51 +-
 .../components/CustomForms/NonUserForm.tsx    |   64 +-
 .../components/CustomForms/PromptBlock.tsx    |  157 +--
 .../components/CustomForms/PromptModal.tsx    |  282 ++--
 .../CustomForms/ShippingAddressForm.tsx       |  106 +-
 .../components/CustomForms/TextBlockModal.tsx |   41 +-
 .../EventsManager/AutoSyncToProjectModal.tsx  |  155 ++-
 .../EventsManager/CancelEventModal.tsx        |   49 +-
 .../EventsManager/CollectShippingMessage.tsx  |   27 +-
 .../EventInstructionsSegment.tsx              |  142 +-
 .../EventsManager/EventSettingsModal.tsx      |  197 +--
 .../EventsManager/EventSettingsSegment.tsx    |  210 ++-
 .../EventsManager/FeeWaiverInputMessage.tsx   |   27 +-
 .../EventsManager/FeeWaiverModal.tsx          |   74 +-
 .../EventsManager/FeeWaiverStatusLabel.tsx    |   21 +-
 .../EventsManager/FeeWaiversSegment.tsx       |  185 ++-
 .../EventsManager/ParticipantsSegment.tsx     |  475 +++----
 .../EventsManager/PaymentStatusLabel.tsx      |   51 +-
 .../RegistrationOpenStatusMessage.tsx         |  100 +-
 .../RegistrationSuccessMessage.tsx            |   63 +-
 .../UnregisterParticipantModal.tsx            |   38 +-
 .../UnregisterParticipantsModal.tsx           |   48 +-
 .../EventsManager/ManageEvent.tsx             | 1221 +++++------------
 .../controlpanel/EventsManager/index.tsx      |  316 ++---
 28 files changed, 1689 insertions(+), 2668 deletions(-)

diff --git a/client/src/components/CustomForms/AuthenticatedStatusMessage.tsx b/client/src/components/CustomForms/AuthenticatedStatusMessage.tsx
index 1d9876988..90ec66c96 100644
--- a/client/src/components/CustomForms/AuthenticatedStatusMessage.tsx
+++ b/client/src/components/CustomForms/AuthenticatedStatusMessage.tsx
@@ -1,83 +1,45 @@
-import { Message, Icon, MessageProps } from "semantic-ui-react";
+import { IconUserCircle, IconKey } from "@tabler/icons-react";
 import Breakpoint from "../util/Breakpoints";
 import { User } from "../../types";
 
-interface AuthenticatedStatusMessageProps extends MessageProps {
+interface AuthenticatedStatusMessageProps {
   user: User;
+  className?: string;
 }
 
 const AuthenticatedStatusMessage: React.FC<AuthenticatedStatusMessageProps> = ({
   user,
-  ...rest
+  className,
 }) => {
-  if (user.isAuthenticated) {
-    return (
-      <Message info {...rest}>
-        <Message.Content>
-          <Breakpoint name="desktop">
-            <Icon.Group size="big">
-              <Icon name="user circle" />
-              <Icon corner name="key" />
-            </Icon.Group>
-            <span className="ml-1p">
-              You're logged into Conductor as{" "}
-              <strong>
-                {user.firstName} {user.lastName}
-              </strong>
-              .
-            </span>
-          </Breakpoint>
-          <Breakpoint name="mobileOrTablet">
-            <div className="text-center">
-              <div>
-                <Icon.Group size="big">
-                  <Icon name="user circle" />
-                  <Icon corner name="key" />
-                </Icon.Group>
-              </div>
-              <p>
-                You're logged into Conductor as{" "}
-                <strong>
-                  {user.firstName} {user.lastName}
-                </strong>
-                .
-              </p>
-            </div>
-          </Breakpoint>
-        </Message.Content>
-      </Message>
-    );
-  }
+  const msgText = user.isAuthenticated
+    ? <>You're logged into Conductor as <strong>{user.firstName} {user.lastName}</strong>.</>
+    : <>You are not logged in. You must login to Conductor to register for this event.</>;
+
+  const colorClass = user.isAuthenticated
+    ? "bg-blue-50 border-blue-200 text-blue-800"
+    : "bg-yellow-50 border-yellow-200 text-yellow-800";
 
   return (
-    <Message warning {...rest}>
-      <Message.Content>
-        <Breakpoint name="desktop">
-          <Icon.Group size="big">
-            <Icon name="user circle" />
-            <Icon corner name="key" />
-          </Icon.Group>
-          <span className="ml-1p">
-            You are not logged in. You must login to Conductor to register for
-            this event.
-          </span>
-        </Breakpoint>
-        <Breakpoint name="mobileOrTablet">
-          <div className="text-center">
-            <div>
-              <Icon.Group size="big">
-                <Icon name="user circle" />
-                <Icon corner name="key" />
-              </Icon.Group>
-            </div>
-            <p>
-              You are not logged in. You must login to Conductor to register for
-              this event.
-            </p>
+    <div className={`flex items-start gap-3 p-4 border rounded-md ${colorClass} ${className ?? ""}`}>
+      <Breakpoint name="desktop">
+        <div className="flex items-center gap-3">
+          <div className="relative shrink-0">
+            <IconUserCircle size={24} />
+            <IconKey size={12} className="absolute -bottom-1 -right-1" />
+          </div>
+          <span className="text-sm">{msgText}</span>
+        </div>
+      </Breakpoint>
+      <Breakpoint name="mobileOrTablet">
+        <div className="text-center w-full text-sm">
+          <div className="flex justify-center mb-2 relative inline-block">
+            <IconUserCircle size={24} />
+            <IconKey size={12} className="absolute -bottom-1 -right-1" />
           </div>
-        </Breakpoint>
-      </Message.Content>
-    </Message>
+          <p>{msgText}</p>
+        </div>
+      </Breakpoint>
+    </div>
   );
 };
 
diff --git a/client/src/components/CustomForms/DeleteBlockModal.tsx b/client/src/components/CustomForms/DeleteBlockModal.tsx
index d79513d8c..b08757525 100644
--- a/client/src/components/CustomForms/DeleteBlockModal.tsx
+++ b/client/src/components/CustomForms/DeleteBlockModal.tsx
@@ -1,6 +1,7 @@
-import { Modal, Button, Icon, ModalProps } from "semantic-ui-react";
+import { Modal, Button } from "@libretexts/davis-react";
+import { IconTrash } from "@tabler/icons-react";
 
-interface DeleteBlockModalProps extends ModalProps {
+interface DeleteBlockModalProps {
   show: boolean;
   blockType: "heading" | "textBlock" | "prompt";
   onSave: () => void;
@@ -14,24 +15,31 @@ const DeleteBlockModal: React.FC<DeleteBlockModalProps> = ({
   onSave,
   onRequestClose,
   loading,
-  ...rest
 }) => {
   return (
-    <Modal open={show} onClose={() => onRequestClose()} {...rest}>
-      <Modal.Header>Delete Block</Modal.Header>
-      <Modal.Content>
+    <Modal open={show} onClose={onRequestClose} size="sm">
+      <Modal.Header>
+        <Modal.Title>Delete Block</Modal.Title>
+        <Modal.Close />
+      </Modal.Header>
+      <Modal.Body>
         <p>
-          Are you sure you want to delete this <strong>{blockType}</strong>{" "}
-          block?
+          Are you sure you want to delete this <strong>{blockType}</strong> block?
         </p>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button onClick={() => onRequestClose()}>Cancel</Button>
-        <Button loading={loading ?? false} color="red" onClick={() => onSave()}>
-          <Icon name="trash" />
-          Delete Block
-        </Button>
-      </Modal.Actions>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onRequestClose}>Cancel</Button>
+          <Button
+            variant="destructive"
+            icon={<IconTrash size={16} />}
+            loading={loading ?? false}
+            onClick={onSave}
+          >
+            Delete Block
+          </Button>
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/components/CustomForms/EditableFormBlock.tsx b/client/src/components/CustomForms/EditableFormBlock.tsx
index 8ae3d43f3..ea6758d46 100644
--- a/client/src/components/CustomForms/EditableFormBlock.tsx
+++ b/client/src/components/CustomForms/EditableFormBlock.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import DOMPurify from "dompurify";
 import { marked } from "marked";
-import { Segment, Label, Button, Icon, SegmentProps } from "semantic-ui-react";
+import { IconArrowUp, IconArrowDown, IconPencil, IconTrash } from "@tabler/icons-react";
+import { Button } from "@libretexts/davis-react";
 import {
   isCustomFormHeadingOrTextBlock,
   isCustomFormPromptBlock,
@@ -9,8 +10,9 @@ import {
 import { CustomFormElement } from "../../types";
 import { getFriendlyUIType } from "../../utils/customFormHelpers";
 
-interface EditableFormBlockProps extends SegmentProps {
+interface EditableFormBlockProps {
   item: CustomFormElement;
+  disabled?: boolean;
   onMove: (item: CustomFormElement, direction: "up" | "down") => void;
   onRequestEdit: (order: number) => void;
   onRequestDelete: (order: number) => void;
@@ -18,13 +20,11 @@ interface EditableFormBlockProps extends SegmentProps {
 
 const EditableFormBlock: React.FC<EditableFormBlockProps> = ({
   item,
+  disabled,
   onMove,
   onRequestEdit,
   onRequestDelete,
-  ...rest
 }) => {
-  const { disabled } = rest;
-
   useEffect(() => {
     DOMPurify.addHook("afterSanitizeAttributes", (node) => {
       if ("target" in node) {
@@ -43,59 +43,66 @@ const EditableFormBlock: React.FC<EditableFormBlockProps> = ({
     __html: DOMPurify.sanitize(marked(textToRender, { breaks: true })),
   };
 
+  const typeLabel =
+    item.uiType === "prompt" && isCustomFormPromptBlock(item)
+      ? item.promptRequired
+        ? `(Required)`
+        : `(Optional)`
+      : "";
+
   return (
-    <Segment {...rest}>
-      <Label attached="top left" className="peerreview-rubricedit-label">
-        <Button.Group size="tiny">
-          <Button
-            icon="arrow up"
-            onClick={() => onMove(item, "up")}
-            disabled={disabled}
-          />
-          <Button
-            icon="arrow down"
-            onClick={() => onMove(item, "down")}
-            disabled={disabled}
-          />
-        </Button.Group>
-        <span className="ml-1r">
-          <strong>#{item.order}:</strong> {getFriendlyUIType(item.uiType)}{" "}
-          {item.uiType === "prompt" &&
-          isCustomFormPromptBlock(item) &&
-          item.promptRequired
-            ? "(Required)"
-            : item.uiType === "prompt" &&
-              isCustomFormPromptBlock(item) &&
-              !item.promptRequired
-            ? "(Optional)"
-            : ""}
-        </span>
-      </Label>
-      <div className="flex-row-div">
-        <div className="left-flex prose prose-code:before:hidden prose-code:after:hidden" dangerouslySetInnerHTML={renderedTextHTML} />
-        <div className="right-flex">
-          <Button.Group>
-            <Button
-              className="peerreview-rubricedit-editblockbtn"
-              color="teal"
-              onClick={() => onRequestEdit(item.order)}
+    <div className="border border-gray-200 rounded-lg bg-white mb-2">
+      <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b border-gray-200 rounded-t-lg">
+        <div className="flex items-center gap-2">
+          <div className="flex gap-1">
+            <button
+              type="button"
+              title="Move Up"
+              className="p-1 hover:bg-gray-200 rounded text-gray-600 disabled:opacity-40 disabled:cursor-not-allowed"
+              onClick={() => onMove(item, "up")}
               disabled={disabled}
             >
-              <Icon name="pencil" />
-              Edit {getFriendlyUIType(item.uiType)}
-            </Button>
-            <Button
-              color="red"
-              onClick={() => onRequestDelete(item.order)}
+              <IconArrowUp size={14} />
+            </button>
+            <button
+              type="button"
+              title="Move Down"
+              className="p-1 hover:bg-gray-200 rounded text-gray-600 disabled:opacity-40 disabled:cursor-not-allowed"
+              onClick={() => onMove(item, "down")}
               disabled={disabled}
             >
-              <Icon name="trash" />
-              Delete
-            </Button>
-          </Button.Group>
+              <IconArrowDown size={14} />
+            </button>
+          </div>
+          <span className="text-xs text-gray-600 font-medium">
+            <strong>#{item.order}:</strong> {getFriendlyUIType(item.uiType)}{" "}
+            {typeLabel && <span className="font-normal text-gray-500">{typeLabel}</span>}
+          </span>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="secondary"
+            icon={<IconPencil size={14} />}
+            onClick={() => onRequestEdit(item.order)}
+            disabled={disabled}
+          >
+            Edit {getFriendlyUIType(item.uiType)}
+          </Button>
+          <Button
+            variant="destructive"
+            icon={<IconTrash size={14} />}
+            onClick={() => onRequestDelete(item.order)}
+            disabled={disabled}
+          >
+            Delete
+          </Button>
         </div>
       </div>
-    </Segment>
+      <div
+        className="p-4 prose prose-code:before:hidden prose-code:after:hidden max-w-none text-sm"
+        dangerouslySetInnerHTML={renderedTextHTML}
+      />
+    </div>
   );
 };
 
diff --git a/client/src/components/CustomForms/HeadingBlock.tsx b/client/src/components/CustomForms/HeadingBlock.tsx
index fde1c58ce..9fa0c595d 100644
--- a/client/src/components/CustomForms/HeadingBlock.tsx
+++ b/client/src/components/CustomForms/HeadingBlock.tsx
@@ -1,15 +1,15 @@
-import { Header, HeaderProps } from "semantic-ui-react";
 import { CustomFormHeading } from "../../types";
 
-interface HeadingBlockProps extends HeaderProps {
+interface HeadingBlockProps {
   item: CustomFormHeading;
+  className?: string;
 }
 
-const HeadingBlock: React.FC<HeadingBlockProps> = ({ item, ...rest }) => {
+const HeadingBlock: React.FC<HeadingBlockProps> = ({ item, className }) => {
   return (
-    <Header as="h4" key={item.order} dividing {...rest}>
+    <h4 className={`text-base font-semibold border-b border-gray-200 pb-1 mb-3 ${className ?? ""}`}>
       {item.text}
-    </Header>
+    </h4>
   );
 };
 
diff --git a/client/src/components/CustomForms/HeadingModal.tsx b/client/src/components/CustomForms/HeadingModal.tsx
index e55b188bc..7948aa604 100644
--- a/client/src/components/CustomForms/HeadingModal.tsx
+++ b/client/src/components/CustomForms/HeadingModal.tsx
@@ -1,7 +1,8 @@
-import { Modal, Input, Button, Icon, ModalProps } from "semantic-ui-react";
+import { Modal, Button, Input } from "@libretexts/davis-react";
+import { IconDeviceFloppy, IconPlus } from "@tabler/icons-react";
 import { useRef, useEffect } from "react";
 
-interface HeadingModalProps extends ModalProps {
+interface HeadingModalProps {
   show: boolean;
   mode: "add" | "edit";
   value: string;
@@ -21,38 +22,44 @@ const HeadingModal: React.FC<HeadingModalProps> = ({
   onSave,
   onClose,
   loading,
-  ...rest
 }) => {
-  
-  //Auto-focus input on open
-  const textInputRef = useRef(null);
+  const textInputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     if (show && textInputRef.current) {
-      (textInputRef.current as HTMLFormElement).focus();
+      textInputRef.current.focus();
     }
   }, [show]);
 
   return (
-    <Modal open={show} onClose={onClose} {...rest}>
-      <Modal.Header>{mode === "add" ? "Add" : "Edit"} Heading</Modal.Header>
-      <Modal.Content>
+    <Modal open={show} onClose={onClose} size="sm">
+      <Modal.Header>
+        <Modal.Title>{mode === "add" ? "Add" : "Edit"} Heading</Modal.Title>
+        <Modal.Close />
+      </Modal.Header>
+      <Modal.Body>
         <Input
+          name="heading-text"
+          label="Heading Text"
           type="text"
           value={value}
-          onChange={(_e, { value }) => onChange(value)}
-          fluid
-          placeholder={`Enter ${mode === "add" && "new"} heading text...`}
-          error={hasError}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={`Enter ${mode === "add" ? "new " : ""}heading text...`}
           ref={textInputRef}
         />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button onClick={onClose}>Cancel</Button>
-        <Button color="green" loading={loading ?? false} onClick={onSave}>
-          <Icon name={mode === "add" ? "add" : "save"} />
-          {mode === "add" ? "Add" : "Save"} Heading
-        </Button>
-      </Modal.Actions>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>Cancel</Button>
+          <Button
+            variant="primary"
+            icon={mode === "add" ? <IconPlus size={16} /> : <IconDeviceFloppy size={16} />}
+            loading={loading ?? false}
+            onClick={onSave}
+          >
+            {mode === "add" ? "Add" : "Save"} Heading
+          </Button>
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/components/CustomForms/NonUserForm.tsx b/client/src/components/CustomForms/NonUserForm.tsx
index 11793324e..df7e3d96f 100644
--- a/client/src/components/CustomForms/NonUserForm.tsx
+++ b/client/src/components/CustomForms/NonUserForm.tsx
@@ -1,6 +1,5 @@
-import { Form, Header } from "semantic-ui-react";
 import { OrgEventParticipant } from "../../types";
-import { Control, UseFormGetValues } from "react-hook-form";
+import { Control } from "react-hook-form";
 import CtlTextInput from "../ControlledInputs/CtlTextInput";
 import { required } from "../../utils/formRules";
 
@@ -10,46 +9,49 @@ interface NonUserFormProps {
   >;
   isSubForm?: boolean;
 }
+
 const NonUserForm: React.FC<NonUserFormProps> = ({
   control,
   isSubForm = false,
 }) => {
-  const nonUserForm = (
+  const fields = (
     <>
-      <Header as="h4" className="mb-2p" dividing={isSubForm}>
+      <h4 className={`text-base font-semibold ${isSubForm ? "border-b border-gray-200 pb-1 mb-3" : "mb-2"}`}>
         Participant Information
-      </Header>
-      <p>
+      </h4>
+      <p className="text-sm text-gray-600 mb-4">
         This is the contact information for the person you are registering on behalf of.
       </p>
-      <CtlTextInput
-        label="First Name"
-        placeholder="First Name"
-        name="firstName"
-        control={control}
-        rules={required}
-        required={true}
-      />
-      <CtlTextInput
-        label="Last Name"
-        placeholder="Last Name"
-        name="lastName"
-        control={control}
-        rules={required}
-        required={true}
-      />
-      <CtlTextInput
-        label="Email"
-        placeholder="Email"
-        name="email"
-        control={control}
-        rules={required}
-        required={true}
-      />
+      <div className="flex flex-col gap-3">
+        <CtlTextInput
+          label="First Name"
+          placeholder="First Name"
+          name="firstName"
+          control={control}
+          rules={required}
+          required={true}
+        />
+        <CtlTextInput
+          label="Last Name"
+          placeholder="Last Name"
+          name="lastName"
+          control={control}
+          rules={required}
+          required={true}
+        />
+        <CtlTextInput
+          label="Email"
+          placeholder="Email"
+          name="email"
+          control={control}
+          rules={required}
+          required={true}
+        />
+      </div>
     </>
   );
 
-  return isSubForm ? nonUserForm : <Form>{nonUserForm}</Form>;
+  return isSubForm ? fields : <div className="flex flex-col gap-2">{fields}</div>;
 };
 
 export default NonUserForm;
diff --git a/client/src/components/CustomForms/PromptBlock.tsx b/client/src/components/CustomForms/PromptBlock.tsx
index f5bc67f9b..281f4bc0b 100644
--- a/client/src/components/CustomForms/PromptBlock.tsx
+++ b/client/src/components/CustomForms/PromptBlock.tsx
@@ -1,4 +1,4 @@
-import { Form, TextArea } from "semantic-ui-react";
+import { Checkbox } from "@libretexts/davis-react";
 import LikertScale from "./LikertScale";
 import { CustomFormPrompt } from "../../types";
 
@@ -11,139 +11,92 @@ type PromptBlockProps = {
   error: boolean;
 };
 
-//TODO: Handle values not being defined
 const PromptBlock: React.FC<PromptBlockProps> = ({
   item,
   handleFieldChange,
   error,
 }) => {
-  if (item.promptType === "3-likert") {
+  const labelClass = `block text-sm font-medium mb-1 ${error ? "text-red-600" : "text-gray-700"}`;
+  const requiredMark = item.promptRequired ? <span className="text-red-500 ml-0.5">*</span> : null;
+
+  if (["3-likert", "5-likert", "7-likert"].includes(item.promptType)) {
+    const points = item.promptType === "3-likert" ? 3 : item.promptType === "5-likert" ? 5 : 7;
     return (
-      <Form.Field className="mt-2p mb-2p" key={item.order}>
+      <div className="my-4" key={item.order}>
         {item.promptText && (
-          <label
-            className={`${item.promptRequired ? "form-required" : ""} ${
-              error ? "form-error-label" : ""
-            } mb-05p`}
-          >
-            {item.promptText}
+          <label className={labelClass}>
+            {item.promptText}{requiredMark}
           </label>
         )}
         <LikertScale
-          points={3}
+          points={points}
           promptOrder={item.order}
           pointChecked={parseInt(item.value?.toString() ?? "")}
           onPointChange={(value) => handleFieldChange(item, value)}
           error={error}
         />
-      </Form.Field>
+      </div>
     );
-  } else if (item.promptType === "5-likert") {
+  }
+
+  if (item.promptType === "text") {
     return (
-      <Form.Field className="mt-2p mb-2p" key={item.order}>
+      <div className="my-4" key={item.order}>
         {item.promptText && (
-          <label
-            className={`${item.promptRequired ? "form-required" : ""} ${
-              error ? "form-error-label" : ""
-            } mb-05p`}
-          >
-            {item.promptText}
+          <label className={labelClass}>
+            {item.promptText}{requiredMark}
           </label>
         )}
-        <LikertScale
-          points={5}
-          promptOrder={item.order}
-          pointChecked={parseInt(item.value?.toString() ?? "")}
-          onPointChange={(value) => handleFieldChange(item, value)}
-          error={error}
+        <textarea
+          className={`w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary resize-y ${error ? "border-red-400" : "border-gray-300"}`}
+          placeholder="Enter your response..."
+          value={item.value?.toString() ?? ""}
+          onChange={(e) => handleFieldChange(item, e.target.value)}
+          rows={4}
         />
-      </Form.Field>
+      </div>
     );
-  } else if (item.promptType === "7-likert") {
+  }
+
+  if (item.promptType === "dropdown" && Array.isArray(item.promptOptions)) {
     return (
-      <Form.Field className="mt-2p mb-2p" key={item.order}>
+      <div className="my-4" key={item.order}>
         {item.promptText && (
-          <label
-            className={`${item.promptRequired ? "form-required" : ""} ${
-              error ? "form-error-label" : ""
-            } mb-05p`}
-          >
-            {item.promptText}
+          <label className={labelClass}>
+            {item.promptText}{requiredMark}
           </label>
         )}
-        <LikertScale
-          points={7}
-          promptOrder={item.order}
-          pointChecked={parseInt(item.value?.toString() ?? "")}
-          onPointChange={(value) => handleFieldChange(item, value)}
-          error={error}
-        />
-      </Form.Field>
+        <select
+          className={`w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary ${error ? "border-red-400" : "border-gray-300"}`}
+          value={item.value?.toString() ?? ""}
+          onChange={(e) => handleFieldChange(item, e.target.value)}
+          required={item.promptRequired}
+        >
+          <option value="">Choose...</option>
+          {item.promptOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>{opt.text}</option>
+          ))}
+        </select>
+      </div>
     );
-  } else if (item.promptType === "text") {
+  }
+
+  if (item.promptType === "checkbox") {
     return (
-      <Form.Field className="mb-2p text-area-small" key={item.order}>
-        {item.promptText && (
-          <label className={item.promptRequired ? "form-required" : ""}>
-            {item.promptText}
-          </label>
-        )}
-        <TextArea
-          placeholder="Enter your response..."
-          value={item.value?.toString() ?? ""}
-          onChange={(value, data) =>
-            handleFieldChange(item, data.value?.toString() ?? "")
+      <div className="my-4" key={item.order}>
+        <Checkbox
+          name={`peerreview-checkbox-${item.order}`}
+          label={item.promptText ?? ""}
+          checked={item.value?.toString() === "true"}
+          error={error}
+          onChange={() =>
+            handleFieldChange(item, item.value?.toString() === "true" ? false : true)
           }
         />
-      </Form.Field>
-    );
-  } else if (
-    item.promptType === "dropdown" &&
-    Array.isArray(item.promptOptions)
-  ) {
-    return (
-      <Form.Select
-        key={item.order}
-        fluid
-        selection
-        label={item.promptText}
-        options={item.promptOptions}
-        required={item.promptRequired}
-        placeholder="Choose..."
-        value={item.value?.toString() ?? ""}
-        onChange={(_e, { value }) =>
-          handleFieldChange(item, value?.toString() ?? "")
-        }
-        error={error}
-      />
-    );
-  } else if (item.promptType === "checkbox") {
-    return (
-      <Form.Checkbox
-        id={`peerreview-checkbox-${item.order}`}
-        key={item.order}
-        required={item.promptRequired}
-        label={
-          <label
-            className={`form-field-label ${
-              item.promptText && item.promptRequired ? "form-required" : ""
-            }`}
-            htmlFor={`peerreview-checkbox-${item.order}`}
-          >
-            {item.promptText}
-          </label>
-        }
-        checked={item.value?.toString() === "true" ? true : false}
-        onChange={() =>
-          handleFieldChange(
-            item,
-            item.value?.toString() === "true" ? false : true
-          )
-        }
-        error={error}
-      />
+      </div>
     );
   }
+
   return null;
 };
 
diff --git a/client/src/components/CustomForms/PromptModal.tsx b/client/src/components/CustomForms/PromptModal.tsx
index a618e4af7..b09dd3242 100644
--- a/client/src/components/CustomForms/PromptModal.tsx
+++ b/client/src/components/CustomForms/PromptModal.tsx
@@ -1,19 +1,10 @@
-import {
-  Modal,
-  Form,
-  Button,
-  Icon,
-  Input,
-  List,
-  Popup,
-  Header,
-  ModalProps,
-} from "semantic-ui-react";
+import { Modal, Button, Input, Select } from "@libretexts/davis-react";
+import { IconDeviceFloppy, IconPlus, IconArrowUp, IconArrowDown, IconTrash } from "@tabler/icons-react";
 import { CustomFormPromptType, GenericKeyTextValueObj } from "../../types";
 import { customFormPromptTypes } from "./CustomFormPromptTypes";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
-interface PromptModalProps extends ModalProps {
+interface PromptModalProps {
   show: boolean;
   mode: "add" | "edit";
   promptType: string;
@@ -32,6 +23,7 @@ interface PromptModalProps extends ModalProps {
   onClose: () => void;
   loading?: boolean;
 }
+
 const PromptModal: React.FC<PromptModalProps> = ({
   show,
   mode,
@@ -50,7 +42,6 @@ const PromptModal: React.FC<PromptModalProps> = ({
   onSave,
   onClose,
   loading,
-  ...rest
 }) => {
   const [promptTextError, setPromptTextError] = useState(false);
   const [promptTypeError, setPromptTypeError] = useState(false);
@@ -58,35 +49,24 @@ const PromptModal: React.FC<PromptModalProps> = ({
   const [dropdownErrorText, setDropdownErrorText] = useState("");
 
   useEffect(() => {
-    // Reset errors when modal is opened/closed
     setPromptTextError(false);
     setPromptTypeError(false);
     setDropdownError(false);
     setDropdownErrorText("");
-
     if (show) {
       const textInput = document.getElementById("prompt-text-input");
-      if (textInput) {
-        textInput.focus();
-      }
+      if (textInput) textInput.focus();
     }
   }, [show]);
 
   function validateForm() {
-    if (promptText === "") {
-      setPromptTextError(true);
-      return;
-    }
-    if (promptType === "") {
-      setPromptTypeError(true);
-      return;
-    }
+    if (promptText === "") { setPromptTextError(true); return; }
+    if (promptType === "") { setPromptTypeError(true); return; }
     if (promptType === "dropdown" && dropdownOptions.length === 0) {
       setDropdownError(true);
-      setDropdownErrorText("At lease one option is required.");
+      setDropdownErrorText("At least one option is required.");
       return;
     }
-
     onSave();
   }
 
@@ -96,163 +76,145 @@ const PromptModal: React.FC<PromptModalProps> = ({
       setDropdownErrorText("Option must be between 1 and 250 characters.");
       return;
     }
-
     onAddDropdownPromptOption();
     setDropdownError(false);
     setDropdownErrorText("");
   };
 
+  const selectOptions = customFormPromptTypes.map((t: any) => ({
+    label: t.text ?? t.label ?? t.value,
+    value: t.value,
+  }));
+
   return (
-    <Modal open={show} onClose={onClose} {...rest}>
-      <Modal.Header>{mode === "add" ? "Add" : "Edit"} Prompt</Modal.Header>
-      <Modal.Content>
-        <Form noValidate>
-          <Form.Input
+    <Modal open={show} onClose={onClose} size="md">
+      <Modal.Header>
+        <Modal.Title>{mode === "add" ? "Add" : "Edit"} Prompt</Modal.Title>
+        <Modal.Close />
+      </Modal.Header>
+      <Modal.Body className="overflow-y-auto max-h-[70vh]">
+        <div className="flex flex-col gap-4">
+          <Input
+            id="prompt-text-input"
+            name="prompt-text"
             type="text"
-            value={promptText}
-            onChange={(_e, { value }) => onChangePromptText(value)}
-            fluid
             label="Prompt Text"
+            value={promptText}
+            onChange={(e) => onChangePromptText(e.target.value)}
             placeholder="Enter prompt/instructions/question..."
-            error={promptTextError}
-            required={true}
-            id="prompt-text-input"
+            required
           />
-          <Form.Select
-            options={customFormPromptTypes}
-            value={promptType}
-            onChange={(_e, { value }) =>
-              onChangePromptType(value as CustomFormPromptType)
-            }
-            placeholder="Prompt Type..."
+          <Select
+            name="prompt-type"
             label="Prompt Type"
-            fluid
-            selection
-            error={promptTypeError}
+            placeholder="Prompt Type..."
+            options={selectOptions}
+            value={promptType}
+            onChange={(e) => onChangePromptType(e.target.value as CustomFormPromptType)}
           />
           {promptType !== "" && (
             <>
-              <Form.Group inline>
-                <label>Response Required?</label>
-                <Form.Radio
-                  label="Yes"
-                  checked={promptReq === true}
-                  onChange={(_e, _data) => onChangePromptReq(true)}
-                />
-                <Form.Radio
-                  label="No"
-                  checked={promptReq === false}
-                  onChange={(_e, _data) => onChangePromptReq(false)}
-                />
-              </Form.Group>
+              <div>
+                <p className="text-sm font-medium text-gray-700 mb-2">Response Required?</p>
+                <div className="flex gap-4">
+                  <label className="flex items-center gap-2 cursor-pointer text-sm">
+                    <input
+                      type="radio"
+                      checked={promptReq === true}
+                      onChange={() => onChangePromptReq(true)}
+                      className="accent-primary"
+                    />
+                    Yes
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer text-sm">
+                    <input
+                      type="radio"
+                      checked={promptReq === false}
+                      onChange={() => onChangePromptReq(false)}
+                      className="accent-primary"
+                    />
+                    No
+                  </label>
+                </div>
+              </div>
               {promptType === "dropdown" && (
-                <>
-                  <Header size="tiny" as="span">
-                    Dropdown Options{" "}
-                    <span className="muted-text">(up to 25)</span>
-                  </Header>
-                  <List divided>
-                    {dropdownOptions.map((item, idx) => {
-                      return (
-                        <List.Item key={idx}>
-                          <div className="flex-row-div">
-                            <div className="left-flex">
-                              <span>{item.text}</span>
-                            </div>
-                            <div className="right-flex">
-                              <Button.Group>
-                                <Popup
-                                  trigger={
-                                    <Button
-                                      icon
-                                      onClick={() =>
-                                        onMoveDropdownPromptOption(idx, "up")
-                                      }
-                                    >
-                                      <Icon name="arrow up" />
-                                    </Button>
-                                  }
-                                  position="top center"
-                                  content="Move Up"
-                                />
-                                <Popup
-                                  trigger={
-                                    <Button
-                                      icon
-                                      onClick={() =>
-                                        onMoveDropdownPromptOption(idx, "down")
-                                      }
-                                    >
-                                      <Icon name="arrow down" />
-                                    </Button>
-                                  }
-                                  position="top center"
-                                  content="Move Down"
-                                />
-                                <Popup
-                                  trigger={
-                                    <Button
-                                      icon
-                                      color="red"
-                                      onClick={() =>
-                                        onDeleteDropdownPromptOption(idx)
-                                      }
-                                    >
-                                      <Icon name="trash" />
-                                    </Button>
-                                  }
-                                  position="top center"
-                                  content="Remove"
-                                />
-                              </Button.Group>
-                            </div>
-                          </div>
-                        </List.Item>
-                      );
-                    })}
+                <div>
+                  <p className="text-sm font-semibold mb-2">
+                    Dropdown Options <span className="text-gray-400 font-normal">(up to 25)</span>
+                  </p>
+                  <div className="border border-gray-200 rounded-md divide-y divide-gray-200">
+                    {dropdownOptions.map((item, idx) => (
+                      <div key={idx} className="flex items-center justify-between px-3 py-2">
+                        <span className="text-sm">{item.text}</span>
+                        <div className="flex gap-1">
+                          <button
+                            type="button"
+                            title="Move Up"
+                            className="p-1 hover:bg-gray-100 rounded text-gray-600"
+                            onClick={() => onMoveDropdownPromptOption(idx, "up")}
+                          >
+                            <IconArrowUp size={14} />
+                          </button>
+                          <button
+                            type="button"
+                            title="Move Down"
+                            className="p-1 hover:bg-gray-100 rounded text-gray-600"
+                            onClick={() => onMoveDropdownPromptOption(idx, "down")}
+                          >
+                            <IconArrowDown size={14} />
+                          </button>
+                          <button
+                            type="button"
+                            title="Remove"
+                            className="p-1 hover:bg-red-50 rounded text-red-500"
+                            onClick={() => onDeleteDropdownPromptOption(idx)}
+                          >
+                            <IconTrash size={14} />
+                          </button>
+                        </div>
+                      </div>
+                    ))}
                     {dropdownOptions.length < 25 && (
-                      <List.Item key="new">
-                        <Input
+                      <div className="flex gap-2 p-2">
+                        <input
                           type="text"
                           value={newOptionValue}
-                          onChange={(_e, { value }) =>
-                            onChangeNewOptionValue(value)
-                          }
+                          onChange={(e) => onChangeNewOptionValue(e.target.value)}
                           placeholder="Enter option text..."
-                          action={{
-                            color: "green",
-                            labelPosition: "right",
-                            icon: "add",
-                            content: "Add Option",
-                            onClick: validateNewPromptOption,
-                          }}
-                          fluid
-                          error={dropdownError}
-                          className="mt-2p"
+                          className="flex-1 border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
                         />
-                      </List.Item>
+                        <Button
+                          variant="primary"
+                          icon={<IconPlus size={14} />}
+                          onClick={validateNewPromptOption}
+                        >
+                          Add Option
+                        </Button>
+                      </div>
                     )}
-                  </List>
+                  </div>
                   {dropdownError && dropdownErrorText && (
-                    <div className="mt-2p">
-                      <span className="form-error-label">
-                        {dropdownErrorText}
-                      </span>
-                    </div>
+                    <p className="text-red-600 text-xs mt-1">{dropdownErrorText}</p>
                   )}
-                </>
+                </div>
               )}
             </>
           )}
-        </Form>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button onClick={onClose}>Cancel</Button>
-        <Button color="green" loading={loading ?? false} onClick={validateForm}>
-          <Icon name={mode === "add" ? "add" : "save"} />
-          {mode === "add" ? "Add" : "Save"} Prompt
-        </Button>
-      </Modal.Actions>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>Cancel</Button>
+          <Button
+            variant="primary"
+            icon={mode === "add" ? <IconPlus size={16} /> : <IconDeviceFloppy size={16} />}
+            loading={loading ?? false}
+            onClick={validateForm}
+          >
+            {mode === "add" ? "Add" : "Save"} Prompt
+          </Button>
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/components/CustomForms/ShippingAddressForm.tsx b/client/src/components/CustomForms/ShippingAddressForm.tsx
index 882caaa37..f3701619c 100644
--- a/client/src/components/CustomForms/ShippingAddressForm.tsx
+++ b/client/src/components/CustomForms/ShippingAddressForm.tsx
@@ -1,4 +1,3 @@
-import { Form, Header } from "semantic-ui-react";
 import { OrgEventParticipant } from "../../types";
 import { Control, UseFormGetValues } from "react-hook-form";
 import CtlTextInput from "../ControlledInputs/CtlTextInput";
@@ -15,68 +14,69 @@ const ShippingAddressForm: React.FC<ShippingAddressFormProps> = ({
   control,
   isSubForm = false,
 }) => {
-
-  const addressForm = (
+  const fields = (
     <>
-      <Header as="h4" className="mb-2p" dividing={isSubForm}>
+      <h4 className={`text-base font-semibold ${isSubForm ? "border-b border-gray-200 pb-1 mb-3" : "mb-2"}`}>
         Shipping Address
-      </Header>
-      <p>
+      </h4>
+      <p className="text-sm text-gray-600 mb-4">
         The event organizer has requested that you provide your shipping
         address. This will be used to send you any physical items that you may
         have purchased or are included with your registration. LibreTexts will never
         share your address without permission.
       </p>
-      <CtlTextInput
-        label="Address Line One"
-        placeholder="123 Any St"
-        name="shippingAddress.lineOne"
-        control={control}
-        rules={required}
-        required={true}
-      />
-      <CtlTextInput
-        label="Address Line Two"
-        placeholder="Suite 123 (optional)"
-        name="shippingAddress.lineTwo"
-        control={control}
-      />
-      <CtlTextInput
-        label="City"
-        placeholder="Anytown"
-        name="shippingAddress.city"
-        control={control}
-        rules={required}
-        required={true}
-      />
-      <CtlTextInput
-        label="State"
-        placeholder="CA"
-        name="shippingAddress.state"
-        control={control}
-        rules={required}
-        required={true}
-      />
-      <CtlTextInput
-        label="Zip Code"
-        placeholder="12345"
-        name="shippingAddress.zip"
-        control={control}
-        rules={required}
-        required={true}
-      />
-      <CtlTextInput
-        label="Country"
-        placeholder="USA"
-        name="shippingAddress.country"
-        control={control}
-        rules={required}
-        required={true}
-      />
+      <div className="flex flex-col gap-3">
+        <CtlTextInput
+          label="Address Line One"
+          placeholder="123 Any St"
+          name="shippingAddress.lineOne"
+          control={control}
+          rules={required}
+          required={true}
+        />
+        <CtlTextInput
+          label="Address Line Two"
+          placeholder="Suite 123 (optional)"
+          name="shippingAddress.lineTwo"
+          control={control}
+        />
+        <CtlTextInput
+          label="City"
+          placeholder="Anytown"
+          name="shippingAddress.city"
+          control={control}
+          rules={required}
+          required={true}
+        />
+        <CtlTextInput
+          label="State"
+          placeholder="CA"
+          name="shippingAddress.state"
+          control={control}
+          rules={required}
+          required={true}
+        />
+        <CtlTextInput
+          label="Zip Code"
+          placeholder="12345"
+          name="shippingAddress.zip"
+          control={control}
+          rules={required}
+          required={true}
+        />
+        <CtlTextInput
+          label="Country"
+          placeholder="USA"
+          name="shippingAddress.country"
+          control={control}
+          rules={required}
+          required={true}
+        />
+      </div>
     </>
   );
 
-  return isSubForm ? addressForm : <Form>{addressForm}</Form>;
+  return isSubForm ? fields : <div className="flex flex-col gap-2">{fields}</div>;
 };
 
 export default ShippingAddressForm;
diff --git a/client/src/components/CustomForms/TextBlockModal.tsx b/client/src/components/CustomForms/TextBlockModal.tsx
index 53ac27563..b8e8e43b5 100644
--- a/client/src/components/CustomForms/TextBlockModal.tsx
+++ b/client/src/components/CustomForms/TextBlockModal.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useRef } from "react";
-import { Modal, Button, Icon, ModalProps } from "semantic-ui-react";
+import { Modal, Button } from "@libretexts/davis-react";
+import { IconDeviceFloppy, IconPlus } from "@tabler/icons-react";
 import TextArea from "../TextArea";
 
-interface TextBlockModalProps extends ModalProps {
+interface TextBlockModalProps {
   show: boolean;
   mode: "add" | "edit";
   value: string;
@@ -12,6 +13,7 @@ interface TextBlockModalProps extends ModalProps {
   onClose: () => void;
   loading?: boolean;
 }
+
 const TextBlockModal: React.FC<TextBlockModalProps> = ({
   show,
   mode,
@@ -21,9 +23,7 @@ const TextBlockModal: React.FC<TextBlockModalProps> = ({
   onSave,
   onClose,
   loading,
-  ...rest
 }) => {
-  // Focus on text area when modal is opened
   const textAreaRef = useRef(null);
   useEffect(() => {
     if (show && textAreaRef.current) {
@@ -32,24 +32,33 @@ const TextBlockModal: React.FC<TextBlockModalProps> = ({
   }, [show]);
 
   return (
-    <Modal open={show} onClose={onClose} {...rest}>
-      <Modal.Header>{mode === "add" ? "Add" : "Edit"} Text Block</Modal.Header>
-      <Modal.Content>
+    <Modal open={show} onClose={onClose} size="md">
+      <Modal.Header>
+        <Modal.Title>{mode === "add" ? "Add" : "Edit"} Text Block</Modal.Title>
+        <Modal.Close />
+      </Modal.Header>
+      <Modal.Body>
         <TextArea
-          placeholder={`Enter ${mode === "add" && "new"} text...`}
+          placeholder={`Enter ${mode === "add" ? "new " : ""}text...`}
           textValue={value}
           onTextChange={(newVal) => onChange(newVal)}
           innerRef={textAreaRef}
           contentType="text"
         />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button onClick={onClose}>Cancel</Button>
-        <Button color="green" loading={loading ?? false} onClick={onSave}>
-          <Icon name={mode === "add" ? "add" : "save"} />
-          {mode === "add" ? "Add" : "Save"} Text Block
-        </Button>
-      </Modal.Actions>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>Cancel</Button>
+          <Button
+            variant="primary"
+            icon={mode === "add" ? <IconPlus size={16} /> : <IconDeviceFloppy size={16} />}
+            loading={loading ?? false}
+            onClick={onSave}
+          >
+            {mode === "add" ? "Add" : "Save"} Text Block
+          </Button>
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/components/controlpanel/EventsManager/AutoSyncToProjectModal.tsx b/client/src/components/controlpanel/EventsManager/AutoSyncToProjectModal.tsx
index 4f9b5ab39..dc8872bab 100644
--- a/client/src/components/controlpanel/EventsManager/AutoSyncToProjectModal.tsx
+++ b/client/src/components/controlpanel/EventsManager/AutoSyncToProjectModal.tsx
@@ -1,4 +1,5 @@
-import { Button, Dropdown, Icon, Modal, Grid, Form } from "semantic-ui-react";
+import { Modal, Button } from "@libretexts/davis-react";
+import { IconRefresh } from "@tabler/icons-react";
 import { useTypedSelector } from "../../../state/hooks";
 import { isEmptyString } from "../../util/HelperFunctions";
 import { useCallback, useEffect, useState } from "react";
@@ -19,35 +20,25 @@ const AutoSyncToProjectModal: React.FC<AutoSyncToProjectModalProps> = ({
   orgEvent,
   onClose,
   onConfirm,
-  ...props
 }) => {
-  // Global State and Error Handling
   const user = useTypedSelector((state) => state.user);
   const { handleGlobalError } = useGlobalError();
   const { debounce } = useDebounce();
 
   const [loading, setLoading] = useState<boolean>(false);
-  const [projectOpts, setProjectOpts] = useState<
-    GenericKeyTextValueObj<string>[]
-  >([]);
+  const [projectOpts, setProjectOpts] = useState<GenericKeyTextValueObj<string>[]>([]);
   const [selectedProject, setSelectedProject] = useState<string>("");
   const [currentProject, setCurrentProject] = useState<Project | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
 
-  const getProjectOpts = async (searchQuery: string) => {
+  const getProjectOpts = async (query: string) => {
     try {
       setLoading(true);
       const res = await axios.get("/projects/all", {
-        params: {
-          uuid: user.uuid,
-          searchQuery: searchQuery,
-        },
+        params: { uuid: user.uuid, searchQuery: query },
       });
 
-      if (
-        res.data.err ||
-        !res.data.projects ||
-        !Array.isArray(res.data.projects)
-      ) {
+      if (res.data.err || !res.data.projects || !Array.isArray(res.data.projects)) {
         handleGlobalError(res.data.errMsg);
         return;
       }
@@ -92,7 +83,6 @@ const AutoSyncToProjectModal: React.FC<AutoSyncToProjectModalProps> = ({
     }
   }
 
-  // Clear state when modal closes
   useEffect(() => {
     if (show) {
       getCurrentProjectInfo();
@@ -100,6 +90,7 @@ const AutoSyncToProjectModal: React.FC<AutoSyncToProjectModalProps> = ({
     if (!show) {
       setProjectOpts([]);
       setSelectedProject("");
+      setSearchQuery("");
     }
   }, [show]);
 
@@ -115,67 +106,91 @@ const AutoSyncToProjectModal: React.FC<AutoSyncToProjectModalProps> = ({
   }
 
   return (
-    <Modal size="large" open={show} onClose={onClose} {...props}>
-      <Modal.Header>Configure Auto-Sync Users to Project</Modal.Header>
-      <Modal.Content scrolling style={{ minHeight: "30vh" }}>
-        <Form noValidate>
+    <Modal open={show} onClose={onClose} size="lg">
+      <Modal.Header>
+        <Modal.Title>Configure Auto-Sync Users to Project</Modal.Title>
+        <Modal.Close />
+      </Modal.Header>
+      <Modal.Body className="overflow-y-auto min-h-[30vh]">
+        <div className="flex flex-col gap-4">
           {currentProject && (
-            <p className="mb-2p">
+            <p className="text-sm">
               <strong>Current Auto-Sync Project: </strong>
-              {currentProject && (
-                <a
-                  href={`/projects/${currentProject.projectID}`}
-                  target="_blank"
-                >
-                  {currentProject.title}
-                </a>
-              )}
+              <a
+                href={`/projects/${currentProject.projectID}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+              >
+                {currentProject.title}
+              </a>
             </p>
           )}
-          <Form.Group widths="equal">
-            <Form.Select
-              search
-              label={
-                orgEvent.projectSyncID ? "Select New Project" : "Select Project"
-              }
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {orgEvent.projectSyncID ? "Select New Project" : "Select Project"}
+              <span className="text-red-500 ml-1">*</span>
+            </label>
+            <input
+              type="text"
               placeholder="Start typing to search by title..."
-              options={projectOpts}
-              onChange={(_e, { value }) => {
-                setSelectedProject(value ? value.toString() : "");
-              }}
-              onSearchChange={(_e, { searchQuery }) => {
-                if (searchQuery) {
-                  getProjectOptionsDebounced(searchQuery);
-                }
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                getProjectOptionsDebounced(e.target.value);
               }}
-              loading={loading}
+              className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
               disabled={loading}
-              required
             />
-          </Form.Group>
-        </Form>
-        <p>
-          <strong>Note:</strong> Only participants with emails that can be
-          matched to a Conductor account will be added to the project. All
-          participants will be added with the <strong>Project Member</strong>{" "}
-          role. Existing participants will be synced upon submission of this
-          form. Future participants will be synced automatically. If a
-          participant cancels their registration, they <strong>will not</strong>{" "}
-          automatically be removed from the project.
-        </p>
-        <p></p>
-      </Modal.Content>
-      <Modal.Actions>
-        {selectedProject && (
-          <Button onClick={() => handleConfirm()} color="green">
-            <Icon name="refresh" />
-            Confirm Sync Settings
-          </Button>
-        )}
-        <Button onClick={onClose} color="grey">
-          Cancel
-        </Button>
-      </Modal.Actions>
+            {projectOpts.length > 0 && (
+              <div className="border border-gray-200 rounded mt-1 max-h-48 overflow-y-auto divide-y divide-gray-100">
+                {projectOpts.map((opt) => (
+                  <button
+                    key={opt.key}
+                    type="button"
+                    className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 ${
+                      selectedProject === opt.value ? "bg-blue-50 font-medium" : ""
+                    }`}
+                    onClick={() => {
+                      setSelectedProject(opt.value ?? "");
+                      setSearchQuery(opt.text ?? "");
+                      setProjectOpts([]);
+                    }}
+                  >
+                    {opt.text}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <p className="text-sm text-gray-600">
+            <strong>Note:</strong> Only participants with emails that can be
+            matched to a Conductor account will be added to the project. All
+            participants will be added with the <strong>Project Member</strong>{" "}
+            role. Existing participants will be synced upon submission of this
+            form. Future participants will be synced automatically. If a
+            participant cancels their registration, they <strong>will not</strong>{" "}
+            automatically be removed from the project.
+          </p>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>Cancel</Button>
+          {selectedProject && (
+            <Button
+              variant="primary"
+              icon={<IconRefresh size={16} />}
+              loading={loading}
+              onClick={handleConfirm}
+            >
+              Confirm Sync Settings
+            </Button>
+          )}
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/components/controlpanel/EventsManager/CancelEventModal.tsx b/client/src/components/controlpanel/EventsManager/CancelEventModal.tsx
index 1acdc9427..d2dac5e54 100644
--- a/client/src/components/controlpanel/EventsManager/CancelEventModal.tsx
+++ b/client/src/components/controlpanel/EventsManager/CancelEventModal.tsx
@@ -1,5 +1,5 @@
-import { Button, Icon, Modal } from "semantic-ui-react";
-import useGlobalError from "../../error/ErrorHooks";
+import { Modal, Button } from "@libretexts/davis-react";
+import { IconTrash } from "@tabler/icons-react";
 import { useTypedSelector } from "../../../state/hooks";
 
 type CancelEventModalProps = {
@@ -10,43 +10,44 @@ type CancelEventModalProps = {
 };
 
 const CancelEventModal: React.FC<CancelEventModalProps> = ({
-  eventID,
   show,
   onClose,
   onConfirm,
-  ...props
 }) => {
-  // Global Error Handling
-  const { handleGlobalError } = useGlobalError();
   const org = useTypedSelector((state) => state.org);
 
   return (
-    <Modal size="large" open={show} onClose={onClose} {...props}>
-      <Modal.Header>Cancel Event</Modal.Header>
-      <Modal.Content scrolling>
+    <Modal open={show} onClose={onClose} size="md">
+      <Modal.Header>
+        <Modal.Title>Cancel Event</Modal.Title>
+        <Modal.Close />
+      </Modal.Header>
+      <Modal.Body>
         <p>
           Are you sure you want to cancel this event?{" "}
           <strong>This action cannot be undone</strong> and participants who
           have registered will be notified.
         </p>
         {org.orgID === "libretexts" && (
-          <p>
-            <em>
-              Any participants who paid registration fees will be refunded.
-            </em>
+          <p className="mt-2">
+            <em>Any participants who paid registration fees will be refunded.</em>
           </p>
         )}
-      </Modal.Content>
-      <Modal.Actions>
-        <Button onClick={onConfirm} color="red">
-          <Icon name="trash alternate" />
-          Cancel Event
-        </Button>
-
-        <Button onClick={onClose} color="grey">
-          Go Back
-        </Button>
-      </Modal.Actions>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" onClick={onClose}>
+            Go Back
+          </Button>
+          <Button
+            variant="destructive"
+            icon={<IconTrash size={16} />}
+            onClick={onConfirm}
+          >
+            Cancel Event
+          </Button>
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/components/controlpanel/EventsManager/CollectShippingMessage.tsx b/client/src/components/controlpanel/EventsManager/CollectShippingMessage.tsx
index c5c457f24..8f2c5e788 100644
--- a/client/src/components/controlpanel/EventsManager/CollectShippingMessage.tsx
+++ b/client/src/components/controlpanel/EventsManager/CollectShippingMessage.tsx
@@ -1,23 +1,14 @@
-import { Message, Icon, MessageProps } from "semantic-ui-react";
-import Breakpoint from "../../util/Breakpoints";
+import { Alert } from "@libretexts/davis-react";
+import { IconAddressBook } from "@tabler/icons-react";
 
-const CollectShippingMessage: React.FC = ({ ...rest }) => {
+const CollectShippingMessage: React.FC = () => {
   return (
-    <Message info {...rest}>
-      <Message.Content>
-        <Breakpoint name="desktop">
-          <div className="flex-row-div flex-row-verticalcenter">
-            <Icon name="address book" />
-            <p className="ml-1p">
-              Per event settings, participants will be prompted to provide a
-              shipping address during registration. Conductor will automatically
-              add this form and you do not need to add any additional prompts to
-              collect shipping information.
-            </p>
-          </div>
-        </Breakpoint>
-      </Message.Content>
-    </Message>
+    <Alert
+      variant="info"
+      message="Per event settings, participants will be prompted to provide a shipping address during registration. Conductor will automatically add this form and you do not need to add any additional prompts to collect shipping information."
+      icon={<IconAddressBook size={18} />}
+      showIcon
+    />
   );
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/EventInstructionsSegment.tsx b/client/src/components/controlpanel/EventsManager/EventInstructionsSegment.tsx
index bdc9c22f4..15c5536f9 100644
--- a/client/src/components/controlpanel/EventsManager/EventInstructionsSegment.tsx
+++ b/client/src/components/controlpanel/EventsManager/EventInstructionsSegment.tsx
@@ -1,7 +1,7 @@
-import { Segment, Button, Header, SegmentProps } from "semantic-ui-react";
+import { Button, Divider } from "@libretexts/davis-react";
 import { useTypedSelector } from "../../../state/hooks";
 
-interface EventInstructionsSegmentProps extends SegmentProps {
+interface EventInstructionsSegmentProps {
   show: boolean;
   toggleVisibility: () => void;
 }
@@ -9,131 +9,61 @@ interface EventInstructionsSegmentProps extends SegmentProps {
 const EventInstructionsSegment: React.FC<EventInstructionsSegmentProps> = ({
   show,
   toggleVisibility,
-  ...rest
 }) => {
   const org = useTypedSelector((state) => state.org);
 
   if (!show) {
     return (
-      <Segment {...rest}>
-        <div className="hiddensection">
-          <div className="header-container">
-            <Header as="h3">Editing Instructions</Header>
-          </div>
-          <div className="button-container">
-            <Button floated="right" onClick={toggleVisibility}>
-              Show
-            </Button>
-          </div>
-        </div>
-      </Segment>
+      <div className="flex items-center justify-between">
+        <h3 className="text-base font-semibold text-gray-800 m-0">Editing Instructions</h3>
+        <Button variant="outline" onClick={toggleVisibility}>Show</Button>
+      </div>
     );
   }
 
   return (
-    <Segment {...rest} className="mb-1p">
-      <div className="ui dividing header">
-        <div className="hideablesection">
-          <h3 className="header">Editing Instructions</h3>
-          <div className="button-container">
-            <Button compact floated="right" onClick={toggleVisibility}>
-              Hide
-            </Button>
-          </div>
-        </div>
+    <div className="border border-gray-200 rounded-lg p-6">
+      <div className="flex items-center justify-between pb-3">
+        <h3 className="text-base font-semibold text-gray-800 m-0">Editing Instructions</h3>
+        <Button variant="outline" onClick={toggleVisibility}>Hide</Button>
       </div>
-      <p>All Events include by default:</p>
-      <ul>
-        <li>
-          A <strong>Title</strong>
-        </li>
-        <li>
-          A <strong>Registration Open Date</strong>
-        </li>
-        <li>
-          A <strong>Registration Close Date</strong>
-        </li>
-        <li>
-          An <strong>Event Start Date</strong>
-        </li>
-        <li>
-          An <strong>Event End Date</strong>
-        </li>
+      <Divider className="mb-4" />
+      <p className="mb-2">All Events include by default:</p>
+      <ul className="list-disc pl-5 mb-3 space-y-1 text-sm">
+        <li><strong>Title</strong></li>
+        <li><strong>Registration Open Date</strong></li>
+        <li><strong>Registration Close Date</strong></li>
+        <li><strong>Event Start Date</strong></li>
+        <li><strong>Event End Date</strong></li>
         {org.orgID === "libretexts" && (
-          <li>
-            A <strong>Registration Fee</strong>
-          </li>
+          <li><strong>Registration Fee</strong></li>
         )}
       </ul>
-      <p>
-        An Event registration form can consist of an unlimited number of the
-        below blocks:
-      </p>
-      <ul>
-        <li>
-          <strong>Headings</strong> indicate different sections of the form
-        </li>
-        <li>
-          <strong>Text Blocks</strong> allow you to insert form instructions or
-          additional information
-        </li>
+      <p className="mb-2">An Event registration form can consist of an unlimited number of the below blocks:</p>
+      <ul className="list-disc pl-5 mb-3 space-y-1 text-sm">
+        <li><strong>Headings</strong> indicate different sections of the form</li>
+        <li><strong>Text Blocks</strong> allow you to insert form instructions or additional information</li>
         <li>
           <span>
-            <strong>Prompts</strong> act as questions and inputs in the form.
-            There are six different types of prompts:
+            <strong>Prompts</strong> act as questions and inputs in the form. There are six different types of prompts:
           </span>
-          <ul>
-            <li>
-              <strong>Three Point Likert Scale: </strong> Radio choice between{" "}
-              <em>Disagree, Neutral, Agree</em>
-            </li>
-            <li>
-              <strong>Five Point Likert Scale: </strong> Radio choice between{" "}
-              <em>
-                Strongly Disagree, Disagree, Neutral, Agree, Strongly Agree
-              </em>
-            </li>
-            <li>
-              <strong>Seven Point Likert Scale: </strong> Radio choice between{" "}
-              <em>
-                Strongly Disagree, Disagree, Somewhat Disagree, Neutral,
-                Somewhat Agree, Agree, Strongly Agree
-              </em>
-            </li>
-            <li>
-              <strong>Text:</strong> Free-response textual input{" "}
-              <span className="muted-text">(up to 10,000 characters)</span>
-            </li>
-            <li>
-              <strong>Dropdown:</strong> Input requiring a selection between
-              custom dropdown options{" "}
-              <span className="muted-text">(up to 10 options)</span>
-            </li>
-            <li>
-              <strong>Checkbox:</strong> Simple on/off checkbox{" "}
-              <span className="muted-text">
-                (setting 'Required' indicates the box must be checked to submit)
-              </span>
-            </li>
+          <ul className="list-disc pl-5 mt-1 space-y-1">
+            <li><strong>Three Point Likert Scale: </strong> Radio choice between <em>Disagree, Neutral, Agree</em></li>
+            <li><strong>Five Point Likert Scale: </strong> Radio choice between <em>Strongly Disagree, Disagree, Neutral, Agree, Strongly Agree</em></li>
+            <li><strong>Seven Point Likert Scale: </strong> Radio choice between <em>Strongly Disagree, Disagree, Somewhat Disagree, Neutral, Somewhat Agree, Agree, Strongly Agree</em></li>
+            <li><strong>Text:</strong> Free-response textual input <span className="text-gray-400">(up to 10,000 characters)</span></li>
+            <li><strong>Dropdown:</strong> Input requiring a selection between custom dropdown options <span className="text-gray-400">(up to 10 options)</span></li>
+            <li><strong>Checkbox:</strong> Simple on/off checkbox <span className="text-gray-400">(setting 'Required' indicates the box must be checked to submit)</span></li>
           </ul>
         </li>
       </ul>
-      <p>
-        Events are{" "}
-        <strong>
-          only editable until the first participant has registered.
-        </strong>{" "}
-        Once participants have began registering for the event, you can only
-        cancel the event if it has been misconfigured. Individual participants
-        can be dropped from the event if necessary.
+      <p className="text-sm mb-2">
+        Events are <strong>only editable until the first participant has registered.</strong> Once participants have began registering for the event, you can only cancel the event if it has been misconfigured. Individual participants can be dropped from the event if necessary.
       </p>
-      <p>
-        <strong>
-          Never use an event registration form to collect sensitive personal
-          information.
-        </strong>
+      <p className="text-sm">
+        <strong>Never use an event registration form to collect sensitive personal information.</strong>
       </p>
-    </Segment>
+    </div>
   );
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/EventSettingsModal.tsx b/client/src/components/controlpanel/EventsManager/EventSettingsModal.tsx
index 6d47c25fc..b3e18d0e0 100644
--- a/client/src/components/controlpanel/EventsManager/EventSettingsModal.tsx
+++ b/client/src/components/controlpanel/EventsManager/EventSettingsModal.tsx
@@ -1,5 +1,6 @@
 import { useState, FC, useEffect } from "react";
-import { Accordion, Button, Form, Icon, Modal, Popup } from "semantic-ui-react";
+import { Modal, Button, Checkbox, Divider, Alert } from "@libretexts/davis-react";
+import { IconDeviceFloppy, IconTrash, IconChevronDown, IconChevronRight } from "@tabler/icons-react";
 import { OrgEvent } from "../../../types";
 import { useForm } from "react-hook-form";
 import CtlTextInput from "../../ControlledInputs/CtlTextInput";
@@ -22,10 +23,6 @@ interface EventSettingsModalParams {
   onRequestCancelEvent: () => void;
 }
 
-/**
- * Modal tool to view and approve or deny an Instructor Account Request.
- */
-
 const EventSettingsModal: FC<EventSettingsModalParams> = ({
   show,
   canEdit,
@@ -34,7 +31,6 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
   onRequestSave,
   onRequestCancelEvent,
 }) => {
-  // Global state & error handling
   const org = useTypedSelector((state) => state.org);
   const location = useLocation();
   const routeParams = useParams<{ mode: string }>();
@@ -49,15 +45,14 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
     values: orgEvent,
   });
 
-  // UI
   const [loading, setLoading] = useState<boolean>(false);
-  const [showCancelEventModal, setShowCancelEventModal] =
-    useState<boolean>(false);
+  const [showDangerZone, setShowDangerZone] = useState<boolean>(false);
+  const [showCancelEventModal, setShowCancelEventModal] = useState<boolean>(false);
 
-  // Reset form with incoming data when modal is opened
   useEffect(() => {
     if (show) {
       resetForm(orgEvent);
+      setShowDangerZone(false);
     }
   }, [show]);
 
@@ -74,21 +69,14 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
   const loadDuplicateEvent = async (duplicateID: string) => {
     try {
       if (routeParams.mode !== "create" || !duplicateID) return;
-
       setLoading(true);
-
       const res = (await axios.get(`/orgevents/${duplicateID}`)).data;
-
       if (res.err) {
         handleGlobalError(res.errMsg);
       }
-
       const currEvent = res.orgEvent;
       currEvent.title = "Copy of " + currEvent.title;
-
-      // Remove projectSyncID from the object (we don't want to copy this over)
       const { projectSyncID, ...withoutProjectSyncID } = currEvent;
-
       resetForm(initOrgEventDates(withoutProjectSyncID));
     } catch (err) {
       handleGlobalError(err);
@@ -97,25 +85,19 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
     }
   };
 
-  /**
-   * Resets the tool to its initial state, then activates the provided `onClose` handler.
-   */
   function handleClose() {
     setLoading(false);
     onClose();
   }
 
   return (
-    <Modal open={show} onClose={handleClose}>
+    <Modal open={show} onClose={handleClose} size="lg">
       <Modal.Header>
-        <div className="flex-row-div">
-          <div className="left-flex">
-            <span>Event Settings</span>
-          </div>
-        </div>
+        <Modal.Title>Event Settings</Modal.Title>
+        <Modal.Close />
       </Modal.Header>
-      <Modal.Content scrolling>
-        <Form noValidate>
+      <Modal.Body className="overflow-y-auto max-h-[70vh]">
+        <div className="flex flex-col gap-4">
           <CtlTextInput
             name="title"
             control={control}
@@ -124,7 +106,7 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
             placeholder="Enter Event Title..."
             disabled={!canEdit}
           />
-          <div className="flex-row-div left-flex">
+          <div className="grid grid-cols-2 gap-4">
             <CtlDateInput
               type="datetime-local"
               name="regOpenDate"
@@ -133,17 +115,15 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
               label="Registration Open Date"
               value={getValues("regOpenDate")}
               error={false}
-              className="my-2p"
             />
             <CtlTimeZoneInput
               name="timeZone"
               control={control}
               label="Time Zone (applies to all dates/times)"
               value={getValues("timeZone")}
-              className="my-2p ml-2p"
             />
           </div>
-          <div className="flex-row-div left-flex">
+          <div className="grid grid-cols-2 gap-4">
             <CtlDateInput
               type="datetime-local"
               name="regCloseDate"
@@ -152,10 +132,7 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
               label="Registration Close Date"
               value={getValues("regCloseDate")}
               error={false}
-              className="my-2p"
             />
-          </div>
-          <div className="flex-row-div left-flex">
             <CtlDateInput
               type="datetime-local"
               name="startDate"
@@ -164,11 +141,9 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
               label="Event Start Date"
               value={getValues("startDate")}
               error={false}
-              className="my-2p"
             />
           </div>
-
-          <div className="flex-row-div left-flex">
+          <div className="grid grid-cols-2 gap-4">
             <CtlDateInput
               type="datetime-local"
               name="endDate"
@@ -177,98 +152,76 @@ const EventSettingsModal: FC<EventSettingsModalParams> = ({
               label="Event End Date"
               value={getValues("endDate")}
               error={false}
-              className="my-2p"
             />
+            {org.orgID === "libretexts" && (
+              <CtlTextInput
+                name="regFee"
+                control={control}
+                rules={required}
+                label="Registration Fee ($)"
+                placeholder="Enter Fee..."
+                type="number"
+                min="0"
+                disabled={!canEdit}
+              />
+            )}
           </div>
-          {org.orgID === "libretexts" && (
-            <CtlTextInput
-              name="regFee"
-              control={control}
-              rules={required}
-              label="Registration Fee"
-              icon="dollar sign"
-              iconPosition="left"
-              placeholder="Enter Fee.."
-              type="number"
-              min="0"
-              disabled={!canEdit}
-            />
-          )}
-          <Form.Checkbox
-            id="collect-shipping"
-            className="mt-2p"
-            label={
-              <>
-                <label className="form-field-label" htmlFor="collect-shipping">
-                  Collect Participant Shipping Address{"  "}
-                  <Popup
-                    position="top center"
-                    trigger={<Icon name="info circle" />}
-                    content="If checked, participants will be prompted to provide a shipping address during registration."
-                  />
-                </label>
-              </>
-            }
+          <Checkbox
+            name="collect-shipping"
+            label="Collect Participant Shipping Address"
             checked={watchValues("collectShipping") ?? false}
-            onChange={(_e, { checked }) => {
-              setValue("collectShipping", checked ?? false);
-            }}
+            onChange={(checked) => setValue("collectShipping", checked)}
             disabled={!canEdit}
           />
-          {/*Danger zone options only applicable when editing */}
           {getValues("eventID") && routeParams.mode !== "create" && (
-            <Accordion
-              className="mt-2p"
-              panels={[
-                {
-                  key: "danger",
-                  title: {
-                    content: (
-                      <span className="color-semanticred">
-                        <strong>Danger Zone</strong>
-                      </span>
-                    ),
-                  },
-                  content: {
-                    content: (
-                      <div>
-                        <p className="color-semanticred">
-                          Use caution with the options in this area!
-                        </p>
-                        <Button
-                          color="red"
-                          fluid
-                          onClick={() => setShowCancelEventModal(true)}
-                        >
-                          <Icon name="trash alternate" />
-                          Cancel Event
-                        </Button>
-                      </div>
-                    ),
-                  },
-                },
-              ]}
-            />
+            <div className="mt-4">
+              <Divider />
+              <div className="pt-4">
+              <button
+                type="button"
+                className="flex items-center gap-2 text-red-600 font-semibold cursor-pointer"
+                onClick={() => setShowDangerZone((v) => !v)}
+              >
+                {showDangerZone ? <IconChevronDown size={16} /> : <IconChevronRight size={16} />}
+                Danger Zone
+              </button>
+              {showDangerZone && (
+                <div className="mt-3 flex flex-col gap-3">
+                  <Alert
+                    variant="error"
+                    message="Use caution with the options in this area!"
+                    showIcon
+                  />
+                  <Button
+                    variant="destructive"
+                    icon={<IconTrash size={16} />}
+                    fullWidth
+                    onClick={() => setShowCancelEventModal(true)}
+                  >
+                    Cancel Event
+                  </Button>
+                </div>
+              )}
+              </div>
+            </div>
           )}
-        </Form>
-      </Modal.Content>
-      <Modal.Actions>
-        <div className="flex-row-div">
-          <div className="ui right-flex">
-            <Button color="grey" loading={loading} onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button
-              color="green"
-              loading={loading}
-              onClick={() => onRequestSave(getValues())}
-            >
-              <Icon name="save" />
-              Save
-            </Button>
-          </div>
         </div>
-      </Modal.Actions>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" loading={loading} onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            icon={<IconDeviceFloppy size={16} />}
+            loading={loading}
+            onClick={() => onRequestSave(getValues())}
+          >
+            Save
+          </Button>
+        </div>
+      </Modal.Footer>
       <CancelEventModal
         show={showCancelEventModal}
         eventID={watchValues("eventID")}
diff --git a/client/src/components/controlpanel/EventsManager/EventSettingsSegment.tsx b/client/src/components/controlpanel/EventsManager/EventSettingsSegment.tsx
index 5956003fe..d18be89d1 100644
--- a/client/src/components/controlpanel/EventsManager/EventSettingsSegment.tsx
+++ b/client/src/components/controlpanel/EventsManager/EventSettingsSegment.tsx
@@ -1,18 +1,21 @@
 import { UseFormGetValues } from "react-hook-form";
-import { Grid, Header, Icon, Segment } from "semantic-ui-react";
-import { copyToClipboard, parseAndFormatDate } from "../../../utils/misc";
+import { Spinner } from "@libretexts/davis-react";
+import { IconCopy } from "@tabler/icons-react";
+import { copyToClipboard } from "../../../utils/misc";
 import { OrgEvent, Organization } from "../../../types";
-import { format as formatDate, parseISO } from "date-fns";
-import { utcToZonedTime } from "date-fns-tz";
+import { format as formatDate } from "date-fns";
+
 interface EventSettingsSegmentProps {
   getValuesFn: UseFormGetValues<OrgEvent>;
   manageMode: "create" | "edit";
   org: Organization;
   loading: boolean;
   projectSyncID?: string;
-  projectSyncTitle?: string
+  projectSyncTitle?: string;
 }
 
+const DATE_FORMAT_STRING = "MM/dd/yyyy hh:mm aa";
+
 const EventSettingsSegment: React.FC<EventSettingsSegmentProps> = ({
   getValuesFn,
   manageMode,
@@ -20,136 +23,89 @@ const EventSettingsSegment: React.FC<EventSettingsSegmentProps> = ({
   loading,
   projectSyncID,
   projectSyncTitle,
-  ...rest
 }) => {
-  const DATE_FORMAT_STRING = "MM/dd/yyyy hh:mm aa";
+  if (loading) {
+    return (
+      <div className="flex justify-center py-8">
+        <Spinner size="md" />
+      </div>
+    );
+  }
 
   return (
-    <Segment loading={loading}>
-      <Grid divided>
-        <Grid.Row columns={2}>
-          <Grid.Column>
-            <Header as="h4">Event Information</Header>
-            <p>
-              <Header sub as="span">
-                Event Start Date:
-              </Header>
-              <span>
-                {" "}
-                {getValuesFn("startDate")
-                  ? formatDate(
-                      getValuesFn("startDate"),
-                      DATE_FORMAT_STRING
-                    )
-                  : "Unknown"}{" "}
-                ({getValuesFn("timeZone.abbrev")})
-              </span>
-            </p>
-            <p>
-              <Header sub as="span">
-                Event End Date:
-              </Header>
-              <span>
-                {" "}
-                {getValuesFn("endDate")
-                  ? formatDate(
-                      getValuesFn("endDate"),
-                      DATE_FORMAT_STRING
-                    )
-                  : "Unknown"}{" "}
-                ({getValuesFn("timeZone.abbrev")})
-              </span>
-            </p>
+    <div className="border border-gray-200 rounded-md p-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 divide-y md:divide-y-0 md:divide-x divide-gray-200">
+        <div>
+          <p className="font-semibold text-sm text-gray-700 mb-3">Event Information</p>
+          <dl className="space-y-2 text-sm">
+            <div className="flex gap-2">
+              <dt className="font-semibold uppercase text-xs text-gray-500 tracking-wide w-40 shrink-0">Event Start Date:</dt>
+              <dd>{getValuesFn("startDate") ? formatDate(getValuesFn("startDate"), DATE_FORMAT_STRING) : "Unknown"} ({getValuesFn("timeZone.abbrev")})</dd>
+            </div>
+            <div className="flex gap-2">
+              <dt className="font-semibold uppercase text-xs text-gray-500 tracking-wide w-40 shrink-0">Event End Date:</dt>
+              <dd>{getValuesFn("endDate") ? formatDate(getValuesFn("endDate"), DATE_FORMAT_STRING) : "Unknown"} ({getValuesFn("timeZone.abbrev")})</dd>
+            </div>
             {manageMode === "edit" && (
-              <p>
-                <Header sub as="span">
-                  Registration URL:
-                </Header>
-                <a
-                  href={`${org.domain}/events/${getValuesFn("eventID")}`}
-                  target="_blank"
-                >
-                  {" "}
-                  {`${org.domain}/events/${getValuesFn("eventID")}`}
-                </a>
-                <Icon
-                  name="copy"
-                  color="blue"
-                  className="ml-1p"
-                  style={{ cursor: "pointer" }}
-                  onClick={async () => {
-                    await copyToClipboard(
-                      `${org.domain}/events/${getValuesFn("eventID")}`
-                    );
-                  }}
-                />
-              </p>
+              <div className="flex gap-2 items-center">
+                <dt className="font-semibold uppercase text-xs text-gray-500 tracking-wide w-40 shrink-0">Registration URL:</dt>
+                <dd className="flex items-center gap-1">
+                  <a
+                    href={`${org.domain}/events/${getValuesFn("eventID")}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline truncate max-w-48"
+                  >
+                    {`${org.domain}/events/${getValuesFn("eventID")}`}
+                  </a>
+                  <button
+                    type="button"
+                    className="text-primary hover:text-primary/80 cursor-pointer"
+                    onClick={() => copyToClipboard(`${org.domain}/events/${getValuesFn("eventID")}`)}
+                    title="Copy URL"
+                  >
+                    <IconCopy size={14} />
+                  </button>
+                </dd>
+              </div>
             )}
-            {(projectSyncID && projectSyncTitle) && (
-              <p>
-                <Header sub as="span">
-                  Synced Project:
-                </Header>
-                <a
-                  href={`/projects/${projectSyncID}`}
-                  target="_blank"
-                >
-                  {" "}
-                  {projectSyncTitle}
-                </a>
-              </p>
+            {projectSyncID && projectSyncTitle && (
+              <div className="flex gap-2">
+                <dt className="font-semibold uppercase text-xs text-gray-500 tracking-wide w-40 shrink-0">Synced Project:</dt>
+                <dd>
+                  <a href={`/projects/${projectSyncID}`} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
+                    {projectSyncTitle}
+                  </a>
+                </dd>
+              </div>
             )}
-          </Grid.Column>
-          <Grid.Column>
-            <Header as="h4">Registration Information</Header>
-            <p>
-              <Header sub as="span">
-                <strong>Registration Open Date:</strong>{" "}
-              </Header>
-              <span>
-                {" "}
-                {getValuesFn("regOpenDate")
-                  ? formatDate(
-                      getValuesFn("regOpenDate"),
-                      DATE_FORMAT_STRING
-                    )
-                  : "Unknown"}{" "}
-                ({getValuesFn("timeZone.abbrev")})
-              </span>
-            </p>
-            <p>
-              <Header sub as="span">
-                <strong>Registration Close Date:</strong>{" "}
-              </Header>
-              <span>
-                {" "}
-                {getValuesFn("regCloseDate")
-                  ? formatDate(
-                      getValuesFn("regCloseDate"),
-                      DATE_FORMAT_STRING
-                    )
-                  : "Unknown"}{" "}
-                ({getValuesFn("timeZone.abbrev")})
-              </span>
-            </p>
+          </dl>
+        </div>
+        <div className="pt-4 md:pt-0 md:pl-6">
+          <p className="font-semibold text-sm text-gray-700 mb-3">Registration Information</p>
+          <dl className="space-y-2 text-sm">
+            <div className="flex gap-2">
+              <dt className="font-semibold uppercase text-xs text-gray-500 tracking-wide w-44 shrink-0">Registration Open Date:</dt>
+              <dd>{getValuesFn("regOpenDate") ? formatDate(getValuesFn("regOpenDate"), DATE_FORMAT_STRING) : "Unknown"} ({getValuesFn("timeZone.abbrev")})</dd>
+            </div>
+            <div className="flex gap-2">
+              <dt className="font-semibold uppercase text-xs text-gray-500 tracking-wide w-44 shrink-0">Registration Close Date:</dt>
+              <dd>{getValuesFn("regCloseDate") ? formatDate(getValuesFn("regCloseDate"), DATE_FORMAT_STRING) : "Unknown"} ({getValuesFn("timeZone.abbrev")})</dd>
+            </div>
             {org.orgID === "libretexts" && (
-              <p>
-                <Header sub as="span">
-                  <strong>Registration Fee:</strong>
-                </Header>
-                <span> ${getValuesFn("regFee") ?? "0.00"}</span>
-              </p>
+              <div className="flex gap-2">
+                <dt className="font-semibold uppercase text-xs text-gray-500 tracking-wide w-44 shrink-0">Registration Fee:</dt>
+                <dd>${getValuesFn("regFee") ?? "0.00"}</dd>
+              </div>
             )}
-            <p>
-              <Header sub as="span">
-                <strong>Collect Shipping Address:</strong>{" "}
-              </Header>
-              <span>{getValuesFn("collectShipping") ? "Yes" : "No"}</span>
-            </p>
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
-    </Segment>
+            <div className="flex gap-2">
+              <dt className="font-semibold uppercase text-xs text-gray-500 tracking-wide w-44 shrink-0">Collect Shipping Address:</dt>
+              <dd>{getValuesFn("collectShipping") ? "Yes" : "No"}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/FeeWaiverInputMessage.tsx b/client/src/components/controlpanel/EventsManager/FeeWaiverInputMessage.tsx
index 32a2ac08c..56b477e48 100644
--- a/client/src/components/controlpanel/EventsManager/FeeWaiverInputMessage.tsx
+++ b/client/src/components/controlpanel/EventsManager/FeeWaiverInputMessage.tsx
@@ -1,23 +1,14 @@
-import { Message, Icon } from "semantic-ui-react";
-import Breakpoint from "../../util/Breakpoints";
+import { Alert } from "@libretexts/davis-react";
+import { IconCurrencyDollar } from "@tabler/icons-react";
 
-const FeeWaiverInputMessage: React.FC = ({ ...rest }) => {
+const FeeWaiverInputMessage: React.FC = () => {
   return (
-    <Message info {...rest}>
-      <Message.Content>
-        <Breakpoint name="desktop">
-          <div className="flex-row-div flex-row-verticalcenter">
-            <Icon name="dollar" />
-            <p className="ml-1p">
-              Per event settings, participants will be given the option to 
-              provide a fee waiver code during registration. Conductor will 
-              automatically add this functionality and you do not need to 
-              add any additional prompts.
-            </p>
-          </div>
-        </Breakpoint>
-      </Message.Content>
-    </Message>
+    <Alert
+      variant="info"
+      message="Per event settings, participants will be given the option to provide a fee waiver code during registration. Conductor will automatically add this functionality and you do not need to add any additional prompts."
+      icon={<IconCurrencyDollar size={18} />}
+      showIcon
+    />
   );
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/FeeWaiverModal.tsx b/client/src/components/controlpanel/EventsManager/FeeWaiverModal.tsx
index c4179d655..f34d7383f 100644
--- a/client/src/components/controlpanel/EventsManager/FeeWaiverModal.tsx
+++ b/client/src/components/controlpanel/EventsManager/FeeWaiverModal.tsx
@@ -1,4 +1,5 @@
-import { Button, Icon, Modal, Form, Accordion } from "semantic-ui-react";
+import { Modal, Button, Checkbox } from "@libretexts/davis-react";
+import { IconDeviceFloppy, IconPlus } from "@tabler/icons-react";
 import CtlTextInput from "../../ControlledInputs/CtlTextInput";
 import useGlobalError from "../../error/ErrorHooks";
 import { useState, useEffect } from "react";
@@ -22,7 +23,6 @@ const FeeWaiverModal: React.FC<FeeWaiverModalProps> = ({
   show,
   feeWaiverToEdit,
   onClose,
-  ...props
 }) => {
   const { handleGlobalError } = useGlobalError();
   const {
@@ -105,21 +105,20 @@ const FeeWaiverModal: React.FC<FeeWaiverModalProps> = ({
   }
 
   return (
-    <Modal size="large" open={show} onClose={onClose} {...props}>
+    <Modal open={show} onClose={onClose} size="lg">
       <Modal.Header>
-        {mode === "create" ? "Create" : "Edit"} Fee Waiver
+        <Modal.Title>{mode === "create" ? "Create" : "Edit"} Fee Waiver</Modal.Title>
+        <Modal.Close />
       </Modal.Header>
-      <Modal.Content scrolling className="mb-4p">
-        <p className="mb-4p">
-          Create a fee waiver to share a discount code with participants.
-          Discounts can be partial or full (100%). Fee waivers can be
-          inactivated at any time, if necessary. Fee waiver names must be unique within an event.{" "}
-          <strong>
-            Discount percentages cannot be changed after creation.
-          </strong>
-        </p>
+      <Modal.Body className="overflow-y-auto max-h-[70vh]">
+        <div className="flex flex-col gap-4">
+          <p className="text-sm text-gray-600">
+            Create a fee waiver to share a discount code with participants.
+            Discounts can be partial or full (100%). Fee waivers can be
+            inactivated at any time, if necessary. Fee waiver names must be unique within an event.{" "}
+            <strong>Discount percentages cannot be changed after creation.</strong>
+          </p>
 
-        <Form noValidate loading={loading}>
           <CtlTextInput
             name="name"
             control={control}
@@ -127,18 +126,14 @@ const FeeWaiverModal: React.FC<FeeWaiverModalProps> = ({
             label="Fee Waiver Name"
             placeholder="Enter Fee Waiver Name..."
           />
-          <Form.Checkbox
-            id="feewaiver-active"
-            label={
-              <label className="form-field-label" htmlFor="feewaiver-active">
-                Active
-              </label>
-            }
+
+          <Checkbox
+            name="feewaiver-active"
+            label="Active"
             checked={watchValue("active") ?? false}
-            onChange={(_e, { checked }) => {
-              setValue("active", checked ?? false);
-            }}
+            onChange={(checked) => setValue("active", checked)}
           />
+
           <CtlTextInput
             name="percentage"
             control={control}
@@ -150,7 +145,8 @@ const FeeWaiverModal: React.FC<FeeWaiverModalProps> = ({
             max={100}
             disabled={mode === "edit"}
           />
-          <div className="flex-row-div left-flex">
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CtlDateInput
               type="datetime-local"
               name="expirationDate"
@@ -159,27 +155,29 @@ const FeeWaiverModal: React.FC<FeeWaiverModalProps> = ({
               label="Expiration Date"
               value={getValues("expirationDate")}
               error={false}
-              className="my-2p"
             />
             <CtlTimeZoneInput
               name="timeZone"
               control={control}
               label="Time Zone (applies to all dates/times)"
               value={getValues("timeZone")}
-              className="my-2p ml-2p"
             />
           </div>
-        </Form>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button onClick={onClose} color="grey">
-          Cancel
-        </Button>
-        <Button onClick={handleSave} color="green">
-          <Icon name="save" />
-          {mode === "create" ? "Create" : "Save"}
-        </Button>
-      </Modal.Actions>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>Cancel</Button>
+          <Button
+            variant="primary"
+            icon={mode === "create" ? <IconPlus size={16} /> : <IconDeviceFloppy size={16} />}
+            loading={loading}
+            onClick={handleSave}
+          >
+            {mode === "create" ? "Create" : "Save"}
+          </Button>
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/components/controlpanel/EventsManager/FeeWaiverStatusLabel.tsx b/client/src/components/controlpanel/EventsManager/FeeWaiverStatusLabel.tsx
index 493d8667f..b5feb7e9e 100644
--- a/client/src/components/controlpanel/EventsManager/FeeWaiverStatusLabel.tsx
+++ b/client/src/components/controlpanel/EventsManager/FeeWaiverStatusLabel.tsx
@@ -1,27 +1,16 @@
-import { Label, LabelProps } from "semantic-ui-react";
+import { Badge } from "@libretexts/davis-react";
 import { OrgEventFeeWaiver } from "../../../types/OrgEvent";
 
-interface FeeWaiverStatusLabelProps extends LabelProps {
+interface FeeWaiverStatusLabelProps {
   active: OrgEventFeeWaiver["active"];
 }
 
-const FeeWaiverStatusLabel: React.FC<FeeWaiverStatusLabelProps> = ({
-  active,
-  ...rest
-}) => {
+const FeeWaiverStatusLabel: React.FC<FeeWaiverStatusLabelProps> = ({ active }) => {
   switch (active) {
     case true:
-      return (
-        <Label color="green" {...rest}>
-          Active
-        </Label>
-      );
+      return <Badge variant="success" label="Active" />;
     default:
-      return (
-        <Label color="grey" {...rest}>
-          Inactive
-        </Label>
-      );
+      return <Badge variant="default" label="Inactive" />;
   }
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/FeeWaiversSegment.tsx b/client/src/components/controlpanel/EventsManager/FeeWaiversSegment.tsx
index 65a1f3817..bfd579601 100644
--- a/client/src/components/controlpanel/EventsManager/FeeWaiversSegment.tsx
+++ b/client/src/components/controlpanel/EventsManager/FeeWaiversSegment.tsx
@@ -1,14 +1,7 @@
-import {
-  Grid,
-  Header,
-  Segment,
-  Table,
-  Button,
-  Icon,
-} from "semantic-ui-react";
+import { Button, Spinner } from "@libretexts/davis-react";
+import { IconCopy, IconEdit, IconPlus } from "@tabler/icons-react";
 import { useState } from "react";
 import { OrgEvent } from "../../../types";
-import useGlobalError from "../../error/ErrorHooks";
 import { copyToClipboard, parseAndFormatDate } from "../../../utils/misc";
 import { OrgEventFeeWaiver } from "../../../types/OrgEvent";
 import FeeWaiverStatusLabel from "./FeeWaiverStatusLabel";
@@ -37,7 +30,6 @@ const FeeWaiversSegment: React.FC<FeeWaiversSegmentProps> = ({
   loading,
   canEdit,
   onUpdate,
-  ...rest
 }) => {
   const [showFeeWaiverModal, setShowFeeWaiverModal] = useState(false);
   const [feeWaiverToEdit, setFeeWaiverToEdit] = useState<OrgEventFeeWaiver>();
@@ -53,107 +45,94 @@ const FeeWaiversSegment: React.FC<FeeWaiversSegmentProps> = ({
     setShowFeeWaiverModal(true);
   }
 
-  function TableRow({ feeWaiver, ...props }: { feeWaiver: OrgEventFeeWaiver }) {
-    return (
-      <Table.Row {...props}>
-        <Table.Cell>
-          <span>{feeWaiver.name}</span>
-        </Table.Cell>
-        <Table.Cell>
-          <FeeWaiverStatusLabel active={feeWaiver.active} />
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {feeWaiver.code}
-            <Icon
-              name="copy"
-              color="blue"
-              className="ml-1p"
-              style={{ cursor: "pointer" }}
-              onClick={async () => {
-                await copyToClipboard(feeWaiver.code)
-              }}
-            />
-          </span>
-        </Table.Cell>
-        <Table.Cell>
-          <span>{feeWaiver.percentage}%</span>
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {parseAndFormatDate(feeWaiver.expirationDate, "MM/dd/yyyy hh:mm aa")}
-            {" "}
-            ({feeWaiver.timeZone.abbrev})
-          </span>
-        </Table.Cell>
-        <Table.Cell textAlign="center">
-          <Button.Group vertical fluid>
-            <Button
-              color="blue"
-              onClick={() => handleOpenFeeWaiverModal(feeWaiver)}
-            >
-              <Icon name="edit" />
-              Edit
-            </Button>
-          </Button.Group>
-        </Table.Cell>
-      </Table.Row>
-    );
-  }
-
   return (
-    <Grid.Column {...rest}>
-      <Header
-        as="h2"
-        dividing
-        className="flex-row-div  flex-row-verticalcenter"
-      >
-        <span>Fee Waivers</span>
-        <div className="right-flex">
-          <Button color="green" onClick={() => handleOpenFeeWaiverModal()}>
-            <Icon name="plus" />
-            Add Fee Waiver
-          </Button>
-        </div>
-      </Header>
-      <Segment.Group size="large" raised className="mb-4p">
-        <Segment loading={loading}>
-          <Table striped celled size="small">
-            <Table.Header>
-              <Table.Row>
-                {TABLE_COLUMNS.map((col) => {
-                  return (
-                    <Table.HeaderCell key={col.key}>
-                      <span>{col.text}</span>
-                    </Table.HeaderCell>
-                  );
-                })}
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {(feeWaivers && feeWaivers.length > 0) && (
-                feeWaivers.map((item) => <TableRow feeWaiver={item} key={item.code} />)
-              )}
-              {(!feeWaivers || feeWaivers.length === 0 )&& (
-                <Table.Row>
-                  <Table.Cell colSpan={TABLE_COLUMNS.length}>
-                    <p className="text-center">
-                      <em>No fee waivers found.</em>
-                    </p>
-                  </Table.Cell>
-                </Table.Row>
+    <div>
+      <div className="flex items-center justify-between border-b border-gray-200 pb-3 mb-4">
+        <h2 className="text-lg font-semibold text-gray-800 m-0">Fee Waivers</h2>
+        <Button
+          variant="primary"
+          icon={<IconPlus size={16} />}
+          onClick={() => handleOpenFeeWaiverModal()}
+        >
+          Add Fee Waiver
+        </Button>
+      </div>
+
+      <div className="border border-gray-200 rounded-lg overflow-x-auto">
+        {loading ? (
+          <div className="flex justify-center p-8">
+            <Spinner />
+          </div>
+        ) : (
+          <table className="min-w-full text-sm">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                {TABLE_COLUMNS.map((col) => (
+                  <th
+                    key={col.key}
+                    className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide"
+                  >
+                    {col.text}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {feeWaivers && feeWaivers.length > 0 ? (
+                feeWaivers.map((item) => (
+                  <tr key={item.code} className="hover:bg-gray-50">
+                    <td className="px-4 py-3">{item.name}</td>
+                    <td className="px-4 py-3">
+                      <FeeWaiverStatusLabel active={item.active} />
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className="flex items-center gap-1">
+                        {item.code}
+                        <button
+                          type="button"
+                          title="Copy code"
+                          className="p-1 hover:bg-gray-100 rounded text-blue-600"
+                          onClick={async () => await copyToClipboard(item.code)}
+                        >
+                          <IconCopy size={14} />
+                        </button>
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">{item.percentage}%</td>
+                    <td className="px-4 py-3">
+                      {parseAndFormatDate(item.expirationDate, "MM/dd/yyyy hh:mm aa")}{" "}
+                      ({item.timeZone.abbrev})
+                    </td>
+                    <td className="px-4 py-3">
+                      <Button
+                        variant="primary"
+                        icon={<IconEdit size={14} />}
+                        onClick={() => handleOpenFeeWaiverModal(item)}
+                      >
+                        Edit
+                      </Button>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={TABLE_COLUMNS.length} className="px-4 py-8 text-center text-gray-500">
+                    <em>No fee waivers found.</em>
+                  </td>
+                </tr>
               )}
-            </Table.Body>
-          </Table>
-        </Segment>
-      </Segment.Group>
+            </tbody>
+          </table>
+        )}
+      </div>
+
       <FeeWaiverModal
         show={showFeeWaiverModal}
         orgEvent={orgEvent}
         feeWaiverToEdit={feeWaiverToEdit}
         onClose={handleCloseFeeWaiverModal}
       />
-    </Grid.Column>
+    </div>
   );
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/ParticipantsSegment.tsx b/client/src/components/controlpanel/EventsManager/ParticipantsSegment.tsx
index 69f6dcdeb..46e96c07f 100644
--- a/client/src/components/controlpanel/EventsManager/ParticipantsSegment.tsx
+++ b/client/src/components/controlpanel/EventsManager/ParticipantsSegment.tsx
@@ -1,15 +1,5 @@
-//import "../../../styles/global.css";
-import {
-  Grid,
-  Header,
-  Segment,
-  Table,
-  Pagination,
-  Button,
-  Icon,
-  Checkbox,
-  Message,
-} from "semantic-ui-react";
+import { Button, Spinner } from "@libretexts/davis-react";
+import { IconBan, IconDownload, IconSettings, IconCheck } from "@tabler/icons-react";
 import React, { useEffect, useMemo, useState } from "react";
 import {
   OrgEvent,
@@ -60,88 +50,52 @@ const ParticipantsSegment: React.FC<ParticipantsSegmentProps> = ({
   onChangeActivePage,
   onUnregisterParticipants,
   onConfigureAutoSync,
-  ...rest
 }) => {
-  // UI
-  const [tableColumns, setTableColumns] = useState<
-    { key: number; text: string }[]
-  >([]);
+  const [tableColumns, setTableColumns] = useState<{ key: number; text: string }[]>([]);
   const [showUnregisterModal, setShowUnregisterModal] = useState(false);
   const [showSyncProjectModal, setShowSyncProjectModal] = useState(false);
-  const [selectableParticipants, setSelectableParticipants] = useState<
-    SelectableParticipant[]
-  >([]);
+  const [selectableParticipants, setSelectableParticipants] = useState<SelectableParticipant[]>([]);
   const [allSelected, setAllSelected] = useState<boolean>(false);
 
-  /**
-   * Get registration form prompts and prepare them for table UI
-   */
   useEffect(() => {
     if (!orgEvent || !orgEvent.prompts) return;
     setTableColumns([
-      ...orgEvent.prompts.map((p) => {
-        return {
-          key: p.order,
-          text: p.promptText,
-        };
-      }),
+      ...orgEvent.prompts.map((p) => ({ key: p.order, text: p.promptText })),
     ]);
-  }, [orgEvent, setTableColumns]);
+  }, [orgEvent]);
 
-  // Reset selected participants when participants change
   useEffect(() => {
     if (!participants) return;
     setSelectableParticipants(
-      participants.map((p) => {
-        return {
-          ...p,
-          selected: false,
-        };
-      })
+      participants.map((p) => ({ ...p, selected: false }))
     );
-  }, [participants, setSelectableParticipants]);
+  }, [participants]);
 
   const selectedParticipantsCount: number = useMemo(
-    () =>
-      selectableParticipants.filter((p) => {
-        return p.selected;
-      }).length,
+    () => selectableParticipants.filter((p) => p.selected).length,
     [selectableParticipants]
   );
 
   const selectedParticipants: OrgEventParticipant[] = useMemo(
-    () =>
-      selectableParticipants.filter((p) => {
-        return p.selected;
-      }),
+    () => selectableParticipants.filter((p) => p.selected),
     [selectableParticipants]
   );
 
   function resetSelectedParticipants() {
     setAllSelected(false);
     setSelectableParticipants(
-      [...selectableParticipants].map((p) => {
-        return {
-          ...p,
-          selected: false,
-        };
-      })
+      [...selectableParticipants].map((p) => ({ ...p, selected: false }))
     );
   }
 
   function getResponseValText(promptOrder: number, responses: OrgEventParticipantFormResponse[]): string {
-    const foundPrompt = orgEvent?.prompts.find(
-      (p) => p.order === promptOrder
-    );
+    const foundPrompt = orgEvent?.prompts.find((p) => p.order === promptOrder);
     if (!foundPrompt) return "";
     const foundResponse = responses.find((r) => r.promptNum === foundPrompt.order);
     if (!foundResponse) return "";
 
     if (["3-likert", "5-likert", "7-likert"].includes(foundPrompt.promptType)) {
-      return getLikertResponseText(
-        foundPrompt.promptType,
-        parseInt(foundResponse.responseVal ?? "")
-      );
+      return getLikertResponseText(foundPrompt.promptType, parseInt(foundResponse.responseVal ?? ""));
     }
 
     if (foundPrompt.promptType === "text" && foundResponse.responseVal) {
@@ -152,15 +106,13 @@ const ParticipantsSegment: React.FC<ParticipantsSegmentProps> = ({
 
     if (foundPrompt.promptType === "dropdown" && foundResponse.responseVal) {
       const foundPromptOption = foundPrompt.promptOptions?.find((o) => o.value === foundResponse.responseVal);
-      if (foundPromptOption) {
-        return foundPromptOption.text;
-      }
+      if (foundPromptOption) return foundPromptOption.text;
     } else if (foundPrompt.promptType === "dropdown") {
       return "(No Response)";
     }
 
     if (foundPrompt.promptType === "checkbox") {
-      return foundResponse.responseVal === "true" ? 'Yes' : 'No';
+      return foundResponse.responseVal === "true" ? "Yes" : "No";
     }
 
     return "UNKNOWN VALUE";
@@ -176,35 +128,24 @@ const ParticipantsSegment: React.FC<ParticipantsSegmentProps> = ({
       setShowUnregisterModal(false);
       return;
     }
-
     onUnregisterParticipants(selectedParticipants.map((p) => p.regID));
     resetSelectedParticipants();
     setShowUnregisterModal(false);
   }
+
   function handleCheckbox(participant: SelectableParticipant, checked = false) {
     if (!participant) return;
-
-    const foundParticipant = selectableParticipants.find((p) => {
-      return p.regID === participant.regID;
-    });
-
-    const foundIndex = selectableParticipants.findIndex((p) => {
-      return p.regID === participant.regID;
-    });
-
-    if (!foundParticipant || foundIndex === -1) return;
+    const foundIndex = selectableParticipants.findIndex((p) => p.regID === participant.regID);
+    if (foundIndex === -1) return;
     const arr = [...selectableParticipants];
-    arr.splice(foundIndex, 1, { ...foundParticipant, selected: checked });
+    arr.splice(foundIndex, 1, { ...selectableParticipants[foundIndex], selected: checked });
     setSelectableParticipants(arr);
     if (!checked) setAllSelected(false);
   }
 
   function handleSelectAllCheckbox(checked = false) {
     setAllSelected(checked);
-    const arr = [...selectableParticipants].map((p) => {
-      return { ...p, selected: checked };
-    });
-    setSelectableParticipants(arr);
+    setSelectableParticipants([...selectableParticipants].map((p) => ({ ...p, selected: checked })));
   }
 
   function handleConfigureAutoSync(projectID: string) {
@@ -212,230 +153,178 @@ const ParticipantsSegment: React.FC<ParticipantsSegmentProps> = ({
     setShowSyncProjectModal(false);
   }
 
-  function TableRow({
-    participant,
-    selected,
-    ...props
-  }: {
-    participant: SelectableParticipant;
-    selected: boolean;
-  }) {
-    return (
-      <Table.Row {...props}>
-        <Table.Cell>
-          <Checkbox
-            id={`participant-${
-              participant.user?.uuid ?? participant.email
-            }-checkbox`}
-            checked={selected}
-            onClick={(e, data) => handleCheckbox(participant, data.checked)}
-          />
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {participant.user?.firstName ?? participant.firstName ?? "Unknown"}
-          </span>
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {participant.user?.lastName ?? participant.lastName ?? "Unknown"}
-          </span>
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {participant.user?.email ?? participant.email ?? "Unknown"}
-          </span>
-        </Table.Cell>
-        <Table.Cell>
-          <PaymentStatusLabel paymentStatus={participant.paymentStatus} />
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {participant.registeredBy?.uuid === participant.user?.uuid
-              ? "Self"
-              : `${participant.registeredBy?.firstName} ${participant.registeredBy?.lastName} (${participant.registeredBy?.email})`}
-          </span>
-        </Table.Cell>
-        {orgEvent.collectShipping && (
-          <Table.Cell>
-            <span>
-              {participant.shippingAddress?.lineOne}
-              {participant.shippingAddress?.lineTwo
-                ? `, ${participant.shippingAddress.lineTwo}`
-                : ""}
-              {", " + participant.shippingAddress?.city}
-              {", " + participant.shippingAddress?.state}
-              {" " + participant.shippingAddress?.zip}
-              {" " + participant.shippingAddress?.country}
-            </span>
-          </Table.Cell>
-        )}
-        {tableColumns.map((item) => {
-          return (
-            <Table.Cell key={item.key}>
-              <span>{getResponseValText(item.key, participant.formResponses)}</span>
-            </Table.Cell>
-          );
-        })}
-      </Table.Row>
-    );
-  }
-
   if (!show) {
     return (
-      <Grid.Column {...rest}>
-        <Header
-          as="h2"
-          dividing
-          className="flex-row-div  flex-row-verticalcenter"
-        >
-          <span>Participants</span>
-          <div className="right-flex">
-            <Button onClick={toggleVisibility}>Show</Button>
-          </div>
-        </Header>
-        <Segment.Group size="large" raised className="mb-4p">
-          <Segment loading={loading}>
-            <span>Collapsed for brevity... Click "Show" to view</span>
-          </Segment>
-        </Segment.Group>
-      </Grid.Column>
+      <div>
+        <div className="flex items-center justify-between border-b border-gray-200 pb-3 mb-4">
+          <h2 className="text-lg font-semibold text-gray-800 m-0">Participants</h2>
+          <Button variant="outline" onClick={toggleVisibility}>Show</Button>
+        </div>
+        <div className="border border-gray-200 rounded-lg p-4 text-sm text-gray-500">
+          {loading ? <Spinner /> : <span>Collapsed for brevity... Click "Show" to view</span>}
+        </div>
+      </div>
     );
   }
 
   return (
-    <Grid.Column {...rest}>
-      <Header
-        as="h2"
-        dividing
-        className="flex-row-div  flex-row-verticalcenter"
-      >
-        <span>Participants</span>
-        <div className="right-flex">
-          <Button onClick={toggleVisibility}>Hide</Button>
-        </div>
-      </Header>
-      <Segment.Group size="large" raised className="mb-4p">
-        <Segment loading={loading}>
-          <div className="flex-row-div flex-row-verticalcenter mb-1p">
-            <div className="left-flex">
-              {autoSyncSuccess && (
-                <Message success>
-                  <Icon name="check" />
-                  <span>Auto-Sync Configured Successfully</span>
-                </Message>
-              )}
-            </div>
-            <div className="right-flex">
-              <Button
-                color="red"
-                disabled={selectedParticipantsCount === 0}
-                onClick={() => handleOpenUnregisterModal()}
-              >
-                <Icon name="ban" />
-                <span>Unregister</span>
-              </Button>
-              <Button
-                color="blue"
-                onClick={() => setShowSyncProjectModal(true)}
-              >
-                <Icon name="setting" />
-                <span>Configure Auto-Sync to Project</span>
-              </Button>
+    <div>
+      <div className="flex items-center justify-between border-b border-gray-200 pb-3 mb-4">
+        <h2 className="text-lg font-semibold text-gray-800 m-0">Participants</h2>
+        <Button variant="outline" onClick={toggleVisibility}>Hide</Button>
+      </div>
+
+      <div className="flex items-center justify-between mb-3 gap-2">
+        <div>
+          {autoSyncSuccess && (
+            <div className="flex items-center gap-2 px-3 py-2 bg-green-50 border border-green-200 rounded-md text-green-800 text-sm">
+              <IconCheck size={16} />
+              <span>Auto-Sync Configured Successfully</span>
             </div>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="destructive"
+            icon={<IconBan size={16} />}
+            disabled={selectedParticipantsCount === 0}
+            onClick={handleOpenUnregisterModal}
+          >
+            Unregister
+          </Button>
+          <Button
+            variant="secondary"
+            icon={<IconSettings size={16} />}
+            onClick={() => setShowSyncProjectModal(true)}
+          >
+            Configure Auto-Sync to Project
+          </Button>
+        </div>
+      </div>
+
+      <div className="border border-gray-200 rounded-lg overflow-x-auto">
+        {loading ? (
+          <div className="flex justify-center p-8">
+            <Spinner />
           </div>
-          <div className="x-scroll-table-container">
-            <Table striped celled size="small" className="mb-05p">
-              <Table.Header>
-                <Table.Row>
-                  <Table.HeaderCell key="actions" collapsing>
-                    <Checkbox
-                      id="select-all-checkbox"
-                      checked={allSelected}
-                      onClick={(e, data) =>
-                        handleSelectAllCheckbox(data.checked)
-                      }
-                    />
-                  </Table.HeaderCell>
-                  <Table.HeaderCell key="firstName" collapsing>
-                    <span>First Name</span>
-                  </Table.HeaderCell>
-                  <Table.HeaderCell key="lastName" collapsing>
-                    <span>Last Name</span>
-                  </Table.HeaderCell>
-                  <Table.HeaderCell key="email" collapsing>
-                    <span>Email Address</span>
-                  </Table.HeaderCell>
-                  <Table.HeaderCell key="paymentStatus" collapsing>
-                    <span>Payment Status</span>
-                  </Table.HeaderCell>
-                  <Table.HeaderCell key="registeredBy" collapsing>
-                    <span>Registered By</span>
-                  </Table.HeaderCell>
-                  {orgEvent.collectShipping && (
-                    <Table.HeaderCell key="shippingAddress" collapsing>
-                      <span>Shipping Address</span>
-                    </Table.HeaderCell>
-                  )}
-                  {tableColumns.map((item) => (
-                    <Table.HeaderCell key={item.key} collapsing>
-                      <span>{item.text}</span>
-                    </Table.HeaderCell>
-                  ))}
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                {selectableParticipants &&
-                  selectableParticipants.length > 0 &&
-                  selectableParticipants.map((item) => (
-                    <TableRow
-                      participant={item}
-                      selected={item.selected}
-                      key={item.user?.uuid ?? item.email}
-                    />
-                  ))}
-                {(!selectableParticipants ||
-                  selectableParticipants.length === 0) && (
-                  <Table.Row>
-                    <Table.Cell colSpan={6}>
-                      <p className="text-center">
-                        <em>No participants found.</em>
-                      </p>
-                    </Table.Cell>
-                  </Table.Row>
+        ) : (
+          <table className="min-w-full text-sm">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-4 py-3 w-10">
+                  <input
+                    type="checkbox"
+                    id="select-all-checkbox"
+                    checked={allSelected}
+                    onChange={(e) => handleSelectAllCheckbox(e.target.checked)}
+                    className="accent-primary"
+                  />
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide whitespace-nowrap">First Name</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide whitespace-nowrap">Last Name</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide whitespace-nowrap">Email Address</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide whitespace-nowrap">Payment Status</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide whitespace-nowrap">Registered By</th>
+                {orgEvent.collectShipping && (
+                  <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide whitespace-nowrap">Shipping Address</th>
                 )}
-              </Table.Body>
-            </Table>
-          </div>
-          <div className="flex-row-div mt-1p">
-            <div className="left-flex">
-              <p style={{ fontSize: "0.9em" }}>
-                Displaying{" "}
-                {selectableParticipants ? selectableParticipants.length : 0} of{" "}
-                {totalItems} participants.
-              </p>
-            </div>
-            <div className="right-flex flex-row-verticalcenter">
-              {selectableParticipants && selectableParticipants.length > 0 && (
-                <Button className="mr-4p" onClick={onDownloadParticipants}>
-                  <Icon name="download" /> Export CSV
-                </Button>
+                {tableColumns.map((item) => (
+                  <th key={item.key} className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide whitespace-nowrap">
+                    {item.text}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {selectableParticipants && selectableParticipants.length > 0 ? (
+                selectableParticipants.map((item) => (
+                  <tr key={item.user?.uuid ?? item.email} className="hover:bg-gray-50">
+                    <td className="px-4 py-3">
+                      <input
+                        type="checkbox"
+                        id={`participant-${item.user?.uuid ?? item.email}-checkbox`}
+                        checked={item.selected}
+                        onChange={(e) => handleCheckbox(item, e.target.checked)}
+                        className="accent-primary"
+                      />
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap">{item.user?.firstName ?? item.firstName ?? "Unknown"}</td>
+                    <td className="px-4 py-3 whitespace-nowrap">{item.user?.lastName ?? item.lastName ?? "Unknown"}</td>
+                    <td className="px-4 py-3 whitespace-nowrap">{item.user?.email ?? item.email ?? "Unknown"}</td>
+                    <td className="px-4 py-3">
+                      <PaymentStatusLabel paymentStatus={item.paymentStatus} />
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap">
+                      {item.registeredBy?.uuid === item.user?.uuid
+                        ? "Self"
+                        : `${item.registeredBy?.firstName} ${item.registeredBy?.lastName} (${item.registeredBy?.email})`}
+                    </td>
+                    {orgEvent.collectShipping && (
+                      <td className="px-4 py-3">
+                        <span>
+                          {item.shippingAddress?.lineOne}
+                          {item.shippingAddress?.lineTwo ? `, ${item.shippingAddress.lineTwo}` : ""}
+                          {", " + item.shippingAddress?.city}
+                          {", " + item.shippingAddress?.state}
+                          {" " + item.shippingAddress?.zip}
+                          {" " + item.shippingAddress?.country}
+                        </span>
+                      </td>
+                    )}
+                    {tableColumns.map((col) => (
+                      <td key={col.key} className="px-4 py-3">
+                        {getResponseValText(col.key, item.formResponses)}
+                      </td>
+                    ))}
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={6 + tableColumns.length + (orgEvent.collectShipping ? 1 : 0)} className="px-4 py-8 text-center text-gray-500">
+                    <em>No participants found.</em>
+                  </td>
+                </tr>
               )}
-              <Pagination
-                activePage={activePage}
-                totalPages={totalPages}
-                firstItem={null}
-                lastItem={null}
-                onPageChange={(e, data) =>
-                  onChangeActivePage(
-                    parseInt(data.activePage?.toString() ?? "1") ?? 1
-                  )
-                }
-              />
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between mt-3">
+        <p className="text-sm text-gray-600">
+          Displaying {selectableParticipants ? selectableParticipants.length : 0} of {totalItems} participants.
+        </p>
+        <div className="flex items-center gap-3">
+          {selectableParticipants && selectableParticipants.length > 0 && (
+            <Button variant="outline" icon={<IconDownload size={16} />} onClick={onDownloadParticipants}>
+              Export CSV
+            </Button>
+          )}
+          {totalPages > 1 && (
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => onChangeActivePage(Math.max(1, activePage - 1))}
+                disabled={activePage <= 1}
+                className="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                ‹
+              </button>
+              <span className="px-3 py-1.5 text-sm text-gray-600">
+                {activePage} / {totalPages}
+              </span>
+              <button
+                type="button"
+                onClick={() => onChangeActivePage(Math.min(totalPages, activePage + 1))}
+                disabled={activePage >= totalPages}
+                className="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                ›
+              </button>
             </div>
-          </div>
-        </Segment>
-      </Segment.Group>
+          )}
+        </div>
+      </div>
 
       <UnregisterParticipantsModal
         show={showUnregisterModal}
@@ -448,7 +337,7 @@ const ParticipantsSegment: React.FC<ParticipantsSegmentProps> = ({
         onClose={() => setShowSyncProjectModal(false)}
         onConfirm={(projectID) => handleConfigureAutoSync(projectID)}
       />
-    </Grid.Column>
+    </div>
   );
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/PaymentStatusLabel.tsx b/client/src/components/controlpanel/EventsManager/PaymentStatusLabel.tsx
index 969e6b0e3..732f57315 100644
--- a/client/src/components/controlpanel/EventsManager/PaymentStatusLabel.tsx
+++ b/client/src/components/controlpanel/EventsManager/PaymentStatusLabel.tsx
@@ -1,57 +1,26 @@
-import { Label, LabelProps } from "semantic-ui-react";
+import { Badge } from "@libretexts/davis-react";
 import { OrgEventParticipant } from "../../../types";
 
-interface PaymentStatusLabelProps extends LabelProps {
+interface PaymentStatusLabelProps {
   paymentStatus: OrgEventParticipant["paymentStatus"];
 }
 
-const PaymentStatusLabel: React.FC<PaymentStatusLabelProps> = ({
-  paymentStatus,
-  ...rest
-}) => {
+const PaymentStatusLabel: React.FC<PaymentStatusLabelProps> = ({ paymentStatus }) => {
   switch (paymentStatus) {
     case "na":
-      return (
-        <Label color="grey" {...rest}>
-          N/A
-        </Label>
-      );
+      return <Badge variant="default" label="N/A" />;
     case "unpaid":
-      return (
-        <Label color="red" {...rest}>
-          Unpaid
-        </Label>
-      );
+      return <Badge variant="danger" label="Unpaid" />;
     case "paid":
-      return (
-        <Label color="green" {...rest}>
-          Paid
-        </Label>
-      );
+      return <Badge variant="success" label="Paid" />;
     case "waived":
-      return (
-        <Label color="blue" {...rest}>
-          Waived
-        </Label>
-      );
+      return <Badge variant="primary" label="Waived" />;
     case "partial_waived":
-      return (
-        <Label color="blue" {...rest}>
-          Partially Waived
-        </Label>
-      );
+      return <Badge variant="primary" label="Partially Waived" />;
     case "refunded":
-      return (
-        <Label color="orange" {...rest}>
-          Refunded
-        </Label>
-      );
+      return <Badge variant="warning" label="Refunded" />;
     default:
-      return (
-        <Label color="grey" {...rest}>
-          Unknown
-        </Label>
-      );
+      return <Badge variant="default" label="Unknown" />;
   }
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/RegistrationOpenStatusMessage.tsx b/client/src/components/controlpanel/EventsManager/RegistrationOpenStatusMessage.tsx
index 6d59d4a70..6f3057d39 100644
--- a/client/src/components/controlpanel/EventsManager/RegistrationOpenStatusMessage.tsx
+++ b/client/src/components/controlpanel/EventsManager/RegistrationOpenStatusMessage.tsx
@@ -1,89 +1,69 @@
-import { Message, Icon, MessageProps } from "semantic-ui-react";
+import { IconClock, IconX } from "@tabler/icons-react";
 import { isBefore, isAfter, format as formatDate, parseISO } from "date-fns";
 import Breakpoint from "../../util/Breakpoints";
 import { TimeZoneOption } from "../../../types";
 
-interface RegistrationOpenStatusMessageProps extends MessageProps {
+interface RegistrationOpenStatusMessageProps {
   regOpenDate?: Date;
   regCloseDate?: Date;
   timeZone?: TimeZoneOption;
+  className?: string;
 }
 
-const RegistrationOpenStatusMessage: React.FC<
-  RegistrationOpenStatusMessageProps
-> = ({ regOpenDate, regCloseDate, timeZone, ...rest }) => {
+const RegistrationOpenStatusMessage: React.FC<RegistrationOpenStatusMessageProps> = ({
+  regOpenDate,
+  regCloseDate,
+  timeZone,
+  className,
+}) => {
   const getRegStatus = (): "notOpen" | "closed" => {
     if (!regOpenDate || !regCloseDate || !timeZone) return "notOpen";
-    if (isBefore(new Date(), parseISO(regOpenDate.toString()))) {
-      return "notOpen";
-    }
-    if (isAfter(new Date(), parseISO(regCloseDate.toString()))) {
-      return "closed";
-    }
-
+    if (isBefore(new Date(), parseISO(regOpenDate.toString()))) return "notOpen";
+    if (isAfter(new Date(), parseISO(regCloseDate.toString()))) return "closed";
     return "notOpen";
   };
 
-  //The registration open date is in the future
   const getNotOpenText = () => {
     if (!regOpenDate || !timeZone || !timeZone.abbrev) {
-      return "Sorry, registration for this event is not open yet. Please check back later."; //fallback to basic message if we don't have the data we need
+      return "Sorry, registration for this event is not open yet. Please check back later.";
     }
-
-    return `Registration for this event opens on 
-    ${formatDate(parseISO(regOpenDate.toString()), "MM/dd/yyyy")}
-    ${formatDate(parseISO(regOpenDate.toString()), "hh:mm aa")} (${
-      timeZone.abbrev
-    }). Please
-    return to this screen at that time to register.`;
+    return `Registration for this event opens on ${formatDate(parseISO(regOpenDate.toString()), "MM/dd/yyyy")} ${formatDate(parseISO(regOpenDate.toString()), "hh:mm aa")} (${timeZone.abbrev}). Please return to this screen at that time to register.`;
   };
 
-  //The registration close date is in the past
   const getClosedText = () => {
     if (!regCloseDate || !timeZone || !timeZone.abbrev) {
-      return "Sorry, registration for this event has already closed."; //fallback to basic message if we don't have the data we need
+      return "Sorry, registration for this event has already closed.";
     }
-
-    return `Sorry, registration for this event closed on
-    ${formatDate(parseISO(regCloseDate.toString()), "MM/dd/yyyy")} at
-    ${formatDate(parseISO(regCloseDate.toString()), "hh:mm aa")} (${
-      timeZone.abbrev
-    })`;
+    return `Sorry, registration for this event closed on ${formatDate(parseISO(regCloseDate.toString()), "MM/dd/yyyy")} at ${formatDate(parseISO(regCloseDate.toString()), "hh:mm aa")} (${timeZone.abbrev})`;
   };
 
+  const status = getRegStatus();
+
   return (
-    <Message error {...rest}>
-      <Message.Content>
-        <Breakpoint name="desktop">
-          <Icon.Group size="big">
-            <Icon name="clock" />
-            <Icon corner name="close" />
-          </Icon.Group>
-          {getRegStatus() === "notOpen" && regOpenDate && (
-            <span className="ml-1p">{getNotOpenText()}</span>
-          )}
-          {getRegStatus() === "closed" && regCloseDate && (
-            <span className="ml-1p">{getClosedText()}</span>
-          )}
-        </Breakpoint>
-        <Breakpoint name="mobileOrTablet">
-          <div className="text-center">
-            <div>
-              <Icon.Group size="big">
-                <Icon name="clock" />
-                <Icon corner name="close" />
-              </Icon.Group>
-            </div>
-            {getRegStatus() === "notOpen" && regOpenDate && (
-              <p>{getNotOpenText()}</p>
-            )}
-            {getRegStatus() === "closed" && regCloseDate && (
-              <p>{getClosedText()}</p>
-            )}
+    <div className={`flex items-start gap-3 p-4 bg-red-50 border border-red-200 rounded-md text-red-800 ${className ?? ""}`}>
+      <Breakpoint name="desktop">
+        <div className="flex items-start gap-3">
+          <div className="relative shrink-0 mt-0.5">
+            <IconClock size={24} />
+            <IconX size={10} className="absolute -bottom-0.5 -right-0.5" />
+          </div>
+          <span className="text-sm">
+            {status === "notOpen" && regOpenDate && getNotOpenText()}
+            {status === "closed" && regCloseDate && getClosedText()}
+          </span>
+        </div>
+      </Breakpoint>
+      <Breakpoint name="mobileOrTablet">
+        <div className="text-center w-full">
+          <div className="flex justify-center mb-2 relative inline-block">
+            <IconClock size={24} />
+            <IconX size={10} className="absolute -bottom-0.5 -right-0.5" />
           </div>
-        </Breakpoint>
-      </Message.Content>
-    </Message>
+          {status === "notOpen" && regOpenDate && <p className="text-sm">{getNotOpenText()}</p>}
+          {status === "closed" && regCloseDate && <p className="text-sm">{getClosedText()}</p>}
+        </div>
+      </Breakpoint>
+    </div>
   );
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/RegistrationSuccessMessage.tsx b/client/src/components/controlpanel/EventsManager/RegistrationSuccessMessage.tsx
index 759a5add4..3560c959a 100644
--- a/client/src/components/controlpanel/EventsManager/RegistrationSuccessMessage.tsx
+++ b/client/src/components/controlpanel/EventsManager/RegistrationSuccessMessage.tsx
@@ -1,46 +1,39 @@
-import { Message, Icon, MessageProps } from "semantic-ui-react";
+import { IconCheck } from "@tabler/icons-react";
 import Breakpoint from "../../util/Breakpoints";
 
-const RegistrationSuccessMessage: React.FC<
-  { paid?: boolean } & MessageProps
-> = ({ paid, ...rest }) => {
+const RegistrationSuccessMessage: React.FC<{ paid?: boolean; className?: string }> = ({
+  paid,
+  className,
+}) => {
   return (
-    <Message success {...rest}>
-      <Message.Content>
-        <Breakpoint name="desktop">
-          <Icon.Group size="big">
-            <Icon name="check" />
-          </Icon.Group>
+    <div className={`flex items-start gap-3 p-4 bg-green-50 border border-green-200 rounded-md text-green-800 ${className ?? ""}`}>
+      <Breakpoint name="desktop">
+        <div className="flex items-start gap-3">
+          <IconCheck size={24} className="shrink-0 mt-0.5" />
+          <div className="text-sm">
+            <p>
+              Success! Your registration has been confirmed. We will be sending a
+              confirmation email shortly to the email address associated with your
+              Conductor account.
+            </p>
+            {paid && <p className="mt-1">You should also be receiving a receipt of your payment soon.</p>}
+          </div>
+        </div>
+      </Breakpoint>
+      <Breakpoint name="mobileOrTablet">
+        <div className="text-center w-full text-sm">
+          <div className="flex justify-center mb-2">
+            <IconCheck size={24} />
+          </div>
           <p>
             Success! Your registration has been confirmed. We will be sending a
             confirmation email shortly to the email address associated with your
             Conductor account.
           </p>
-          {paid && (
-            <p>You should also be receiving a receipt of your payment soon.</p>
-          )}
-        </Breakpoint>
-        <Breakpoint name="mobileOrTablet">
-          <div className="text-center">
-            <div>
-              <Icon.Group size="big">
-                <Icon name="check" />
-              </Icon.Group>
-            </div>
-            <p>
-              Success! Your registration has been confirmed. We will be sending
-              a confirmation email shortly to the email address associated with
-              your Conductor account.
-            </p>
-            {paid && (
-              <p>
-                You should also be receiving a receipt of your payment soon.
-              </p>
-            )}
-          </div>
-        </Breakpoint>
-      </Message.Content>
-    </Message>
+          {paid && <p className="mt-1">You should also be receiving a receipt of your payment soon.</p>}
+        </div>
+      </Breakpoint>
+    </div>
   );
 };
 
diff --git a/client/src/components/controlpanel/EventsManager/UnregisterParticipantModal.tsx b/client/src/components/controlpanel/EventsManager/UnregisterParticipantModal.tsx
index 29e220c37..f6d98be96 100644
--- a/client/src/components/controlpanel/EventsManager/UnregisterParticipantModal.tsx
+++ b/client/src/components/controlpanel/EventsManager/UnregisterParticipantModal.tsx
@@ -1,4 +1,5 @@
-import { Button, Icon, Modal } from "semantic-ui-react";
+import { Modal, Button } from "@libretexts/davis-react";
+import { IconBan } from "@tabler/icons-react";
 import { useTypedSelector } from "../../../state/hooks";
 
 type UnregisterParticipantModalProps = {
@@ -11,38 +12,37 @@ const UnregisterParticipantModal: React.FC<UnregisterParticipantModalProps> = ({
   show,
   onClose,
   onConfirm,
-  ...props
 }) => {
-  // Global State
   const org = useTypedSelector((state) => state.org);
 
   return (
-    <Modal size="large" open={show} onClose={onClose} {...props}>
-      <Modal.Header>Unregister Participant</Modal.Header>
-      <Modal.Content scrolling>
-        <p>
+    <Modal open={show} onClose={onClose} size="md">
+      <Modal.Header>
+        <Modal.Title>Unregister Participant</Modal.Title>
+        <Modal.Close />
+      </Modal.Header>
+      <Modal.Body>
+        <p className="mb-2">
           Are you sure you want to unregister this participant?{" "}
           <strong>This action cannot be undone</strong>.
         </p>
         {org.orgID === "libretexts" && (
-          <p>
+          <p className="text-sm text-gray-600">
             <em>
               If any registration fees were paid, Conductor cannot refund them
               automatically. You will need to manually refund the participant.
             </em>
           </p>
         )}
-      </Modal.Content>
-      <Modal.Actions>
-        <Button onClick={onConfirm} color="red">
-          <Icon name="ban" />
-          Unregister
-        </Button>
-
-        <Button onClick={onClose} color="grey">
-          Go Back
-        </Button>
-      </Modal.Actions>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>Go Back</Button>
+          <Button variant="destructive" icon={<IconBan size={16} />} onClick={onConfirm}>
+            Unregister
+          </Button>
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/components/controlpanel/EventsManager/UnregisterParticipantsModal.tsx b/client/src/components/controlpanel/EventsManager/UnregisterParticipantsModal.tsx
index 8f27fd211..394e55d1d 100644
--- a/client/src/components/controlpanel/EventsManager/UnregisterParticipantsModal.tsx
+++ b/client/src/components/controlpanel/EventsManager/UnregisterParticipantsModal.tsx
@@ -1,4 +1,5 @@
-import { Button, Icon, Modal } from "semantic-ui-react";
+import { Modal, Button } from "@libretexts/davis-react";
+import { IconBan } from "@tabler/icons-react";
 import { useTypedSelector } from "../../../state/hooks";
 
 type UnregisterParticipantsModalProps = {
@@ -7,42 +8,43 @@ type UnregisterParticipantsModalProps = {
   onConfirm: () => void;
 };
 
-const UnregisterParticipantsModal: React.FC<
-  UnregisterParticipantsModalProps
-> = ({ show, onClose, onConfirm, ...props }) => {
-  // Global State
+const UnregisterParticipantsModal: React.FC<UnregisterParticipantsModalProps> = ({
+  show,
+  onClose,
+  onConfirm,
+}) => {
   const org = useTypedSelector((state) => state.org);
 
   return (
-    <Modal size="large" open={show} onClose={onClose} {...props}>
-      <Modal.Header>Unregister Selected Participant(s)</Modal.Header>
-      <Modal.Content scrolling>
-        <p>
+    <Modal open={show} onClose={onClose} size="md">
+      <Modal.Header>
+        <Modal.Title>Unregister Selected Participant(s)</Modal.Title>
+        <Modal.Close />
+      </Modal.Header>
+      <Modal.Body>
+        <p className="mb-2">
           Are you sure you want to unregister these participants?{" "}
           <strong>This action cannot be undone</strong>. If participants were
           added to a Conductor project, they will not be automatically removed
           from the project.
         </p>
         {org.orgID === "libretexts" && (
-          <p>
+          <p className="text-sm text-gray-600">
             <em>
               If any registration fees were paid, Conductor cannot refund them
-              automatically. You will need to manually refund the
-              participant(s).
+              automatically. You will need to manually refund the participant(s).
             </em>
           </p>
         )}
-      </Modal.Content>
-      <Modal.Actions>
-        <Button onClick={onConfirm} color="red">
-          <Icon name="ban" />
-          Unregister
-        </Button>
-
-        <Button onClick={onClose} color="grey">
-          Go Back
-        </Button>
-      </Modal.Actions>
+      </Modal.Body>
+      <Modal.Footer>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={onClose}>Go Back</Button>
+          <Button variant="destructive" icon={<IconBan size={16} />} onClick={onConfirm}>
+            Unregister
+          </Button>
+        </div>
+      </Modal.Footer>
     </Modal>
   );
 };
diff --git a/client/src/screens/conductor/controlpanel/EventsManager/ManageEvent.tsx b/client/src/screens/conductor/controlpanel/EventsManager/ManageEvent.tsx
index e7efa9628..5862706a6 100644
--- a/client/src/screens/conductor/controlpanel/EventsManager/ManageEvent.tsx
+++ b/client/src/screens/conductor/controlpanel/EventsManager/ManageEvent.tsx
@@ -1,19 +1,22 @@
-import "../../../../components/controlpanel/ControlPanel.css";
-
-import {
-  Grid,
-  Header,
-  Segment,
-  Button,
-  Icon,
-  Breadcrumb,
-  Message,
-  Divider,
-} from "semantic-ui-react";
 import { useEffect, useState, useCallback } from "react";
 import { Link, useHistory, useParams } from "react-router-dom";
 import axios from "axios";
 import DOMPurify from "dompurify";
+import {
+  Breadcrumb,
+  Button,
+  Divider,
+  Heading,
+  Stack,
+} from "@libretexts/davis-react";
+import {
+  IconEdit,
+  IconHeading,
+  IconAlignLeft,
+  IconQuestionMark,
+  IconDeviceFloppy,
+  IconX,
+} from "@tabler/icons-react";
 import { isEmptyString } from "../../../../components/util/HelperFunctions";
 import useGlobalError from "../../../../components/error/ErrorHooks";
 import EventInstructionsSegment from "../../../../components/controlpanel/EventsManager/EventInstructionsSegment";
@@ -54,7 +57,6 @@ import FeeWaiverInputMessage from "../../../../components/controlpanel/EventsMan
 import api from "../../../../api";
 
 const ManageEvent = () => {
-  // Global State
   const { handleGlobalError } = useGlobalError();
   const org = useTypedSelector((state) => state.org);
   const history = useHistory();
@@ -78,7 +80,6 @@ const ManageEvent = () => {
     },
   });
 
-  // UI
   const [manageMode, setManageMode] = useState<"create" | "edit">("create");
   const [canEdit, setCanEdit] = useState<boolean>(true);
   const [loadedOrgEvent, setLoadedOrgEvent] = useState<boolean>(false);
@@ -88,25 +89,19 @@ const ManageEvent = () => {
   const [showChangesWarning, setShowChangesWarning] = useState(false);
   const [changesSaving, setChangesSaving] = useState(false);
 
-  // Data
   const [allElements, setAllElements] = useState<CustomFormElement[]>([]);
   const [projectSyncTitle, setProjectSyncTitle] = useState('');
 
-  // Fee Waivers Segment
   const [loadedFeeWaivers, setLoadedFeeWaivers] = useState<boolean>(false);
-
-  // Participants Segment
   const [loadedParticipants, setLoadedParticipants] = useState<boolean>(true);
   const [autoSyncSuccess, setAutoSyncSuccess] = useState<boolean>(false);
-  const [itemsPerPage, setItemsPerPage] = useState<number>(25);
+  const [itemsPerPage] = useState<number>(25);
   const [activePage, setActivePage] = useState<number>(1);
   const [totalItems, setTotalItems] = useState<number>(0);
   const [totalPages, setTotalPages] = useState<number>(0);
 
-  // Event Settings Modal
   const [showEventSettingsModal, setShowEventSettingsModal] = useState(false);
 
-  // Add/Edit Heading Modal
   const [showHeadingModal, setShowHeadingModal] = useState(false);
   const [hmMode, setHMMode] = useState<"add" | "edit">("add");
   const [hmHeading, setHMHeading] = useState("");
@@ -114,7 +109,6 @@ const ManageEvent = () => {
   const [hmLoading, setHMLoading] = useState(false);
   const [hmError, setHMError] = useState(false);
 
-  // Add/Edit Text Modal
   const [showTextModal, setShowTextModal] = useState(false);
   const [tmMode, setTMMode] = useState<"add" | "edit">("add");
   const [tmText, setTMText] = useState("");
@@ -122,56 +116,36 @@ const ManageEvent = () => {
   const [tmLoading, setTMLoading] = useState(false);
   const [tmError, setTMError] = useState(false);
 
-  // Add/Edit Prompt Modal
   const [showPromptModal, setShowPromptModal] = useState(false);
   const [pmMode, setPMMode] = useState<"add" | "edit">("add");
   const [pmType, setPMType] = useState<CustomFormPromptType>("text");
   const [pmText, setPMText] = useState("");
   const [pmOrder, setPMOrder] = useState(0);
   const [pmRequired, setPMRequired] = useState(false);
-  const [pmDropdownOpts, setPMDropdownOpts] = useState<
-    GenericKeyTextValueObj<string>[]
-  >([]);
+  const [pmDropdownOpts, setPMDropdownOpts] = useState<GenericKeyTextValueObj<string>[]>([]);
   const [pmDropdownNew, setPMDropdownNew] = useState<string>("");
   const [pmLoading, setPMLoading] = useState(false);
 
-  // Delete Block Modal
   const [showDBModal, setShowDBModal] = useState(false);
   const [dbType, setDBType] = useState<CustomFormUIType>("prompt");
   const [dbBlock, setDBBlock] = useState<CustomFormElement>();
   const [dbLoading, setDBLoading] = useState<boolean>(false);
 
-  /**
-   * Processes all rubric elements for UI presentation whenever the rubric state changes.
-   */
   useEffect(() => {
     let allElem = parseAndSortElements({
       getValueFn: getValues,
       onError: (err) => handleGlobalError(err),
     });
     setAllElements(allElem);
-  }, [
-    setAllElements,
-    watchValue("prompts"),
-    watchValue("headings"),
-    watchValue("textBlocks"),
-  ]);
+  }, [setAllElements, watchValue("prompts"), watchValue("headings"), watchValue("textBlocks")]);
 
   const getOrgEventFeeWaivers = useCallback(async () => {
     try {
       if (!routeParams.eventID || manageMode === "create") return;
-
       setLoadedFeeWaivers(false);
-      const res = await axios.get(
-        `/orgevents/${routeParams.eventID}/feewaivers`
-      );
-      if (res.data.err) {
-        throw new Error(res.data.errMsg);
-      }
-
-      const feeWaivers = res.data.feeWaivers.map((item: OrgEventFeeWaiver) =>
-        initOrgEventFeeWaiverDates(item)
-      );
+      const res = await axios.get(`/orgevents/${routeParams.eventID}/feewaivers`);
+      if (res.data.err) throw new Error(res.data.errMsg);
+      const feeWaivers = res.data.feeWaivers.map((item: OrgEventFeeWaiver) => initOrgEventFeeWaiverDates(item));
       setValue("feeWaivers", feeWaivers);
     } catch (err) {
       handleGlobalError(err);
@@ -183,102 +157,48 @@ const ManageEvent = () => {
     try {
       if (!routeParams.eventID || manageMode === "create") return;
       setLoadedParticipants(false);
-      const res = await axios.get(
-        `/orgevents/${routeParams.eventID}/participants?page=${activePage}`
-      );
-
-      if (res.data.err) {
-        throw new Error(res.data.errMsg);
-      }
-
-      // If participants have started registering, do not allow editing
-      if (
-        Array.isArray(res.data.participants) &&
-        res.data.participants.length > 0
-      ) {
+      const res = await axios.get(`/orgevents/${routeParams.eventID}/participants?page=${activePage}`);
+      if (res.data.err) throw new Error(res.data.errMsg);
+      if (Array.isArray(res.data.participants) && res.data.participants.length > 0) {
         setCanEdit(false);
       }
-
       setValue("participants", res.data.participants);
       setTotalItems(res.data.totalCount ?? 0);
-      setTotalPages(
-        res.data.totalCount ? Math.ceil(res.data.totalCount / itemsPerPage) : 1
-      );
+      setTotalPages(res.data.totalCount ? Math.ceil(res.data.totalCount / itemsPerPage) : 1);
     } catch (err) {
       handleGlobalError(err);
     }
     setLoadedParticipants(true);
-  }, [
-    routeParams,
-    manageMode,
-    activePage,
-    itemsPerPage,
-    setLoadedParticipants,
-    setCanEdit,
-    setTotalItems,
-    setTotalPages,
-    handleGlobalError,
-  ]);
+  }, [routeParams, manageMode, activePage, itemsPerPage, handleGlobalError]);
 
-  /**
-   * Run getOrgParticipants whenever the active page changes.
-   */
-  useEffect(() => {
-    getOrgParticipants();
-  }, [activePage]);
+  useEffect(() => { getOrgParticipants(); }, [activePage]);
 
-  /**
-   * Retrieves the current Org Event configuration from the server.
-   */
   const getOrgEvent = useCallback(async () => {
     try {
-      if (manageMode !== "edit") return;
-      if (!routeParams.eventID || isEmptyString(routeParams.eventID)) {
-        handleGlobalError("No Event ID provided");
-      }
-
+      if (routeParams.mode !== "edit" || !routeParams.eventID || isEmptyString(routeParams.eventID)) return;
       const res = await axios.get(`/orgevents/${routeParams.eventID}`);
       setLoadedOrgEvent(true);
-      if (res.data.err) {
-        handleGlobalError(res.data.errMsg);
-      }
+      if (res.data.err) { handleGlobalError(res.data.errMsg); }
       resetForm(initOrgEventDates(res.data.orgEvent));
-
       getOrgParticipants();
       getOrgEventFeeWaivers();
     } catch (err) {
       setLoadedOrgEvent(true);
       handleGlobalError(err);
     }
-  }, [
-    routeParams,
-    manageMode,
-    resetForm,
-    setCanEdit,
-    isEmptyString,
-    setShowChangesWarning,
-    setLoadedOrgEvent,
-    handleGlobalError,
-  ]);
+  }, [routeParams, resetForm, handleGlobalError]);
 
   const getSyncedProject = useCallback(async () => {
     const projectID = getValues('projectSyncID');
     if (projectID) {
       const res = await api.getProject(projectID);
-      if (res.data.err) {
-        console.error(res.data.errMsg); // log silently
-      }
+      if (res.data.err) { console.error(res.data.errMsg); }
       setProjectSyncTitle(res.data?.project?.title ?? '');
-    } 
+    }
   }, [watchValue('projectSyncID'), setProjectSyncTitle]);
 
-  useEffect(() => {
-    getSyncedProject();
-  }, [getSyncedProject]);
+  useEffect(() => { getSyncedProject(); }, [getSyncedProject]);
 
-  /**
-   * Loads current rubric configuration and initializes editing mode, if applicable.
-   */
   useEffect(() => {
     document.title = "LibreTexts Conductor | Events | Manage Events";
     if (!routeParams.mode) return;
@@ -290,103 +210,51 @@ const ManageEvent = () => {
       document.title = "LibreTexts Conductor | Events | Create Event";
       setManageMode("create");
       setLoadedOrgEvent(true);
-      setShowEventSettingsModal(true); // Show Event Settings modal on first load
+      setShowEventSettingsModal(true);
     }
-
-    // Hook to force Markdown links to open in new window
     DOMPurify.addHook("afterSanitizeAttributes", function (node) {
       if ("target" in node) {
         node.setAttribute("target", "_blank");
         node.setAttribute("rel", "noopener noreferrer");
       }
     });
-  }, [
-    routeParams,
-    setManageMode,
-    setLoadedOrgEvent,
-    setShowInstructions,
-    getOrgEvent,
-  ]);
+  }, [routeParams]);
 
-  /**
-   * Updates the state with the new OrgEvent data (ie from EventSettingsModal) and calls saveEventChanges()
-   * @param newData the new OrgEvent data to update state with
-   */
   function updateStateAndSave(newData: OrgEvent) {
     resetForm(newData);
     saveEventChanges();
   }
 
-  /**
-   * Processes the Event configuration in state and saves it to the server, then returns to Events Manager
-   */
   const saveEventChanges = async () => {
     try {
       setChangesSaving(true);
-
       if (routeParams.mode === "create") {
         const createRes = await axios.post("/orgevents", {
           ...getValues(),
-          regOpenDate: zonedTimeToUtc(
-            getValues().regOpenDate,
-            getValues().timeZone.value
-          ),
-          regCloseDate: zonedTimeToUtc(
-            getValues().regCloseDate,
-            getValues().timeZone.value
-          ),
-          startDate: zonedTimeToUtc(
-            getValues().startDate,
-            getValues().timeZone.value
-          ),
-          endDate: zonedTimeToUtc(
-            getValues().endDate,
-            getValues().timeZone.value
-          ),
+          regOpenDate: zonedTimeToUtc(getValues().regOpenDate, getValues().timeZone.value),
+          regCloseDate: zonedTimeToUtc(getValues().regCloseDate, getValues().timeZone.value),
+          startDate: zonedTimeToUtc(getValues().startDate, getValues().timeZone.value),
+          endDate: zonedTimeToUtc(getValues().endDate, getValues().timeZone.value),
         });
         setChangesSaving(false);
-        if (createRes.data.err) {
-          throw new Error(createRes.data.errMsg);
-        }
+        if (createRes.data.err) throw new Error(createRes.data.errMsg);
         if (createRes.data.orgEvent.eventID) {
-          history.push(
-            `/controlpanel/eventsmanager/edit/${createRes.data.orgEvent.eventID}`
-          );
+          history.push(`/controlpanel/eventsmanager/edit/${createRes.data.orgEvent.eventID}`);
         }
       }
-
       if (routeParams.mode === "edit" && routeParams.eventID) {
         const editRes = await axios.patch(`/orgevents/${routeParams.eventID}`, {
           ...getValues(),
-          regOpenDate: zonedTimeToUtc(
-            getValues().regOpenDate,
-            getValues().timeZone.value
-          ),
-          regCloseDate: zonedTimeToUtc(
-            getValues().regCloseDate,
-            getValues().timeZone.value
-          ),
-          startDate: zonedTimeToUtc(
-            getValues().startDate,
-            getValues().timeZone.value
-          ),
-          endDate: zonedTimeToUtc(
-            getValues().endDate,
-            getValues().timeZone.value
-          ),
+          regOpenDate: zonedTimeToUtc(getValues().regOpenDate, getValues().timeZone.value),
+          regCloseDate: zonedTimeToUtc(getValues().regCloseDate, getValues().timeZone.value),
+          startDate: zonedTimeToUtc(getValues().startDate, getValues().timeZone.value),
+          endDate: zonedTimeToUtc(getValues().endDate, getValues().timeZone.value),
         });
-
         setChangesSaving(false);
-        if (editRes.data.err) {
-          throw new Error(editRes.data.errMsg);
-        }
+        if (editRes.data.err) throw new Error(editRes.data.errMsg);
         await getOrgEvent();
       }
-
-      if (showEventSettingsModal) {
-        setShowEventSettingsModal(false);
-      }
-
+      if (showEventSettingsModal) setShowEventSettingsModal(false);
       setShowChangesWarning(false);
     } catch (err) {
       setChangesSaving(false);
@@ -397,212 +265,101 @@ const ManageEvent = () => {
   async function handleCancelEvent() {
     try {
       setChangesSaving(true);
-
       if (routeParams.mode === "create" || !getValues("eventID")) return;
-
       let deleteRes = await axios.delete(`/orgevents/${getValues("eventID")}`);
-
       setChangesSaving(false);
-      if (!deleteRes.data.err) {
-        history.push("/controlpanel/eventsmanager");
-        return;
-      }
-
+      if (!deleteRes.data.err) { history.push("/controlpanel/eventsmanager"); return; }
       handleGlobalError(deleteRes.data.errMsg);
-    } catch (err) {
-      handleGlobalError(err);
-    }
+    } catch (err) { handleGlobalError(err); }
   }
 
   async function handleDownloadParticipants() {
     try {
       if (routeParams.mode !== "edit" || !getValues("eventID")) return;
-      if (!getValues("participants") || getValues("participants").length === 0)
-        return;
-
-      const response = await axios.get(
-        `/orgevents/${getValues("eventID")}/participants/download`
-      );
-      if (response.data.err) {
-        throw new Error(response.data.errMsg);
-      }
-
-      if (!response.data) {
-        throw new Error("No data returned from server.");
-      }
-
-      const blob = new Blob([response.data], {
-        type: "text/csv;charset=utf-8;",
-      });
+      if (!getValues("participants") || getValues("participants").length === 0) return;
+      const response = await axios.get(`/orgevents/${getValues("eventID")}/participants/download`);
+      if (response.data.err) throw new Error(response.data.errMsg);
+      const blob = new Blob([response.data], { type: "text/csv;charset=utf-8;" });
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
       a.download = `${getValues("title")} Participants.csv`;
       a.click();
       window.URL.revokeObjectURL(url);
-    } catch (err) {
-      handleGlobalError(err);
-      return;
-    }
+    } catch (err) { handleGlobalError(err); }
   }
 
   async function handleUnregisterParticipants(regIds: string[]) {
     try {
       if (routeParams.mode !== "edit" || !getValues("eventID")) return;
-
-      const response = await axios.delete(
-        `/orgevents/${getValues("eventID")}/participants`,
-        { data: { participants: regIds } }
-      );
-
-      if (response.data.err) {
-        throw new Error(response.data.errMsg);
-      }
-
-      if (!response.data) {
-        throw new Error("No data returned from server.");
-      }
-
+      const response = await axios.delete(`/orgevents/${getValues("eventID")}/participants`, { data: { participants: regIds } });
+      if (response.data.err) throw new Error(response.data.errMsg);
       getOrgParticipants();
-    } catch (err) {
-      handleGlobalError(err);
-      return;
-    }
+    } catch (err) { handleGlobalError(err); }
   }
 
   async function handleConfigureAutoSync(projectID: string) {
     try {
       if (!projectID || !getValues("eventID")) return;
-
-      const res = await axios.put(
-        `/orgevents/${getValues("eventID")}/configure-sync/${projectID}`
-      );
-      if (res.data.err) {
-        throw new Error(res.data.errMsg);
-      }
+      const res = await axios.put(`/orgevents/${getValues("eventID")}/configure-sync/${projectID}`);
+      if (res.data.err) throw new Error(res.data.errMsg);
       setAutoSyncSuccess(true);
-      getOrgEvent(); // Refresh the event data
-    } catch (err) {
-      handleGlobalError(err);
-      return;
-    }
+      getOrgEvent();
+    } catch (err) { handleGlobalError(err); }
   }
 
-  /**
-   * Enables the 'Unsaved Changes' warning if not yet visible.
-   */
-  const setUnsavedChanges = () => {
-    if (!showChangesWarning) setShowChangesWarning(true);
-  };
+  const setUnsavedChanges = () => { if (!showChangesWarning) setShowChangesWarning(true); };
 
   const openHeadingModal = (mode: "add" | "edit" = "add", order?: number) => {
-    setHMLoading(false);
-    setHMError(false);
+    setHMLoading(false); setHMError(false);
     if (mode === "edit" && order && order > 0) {
-      let editHeading = [...getValues("headings")].find(
-        (item) => item.order === order
-      );
+      let editHeading = [...getValues("headings")].find((item) => item.order === order);
       if (editHeading !== undefined && typeof editHeading.text === "string") {
-        setHMMode("edit");
-        setHMHeading(editHeading.text);
-        setHMOrder(editHeading.order);
-        setShowHeadingModal(true);
+        setHMMode("edit"); setHMHeading(editHeading.text); setHMOrder(editHeading.order); setShowHeadingModal(true);
       }
       return;
     }
-
-    setHMHeading("");
-    setShowHeadingModal(true);
+    setHMHeading(""); setShowHeadingModal(true);
   };
 
-  /**
-   * Closes the Heading Modal and resets its state.
-   */
   const closeHeadingModal = () => {
-    setShowHeadingModal(false);
-    setHMHeading("");
-    setHMOrder(0);
-    setHMMode("add");
-    setHMLoading(false);
-    setHMError(false);
+    setShowHeadingModal(false); setHMHeading(""); setHMOrder(0); setHMMode("add"); setHMLoading(false); setHMError(false);
   };
 
-  /**
-   * Saves a new or edited Heading to state and closes the Heading Modal.
-   */
   const handleSaveHeading = () => {
-    if (hmHeading.trim().length === 0 && hmHeading.trim().length > 500) {
-      setHMError(true);
-    }
-
+    if (hmHeading.trim().length === 0 && hmHeading.trim().length > 500) setHMError(true);
     setHMLoading(true);
     let headings = [...getValues("headings")];
     if (hmMode === "edit") {
       const editHeading = headings.find((item) => item.order === hmOrder);
-      const editHeadingIdx = headings.findIndex(
-        (item) => item.order === hmOrder
-      );
+      const editHeadingIdx = headings.findIndex((item) => item.order === hmOrder);
       if (editHeading !== undefined && editHeadingIdx > -1) {
-        const editedHeading = {
-          ...editHeading,
-          text: hmHeading.trim(),
-        }; // try to preserve other fields, such as a DB ID
-        headings[editHeadingIdx] = editedHeading;
+        headings[editHeadingIdx] = { ...editHeading, text: hmHeading.trim() };
         setValue("headings", headings);
       }
     } else {
-      setValue("headings", [
-        ...getValues("headings"),
-        {
-          text: hmHeading.trim(),
-          order: getNextOrdering(),
-        },
-      ]);
+      setValue("headings", [...getValues("headings"), { text: hmHeading.trim(), order: getNextOrdering() }]);
     }
-    setUnsavedChanges();
-    closeHeadingModal();
+    setUnsavedChanges(); closeHeadingModal();
   };
 
   const openTextModal = (mode: "add" | "edit" = "add", order?: number) => {
-    setTMLoading(false);
-    setTMError(false);
-
+    setTMLoading(false); setTMError(false);
     if (mode === "edit" && order && order > 0) {
-      let editText = [...getValues("textBlocks")].find(
-        (item) => item.order === order
-      );
+      let editText = [...getValues("textBlocks")].find((item) => item.order === order);
       if (!editText) return;
-      setTMMode("edit");
-      setTMText(editText.text);
-      setTMOrder(editText.order);
-      setShowTextModal(true);
+      setTMMode("edit"); setTMText(editText.text); setTMOrder(editText.order); setShowTextModal(true);
       return;
     }
-
-    setTMText("");
-    setShowTextModal(true);
+    setTMText(""); setShowTextModal(true);
   };
 
-  /**
-   * Closes the Text Modal and resets its state.
-   */
   const closeTextModal = () => {
-    setShowTextModal(false);
-    setTMText("");
-    setTMOrder(0);
-    setTMMode("add");
-    setTMError(false);
-    setTMLoading(false);
+    setShowTextModal(false); setTMText(""); setTMOrder(0); setTMMode("add"); setTMError(false); setTMLoading(false);
   };
 
-  /**
-   * Saves a new or edited Text Block to state and closes the Text Modal.
-   */
   const handleSaveTextBlock = () => {
-    if (tmText.trim().length === 0 && tmText.trim().length > 5000) {
-      setTMError(true);
-    }
-
+    if (tmText.trim().length === 0 && tmText.trim().length > 5000) setTMError(true);
     setTMLoading(true);
     if (!Array.isArray(getValues("textBlocks"))) return;
     const textBlocks = [...getValues("textBlocks")];
@@ -610,77 +367,37 @@ const ManageEvent = () => {
       const editItem = textBlocks.find((item) => item.order === tmOrder);
       const editIdx = textBlocks.findIndex((item) => item.order === tmOrder);
       if (editItem !== undefined && editIdx > -1) {
-        const editedTextBlock = {
-          ...editItem,
-          text: tmText.trim(),
-        }; // try to preserve other fields, such as a DB ID
-        textBlocks[editIdx] = editedTextBlock;
+        textBlocks[editIdx] = { ...editItem, text: tmText.trim() };
         setValue("textBlocks", textBlocks);
       }
     } else {
-      setValue("textBlocks", [
-        ...getValues("textBlocks"),
-        {
-          text: tmText.trim(),
-          order: getNextOrdering(),
-        },
-      ]);
+      setValue("textBlocks", [...getValues("textBlocks"), { text: tmText.trim(), order: getNextOrdering() }]);
     }
-    setUnsavedChanges();
-    closeTextModal();
+    setUnsavedChanges(); closeTextModal();
   };
 
   const openPromptModal = (mode: "add" | "edit" = "add", order?: number) => {
     setPMLoading(false);
     if (mode === "edit" && order && order > 0) {
-      let editPrompt = [...getValues("prompts")].find(
-        (item) => item.order === order
-      );
-      if (
-        editPrompt !== undefined &&
-        typeof editPrompt.promptType === "string"
-      ) {
-        setPMMode("edit");
-        setPMText(editPrompt.promptText);
-        setPMType(editPrompt.promptType);
-        setPMRequired(editPrompt.promptRequired);
-        setPMOrder(editPrompt.order);
-        if (
-          editPrompt.promptType === "dropdown" &&
-          Array.isArray(editPrompt.promptOptions)
-        ) {
+      let editPrompt = [...getValues("prompts")].find((item) => item.order === order);
+      if (editPrompt !== undefined && typeof editPrompt.promptType === "string") {
+        setPMMode("edit"); setPMText(editPrompt.promptText); setPMType(editPrompt.promptType);
+        setPMRequired(editPrompt.promptRequired); setPMOrder(editPrompt.order);
+        if (editPrompt.promptType === "dropdown" && Array.isArray(editPrompt.promptOptions)) {
           setPMDropdownOpts(editPrompt.promptOptions);
-        } else {
-          setPMDropdownOpts([]);
-        }
+        } else { setPMDropdownOpts([]); }
         setShowPromptModal(true);
       }
       return;
     }
-
-    setPMText("");
-    setPMType("text");
-    setShowPromptModal(true);
+    setPMText(""); setPMType("text"); setShowPromptModal(true);
   };
 
-  /**
-   * Closes the Prompt Modal and resets its state.
-   */
   const closePromptModal = () => {
-    setShowPromptModal(false);
-    setPMText("");
-    setPMType("text");
-    setPMMode("add");
-    setPMOrder(0);
-    setPMLoading(false);
-    setPMRequired(false);
-    setPMDropdownOpts([]);
-    setPMDropdownNew("");
+    setShowPromptModal(false); setPMText(""); setPMType("text"); setPMMode("add"); setPMOrder(0);
+    setPMLoading(false); setPMRequired(false); setPMDropdownOpts([]); setPMDropdownNew("");
   };
 
-  /**
-   * Saves a new or edited Prompt to state and closes the Prompt Modal.
-   */
   const handleSavePrompt = () => {
     setPMLoading(true);
     const prompts = [...getValues("prompts")];
@@ -688,523 +405,341 @@ const ManageEvent = () => {
       const editPrompt = prompts.find((item) => item.order === pmOrder);
       const editPromptIdx = prompts.findIndex((item) => item.order === pmOrder);
       if (editPrompt !== undefined && editPromptIdx > -1) {
-        const editedPrompt = {
-          ...editPrompt,
-          promptType: pmType,
-          promptText: pmText,
-          promptRequired: pmRequired,
-          ...(pmType === "dropdown" && {
-            promptOptions: pmDropdownOpts,
-          }),
-        }; // try to preserve other fields, such as a DB ID.
-        prompts[editPromptIdx] = editedPrompt;
+        prompts[editPromptIdx] = {
+          ...editPrompt, promptType: pmType, promptText: pmText, promptRequired: pmRequired,
+          ...(pmType === "dropdown" && { promptOptions: pmDropdownOpts }),
+        };
         setValue("prompts", prompts);
       }
     } else {
       const newPrompt: CustomFormPrompt = {
-        promptType: pmType,
-        promptText: pmText.trim(),
-        promptRequired: pmRequired,
-        value: "",
-        order: getNextOrdering(),
-        ...(pmType === "dropdown" && {
-          promptOptions: pmDropdownOpts,
-        }),
+        promptType: pmType, promptText: pmText.trim(), promptRequired: pmRequired, value: "",
+        order: getNextOrdering(), ...(pmType === "dropdown" && { promptOptions: pmDropdownOpts }),
       };
       prompts.push(newPrompt);
       setValue("prompts", [...getValues("prompts"), newPrompt]);
     }
-
-    setUnsavedChanges();
-    closePromptModal();
+    setUnsavedChanges(); closePromptModal();
   };
 
-  /**
-   * Adds a new Dropdown Prompt option to state and resets the option entry input.
-   */
   const handleAddDropdownPromptOption = () => {
-    let normalOption = pmDropdownNew
-      .trim()
-      .toLowerCase()
-      .replace(/[^a-zA-Z]/gm, "");
-    setPMDropdownOpts([
-      ...pmDropdownOpts,
-      {
-        key: normalOption,
-        text: pmDropdownNew,
-        value: normalOption,
-      },
-    ]);
+    let normalOption = pmDropdownNew.trim().toLowerCase().replace(/[^a-zA-Z]/gm, "");
+    setPMDropdownOpts([...pmDropdownOpts, { key: normalOption, text: pmDropdownNew, value: normalOption }]);
     setPMDropdownNew("");
   };
 
-  /**
-   * Shifts a option in a Prompt's dropdown choices to a new position.
-   * @param {Number} idx - The current index of the option to move.
-   * @param {String} [direction=up] - The direction to move the option in.
-   */
   const handleMoveDropdownPromptOption = (idx: number, direction = "up") => {
-    if (
-      (direction === "up" && idx > 0) ||
-      (direction === "down" && idx < pmDropdownOpts.length)
-    ) {
-      // dont move an element up already at the top; don't move down if already at bottom
-      let dropdownOptions = [...pmDropdownOpts];
-      let removedItems = dropdownOptions.splice(idx, 1);
-      if (direction === "up") {
-        dropdownOptions.splice(idx - 1, 0, removedItems[0]);
-      } else if (direction === "down") {
-        dropdownOptions.splice(idx + 1, 0, removedItems[0]);
-      }
-      setPMDropdownOpts(dropdownOptions);
+    if ((direction === "up" && idx > 0) || (direction === "down" && idx < pmDropdownOpts.length)) {
+      let opts = [...pmDropdownOpts];
+      let removed = opts.splice(idx, 1);
+      if (direction === "up") opts.splice(idx - 1, 0, removed[0]);
+      else opts.splice(idx + 1, 0, removed[0]);
+      setPMDropdownOpts(opts);
     }
   };
 
-  /**
-   * Removes a Dropdown Prompt option from state.
-   * @param {Number} idx - The option's index in the dropdown options array.
-   */
   const handleDeleteDropdownPromptOption = (idx: number) => {
-    let dropdownOptions = [...pmDropdownOpts];
-    dropdownOptions.splice(idx, 1);
-    setPMDropdownOpts(dropdownOptions);
+    let opts = [...pmDropdownOpts];
+    opts.splice(idx, 1);
+    setPMDropdownOpts(opts);
   };
 
-  /**
-   * Determines which modal to open based on the block's type.
-   * @param {number} order - The order # of the block to edit
-   */
   const handleRequestEditBlock = (order: number) => {
     const foundElement = allElements.find((el) => el.order === order);
     if (!foundElement) return;
-
-    if (foundElement.uiType === "heading") {
-      openHeadingModal("edit", order);
-    } else if (foundElement.uiType === "prompt") {
-      openPromptModal("edit", order);
-    } else if (foundElement.uiType === "textBlock") {
-      openTextModal("edit", order);
-    }
+    if (foundElement.uiType === "heading") openHeadingModal("edit", order);
+    else if (foundElement.uiType === "prompt") openPromptModal("edit", order);
+    else if (foundElement.uiType === "textBlock") openTextModal("edit", order);
   };
 
-  /**
-   * Opens the Delete Block modal and saves the block to manipulate into state for later usage.
-   * @param {number} order - The order # of the block to delete
-   * @param {String} type - The block's type (UI-ready).
-   */
   const openDeleteBlockModal = (order: number) => {
     setDBLoading(false);
     const foundElement = allElements.find((el) => el.order === order);
     if (!foundElement) return;
-
     let blockType: "heading" | "prompt" | "textBlock";
-    if (foundElement.uiType === "heading") {
-      blockType = "heading";
-    } else if (foundElement.uiType === "prompt") {
-      blockType = "prompt";
-    } else if (foundElement.uiType === "textBlock") {
-      blockType = "textBlock";
-    } else {
-      return;
-    }
-
-    setDBType(blockType);
-    setDBBlock(foundElement);
-    setShowDBModal(true);
+    if (foundElement.uiType === "heading") blockType = "heading";
+    else if (foundElement.uiType === "prompt") blockType = "prompt";
+    else if (foundElement.uiType === "textBlock") blockType = "textBlock";
+    else return;
+    setDBType(blockType); setDBBlock(foundElement); setShowDBModal(true);
   };
 
-  /**
-   * Closes the Delete Block Modal and resets its state.
-   */
   const closeDeleteBlockModal = () => {
-    setShowDBModal(false);
-    setDBLoading(false);
-    setDBType("heading");
-    setDBBlock(undefined);
+    setShowDBModal(false); setDBLoading(false); setDBType("heading"); setDBBlock(undefined);
   };
 
-  /**
-   * Retrieves the 'order' property of the last inserted block in the rubric.
-   * @returns {Number} The last ordering index, or 0.
-   */
   const getLastOrdering = () => {
     let lastOrdering = 0;
-    allElements.forEach((block) => {
-      if (block.order > lastOrdering) {
-        lastOrdering = block.order;
-      }
-    });
+    allElements.forEach((block) => { if (block.order > lastOrdering) lastOrdering = block.order; });
     return lastOrdering;
   };
 
-  /**
-   * Get the next ordering index for a new block.
-   * @returns {Number} The next ordering index, or 1.
-   */
-  const getNextOrdering = () => {
-    return getLastOrdering() + 1;
-  };
+  const getNextOrdering = () => getLastOrdering() + 1;
+
+  const pageTitle = manageMode === "create" ? "Create Event" : getValues("title");
 
   return (
-    <Grid className="controlpanel-container" divided="vertically">
-      <Grid.Row>
-        <Grid.Column>
-          <Header className="component-header">
-            {manageMode === "create" ? "Create Event" : `${getValues("title")}`}
-          </Header>
-        </Grid.Column>
-      </Grid.Row>
-      <Grid.Row>
-        <Grid.Column>
-          <Segment.Group>
-            <Segment className="flex-row-div flex-row-verticalcenter">
-              <div className="left-flex">
-                <Breadcrumb>
-                  <Breadcrumb.Section as={Link} to="/controlpanel">
-                    Control Panel
-                  </Breadcrumb.Section>
-                  <Breadcrumb.Divider icon="right chevron" />
-                  <Breadcrumb.Section
-                    as={Link}
-                    to="/controlpanel/eventsmanager"
-                  >
-                    Events Manager
-                  </Breadcrumb.Section>
-                  <Breadcrumb.Divider icon="right chevron" />
-                  <Breadcrumb.Section active>
-                    {manageMode === "create"
-                      ? "Create Event"
-                      : `${getValues("title")}`}
-                  </Breadcrumb.Section>
-                </Breadcrumb>
+    <div className="bg-white h-full px-8 pt-8">
+      <Stack direction="vertical" gap="md" className="mb-4">
+        <Heading level={2}>{pageTitle}</Heading>
+        <div className="flex items-center justify-between">
+          <Breadcrumb aria-label="Page navigation">
+            <Breadcrumb.Item href="/controlpanel">Control Panel</Breadcrumb.Item>
+            <Breadcrumb.Item href="/controlpanel/eventsmanager">Events Manager</Breadcrumb.Item>
+            <Breadcrumb.Item isCurrent>{pageTitle}</Breadcrumb.Item>
+          </Breadcrumb>
+          <span className="text-sm text-gray-500">
+            Last Updated:{" "}
+            <em>
+              {formatDate(
+                parseISO(getValues("updatedAt")?.toString() ?? new Date().toISOString()),
+                "MM/dd/yyyy h:mm aa"
+              )}
+            </em>
+          </span>
+        </div>
+      </Stack>
+
+      {showChangesWarning && (
+        <div className="mb-4 p-3 bg-yellow-50 border border-yellow-300 rounded-md text-yellow-800 text-sm">
+          You have unsaved changes!
+        </div>
+      )}
+      {!canEdit && (
+        <div className="mb-4 p-3 bg-yellow-50 border border-yellow-300 rounded-md text-yellow-800 text-sm">
+          Participants have already started registering for this Event. Some settings cannot be changed.
+        </div>
+      )}
+
+      {!loadedOrgEvent ? (
+        <div className="flex justify-center py-16">
+          <span className="text-gray-400">Loading...</span>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {/* General Settings */}
+          <div className="border border-gray-200 rounded-lg p-6">
+            <div className="flex items-center justify-between mb-4">
+              <Heading level={4} style={{ margin: 0 }}>General Settings</Heading>
+              <Button
+                variant="primary"
+                icon={<IconEdit size={16} />}
+                onClick={() => setShowEventSettingsModal(true)}
+              >
+                Edit
+              </Button>
+            </div>
+            <Divider />
+            <div className="mt-4">
+              <EventSettingsSegment
+                getValuesFn={getValues}
+                org={org}
+                manageMode={manageMode}
+                loading={!loadedOrgEvent}
+                projectSyncID={getValues('projectSyncID')}
+                projectSyncTitle={projectSyncTitle}
+              />
+            </div>
+          </div>
+
+          {/* Fee Waivers */}
+          {org.orgID === "libretexts" && manageMode === "edit" && !!watchValue("regFee") && (
+            <FeeWaiversSegment
+              feeWaivers={watchValue("feeWaivers")}
+              orgEvent={getValues()}
+              loading={!loadedFeeWaivers}
+              canEdit={canEdit}
+              onUpdate={getOrgEvent}
+            />
+          )}
+
+          {/* Participants */}
+          {manageMode === "edit" && (
+            <ParticipantsSegment
+              show={showParticipants}
+              toggleVisibility={() => setShowParticipants(!showParticipants)}
+              participants={getValues("participants")}
+              orgEvent={getValues()}
+              loading={!loadedParticipants}
+              canEdit={canEdit}
+              autoSyncSuccess={autoSyncSuccess}
+              activePage={activePage}
+              onDownloadParticipants={handleDownloadParticipants}
+              onChangeActivePage={(page) => setActivePage(page)}
+              onUnregisterParticipants={(regIds) => handleUnregisterParticipants(regIds)}
+              onConfigureAutoSync={(projectID) => handleConfigureAutoSync(projectID)}
+              totalItems={totalItems}
+              totalPages={totalPages}
+              itemsPerPage={itemsPerPage}
+            />
+          )}
+
+          {/* Registration Form */}
+          {manageMode === "edit" && (
+            <div className="border border-gray-200 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-4">
+                <Heading level={4} style={{ margin: 0 }}>Registration Form</Heading>
+                <Button variant="secondary" onClick={() => setShowRegForm(!showRegForm)}>
+                  {showRegForm ? "Hide" : "Show"}
+                </Button>
               </div>
-              <div className="right-flex">
-                <span className="muted-text">
-                  Last Updated:{" "}
-                  <em>
-                    {formatDate(
-                      parseISO(
-                        getValues("updatedAt")?.toString() ??
-                          new Date().toISOString()
-                      ),
-                      "MM/dd/yyyy h:mm aa"
+              <Divider />
+              {showRegForm ? (
+                <div className="mt-4 flex flex-col gap-3">
+                  <EventInstructionsSegment
+                    show={showInstructions}
+                    toggleVisibility={() => setShowInstructions(!showInstructions)}
+                  />
+                  {watchValue("collectShipping") && <CollectShippingMessage />}
+                  {org.orgID === "libretexts" && manageMode === "edit" &&
+                    watchValue("regFee") !== 0 && loadedFeeWaivers &&
+                    watchValue("feeWaivers")?.length > 0 && (
+                      <FeeWaiverInputMessage />
                     )}
-                  </em>
-                </span>
-              </div>
-            </Segment>
-            <Segment loading={!loadedOrgEvent}>
-              {showChangesWarning && (
-                <Message
-                  warning
-                  icon="warning sign"
-                  content="You have unsaved changes!"
-                  className="mt-1p"
-                />
-              )}
-              {!canEdit && (
-                <Message
-                  warning
-                  icon="warning sign"
-                  content="Participants have already started registering for this Event. Some settings cannot be changed."
-                  className="mt-1p"
-                />
-              )}
-              <Grid padded="horizontally" relaxed>
-                <Grid.Row className="mt-1p">
-                  <Grid.Column>
-                    <Header
-                      as="h2"
-                      dividing
-                      className="flex-row-div flex-row-verticalcenter"
-                    >
-                      <span>General Settings</span>
-                      <div className="right-flex">
-                        <Button
-                          color="blue"
-                          onClick={() => setShowEventSettingsModal(true)}
-                        >
-                          <Icon name="edit" />
-                          Edit
-                        </Button>
-                      </div>
-                    </Header>
-                    <Segment.Group size="large" raised className="mb-4p">
-                      <EventSettingsSegment
-                        getValuesFn={getValues}
-                        org={org}
-                        manageMode={manageMode}
-                        loading={!loadedOrgEvent}
-                        projectSyncID={getValues('projectSyncID')}
-                        projectSyncTitle={projectSyncTitle}
-                      />
-                    </Segment.Group>
-                  </Grid.Column>
-                </Grid.Row>
-                {org.orgID === "libretexts" &&
-                  manageMode === "edit" &&
-                  !!getValues("regFee") && (
-                    <Grid.Row>
-                      <FeeWaiversSegment
-                        feeWaivers={getValues("feeWaivers")}
-                        orgEvent={getValues()}
-                        loading={!loadedFeeWaivers}
-                        canEdit={canEdit}
-                        onUpdate={getOrgEvent}
-                      />
-                    </Grid.Row>
-                  )}
-                {manageMode === "edit" && (
-                  <>
-                    <Grid.Row>
-                      <ParticipantsSegment
-                        show={showParticipants}
-                        toggleVisibility={() =>
-                          setShowParticipants(!showParticipants)
-                        }
-                        participants={getValues("participants")}
-                        orgEvent={getValues()}
-                        loading={!loadedParticipants}
-                        canEdit={canEdit}
-                        autoSyncSuccess={autoSyncSuccess}
-                        activePage={activePage}
-                        onDownloadParticipants={handleDownloadParticipants}
-                        onChangeActivePage={(page) => setActivePage(page)}
-                        onUnregisterParticipants={(regIds) =>
-                          handleUnregisterParticipants(regIds)
+
+                  <div className="space-y-2">
+                    {allElements.map((item) => (
+                      <EditableFormBlock
+                        item={item}
+                        key={item.order}
+                        onMove={(item, direction) =>
+                          handleMoveBlock({
+                            blockToMove: item,
+                            direction,
+                            getValueFn: getValues,
+                            setValueFn: setValue,
+                            onError: (err) => handleGlobalError(err),
+                            onFinish: () => setUnsavedChanges(),
+                          })
                         }
-                        onConfigureAutoSync={(projectID) => {
-                          handleConfigureAutoSync(projectID);
-                        }}
-                        totalItems={totalItems}
-                        totalPages={totalPages}
-                        itemsPerPage={itemsPerPage}
+                        onRequestEdit={(order) => handleRequestEditBlock(order)}
+                        onRequestDelete={(order) => openDeleteBlockModal(order)}
+                        disabled={!canEdit}
                       />
-                    </Grid.Row>
-                    <Grid.Row>
-                      {showRegForm ? (
-                        <Grid.Column>
-                          <Header
-                            as="h2"
-                            dividing
-                            className="flex-row-div flex-row-verticalcenter"
-                          >
-                            <span>Registration Form</span>
-                            <div className="right-flex">
-                              <Button
-                                onClick={() => setShowRegForm(!showRegForm)}
-                              >
-                                Hide
-                              </Button>
-                            </div>
-                          </Header>
-                          <Segment.Group size="large" raised className="mb-4p">
-                            <Segment className="peerreview-rubricedit-container">
-                              <EventInstructionsSegment
-                                show={showInstructions}
-                                toggleVisibility={() =>
-                                  setShowInstructions(!showInstructions)
-                                }
-                              />
-                              {getValues("collectShipping") && (
-                                <CollectShippingMessage />
-                              )}
-                              {org.orgID === "libretexts" &&
-                                manageMode === "edit" &&
-                                getValues("regFee") !== 0 &&
-                                loadedFeeWaivers &&
-                                getValues("feeWaivers")?.length > 0 && (
-                                  <FeeWaiverInputMessage />
-                                )}
-
-                              {allElements.map((item) => {
-                                return (
-                                  <EditableFormBlock
-                                    item={item}
-                                    key={item.order}
-                                    onMove={(item, direction) =>
-                                      handleMoveBlock({
-                                        blockToMove: item,
-                                        direction: direction,
-                                        getValueFn: getValues,
-                                        setValueFn: setValue,
-                                        onError: (err) =>
-                                          handleGlobalError(err),
-                                        onFinish: () => setUnsavedChanges(),
-                                      })
-                                    }
-                                    onRequestEdit={(order) =>
-                                      handleRequestEditBlock(order)
-                                    }
-                                    onRequestDelete={(order) =>
-                                      openDeleteBlockModal(order)
-                                    }
-                                    disabled={!canEdit}
-                                  />
-                                );
-                              })}
-
-                              <div className="peerreview-rubricedit-placeholder">
-                                <Button.Group fluid color="blue">
-                                  <Button
-                                    onClick={() => openHeadingModal("add")}
-                                    disabled={!canEdit}
-                                  >
-                                    <Icon name="heading" />
-                                    Add Heading
-                                  </Button>
-                                  <Button
-                                    onClick={() => openTextModal("add")}
-                                    disabled={!canEdit}
-                                  >
-                                    <Icon name="paragraph" />
-                                    Add Text
-                                  </Button>
-                                  <Button
-                                    onClick={() => openPromptModal("add")}
-                                    disabled={!canEdit}
-                                  >
-                                    <Icon name="question" />
-                                    Add Prompt
-                                  </Button>
-                                </Button.Group>
-                              </div>
-                              <Divider />
-                              <Button.Group fluid>
-                                <Button
-                                  as={Link}
-                                  to="/controlpanel/eventsmanager"
-                                  disabled={!canEdit}
-                                >
-                                  <Icon name="cancel" />
-                                  Discard Changes
-                                </Button>
-                                <Button
-                                  color="green"
-                                  loading={changesSaving}
-                                  onClick={saveEventChanges}
-                                  disabled={!canEdit}
-                                >
-                                  {showChangesWarning ? (
-                                    <>
-                                      <Icon name="save" />
-                                      <span>Save Registration Form</span>
-                                    </>
-                                  ) : (
-                                    <Icon name="check" />
-                                  )}
-                                </Button>
-                              </Button.Group>
-                            </Segment>
-                          </Segment.Group>
-                        </Grid.Column>
-                      ) : (
-                        <Grid.Column>
-                          <Header
-                            as="h2"
-                            dividing
-                            className="flex-row-div  flex-row-verticalcenter"
-                          >
-                            <span>Registration Form</span>
-                            <div className="right-flex">
-                              <Button
-                                onClick={() => setShowRegForm(!showRegForm)}
-                              >
-                                Show
-                              </Button>
-                            </div>
-                          </Header>
-                          <Segment.Group size="large" raised className="mb-4p">
-                            <Segment>
-                              <span>
-                                Collapsed for brevity... Click "Show" to view
-                              </span>
-                            </Segment>
-                          </Segment.Group>
-                        </Grid.Column>
-                      )}
-                    </Grid.Row>
-                  </>
-                )}
-              </Grid>
-            </Segment>
-          </Segment.Group>
-          <EventSettingsModal
-            show={showEventSettingsModal}
-            canEdit={canEdit}
-            orgEvent={getValues()}
-            onClose={() => setShowEventSettingsModal(false)}
-            onRequestSave={(newData) => updateStateAndSave(newData)}
-            onRequestCancelEvent={handleCancelEvent}
-          />
-          <HeadingModal
-            show={showHeadingModal}
-            value={hmHeading}
-            onChange={(val) => setHMHeading(val)}
-            hasError={hmError}
-            onClose={closeHeadingModal}
-            onSave={handleSaveHeading}
-            mode={hmMode}
-            loading={hmLoading}
-          />
-          <TextBlockModal
-            show={showTextModal}
-            value={tmText}
-            onChange={(val) => setTMText(val)}
-            hasError={tmError}
-            onClose={closeTextModal}
-            onSave={handleSaveTextBlock}
-            mode={tmMode}
-            loading={tmLoading}
-          />
-          <PromptModal
-            promptType={pmType}
-            promptText={pmText}
-            promptReq={pmRequired}
-            dropdownOptions={pmDropdownOpts}
-            newOptionValue={pmDropdownNew}
-            onChangeNewOptionValue={(n) => setPMDropdownNew(n)}
-            onChangePromptType={(newVal) => setPMType(newVal)}
-            onChangePromptText={(n) => setPMText(n)}
-            onDeleteDropdownPromptOption={(n) =>
-              handleDeleteDropdownPromptOption(n)
-            }
-            onChangePromptReq={(n) => setPMRequired(n)}
-            onAddDropdownPromptOption={handleAddDropdownPromptOption}
-            onMoveDropdownPromptOption={(n, d) =>
-              handleMoveDropdownPromptOption(n, d)
-            }
-            show={showPromptModal}
-            onClose={closePromptModal}
-            onSave={handleSavePrompt}
-            mode={pmMode}
-            loading={pmLoading}
-          />
-          <DeleteBlockModal
-            show={showDBModal}
-            onSave={() =>
-              handleDeleteBlock({
-                dbBlock: dbBlock,
-                setValueFn: setValue,
-                getValueFn: getValues,
-                onError: (err) => handleGlobalError(err),
-                onStart: () => {
-                  setDBLoading(true);
-                },
-                onFinish: () => {
-                  setDBLoading(false);
-                  setUnsavedChanges();
-                  closeDeleteBlockModal();
-                },
-              })
-            }
-            onRequestClose={() => closeDeleteBlockModal()}
-            blockType={dbType}
-            loading={dbLoading}
-          />
-        </Grid.Column>
-      </Grid.Row>
-    </Grid>
+                    ))}
+                  </div>
+
+                  <div className="mt-4 flex gap-2">
+                    <Button
+                      variant="secondary"
+                      icon={<IconHeading size={16} />}
+                      onClick={() => openHeadingModal("add")}
+                      disabled={!canEdit}
+                    >
+                      Add Heading
+                    </Button>
+                    <Button
+                      variant="secondary"
+                      icon={<IconAlignLeft size={16} />}
+                      onClick={() => openTextModal("add")}
+                      disabled={!canEdit}
+                    >
+                      Add Text
+                    </Button>
+                    <Button
+                      variant="secondary"
+                      icon={<IconQuestionMark size={16} />}
+                      onClick={() => openPromptModal("add")}
+                      disabled={!canEdit}
+                    >
+                      Add Prompt
+                    </Button>
+                  </div>
+
+                  <Divider className="my-4" />
+
+                  <div className="flex gap-2">
+                    <Button
+                      variant="outline"
+                      icon={<IconX size={16} />}
+                      onClick={() => history.push("/controlpanel/eventsmanager")}
+                      disabled={!canEdit}
+                    >
+                      Discard Changes
+                    </Button>
+                    <Button
+                      variant="primary"
+                      icon={<IconDeviceFloppy size={16} />}
+                      loading={changesSaving}
+                      onClick={saveEventChanges}
+                      disabled={!canEdit}
+                    >
+                      {showChangesWarning ? "Save Registration Form" : "Saved"}
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <p className="mt-4 text-gray-500 text-sm">Collapsed for brevity… Click "Show" to view</p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      <EventSettingsModal
+        show={showEventSettingsModal}
+        canEdit={canEdit}
+        orgEvent={getValues()}
+        onClose={() => setShowEventSettingsModal(false)}
+        onRequestSave={(newData) => updateStateAndSave(newData)}
+        onRequestCancelEvent={handleCancelEvent}
+      />
+      <HeadingModal
+        show={showHeadingModal}
+        value={hmHeading}
+        onChange={(val) => setHMHeading(val)}
+        hasError={hmError}
+        onClose={closeHeadingModal}
+        onSave={handleSaveHeading}
+        mode={hmMode}
+        loading={hmLoading}
+      />
+      <TextBlockModal
+        show={showTextModal}
+        value={tmText}
+        onChange={(val) => setTMText(val)}
+        hasError={tmError}
+        onClose={closeTextModal}
+        onSave={handleSaveTextBlock}
+        mode={tmMode}
+        loading={tmLoading}
+      />
+      <PromptModal
+        promptType={pmType}
+        promptText={pmText}
+        promptReq={pmRequired}
+        dropdownOptions={pmDropdownOpts}
+        newOptionValue={pmDropdownNew}
+        onChangeNewOptionValue={(n) => setPMDropdownNew(n)}
+        onChangePromptType={(newVal) => setPMType(newVal)}
+        onChangePromptText={(n) => setPMText(n)}
+        onDeleteDropdownPromptOption={(n) => handleDeleteDropdownPromptOption(n)}
+        onChangePromptReq={(n) => setPMRequired(n)}
+        onAddDropdownPromptOption={handleAddDropdownPromptOption}
+        onMoveDropdownPromptOption={(n, d) => handleMoveDropdownPromptOption(n, d)}
+        show={showPromptModal}
+        onClose={closePromptModal}
+        onSave={handleSavePrompt}
+        mode={pmMode}
+        loading={pmLoading}
+      />
+      <DeleteBlockModal
+        show={showDBModal}
+        onSave={() =>
+          handleDeleteBlock({
+            dbBlock,
+            setValueFn: setValue,
+            getValueFn: getValues,
+            onError: (err) => handleGlobalError(err),
+            onStart: () => setDBLoading(true),
+            onFinish: () => { setDBLoading(false); setUnsavedChanges(); closeDeleteBlockModal(); },
+          })
+        }
+        onRequestClose={() => closeDeleteBlockModal()}
+        blockType={dbType}
+        loading={dbLoading}
+      />
+    </div>
   );
 };
 
diff --git a/client/src/screens/conductor/controlpanel/EventsManager/index.tsx b/client/src/screens/conductor/controlpanel/EventsManager/index.tsx
index 5066d5ac5..4d19057df 100644
--- a/client/src/screens/conductor/controlpanel/EventsManager/index.tsx
+++ b/client/src/screens/conductor/controlpanel/EventsManager/index.tsx
@@ -1,225 +1,165 @@
-import { useState, useEffect, useCallback } from "react";
-import { Link } from "react-router-dom";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { Link, useHistory } from "react-router-dom";
 import axios from "axios";
 import {
   Breadcrumb,
   Button,
-  Grid,
-  Header,
-  Icon,
-  Pagination,
-  Segment,
-  Table,
-} from "semantic-ui-react";
+  Heading,
+  Stack,
+  Text,
+} from "@libretexts/davis-react";
+import { DataTable, ColumnDef } from "@libretexts/davis-react-table";
+import { IconCopy, IconEye, IconPlus } from "@tabler/icons-react";
 import useGlobalError from "../../../../components/error/ErrorHooks";
 import { parseAndFormatDate } from "../../../../utils/misc";
-import "../../../../components/controlpanel/ControlPanel.css";
 import { OrgEvent } from "../../../../types";
 import { initOrgEventDates } from "../../../../utils/orgEventsHelpers";
-const COLUMNS = [
-  { key: "title", text: "Title" },
-  { key: "regOpen", text: "Registration Open Date" },
-  { key: "regClose", text: "Registration Close Date" },
-  { key: "startDate", text: "Event Start Date" },
-  { key: "endDate", text: "Event End Date" },
-  { key: "Action", text: "Action" },
-];
 
-/**
- * The Events Manager interface allows Campus Administrators to create events
- * with custom registration forms for participants
- */
-const EventsManager = () => {
-  const DATE_FORMAT_STRING = "MM/dd/yyyy hh:mm aa";
+const DATE_FORMAT_STRING = "MM/dd/yyyy hh:mm aa";
 
-  // Global State and Error Handling
+const EventsManager = () => {
   const { handleGlobalError } = useGlobalError();
+  const history = useHistory();
 
-  // Data
   const [orgEvents, setOrgEvents] = useState<OrgEvent[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
-  // UI
-  const [activePage, setActivePage] = useState<number>(1);
-  const [totalPages, setTotalPages] = useState<number>(1);
-  const [totalItems, setTotalItems] = useState<number>(1);
-  const [itemsPerPage, setItemsPerPage] = useState<number>(10);
-  const [loadedData, setLoadedData] = useState<boolean>(true);
-
-  /**
-   * Retrieve events from the server and save it into state.
-   */
   const getOrgEvents = useCallback(async () => {
-    setLoadedData(false);
+    setLoading(true);
     try {
-      const orgEventRes = await axios.get(`/orgevents?page=${activePage}`);
-      if (orgEventRes.data.err) {
-        throw new Error(orgEventRes.data.errMsg);
-      }
-
-      if (!Array.isArray(orgEventRes.data.orgEvents)) {
-        throw new Error("Error parsing server data.");
-      }
-
-      setOrgEvents(
-        orgEventRes.data.orgEvents.map((item: OrgEvent) =>
-          initOrgEventDates(item)
-        )
-      );
-      setTotalPages(Math.ceil(orgEventRes.data.totalCount / 25));
-      setTotalItems(orgEventRes.data.totalCount);
+      // Fetch all events (no page param) — DataTable handles client-side pagination
+      const res = await axios.get("/orgevents?limit=1000");
+      if (res.data.err) throw new Error(res.data.errMsg);
+      if (!Array.isArray(res.data.orgEvents)) throw new Error("Error parsing server data.");
+      setOrgEvents(res.data.orgEvents.map((item: OrgEvent) => initOrgEventDates(item)));
     } catch (e) {
       handleGlobalError(e);
+    } finally {
+      setLoading(false);
     }
-    setLoadedData(true);
-  }, [
-    setOrgEvents,
-    setTotalItems,
-    setLoadedData,
-    handleGlobalError,
-    activePage,
-  ]);
+  }, [handleGlobalError]);
 
-  /**
-   * Set page title on initial load.
-   */
   useEffect(() => {
     document.title = "LibreTexts Conductor | Events Manager";
     getOrgEvents();
-  }, [activePage]);
+  }, []);
 
-  function TableRow({ orgEvent, ...props }: { orgEvent: OrgEvent }) {
-    return (
-      <Table.Row {...props}>
-        <Table.Cell>
-          <span>
-            <Link to={`/controlpanel/eventsmanager/edit/${orgEvent.eventID}`}>
-              {orgEvent.title}
-            </Link>
-          </span>
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {parseAndFormatDate(orgEvent.regOpenDate, DATE_FORMAT_STRING)} (
-            {orgEvent.timeZone.abbrev})
-          </span>
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {parseAndFormatDate(orgEvent.regCloseDate, DATE_FORMAT_STRING)} (
-            {orgEvent.timeZone.abbrev})
-          </span>
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {parseAndFormatDate(orgEvent.startDate, DATE_FORMAT_STRING)} (
-            {orgEvent.timeZone.abbrev})
-          </span>
-        </Table.Cell>
-        <Table.Cell>
-          <span>
-            {parseAndFormatDate(orgEvent.endDate, DATE_FORMAT_STRING)} (
-            {orgEvent.timeZone.abbrev})
-          </span>
-        </Table.Cell>
-        <Table.Cell>
+  const columns = useMemo<ColumnDef<OrgEvent>[]>(() => [
+    {
+      id: "title",
+      header: "Title",
+      accessorKey: "title",
+      cell: ({ row }) => (
+        <Link
+          to={`/controlpanel/eventsmanager/edit/${row.original.eventID}`}
+          className="text-primary hover:underline"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {row.original.title}
+        </Link>
+      ),
+    },
+    {
+      id: "regOpen",
+      header: "Registration Open Date",
+      cell: ({ row }) => (
+        <span>
+          {parseAndFormatDate(row.original.regOpenDate, DATE_FORMAT_STRING)} ({row.original.timeZone?.abbrev})
+        </span>
+      ),
+    },
+    {
+      id: "regClose",
+      header: "Registration Close Date",
+      cell: ({ row }) => (
+        <span>
+          {parseAndFormatDate(row.original.regCloseDate, DATE_FORMAT_STRING)} ({row.original.timeZone?.abbrev})
+        </span>
+      ),
+    },
+    {
+      id: "startDate",
+      header: "Event Start Date",
+      cell: ({ row }) => (
+        <span>
+          {parseAndFormatDate(row.original.startDate, DATE_FORMAT_STRING)} ({row.original.timeZone?.abbrev})
+        </span>
+      ),
+    },
+    {
+      id: "endDate",
+      header: "Event End Date",
+      cell: ({ row }) => (
+        <span>
+          {parseAndFormatDate(row.original.endDate, DATE_FORMAT_STRING)} ({row.original.timeZone?.abbrev})
+        </span>
+      ),
+    },
+    {
+      id: "action",
+      header: "Action",
+      cell: ({ row }) => (
+        <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
           <Button
-            as={Link}
-            to={`/controlpanel/eventsmanager/edit/${orgEvent.eventID}`}
-            color="blue"
+            variant="primary"
+            icon={<IconEye size={14} />}
+            onClick={() => history.push(`/controlpanel/eventsmanager/edit/${row.original.eventID}`)}
           >
-            <Icon name="eye" />
             View
           </Button>
           <Button
-            as={Link}
-            to={`/controlpanel/eventsmanager/create?duplicateID=${orgEvent.eventID}`}
+            variant="secondary"
+            icon={<IconCopy size={14} />}
+            onClick={() => history.push(`/controlpanel/eventsmanager/create?duplicateID=${row.original.eventID}`)}
           >
-            <Icon name="copy" />
             Duplicate
           </Button>
-        </Table.Cell>
-      </Table.Row>
-    );
-  }
+        </div>
+      ),
+    },
+  ], [history]);
 
   return (
-    <Grid className="controlpanel-container" divided="vertically">
-      <Grid.Row>
-        <Grid.Column width={16}>
-          <Header className="component-header">Events Manager</Header>
-        </Grid.Column>
-      </Grid.Row>
-      <Grid.Row>
-        <Grid.Column width={16}>
-          <Segment.Group>
-            <Segment className="flex-row-div">
-              <div className="left-flex">
-                <Breadcrumb>
-                  <Breadcrumb.Section as={Link} to="/controlpanel">
-                    Control Panel
-                  </Breadcrumb.Section>
-                  <Breadcrumb.Divider icon="right chevron" />
-                  <Breadcrumb.Section active>Events Manager</Breadcrumb.Section>
-                </Breadcrumb>
-              </div>
-              <div className="right-flex">
-                <Button
-                  as={Link}
-                  to="/controlpanel/eventsmanager/create"
-                  color="green"
-                >
-                  <Icon name="add" />
-                  New Event
-                </Button>
-              </div>
-            </Segment>
-            <Segment loading={!loadedData}>
-              <Table striped celled fixed>
-                <Table.Header>
-                  <Table.Row>
-                    {COLUMNS.map((item) => (
-                      <Table.HeaderCell key={item.key}>
-                        <span>{item.text}</span>
-                      </Table.HeaderCell>
-                    ))}
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body>
-                  {orgEvents.length > 0 &&
-                    orgEvents.map((item) => (
-                      <TableRow orgEvent={item} key={item.eventID} />
-                    ))}
-                  {orgEvents.length === 0 && (
-                    <Table.Row>
-                      <Table.Cell colSpan={5}>
-                        <p className="text-center">
-                          <em>No results found.</em>
-                        </p>
-                      </Table.Cell>
-                    </Table.Row>
-                  )}
-                </Table.Body>
-              </Table>
-              <div className="flex-row-div">
-                <div className="right-flex">
-                  <Pagination
-                    activePage={activePage}
-                    totalPages={totalPages}
-                    firstItem={null}
-                    lastItem={null}
-                    onPageChange={(e, data) =>
-                      setActivePage(
-                        parseInt(data.activePage?.toString() ?? "1") ?? 1
-                      )
-                    }
-                  />
-                </div>
-              </div>
-            </Segment>
-          </Segment.Group>
-        </Grid.Column>
-      </Grid.Row>
-    </Grid>
+    <div className="bg-white h-full px-8 pt-8">
+      <Stack direction="vertical" gap="md" className="mb-4">
+        <Heading level={2}>Events Manager</Heading>
+        <div className="flex items-center justify-between">
+          <Breadcrumb aria-label="Page navigation">
+            <Breadcrumb.Item href="/controlpanel">Control Panel</Breadcrumb.Item>
+            <Breadcrumb.Item isCurrent>Events Manager</Breadcrumb.Item>
+          </Breadcrumb>
+          <Button
+            variant="primary"
+            icon={<IconPlus size={16} />}
+            onClick={() => history.push("/controlpanel/eventsmanager/create")}
+          >
+            New Event
+          </Button>
+        </div>
+      </Stack>
+
+      <div className="border border-gray-200 rounded-lg overflow-x-auto">
+        <DataTable
+          data={orgEvents}
+          columns={columns}
+          loading={loading}
+          density="compact"
+          bordered
+          striped
+          stickyHeader
+          caption="Events list"
+          enablePagination
+          pageSize={25}
+          pageSizeOptions={[10, 25, 50, 100]}
+          emptyState={
+            <div className="py-8 text-center">
+              <Text><em>No events found.</em></Text>
+            </div>
+          }
+          onRowClick={(row) => history.push(`/controlpanel/eventsmanager/edit/${row.eventID}`)}
+        />
+      </div>
+    </div>
   );
 };