diff --git a/editor.planx.uk/src/@planx/components/Checklist/Checklist.stories.tsx b/editor.planx.uk/src/@planx/components/Checklist/Checklist.stories.tsx
index daafdc024c..bc4d495353 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Checklist.stories.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Checklist.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import Checklist from "./Public";
+import Checklist from "./Public/Public";
 
 const meta = {
   title: "PlanX Components/Checklist",
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
deleted file mode 100644
index 0afc79ade7..0000000000
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
+++ /dev/null
@@ -1,429 +0,0 @@
-import Delete from "@mui/icons-material/Delete";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { FormikErrors, FormikValues, useFormik } from "formik";
-import adjust from "ramda/src/adjust";
-import compose from "ramda/src/compose";
-import remove from "ramda/src/remove";
-import React, { useEffect, useRef } from "react";
-import { FormikHookReturn } from "types";
-import ImgInput from "ui/editor/ImgInput/ImgInput";
-import InputGroup from "ui/editor/InputGroup";
-import ListManager from "ui/editor/ListManager/ListManager";
-import { ModalFooter } from "ui/editor/ModalFooter";
-import ModalSection from "ui/editor/ModalSection";
-import ModalSectionContent from "ui/editor/ModalSectionContent";
-import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
-import SimpleMenu from "ui/editor/SimpleMenu";
-import Input from "ui/shared/Input/Input";
-import InputRow from "ui/shared/InputRow";
-import InputRowItem from "ui/shared/InputRowItem";
-import { Switch } from "ui/shared/Switch";
-
-import { Option, parseBaseNodeData } from "../shared";
-import { FlagsSelect } from "../shared/FlagsSelect";
-import { ICONS } from "../shared/icons";
-import type { Checklist, Group } from "./model";
-import { toggleExpandableChecklist } from "./model";
-import { ChecklistProps, OptionEditorProps } from "./types";
-
-const OptionEditor: React.FC<OptionEditorProps> = (props) => {
-  return (
-    <div style={{ width: "100%" }}>
-      <InputRow>
-        {props.value.id ? (
-          <input type="hidden" value={props.value.id} readOnly />
-        ) : null}
-        <InputRowItem width="200%">
-          <Input
-            required
-            format="bold"
-            multiline
-            value={props.value.data.text || ""}
-            onChange={(ev) => {
-              props.onChange({
-                ...props.value,
-                data: {
-                  ...props.value.data,
-                  text: ev.target.value,
-                },
-              });
-            }}
-            placeholder="Option"
-          />
-        </InputRowItem>
-
-        <ImgInput
-          img={props.value.data.img}
-          onChange={(img) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                img,
-              },
-            });
-          }}
-        />
-
-        {typeof props.index !== "undefined" &&
-          props.groups &&
-          props.onMoveToGroup && (
-            <SimpleMenu
-              items={props.groups.map((group, groupIndex) => ({
-                label: `Move to ${group || `group ${groupIndex}`}`,
-                onClick: () => {
-                  props.onMoveToGroup &&
-                    typeof props.index === "number" &&
-                    props.onMoveToGroup(props.index, groupIndex);
-                },
-                disabled: groupIndex === props.groupIndex,
-              }))}
-            />
-          )}
-      </InputRow>
-
-      {props.showValueField && (
-        <InputRow>
-          <Input
-            format="data"
-            value={props.value.data.val || ""}
-            placeholder="Data Value"
-            onChange={(ev) => {
-              props.onChange({
-                ...props.value,
-                data: {
-                  ...props.value.data,
-                  val: ev.target.value,
-                },
-              });
-            }}
-          />
-        </InputRow>
-      )}
-
-      <FlagsSelect
-        value={
-          Array.isArray(props.value.data.flag)
-            ? props.value.data.flag
-            : [props.value.data.flag]
-        }
-        onChange={(ev) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              flag: ev,
-            },
-          });
-        }}
-      />
-    </div>
-  );
-};
-
-const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
-  return (
-    <ModalSectionContent subtitle="Options">
-      {formik.values.groupedOptions ? (
-        <Box>
-          {formik.values.groupedOptions.map(
-            (groupedOption: Group<Option>, groupIndex: number) => (
-              <Box key={groupIndex} mt={groupIndex === 0 ? 0 : 4}>
-                <Box display="flex" pb={1}>
-                  <InputRow>
-                    <Input
-                      required
-                      format="bold"
-                      name={`groupedOptions[${groupIndex}].title`}
-                      value={groupedOption.title}
-                      placeholder="Section Title"
-                      onChange={formik.handleChange}
-                    />
-                  </InputRow>
-                  <Box flex={0}>
-                    <IconButton
-                      title="Delete group"
-                      aria-label="Delete group"
-                      onClick={() => {
-                        formik.setFieldValue(
-                          `groupedOptions`,
-                          remove(groupIndex, 1, formik.values.groupedOptions),
-                        );
-                      }}
-                      size="large"
-                    >
-                      <Delete />
-                    </IconButton>
-                  </Box>
-                </Box>
-                <Box pl={{ md: 2 }}>
-                  <ListManager
-                    values={groupedOption.children}
-                    onChange={(newOptions) => {
-                      formik.setFieldValue(
-                        `groupedOptions[${groupIndex}].children`,
-                        newOptions,
-                      );
-                    }}
-                    newValue={() =>
-                      ({
-                        data: {
-                          text: "",
-                          description: "",
-                          val: "",
-                        },
-                      }) as Option
-                    }
-                    newValueLabel="add new option"
-                    Editor={OptionEditor}
-                    editorExtraProps={{
-                      groupIndex,
-                      showValueField: !!formik.values.fn,
-                      onMoveToGroup: (
-                        movedItemIndex: number,
-                        moveToGroupIndex: number,
-                      ) => {
-                        const item = groupedOption.children[movedItemIndex];
-                        formik.setFieldValue(
-                          "groupedOptions",
-                          compose(
-                            adjust(
-                              moveToGroupIndex,
-                              (option: Group<Option>) => ({
-                                ...option,
-                                children: [...option.children, item],
-                              }),
-                            ),
-                            adjust(groupIndex, (option: Group<Option>) => ({
-                              ...option,
-                              children: remove(
-                                movedItemIndex,
-                                1,
-                                option.children,
-                              ),
-                            })),
-                          )(formik.values.groupedOptions),
-                        );
-                      },
-                      groups: formik.values.groupedOptions.map(
-                        (opt: Group<Option>) => opt.title,
-                      ),
-                    }}
-                  />
-                </Box>
-              </Box>
-            ),
-          )}
-          <Box mt={1}>
-            <Button
-              size="large"
-              onClick={() => {
-                formik.setFieldValue(`groupedOptions`, [
-                  ...formik.values.groupedOptions,
-                  {
-                    title: "",
-                    children: [],
-                  },
-                ]);
-              }}
-            >
-              add new group
-            </Button>
-          </Box>
-        </Box>
-      ) : (
-        <ListManager
-          values={formik.values.options || []}
-          onChange={(newOptions) => {
-            formik.setFieldValue("options", newOptions);
-          }}
-          newValueLabel="add new option"
-          newValue={() =>
-            ({
-              data: {
-                text: "",
-                description: "",
-                val: "",
-              },
-            }) as Option
-          }
-          Editor={OptionEditor}
-          editorExtraProps={{ showValueField: !!formik.values.fn }}
-        />
-      )}
-    </ModalSectionContent>
-  );
-};
-
-export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
-  const type = TYPES.Checklist;
-
-  const formik = useFormik<Checklist>({
-    initialValues: {
-      allRequired: props.node?.data?.allRequired || false,
-      neverAutoAnswer: props.node?.data?.neverAutoAnswer || false,
-      description: props.node?.data?.description || "",
-      fn: props.node?.data?.fn || "",
-      groupedOptions: props.groupedOptions,
-      img: props.node?.data?.img || "",
-      options: props.options,
-      text: props.node?.data?.text || "",
-      ...parseBaseNodeData(props.node?.data),
-    },
-    onSubmit: ({ options, groupedOptions, ...values }) => {
-      const sourceOptions = options?.length
-        ? options
-        : groupedOptions?.flatMap((group) => group.children);
-
-      const filteredOptions = (sourceOptions || []).filter(
-        (option) => option.data.text,
-      );
-
-      const processedOptions = filteredOptions.map((option) => ({
-        ...option,
-        id: option.id || undefined,
-        type: TYPES.Answer,
-      }));
-
-      if (props.handleSubmit) {
-        props.handleSubmit(
-          {
-            type,
-            data: {
-              ...values,
-              ...(groupedOptions
-                ? {
-                    categories: groupedOptions.map((group) => ({
-                      title: group.title,
-                      count: group.children.length,
-                    })),
-                  }
-                : {
-                    categories: undefined,
-                  }),
-            },
-          },
-          processedOptions,
-        );
-      } else {
-        alert(JSON.stringify({ type, ...values, options }, null, 2));
-      }
-    },
-    validate: ({ options, ...values }) => {
-      const errors: FormikErrors<FormikValues> = {};
-      if (values.fn && !options?.some((option) => option.data.val)) {
-        errors.fn =
-          "At least one option must set a data value when the checklist has a data field";
-      }
-      return errors;
-    },
-  });
-
-  const focusRef = useRef<HTMLInputElement | null>(null);
-
-  // horrible hack to remove focus from Rich Text Editor
-  useEffect(() => {
-    setTimeout(() => {
-      (document.activeElement as any).blur();
-      focusRef.current?.focus();
-    }, 50);
-  }, []);
-
-  return (
-    <form onSubmit={formik.handleSubmit} id="modal">
-      <ModalSection>
-        <ModalSectionContent title="Checklist" Icon={ICONS[type]}>
-          <InputGroup>
-            <InputRow>
-              <Input
-                format="large"
-                name="text"
-                value={formik.values.text}
-                placeholder="Text"
-                onChange={formik.handleChange}
-                inputRef={focusRef}
-                required
-              />
-
-              <ImgInput
-                img={formik.values.img}
-                onChange={(newUrl) => {
-                  formik.setFieldValue("img", newUrl);
-                }}
-              />
-            </InputRow>
-
-            <InputRow>
-              <RichTextInput
-                name="description"
-                value={formik.values.description}
-                placeholder="Description"
-                onChange={formik.handleChange}
-              />
-            </InputRow>
-
-            <InputRow>
-              <Input
-                format="data"
-                name="fn"
-                value={formik.values.fn}
-                placeholder="Data Field"
-                onChange={formik.handleChange}
-                error={Boolean(formik.errors?.fn)}
-                errorMessage={formik.errors?.fn}
-              />
-            </InputRow>
-            <InputRow>
-              <Switch
-                checked={!!formik.values.groupedOptions}
-                onChange={() =>
-                  formik.setValues({
-                    ...formik.values,
-                    ...toggleExpandableChecklist({
-                      options: formik.values.options,
-                      groupedOptions: formik.values.groupedOptions,
-                    }),
-                  })
-                }
-                label="Expandable"
-              />
-            </InputRow>
-            <InputRow>
-              <Switch
-                checked={formik.values.allRequired}
-                onChange={() =>
-                  formik.setFieldValue(
-                    "allRequired",
-                    !formik.values.allRequired,
-                  )
-                }
-                label="All required"
-              />
-            </InputRow>
-            <InputRow>
-              <Switch
-                checked={formik.values.neverAutoAnswer}
-                onChange={() =>
-                  formik.setFieldValue(
-                    "neverAutoAnswer",
-                    !formik.values.neverAutoAnswer,
-                  )
-                }
-                label="Always put to user (forgo automation)"
-              />
-            </InputRow>
-          </InputGroup>
-        </ModalSectionContent>
-
-        <Options formik={formik} />
-      </ModalSection>
-
-      <ModalFooter formik={formik} />
-    </form>
-  );
-};
-
-export default ChecklistComponent;
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
new file mode 100644
index 0000000000..49c592a064
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
@@ -0,0 +1,189 @@
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { FormikErrors, FormikValues, useFormik } from "formik";
+import React, { useEffect, useRef } from "react";
+import ImgInput from "ui/editor/ImgInput/ImgInput";
+import InputGroup from "ui/editor/InputGroup";
+import { ModalFooter } from "ui/editor/ModalFooter";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+import { Switch } from "ui/shared/Switch";
+
+import { parseBaseNodeData } from "../../shared";
+import { ICONS } from "../../shared/icons";
+import type { Checklist } from "../model";
+import { toggleExpandableChecklist } from "../model";
+import { ChecklistProps } from "../types";
+import { Options } from "./Options";
+
+export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
+  const type = TYPES.Checklist;
+
+  const formik = useFormik<Checklist>({
+    initialValues: {
+      allRequired: props.node?.data?.allRequired || false,
+      neverAutoAnswer: props.node?.data?.neverAutoAnswer || false,
+      description: props.node?.data?.description || "",
+      fn: props.node?.data?.fn || "",
+      groupedOptions: props.groupedOptions,
+      img: props.node?.data?.img || "",
+      options: props.options,
+      text: props.node?.data?.text || "",
+      ...parseBaseNodeData(props.node?.data),
+    },
+    onSubmit: ({ options, groupedOptions, ...values }) => {
+      const sourceOptions = options?.length
+        ? options
+        : groupedOptions?.flatMap((group) => group.children);
+
+      const filteredOptions = (sourceOptions || []).filter(
+        (option) => option.data.text,
+      );
+
+      const processedOptions = filteredOptions.map((option) => ({
+        ...option,
+        id: option.id || undefined,
+        type: TYPES.Answer,
+      }));
+
+      if (props.handleSubmit) {
+        props.handleSubmit(
+          {
+            type,
+            data: {
+              ...values,
+              ...(groupedOptions
+                ? {
+                    categories: groupedOptions.map((group) => ({
+                      title: group.title,
+                      count: group.children.length,
+                    })),
+                  }
+                : {
+                    categories: undefined,
+                  }),
+            },
+          },
+          processedOptions,
+        );
+      } else {
+        alert(JSON.stringify({ type, ...values, options }, null, 2));
+      }
+    },
+    validate: ({ options, ...values }) => {
+      const errors: FormikErrors<FormikValues> = {};
+      if (values.fn && !options?.some((option) => option.data.val)) {
+        errors.fn =
+          "At least one option must set a data value when the checklist has a data field";
+      }
+      return errors;
+    },
+  });
+
+  const focusRef = useRef<HTMLInputElement | null>(null);
+
+  // horrible hack to remove focus from Rich Text Editor
+  useEffect(() => {
+    setTimeout(() => {
+      (document.activeElement as any).blur();
+      focusRef.current?.focus();
+    }, 50);
+  }, []);
+
+  return (
+    <form onSubmit={formik.handleSubmit} id="modal">
+      <ModalSection>
+        <ModalSectionContent title="Checklist" Icon={ICONS[type]}>
+          <InputGroup>
+            <InputRow>
+              <Input
+                format="large"
+                name="text"
+                value={formik.values.text}
+                placeholder="Text"
+                onChange={formik.handleChange}
+                inputRef={focusRef}
+                required
+              />
+
+              <ImgInput
+                img={formik.values.img}
+                onChange={(newUrl) => {
+                  formik.setFieldValue("img", newUrl);
+                }}
+              />
+            </InputRow>
+
+            <InputRow>
+              <RichTextInput
+                name="description"
+                value={formik.values.description}
+                placeholder="Description"
+                onChange={formik.handleChange}
+              />
+            </InputRow>
+
+            <InputRow>
+              <Input
+                format="data"
+                name="fn"
+                value={formik.values.fn}
+                placeholder="Data Field"
+                onChange={formik.handleChange}
+                error={Boolean(formik.errors?.fn)}
+                errorMessage={formik.errors?.fn}
+              />
+            </InputRow>
+            <InputRow>
+              <Switch
+                checked={!!formik.values.groupedOptions}
+                onChange={() =>
+                  formik.setValues({
+                    ...formik.values,
+                    ...toggleExpandableChecklist({
+                      options: formik.values.options,
+                      groupedOptions: formik.values.groupedOptions,
+                    }),
+                  })
+                }
+                label="Expandable"
+              />
+            </InputRow>
+            <InputRow>
+              <Switch
+                checked={formik.values.allRequired}
+                onChange={() =>
+                  formik.setFieldValue(
+                    "allRequired",
+                    !formik.values.allRequired,
+                  )
+                }
+                label="All required"
+              />
+            </InputRow>
+            <InputRow>
+              <Switch
+                checked={formik.values.neverAutoAnswer}
+                onChange={() =>
+                  formik.setFieldValue(
+                    "neverAutoAnswer",
+                    !formik.values.neverAutoAnswer,
+                  )
+                }
+                label="Always put to user (forgo automation)"
+              />
+            </InputRow>
+          </InputGroup>
+        </ModalSectionContent>
+
+        <Options formik={formik} />
+      </ModalSection>
+
+      <ModalFooter formik={formik} />
+    </form>
+  );
+};
+
+export default ChecklistComponent;
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
new file mode 100644
index 0000000000..0080d90a92
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
@@ -0,0 +1,151 @@
+import Delete from "@mui/icons-material/Delete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import adjust from "ramda/src/adjust";
+import compose from "ramda/src/compose";
+import remove from "ramda/src/remove";
+import React from "react";
+import { FormikHookReturn } from "types";
+import ListManager from "ui/editor/ListManager/ListManager";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+
+import { Option } from "../../shared";
+import type { Group } from "../model";
+import { OptionEditor } from "./OptionsEditor";
+
+export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
+  return (
+    <ModalSectionContent subtitle="Options">
+      {formik.values.groupedOptions ? (
+        <Box>
+          {formik.values.groupedOptions.map(
+            (groupedOption: Group<Option>, groupIndex: number) => (
+              <Box key={groupIndex} mt={groupIndex === 0 ? 0 : 4}>
+                <Box display="flex" pb={1}>
+                  <InputRow>
+                    <Input
+                      required
+                      format="bold"
+                      name={`groupedOptions[${groupIndex}].title`}
+                      value={groupedOption.title}
+                      placeholder="Section Title"
+                      onChange={formik.handleChange}
+                    />
+                  </InputRow>
+                  <Box flex={0}>
+                    <IconButton
+                      title="Delete group"
+                      aria-label="Delete group"
+                      onClick={() => {
+                        formik.setFieldValue(
+                          `groupedOptions`,
+                          remove(groupIndex, 1, formik.values.groupedOptions),
+                        );
+                      }}
+                      size="large"
+                    >
+                      <Delete />
+                    </IconButton>
+                  </Box>
+                </Box>
+                <Box pl={{ md: 2 }}>
+                  <ListManager
+                    values={groupedOption.children}
+                    onChange={(newOptions) => {
+                      formik.setFieldValue(
+                        `groupedOptions[${groupIndex}].children`,
+                        newOptions,
+                      );
+                    }}
+                    newValue={() =>
+                      ({
+                        data: {
+                          text: "",
+                          description: "",
+                          val: "",
+                        },
+                      }) as Option
+                    }
+                    newValueLabel="add new option"
+                    Editor={OptionEditor}
+                    editorExtraProps={{
+                      groupIndex,
+                      showValueField: !!formik.values.fn,
+                      onMoveToGroup: (
+                        movedItemIndex: number,
+                        moveToGroupIndex: number,
+                      ) => {
+                        const item = groupedOption.children[movedItemIndex];
+                        formik.setFieldValue(
+                          "groupedOptions",
+                          compose(
+                            adjust(
+                              moveToGroupIndex,
+                              (option: Group<Option>) => ({
+                                ...option,
+                                children: [...option.children, item],
+                              }),
+                            ),
+                            adjust(groupIndex, (option: Group<Option>) => ({
+                              ...option,
+                              children: remove(
+                                movedItemIndex,
+                                1,
+                                option.children,
+                              ),
+                            })),
+                          )(formik.values.groupedOptions),
+                        );
+                      },
+                      groups: formik.values.groupedOptions.map(
+                        (opt: Group<Option>) => opt.title,
+                      ),
+                    }}
+                  />
+                </Box>
+              </Box>
+            ),
+          )}
+          <Box mt={1}>
+            <Button
+              size="large"
+              onClick={() => {
+                formik.setFieldValue(`groupedOptions`, [
+                  ...formik.values.groupedOptions,
+                  {
+                    title: "",
+                    children: [],
+                  },
+                ]);
+              }}
+            >
+              add new group
+            </Button>
+          </Box>
+        </Box>
+      ) : (
+        <ListManager
+          values={formik.values.options || []}
+          onChange={(newOptions) => {
+            formik.setFieldValue("options", newOptions);
+          }}
+          newValueLabel="add new option"
+          newValue={() =>
+            ({
+              data: {
+                text: "",
+                description: "",
+                val: "",
+              },
+            }) as Option
+          }
+          Editor={OptionEditor}
+          editorExtraProps={{ showValueField: !!formik.values.fn }}
+        />
+      )}
+    </ModalSectionContent>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
new file mode 100644
index 0000000000..67bff66212
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
@@ -0,0 +1,104 @@
+import React from "react";
+import ImgInput from "ui/editor/ImgInput/ImgInput";
+import SimpleMenu from "ui/editor/SimpleMenu";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+import InputRowItem from "ui/shared/InputRowItem";
+
+import { FlagsSelect } from "../../shared/FlagsSelect";
+import { OptionEditorProps } from "../types";
+
+export const OptionEditor: React.FC<OptionEditorProps> = (props) => {
+  return (
+    <div style={{ width: "100%" }}>
+      <InputRow>
+        {props.value.id ? (
+          <input type="hidden" value={props.value.id} readOnly />
+        ) : null}
+        <InputRowItem width="200%">
+          <Input
+            required
+            format="bold"
+            multiline
+            value={props.value.data.text || ""}
+            onChange={(ev) => {
+              props.onChange({
+                ...props.value,
+                data: {
+                  ...props.value.data,
+                  text: ev.target.value,
+                },
+              });
+            }}
+            placeholder="Option"
+          />
+        </InputRowItem>
+
+        <ImgInput
+          img={props.value.data.img}
+          onChange={(img) => {
+            props.onChange({
+              ...props.value,
+              data: {
+                ...props.value.data,
+                img,
+              },
+            });
+          }}
+        />
+
+        {typeof props.index !== "undefined" &&
+          props.groups &&
+          props.onMoveToGroup && (
+            <SimpleMenu
+              items={props.groups.map((group, groupIndex) => ({
+                label: `Move to ${group || `group ${groupIndex}`}`,
+                onClick: () => {
+                  props.onMoveToGroup &&
+                    typeof props.index === "number" &&
+                    props.onMoveToGroup(props.index, groupIndex);
+                },
+                disabled: groupIndex === props.groupIndex,
+              }))}
+            />
+          )}
+      </InputRow>
+
+      {props.showValueField && (
+        <InputRow>
+          <Input
+            format="data"
+            value={props.value.data.val || ""}
+            placeholder="Data Value"
+            onChange={(ev) => {
+              props.onChange({
+                ...props.value,
+                data: {
+                  ...props.value.data,
+                  val: ev.target.value,
+                },
+              });
+            }}
+          />
+        </InputRow>
+      )}
+
+      <FlagsSelect
+        value={
+          Array.isArray(props.value.data.flag)
+            ? props.value.data.flag
+            : [props.value.data.flag]
+        }
+        onChange={(ev) => {
+          props.onChange({
+            ...props.value,
+            data: {
+              ...props.value.data,
+              flag: ev,
+            },
+          });
+        }}
+      />
+    </div>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/AutoAnsweredChecklist.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/AutoAnsweredChecklist.tsx
new file mode 100644
index 0000000000..1bb8c1ae1a
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/AutoAnsweredChecklist.tsx
@@ -0,0 +1,17 @@
+import React, { useEffect } from "react";
+
+import { Props } from "../types";
+
+// An auto-answered Checklist won't be seen by the user, but still leaves a breadcrumb
+export const AutoAnsweredChecklist: React.FC<
+  Props & { answerIds: string[] }
+> = (props) => {
+  useEffect(() => {
+    props.handleSubmit?.({
+      answers: props.answerIds,
+      auto: true,
+    });
+  }, [props]);
+
+  return null;
+};
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
similarity index 68%
rename from editor.planx.uk/src/@planx/components/Checklist/Public.tsx
rename to editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
index c52f64c15b..23d9bdd2e4 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/Public.tsx
@@ -2,18 +2,16 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import { visuallyHidden } from "@mui/utils";
 import {
-  type Checklist,
   checklistValidationSchema,
   getFlatOptions,
   getLayout,
-  type Group,
 } from "@planx/components/Checklist/model";
 import ImageButton from "@planx/components/shared/Buttons/ImageButton";
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { getIn, useFormik } from "formik";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { ExpandableList, ExpandableListItem } from "ui/public/ExpandableList";
 import FormWrapper from "ui/public/FormWrapper";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
@@ -21,10 +19,9 @@ import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 import { object } from "yup";
 
-import { Option } from "../shared";
-import type { PublicProps } from "../shared/types";
-
-export type Props = PublicProps<Checklist>;
+import { Props } from "../types";
+import { AutoAnsweredChecklist } from "./AutoAnsweredChecklist";
+import { getInitialExpandedGroups, toggleInArray } from "./helpers";
 
 export enum ChecklistLayout {
   Basic,
@@ -32,12 +29,6 @@ export enum ChecklistLayout {
   Images,
 }
 
-function toggleInArray<T>(value: T, arr: Array<T>): Array<T> {
-  return arr.includes(value)
-    ? arr.filter((val) => val !== value)
-    : [...arr, value];
-}
-
 const ChecklistComponent: React.FC<Props> = (props) => {
   const autoAnswerableOptions = useStore(
     (state) => state.autoAnswerableOptions,
@@ -58,20 +49,6 @@ const ChecklistComponent: React.FC<Props> = (props) => {
   return <VisibleChecklist {...props} />;
 };
 
-// An auto-answered Checklist won't be seen by the user, but still leaves a breadcrumb
-const AutoAnsweredChecklist: React.FC<Props & { answerIds: string[] }> = (
-  props,
-) => {
-  useEffect(() => {
-    props.handleSubmit?.({
-      answers: props.answerIds,
-      auto: true,
-    });
-  }, []);
-
-  return null;
-};
-
 const VisibleChecklist: React.FC<Props> = (props) => {
   const {
     description = "",
@@ -101,7 +78,10 @@ const VisibleChecklist: React.FC<Props> = (props) => {
     }),
   });
 
-  const initialExpandedGroups = getInitialExpandedGroups();
+  const initialExpandedGroups = getInitialExpandedGroups(
+    groupedOptions,
+    previouslySubmittedData,
+  );
 
   const [expandedGroups, setExpandedGroups] = useState<Array<number>>(
     initialExpandedGroups,
@@ -111,13 +91,9 @@ const VisibleChecklist: React.FC<Props> = (props) => {
   const flatOptions = getFlatOptions({ options, groupedOptions });
 
   const changeCheckbox = (id: string) => (_checked: any) => {
-    let newCheckedIds;
-
-    if (formik.values.checked.includes(id)) {
-      newCheckedIds = formik.values.checked.filter((x) => x !== id);
-    } else {
-      newCheckedIds = [...formik.values.checked, id];
-    }
+    const newCheckedIds = formik.values.checked.includes(id)
+      ? formik.values.checked.filter((x) => x !== id)
+      : [...formik.values.checked, id];
 
     formik.setFieldValue(
       "checked",
@@ -146,38 +122,37 @@ const VisibleChecklist: React.FC<Props> = (props) => {
             component="fieldset"
           >
             <legend style={visuallyHidden}>{text}</legend>
-            {options &&
-              options.map((option) =>
-                layout === ChecklistLayout.Basic ? (
-                  <FormWrapper key={option.id}>
-                    <Grid item xs={12} key={option.data.text}>
-                      <ChecklistItem
-                        onChange={changeCheckbox(option.id)}
-                        label={option.data.text}
-                        id={option.id}
-                        checked={formik.values.checked.includes(option.id)}
-                      />
-                    </Grid>
-                  </FormWrapper>
-                ) : (
-                  <Grid
-                    item
-                    xs={12}
-                    sm={6}
-                    contentWrap={4}
-                    key={option.data.text}
-                  >
-                    <ImageButton
-                      title={option.data.text}
+            {options?.map((option) =>
+              layout === ChecklistLayout.Basic ? (
+                <FormWrapper key={option.id}>
+                  <Grid item xs={12} key={option.data.text}>
+                    <ChecklistItem
+                      onChange={changeCheckbox(option.id)}
+                      label={option.data.text}
                       id={option.id}
-                      img={option.data.img}
-                      selected={formik.values.checked.includes(option.id)}
-                      onClick={changeCheckbox(option.id)}
-                      checkbox
+                      checked={formik.values.checked.includes(option.id)}
                     />
                   </Grid>
-                ),
-              )}
+                </FormWrapper>
+              ) : (
+                <Grid
+                  item
+                  xs={12}
+                  sm={6}
+                  contentWrap={4}
+                  key={option.data.text}
+                >
+                  <ImageButton
+                    title={option.data.text}
+                    id={option.id}
+                    img={option.data.img}
+                    selected={formik.values.checked.includes(option.id)}
+                    onClick={changeCheckbox(option.id)}
+                    checkbox
+                  />
+                </Grid>
+              ),
+            )}
 
             {groupedOptions && (
               <FormWrapper>
@@ -231,21 +206,5 @@ const VisibleChecklist: React.FC<Props> = (props) => {
       </FullWidthWrapper>
     </Card>
   );
-
-  function getInitialExpandedGroups() {
-    return (groupedOptions ?? ([] as Group<Option>[])).reduce(
-      (acc, group, index) =>
-        groupHasOptionSelected(group, previouslySubmittedData?.answers ?? [])
-          ? [...acc, index]
-          : acc,
-      [] as number[],
-    );
-
-    function groupHasOptionSelected(group: Group<Option>, answers: string[]) {
-      return group.children.some((child) =>
-        answers.some((id) => child.id === id),
-      );
-    }
-  }
 };
 export default ChecklistComponent;
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts b/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
new file mode 100644
index 0000000000..7a31a32932
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/helpers.ts
@@ -0,0 +1,30 @@
+import { type Group } from "@planx/components/Checklist/model";
+import { Store } from "pages/FlowEditor/lib/store";
+
+import { Option } from "../../shared";
+
+export function toggleInArray<T>(value: T, arr: Array<T>): Array<T> {
+  return arr.includes(value)
+    ? arr.filter((val) => val !== value)
+    : [...arr, value];
+}
+
+export function groupHasOptionSelected(
+  group: Group<Option>,
+  answers: string[],
+) {
+  return group.children.some((child) => answers.some((id) => child.id === id));
+}
+
+export function getInitialExpandedGroups(
+  groupedOptions?: Array<Group<Option>>,
+  previouslySubmittedData?: Store.UserData,
+) {
+  return (groupedOptions ?? ([] as Group<Option>[])).reduce(
+    (acc, group, index) =>
+      groupHasOptionSelected(group, previouslySubmittedData?.answers ?? [])
+        ? [...acc, index]
+        : acc,
+    [] as number[],
+  );
+}
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public.test.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
similarity index 78%
rename from editor.planx.uk/src/@planx/components/Checklist/Public.test.tsx
rename to editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
index 36ce45410f..f77d90ae1b 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public.test.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/Public.test.tsx
@@ -8,124 +8,8 @@ import { setup } from "testUtils";
 import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
-import { Option } from "../shared";
-import { Group } from "./model";
-import Checklist, { ChecklistLayout } from "./Public";
-
-const options: {
-  [key in ChecklistLayout]?: Array<Option>;
-} = {
-  [ChecklistLayout.Basic]: [
-    {
-      id: "flat_id",
-      data: {
-        text: "Flat",
-      },
-    },
-    {
-      id: "caravan_id",
-      data: {
-        text: "Caravan",
-      },
-    },
-    {
-      id: "house_id",
-      data: {
-        text: "House",
-      },
-    },
-    {
-      id: "spaceship_id",
-      data: {
-        text: "Spaceship",
-      },
-    },
-  ],
-  [ChecklistLayout.Images]: [
-    {
-      id: "flat_id",
-      data: {
-        text: "Flat",
-        img: "flat.jpg",
-      },
-    },
-    {
-      id: "caravan_id",
-      data: {
-        text: "Caravan",
-        img: "caravan.jpg",
-      },
-    },
-    {
-      id: "house_id",
-      data: {
-        text: "House",
-        img: "house.jpg",
-      },
-    },
-    {
-      id: "spaceship_id",
-      data: {
-        text: "Spaceship",
-        img: "spaceship.jpg",
-      },
-    },
-  ],
-};
-
-const groupedOptions: Array<Group<Option>> = [
-  {
-    title: "Section 1",
-    children: [
-      {
-        id: "S1_Option1",
-        data: {
-          text: "S1 Option1",
-        },
-      },
-      {
-        id: "S1_Option2",
-        data: {
-          text: "S1 Option2",
-        },
-      },
-    ],
-  },
-  {
-    title: "Section 2",
-    children: [
-      {
-        id: "S2_Option1",
-        data: {
-          text: "S2 Option1",
-        },
-      },
-      {
-        id: "S2_Option2",
-        data: {
-          text: "S2 Option2",
-        },
-      },
-    ],
-  },
-  {
-    title: "Section 3",
-    children: [
-      {
-        id: "S3_Option1",
-        data: {
-          text: "S3 Option1",
-        },
-      },
-      {
-        id: "S3_Option2",
-        data: {
-          text: "S3 Option2",
-        },
-      },
-    ],
-  },
-];
+import Checklist, { ChecklistLayout } from "../Public";
+import { groupedOptions, options } from "./mockOptions";
 
 describe("Checklist Component - Grouped Layout", () => {
   it("answers are submitted in order they were supplied", async () => {
@@ -201,7 +85,7 @@ describe("Checklist Component - Grouped Layout", () => {
         groupedOptions={groupedOptions}
       />,
     );
-    const [section1Button, section2Button, section3Button, _continueButton] =
+    const [section1Button, section2Button, section3Button] =
       screen.getAllByRole("button");
 
     // All accordion sections begin collapsed
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts
new file mode 100644
index 0000000000..520ee04739
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public/tests/mockOptions.ts
@@ -0,0 +1,118 @@
+import { Option } from "@planx/components/shared";
+
+import { Group } from "../../model";
+import { ChecklistLayout } from "../Public";
+
+export const options: {
+  [key in ChecklistLayout]?: Array<Option>;
+} = {
+  [ChecklistLayout.Basic]: [
+    {
+      id: "flat_id",
+      data: {
+        text: "Flat",
+      },
+    },
+    {
+      id: "caravan_id",
+      data: {
+        text: "Caravan",
+      },
+    },
+    {
+      id: "house_id",
+      data: {
+        text: "House",
+      },
+    },
+    {
+      id: "spaceship_id",
+      data: {
+        text: "Spaceship",
+      },
+    },
+  ],
+  [ChecklistLayout.Images]: [
+    {
+      id: "flat_id",
+      data: {
+        text: "Flat",
+        img: "flat.jpg",
+      },
+    },
+    {
+      id: "caravan_id",
+      data: {
+        text: "Caravan",
+        img: "caravan.jpg",
+      },
+    },
+    {
+      id: "house_id",
+      data: {
+        text: "House",
+        img: "house.jpg",
+      },
+    },
+    {
+      id: "spaceship_id",
+      data: {
+        text: "Spaceship",
+        img: "spaceship.jpg",
+      },
+    },
+  ],
+};
+export const groupedOptions: Array<Group<Option>> = [
+  {
+    title: "Section 1",
+    children: [
+      {
+        id: "S1_Option1",
+        data: {
+          text: "S1 Option1",
+        },
+      },
+      {
+        id: "S1_Option2",
+        data: {
+          text: "S1 Option2",
+        },
+      },
+    ],
+  },
+  {
+    title: "Section 2",
+    children: [
+      {
+        id: "S2_Option1",
+        data: {
+          text: "S2 Option1",
+        },
+      },
+      {
+        id: "S2_Option2",
+        data: {
+          text: "S2 Option2",
+        },
+      },
+    ],
+  },
+  {
+    title: "Section 3",
+    children: [
+      {
+        id: "S3_Option1",
+        data: {
+          text: "S3 Option1",
+        },
+      },
+      {
+        id: "S3_Option2",
+        data: {
+          text: "S3 Option2",
+        },
+      },
+    ],
+  },
+];
diff --git a/editor.planx.uk/src/@planx/components/Checklist/model.ts b/editor.planx.uk/src/@planx/components/Checklist/model.ts
index 887bdd4cdc..1ac40a10ee 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/model.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/model.ts
@@ -1,7 +1,7 @@
 import { array } from "yup";
 
 import { BaseNodeData, Option } from "../shared";
-import { ChecklistLayout } from "./Public";
+import { ChecklistLayout } from "./Public/Public";
 
 export interface Group<T> {
   title: string;
diff --git a/editor.planx.uk/src/@planx/components/Checklist/types.ts b/editor.planx.uk/src/@planx/components/Checklist/types.ts
index 9078812768..cdebd204ad 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/types.ts
+++ b/editor.planx.uk/src/@planx/components/Checklist/types.ts
@@ -1,4 +1,5 @@
 import { BaseNodeData, Option } from "../shared";
+import { PublicProps } from "../shared/types";
 import type { Category, Checklist } from "./model";
 
 export interface ChecklistProps extends Checklist {
@@ -25,3 +26,5 @@ export interface OptionEditorProps {
   onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
   showValueField?: boolean;
 }
+
+export type Props = PublicProps<Checklist>;
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts b/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts
index dbd217ba85..e04f9b28c0 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts
@@ -1,7 +1,7 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import AddressInput from "@planx/components/AddressInput/Editor";
 import Calculate from "@planx/components/Calculate/Editor";
-import Checklist from "@planx/components/Checklist/Editor";
+import Checklist from "@planx/components/Checklist/Editor/Editor";
 import Confirmation from "@planx/components/Confirmation/Editor";
 import ContactInput from "@planx/components/ContactInput/Editor";
 import Content from "@planx/components/Content/Editor";
diff --git a/editor.planx.uk/src/pages/Preview/Node.tsx b/editor.planx.uk/src/pages/Preview/Node.tsx
index c61cfdbe3b..fe30ad7cec 100644
--- a/editor.planx.uk/src/pages/Preview/Node.tsx
+++ b/editor.planx.uk/src/pages/Preview/Node.tsx
@@ -4,7 +4,7 @@ import AddressInputComponent from "@planx/components/AddressInput/Public";
 import type { Calculate } from "@planx/components/Calculate/model";
 import CalculateComponent from "@planx/components/Calculate/Public";
 import type { Checklist } from "@planx/components/Checklist/model";
-import ChecklistComponent from "@planx/components/Checklist/Public";
+import ChecklistComponent from "@planx/components/Checklist/Public/Public";
 import type { Confirmation } from "@planx/components/Confirmation/model";
 import ConfirmationComponent from "@planx/components/Confirmation/Public";
 import type { ContactInput } from "@planx/components/ContactInput/model";
diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx
index 54efa0cc6d..569c248d76 100644
--- a/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx
+++ b/editor.planx.uk/src/ui/editor/ComponentTagSelect.test.tsx
@@ -1,4 +1,4 @@
-import ChecklistComponent from "@planx/components/Checklist/Editor";
+import ChecklistComponent from "@planx/components/Checklist/Editor/Editor";
 import { within } from "@testing-library/react";
 import { TAG_DISPLAY_VALUES } from "pages/FlowEditor/components/Flow/components/Tag";
 import { useStore } from "pages/FlowEditor/lib/store";