diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
index 81971ed096..c2f5f24112 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
@@ -22,7 +22,7 @@
             :class="'form-item-' + themes"
           >
             <el-segmented
-              v-model="state.commonBackground.paddingMode"
+              v-model="state.commonBackground.innerPadding2.mode"
               :options="paddingModes"
               size="small"
               style="width: 100%"
@@ -38,7 +38,7 @@
                     controls-position="right"
                     :min="0"
                     :max="100"
-                    v-model="state.commonBackground.innerPadding"
+                    v-model="state.commonBackground.innerPadding2.top"
                     @change="onBackgroundChange"
                   />
                 </div>
@@ -50,8 +50,8 @@
                     controls-position="right"
                     :min="0"
                     :max="100"
-                    v-model="state.commonBackground.innerPaddingLeft"
-                    :disabled="state.commonBackground.paddingMode === PaddingMode.Uniform"
+                    v-model="state.commonBackground.innerPadding2.left"
+                    :disabled="state.commonBackground.innerPadding2.mode === PaddingMode.Uniform"
                     @change="onBackgroundChange"
                   />
                 </div>
@@ -62,11 +62,11 @@
                   <el-input-number
                     style="width: 80%"
                     :effect="themes"
-                    :disabled="state.commonBackground.paddingMode !== PaddingMode.PerSide"
+                    :disabled="state.commonBackground.innerPadding2.mode !== PaddingMode.PerSide"
                     controls-position="right"
                     :min="0"
                     :max="100"
-                    v-model="state.commonBackground.innerPaddingBottom"
+                    v-model="state.commonBackground.innerPadding2.bottom"
                     @change="onBackgroundChange"
                   />
                 </div>
@@ -75,11 +75,11 @@
                   <el-input-number
                     style="width: 80%"
                     :effect="themes"
-                    :disabled="state.commonBackground.paddingMode !== PaddingMode.PerSide"
+                    :disabled="state.commonBackground.innerPadding2.mode !== PaddingMode.PerSide"
                     controls-position="right"
                     :min="0"
                     :max="100"
-                    v-model="state.commonBackground.innerPaddingRight"
+                    v-model="state.commonBackground.innerPadding2.right"
                     @change="onBackgroundChange"
                   />
                 </div>
@@ -339,7 +339,9 @@ const props = withDefaults(
 import { State, PaddingMode } from '@/components/visualization/component-background/Types'
 
 const state = reactive<State>({
-  commonBackground: {},
+  commonBackground: {
+    innerPadding2: {}
+  },
   BackgroundShowMap: {},
   checked: false,
   backgroundOrigin: {},
@@ -384,7 +386,19 @@ const queryBackground = () => {
 }
 
 const init = () => {
-  state.commonBackground = deepCopy(props.commonBackgroundPop)
+  const commonBackgroundPop = deepCopy(props.commonBackgroundPop)
+  const innerPadding = commonBackgroundPop.innerPadding
+  if (innerPadding) {
+    commonBackgroundPop.innerPadding2 = {
+      mode: PaddingMode.Uniform,
+      top: innerPadding,
+      right: innerPadding,
+      bottom: innerPadding,
+      left: innerPadding
+    }
+    commonBackgroundPop.innerPadding = undefined
+  }
+  state.commonBackground = commonBackgroundPop
   if (state.commonBackground.outerImage) {
     state.fileList = [{ url: imgUrlTrans(state.commonBackground.outerImage) }]
   } else {
@@ -414,16 +428,19 @@ const upload = file => {
   })
 }
 
-const onBackgroundChange = () => {
-  if (state.commonBackground.paddingMode === PaddingMode.Uniform) {
-    state.commonBackground.innerPaddingLeft = state.commonBackground.innerPadding
-    state.commonBackground.innerPaddingRight = state.commonBackground.innerPadding
-    state.commonBackground.innerPaddingBottom = state.commonBackground.innerPadding
-  } else if (state.commonBackground.paddingMode === PaddingMode.V_H) {
-    state.commonBackground.innerPaddingRight =
-      state.commonBackground.innerPaddingLeft ?? state.commonBackground.innerPadding
-    state.commonBackground.innerPaddingBottom = state.commonBackground.innerPadding
+const updateInnerPadding = () => {
+  if (state.commonBackground.innerPadding2.mode === PaddingMode.Uniform) {
+    state.commonBackground.innerPadding2.left = state.commonBackground.innerPadding2.top
+    state.commonBackground.innerPadding2.right = state.commonBackground.innerPadding2.top
+    state.commonBackground.innerPadding2.bottom = state.commonBackground.innerPadding2.top
+  } else if (state.commonBackground.innerPadding2.mode === PaddingMode.V_H) {
+    state.commonBackground.innerPadding2.right = state.commonBackground.innerPadding2.left
+    state.commonBackground.innerPadding2.bottom = state.commonBackground.innerPadding2.top
   }
+}
+
+const onBackgroundChange = () => {
+  updateInnerPadding()
   emits('onBackgroundChange', state.commonBackground)
 }
 
diff --git a/core/core-frontend/src/components/visualization/component-background/Types.ts b/core/core-frontend/src/components/visualization/component-background/Types.ts
index 6685770c41..f1ca8c2ccb 100644
--- a/core/core-frontend/src/components/visualization/component-background/Types.ts
+++ b/core/core-frontend/src/components/visualization/component-background/Types.ts
@@ -10,11 +10,16 @@ export enum PaddingMode {
   PerSide = 'per_side'
 }
 
+export interface InnerPadding {
+  mode?: PaddingMode
+  top?: number
+  right?: number
+  bottom?: number
+  left?: number
+}
+
 export interface CommonBackground {
   innerPadding?: number
-  innerPaddingRight?: number
-  innerPaddingBottom?: number
-  innerPaddingLeft?: number
   borderRadius?: number
   backdropFilterEnable?: boolean
   backdropFilter?: number
@@ -24,8 +29,8 @@ export interface CommonBackground {
   backgroundType?: BackgroundType
   innerImageColor?: string
   innerImage?: string
-  outerImage?: string | null
-  paddingMode?: PaddingMode
+  outerImage?: string
+  innerPadding2?: InnerPadding
 }
 
 export interface State {
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 53ddb22a2f..2f47f16fc4 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -189,12 +189,8 @@ export const COMMON_COMPONENT_BACKGROUND_BASE: CommonBackground = {
   innerImage: 'board/board_1.svg',
   outerImage: null,
   innerPadding: 12,
-  innerPaddingRight: 12,
-  innerPaddingBottom: 12,
-  innerPaddingLeft: 12,
   borderRadius: 0,
-  backdropFilter: 4,
-  paddingMode: PaddingMode.Uniform
+  backdropFilter: 4
 }
 
 export const COMMON_COMPONENT_BACKGROUND_LIGHT = {