diff --git a/backend/app/dto/response/app.go b/backend/app/dto/response/app.go
index 32f70a171..50f7c5976 100644
--- a/backend/app/dto/response/app.go
+++ b/backend/app/dto/response/app.go
@@ -1,9 +1,10 @@
 package response
 
 import (
+	"time"
+
 	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	"github.com/1Panel-dev/1Panel/backend/app/dto/request"
-	"time"
 
 	"github.com/1Panel-dev/1Panel/backend/app/model"
 )
@@ -72,10 +73,11 @@ type AppInstalledDTO struct {
 }
 
 type DatabaseConn struct {
-	Username    string `json:"username"`
-	Password    string `json:"password"`
-	ServiceName string `json:"serviceName"`
-	Port        int64  `json:"port"`
+	Username      string `json:"username"`
+	Password      string `json:"password"`
+	ContainerName string `json:"containerName"`
+	ServiceName   string `json:"serviceName"`
+	Port          int64  `json:"port"`
 }
 
 type AppService struct {
diff --git a/backend/app/service/app_install.go b/backend/app/service/app_install.go
index 0d176acdc..6a39e73d7 100644
--- a/backend/app/service/app_install.go
+++ b/backend/app/service/app_install.go
@@ -188,6 +188,7 @@ func (a *AppInstallService) LoadConnInfo(req dto.OperationWithNameAndType) (resp
 	data.Password = app.Password
 	data.ServiceName = app.ServiceName
 	data.Port = app.Port
+	data.ContainerName = app.ContainerName
 	return data, nil
 }
 
diff --git a/frontend/src/api/interface/app.ts b/frontend/src/api/interface/app.ts
index b97dbdf68..cb762e0af 100644
--- a/frontend/src/api/interface/app.ts
+++ b/frontend/src/api/interface/app.ts
@@ -145,6 +145,7 @@ export namespace App {
         username: string;
         password: string;
         privilege: boolean;
+        containerName: string;
         serviceName: string;
         systemIP: string;
         port: number;
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index b46bcc59a..fc6df81ac 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -514,9 +514,12 @@ const message = {
         rdbHelper3: 'Meeting either condition triggers RDB persistence',
         rdbInfo: 'Ensure that the value in the rule list ranges from 1 to 100000',
 
-        containerConn: 'Container connection address',
-        containerConnHelper: 'PHP runtime environment/container-installed applications use this connection address',
-        remoteConn: 'External connection address',
+        containerConn: 'Container Connection',
+        connAddress: 'Address',
+        connPort: 'Port',
+        containerConnHelper:
+            'This connection address is used by applications running on the PHP execution environment/container installation.',
+        remoteConn: 'External Connection',
         remoteConnHelper2: 'Use this address for non-container or external connections',
         localIP: 'Local IP',
     },
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 9788e36c2..c92ae7ff9 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -501,9 +501,11 @@ const message = {
         rdbHelper3: '符合任意一個條件將會觸發RDB持久化',
         rdbInfo: '請確認規則列表中值在 1-100000 之間',
 
-        containerConn: '容器連接地址',
-        containerConnHelper: 'PHP 運行環境/容器安裝的應用使用此連接地址',
-        remoteConn: '外部連接地址',
+        containerConn: '容器連接',
+        connAddress: '地址',
+        connPort: '端口',
+        containerConnHelper: 'PHP 執行環境/容器安裝的應用程式使用此連接地址',
+        remoteConn: '外部連接',
         remoteConnHelper2: '非容器或外部連接使用此地址',
         localIP: '本機 IP',
     },
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index ad117bc87..b2564eb5e 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -501,9 +501,11 @@ const message = {
         rdbHelper3: '符合任意一个条件将会触发RDB持久化',
         rdbInfo: '请确认规则列表中值在 1-100000 之间',
 
-        containerConn: '容器连接地址',
+        containerConn: '容器连接',
+        connAddress: '地址',
+        connPort: '端口',
         containerConnHelper: 'PHP 运行环境/容器安装的应用使用此连接地址',
-        remoteConn: '外部连接地址',
+        remoteConn: '外部连接',
         remoteConnHelper2: '非容器或外部连接使用此地址',
         localIP: '本机 IP',
     },
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index e19d9799b..5666d0f0e 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -288,6 +288,13 @@ html {
     }
 }
 
+.mini-border-card {
+    width: 100%;
+    .el-card__body {
+        --el-card-padding: 12px 12px 0 22px;
+    }
+}
+
 .xterm-viewport::-webkit-scrollbar {
     width: 8px;
     height: 8px;
diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index aeac7a3e0..3ce019937 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -4,65 +4,93 @@
             <DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
         </template>
         <el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
-            <el-row type="flex" justify="center" v-if="form.from === 'local'">
+            <el-row type="flex" justify="center">
                 <el-col :span="22">
-                    <el-form-item :label="$t('database.containerConn')">
-                        <el-tag>
-                            {{ form.serviceName + ':3306' }}
-                        </el-tag>
-                        <CopyButton :content="form.serviceName + ':3306'" type="icon" />
+                    <el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
+                        <el-card class="mini-border-card">
+                            <el-descriptions :column="1">
+                                <el-descriptions-item :label="$t('database.connAddress')">
+                                    <el-tooltip
+                                        v-if="loadMysqlInfo(true).length > 48"
+                                        :content="loadMysqlInfo(true)"
+                                        placement="top"
+                                    >
+                                        {{ loadMysqlInfo(true).substring(0, 48) }}...
+                                    </el-tooltip>
+                                    <span else>
+                                        {{ loadMysqlInfo(true) }}
+                                    </span>
+                                    <CopyButton :content="loadMysqlInfo(true)" type="icon" />
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('database.connPort')">
+                                    3306
+                                    <CopyButton content="3306" type="icon" />
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-card>
                         <span class="input-help">
                             {{ $t('database.containerConnHelper') }}
                         </span>
                     </el-form-item>
                     <el-form-item :label="$t('database.remoteConn')">
-                        <el-tooltip v-if="loadConnInfo(true).length > 48" :content="loadConnInfo(true)" placement="top">
-                            <el-tag>{{ loadConnInfo(true).substring(0, 48) }}...</el-tag>
-                        </el-tooltip>
-                        <el-tag v-else>{{ loadConnInfo(true) }}</el-tag>
-                        <CopyButton :content="form.systemIP + ':' + form.port" type="icon" />
-                        <span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
+                        <el-card class="mini-border-card">
+                            <el-descriptions :column="1">
+                                <el-descriptions-item :label="$t('database.connAddress')">
+                                    <el-tooltip
+                                        v-if="loadMysqlInfo(false).length > 48"
+                                        :content="loadMysqlInfo(false)"
+                                        placement="top"
+                                    >
+                                        {{ loadMysqlInfo(false).substring(0, 48) }}...
+                                    </el-tooltip>
+                                    <span else>
+                                        {{ loadMysqlInfo(false) }}
+                                    </span>
+                                    <CopyButton :content="loadMysqlInfo(false)" type="icon" />
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('database.connPort')">
+                                    {{ form.port }}
+                                    <CopyButton :content="form.port + ''" type="icon" />
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-card>
+                        <span v-if="form.from === 'local'" class="input-help">
+                            {{ $t('database.remoteConnHelper2') }}
+                        </span>
                     </el-form-item>
-
                     <el-divider border-style="dashed" />
 
-                    <el-form-item :label="$t('database.remoteAccess')" prop="privilege">
-                        <el-switch v-model="form.privilege" @change="onSaveAccess" />
-                        <span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.rootPassword')" :rules="Rules.paramComplexity" prop="password">
-                        <el-input type="password" show-password clearable v-model="form.password">
-                            <template #append>
-                                <CopyButton :content="form.password" />
-                                <el-button @click="random" class="p-ml-5">
-                                    {{ $t('commons.button.random') }}
-                                </el-button>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row type="flex" justify="center" v-if="form.from !== 'local'">
-                <el-col :span="22">
-                    <el-form-item :label="$t('database.remoteConn')">
-                        <el-tooltip
-                            v-if="loadConnInfo(false).length > 48"
-                            :content="loadConnInfo(false)"
-                            placement="top"
+                    <div v-if="form.from === 'local'">
+                        <el-form-item :label="$t('database.remoteAccess')" prop="privilege">
+                            <el-switch v-model="form.privilege" @change="onSaveAccess" />
+                            <span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
+                        </el-form-item>
+                        <el-form-item
+                            :label="$t('database.rootPassword')"
+                            :rules="Rules.paramComplexity"
+                            prop="password"
                         >
-                            <el-tag>{{ loadConnInfo(false).substring(0, 48) }}...</el-tag>
-                        </el-tooltip>
-                        <el-tag v-else>{{ loadConnInfo(false) }}</el-tag>
-                        <CopyButton :content="form.remoteIP + ':' + form.port" type="icon" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.username')">
-                        <el-tag>{{ form.username }}</el-tag>
-                        <CopyButton :content="form.username" type="icon" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.password')">
-                        <el-tag>{{ form.password }}</el-tag>
-                        <CopyButton :content="form.password" type="icon" />
-                    </el-form-item>
+                            <el-input type="password" show-password clearable v-model="form.password">
+                                <template #append>
+                                    <CopyButton :content="form.password" />
+                                    <el-button @click="random" class="p-ml-5">
+                                        {{ $t('commons.button.random') }}
+                                    </el-button>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                    </div>
+
+                    <div v-if="form.from !== 'local'">
+                        <el-form-item :label="$t('commons.login.username')">
+                            <el-tag>{{ form.username }}</el-tag>
+                            <CopyButton :content="form.username" type="icon" />
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.login.password')">
+                            <el-tag>{{ form.password }}</el-tag>
+                            <CopyButton :content="form.password" type="icon" />
+                        </el-form-item>
+                    </div>
                 </el-col>
             </el-row>
         </el-form>
@@ -103,6 +131,7 @@ const form = reactive({
     systemIP: '',
     password: '',
     serviceName: '',
+    containerName: '',
     privilege: false,
     port: 0,
 
@@ -135,10 +164,12 @@ const acceptParams = (param: DialogProps): void => {
     dialogVisible.value = true;
 };
 
-function loadConnInfo(isLocal: boolean) {
-    let ip = isLocal ? form.systemIP : form.remoteIP;
-    let info = ip + ':' + form.port;
-    return info;
+function loadMysqlInfo(isContainer: boolean) {
+    if (isContainer) {
+        return form.from === 'local' ? form.containerName : form.systemIP;
+    } else {
+        return form.from === 'local' ? form.systemIP : form.remoteIP;
+    }
 }
 
 const random = async () => {
@@ -167,6 +198,7 @@ const loadPassword = async () => {
         form.password = res.data.password || '';
         form.port = res.data.port || 3306;
         form.serviceName = res.data.serviceName || '';
+        form.containerName = res.data.containerName || '';
         loadSystemIP();
         return;
     }
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index e4b3c14e0..81ef9c49f 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -4,69 +4,97 @@
             <DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
         </template>
         <el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
-            <el-row type="flex" justify="center" v-if="form.from === 'local'">
+            <el-row type="flex" justify="center">
                 <el-col :span="22">
-                    <el-form-item :label="$t('database.containerConn')">
-                        <el-tag>
-                            {{ form.serviceName + ':' + form.port }}
-                        </el-tag>
-                        <CopyButton :content="form.serviceName + ':' + form.port" type="icon" />
+                    <el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
+                        <el-card class="mini-border-card">
+                            <el-descriptions :column="1">
+                                <el-descriptions-item :label="$t('database.connAddress')">
+                                    <el-tooltip
+                                        v-if="loadPgInfo(true).length > 48"
+                                        :content="loadPgInfo(true)"
+                                        placement="top"
+                                    >
+                                        {{ loadPgInfo(true).substring(0, 48) }}...
+                                    </el-tooltip>
+                                    <span else>
+                                        {{ loadPgInfo(true) }}
+                                    </span>
+                                    <CopyButton :content="loadPgInfo(true)" type="icon" />
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('database.connPort')">
+                                    {{ form.port }}
+                                    <CopyButton :content="form.port + ''" type="icon" />
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-card>
                         <span class="input-help">
                             {{ $t('database.containerConnHelper') }}
                         </span>
                     </el-form-item>
                     <el-form-item :label="$t('database.remoteConn')">
-                        <el-tooltip v-if="loadConnInfo(true).length > 48" :content="loadConnInfo(true)" placement="top">
-                            <el-tag>{{ loadConnInfo(true).substring(0, 48) }}...</el-tag>
-                        </el-tooltip>
-                        <el-tag v-else>{{ loadConnInfo(true) }}</el-tag>
-                        <CopyButton :content="form.systemIP + ':' + form.port" type="icon" />
-                        <span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
+                        <el-card class="mini-border-card">
+                            <el-descriptions :column="1">
+                                <el-descriptions-item :label="$t('database.connAddress')">
+                                    <el-tooltip
+                                        v-if="loadPgInfo(false).length > 48"
+                                        :content="loadPgInfo(false)"
+                                        placement="top"
+                                    >
+                                        {{ loadPgInfo(false).substring(0, 48) }}...
+                                    </el-tooltip>
+                                    <span else>
+                                        {{ loadPgInfo(false) }}
+                                    </span>
+                                    <CopyButton :content="loadPgInfo(false)" type="icon" />
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('database.connPort')">
+                                    {{ form.port }}
+                                    <CopyButton :content="form.port + ''" type="icon" />
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-card>
+                        <span v-if="form.from === 'local'" class="input-help">
+                            {{ $t('database.remoteConnHelper2') }}
+                        </span>
                     </el-form-item>
 
                     <el-divider border-style="dashed" />
-                    <el-form-item :label="$t('commons.login.username')" prop="username">
-                        <el-input type="text" readonly disabled v-model="form.username">
-                            <template #append>
-                                <el-button-group>
-                                    <CopyButton :content="form.username" />
-                                </el-button-group>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
-                        <el-input type="password" show-password clearable v-model="form.password">
-                            <template #append>
-                                <CopyButton :content="form.password" />
-                                <el-button @click="random" class="p-ml-5">
-                                    {{ $t('commons.button.random') }}
-                                </el-button>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row type="flex" justify="center" v-if="form.from !== 'local'">
-                <el-col :span="22">
-                    <el-form-item :label="$t('database.remoteConn')">
-                        <el-tooltip
-                            v-if="loadConnInfo(false).length > 48"
-                            :content="loadConnInfo(false)"
-                            placement="top"
+                    <div v-if="form.from === 'local'">
+                        <el-form-item :label="$t('commons.login.username')" prop="username">
+                            <el-input type="text" readonly disabled v-model="form.username">
+                                <template #append>
+                                    <el-button-group>
+                                        <CopyButton :content="form.username" />
+                                    </el-button-group>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item
+                            :label="$t('commons.login.password')"
+                            :rules="Rules.paramComplexity"
+                            prop="password"
                         >
-                            <el-tag>{{ loadConnInfo(false).substring(0, 48) }}...</el-tag>
-                        </el-tooltip>
-                        <el-tag v-else>{{ loadConnInfo(false) }}</el-tag>
-                        <CopyButton :content="form.remoteIP + ':' + form.port" type="icon" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.username')">
-                        <el-tag>{{ form.username }}</el-tag>
-                        <CopyButton :content="form.username" type="icon" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.password')">
-                        <el-tag>{{ form.password }}</el-tag>
-                        <CopyButton :content="form.password" type="icon" />
-                    </el-form-item>
+                            <el-input type="password" show-password clearable v-model="form.password">
+                                <template #append>
+                                    <CopyButton :content="form.password" />
+                                    <el-button @click="random" class="p-ml-5">
+                                        {{ $t('commons.button.random') }}
+                                    </el-button>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                    </div>
+                    <div v-if="form.from !== 'local'">
+                        <el-form-item :label="$t('commons.login.username')">
+                            <el-tag>{{ form.username }}</el-tag>
+                            <CopyButton :content="form.username" type="icon" />
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.login.password')">
+                            <el-tag>{{ form.password }}</el-tag>
+                            <CopyButton :content="form.password" type="icon" />
+                        </el-form-item>
+                    </div>
                 </el-col>
             </el-row>
         </el-form>
@@ -105,6 +133,7 @@ const dialogVisible = ref(false);
 const form = reactive({
     systemIP: '',
     password: '',
+    containerName: '',
     serviceName: '',
     privilege: false,
     port: 0,
@@ -137,10 +166,12 @@ const acceptParams = (param: DialogProps): void => {
     dialogVisible.value = true;
 };
 
-function loadConnInfo(isLocal: boolean) {
-    let ip = isLocal ? form.systemIP : form.remoteIP;
-    let info = ip + ':' + form.port;
-    return info;
+function loadPgInfo(isContainer: boolean) {
+    if (isContainer) {
+        return form.from === 'local' ? form.containerName : form.systemIP;
+    } else {
+        return form.from === 'local' ? form.systemIP : form.remoteIP;
+    }
 }
 
 const random = async () => {
@@ -153,7 +184,6 @@ const handleClose = () => {
 
 const loadAccess = async () => {
     if (form.from === 'local') {
-        // const res = await loadRemoteAccess(form.type, form.database);
         form.privilege = false;
     }
 };
@@ -169,6 +199,7 @@ const loadPassword = async () => {
         form.username = res.data.username || '';
         form.password = res.data.password || '';
         form.port = res.data.port || 5432;
+        form.containerName = res.data.containerName || '';
         form.serviceName = res.data.serviceName || '';
         loadSystemIP();
         return;
diff --git a/frontend/src/views/database/redis/password/index.vue b/frontend/src/views/database/redis/password/index.vue
index bd1d0bc2c..9ca698c86 100644
--- a/frontend/src/views/database/redis/password/index.vue
+++ b/frontend/src/views/database/redis/password/index.vue
@@ -7,22 +7,41 @@
             <el-row type="flex" justify="center">
                 <el-col :span="22">
                     <el-form-item :label="$t('database.containerConn')">
-                        <el-tag>
-                            {{ form.serviceName + ':6379' }}
-                        </el-tag>
-                        <CopyButton :content="form.serviceName + ':6379'" type="icon" />
+                        <el-card class="mini-border-card">
+                            <el-descriptions :column="1">
+                                <el-descriptions-item :label="$t('database.connAddress')">
+                                    {{ form.containerName }}
+                                    <CopyButton :content="form.containerName" type="icon" />
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('database.connPort')">
+                                    6379
+                                    <CopyButton content="6379" type="icon" />
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-card>
                         <span class="input-help">
                             {{ $t('database.containerConnHelper') }}
                         </span>
                     </el-form-item>
                     <el-form-item :label="$t('database.remoteConn')">
-                        <el-tooltip v-if="loadConnInfo().length > 48" :content="loadConnInfo()" placement="top">
-                            <el-tag>{{ loadConnInfo().substring(0, 48) }}...</el-tag>
-                        </el-tooltip>
-                        <el-tag v-else>{{ loadConnInfo() }}</el-tag>
-                        <CopyButton :content="form.systemIP + ':6379'" type="icon" />
-                        <span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
+                        <el-card class="mini-border-card">
+                            <el-descriptions :column="1">
+                                <el-descriptions-item :label="$t('database.connAddress')">
+                                    {{ form.systemIP }}
+                                    <CopyButton :content="form.systemIP" type="icon" />
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('database.connPort')">
+                                    {{ form.port }}
+                                    <CopyButton :content="form.port + ''" type="icon" />
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </el-card>
+                        <span class="input-help">
+                            {{ $t('database.remoteConnHelper2') }}
+                        </span>
                     </el-form-item>
+
+                    <el-divider border-style="dashed" />
                     <el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
                         <el-input type="password" show-password clearable v-model="form.password">
                             <template #append>
@@ -70,8 +89,10 @@ const loading = ref(false);
 
 const dialogVisible = ref(false);
 const form = ref<App.DatabaseConnInfo>({
-    privilege: false,
+    username: '',
     password: '',
+    privilege: false,
+    containerName: '',
     serviceName: '',
     systemIP: '',
     port: 0,
@@ -119,10 +140,6 @@ const onSubmit = async () => {
         });
 };
 
-function loadConnInfo() {
-    return form.value.systemIP + ':' + form.value.port;
-}
-
 const onSave = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {