diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index 2a4f7cb..2e4cba7 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -7,6 +7,10 @@ import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/A
 import AuxiliaryCopy from '@/components/canvas/modal/auxiliarysupport/AuxiliaryCopy'
 import AuxiliaryMove from '@/components/canvas/modal/auxiliarysupport/AuxiliaryMove'
 import AuxiliarySize from '@/components/canvas/modal/auxiliarysupport/AuxiliarySize'
+import DisplayChange from '@/components/canvas/modal/displaychange/DisplayChange'
+import DistanceMeasurement01 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement01'
+import DistanceMeasurement02 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement02'
+import DistanceMeasurement03 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement03'
 import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption'
 import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
 import GridMove from '@/components/canvas/modal/gridoption/GridMove'
@@ -97,7 +101,14 @@ export default function CanvasPage() {
                     {/* <ObjectOption/> */}
 
                     {/* 표시변겅 */}
-                    
+                    {/* <DisplayChange/> */}
+
+                    {/* 거리측정01, 거리측정02, 거리측정03 */}
+                    {/* <DistanceMeasurement01/> */}
+                    {/* <DistanceMeasurement02/> */}
+                    {/* <DistanceMeasurement03/> */}
+
+                    {/* 각 변 속성 변경 */}
                 </div>
             </div>
         </div>
diff --git a/src/components/canvas/modal/displaychange/DisplayChange.jsx b/src/components/canvas/modal/displaychange/DisplayChange.jsx
new file mode 100644
index 0000000..5032c36
--- /dev/null
+++ b/src/components/canvas/modal/displaychange/DisplayChange.jsx
@@ -0,0 +1,63 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+import Qselect from "@/components/common/select/Qselect";
+
+const SelectOption01 = [
+    {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
+]
+
+export default function DisplayChange(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xm`}>
+                <div className="modal-head">
+                    <h1 className="title">表示の変更 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="guide">
+                        寸法線に表示する数値を入力してください
+                    </div>
+                    <div className="mb-box">
+                        <div className="slope-wrap">
+                            <div className="outline-form mb15">
+                                <span className="mr10">既存の長さ</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin block" defaultValue={5933} readOnly/>
+                                </div>
+                            </div>
+                            <div className="outline-form">
+                                <span className="mr10" >変更の長さ</span>
+                                <div className="input-grid mr5">
+                                    <input type="text" className="input-origin block" defaultValue={0}/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="slope-wrap">
+                        <div className="warning">傾斜を着せてください。</div>
+                        <div className="display-change-wrap">
+                            <div className="outline-form mb15">
+                                <span className="mr10" >傾斜</span>
+                                <div className="grid-select mr10">
+                                    <Qselect title={'0'} option={SelectOption01}/>
+                                </div>
+                                <span className="thin">寸法</span>
+                            </div>
+                            <div className="outline-form">
+                                <span className="mr10" >傾斜</span>
+                                <div className="grid-select mr10">
+                                    <Qselect title={'0'} option={SelectOption01}/>
+                                </div>
+                                <span className="thin">寸法</span>
+                            </div>
+                        </div>
+                        <div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">保存</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx
new file mode 100644
index 0000000..c62ce77
--- /dev/null
+++ b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx
@@ -0,0 +1,28 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function DistanceMeasurement01(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xxxm`}>
+                <div className="modal-head">
+                    <h1 className="title">距離測定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="slope-wrap">
+                        <div className="outline-form">
+                            <span className="mr10" style={{width: 'auto'}}>水平距離</span>
+                            <div className="input-grid mr5">
+                                <input type="text" className="input-origin block" defaultValue={300}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">確認</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx
new file mode 100644
index 0000000..184b646
--- /dev/null
+++ b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx
@@ -0,0 +1,63 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function DistanceMeasurement02(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xxxm`}>
+                <div className="modal-head">
+                    <h1 className="title">距離測定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="slope-wrap">
+                        <div className="eaves-keraba-table">
+                            <div className="eaves-keraba-item">
+                                <div className="eaves-keraba-th">
+                                    2点間距離
+                                </div>
+                                <div className="eaves-keraba-td">
+                                    <div className="outline-form">
+                                        <div className="input-grid mr5" style={{width: '98px'}}>
+                                            <input type="text" className="input-origin block" defaultValue={3703}/>
+                                        </div>
+                                        <span className="thin">mm</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="eaves-keraba-item">
+                                <div className="eaves-keraba-th">
+                                水平距離
+                                </div>
+                                <div className="eaves-keraba-td">
+                                    <div className="outline-form">
+                                        <div className="input-grid mr5" style={{width: '98px'}}>
+                                            <input type="text" className="input-origin block" defaultValue={3320}/>
+                                        </div>
+                                        <span className="thin">mm</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="eaves-keraba-item">
+                                <div className="eaves-keraba-th">
+                                垂直距離
+                                </div>
+                                <div className="eaves-keraba-td">
+                                    <div className="outline-form">
+                                        <div className="input-grid mr5" style={{width: '98px'}}>
+                                            <input type="text" className="input-origin block" defaultValue={12640}/>
+                                        </div>
+                                        <span className="thin">mm</span>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">確認</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx
new file mode 100644
index 0000000..389b847
--- /dev/null
+++ b/src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx
@@ -0,0 +1,28 @@
+import WithDraggable from "@/components/common/draggable/withDraggable";
+
+export default function DistanceMeasurement03(){
+    return(
+        <WithDraggable isShow={true}>
+            <div className={`modal-pop-wrap xxxm`}>
+                <div className="modal-head">
+                    <h1 className="title">距離測定 </h1>
+                    <button className="modal-close">닫기</button>
+                </div>
+                <div className="modal-body">
+                    <div className="slope-wrap">
+                        <div className="outline-form">
+                            <span className="mr10" style={{width: 'auto'}}>垂直距離</span>
+                            <div className="input-grid mr5">
+                                <input type="text" className="input-origin block" defaultValue={300}/>
+                            </div>
+                            <span className="thin">mm</span>
+                        </div>
+                    </div>
+                    <div className="grid-btn-wrap">
+                        <button className="btn-frame modal act">確認</button>
+                    </div>
+                </div>
+            </div>
+        </WithDraggable>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/modal/objectoption/ObjectOption.jsx b/src/components/canvas/modal/objectoption/ObjectOption.jsx
index f3a8eb1..fffc8f7 100644
--- a/src/components/canvas/modal/objectoption/ObjectOption.jsx
+++ b/src/components/canvas/modal/objectoption/ObjectOption.jsx
@@ -18,7 +18,7 @@ export default function ObjectOption(){
         <WithDraggable isShow={true}>
             <div className={`modal-pop-wrap lrr`}>
                 <div className="modal-head">
-                    <h1 className="title">傾斜設定 </h1>
+                    <h1 className="title">オブジェクトの配置 </h1>
                     <button className="modal-close">닫기</button>
                 </div>
                 <div className="modal-body">
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 2d934d7..aff58be 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -26,7 +26,7 @@ $alert-color: #101010;
     background-color: #272727;
     z-index: 9999999;
     &.xxxm{
-        width: 230px;
+        width: 240px;
     }
     &.xxm{
         width: 270px;
@@ -1001,4 +1001,14 @@ $alert-color: #101010;
             transform: translate(-50%, -50%);
         }
     }
+}
+
+// 표시변경
+.display-change-wrap{
+    margin: 24px 0;
+}
+.warning{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: #FFAFAF;
 }
\ No newline at end of file