diff --git a/config-ui/src/routes/connection/connections.tsx b/config-ui/src/routes/connection/connections.tsx
index 7aa101030f5..ad8130f710b 100644
--- a/config-ui/src/routes/connection/connections.tsx
+++ b/config-ui/src/routes/connection/connections.tsx
@@ -45,7 +45,7 @@ export const Connections = () => {
 
   const [firstPlugins, secondPlugins] = chunk(
     plugins.filter((p) => p !== 'webhook'),
-    6,
+    7,
   );
 
   const handleShowListDialog = (plugin: string) => {
@@ -145,6 +145,7 @@ export const Connections = () => {
         <Modal
           open
           width={820}
+          centered
           title={
             <S.ModalTitle>
               <span className="icon">{pluginConfig.icon({ color: colorPrimary })}</span>
@@ -161,6 +162,7 @@ export const Connections = () => {
         <Modal
           open
           width={820}
+          centered
           title={
             <S.ModalTitle>
               <span className="icon">{pluginConfig.icon({ color: colorPrimary })}</span>
diff --git a/config-ui/src/routes/layout/layout.tsx b/config-ui/src/routes/layout/layout.tsx
index 82f8aae629a..d3ea40f73fd 100644
--- a/config-ui/src/routes/layout/layout.tsx
+++ b/config-ui/src/routes/layout/layout.tsx
@@ -122,7 +122,7 @@ export const Layout = () => {
                   </>
                 ))}
               </Header>
-              <Content style={{ margin: '16px 24px' }}>
+              <Content style={{ margin: '0 auto', maxWidth: 1188 }}>
                 <Outlet />
               </Content>
               <Footer style={{ color: '#a1a1a1', textAlign: 'center' }}>