diff --git a/src/components/create/confirm-submit.tsx b/src/components/create/confirm-submit.tsx
index 40faa6d..52cf45c 100644
--- a/src/components/create/confirm-submit.tsx
+++ b/src/components/create/confirm-submit.tsx
@@ -1,4 +1,4 @@
-import { createSignal, For, Show } from "solid-js";
+import { For, Show } from "solid-js";
 import { hasUserScope } from "../../auth/scope-utils";
 import { Button } from "../button.jsx";
 
@@ -13,15 +13,15 @@ const inactiveClass = "hover:bg-neutral-100 dark:hover:bg-neutral-700";
 
 export const ConfirmSubmit = (props: {
   isCreate: boolean;
-  onConfirm: (validate: boolean | undefined, recreate: boolean) => void;
+  validate: boolean | undefined;
+  setValidate: (v: boolean | undefined) => void;
+  recreate: boolean;
+  setRecreate: (v: boolean) => void;
   onClose: () => void;
 }) => {
-  const [validate, setValidate] = createSignal<boolean | undefined>(undefined);
-  const [recreate, setRecreate] = createSignal(false);
-
   return (
     <div class="flex flex-col gap-3 text-sm">
-      <h2 class="font-semibold">{props.isCreate ? "Create" : "Edit"} record</h2>
+      <h2 class="font-semibold">Advanced options</h2>
 
       <div class="flex flex-col gap-1.5">
         <div class="flex items-center justify-between gap-2">
@@ -31,8 +31,8 @@ export const ConfirmSubmit = (props: {
               {(opt) => (
                 <button
                   type="button"
-                  onClick={() => setValidate(opt.value)}
-                  class={`border-r border-neutral-200 px-2.5 py-1.5 transition-colors last:border-r-0 dark:border-neutral-600 ${validate() === opt.value ? activeClass : inactiveClass}`}
+                  onClick={() => props.setValidate(opt.value)}
+                  class={`border-r border-neutral-200 px-2.5 py-1.5 transition-colors last:border-r-0 dark:border-neutral-600 ${props.validate === opt.value ? activeClass : inactiveClass}`}
                 >
                   {opt.label}
                 </button>
@@ -53,9 +53,9 @@ export const ConfirmSubmit = (props: {
           >
             <input
               type="checkbox"
-              checked={recreate()}
+              checked={props.recreate}
               disabled={!hasUserScope("create")}
-              onChange={(e) => setRecreate(e.currentTarget.checked)}
+              onChange={(e) => props.setRecreate(e.currentTarget.checked)}
               class="h-3.5 w-3.5 accent-blue-500"
             />
             Recreate{!hasUserScope("create") ? " (create permission needed)" : ""}
@@ -66,16 +66,8 @@ export const ConfirmSubmit = (props: {
         </div>
       </Show>
 
-      <div class="flex justify-between gap-2">
-        <Button onClick={props.onClose}>Cancel</Button>
-        <Button
-          onClick={() => props.onConfirm(validate(), recreate())}
-          classList={{
-            "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true,
-          }}
-        >
-          Confirm
-        </Button>
+      <div class="flex justify-end gap-2">
+        <Button onClick={props.onClose}>Done</Button>
       </div>
     </div>
   );
diff --git a/src/components/create/index.tsx b/src/components/create/index.tsx
index 1ea986c..28af1ba 100644
--- a/src/components/create/index.tsx
+++ b/src/components/create/index.tsx
@@ -45,6 +45,8 @@ export const RecordEditor = (props: {
   const [openInsertMenu, setOpenInsertMenu] = createSignal(false);
   const [openHandleDialog, setOpenHandleDialog] = createSignal(false);
   const [openConfirmDialog, setOpenConfirmDialog] = createSignal(false);
+  const [validate, setValidate] = createSignal<boolean | undefined>(undefined);
+  const [recreate, setRecreate] = createSignal(false);
 
   const hasPermission = () => !props.scope || hasUserScope(props.scope);
   const [isMaximized, setIsMaximized] = createSignal(false);
@@ -139,7 +141,6 @@ export const RecordEditor = (props: {
       setNotice(`${res.data.error}: ${res.data.message}`);
       return;
     }
-    setOpenConfirmDialog(false);
     setOpenDialog(false);
     const id = addNotification({
       message: "Record created",
@@ -199,7 +200,6 @@ export const RecordEditor = (props: {
           return;
         }
       }
-      setOpenConfirmDialog(false);
       setOpenDialog(false);
       const id = addNotification({
         message: "Record edited",
@@ -415,24 +415,32 @@ export const RecordEditor = (props: {
               <Modal
                 open={openConfirmDialog()}
                 onClose={() => setOpenConfirmDialog(false)}
-                closeOnClick={false}
                 contentClass="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[24rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md dark:border-neutral-700"
               >
                 <ConfirmSubmit
                   isCreate={props.create}
-                  onConfirm={(validate, recreate) => {
-                    if (props.create) {
-                      createRecord(validate);
-                    } else {
-                      editRecord(validate, recreate);
-                    }
-                  }}
+                  validate={validate()}
+                  setValidate={setValidate}
+                  recreate={recreate()}
+                  setRecreate={setRecreate}
                   onClose={() => setOpenConfirmDialog(false)}
                 />
               </Modal>
               <div class="flex items-center justify-end gap-2">
-                <Button onClick={() => setOpenConfirmDialog(true)}>
-                  {props.create ? "Create..." : "Edit..."}
+                <Button onClick={() => setOpenConfirmDialog(true)}>Advanced</Button>
+                <Button
+                  onClick={() => {
+                    if (props.create) {
+                      createRecord(validate());
+                    } else {
+                      editRecord(validate(), recreate());
+                    }
+                  }}
+                  classList={{
+                    "bg-blue-500! text-white! border-none! hover:bg-blue-600! active:bg-blue-700! dark:bg-blue-600! dark:hover:bg-blue-500! dark:active:bg-blue-400!": true,
+                  }}
+                >
+                  {props.create ? "Create" : "Edit"}
                 </Button>
               </div>
             </div>