diff --git a/public/static/images/canvas/alert_close.svg b/public/static/images/canvas/alert_close.svg
new file mode 100644
index 0000000..54356b5
--- /dev/null
+++ b/public/static/images/canvas/alert_close.svg
@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<circle id="Ellipse 2012" cx="10" cy="10" r="9.5" fill="white" stroke="#272727"/>
+<g id="elements">
+<path id="Vector" d="M12.9994 13L7 7M7.00064 13L13 7" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>
diff --git a/public/static/images/canvas/outline_cul.png b/public/static/images/canvas/outline_cul.png
new file mode 100644
index 0000000..f9e9b7f
Binary files /dev/null and b/public/static/images/canvas/outline_cul.png differ
diff --git a/public/static/images/canvas/reset_ico.svg b/public/static/images/canvas/reset_ico.svg
new file mode 100644
index 0000000..14fac20
--- /dev/null
+++ b/public/static/images/canvas/reset_ico.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M10.0046 1V2.5661C10.0046 2.71303 9.82091 2.77954 9.72684 2.66667C8.81131 1.64375 7.48083 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11C8.76142 11 11 8.76142 11 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 8aa4467..e0c41e1 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -6,9 +6,7 @@ import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
 import GridMove from '@/components/canvas/modal/gridoption/GridMove'
 import GridOption from '@/components/canvas/modal/gridoption/GridOption'
 import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
-import PlacementGuidePop from '@/components/canvas/modal/placementsetting/PlacementGuidePop'
 import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
-import RoofingMaterialGudiePop from '@/components/canvas/modal/placementsetting/RoofingMaterialGuidePop'
 import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
 import Header from '@/components/layout/Header'
 import { modalState } from '@/store/modalAtom'
@@ -29,9 +27,7 @@ export default function CanvasPage() {
                         <CanvasLayout menuValue={menuValue}/>
                     </div>
                     {/* 배치면 초기 설정 */}
-                    <PlacementSettingPop/>
-                    <PlacementGuidePop/>
-                    <RoofingMaterialGudiePop/>
+                    {/* <PlacementSettingPop/> */}
 
                     {/* 캔버스 기본 셋팅 */}
                     {/* {modalOption.option && <SettingModal01/>} */}
@@ -42,7 +38,7 @@ export default function CanvasPage() {
                     {/* {modalOption.gridmove && <GridMove/>} */}
 
                     {/* 외벽선 그리기 */}
-                    {/* {modalOption.outerwall && <OuterLineWall/>} */}
+                    {modalOption.outerwall && <OuterLineWall/>}
                 </div>
             </div>
         </div>
diff --git a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
index f2174c3..6b4a43e 100644
--- a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
+++ b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx
@@ -4,6 +4,11 @@ import { useState } from "react";
 import WithDraggable from "@/components/common/draggable/withDraggable";
 import { modalState } from "@/store/modalAtom";
 import { useRecoilState } from "recoil";
+import Tab01 from "./Tab01";
+import Tab02 from "./Tab02";
+import Tab03 from "./Tab03";
+import Tab04 from "./Tab04";
+import Tab05 from "./Tab05";
 
 
 export default function OuterLineWall (){
@@ -19,7 +24,7 @@ export default function OuterLineWall (){
     }
     return(
         <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap ssm ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+            <div className={`modal-pop-wrap r ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
                 <div className="modal-head">
                     <h1 className="title">外壁線を描</h1>
                     <button className="modal-close" onClick={HandleClickClose}>닫기</button>
@@ -58,32 +63,15 @@ export default function OuterLineWall (){
                             対角線
                         </button>
                     </div>
-                    <div className="modal-check-btn-wrap">
-                        <h3 className="check-wrap-title">設定</h3>
-                        <div className="outer-line-wrap">
-                            <div className="form-input">
-                                <label htmlFor="">長さ (mm)</label>
-                                <input type="text"  className="input-origin block" placeholder="320mm"/>
-                            </div>
-                            <div className="form-input">
-                                <label htmlFor="">方向 (矢印)</label>
-                                <input type="text"  className="input-origin block" placeholder="320mm"/>
-                            </div>
-                        </div>
-                        <div className="flex-check-box for2 btn">
-                            <button className="arr-btn dark">
-                                <span>外壁線確定</span>
-                            </button>
-                            <button className="arr-btn dark act">
-                                <span>一変戦に戻る</span>
-                            </button>
-                            <button className="arr-btn dark">
-                                <span>外壁の削除</span>
-                            </button>
-                            <button className="arr-btn dark">
-                                <span>外壁の選択、移動</span>
-                            </button>
-                        </div>
+                    {buttonAct === 1 && <Tab01/>}
+                    {buttonAct === 2 && <Tab02/>}
+                    {buttonAct === 3 && <Tab03/>}
+                    {buttonAct === 4 && <Tab04/>}
+                    {buttonAct === 5 && <Tab05/>}
+                    
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal mr5">一変戦に戻る</button>
+                        <button className="btn-frame modal act">外壁線確定</button>
                     </div>
                 </div>
             </div>
diff --git a/src/components/canvas/modal/outerlinesetting/Tab01.jsx b/src/components/canvas/modal/outerlinesetting/Tab01.jsx
new file mode 100644
index 0000000..52ec334
--- /dev/null
+++ b/src/components/canvas/modal/outerlinesetting/Tab01.jsx
@@ -0,0 +1,24 @@
+export default function Tab01(){
+    return(
+        <div className="outline-wrap">
+            <div className="outline-inner">
+                <div className="outline-form">
+                    <span className="mr10">長さ(mm)</span>
+                    <div className="input-grid" style={{width: '63px'}}>
+                        <input type="text" className="input-origin block" defaultValue={100}/>
+                    </div>
+                    <button className="reset-btn"></button>
+                </div>
+                <div className="outline-form">
+                    <span>方向 (矢印)</span>
+                    <div className="grid-direction">
+                        <button className="direction up"></button>
+                        <button className="direction down act"></button>
+                        <button className="direction left"></button>
+                        <button className="direction right"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerlinesetting/Tab02.jsx b/src/components/canvas/modal/outerlinesetting/Tab02.jsx
new file mode 100644
index 0000000..8886d6e
--- /dev/null
+++ b/src/components/canvas/modal/outerlinesetting/Tab02.jsx
@@ -0,0 +1,42 @@
+export default function Tab02(){
+    return(
+        <div className="outline-wrap">
+            <div className="outline-inner">
+                <div className="outline-form">
+                    <span className="mr10">長さ(mm)</span>
+                    <div className="input-grid" style={{width: '63px'}}>
+                        <input type="text" className="input-origin block" defaultValue={1000}/>
+                    </div>
+                    <button className="reset-btn"></button>
+                </div>
+                <div className="outline-form">
+                    <span>方向 (矢印)</span>
+                    <div className="grid-direction">
+                        <button className="direction up"></button>
+                        <button className="direction down act"></button>
+                        <button className="direction left"></button>
+                        <button className="direction right"></button>
+                    </div>
+                </div>
+            </div>
+            <div className="outline-inner">
+                <div className="outline-form">
+                    <span className="mr10">長さ(mm)</span>
+                    <div className="input-grid" style={{width: '63px'}}>
+                        <input type="text" className="input-origin block" defaultValue={1000}/>
+                    </div>
+                    <button className="reset-btn"></button>
+                </div>
+                <div className="outline-form">
+                    <span>方向 (矢印)</span>
+                    <div className="grid-direction">
+                        <button className="direction up"></button>
+                        <button className="direction down act"></button>
+                        <button className="direction left"></button>
+                        <button className="direction right"></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerlinesetting/Tab03.jsx b/src/components/canvas/modal/outerlinesetting/Tab03.jsx
new file mode 100644
index 0000000..0cef635
--- /dev/null
+++ b/src/components/canvas/modal/outerlinesetting/Tab03.jsx
@@ -0,0 +1,64 @@
+export default function Tab03(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">角度</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={4}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                </div>
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={5000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                    <div className="outline-form">
+                        <span>方向 (矢印)</span>
+                        <div className="grid-direction">
+                            <button className="direction up"></button>
+                            <button className="direction down act"></button>
+                            <button className="direction left"></button>
+                            <button className="direction right"></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="outline-wrap">
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">角度</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={6}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                </div>
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={3000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                    <div className="outline-form">
+                        <span>方向 (矢印)</span>
+                        <div className="grid-direction">
+                            <button className="direction up"></button>
+                            <button className="direction down act"></button>
+                            <button className="direction left"></button>
+                            <button className="direction right"></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerlinesetting/Tab04.jsx b/src/components/canvas/modal/outerlinesetting/Tab04.jsx
new file mode 100644
index 0000000..1c0c237
--- /dev/null
+++ b/src/components/canvas/modal/outerlinesetting/Tab04.jsx
@@ -0,0 +1,31 @@
+import Image from "next/image";
+
+export default function Tab04(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="cul-wrap">
+                    <div className="outline-box">
+                        <div className="outline-form">
+                            <span className="mr10">角度</span>
+                            <div className="input-grid" style={{width: '63px'}}>
+                                <input type="text" className="input-origin block" defaultValue={4}/>
+                            </div>
+                            <button className="reset-btn"></button>
+                        </div>
+                        <div className="outline-form">
+                            <span className="mr10">長さ(mm)</span>
+                            <div className="input-grid" style={{width: '63px'}}>
+                                <input type="text" className="input-origin block" defaultValue={5000}/>
+                            </div>
+                            <button className="reset-btn"></button>
+                        </div>
+                    </div>
+                    <div className="cul-box">
+                        <Image src="/static/images/canvas/outline_cul.png" alt="react" width={69} height={59} />
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/outerlinesetting/Tab05.jsx b/src/components/canvas/modal/outerlinesetting/Tab05.jsx
new file mode 100644
index 0000000..f5d16dc
--- /dev/null
+++ b/src/components/canvas/modal/outerlinesetting/Tab05.jsx
@@ -0,0 +1,52 @@
+export default function Tab05(){
+    return(
+        <>
+            <div className="outline-wrap">
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">対角線の<br/>長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={1000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                </div>
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '63px'}}>
+                            <input type="text" className="input-origin block" defaultValue={5000}/>
+                        </div>
+                        <button className="reset-btn"></button>
+                    </div>
+                    <div className="outline-form">
+                        <span>方向 (矢印)</span>
+                        <div className="grid-direction">
+                            <button className="direction up"></button>
+                            <button className="direction down act"></button>
+                            <button className="direction left"></button>
+                            <button className="direction right"></button>
+                        </div>
+                    </div>
+                </div>
+                <div className="outline-inner">
+                    <div className="outline-form">
+                        <span className="mr10">長さ(mm)</span>
+                        <div className="input-grid" style={{width: '98px'}}>
+                            <input type="text" className="input-origin block" defaultValue={8000}/>
+                        </div>
+                    </div>
+                    <div className="outline-form">
+                        <span>方向 (矢印)</span>
+                        <div className="grid-direction">
+                            <button className="direction up"></button>
+                            <button className="direction down act"></button>
+                            <button className="direction left"></button>
+                            <button className="direction right"></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/placementsetting/PlacementGuidePop.jsx b/src/components/canvas/modal/placementsetting/PlacementGuidePop.jsx
index ad989e9..8e305dc 100644
--- a/src/components/canvas/modal/placementsetting/PlacementGuidePop.jsx
+++ b/src/components/canvas/modal/placementsetting/PlacementGuidePop.jsx
@@ -1,19 +1,16 @@
-import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function PlacementGuidePop(){
-
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap sm`}>
+            <div className={`modal-pop-wrap sm alert`}>
                 <div className="modal-head">
-                    <h1 className="title">寸法入力方法案内</h1>
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
-                    <div className="placement-table">
+                    <div className="alert-title">寸法入力方法案内</div>
+                    <div className="placement-table light">
                         <table>
                             <colgroup>
-                                <col style={{width: '100px'}}/>
+                                <col style={{width: '60px'}}/>
                                 <col />
                             </colgroup>
                             <tbody>
@@ -34,6 +31,5 @@ export default function PlacementGuidePop(){
                     </div>
                 </div>
             </div>
-        </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
index 541dfb7..1f50128 100644
--- a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
+++ b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
@@ -1,4 +1,6 @@
 import WithDraggable from "@/components/common/draggable/withDraggable";
+import PlacementGuidePop from "./PlacementGuidePop";
+import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
 
 export default function PlacementSettingPop(){
 
@@ -102,6 +104,8 @@ export default function PlacementSettingPop(){
                         <button className="btn-frame modal act">保存</button>
                     </div>
                 </div>
+                <PlacementGuidePop/>
+                <RoofingMaterialGudiePop/>
             </div>
         </WithDraggable>
     )
diff --git a/src/components/canvas/modal/placementsetting/RoofingMaterialGuidePop.jsx b/src/components/canvas/modal/placementsetting/RoofingMaterialGuidePop.jsx
index 963a24f..e0df9ae 100644
--- a/src/components/canvas/modal/placementsetting/RoofingMaterialGuidePop.jsx
+++ b/src/components/canvas/modal/placementsetting/RoofingMaterialGuidePop.jsx
@@ -1,18 +1,14 @@
-import WithDraggable from "@/components/common/draggable/withDraggable";
 
 export default function RoofingMaterialGudiePop(){
 
     return(
-        <WithDraggable isShow={true}>
-            <div className={`modal-pop-wrap ssm`}>
+            <div className={`modal-pop-wrap ssm alert`}>
                 <div className="modal-head">
-                    <h1 className="title">屋根材選択案内</h1>
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
                     <div className="modal-guide">対応可能な屋根材や足場は限定されますので、必ず事前マニュアルをご確認ください。</div>
                 </div>
             </div>
-        </WithDraggable>
     )
 }
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 392fb3f..4711960 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -2,6 +2,7 @@ $pop-color: #fff;
 $pop-normal-weight: 400;
 $pop-bold-weight: 500;
 $pop-normal-size: 12px;
+$alert-color: #101010;
 
 @keyframes mountpop{
     from{opacity: 0; scale: 0.95;}
@@ -26,6 +27,9 @@ $pop-normal-size: 12px;
     background-color: #272727;
     z-index: 9999999;
     overflow: hidden;
+    &.r{
+        width: 400px;
+    }
     &.sm{
         width: 580px;
     }
@@ -44,13 +48,42 @@ $pop-normal-size: 12px;
     &.unmount{
         animation: unmountpop .17s ease-in-out forwards;
     }
+    &.alert{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: transparent;
+        border: none;
+        .modal-head{
+            background-color: transparent;
+            padding: 0 0 8px;
+            .modal-close{
+                width: 20px;
+                height: 20px;
+                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
+            }
+        }
+        .modal-body{
+            background-color: #fff;
+            padding: 22px;
+            border-radius: 4px;
+            border: 1px solid #101010;
+            color: $alert-color;
+            .alert-title{
+                font-size: 13px;
+                font-weight: 700;
+                color: $alert-color;
+                margin-bottom: 15px;
+            }
+        }
+    }
 }
 .modal-head{
     display: flex;
     align-items: center;
     padding: 10px 24px;
     background-color: #000;
-    cursor: pointer;
     h1.title{
         font-size: 13px;
         color: $pop-color;
@@ -66,7 +99,7 @@ $pop-normal-size: 12px;
     }
 }
 .modal-body{
-    padding: 15px;
+    padding: 24px;
     .modal-btn-wrap{
         display: flex;
         align-items: center;
@@ -123,9 +156,8 @@ $pop-normal-size: 12px;
     .modal-guide{
         display: block;
         font-size: $pop-normal-size;
-        color: $pop-color;
+        color: $alert-color;
         font-weight: $pop-normal-weight;
-        line-height: 24px;
     }
 }
 
@@ -181,12 +213,13 @@ $pop-normal-size: 12px;
             display: flex;
             align-items: center;
             span{
+                flex: none;
                 font-size: $pop-normal-size;
                 color: $pop-color;
                 font-weight: $pop-bold-weight;
             }
             .input-grid{
-                width: 63px;
+                width: 54px;
                 input{
                     width: 100%;
                 }
@@ -224,6 +257,7 @@ $pop-normal-size: 12px;
     display: flex;
     align-items: center;
     gap: 5px;
+    flex: 1;
 }
 .direction{
     width: 22px;
@@ -235,12 +269,13 @@ $pop-normal-size: 12px;
     background-size: 16px 15px;
     border-radius: 50%;
     transition: all .15s ease-in-out;
+    opacity: 0.6;
     &.down{transform: rotate(180deg);}
     &.left{transform: rotate(-90deg);}
     &.right{transform: rotate(90deg);}
     &:hover,
     &.act{
-        background-color: #1083E3;
+        opacity: 1;
     }
 }
 
@@ -261,7 +296,7 @@ $pop-normal-size: 12px;
         font-size: $pop-normal-size;
     }
     .input-move{
-        width: 148px;
+        width: 130px;
         input{
             width: 100%;
         }
@@ -276,7 +311,6 @@ $pop-normal-size: 12px;
 
 // 배치면 초기 설정
 .placement-table{
-    padding: 9px;
     table{
         table-layout: fixed;
         tr{
@@ -312,6 +346,31 @@ $pop-normal-size: 12px;
         background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
         background-size: cover;
     }
+    &.light{
+        padding: 0;
+        th,td{
+            color: $alert-color;
+            border-bottom: none;
+            border-top: 1px solid #EFEFEF;
+        }
+        th{
+            padding: 14px 0;
+        }
+        tr{
+            &:first-child{
+                td,
+                th{
+                    padding-top: 14px;
+                }
+            }
+            &:last-child{
+                td,
+                th{
+                    padding-bottom: 0px;
+                }
+            }
+        }
+    }
 }
 
 .pop-form-radio{
@@ -338,4 +397,72 @@ $pop-normal-size: 12px;
         color: $pop-color;
         font-weight: $pop-normal-weight;
     }
+}
+
+// 외벽선 그리기
+.outline-wrap{
+    padding: 24px 0;
+    border-bottom: 1px solid #424242;
+    .outline-inner{
+        display: flex;
+        align-items: center;
+        margin-bottom: 14px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
+}
+.outline-form{
+    width: 50%;
+    display: flex;
+    align-items: center;
+    margin-right: 15px;
+    span{
+        width: 60px;
+        flex: none;
+        font-size: $pop-normal-size;
+        font-weight: $pop-bold-weight;
+        color: $pop-color;
+        margin-right: 10px;
+    }
+    .reset-btn{
+        flex: none;
+        width: 30px;
+        height: 30px;
+        background: transparent;
+        border: 1px solid #484848;
+        border-radius: 2px;
+        margin-left: 5px;
+        background-image: url(../../public/static/images/canvas/reset_ico.svg);
+        background-repeat: no-repeat;
+        background-size: 12px 12px;
+        background-position: center;
+    }
+    &:last-child{
+        margin-right: 0;
+    }
+}
+
+.cul-wrap{
+    display: flex;
+    .outline-box{
+        width: 50%;
+        margin-right: 15px;
+        .outline-form{
+            width: 100%;
+            margin-bottom: 14px;
+            margin-right: 0;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+    .cul-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        background-color: #3D3D3D;
+        border-radius: 2px ;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index da3574d..2c5b1e2 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -143,7 +143,7 @@ button{
 // button
 .btn-frame{
     display: inline-block;
-    padding: 0 9px;
+    padding: 0 7px;
     height: 34px;
     line-height: 34px;
     border-radius: 2px;
@@ -178,6 +178,7 @@ button{
         border: 1px solid #484848;
     }
     &.modal{
+        font-family: 'Noto Sans JP', sans-serif;
         background-color: #272727;
         border: 1px solid #484848;
         color: #aaa;
@@ -355,13 +356,14 @@ input[type=text]{
         height: 30px;
         line-height: 30px;
         border-radius: 2px;
-        background-color: #313131;
+        background-color: #323234;
         color: #fff;
         font-size: 12px;
         font-weight: 500;
         font-family: 'Pretendard', sans-serif;
         padding: 0 10px;
         letter-spacing: 0px;
+        text-align: right;
         &::placeholder{
             opacity: 1;
             font-size: 12px;
@@ -384,6 +386,7 @@ input[type=text]{
         color: #45576F;
         font-weight: normal;
         transition: border-color .17s ease-in-out;
+        text-align: left;
         &:read-only{
             background-color: #FAFAFA;
             color: #999999;