diff --git a/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx b/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx
index 21f023c..d572cff 100644
--- a/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx
+++ b/src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx
@@ -21,7 +21,7 @@ import {Utils} from '#utils/AppUtils';
 
 const {statsRes} = IndyRest;
 
-export const PackageTypeSelect = ({register, formErrors}) =>{
+export const PackageTypeSelect = ({register, formErrors, updatePackageType}) =>{
   const [state, setState] = useState({
     pkgTypes: []
   });
@@ -43,9 +43,22 @@ export const PackageTypeSelect = ({register, formErrors}) =>{
   if(register){
     registered = register("packageType", {required: true});
   }
+
+  const {onChange, onBlur, name, ref} = registered;
+
+  const change = e => {
+    setSelected(e.target.value);
+    if (typeof updatePackageType === "function") {
+      updatePackageType(e.target.value);
+    }
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  };
+
   return <span>
     <select role="pkgTypeSel" value={selected}
-      onChange={e => setSelected(e.target.value)} {...registered}>
+      onChange={change} onBlur={onBlur} name={name} ref={ref}>
       <option value=""></option>
       {
         state.pkgTypes.map(type => <option key={`pkgType:${type}`} value={type}>{type}</option>)
@@ -57,5 +70,6 @@ export const PackageTypeSelect = ({register, formErrors}) =>{
 
 PackageTypeSelect.propTypes = {
   register: PropTypes.func,
-  formErrors: PropTypes.object
+  formErrors: PropTypes.object,
+  updatePackageType: PropTypes.func,
 };
diff --git a/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx b/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx
index 2a1bc82..76c365b 100644
--- a/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx
+++ b/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx
@@ -136,11 +136,16 @@ const StoreEditControlPanel = ({mode, store, handleSubmit, validate, changelog})
   const postSuccessHandler = st => navigate(`/${st.type}/${st.packageType}/view/${st.name}`);
   let handleSave = () => save(store, mode, postSuccessHandler);
   if(handleSubmit && typeof handleSubmit === 'function'){
-    // console.log(handleSubmit);
     handleSave = handleSubmit(data=>{
       data.disabled = !data.enabled;
       data.enabled = undefined;
+      // store.constituents can be updated without data being updated
+      data.constituents = store.constituents;
       if(data.changelog && data.changelog.trim() !== ''){
+        if (data.metadata && data.metadata.changelog) {
+          // need to overwrite previous changelog here
+          data.metadata.changelog = data.changelog;
+        }
         if(store.metadata){
           store.metadata.changelog = data.changelog;
         }else{
diff --git a/src/main/webui/src/app/components/content/group/GroupEdit.jsx b/src/main/webui/src/app/components/content/group/GroupEdit.jsx
index b03752c..188a4cc 100644
--- a/src/main/webui/src/app/components/content/group/GroupEdit.jsx
+++ b/src/main/webui/src/app/components/content/group/GroupEdit.jsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (C) 2023 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
+ * Copyright (C) 2024 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,8 +14,293 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, {useState, useEffect} from 'react';
+import {useLocation, useParams} from 'react-router-dom';
+import {useForm} from 'react-hook-form';
+import {PropTypes} from 'prop-types';
+import {StoreEditControlPanel as EditControlPanel} from '../common/StoreControlPanels.jsx';
+import {DisableTimeoutHint} from '../common/Hints.jsx';
+import {PackageTypeSelect} from '../common/PackageTypeSelect.jsx';
+// import ViewJsonDebugger from './Debugger.jsx';
+import {Utils} from '#utils/AppUtils.js';
+import {TimeUtils} from '#utils/TimeUtils.js';
+import {IndyRest} from '#utils/RestClient.js';
+
+const {statsRes, storeRes, disableRes} = IndyRest;
+
+const EditConstituents = ({store, currentAvailable}) => {
+  const [state, setState] = useState(false);
+
+  const addConstituent = available => {
+    let idx = currentAvailable.indexOf(available);
+    store.constituents.push(available);
+    // element.addClass('hidden');
+    currentAvailable.splice(idx, 1);
+    setState(!state);
+  };
+
+  const removeConstituent = constituent => {
+    let idx = store.constituents.indexOf(constituent);
+
+    currentAvailable.push(constituent);
+
+    store.constituents.splice(idx, 1);
+
+    Utils.sortEndpoints(currentAvailable);
+    setState(!state);
+  };
+
+  const moveItem = (from, to) => {
+    let temp = store.constituents.splice(from, 1)[0];
+    store.constituents.splice(to, 0, temp);
+  };
+
+  const promote = constituent => {
+    let idx = store.constituents.indexOf(constituent);
+    if (idx > 0) {
+      moveItem(idx, idx - 1);
+      setState(!state);
+    }
+  };
+
+  const demote = constituent => {
+    let idx = store.constituents.indexOf(constituent);
+    if (idx < store.constituents.length - 1) {
+      moveItem(idx, idx + 1);
+      setState(!state);
+    }
+  };
+
+  const top = constituent => {
+    let idx = store.constituents.indexOf(constituent);
+    moveItem(idx, 0);
+    setState(!state);
+  };
+
+  const bottom = constituent => {
+    let idx = store.constituents.indexOf(constituent);
+    moveItem(idx, store.constituents.length - 1);
+    setState(!state);
+  };
+
+  return <div className="fieldset">
+    <ol className="left-half detail-value detail-edit-list">
+      <lt><label>Current:</label><span className="hint">(hover for controls)</span></lt>
+      {
+        store.constituents && store.constituents.map((item, index) => <li key={`constituent-${item}`}><div className="constituent">
+          <div className="inline value">{item}</div>
+          <div className="inline inline-cp">
+            <a href="" title="Remove from constituents" className="inline-cp-action" onClick={e => {
+              e.preventDefault();
+              removeConstituent(item);
+            }}>&#x2718;</a>
+            {
+              index !== 0 && <a href="" title="Promote priority" className="inline-cp-action" onClick={e => {
+                e.preventDefault();
+                promote(item);
+              }}>&uarr;</a>
+            }
+            {
+              index !== 0 && <a href="" title="Top priority" className="inline-cp-action" onClick={e => {
+                e.preventDefault();
+                top(item);
+              }}>&#x219f; </a>
+            }
+            {
+              index !== store.constituents.length - 1 && <a href="" title="Demote priority" className="inline-cp-action" onClick={e => {
+                e.preventDefault();
+                demote(item);
+              }}>&darr;</a>
+            }
+            {
+              index !== store.constituents.length - 1 && <a href="" title="Bottom priority" className="inline-cp-action" onClick={e => {
+                e.preventDefault();
+                bottom(item);
+              }}>&#x21a1;</a>
+            }
+          </div>
+        </div>
+        </li>)
+      }
+    </ol>
+    <ol className="right-half detail-value detail-edit-list">
+      <lt><label>Available:</label><span className="hint">(click to add to constituents)</span></lt>
+      {
+        currentAvailable && currentAvailable.map(item => store.packageType !== "" && item.startsWith(store.packageType) && <li key={`available-${item}`}><div className="available">
+          <a href="" title="Add to constituents" className="surround-cp-action" onClick={e => {
+            e.preventDefault();
+            addConstituent(item);
+          }}>
+            <div className="inline value">{item}</div><span className="inline-cp">+</span>
+          </a>
+        </div>
+        </li>)
+      }
+    </ol>
+  </div>;
+};
+
+EditConstituents.propTypes = {
+  store: PropTypes.object,
+  currentAvailable: PropTypes.array,
+};
 
 export default function GroupEdit() {
-  return <div>This is not implemented yet!</div>;
+  const [store, setStore] = useState({"type": "group", "constituents": []});
+  const [available, setAvailable] = useState([]);
+  const location = useLocation();
+  const {packageType, name} = useParams();
+  const {
+    register,
+    reset,
+    trigger,
+    handleSubmit,
+    formState: {errors}
+  } = useForm();
+
+  const path = location.pathname;
+  const mode = path.match(/.*\/new$/u) ? 'new' : 'edit';
+  useEffect(() => {
+    const fetchAvailable = async () => {
+      // get available Store data
+      const availableRes = await statsRes.getAllEndpoints();
+      let allAvailable = new Set();
+      if (availableRes.success) {
+        let availableResult = availableRes.result.items;
+        availableResult.forEach(item => {
+          allAvailable.add(item.packageType + ':' + item.type + ':' + item.name);
+        });
+      } else {
+        Utils.logMessage(`Getting available constituents failed! Error reason: ${statsRes.error.message}`);
+      }
+      return allAvailable;
+    };
+
+    if (mode === 'edit') {
+      const fetchStore = async () => {
+        // get Store data
+        const res = await storeRes.get(packageType, "group", name);
+        if (res.success) {
+          const raw = res.result;
+          const storeView = Utils.cloneObj(raw);
+          storeView.disabled = raw.disabled === undefined ? false : raw.disabled;
+          let allAvailable = await fetchAvailable();
+          raw.constituents.forEach(item => allAvailable.delete(item));
+          allAvailable.delete(raw.key);
+          // get Store disablement data
+          const timeoutRes = await disableRes.getStoreTimeout(packageType, "group", name);
+          const cloned = Utils.cloneObj(storeView);
+          if (timeoutRes.success) {
+            const timeout = timeoutRes.result;
+            cloned.disableExpiration = timeout.expiration;
+          } else {
+            Utils.logMessage(`disable timeout getting failed! Error reason: ${timeoutRes.error.message}`);
+          }
+          // Change state and re-rendering
+          setStore(raw);
+          setAvailable(Array.from(allAvailable));
+          reset(raw);
+        } else {
+          // TODO: find another way to do error handling
+          Utils.logMessage(`Failed to get store data. Error reason: ${res.error.status}->${res.error.message}`);
+        }
+      };
+
+      fetchStore();
+    }
+
+    if (mode === "new") {
+      (async () => {
+        let allAvailable = await fetchAvailable();
+        setAvailable(Array.from(allAvailable));
+      })();
+    }
+  }, [packageType, name, mode, reset]);
+
+  const updatePackageType = newPackageType => {
+    let newStore = store;
+    newStore.packageType = newPackageType;
+    newStore.constituents = [];
+    setStore(newStore);
+    reset(store);
+  };
+
+  const changelog = register("changelog");
+  return (
+    <form onSubmit={e => e.preventDefault()}>
+      <div className="control-panel">
+        <EditControlPanel mode={mode} store={store}
+          handleSubmit={handleSubmit} validate={trigger} changelog={changelog} />
+      </div>
+
+      <div className="content-panel">
+        <div className="fieldset-caption">Basics</div>
+        <div className="fieldset">
+          <div className="detail-field">
+            <label>Package Type:</label>
+            {
+              mode === 'new' ?
+                <PackageTypeSelect register={register} formErrors={errors} updatePackageType={updatePackageType}/> :
+                <span className="key">{store.packageType}</span>
+            }
+          </div>
+          <div className="detail-field">
+            <label>Name:</label>
+            {
+              mode === 'new' ?
+                <span>
+                  <input type="text" size="25" {...register("name", {required: true, maxLength: 50})}
+                  />{' '}
+                  {errors.name?.type === "required" && <span className="alert">Name is required</span>}
+                  {errors.name?.type === "maxLength" && <span className="alert">Name&apos;s length should be less than 50</span>}
+                </span> :
+                <span className="key">{store.name}</span>
+            }
+          </div>
+
+          <div className="detail-field">
+            <input type="checkbox" defaultChecked={!store.disabled} {...register("enabled")} />{' '}
+            <label>Enabled?</label>
+            {
+              store.disabled && store.disableExpiration &&
+              <span className="hint">Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}</span>
+            }
+          </div>
+          <div className="detail-field">
+            <input type="checkbox" defaultChecked={store.prepend_constituent} {...register("prepend_constituent")} />{' '}
+            <label>Prepend Constituents?</label>
+            <span className="hint">If enabled, all new constituents which are added not manually(like promotion) will be at the top of constituents list</span>
+          </div>
+
+          <div className="sub-fields">
+            <div className="detail-field">
+              <label>Disable Timeout:</label>
+              <input type="number" defaultValue={store.disable_timeout}
+                {...register("disable_timeout", {min: -1, max: 999999999})} />{' '}
+              {errors.disable_timeout && <span className="alert">Not a valid number</span>}<br />
+              <DisableTimeoutHint />
+            </div>
+          </div>
+
+          <div className="fieldset-caption">Description</div>
+          <div className="fieldset">
+            <textarea rows="3" className="text-description" {...register("description")}>
+              {store.description}
+            </textarea>
+          </div>
+          <div className="fieldset-caption">Constituents</div>
+          <EditConstituents store={store} currentAvailable={available}/>
+        </div>
+      </div>
+      {
+        // <ViewJsonDebugger enableDebug={enableDebug} storeJson={storeJson} rawJson={rawJson}
+      }
+    </form>
+  );
 }
+
+GroupEdit.propTypes = {
+  store: PropTypes.object,
+  location: PropTypes.object,
+  match: PropTypes.object
+};
diff --git a/src/main/webui/src/app/components/content/group/GroupEdit.test.jsx b/src/main/webui/src/app/components/content/group/GroupEdit.test.jsx
new file mode 100644
index 0000000..9c21f19
--- /dev/null
+++ b/src/main/webui/src/app/components/content/group/GroupEdit.test.jsx
@@ -0,0 +1,208 @@
+/* eslint-disable camelcase */
+/**
+ * Copyright (C) 2024 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import {MemoryRouter, Route, Routes} from 'react-router-dom';
+import {render, screen, cleanup, waitFor, within} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import fetchMock from "fetch-mock";
+import GroupEdit from "./GroupEdit.jsx";
+import {STORE_API_BASE_URL} from "../../ComponentConstants.js";
+
+beforeEach(() => {
+  fetchMock.restore();
+  fetchMock.mock(
+    "/api/stats/package-type/keys",
+    {status: 200, body: JSON.stringify(["maven", "npm", "generic-http"])}
+  );
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('GroupEdit tests', () => {
+  it("Verify GroupEdit for new mode", async () => {
+    const mockAvailable = {
+      "items": [
+        {
+          "packageType": "maven",
+          "name": "build_org-keycloak-keycloak-parent-4-x_20180515.1724",
+          "type": "group",
+          "key": "maven:group:build_org-keycloak-keycloak-parent-4-x_20180515.1724",
+          "storeKey": "maven:group:build_org-keycloak-keycloak-parent-4-x_20180515.1724",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/build_org-keycloak-keycloak-parent-4-x_20180515.1724"
+        },
+        {
+          "packageType": "maven",
+          "name": "build_org-keycloak-keycloak-parent-4-x_20180531.0218",
+          "type": "group",
+          "key": "maven:group:build_org-keycloak-keycloak-parent-4-x_20180531.0218",
+          "storeKey": "maven:group:build_org-keycloak-keycloak-parent-4-x_20180531.0218",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/build_org-keycloak-keycloak-parent-4-x_20180531.0218"
+        },
+        {
+          "packageType": "maven",
+          "name": "build_org-keycloak-keycloak-nodejs-auth-utils-3-xnpm_1-2-stage-4_20180104.1216",
+          "type": "group",
+          "key": "maven:group:build_org-keycloak-keycloak-nodejs-auth-utils-3-xnpm_1-2-stage-4_20180104.1216",
+          "storeKey": "maven:group:build_org-keycloak-keycloak-nodejs-auth-utils-3-xnpm_1-2-stage-4_20180104.1216",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/build_org-keycloak-keycloak-nodejs-auth-utils-3-xnpm_1-2-stage-4_20180104.1216"
+        },
+        {
+          "packageType": "maven",
+          "name": "build_vertx-infinispan-3-5-1_20180705.1313",
+          "type": "group",
+          "key": "maven:group:build_vertx-infinispan-3-5-1_20180705.1313",
+          "storeKey": "maven:group:build_vertx-infinispan-3-5-1_20180705.1313",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/build_vertx-infinispan-3-5-1_20180705.1313"
+        },
+        {
+          "packageType": "maven",
+          "name": "public",
+          "type": "group",
+          "key": "maven:group:public",
+          "storeKey": "maven:group:public",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/public"
+        }
+      ]
+    };
+    fetchMock.mock(`/api/stats/all-endpoints`, {status: 200, body: JSON.stringify(mockAvailable)});
+    render(<MemoryRouter initialEntries={["/group/new"]}>
+      <Routes>
+        <Route path="/group/new" element={<GroupEdit />} />
+      </Routes>
+    </MemoryRouter>);
+
+    await waitFor(() => {
+      // ListControl section testing
+      expect(screen.getByRole("button", {name: "Save"})).toBeInTheDocument();
+      expect(screen.getByRole("button", {name: "Cancel"})).toBeInTheDocument();
+
+      // Basic section testing
+      expect(screen.getByRole("option", {name: "maven"})).toBeInTheDocument();
+      expect(screen.getByRole("option", {name: "npm"})).toBeInTheDocument();
+      expect(screen.getByRole("option", {name: "generic-http"})).toBeInTheDocument();
+      expect(screen.getByRole("option", {name: ""}).selected).toBe(true);
+      expect(screen.getByRole("pkgTypeSel")).toHaveValue("");
+
+      expect(screen.getByText("Name:")).toBeInTheDocument();
+      let parentDiv = screen.getByText("Name:").closest("div");
+      expect(within(parentDiv).getByRole("textbox")).toHaveAttribute("name", "name");
+      expect(screen.getByText("Enabled?")).toBeInTheDocument();
+      parentDiv = screen.getByText("Enabled?").closest("div");
+      expect(within(parentDiv).getByRole("checkbox")).toHaveAttribute("name", "enabled");
+      expect(screen.getByText("Prepend Constituents?")).toBeInTheDocument();
+      parentDiv = screen.getByText("Prepend Constituents?").closest("div");
+      expect(within(parentDiv).getByRole("checkbox")).toHaveAttribute("name", "prepend_constituent");
+      expect(screen.getByText("Current:")).toBeInTheDocument();
+      expect(screen.getByText("Available:")).toBeInTheDocument();
+    });
+  });
+
+  it("Verify GroupEdit for edit mode", async () => {
+    const mockGroupStore = {
+      name: "local-deployment", type: "group", packageType: "maven",
+      key: "maven:group:local-deployment", disabled: false,
+      "allow_snapshots": true, "allow_releases": true,
+      description: "local deployment repo",
+      constituents: ["maven:remote:central", "maven:hosted:local-deployment"]
+    };
+    const mockAvailable = {
+      "items": [
+        {
+          "packageType": "maven",
+          "name": "build_org-keycloak-keycloak-parent-4-x_20180515.1724",
+          "type": "group",
+          "key": "maven:group:build_org-keycloak-keycloak-parent-4-x_20180515.1724",
+          "storeKey": "maven:group:build_org-keycloak-keycloak-parent-4-x_20180515.1724",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/build_org-keycloak-keycloak-parent-4-x_20180515.1724"
+        },
+        {
+          "packageType": "maven",
+          "name": "build_org-keycloak-keycloak-parent-4-x_20180531.0218",
+          "type": "group",
+          "key": "maven:group:build_org-keycloak-keycloak-parent-4-x_20180531.0218",
+          "storeKey": "maven:group:build_org-keycloak-keycloak-parent-4-x_20180531.0218",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/build_org-keycloak-keycloak-parent-4-x_20180531.0218"
+        },
+        {
+          "packageType": "maven",
+          "name": "build_org-keycloak-keycloak-nodejs-auth-utils-3-xnpm_1-2-stage-4_20180104.1216",
+          "type": "group",
+          "key": "maven:group:build_org-keycloak-keycloak-nodejs-auth-utils-3-xnpm_1-2-stage-4_20180104.1216",
+          "storeKey": "maven:group:build_org-keycloak-keycloak-nodejs-auth-utils-3-xnpm_1-2-stage-4_20180104.1216",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/build_org-keycloak-keycloak-nodejs-auth-utils-3-xnpm_1-2-stage-4_20180104.1216"
+        },
+        {
+          "packageType": "maven",
+          "name": "build_vertx-infinispan-3-5-1_20180705.1313",
+          "type": "group",
+          "key": "maven:group:build_vertx-infinispan-3-5-1_20180705.1313",
+          "storeKey": "maven:group:build_vertx-infinispan-3-5-1_20180705.1313",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/build_vertx-infinispan-3-5-1_20180705.1313"
+        },
+        {
+          "packageType": "maven",
+          "name": "public",
+          "type": "group",
+          "key": "maven:group:public",
+          "storeKey": "maven:group:public",
+          "storeType": "group",
+          "resource_uri": "http://localhost:4000/api/content/maven/group/public"
+        }
+      ]
+    };
+    const mockDisableTimeout = {
+      name: "Disable-Timeout", group: "maven:group:local-deployment#Disable-Timeout",
+      expiration: "2030-02-22T17:00:00.000Z"
+    };
+    fetchMock.mock(`${STORE_API_BASE_URL}/maven/group/local-deployment`, {status: 200, body: JSON.stringify(mockGroupStore)});
+    fetchMock.mock(`/api/stats/all-endpoints`, {status: 200, body: JSON.stringify(mockAvailable)});
+    fetchMock.mock("/api/admin/schedule/store/maven/group/local-deployment/disable-timeout", {status: 200, body: JSON.stringify(mockDisableTimeout)});
+    render(<MemoryRouter initialEntries={["/group/maven/edit/local-deployment"]}>
+      <Routes>
+        <Route path="/group/:packageType/edit/:name" element={<GroupEdit />} />
+      </Routes>
+    </MemoryRouter>);
+
+    await waitFor(() => {
+      expect(screen.getByText("Package Type:")).toBeInTheDocument();
+      expect(screen.getByText(mockGroupStore.packageType, {selector: "span"})).toBeInTheDocument();
+      expect(screen.getByText("Name:")).toBeInTheDocument();
+      expect(screen.getByText(mockGroupStore.name, {selector: "span"})).toBeInTheDocument();
+      expect(screen.getByText("Enabled?")).toBeInTheDocument();
+      let parentDiv = screen.getByText("Enabled?").closest("div");
+      expect(within(parentDiv).getByRole("checkbox")).toHaveAttribute("name", "enabled");
+      expect(screen.getByText("Prepend Constituents?")).toBeInTheDocument();
+      parentDiv = screen.getByText("Prepend Constituents?").closest("div");
+      expect(within(parentDiv).getByRole("checkbox")).toHaveAttribute("name", "prepend_constituent");
+      expect(screen.getByText("Current:")).toBeInTheDocument();
+      expect(screen.getByText("Available:")).toBeInTheDocument();
+
+    });
+  });
+});