diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
index 38e42e9..de129f5 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogAnnotation.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   Checkbox,
   Dialog,
-  FormContainer,
   FormItem,
   Input,
   Notification,
@@ -91,11 +90,11 @@ function JsonRowOpDialogAnnotation({
       preventScroll={true}
       onClose={handleClose}
       onRequestClose={handleClose}
+      width={900}
+      height="90vh"
     >
       {(data.operation === 'create' || data.operation === 'update') && (
-        <>
-          <h5 className="mb-4">{data.index === -1 ? 'Add' : 'Update'}</h5>
-          <Formik
+        <Formik
             initialValues={
               data.chartAnnotationValues ?? {
                 argument: '',
@@ -167,16 +166,17 @@ function JsonRowOpDialogAnnotation({
             }}
           >
             {({ touched, errors, values, isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="h-full overflow-y-auto p-2">
+              <Form className="flex flex-col h-full">
+                <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
+                  <h5 className="flex-shrink-0">{data.index === -1 ? 'Add' : 'Update'}</h5>
+                  <div className="flex-1 overflow-y-auto">
                     <Tabs defaultValue="annotations_general">
                       <TabList>
                         <TabNav value="annotations_general">General</TabNav>
                         <TabNav value="annotations_border">Border</TabNav>
                       </TabList>
                       <TabContent value="annotations_general">
-                        <div className="p-2">
+                        <div className="p-3 grid grid-cols-3 gap-x-4 gap-y-1">
                           <FormItem
                             label="Tooltip Enabled"
                             invalid={errors.tooltipEnabled && touched.tooltipEnabled}
@@ -262,7 +262,7 @@ function JsonRowOpDialogAnnotation({
                           >
                             <Field name="argument" component={Input} />
                           </FormItem>
-                          
+
                           <FormItem
                             label="Color"
                             invalid={errors.color && touched.color}
@@ -385,7 +385,7 @@ function JsonRowOpDialogAnnotation({
                         </div>
                       </TabContent>
                       <TabContent value="annotations_border">
-                        <div className="p-2">
+                        <div className="p-3 grid grid-cols-2 gap-x-4 gap-y-1">
                           <FormItem
                             label="Visible"
                             invalid={errors.border?.visible && touched.border?.visible}
@@ -445,25 +445,21 @@ function JsonRowOpDialogAnnotation({
                       </TabContent>
                     </Tabs>
                   </div>
-                  <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                    </Button>
-                  </div>
-                </FormContainer>
+                </Dialog.Body>
+                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  </Button>
+                </Dialog.Footer>
               </Form>
             )}
           </Formik>
-        </>
       )}
       {data.operation === 'delete' && (
-        <>
-          <h5 className="mb-4">Delete</h5>
-          <p>Silmek istediğinize emin misiniz?</p>
-          <Formik
+        <Formik
             initialValues={data}
             onSubmit={async (values, { setSubmitting }) => {
               setSubmitting(true)
@@ -487,21 +483,22 @@ function JsonRowOpDialogAnnotation({
             }}
           >
             {({ isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? 'Deleting' : 'Delete'}
-                    </Button>
-                  </div>
-                </FormContainer>
+              <Form className="flex flex-col h-full">
+                <Dialog.Body className="flex flex-col gap-2">
+                  <h5>Delete</h5>
+                  <p>Silmek istediğinize emin misiniz?</p>
+                </Dialog.Body>
+                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? 'Deleting' : 'Delete'}
+                  </Button>
+                </Dialog.Footer>
               </Form>
             )}
           </Formik>
-        </>
       )}
     </Dialog>
   )
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx
index 42fd2d0..8e7e5a8 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx
@@ -3,7 +3,6 @@ import {
   Card,
   Checkbox,
   Dialog,
-  FormContainer,
   FormItem,
   Input,
   Notification,
@@ -140,64 +139,64 @@ function JsonRowOpDialogEditForm({
     <Dialog
       id="editFormOperation"
       width={1200}
+      height="90vh"
       isOpen={isOpen}
       preventScroll={true}
       onClose={handleClose}
       onRequestClose={handleClose}
     >
       {(data.operation === 'create' || data.operation === 'update') && (
-        <>
-          <h5 className="mb-4">{data.index === -1 ? 'Add' : 'Update'}</h5>
-          <Formik
-            initialValues={
-              data.editFormValues ?? {
-                order: 1,
-                itemType: 'group',
-                caption: '',
-                colCount: 1,
-                colSpan: 2,
-                items: [],
-              }
+        <Formik
+          initialValues={
+            data.editFormValues ?? {
+              order: 1,
+              itemType: 'group',
+              caption: '',
+              colCount: 1,
+              colSpan: 2,
+              items: [],
             }
-            validationSchema={schema}
-            onSubmit={async (values, { setSubmitting }) => {
-              setSubmitting(true)
-              try {
-                const input: ListFormJsonRowDto = {
-                  index: data.index,
-                  fieldName: data.tabName,
-                  itemEditingForm: values,
-                }
-
-                if (data.index === -1) {
-                  await postListFormJsonRow(data.id, input)
-                } else {
-                  await putListFormJsonRow(data.id, input)
-                }
-                toast.push(
-                  <Notification type="success">
-                    {data.index === -1 ? 'Kayıt eklendi' : 'Kayıt güncellendi'}
-                  </Notification>,
-                  { placement: 'top-end' },
-                )
-                handleClose()
-              } catch (error: any) {
-                toast.push(
-                  <Notification type="danger">
-                    Hata
-                    <code>{error}</code>
-                  </Notification>,
-                  { placement: 'top-end' },
-                )
-              } finally {
-                setSubmitting(false)
+          }
+          validationSchema={schema}
+          onSubmit={async (values, { setSubmitting }) => {
+            setSubmitting(true)
+            try {
+              const input: ListFormJsonRowDto = {
+                index: data.index,
+                fieldName: data.tabName,
+                itemEditingForm: values,
               }
-            }}
-          >
-            {({ touched, errors, values, isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="h-full overflow-y-auto p-2">
+
+              if (data.index === -1) {
+                await postListFormJsonRow(data.id, input)
+              } else {
+                await putListFormJsonRow(data.id, input)
+              }
+              toast.push(
+                <Notification type="success">
+                  {data.index === -1 ? 'Kayıt eklendi' : 'Kayıt güncellendi'}
+                </Notification>,
+                { placement: 'top-end' },
+              )
+              handleClose()
+            } catch (error: any) {
+              toast.push(
+                <Notification type="danger">
+                  Hata
+                  <code>{error}</code>
+                </Notification>,
+                { placement: 'top-end' },
+              )
+            } finally {
+              setSubmitting(false)
+            }
+          }}
+        >
+          {({ touched, errors, values, isSubmitting }) => (
+            <Form className="flex flex-col h-full">
+              <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
+                <h5 className="flex-shrink-0">{data.index === -1 ? 'Add' : 'Update'}</h5>
+                <div className="flex-1 overflow-y-auto p-2">
                     <div className="grid grid-cols-5 gap-4 w-full">
                       <FormItem
                         label="Order"
@@ -807,70 +806,69 @@ function JsonRowOpDialogEditForm({
                         )}
                       />
                     </FormItem>
-                  </div>
-                  <div className="text-right mt-4">
-                    <Button
-                      type="button"
-                      variant="solid"
-                      className="text-white bg-red-600 hover:bg-red-700 ltr:mr-2 rtl:ml-2"
-                      onClick={() => setIsHelperOpen(true)}
-                    >
-                      {translate('::ListForms.ListFormFieldEdit.HelperOpen')}
-                    </Button>
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                    </Button>
-                  </div>
-                </FormContainer>
-              </Form>
-            )}
-          </Formik>
-        </>
+                </div>
+              </Dialog.Body>
+              <Dialog.Footer className="flex justify-between items-center border-t pt-3 mt-1">
+                <Button
+                  type="button"
+                  variant="solid"
+                  className="text-white bg-red-600 hover:bg-red-700"
+                  onClick={() => setIsHelperOpen(true)}
+                >
+                  {translate('::ListForms.ListFormFieldEdit.HelperOpen')}
+                </Button>
+                <div className="flex gap-2">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  </Button>
+                </div>
+              </Dialog.Footer>
+            </Form>
+          )}
+        </Formik>
       )}
       {data.operation === 'delete' && (
-        <>
-          <h5 className="mb-4">Delete</h5>
-          <p>Silmek istediğinize emin misiniz?</p>
-          <Formik
-            initialValues={data}
-            onSubmit={async (values, { setSubmitting }) => {
-              setSubmitting(true)
-              try {
-                await deleteListFormJsonRow(data.id, data.tabName, values.index)
-                toast.push(<Notification type="success">Kayıt silindi </Notification>)
-                handleClose()
-              } catch (error: any) {
-                toast.push(
-                  <Notification type="danger">
-                    Hata
-                    <code>{error}</code>
-                  </Notification>,
-                  { placement: 'top-end' },
-                )
-              } finally {
-                setSubmitting(false)
-              }
-            }}
-          >
-            {({ isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? 'Deleting' : 'Delete'}
-                    </Button>
-                  </div>
-                </FormContainer>
-              </Form>
-            )}
-          </Formik>
-        </>
+        <Formik
+          initialValues={data}
+          onSubmit={async (values, { setSubmitting }) => {
+            setSubmitting(true)
+            try {
+              await deleteListFormJsonRow(data.id, data.tabName, values.index)
+              toast.push(<Notification type="success">Kayıt silindi </Notification>)
+              handleClose()
+            } catch (error: any) {
+              toast.push(
+                <Notification type="danger">
+                  Hata
+                  <code>{error}</code>
+                </Notification>,
+                { placement: 'top-end' },
+              )
+            } finally {
+              setSubmitting(false)
+            }
+          }}
+        >
+          {({ isSubmitting }) => (
+            <Form className="flex flex-col h-full">
+              <Dialog.Body className="flex flex-col gap-2">
+                <h5>Delete</h5>
+                <p>Silmek istediğinize emin misiniz?</p>
+              </Dialog.Body>
+              <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                <Button variant="plain" onClick={handleClose}>
+                  Cancel
+                </Button>
+                <Button variant="solid" loading={isSubmitting} type="submit">
+                  {isSubmitting ? 'Deleting' : 'Delete'}
+                </Button>
+              </Dialog.Footer>
+            </Form>
+          )}
+        </Formik>
       )}
     </Dialog>
   )
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
index 730d3a2..9042cfa 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSeries.tsx
@@ -3,7 +3,6 @@ import {
   Card,
   Checkbox,
   Dialog,
-  FormContainer,
   FormItem,
   Input,
   Notification,
@@ -132,11 +131,11 @@ function JsonRowOpDialogSeries({
       preventScroll={true}
       onClose={handleClose}
       onRequestClose={handleClose}
+      width={900}
+      height="90vh"
     >
       {(data.operation === 'create' || data.operation === 'update') && (
-        <>
-          <h5 className="mb-4">{data.index === -1 ? 'Add' : 'Update'}</h5>
-          <Formik
+        <Formik
             initialValues={
               data.chartSeriesValues ?? {
                 index: -1,
@@ -208,9 +207,13 @@ function JsonRowOpDialogSeries({
             }}
           >
             {({ touched, errors, values, isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="h-full overflow-y-auto p-2">
+              <Form className="flex flex-col h-full">
+                <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
+                  <h5 className="flex-shrink-0">{data.index === -1 ? 'Add' : 'Update'}</h5>
+                  <div className="flex-1 overflow-y-auto p-2">
+                    <div className="grid grid-cols-2 gap-6">
+                      {/* Sol Kolon */}
+                      <div className="flex flex-col gap-1">
                     <FormItem
                       label="Visible"
                       invalid={errors.visible && touched.visible}
@@ -446,7 +449,9 @@ function JsonRowOpDialogSeries({
                     >
                       <Field type="number" name="cornerRadius" component={Input} />
                     </FormItem>
-
+                      </div>
+                      {/* Sağ Kolon - Label */}
+                      <div className="flex flex-col gap-1">
                     <Card className="my-2" header="Label">
                       <FormItem label="Label Visible">
                         <Field name="label.visible" component={Checkbox} />
@@ -525,26 +530,24 @@ function JsonRowOpDialogSeries({
                         </FormItem>
                       </Card>
                     </Card>
+                      </div>
+                    </div>
                   </div>
-                  <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                    </Button>
-                  </div>
-                </FormContainer>
+                </Dialog.Body>
+                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  </Button>
+                </Dialog.Footer>
               </Form>
             )}
           </Formik>
-        </>
       )}
       {data.operation === 'delete' && (
-        <>
-          <h5 className="mb-4">Delete</h5>
-          <p>Silmek istediğinize emin misiniz?</p>
-          <Formik
+        <Formik
             initialValues={data}
             onSubmit={async (values, { setSubmitting }) => {
               setSubmitting(true)
@@ -568,21 +571,22 @@ function JsonRowOpDialogSeries({
             }}
           >
             {({ isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? 'Deleting' : 'Delete'}
-                    </Button>
-                  </div>
-                </FormContainer>
+              <Form className="flex flex-col h-full">
+                <Dialog.Body className="flex flex-col gap-2">
+                  <h5>Delete</h5>
+                  <p>Silmek istediğinize emin misiniz?</p>
+                </Dialog.Body>
+                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? 'Deleting' : 'Delete'}
+                  </Button>
+                </Dialog.Footer>
               </Form>
             )}
           </Formik>
-        </>
       )}
     </Dialog>
   )
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx
index 835f5f4..c7d2a70 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   Checkbox,
   Dialog,
-  FormContainer,
   FormItem,
   Input,
   Notification,
@@ -70,15 +69,14 @@ function JsonRowOpDialogSubForm({
     <Dialog
       id="subFormOperation"
       width={900}
+      height="90vh"
       isOpen={isOpen}
       preventScroll={true}
       onClose={handleClose}
       onRequestClose={handleClose}
     >
       {(data.operation === 'create' || data.operation === 'update') && (
-        <>
-          <h5 className="mb-4">{data.index === -1 ? 'Add' : 'Update'}</h5>
-          <Formik
+        <Formik
             initialValues={
               data.subFormValues ?? {
                 tabTitle: '',
@@ -124,9 +122,10 @@ function JsonRowOpDialogSubForm({
             }}
           >
             {({ touched, errors, values, isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="h-[500px] overflow-y-auto p-2">
+              <Form className="flex flex-col h-full">
+                <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
+                  <h5 className="flex-shrink-0">{data.index === -1 ? 'Add' : 'Update'}</h5>
+                  <div className="flex-1 overflow-y-auto p-2">
                     <div className="grid grid-cols-4 gap-4">
                       <FormItem
                         label="Tab Title"
@@ -289,25 +288,21 @@ function JsonRowOpDialogSubForm({
                       />
                     </FormItem>
                   </div>
-                  <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                    </Button>
-                  </div>
-                </FormContainer>
+                </Dialog.Body>
+                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  </Button>
+                </Dialog.Footer>
               </Form>
             )}
           </Formik>
-        </>
       )}
       {data.operation === 'delete' && (
-        <>
-          <h5 className="mb-4">Delete</h5>
-          <p>Silmek istediğinize emin misiniz?</p>
-          <Formik
+        <Formik
             initialValues={data}
             onSubmit={async (values, { setSubmitting }) => {
               setSubmitting(true)
@@ -330,21 +325,22 @@ function JsonRowOpDialogSubForm({
             }}
           >
             {({ isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? 'Deleting' : 'Delete'}
-                    </Button>
-                  </div>
-                </FormContainer>
+              <Form className="flex flex-col h-full">
+                <Dialog.Body className="flex flex-col gap-2">
+                  <h5>Delete</h5>
+                  <p>Silmek istediğinize emin misiniz?</p>
+                </Dialog.Body>
+                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? 'Deleting' : 'Delete'}
+                  </Button>
+                </Dialog.Footer>
               </Form>
             )}
           </Formik>
-        </>
       )}
     </Dialog>
   )
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
index 118ef1b..c4745ec 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   Checkbox,
   Dialog,
-  FormContainer,
   FormItem,
   Input,
   Notification,
@@ -80,12 +79,11 @@ function JsonRowOpDialogWidget({
       preventScroll={true}
       onClose={handleClose}
       onRequestClose={handleClose}
-      width={data.operation === 'create' || data.operation === 'update' ? 'sm' : '450px'}
+      width={data.operation === 'create' || data.operation === 'update' ? 900 : 450}
+      height="90vh"
     >
       {(data.operation === 'create' || data.operation === 'update') && (
-        <>
-          <h5 className="mb-4">{data.index === -1 ? 'Add' : 'Update'}</h5>
-          <Formik
+        <Formik
             initialValues={
               data.widgetValues ?? {
                 colGap: 3,
@@ -138,9 +136,10 @@ function JsonRowOpDialogWidget({
             }}
           >
             {({ touched, errors, values, isSubmitting, setFieldValue }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="h-full overflow-y-auto p-1">
+              <Form className="flex flex-col h-full">
+                <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
+                  <h5 className="flex-shrink-0">{data.index === -1 ? 'Add' : 'Update'}</h5>
+                  <div className="flex-1 overflow-y-auto p-1">
                     <div className="grid grid-cols-5 gap-4">
                       <FormItem
                         label="Column Gap (Sütun Boşluğu)"
@@ -266,12 +265,12 @@ function JsonRowOpDialogWidget({
                     >
                       <div
                         className="border rounded-lg overflow-hidden"
-                        style={{ height: '200px' }}
+                        style={{ height: '35vh' }}
                       >
                         <SqlEditor
                           value={values.sqlQuery || ''}
                           onChange={(value) => setFieldValue('sqlQuery', value || '')}
-                          height="200px"
+                          height="35vh"
                         />
                       </div>
                     </FormItem>
@@ -426,25 +425,21 @@ function JsonRowOpDialogWidget({
                       />
                     </FormItem>
                   </div>
-                  <div className="text-right mt-2">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                    </Button>
-                  </div>
-                </FormContainer>
+                </Dialog.Body>
+                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                  </Button>
+                </Dialog.Footer>
               </Form>
             )}
           </Formik>
-        </>
       )}
       {data.operation === 'delete' && (
-        <>
-          <h5 className="mb-4">Delete</h5>
-          <p>Silmek istediğinize emin misiniz?</p>
-          <Formik
+        <Formik
             initialValues={data}
             onSubmit={async (values, { setSubmitting }) => {
               setSubmitting(true)
@@ -469,21 +464,22 @@ function JsonRowOpDialogWidget({
             }}
           >
             {({ isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <div className="text-right mt-4">
-                    <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="solid" loading={isSubmitting} type="submit">
-                      {isSubmitting ? 'Deleting' : 'Delete'}
-                    </Button>
-                  </div>
-                </FormContainer>
+              <Form className="flex flex-col h-full">
+                <Dialog.Body className="flex flex-col gap-2">
+                  <h5>Delete</h5>
+                  <p>Silmek istediğinize emin misiniz?</p>
+                </Dialog.Body>
+                <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+                  <Button variant="plain" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="solid" loading={isSubmitting} type="submit">
+                    {isSubmitting ? 'Deleting' : 'Delete'}
+                  </Button>
+                </Dialog.Footer>
               </Form>
             )}
           </Formik>
-        </>
       )}
     </Dialog>
   )
diff --git a/ui/src/views/admin/videoroom/RoomList.tsx b/ui/src/views/admin/videoroom/RoomList.tsx
index f47d79c..28bbd81 100644
--- a/ui/src/views/admin/videoroom/RoomList.tsx
+++ b/ui/src/views/admin/videoroom/RoomList.tsx
@@ -31,7 +31,7 @@ import { Helmet } from 'react-helmet'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { VideoroomDto } from '@/proxy/videoroom/models'
 import classNames from 'classnames'
-import { Button, Input } from '@/components/ui'
+import { Button, Dialog, Input } from '@/components/ui'
 import { FcVideoCall } from 'react-icons/fc'
 
 export interface RoomProps {
@@ -508,25 +508,35 @@ const RoomList: React.FC = () => {
         </div>
 
         {/* Class Modal (Create/Edit) */}
-        {(showCreateModal || (showEditModal && videoroom)) && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-            <motion.div
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{ opacity: 1, scale: 1 }}
-              className="bg-white rounded-lg max-w-2xl w-full max-h-[95vh] overflow-y-auto"
-            >
-              <div className="p-3 sm:p-3 border-b border-gray-200">
-                <h2 className="text-xl sm:text-2xl font-bold text-gray-900">
+        <Dialog
+          isOpen={showCreateModal || (showEditModal && !!videoroom)}
+          onClose={() => {
+            setShowCreateModal(false)
+            setShowEditModal(false)
+          }}
+          onRequestClose={() => {
+            setShowCreateModal(false)
+            setShowEditModal(false)
+          }}
+          width={800}
+          height="90vh"
+        >
+          <form
+            onSubmit={showCreateModal ? handleCreateClass : handleEditClass}
+            className="flex flex-col h-full"
+          >
+            <Dialog.Body className="flex flex-col gap-2 overflow-hidden">
+              {/* Header */}
+              <div className="flex items-center gap-3 border-b pb-3 flex-shrink-0">
+                <FcVideoCall className="text-2xl" />
+                <h5 className="font-bold">
                   {showCreateModal
-                    ? translate('::App.Videoroom.CreateRoom') || 'Yeni Sınıf Oluştur'
-                    : translate('::App.Videoroom.EditRoom') || 'Sınıfı Düzenle'}
-                </h2>
+                    ? translate('::App.Videoroom.CreateRoom') || 'Yeni Oda Oluştur'
+                    : translate('::App.Videoroom.EditRoom') || 'Odayı Düzenle'}
+                </h5>
               </div>
 
-              <form
-                onSubmit={showCreateModal ? handleCreateClass : handleEditClass}
-                className="p-4 sm:p-6 space-y-4 sm:space-y-6"
-              >
+              <div className="flex-1 overflow-y-auto p-1 space-y-4">
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
                     {translate('::App.Listform.ListformField.RoomName') || 'Room Name'} *
@@ -851,87 +861,80 @@ const RoomList: React.FC = () => {
                   </div>
                 </div>
 
-                <div className="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      if (showCreateModal) {
-                        setShowCreateModal(false)
-                      }
+              </div>
+            </Dialog.Body>
 
-                      if (showEditModal) {
-                        setShowEditModal(false)
-                        setVideoroom(newClassEntity)
-                        resetForm()
-                      }
-                    }}
-                    className="px-3 py-1 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
-                  >
-                    {translate('::Cancel') || 'İptal'}
-                  </button>
-                  <button
-                    type="submit"
-                    className="px-3 py-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-                  >
-                    {showCreateModal
-                      ? translate('::App.Videoroom.CreateRoom') || 'Sınıf Oluştur'
-                      : translate('::App.Videoroom.SaveChanges') || 'Değişiklikleri Kaydet'}
-                  </button>
-                </div>
-              </form>
-            </motion.div>
-          </div>
-        )}
+            <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+              <Button
+                type="button"
+                variant="plain"
+                onClick={() => {
+                  if (showCreateModal) setShowCreateModal(false)
+                  if (showEditModal) {
+                    setShowEditModal(false)
+                    setVideoroom(newClassEntity)
+                    resetForm()
+                  }
+                }}
+              >
+                {translate('::Cancel') || 'İptal'}
+              </Button>
+              <Button type="submit" variant="solid" color="blue-600">
+                {showCreateModal
+                  ? translate('::App.Videoroom.CreateRoom') || 'Oda Oluştur'
+                  : translate('::App.Videoroom.SaveChanges') || 'Değişiklikleri Kaydet'}
+              </Button>
+            </Dialog.Footer>
+          </form>
+        </Dialog>
 
         {/* Delete Confirmation Modal */}
-        {showDeleteModal && videoroom && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <motion.div
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{ opacity: 1, scale: 1 }}
-              className="bg-white rounded-lg max-w-md w-full mx-4"
-            >
-              <div className="p-6">
-                <div className="flex items-center mb-4">
-                  <div className="p-3 bg-red-100 rounded-full mr-4">
-                    <FaTrash className="text-red-600" size={24} />
-                  </div>
-                  <div>
-                    <h3 className="text-lg font-semibold text-gray-900">
-                      {translate('::App.Videoroom.DeleteRoom') || 'Sınıfı Sil'}
-                    </h3>
-                    <p className="text-sm text-gray-600">
-                      {translate('::App.Videoroom.DeleteRoomWarning') || 'Bu işlem geri alınamaz'}
-                    </p>
-                  </div>
-                </div>
-
-                <p className="text-gray-700 mb-6">
-                  {translate('::DeleteConfirmation') ||
-                    'Bu sınıfı silmek istediğinize emin misiniz?'}
-                </p>
-
-                <div className="flex items-center justify-end space-x-4">
-                  <button
-                    onClick={() => {
-                      setShowDeleteModal(false)
-                      setVideoroom(newClassEntity)
-                    }}
-                    className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
-                  >
-                    {translate('::App.Common.Cancel') || 'İptal'}
-                  </button>
-                  <button
-                    onClick={handleDeleteClass}
-                    className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-                  >
-                    {translate('::App.Platform.Delete') || 'Sil'}
-                  </button>
-                </div>
+        <Dialog
+          isOpen={showDeleteModal && !!videoroom}
+          onClose={() => {
+            setShowDeleteModal(false)
+            setVideoroom(newClassEntity)
+          }}
+          onRequestClose={() => {
+            setShowDeleteModal(false)
+            setVideoroom(newClassEntity)
+          }}
+          width={480}
+        >
+          <Dialog.Body className="flex flex-col gap-3">
+            <div className="flex items-center gap-4">
+              <div className="p-3 bg-red-100 rounded-full flex-shrink-0">
+                <FaTrash className="text-red-600" size={20} />
               </div>
-            </motion.div>
-          </div>
-        )}
+              <div>
+                <h5 className="font-bold">
+                  {translate('::App.Videoroom.DeleteRoom') || 'Odayı Sil'}
+                </h5>
+                <p className="text-sm text-gray-500">
+                  {translate('::App.Videoroom.DeleteRoomWarning') || 'Bu işlem geri alınamaz'}
+                </p>
+              </div>
+            </div>
+            <p className="text-sm text-gray-700">
+              {translate('::DeleteConfirmation') || 'Bu odayı silmek istediğinize emin misiniz?'}
+            </p>
+          </Dialog.Body>
+
+          <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+            <Button
+              variant="plain"
+              onClick={() => {
+                setShowDeleteModal(false)
+                setVideoroom(newClassEntity)
+              }}
+            >
+              {translate('::Cancel') || 'İptal'}
+            </Button>
+            <Button variant="solid" color="red-600" onClick={handleDeleteClass}>
+              {translate('::App.Platform.Delete') || 'Sil'}
+            </Button>
+          </Dialog.Footer>
+        </Dialog>
       </Container>
     </>
   )
diff --git a/ui/src/views/developerKit/SqlQueryManager.tsx b/ui/src/views/developerKit/SqlQueryManager.tsx
index 1ab0d3a..c3c5a05 100644
--- a/ui/src/views/developerKit/SqlQueryManager.tsx
+++ b/ui/src/views/developerKit/SqlQueryManager.tsx
@@ -1162,13 +1162,13 @@ GO`,
         isOpen={showCopyDialog}
         onClose={() => !isCopyingObjects && setShowCopyDialog(false)}
         onRequestClose={() => !isCopyingObjects && setShowCopyDialog(false)}
-        contentClassName="max-h-[85vh] overflow-hidden"
+        width={1050}
       >
-        <div className="flex h-full max-h-[85vh] flex-col">
-          <h5 className="mb-3">{translate('::App.Platform.CopySelectedObjects')}</h5>
+        <Dialog.Body className="flex flex-col gap-2">
+          <h5 className="mb-1 flex-shrink-0">{translate('::App.Platform.CopySelectedObjects')}</h5>
 
           {/* Mode Tabs */}
-          <div className="flex gap-2 mb-4 border-b">
+          <div className="flex gap-2 mb-2 border-b flex-shrink-0">
             <button
               onClick={() => setCopyDialogMode('objects')}
               className={`px-4 py-2 font-medium text-sm border-b-2 transition ${
@@ -1193,7 +1193,7 @@ GO`,
             </button>
           </div>
 
-          <div className="flex-1 overflow-y-auto pr-1">
+          <div className="flex-1 min-h-0 overflow-y-auto pr-1">
             {copyDialogMode === 'objects' ? (
               <>
                 {/* Objects Mode */}
@@ -1322,32 +1322,32 @@ GO`,
               </>
             )}
           </div>
+        </Dialog.Body>
 
-          <div className="mt-2 flex justify-end gap-2 border-t pt-3">
-            <Button
-              variant="plain"
-              onClick={() => setShowCopyDialog(false)}
-              disabled={isCopyingObjects}
-            >
-              {translate('::Cancel')}
-            </Button>
-            <Button
-              variant="solid"
-              onClick={copyDialogMode === 'objects' ? handleCopyObjects : handleExecuteDirectSql}
-              loading={isCopyingObjects}
-              disabled={
-                copyTargetDataSources.length === 0 ||
-                (copyDialogMode === 'objects'
-                  ? selectedExplorerObjects.length === 0
-                  : !sqlScriptForCopy?.trim())
-              }
-            >
-              {copyDialogMode === 'objects'
-                ? translate('::Copy')
-                : translate('::App.Platform.Execute') || 'Calistir'}
-            </Button>
-          </div>
-        </div>
+        <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
+          <Button
+            variant="plain"
+            onClick={() => setShowCopyDialog(false)}
+            disabled={isCopyingObjects}
+          >
+            {translate('::Cancel')}
+          </Button>
+          <Button
+            variant="solid"
+            onClick={copyDialogMode === 'objects' ? handleCopyObjects : handleExecuteDirectSql}
+            loading={isCopyingObjects}
+            disabled={
+              copyTargetDataSources.length === 0 ||
+              (copyDialogMode === 'objects'
+                ? selectedExplorerObjects.length === 0
+                : !sqlScriptForCopy?.trim())
+            }
+          >
+            {copyDialogMode === 'objects'
+              ? translate('::Copy')
+              : translate('::App.Platform.Execute') || 'Calistir'}
+          </Button>
+        </Dialog.Footer>
       </Dialog>
 
       <Dialog
@@ -1355,14 +1355,13 @@ GO`,
         onClose={() => setShowCopyResultDialog(false)}
         onRequestClose={() => setShowCopyResultDialog(false)}
         width={1050}
-        contentClassName="max-h-[85vh] overflow-hidden"
       >
-        <div className="flex h-full max-h-[85vh] flex-col">
-          <h5 className="mb-3">
+        <Dialog.Body className="flex flex-col gap-2">
+          <h5 className="mb-1 flex-shrink-0">
             {translate('::App.Platform.Results') || 'Kopyalama Sonuc Detaylari'}
           </h5>
 
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-3 text-xs sm:text-sm">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-2 text-xs sm:text-sm flex-shrink-0">
             <div className="rounded border border-green-200 bg-green-50 px-3 py-2 text-green-700">
               {translate('::App.Platform.Success')}: <strong>{copySuccessCount}</strong>
             </div>
@@ -1374,7 +1373,7 @@ GO`,
             </div>
           </div>
 
-          <div className="flex-1 overflow-auto border rounded">
+          <div className="flex-1 min-h-0 overflow-auto border rounded">
             <div className="md:hidden p-2 space-y-2">
               {copyResults.map((row, idx) => {
                 const isError = row.status === 'error'
@@ -1508,13 +1507,13 @@ GO`,
               </tbody>
             </table>
           </div>
-        </div>
+        </Dialog.Body>
 
-        <div className="flex justify-end gap-2 mt-4">
+        <Dialog.Footer className="flex justify-end gap-2 border-t pt-3 mt-1">
           <Button variant="solid" onClick={() => setShowCopyResultDialog(false)}>
             {translate('::App.Platform.Close')}
           </Button>
-        </div>
+        </Dialog.Footer>
       </Dialog>
     </Container>
   )