diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
index d6d08675..f95f9c2f 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
@@ -49,7 +49,8 @@ const PlacementSurface = forwardRef((props, refs) => {
                 {lines?.map((line, index) => (
                   <div className="eaves-keraba-item" id={index} key={index}>
                     <div className="eaves-keraba-th">
-                      {line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}
+                      {/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
+                      {num[index]}
                     </div>
                     <div className="eaves-keraba-td">
                       <div className="outline-form">
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index d6666d5c..c22d2248 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -241,7 +241,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
 
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
-      <div className={`modal-pop-wrap l-2`}>
+      <div className={`modal-pop-wrap lr-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -249,35 +249,45 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
           </button>
         </div>
         <div className="modal-body">
-          <div className="plane-shape-menu">
-            {types.map((type) => (
-              <button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
-                <div className="shape-box">
-                  <Image
-                    src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{
-                      width: 'auto',
-                      height: 'auto',
-                      transform: getInversionState(),
-                    }}
-                  />
-                </div>
-              </button>
-            ))}
-          </div>
-          <div className="shape-library">
-            <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
-            <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
-            <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
-          </div>
-          <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={applySurfaces}>
-              {getMessage('write')}
-            </button>
+          <div className="plane-frame-wrap">
+            <div className="plane-shape-wrap">
+              <div className="plane-shape-menu">
+                {types.map((type) => (
+                  <button
+                    key={type.id}
+                    className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
+                    onClick={() => setSelectedType(type)}
+                  >
+                    <div className="shape-box">
+                      <Image
+                        src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
+                        alt="react"
+                        width={0}
+                        height={0}
+                        style={{
+                          width: 'auto',
+                          height: 'auto',
+                          transform: getInversionState(),
+                        }}
+                      />
+                    </div>
+                  </button>
+                ))}
+              </div>
+              <div className="shape-library">
+                <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
+                <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
+                <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
+              </div>
+            </div>
+            <div className="plane-detail-wrap">
+              <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
+              <div className="plane-shape-btn">
+                <button className="btn-frame modal act" onClick={applySurfaces}>
+                  {getMessage('write')}
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>