diff --git a/src/modules/constants/constant.ts b/src/modules/constants/constant.ts
index d685117..58fe9c4 100644
--- a/src/modules/constants/constant.ts
+++ b/src/modules/constants/constant.ts
@@ -646,4 +646,8 @@ export const DEFAULT_JDBC_POOL = {
     numTestsPerEvictionRun: 3,
     minEvictableIdleTimeMillis: 1800,
 };
-  
+
+export const CONNECTION_LAYOUT = {
+    hgap: 15,
+    vgap: 15,
+};
diff --git a/src/modules/pages/connection/connection_jdbc/connection_jdbc.ts b/src/modules/pages/connection/connection_jdbc/connection_jdbc.ts
index 457eb2e..b332ccf 100644
--- a/src/modules/pages/connection/connection_jdbc/connection_jdbc.ts
+++ b/src/modules/pages/connection/connection_jdbc/connection_jdbc.ts
@@ -5,6 +5,7 @@ import { CollapseXtype, EVENT_CHANGE } from 'src/modules/components/collapse/col
 import { ConnectionJdbcModelXtype, ConnectionJdecModel } from './connection_jdbc.model';
 import { ConnectionJDBC } from 'src/modules/crud/crud.typings';
 import { getAllDatabaseTypes, getJdbcDatabaseType, resolveUrlInfo } from '../../../app.service';
+import { CONNECTION_LAYOUT } from '@constants/constant';
 export const ConnectionJdbcXtype = 'dec.dcm.connection_jdbc';
 @shortcut(ConnectionJdbcXtype)
 @store(ConnectionJdbcModelXtype)
@@ -19,11 +20,12 @@ export class ConnectionJdbc extends BI.Widget {
         const { driver, database, user, newCharsetName, schema, connectionPoolAttr, authType, principal, url } = connectionData;
         const databaseType = getJdbcDatabaseType(database, driver);
         const { host, port, databaseName } = resolveUrlInfo(url);
+        const { hgap, vgap } = CONNECTION_LAYOUT;
         
         return {
             type: Vertical,
-            hgap: 15,
-            vgap: 15,
+            hgap,
+            vgap,
             items: [
                 {
                     type: FormItemXtype,
@@ -94,7 +96,7 @@ export class ConnectionJdbc extends BI.Widget {
                 },
                 {
                     type: Vertical,
-                    vgap: 15,
+                    vgap,
                     invisible: true,
                     ref: (_ref: any) => {
                         this.advancedSet = _ref;
diff --git a/src/modules/pages/connection/connection_jndi/connection_jndi.ts b/src/modules/pages/connection/connection_jndi/connection_jndi.ts
index 552607e..db04856 100644
--- a/src/modules/pages/connection/connection_jndi/connection_jndi.ts
+++ b/src/modules/pages/connection/connection_jndi/connection_jndi.ts
@@ -4,6 +4,7 @@ import { FormItemXtype } from '../components/form_item/form_item';
 import { ConnectionJndiModelXtype, ConnectionJndiModel } from './connection_jndi.model';
 import { ConnectionJNDI } from 'src/modules/crud/crud.typings';
 import { CollapseXtype, EVENT_CHANGE } from 'src/modules/components/collapse/collapse';
+import { CONNECTION_LAYOUT } from '@constants/constant';
 
 export const ConnectionJndiXtype = 'dec.dcm.connection_jndi';
 @shortcut(ConnectionJndiXtype)
@@ -16,11 +17,12 @@ export class ConnectionJdbc extends BI.Widget {
     render() {
         const connectionData = this.model.connectionSelectedOne.connectionData as ConnectionJNDI;
         const { jndiName, contextHashtable, originalCharsetName } = connectionData;
+        const { hgap, vgap } = CONNECTION_LAYOUT;
         
         return {
             type: Vertical,
-            hgap: 15,
-            vgap: 15,
+            hgap,
+            vgap,
             items: [
                 {
                     type: FormItemXtype,
@@ -99,7 +101,7 @@ export class ConnectionJdbc extends BI.Widget {
                 },
                 {
                     type: Vertical,
-                    vgap: 15,
+                    vgap,
                     invisible: true,
                     ref: (_ref: any) => {
                         this.advancedSet = _ref;
diff --git a/src/modules/pages/maintain/forms/components/form.jdbc.ts b/src/modules/pages/maintain/forms/components/form.jdbc.ts
index 89d31dd..ac73ada 100644
--- a/src/modules/pages/maintain/forms/components/form.jdbc.ts
+++ b/src/modules/pages/maintain/forms/components/form.jdbc.ts
@@ -4,7 +4,7 @@ import { CollapseXtype, EVENT_CHANGE } from 'src/modules/components/collapse/col
 import { FormItemXtype } from '../../components/form_item/form_item';
 import { Connection, ConnectionJDBC, ConnectionPoolJDBC } from 'src/modules/crud/crud.typings';
 import { connectionType } from '@constants/env';
-import { CONNECT_CHARSET } from '@constants/constant';
+import { CONNECT_CHARSET, CONNECTION_LAYOUT } from '@constants/constant';
 import { getAllDatabaseTypes, getJdbcDatabaseType, resolveUrlInfo, splitUrl } from '../../../../app.service';
 
 export const FormJdbcXtype = 'dec.dcm.maintain.form.jdbc';
@@ -61,13 +61,13 @@ export class FormJdbc extends BI.Widget {
         const { initialSize, maxActive, maxIdle, maxWait, validationQuery, testOnBorrow, testOnReturn, testWhileIdle, timeBetweenEvictionRunsMillis, numTestsPerEvictionRun, minEvictableIdleTimeMillis } = connectionPoolAttr as ConnectionPoolJDBC;
         const databaseType = getJdbcDatabaseType(database, driver);
         this.oldPassword = password;
-
         const { host, port, databaseName } = resolveUrlInfo(url);
-        
+        const { hgap, vgap } = CONNECTION_LAYOUT;
+
         return {
             type: Vertical,
-            hgap: 15,
-            vgap: 15,
+            hgap,
+            vgap,
             items: [
                 {
                     type: FormItemXtype,
@@ -393,7 +393,7 @@ export class FormJdbc extends BI.Widget {
                 },
                 {
                     type: Vertical,
-                    vgap: 15,
+                    vgap,
                     invisible: true,
                     ref: (_ref: any) => {
                         this.advancedSet = _ref;
diff --git a/src/modules/pages/maintain/forms/components/form.jndi.ts b/src/modules/pages/maintain/forms/components/form.jndi.ts
index 5170ca2..32dabb4 100644
--- a/src/modules/pages/maintain/forms/components/form.jndi.ts
+++ b/src/modules/pages/maintain/forms/components/form.jndi.ts
@@ -2,7 +2,7 @@ import { shortcut } from '@core/core';
 import { Vertical, TextEditor, Htape, Left, Label, TextValueCombo } from 'ui';
 import { FormItemXtype } from '../../components/form_item/form_item';
 import { ConnectionJNDI, Connection, ContextHashtable } from 'src/modules/crud/crud.typings';
-import { CONNECT_CHARSET } from '@constants/constant';
+import { CONNECT_CHARSET, CONNECTION_LAYOUT } from '@constants/constant';
 import { CollapseXtype, EVENT_CHANGE } from 'src/modules/components/collapse/collapse';
 import { connectionType } from '@constants/env';
 export const FormJndiXtype = 'dec.dcm.maintain.form.jndi';
@@ -37,11 +37,12 @@ export class FormJndi extends BI.Widget {
     render() {
         const { connectionName, connectionData } = this.options.formData;
         const { jndiName, newCharsetName, contextHashtable } = connectionData as ConnectionJNDI;
-        
+        const { hgap, vgap } = CONNECTION_LAYOUT;
+
         return {
             type: Vertical,
-            hgap: 15,
-            vgap: 15,
+            hgap,
+            vgap,
             items: [
                 {
                     type: FormItemXtype,
@@ -187,7 +188,7 @@ export class FormJndi extends BI.Widget {
                 },
                 {
                     type: Vertical,
-                    vgap: 15,
+                    vgap,
                     invisible: true,
                     ref: (_ref: any) => {
                         this.advancedSet = _ref;