diff --git a/packages/atoms/availabilitylist/Form.tsx b/packages/atoms/availabilitylist/Form.tsx
new file mode 100644
index 0000000000..c9891bd483
--- /dev/null
+++ b/packages/atoms/availabilitylist/Form.tsx
@@ -0,0 +1,41 @@
+import type { ReactElement, Ref } from "react";
+import React, { forwardRef } from "react";
+import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { FormProvider } from "react-hook-form";
+
+// import { showToast } from "../../..";
+
+type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
+  JSX.IntrinsicElements["form"],
+  "onSubmit"
+>;
+
+const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLFormElement>) => {
+  const { form, handleSubmit, ...passThrough } = props;
+
+  return (
+    <FormProvider {...form}>
+      <form
+        ref={ref}
+        onSubmit={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+
+          form
+            .handleSubmit(handleSubmit)(event)
+            .catch((err) => {
+              // FIXME: Booking Pages don't have toast, so this error is never shown
+              // showToast(`${getErrorFromUnknown(err).message}`, "error");
+              console.error(`${getErrorFromUnknown(err).message}`, "error");
+            });
+        }}
+        {...passThrough}>
+        {props.children}
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
+  p: FormProps<T> & { ref?: Ref<HTMLFormElement> }
+) => ReactElement;
diff --git a/packages/atoms/availabilitylist/NewScheduleButton.tsx b/packages/atoms/availabilitylist/NewScheduleButton.tsx
new file mode 100644
index 0000000000..75b8cd4a4b
--- /dev/null
+++ b/packages/atoms/availabilitylist/NewScheduleButton.tsx
@@ -0,0 +1,9 @@
+import { Form } from "./Form";
+
+export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
+  return (
+    <div>
+      <Form />
+    </div>
+  );
+}