diff --git a/src/components/forms/attendee-form/__tests__/attendee-form.test.js b/src/components/forms/attendee-form/__tests__/attendee-form.test.js
new file mode 100644
index 000000000..46cc6d22d
--- /dev/null
+++ b/src/components/forms/attendee-form/__tests__/attendee-form.test.js
@@ -0,0 +1,109 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import AttendeeForm from "../attendee-form";
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/inputs/member-input",
+  () => ({ __esModule: true, default: () => null })
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/inputs/attendee-input",
+  () => ({ __esModule: true, default: () => null })
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/inputs/tag-input",
+  () => ({ __esModule: true, default: () => null })
+);
+
+jest.mock("../../../notes/notes-panel", () => ({
+  __esModule: true,
+  default: () => null
+}));
+
+const SUMMIT = { id: 1, time_zone_id: "UTC" };
+
+const defaultEntity = {
+  id: 1,
+  first_name: "Jane",
+  last_name: "Doe",
+  email: "jane@example.com",
+  company: "Acme",
+  shared_contact_info: false,
+  summit_hall_checked_in: false,
+  disclaimer_accepted: false,
+  admin_notes: "",
+  tags: [],
+  tickets: [],
+  orders: [],
+  allowed_extra_questions: []
+};
+
+const renderForm = (entityOverride = {}, { onSubmit } = {}) =>
+  render(
+    <AttendeeForm
+      entity={{ ...defaultEntity, ...entityOverride }}
+      errors={{}}
+      currentSummit={SUMMIT}
+      onSubmit={onSubmit || jest.fn()}
+    />
+  );
+
+describe("AttendeeForm", () => {
+  it("blocks submit and shows required-field errors when no member and fields are blank", async () => {
+    const onSubmit = jest.fn();
+    renderForm({ first_name: "", last_name: "", email: "" }, { onSubmit });
+
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    await waitFor(() =>
+      expect(screen.getAllByText("This field is required")).toHaveLength(3)
+    );
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("submits a removeUnchangedFields-filtered payload when a field changes", async () => {
+    const onSubmit = jest.fn();
+    renderForm({}, { onSubmit });
+
+    const firstNameInput = screen.getByDisplayValue("Jane");
+    await userEvent.clear(firstNameInput);
+    await userEvent.type(firstNameInput, "Janet");
+
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled());
+    const payload = onSubmit.mock.calls[0][0];
+
+    expect(payload.first_name).toBe("Janet");
+    expect(payload).not.toHaveProperty("last_name");
+    expect(payload).not.toHaveProperty("email");
+    expect(payload).not.toHaveProperty("company");
+    expect(payload).not.toHaveProperty("shared_contact_info");
+  });
+
+  it("resyncs displayed fields when the entity prop changes", () => {
+    const { rerender } = renderForm({ first_name: "Jane" });
+    expect(screen.getByDisplayValue("Jane")).toBeInTheDocument();
+
+    rerender(
+      <AttendeeForm
+        entity={{ ...defaultEntity, first_name: "Alice" }}
+        errors={{}}
+        currentSummit={SUMMIT}
+        onSubmit={jest.fn()}
+      />
+    );
+
+    expect(screen.getByDisplayValue("Alice")).toBeInTheDocument();
+    expect(screen.queryByDisplayValue("Jane")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/forms/attendee-form/attendee-form.js b/src/components/forms/attendee-form/attendee-form.js
index 6c672ce5c..4e7fb8c90 100644
--- a/src/components/forms/attendee-form/attendee-form.js
+++ b/src/components/forms/attendee-form/attendee-form.js
@@ -11,14 +11,14 @@
  * limitations under the License.
  * */
 
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import T from "i18n-react/dist/i18n-react";
 import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
-import MemberInput from "openstack-uicore-foundation/lib/components/inputs/member-input"
-import AttendeeInput from "openstack-uicore-foundation/lib/components/inputs/attendee-input"
-import Input from "openstack-uicore-foundation/lib/components/inputs/text-input"
-import Panel from "openstack-uicore-foundation/lib/components/sections/panel"
-import TagInput from "openstack-uicore-foundation/lib/components/inputs/tag-input"
+import MemberInput from "openstack-uicore-foundation/lib/components/inputs/member-input";
+import AttendeeInput from "openstack-uicore-foundation/lib/components/inputs/attendee-input";
+import Input from "openstack-uicore-foundation/lib/components/inputs/text-input";
+import Panel from "openstack-uicore-foundation/lib/components/sections/panel";
+import TagInput from "openstack-uicore-foundation/lib/components/inputs/tag-input";
 import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown";
 import ExtraQuestionsForm from "openstack-uicore-foundation/lib/components/extra-questions";
 import QuestionsSet from "openstack-uicore-foundation/lib/utils/questions-set";
@@ -26,59 +26,84 @@ import TicketComponent from "./ticket-component";
 import OrderComponent from "./order-component";
 import RsvpComponent from "./rsvp-component";
 import { AffiliationsTable } from "../../tables/affiliationstable";
-import { isEmpty, scrollToError, shallowEqual } from "../../../utils/methods";
-import Notes from "../../notes";
+import { scrollToError, shallowEqual } from "../../../utils/methods";
+import NotesPanel from "../../notes/notes-panel";
 import CopyClipboard from "../../buttons/copy-clipboard";
 import { MILLISECONDS_IN_SECOND } from "../../../utils/constants";
 
-class AttendeeForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      entity: { ...props.entity },
-      originalEntity: { ...props.entity },
-      errors: props.errors,
-      showSection: "main"
-    };
-
-    this.formRef = React.createRef();
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.triggerFormSubmit = this.triggerFormSubmit.bind(this);
-    this.removeUnchangedFields = this.removeUnchangedFields.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const state = {};
-    scrollToError(this.props.errors);
-
-    if (!shallowEqual(prevProps.entity, this.props.entity)) {
-      state.entity = { ...this.props.entity };
-      state.originalEntity = { ...this.props.entity };
-      state.errors = {};
+const removeUnchangedFields = (entity, originalEntity) => {
+  const copyOfEntity = { ...entity };
+
+  const fields = [
+    "summit_hall_checked_in",
+    "disclaimer_accepted",
+    "has_virtual_check_in",
+    "first_name",
+    "last_name",
+    "company",
+    "shared_contact_info",
+    "admin_notes",
+    "email"
+  ];
+
+  fields.forEach((f) => {
+    if (copyOfEntity[f] === originalEntity[f]) {
+      // field dint change , so remove it from submit
+      delete copyOfEntity[f];
     }
-
-    if (!shallowEqual(prevProps.errors, this.props.errors)) {
-      state.errors = { ...this.props.errors };
+  });
+
+  return copyOfEntity;
+};
+
+const AttendeeForm = ({
+  entity: entityProp,
+  errors: errorsProp,
+  currentSummit,
+  history,
+  onSubmit,
+  onTicketReassign,
+  onSaveTicket,
+  onDeleteRsvp,
+  ExtraQuestionsFormReadOnly
+}) => {
+  const [entity, setEntity] = useState({ ...entityProp });
+  const [originalEntity, setOriginalEntity] = useState({ ...entityProp });
+  const [errors, setErrors] = useState(errorsProp);
+  const [openSections, setOpenSections] = useState({
+    admin_notes: false,
+    extra_questions: false
+  });
+  const formRef = useRef(null);
+
+  useEffect(() => {
+    if (!shallowEqual(originalEntity, entityProp)) {
+      setEntity({ ...entityProp });
+      setOriginalEntity({ ...entityProp });
+      setErrors({});
     }
+  }, [entityProp]);
 
-    if (!isEmpty(state)) {
-      this.setState({ ...this.state, ...state });
-    }
-  }
+  useEffect(() => {
+    scrollToError(errorsProp);
+    setErrors((prevErrors) =>
+      shallowEqual(prevErrors, errorsProp) ? prevErrors : { ...errorsProp }
+    );
+  }, [errorsProp]);
 
-  toggleSection(section, ev) {
-    const { showSection } = this.state;
-    const newShowSection = showSection === section ? "main" : section;
-    ev.preventDefault();
+  const toggleSection = (section, ev) => {
+    ev?.preventDefault();
+    setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }));
+  };
 
-    this.setState({ showSection: newShowSection });
-  }
+  const handleOpenNotes = () => {
+    setOpenSections((prev) =>
+      prev.admin_notes ? prev : { ...prev, admin_notes: true }
+    );
+  };
 
-  handleChange(ev) {
-    const entity = { ...this.state.entity };
+  const handleChange = (ev) => {
+    const updatedEntity = { ...entity };
     let { value, id } = ev.target;
 
     if (ev.target.type === "checkbox") {
@@ -94,402 +119,355 @@ class AttendeeForm extends React.Component {
     }
 
     if (id === "member") {
-      entity.email = value?.email || "";
-      entity.first_name = value?.first_name || "";
-      entity.last_name = value?.last_name || "";
+      updatedEntity.email = value?.email || "";
+      updatedEntity.first_name = value?.first_name || "";
+      updatedEntity.last_name = value?.last_name || "";
     }
 
-    entity[id] = value;
-    this.setState({ entity, errors: {} });
-  }
-
-  removeUnchangedFields(entity, originalEntity) {
-    const copyOfEntity = { ...entity };
-
-    const fields = [
-      "summit_hall_checked_in",
-      "disclaimer_accepted",
-      "has_virtual_check_in",
-      "first_name",
-      "last_name",
-      "company",
-      "shared_contact_info",
-      "admin_notes",
-      "email"
-    ];
-
-    fields.forEach((f) => {
-      if (copyOfEntity[f] === originalEntity[f]) {
-        // field dint change , so remove it from submit
-        delete copyOfEntity[f];
-      }
-    });
+    updatedEntity[id] = value;
+    setEntity(updatedEntity);
+    setErrors({});
+  };
 
-    return copyOfEntity;
-  }
+  const validate = () => {
+    const newErrors = { ...errors };
+    const required = ["first_name", "last_name", "email"];
 
-  triggerFormSubmit() {
-    if (!this.validate()) return false;
+    if (!entity.member) {
+      required.forEach((fieldId) => {
+        if (!entity[fieldId]) {
+          newErrors[fieldId] = "This field is required";
+        }
+      });
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return false;
+    }
+
+    return true;
+  };
+
+  const triggerFormSubmit = () => {
+    if (!validate()) return false;
 
     // check current ( could not be rendered)
-    if (this.formRef.current) {
-      this.formRef.current.doSubmit();
+    if (formRef.current) {
+      formRef.current.doSubmit();
       return true;
     }
 
     // do regular submit
-
-    const { originalEntity, entity } = this.state;
-
-    if (entity.extra_questions) {
-      entity.extra_questions = entity.extra_questions.map((q) => ({
-        question_id: q.question_id,
-        answer: q.value
-      }));
+    const updatedEntity = { ...entity };
+
+    if (updatedEntity.extra_questions) {
+      updatedEntity.extra_questions = updatedEntity.extra_questions.map(
+        (q) => ({
+          question_id: q.question_id,
+          answer: q.value
+        })
+      );
     }
 
-    this.props.onSubmit(this.removeUnchangedFields(entity, originalEntity));
+    onSubmit(removeUnchangedFields(updatedEntity, originalEntity));
 
     return true;
-  }
-
-  handleSubmit(formValues) {
-    const qs = new QuestionsSet(this.state.entity.allowed_extra_questions);
-    const formattedAnswers = [];
+  };
 
-    Object.keys(formValues).map((name) => {
+  const handleSubmit = (formValues) => {
+    const qs = new QuestionsSet(entity.allowed_extra_questions);
+    const formattedAnswers = Object.keys(formValues).map((name) => {
       const question = qs.getQuestionByName(name);
-      const newQuestion = {
+      return {
         question_id: question.id,
         answer: `${formValues[name]}`
       };
-      formattedAnswers.push(newQuestion);
     });
 
-    this.setState(
-      {
-        ...this.state,
-        entity: { ...this.state.entity, extra_questions: formattedAnswers }
-      },
-      () => {
-        const { originalEntity, entity } = this.state;
-        this.props.onSubmit(this.removeUnchangedFields(entity, originalEntity));
-      }
-    );
-  }
+    const updatedEntity = { ...entity, extra_questions: formattedAnswers };
+    setEntity(updatedEntity);
+    onSubmit(removeUnchangedFields(updatedEntity, originalEntity));
+  };
 
-  handleSpeakerLink(speaker_id, ev) {
-    const { history } = this.props;
+  const handleSpeakerLink = (speaker_id, ev) => {
     ev.preventDefault();
-
     history.push(`/app/speakers/${speaker_id}`);
-  }
+  };
 
-  hasErrors(field) {
-    const { errors } = this.state;
+  const hasErrors = (field) => {
     if (field in errors) {
       return errors[field];
     }
 
     return "";
-  }
-
-  handleNewTag(newTag) {
-    this.setState({
-      ...this.state,
-      entity: {
-        ...this.state.entity,
-        tags: [...this.state.entity.tags, { tag: newTag }]
-      }
-    });
-  }
-
-  validate = () => {
-    const { entity, errors } = this.state;
-    const required = ["first_name", "last_name", "email"];
-
-    if (!entity.member) {
-      required.forEach((fieldId) => {
-        if (!entity[fieldId]) {
-          errors[fieldId] = "This field is required";
-        }
-      });
-    }
-
-    if (Object.keys(errors).length > 0) {
-      this.setState({ errors });
-      return false;
-    }
+  };
 
-    return true;
+  const handleNewTag = (newTag) => {
+    setEntity({
+      ...entity,
+      tags: [...entity.tags, { tag: newTag }]
+    });
   };
 
-  render() {
-    const { entity, showSection } = this.state;
-    const { currentSummit } = this.props;
-    const disableMemberInput = !entity.member && entity.email;
-
-    return (
-      <>
-        {/* First Form ( Main Attendee Form ) */}
-        <form className="summit-attendee-form">
-          <input type="hidden" id="id" value={entity.id} />
-          {entity.speaker != null && (
-            <div className="row form-group">
-              <div className="col-md-4">
-                <label> {T.translate("general.speaker")} </label>
-                <br />
-                <a
-                  href=""
-                  onClick={this.handleSpeakerLink.bind(this, entity.speaker.id)}
-                >
-                  {entity.speaker.first_name} {entity.speaker.last_name}
-                </a>
-              </div>
-            </div>
-          )}
-          <div className="row form-group">
-            <div className="col-md-5">
-              <label> {T.translate("general.member")} *</label>
-              <div
-                className="member-input"
-                style={{ display: "flex", alignItems: "center" }}
-              >
-                <MemberInput
-                  id="member"
-                  value={entity.member}
-                  getOptionLabel={(member) =>
-                    `${member.first_name || ""} ${member.last_name || ""} (${
-                      member.email || member.id
-                    })`
-                  }
-                  onChange={this.handleChange}
-                  isClearable
-                  isDisabled={disableMemberInput}
-                />
-                {entity?.member && (
-                  <span style={{ marginLeft: 10 }}>
-                    <CopyClipboard
-                      text={`${entity.member.first_name || ""} ${
-                        entity.member.last_name || ""
-                      } (${entity.member.email || entity.member.id})`}
-                    />
-                  </span>
-                )}
-              </div>
-            </div>
-            <div className="col-md-1" style={{ marginTop: 20 }}>
-              -- OR --
-            </div>
-            <div className="col-md-4">
-              <label>
-                {T.translate("edit_attendee.email")}
-                {"  "}
-                <i
-                  className="fa fa-info-circle"
-                  aria-hidden="true"
-                  title={T.translate("edit_attendee.email_disclaimer")}
-                />
-              </label>
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <Input
-                  id="email"
-                  value={entity.email}
-                  onChange={this.handleChange}
-                  className="form-control"
-                  error={this.hasErrors("email")}
-                  disabled={!!entity.member}
-                />
-                <span style={{ marginLeft: 10 }}>
-                  <CopyClipboard text={entity?.email} />
-                </span>
-              </div>
-            </div>
-          </div>
+  const disableMemberInput = !entity.member && entity.email;
 
+  return (
+    <>
+      {/* First Form ( Main Attendee Form ) */}
+      <form className="summit-attendee-form">
+        <input type="hidden" id="id" value={entity.id} />
+        {entity.speaker != null && (
           <div className="row form-group">
             <div className="col-md-4">
-              <label> {T.translate("edit_attendee.first_name")}</label>
-              <Input
-                id="first_name"
-                value={entity.first_name}
-                onChange={this.handleChange}
-                className="form-control"
-                error={this.hasErrors("first_name")}
-              />
-            </div>
-            <div className="col-md-4">
-              <label> {T.translate("edit_attendee.last_name")}</label>
-              <Input
-                id="last_name"
-                value={entity.last_name}
-                onChange={this.handleChange}
-                className="form-control"
-                error={this.hasErrors("last_name")}
-              />
+              <label> {T.translate("general.speaker")} </label>
+              <br />
+              <a
+                href=""
+                onClick={(ev) => handleSpeakerLink(entity.speaker.id, ev)}
+              >
+                {entity.speaker.first_name} {entity.speaker.last_name}
+              </a>
             </div>
-            <div className="col-md-4">
-              <label> {T.translate("edit_attendee.manager")}</label>
-              <AttendeeInput
-                id="manager"
-                summitId={currentSummit.id}
-                value={entity.manager}
-                getOptionLabel={(attendee) =>
-                  `${attendee.first_name || ""} ${attendee.last_name || ""} (${
-                    attendee.email || attendee.id
+          </div>
+        )}
+        <div className="row form-group">
+          <div className="col-md-5">
+            <label> {T.translate("general.member")} *</label>
+            <div
+              className="member-input"
+              style={{ display: "flex", alignItems: "center" }}
+            >
+              <MemberInput
+                id="member"
+                value={entity.member}
+                getOptionLabel={(member) =>
+                  `${member.first_name || ""} ${member.last_name || ""} (${
+                    member.email || member.id
                   })`
                 }
-                onChange={this.handleChange}
+                onChange={handleChange}
                 isClearable
+                isDisabled={disableMemberInput}
               />
+              {entity?.member && (
+                <span style={{ marginLeft: 10 }}>
+                  <CopyClipboard
+                    text={`${entity.member.first_name || ""} ${
+                      entity.member.last_name || ""
+                    } (${entity.member.email || entity.member.id})`}
+                  />
+                </span>
+              )}
             </div>
           </div>
-          <div className="row form-group">
-            <div className="col-md-4">
-              <label> {T.translate("edit_attendee.company")}</label>
+          <div className="col-md-1" style={{ marginTop: 20 }}>
+            -- OR --
+          </div>
+          <div className="col-md-4">
+            <label>
+              {T.translate("edit_attendee.email")}
+              {"  "}
+              <i
+                className="fa fa-info-circle"
+                aria-hidden="true"
+                title={T.translate("edit_attendee.email_disclaimer")}
+              />
+            </label>
+            <div style={{ display: "flex", alignItems: "center" }}>
               <Input
-                id="company"
-                value={entity?.company}
-                onChange={this.handleChange}
+                id="email"
+                value={entity.email}
+                onChange={handleChange}
                 className="form-control"
-                error={this.hasErrors("company")}
-              />
-            </div>
-            <div className="col-md-8">
-              <label> {T.translate("edit_attendee.tags")}</label>
-              <TagInput
-                id="tags"
-                clearable
-                allowCreate
-                isMulti
-                value={entity.tags}
-                onChange={this.handleChange}
-                onCreate={this.handleNewTag}
-                placeholder={T.translate("edit_attendee.placeholders.tags")}
+                error={hasErrors("email")}
+                disabled={!!entity.member}
               />
+              <span style={{ marginLeft: 10 }}>
+                <CopyClipboard text={entity?.email} />
+              </span>
             </div>
           </div>
-          <div className="row form-group">
-            <div className="col-md-3 form-group">
-              <label htmlFor="shared_contact_info">
-                {T.translate("edit_attendee.shared_contact_info")}
-              </label>
-              <Dropdown
-                id="shared_contact_info"
-                value={entity.shared_contact_info}
-                onChange={this.handleChange}
-                options={[
-                  { label: "Yes", value: true },
-                  { label: "No", value: false }
-                ]}
-              />
-            </div>
-            <div className="col-md-3 form-group">
-              <label htmlFor="summit_hall_checked_in">
-                {T.translate("edit_attendee.checked_in")}
-              </label>
-              <Dropdown
-                id="summit_hall_checked_in"
-                value={entity.summit_hall_checked_in}
-                onChange={this.handleChange}
-                options={[
-                  { label: "Yes", value: true },
-                  { label: "No", value: false }
-                ]}
-              />
-            </div>
-            <div className="col-md-3 form-group">
-              <label htmlFor="disclaimer_accepted">
-                {T.translate("edit_attendee.disclaimer_accepted")}
-              </label>
-              <Dropdown
-                id="disclaimer_accepted"
-                value={entity.disclaimer_accepted}
-                onChange={this.handleChange}
-                options={[
-                  { label: "Yes", value: true },
-                  { label: "No", value: false }
-                ]}
-              />
-            </div>
+        </div>
+
+        <div className="row form-group">
+          <div className="col-md-4">
+            <label> {T.translate("edit_attendee.first_name")}</label>
+            <Input
+              id="first_name"
+              value={entity.first_name}
+              onChange={handleChange}
+              className="form-control"
+              error={hasErrors("first_name")}
+            />
+          </div>
+          <div className="col-md-4">
+            <label> {T.translate("edit_attendee.last_name")}</label>
+            <Input
+              id="last_name"
+              value={entity.last_name}
+              onChange={handleChange}
+              className="form-control"
+              error={hasErrors("last_name")}
+            />
           </div>
+          <div className="col-md-4">
+            <label> {T.translate("edit_attendee.manager")}</label>
+            <AttendeeInput
+              id="manager"
+              summitId={currentSummit.id}
+              value={entity.manager}
+              getOptionLabel={(attendee) =>
+                `${attendee.first_name || ""} ${attendee.last_name || ""} (${
+                  attendee.email || attendee.id
+                })`
+              }
+              onChange={handleChange}
+              isClearable
+            />
+          </div>
+        </div>
+        <div className="row form-group">
+          <div className="col-md-4">
+            <label> {T.translate("edit_attendee.company")}</label>
+            <Input
+              id="company"
+              value={entity?.company}
+              onChange={handleChange}
+              className="form-control"
+              error={hasErrors("company")}
+            />
+          </div>
+          <div className="col-md-8">
+            <label> {T.translate("edit_attendee.tags")}</label>
+            <TagInput
+              id="tags"
+              clearable
+              allowCreate
+              isMulti
+              value={entity.tags}
+              onChange={handleChange}
+              onCreate={handleNewTag}
+              placeholder={T.translate("edit_attendee.placeholders.tags")}
+            />
+          </div>
+        </div>
+        <div className="row form-group">
+          <div className="col-md-3 form-group">
+            <label htmlFor="shared_contact_info">
+              {T.translate("edit_attendee.shared_contact_info")}
+            </label>
+            <Dropdown
+              id="shared_contact_info"
+              value={entity.shared_contact_info}
+              onChange={handleChange}
+              options={[
+                { label: "Yes", value: true },
+                { label: "No", value: false }
+              ]}
+            />
+          </div>
+          <div className="col-md-3 form-group">
+            <label htmlFor="summit_hall_checked_in">
+              {T.translate("edit_attendee.checked_in")}
+            </label>
+            <Dropdown
+              id="summit_hall_checked_in"
+              value={entity.summit_hall_checked_in}
+              onChange={handleChange}
+              options={[
+                { label: "Yes", value: true },
+                { label: "No", value: false }
+              ]}
+            />
+          </div>
+          <div className="col-md-3 form-group">
+            <label htmlFor="disclaimer_accepted">
+              {T.translate("edit_attendee.disclaimer_accepted")}
+            </label>
+            <Dropdown
+              id="disclaimer_accepted"
+              value={entity.disclaimer_accepted}
+              onChange={handleChange}
+              options={[
+                { label: "Yes", value: true },
+                { label: "No", value: false }
+              ]}
+            />
+          </div>
+        </div>
 
-          <div>
-            {entity.member != null && entity.member.affiliations && (
-              <div className="row form-group">
-                <div className="col-md-12">
-                  <legend>{T.translate("edit_attendee.affiliations")}</legend>
-                  <AffiliationsTable
-                    ownerId={entity.member.id}
-                    data={entity.member.affiliations}
-                  />
-                </div>
+        <div>
+          {entity.member != null && entity.member.affiliations && (
+            <div className="row form-group">
+              <div className="col-md-12">
+                <legend>{T.translate("edit_attendee.affiliations")}</legend>
+                <AffiliationsTable
+                  ownerId={entity.member.id}
+                  data={entity.member.affiliations}
+                />
               </div>
-            )}
-
-            {entity.tickets && entity.tickets.length > 0 && (
-              <TicketComponent
-                attendeeId={entity.id}
-                tickets={entity.tickets}
-                summit={currentSummit}
-                onReassign={this.props.onTicketReassign}
-                onSave={this.props.onSaveTicket}
-              />
-            )}
-            {entity.orders?.length > 0 && (
-              <OrderComponent
-                orders={entity.orders}
-                summitId={entity.summit_id}
-              />
-            )}
+            </div>
+          )}
 
-            {entity.member?.rsvp?.length > 0 && (
-              <RsvpComponent
-                member={entity.member}
-                onDelete={this.props.onDeleteRsvp}
-              />
-            )}
-          </div>
-        </form>
-        {/* Second Form ( Extra Questions ) */}
-        {entity.id !== 0 && entity.allowed_extra_questions?.length > 0 && (
-          <Panel
-            show={showSection === "extra_questions"}
-            title={T.translate("edit_attendee.extra_questions")}
-            handleClick={this.toggleSection.bind(this, "extra_questions")}
-          >
-            <ExtraQuestionsForm
-              readOnly={this.props.ExtraQuestionsFormReadOnly}
-              extraQuestions={entity.allowed_extra_questions}
-              userAnswers={entity.extra_questions}
-              onAnswerChanges={this.handleSubmit}
-              ref={this.formRef}
-              className="extra-questions"
+          {entity.tickets && entity.tickets.length > 0 && (
+            <TicketComponent
+              attendeeId={entity.id}
+              tickets={entity.tickets}
+              summit={currentSummit}
+              onReassign={onTicketReassign}
+              onSave={onSaveTicket}
             />
-          </Panel>
-        )}
-        {entity.id !== 0 && (
-          <Panel
-            show={showSection === "admin_notes"}
-            title={T.translate("edit_attendee.admin_notes")}
-            handleClick={this.toggleSection.bind(this, "admin_notes")}
-          >
-            <Notes attendeeId={entity.id} />
-          </Panel>
-        )}
-        <div className="row">
-          <div className="col-md-12 submit-buttons">
-            <input
-              type="button"
-              onClick={() => this.triggerFormSubmit()}
-              className="btn btn-primary pull-right"
-              value={T.translate("general.save")}
+          )}
+          {entity.orders?.length > 0 && (
+            <OrderComponent
+              orders={entity.orders}
+              summitId={entity.summit_id}
             />
-          </div>
+          )}
+
+          {entity.member?.rsvp?.length > 0 && (
+            <RsvpComponent member={entity.member} onDelete={onDeleteRsvp} />
+          )}
         </div>
-      </>
-    );
-  }
-}
+      </form>
+      {entity.id !== 0 && (
+        <NotesPanel
+          attendeeId={entity.id}
+          open={openSections.admin_notes}
+          onToggle={(ev) => toggleSection("admin_notes", ev)}
+          onOpen={handleOpenNotes}
+        />
+      )}
+      {/* Second Form ( Extra Questions ) */}
+      {entity.id !== 0 && entity.allowed_extra_questions?.length > 0 && (
+        <Panel
+          show={openSections.extra_questions}
+          title={T.translate("edit_attendee.extra_questions")}
+          handleClick={(ev) => toggleSection("extra_questions", ev)}
+        >
+          <ExtraQuestionsForm
+            readOnly={ExtraQuestionsFormReadOnly}
+            extraQuestions={entity.allowed_extra_questions}
+            userAnswers={entity.extra_questions}
+            onAnswerChanges={handleSubmit}
+            ref={formRef}
+            className="extra-questions"
+          />
+        </Panel>
+      )}
+      <div className="row">
+        <div className="col-md-12 submit-buttons">
+          <input
+            type="button"
+            onClick={() => triggerFormSubmit()}
+            className="btn btn-primary pull-right"
+            value={T.translate("general.save")}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
 
 export default AttendeeForm;
diff --git a/src/components/notes/index.js b/src/components/notes/notes-panel.js
similarity index 70%
rename from src/components/notes/index.js
rename to src/components/notes/notes-panel.js
index 8d018ce2a..c174b5ec0 100644
--- a/src/components/notes/index.js
+++ b/src/components/notes/notes-panel.js
@@ -1,9 +1,12 @@
-import React, { useEffect, useState } from "react";
-import FreeTextSearch from "openstack-uicore-foundation/lib/components/free-text-search"
-import Table from "openstack-uicore-foundation/lib/components/table"
-import TextArea from "openstack-uicore-foundation/lib/components/inputs/textarea-input";
-import T from "i18n-react";
+import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
+import Swal from "sweetalert2";
+import T from "i18n-react";
+import FreeTextSearch from "openstack-uicore-foundation/lib/components/free-text-search";
+import Table from "openstack-uicore-foundation/lib/components/table";
+import Panel from "openstack-uicore-foundation/lib/components/sections/panel";
+import { Pagination } from "react-bootstrap";
+import TextArea from "openstack-uicore-foundation/lib/components/inputs/textarea-input";
 import {
   clearNotesParams,
   getNotes,
@@ -11,14 +14,15 @@ import {
   saveNote,
   deleteNote
 } from "../../actions/notes-actions";
-import { Pagination } from "react-bootstrap";
-import Swal from "sweetalert2";
 
 import styles from "./index.module.less";
 
-const Notes = ({
+const NotesPanel = ({
   attendeeId,
   ticketId,
+  open,
+  onToggle,
+  onOpen,
   notes,
   term,
   currentPage,
@@ -34,6 +38,22 @@ const Notes = ({
   clearNotesParams
 }) => {
   const [newNote, setNewNote] = useState("");
+  const hasAutoOpenedRef = useRef(false);
+
+  useEffect(() => {
+    getNotes(attendeeId, ticketId, term, 1, perPage, order, orderDir).then(
+      () => {
+        if (!hasAutoOpenedRef.current) {
+          hasAutoOpenedRef.current = true;
+          onOpen();
+        }
+      }
+    );
+
+    return () => {
+      clearNotesParams();
+    };
+  }, []);
 
   const handleSaveNote = () => {
     saveNote(attendeeId, ticketId, newNote).then(() => setNewNote(""));
@@ -42,15 +62,16 @@ const Notes = ({
   const handleDeleteNote = (noteId) => {
     const msg = {
       title: T.translate("general.are_you_sure"),
-      text: `${T.translate("notes.remove_warning")} ${noteId}`,
+      text: `${T.translate("notes_panel.remove_warning")} ${noteId}`,
       type: "warning"
     };
 
-    Swal.fire(msg).then(function () {
+    Swal.fire(msg).then(() => {
       deleteNote(attendeeId, noteId);
     });
   };
-  const handleSort = (index, key, dir, func) => {
+
+  const handleSort = (index, key, dir) => {
     getNotes(attendeeId, ticketId, term, currentPage, perPage, key, dir);
   };
 
@@ -70,19 +91,11 @@ const Notes = ({
     );
   };
 
-  const handleExport = (index, key, dir, func) => {
+  const handleExport = () => {
     exportNotes(attendeeId, ticketId, term, order, orderDir);
   };
 
-  useEffect(() => {
-    getNotes(attendeeId, ticketId, term, 1, perPage, order, orderDir);
-
-    return () => {
-      clearNotesParams();
-    };
-  }, []);
-
-  const table_options = {
+  const tableOptions = {
     className: styles.notesTable,
     sortCol: order,
     sortDir: orderDir,
@@ -91,33 +104,37 @@ const Notes = ({
     }
   };
 
-  const table_columns = [
-    { columnKey: "id", value: T.translate("notes.id"), sortable: true },
+  const tableColumns = [
+    { columnKey: "id", value: T.translate("notes_panel.id"), sortable: true },
     {
       columnKey: "created",
-      value: T.translate("notes.created"),
+      value: T.translate("notes_panel.created"),
       sortable: true
     },
     {
       columnKey: "author_fullname",
-      value: T.translate("notes.author_fullname"),
+      value: T.translate("notes_panel.author_fullname"),
       sortable: true
     },
     {
       columnKey: "author_email",
-      value: T.translate("notes.author_email"),
+      value: T.translate("notes_panel.author_email"),
       sortable: true
     },
-    { columnKey: "ticket_link", value: T.translate("notes.ticket_id") },
-    { columnKey: "content", value: T.translate("notes.content") }
+    { columnKey: "ticket_link", value: T.translate("notes_panel.ticket_id") },
+    { columnKey: "content", value: T.translate("notes_panel.content") }
   ];
 
-  const show_columns = columns
-    ? table_columns.filter((c) => columns.include(c.columnKey))
-    : table_columns;
+  const showColumns = columns
+    ? tableColumns.filter((c) => columns.include(c.columnKey))
+    : tableColumns;
 
   return (
-    <>
+    <Panel
+      show={open}
+      title={T.translate("notes_panel.title")}
+      handleClick={onToggle}
+    >
       <div className="row">
         <div className={`col-md-12 ${styles.addNewNote}`}>
           <div>
@@ -130,7 +147,7 @@ const Notes = ({
               onChange={(ev) => setNewNote(ev.target.value)}
               maxLength={1024}
             />
-            <span className="input-group-btn">
+            <span className="input-group-btn" style={{ verticalAlign: "top" }}>
               <input
                 type="button"
                 className="btn btn-default"
@@ -145,7 +162,7 @@ const Notes = ({
         <div className="col-md-6">
           <FreeTextSearch
             value={term ?? ""}
-            placeholder={T.translate("notes.placeholders.search")}
+            placeholder={T.translate("notes_panel.placeholders.search")}
             onSearch={handleSearch}
           />
         </div>
@@ -159,14 +176,14 @@ const Notes = ({
         </div>
       </div>
 
-      {notes.length === 0 && <div>{T.translate("notes.no_entries")}</div>}
+      {notes.length === 0 && <div>{T.translate("notes_panel.no_entries")}</div>}
 
       {notes.length > 0 && (
         <>
           <Table
-            options={table_options}
+            options={tableOptions}
             data={notes}
-            columns={show_columns}
+            columns={showColumns}
             onSort={handleSort}
           />
           <Pagination
@@ -184,7 +201,7 @@ const Notes = ({
           />
         </>
       )}
-    </>
+    </Panel>
   );
 };
 
@@ -198,4 +215,4 @@ export default connect(mapStateToProps, {
   saveNote,
   deleteNote,
   clearNotesParams
-})(Notes);
+})(NotesPanel);
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9d6b91683..0c8834d65 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -981,7 +981,6 @@
     "created": "Created Date",
     "seat": "Seat",
     "extra_questions": "Extra Questions",
-    "admin_notes": "Notes",
     "has_idp_account": "Has IDP Account?",
     "has_pending_questions": "Has Pending Questions?",
     "promo_code": "Promo Code",
@@ -1847,7 +1846,6 @@
     "print_date": "Print Date",
     "no_prints": "No badge prints found for current search criteria.",
     "apply_filters": "Apply Filters",
-    "admin_notes": "Notes",
     "unassign": "Unassign",
     "ticket_price": "Ticket Price",
     "net_price": "Net Price",
@@ -3876,6 +3874,10 @@
     }
   },
   "notes": {
+    "note_created": "Note created successfully."
+  },
+  "notes_panel": {
+    "title": "Notes",
     "id": "Id",
     "created": "Created",
     "author_fullname": "Author",
@@ -3883,7 +3885,6 @@
     "ticket_id": "Ticket Id",
     "content": "Note",
     "no_entries": "No notes found.",
-    "note_created": "Note created successfully.",
     "remove_warning": "Are you sure you want to delete note ",
     "placeholders": {
       "search": "Search by content or author"
diff --git a/src/pages/orders/edit-ticket-page.js b/src/pages/orders/edit-ticket-page.js
index ee1098bec..265de75f9 100644
--- a/src/pages/orders/edit-ticket-page.js
+++ b/src/pages/orders/edit-ticket-page.js
@@ -17,7 +17,7 @@ import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
 import Swal from "sweetalert2";
-import Table from "openstack-uicore-foundation/lib/components/table"
+import Table from "openstack-uicore-foundation/lib/components/table";
 import Panel from "openstack-uicore-foundation/lib/components/sections/panel";
 import moment from "moment-timezone";
 import { getSummitById } from "../../actions/summit-actions";
@@ -48,7 +48,7 @@ import {
   clearBadgePrints
 } from "../../actions/badge-actions";
 import AuditLogs from "../../components/audit-logs";
-import Notes from "../../components/notes";
+import NotesPanel from "../../components/notes/notes-panel";
 import { deleteTicket } from "../../actions/attendee-actions";
 import { MILLISECONDS_IN_SECOND } from "../../utils/constants";
 
@@ -69,7 +69,11 @@ const EditTicketPage = ({
   const [showRefundRejectModal, setShowRefundRejectModal] = useState(false);
   const [refundRejectNotes, setRefundRejectNotes] = useState("");
   const [printType, setPrintType] = useState(null);
-  const [showSection, setShowSection] = useState("main");
+  const [openSections, setOpenSections] = useState({
+    refund_requests: false,
+    admin_notes: false,
+    audit_log: false
+  });
 
   useEffect(() => {
     props.getBadgeFeatures();
@@ -243,10 +247,14 @@ const EditTicketPage = ({
   };
 
   const toggleSection = (section, ev) => {
-    const newShowSection = showSection === section ? "main" : section;
-    ev.preventDefault();
+    ev?.preventDefault();
+    setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }));
+  };
 
-    setShowSection(newShowSection);
+  const handleOpenNotes = () => {
+    setOpenSections((prev) =>
+      prev.admin_notes ? prev : { ...prev, admin_notes: true }
+    );
   };
 
   const twentychars = -20;
@@ -377,7 +385,7 @@ const EditTicketPage = ({
 
       {entity?.refund_requests?.length > 0 && (
         <Panel
-          show={showSection === "refund_requests"}
+          show={openSections.refund_requests}
           title={T.translate("edit_ticket.refund_requests")}
           handleClick={(ev) => toggleSection("refund_requests", ev)}
         >
@@ -450,13 +458,13 @@ const EditTicketPage = ({
       )}
 
       {entity?.id && entity?.owner?.id && (
-        <Panel
-          show={showSection === "admin_notes"}
-          title={T.translate("edit_ticket.admin_notes")}
-          handleClick={(ev) => toggleSection("admin_notes", ev)}
-        >
-          <Notes attendeeId={entity?.owner?.id} ticketId={entity.id} />
-        </Panel>
+        <NotesPanel
+          attendeeId={entity?.owner?.id}
+          ticketId={entity.id}
+          open={openSections.admin_notes}
+          onToggle={(ev) => toggleSection("admin_notes", ev)}
+          onOpen={handleOpenNotes}
+        />
       )}
       <br />
       <br />
@@ -501,7 +509,7 @@ const EditTicketPage = ({
       )}
       <br />
       <Panel
-        show={showSection === "audit_log"}
+        show={openSections.audit_log}
         title={T.translate("audit_log.title")}
         handleClick={(ev) => toggleSection("audit_log", ev)}
       >