diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
index 8d0ce8c2..b550b424 100644
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
   }, [compasDeg])
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lx mount`}>
+      <div className={`modal-pop-wrap ml mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -103,28 +103,30 @@ export default function FlowDirectionSetting(props) {
                   <label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
                 </div>
               </div>
-              <div className="compas-box">
-                <div className="compas-box-inner">
-                  {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
-                    <div
-                      key={index}
-                      className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
-                      onClick={() => setCompasDeg(15 * (12 + index))}
-                    >
-                      <i>{13 - index}</i>
+              <div className="draw-flow-wrap">
+                <div className="compas-box">
+                  <div className="compas-box-inner">
+                    {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
+                      <div
+                        key={index}
+                        className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
+                        onClick={() => setCompasDeg(15 * (12 + index))}
+                      >
+                        <i>{13 - index}</i>
+                      </div>
+                    ))}
+                    {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
+                      <div
+                        key={index}
+                        className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
+                        onClick={() => setCompasDeg(15 * (index + 1))}
+                      >
+                        <i>{24 - index}</i>
+                      </div>
+                    ))}
+                    <div className="compas">
+                      <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
                     </div>
-                  ))}
-                  {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
-                    <div
-                      key={index}
-                      className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
-                      onClick={() => setCompasDeg(15 * (index + 1))}
-                    >
-                      <i>{24 - index}</i>
-                    </div>
-                  ))}
-                  <div className="compas">
-                    <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
                   </div>
                 </div>
               </div>
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 99b72eb4..decb7fa3 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -180,8 +180,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                 </tr>
                 <tr>
                   <th>
-                    {getMessage('modal.placement.initial.setting.size')}
-                    <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                    <div className="tip-wrap">
+                      {getMessage('modal.placement.initial.setting.size')}
+                      <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                    </div>
                   </th>
                   <td>
                     <div className="pop-form-radio">
@@ -252,8 +254,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                 </tr>
                 <tr>
                   <th>
-                    {getMessage('modal.placement.initial.setting.roof.material')}
-                    <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                    <div className="tip-wrap">
+                      {getMessage('modal.placement.initial.setting.roof.material')}
+                      <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                    </div>
                   </th>
                   <td>
                     <div className="placement-option">