diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index b5c3b18ad3..448ff61f70 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -425,10 +425,14 @@ export const FormBuilder = function FormBuilder({
             fieldIndex: -1,
           })
         }>
-        <DialogContent enableOverflow data-testid="edit-field-dialog">
-          <DialogHeader title={t("add_a_booking_question")} subtitle={t("form_builder_field_add_subtitle")} />
-          <div>
+        <DialogContent className="max-h-none p-0" data-testid="edit-field-dialog">
+          <div className="h-auto max-h-[85vh] overflow-auto px-8 pt-8 pb-7">
+            <DialogHeader
+              title={t("add_a_booking_question")}
+              subtitle={t("form_builder_field_add_subtitle")}
+            />
             <Form
+              id="form-builder"
               form={fieldForm}
               handleSubmit={(data) => {
                 const type = data.type || "text";
@@ -540,14 +544,14 @@ export const FormBuilder = function FormBuilder({
                   );
                 }}
               />
-              <DialogFooter>
-                <DialogClose color="secondary">{t("cancel")}</DialogClose>
-                <Button data-testid="field-add-save" type="submit">
-                  {isFieldEditMode ? t("save") : t("add")}
-                </Button>
-              </DialogFooter>
             </Form>
           </div>
+          <DialogFooter className="relative rounded px-8 pb-6" showDivider>
+            <DialogClose color="secondary">{t("cancel")}</DialogClose>
+            <Button data-testid="field-add-save" type="submit" form="form-builder">
+              {isFieldEditMode ? t("save") : t("add")}
+            </Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index eb5222ce27..04531e68f5 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -1,6 +1,6 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useRouter } from "next/router";
-import type { PropsWithChildren, ReactNode } from "react";
+import type { ReactNode } from "react";
 import React, { useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
@@ -93,7 +93,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
           {type === "creation" && (
             <div>
               <DialogHeader title={title} subtitle={props.description} />
-              <div className="flex flex-col space-y-6">{children}</div>
+              <div className="flex flex-col">{children}</div>
             </div>
           )}
           {type === "confirmation" && (
@@ -105,7 +105,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
               )}
               <div className="w-full">
                 <DialogHeader title={title} subtitle={props.description} />
-                <div className="flex flex-col space-y-6">{children}</div>
+                <div className="flex  space-y-6">{children}</div>
               </div>
             </div>
           )}
@@ -134,10 +134,14 @@ export function DialogHeader(props: DialogHeaderProps) {
   );
 }
 
-// TODO: add divider
-export function DialogFooter(props: PropsWithChildren<{ showDivider?: boolean }>) {
+export function DialogFooter(props: { children: ReactNode; className?: string; showDivider?: boolean }) {
   return (
-    <div className={classNames("mt-7 flex justify-end space-x-2 rtl:space-x-reverse")}>{props.children}</div>
+    <div className={classNames("bg-default", props.className)}>
+      {props.showDivider && <hr className="border-subtle absolute right-0 w-full" />}
+      <div className={classNames("bg-default mt-6 flex justify-end space-x-2 rtl:space-x-reverse")}>
+        {props.children}
+      </div>
+    </div>
   );
 }