diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 147c3f9..86699d9 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -153,7 +153,7 @@ export default function CanvasPage() {
                     {/* <EachPropertyChange/> */}
 
                     {/* 면 흐름 설정 */}
-                    {/* <DrawingFlow/> */}
+                    <DrawingFlow/>
 
                     {/* 지붕모듈선택 */}
                     {/* <RoofModuleOption/> */}
diff --git a/src/components/canvas/modal/drawingflow/DrawingFlow.jsx b/src/components/canvas/modal/drawingflow/DrawingFlow.jsx
index a415451..4c2c6a0 100644
--- a/src/components/canvas/modal/drawingflow/DrawingFlow.jsx
+++ b/src/components/canvas/modal/drawingflow/DrawingFlow.jsx
@@ -10,7 +10,7 @@ export default function DrawingFlow(){
     const [compasDeg, setCompasDeg] = useState(0);
     return(
         <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap lx`}>
+            <div className={`modal-pop-wrap ml`}>
                 <div className="modal-head">
                     <h1 className="title">面フローの設定 </h1>
                     <button className="modal-close">닫기</button>
@@ -51,34 +51,36 @@ export default function DrawingFlow(){
                                     <label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
                                 </div>
                             </div>
-                            <div className="compas-box">
-                                <div className="compas-box-inner">
-                                    <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div>
-                                    <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}><i>12</i></div>
-                                    <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}><i>11</i></div>
-                                    <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}><i>10</i></div>
-                                    <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}><i>9</i></div>
-                                    <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}><i>8</i></div>
-                                    <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>7</i></div>
-                                    <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}><i>6</i></div>
-                                    <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}><i>5</i></div>
-                                    <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}><i>4</i></div>
-                                    <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}><i>3</i></div>
-                                    <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}><i>2</i></div>
-                                    <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>1</i></div>
-                                    <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}><i>24</i></div>
-                                    <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}><i>23</i></div>
-                                    <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}><i>22</i></div>
-                                    <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}><i>21</i></div>
-                                    <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}><i>20</i></div>
-                                    <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>19</i></div>
-                                    <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}><i>18</i></div>
-                                    <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}><i>17</i></div>
-                                    <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}><i>16</i></div>
-                                    <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}><i>15</i></div>
-                                    <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}><i>14</i></div>
-                                    <div className="compas">
-                                        <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
+                            <div className="draw-flow-wrap">
+                                <div className="compas-box">
+                                    <div className="compas-box-inner">
+                                        <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div>
+                                        <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}><i>12</i></div>
+                                        <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}><i>11</i></div>
+                                        <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}><i>10</i></div>
+                                        <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}><i>9</i></div>
+                                        <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}><i>8</i></div>
+                                        <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>7</i></div>
+                                        <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}><i>6</i></div>
+                                        <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}><i>5</i></div>
+                                        <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}><i>4</i></div>
+                                        <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}><i>3</i></div>
+                                        <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}><i>2</i></div>
+                                        <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>1</i></div>
+                                        <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}><i>24</i></div>
+                                        <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}><i>23</i></div>
+                                        <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}><i>22</i></div>
+                                        <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}><i>21</i></div>
+                                        <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}><i>20</i></div>
+                                        <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>19</i></div>
+                                        <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}><i>18</i></div>
+                                        <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}><i>17</i></div>
+                                        <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}><i>16</i></div>
+                                        <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}><i>15</i></div>
+                                        <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}><i>14</i></div>
+                                        <div className="compas">
+                                            <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx
index ea59f5f..53e8dbb 100644
--- a/src/components/publishpage/PublishPage.jsx
+++ b/src/components/publishpage/PublishPage.jsx
@@ -163,11 +163,15 @@ export default function PublishPage() {
                     <li>2024-10-31</li>
                     <li>*그리드 이동, 보조선 이동, 보조선 복사 pop 수정</li>
                   </ul>
-                  <ul>
+                  <ul className='mb10'>
                     <li>2024-11-04</li>
                     <li>*배치면 초기설정 pop 이미지 불러오기 영역 수정</li>
                     <li>*견적서 견적 특이사항 영역 닫힘 열림 추가</li>
                   </ul>
+                  <ul>
+                    <li>2024-11-05</li>
+                    <li>*면 흐름 설정 pop 수정</li>
+                  </ul>
                 </td>
                 <td className="t-center">2024-10-28</td>
               </tr>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index da421f1..01b47c4 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -1157,6 +1157,10 @@ $alert-color: #101010;
         .object-direction-wrap{
             flex: 1;
         }
+        &:first-child{
+            flex: none;
+            width: 195px;
+        }
     }
 }
 
@@ -1229,6 +1233,7 @@ $alert-color: #101010;
                 width: 5px;
                 height: 5px;
                 background-color: #fff;
+                border-radius: 50%;
             }
             i{
                 color: #fff;
@@ -1253,6 +1258,9 @@ $alert-color: #101010;
     }
 }
 
+.draw-flow-wrap{
+    margin: 10px 0;
+}
 
 // 지붕모듈선택
 .roof-module-tab{