diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
index 6c83ecd9..8a775c49 100644
--- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
@@ -81,24 +81,24 @@ export default function DimensionLineSetting(props) {
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
-          <h1 className="title">表示の変更 </h1>
+          <h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
         <div className="modal-body">
-          <div className="guide">寸法線に表示する数値を入力してください</div>
+          <div className="guide">{getMessage('modal.display.edit.info')}</div>
           <div className="mb-box">
             <div className="slope-wrap">
               <div className="outline-form mb15">
-                <span className="mr10">既存の長さ</span>
+                <span className="mr10">{getMessage('modal.display.edit.before.length')}</span>
                 <div className="input-grid mr5">
                   <input type="text" className="input-origin block" value={basicLength} readOnly />
                 </div>
               </div>
               <div className="mb-box">
                 <div className="outline-form">
-                  <span className="mr10">変更の長さ</span>
+                  <span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
                   <div className="input-grid mr5">
                     <input type="text" className="input-origin block" ref={changeSlopeRef} />
                   </div>
@@ -106,34 +106,32 @@ export default function DimensionLineSetting(props) {
               </div>
               <div className="d-check-box pop">
                 <input type="checkbox" id="ch99" onChange={() => setSlopeAble(!slopeAble)} />
-                <label htmlFor="ch99">コーナー・ゴールの場合</label>
+                <label htmlFor="ch99">{getMessage('modal.display.edit.input.slope')}</label>
               </div>
             </div>
           </div>
           <div className="slope-wrap">
-            <div className="warning">傾斜を着せてください。</div>
+            <div className="warning">{getMessage('modal.display.edit.input.slope')}</div>
             <div className="display-change-wrap">
               <div className="outline-form mb15">
-                <span className="mr10">傾斜</span>
+                <span className="mr10">{getMessage('slope')}</span>
                 <div className="grid-select mr10">
                   <QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 1 }} onChange={handleSelectbox} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
               <div className="outline-form">
-                <span className="mr10">傾斜</span>
+                <span className="mr10">{getMessage('slope')}</span>
                 <div className="grid-select mr10">
                   <QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 2 }} onChange={handleSelectbox} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
             </div>
-            <div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
+            <div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleChangeLength}>
-              保存
-            </button>
+            <button className="btn-frame modal act" onClick={handleChangeLength}>{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/distance/Distance.jsx b/src/components/floor-plan/modal/distance/Distance.jsx
index 70ddfb35..745ca4f2 100644
--- a/src/components/floor-plan/modal/distance/Distance.jsx
+++ b/src/components/floor-plan/modal/distance/Distance.jsx
@@ -19,7 +19,7 @@ export default function Distance(props) {
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xxxm`}>
         <div className="modal-head">
-          <h1 className="title">距離測定 </h1>
+          <h1 className="title">{getMessage('modal.distance')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
@@ -28,7 +28,7 @@ export default function Distance(props) {
           <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-th">{getMessage('modal.distance.dual.point')}</div>
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '98px' }}>
@@ -39,7 +39,7 @@ export default function Distance(props) {
                 </div>
               </div>
               <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">水平距離</div>
+                <div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '98px' }}>
@@ -50,7 +50,7 @@ export default function Distance(props) {
                 </div>
               </div>
               <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">垂直距離</div>
+                <div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '98px' }}>
@@ -63,9 +63,7 @@ export default function Distance(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleClose}>
-              確認
-            </button>
+            <button className="btn-frame modal act" onClick={handleClose}>{getMessage('common.require')}</button>
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
new file mode 100644
index 00000000..d565e1a1
--- /dev/null
+++ b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
@@ -0,0 +1,48 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function CircuitNumberEdit(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: 'auto' }}>
+                  {getMessage('modal.module.circuit.number')}
+                </span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin block" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx
new file mode 100644
index 00000000..1f40b703
--- /dev/null
+++ b/src/components/floor-plan/modal/module/PanelEdit.jsx
@@ -0,0 +1,78 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+
+export default function PanelEdit(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, type = 'move', apply } = props
+  const { closePopup } = usePopup()
+  const [length, setLength] = useState(0)
+  const [direction, setDirection] = useState('')
+  const { getMessage } = useMessage()
+
+  const handleApply = () => {
+    apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage(type === 'move' ? 'modal.move.setting' : 'modal.copy.setting')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">{getMessage(type === 'move' ? 'modal.move.setting.info' : 'modal.copy.setting.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="grid-input-form">
+                <span className="mr10">{getMessage('margin')}</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin" defaultValue={0} onClick={(e) => setLength(e.target.value)} />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-direction">
+                <button
+                  className={`direction up ${direction === '↑' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('↑')
+                  }}
+                ></button>
+                <button
+                  className={`direction down ${direction === '↓' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('↓')
+                  }}
+                ></button>
+                <button
+                  className={`direction left ${direction === '←' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('←')
+                  }}
+                ></button>
+                <button
+                  className={`direction right ${direction === '→' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('→')
+                  }}
+                ></button>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
new file mode 100644
index 00000000..c2f24095
--- /dev/null
+++ b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx
@@ -0,0 +1,95 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+import Image from 'next/image'
+
+export default function ColumnInsert(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  const HandleRadioChange = (e) => {
+    setSelectedType(Number(e.target.value))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
+                  <label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
+                  <label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
+                </div>
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional-edit01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional-edit02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
+                  </div>
+                  <div className="additional-color-box">
+                    <span className="additional-color white"></span>
+                    <span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
new file mode 100644
index 00000000..b4baf0d7
--- /dev/null
+++ b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx
@@ -0,0 +1,118 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+import Image from 'next/image'
+
+export default function ColumnRemove(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const types = [
+    { name: getMessage('modal.panel.column.remove.type.left'), value: 1 },
+    { name: getMessage('modal.panel.column.remove.type.right'), value: 2 },
+    { name: getMessage('modal.panel.column.remove.type.side'), value: 3 },
+    { name: getMessage('modal.panel.column.remove.type.none'), value: 4 },
+  ]
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                {types.map((type, index) => {
+                  return (
+                    <div className="d-check-radio pop">
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id={`ra0${index + 1}`}
+                        onClick={(e) => setSelectedType(Number(e.target.value))}
+                        value={type.value}
+                        checked={selectedType === type.value}
+                      />
+                      <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
+                    </div>
+                  )
+                })}
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_del01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_del02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 3 && (
+                  <Image
+                    src="/static/images/canvas/additional_del03.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 4 && (
+                  <Image
+                    src="/static/images/canvas/additional_del04.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/row/RowInsert.jsx b/src/components/floor-plan/modal/module/row/RowInsert.jsx
new file mode 100644
index 00000000..e6e99c0c
--- /dev/null
+++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx
@@ -0,0 +1,95 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import Image from 'next/image'
+import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function RowInsert(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  const HandleRadioChange = (e) => {
+    setSelectedType(Number(e.target.value))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.row.insert')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
+                  <label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
+                  <label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
+                </div>
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-edit01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-edit02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
+                  </div>
+                  <div className="additional-color-box">
+                    <span className="additional-color white"></span>
+                    <span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/module/row/RowRemove.jsx b/src/components/floor-plan/modal/module/row/RowRemove.jsx
new file mode 100644
index 00000000..6b93b41c
--- /dev/null
+++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx
@@ -0,0 +1,118 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import Image from 'next/image'
+import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function RowRemove(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const types = [
+    { name: getMessage('modal.row.remove.type.up'), value: 1 },
+    { name: getMessage('modal.row.remove.type.down'), value: 2 },
+    { name: getMessage('modal.row.remove.type.side'), value: 3 },
+    { name: getMessage('modal.row.remove.type.none'), value: 4 },
+  ]
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.row.remove')}</h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                {types.map((type, index) => {
+                  return (
+                    <div className="d-check-radio pop">
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id={`ra0${index + 1}`}
+                        onClick={() => setSelectedType(Number(e.target.value))}
+                        value={type.value}
+                        checked={selectedType === type.value}
+                      />
+                      <label htmlFor="ra01">{getMessage(type.name)}</label>
+                    </div>
+                  )
+                })}
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 3 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del03.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 4 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del04.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx
index bdb25821..fd172aee 100644
--- a/src/components/floor-plan/modal/object/SizeSetting.jsx
+++ b/src/components/floor-plan/modal/object/SizeSetting.jsx
@@ -16,7 +16,7 @@ export default function SizeSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ssm`}>
+      <div className={`modal-pop-wrap ssm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.size.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
index 5ad53f7b..28104cdd 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
@@ -6,9 +6,7 @@ export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch,
   return (
     <>
       <div className="outline-form mb10">
-        <span className="mr10" style={{ width: '24px' }}>
-          {getMessage('slope')}
-        </span>
+        <span className="mr10">{getMessage('slope')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
           <input type="text" className="input-origin block" value={shedPitch} onChange={(e) => onlyNumberWithDotInputChange(e, setShedPitch)} />
         </div>
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index a5c6143c..f43e9480 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -16,7 +16,6 @@ import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
 import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
 import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
 import FontSetting from '@/components/common/font/FontSetting'
-import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
 import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
@@ -26,6 +25,13 @@ import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { contextMenuState } from '@/store/contextMenu'
 import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
+import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit'
+import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
+import ColumnRemove from '@/components/floor-plan/modal/module/column/ColumnRemove'
+import ColumnInsert from '@/components/floor-plan/modal/module/column/ColumnInsert'
+import RowRemove from '@/components/floor-plan/modal/module/row/RowRemove'
+import RowInsert from '@/components/floor-plan/modal/module/row/RowInsert'
+import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumberEdit'
 
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@@ -39,6 +45,8 @@ export function useContextMenu() {
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils({})
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
+  const [cell, setCell] = useState(null)
+  const [column, setColumn] = useState(null)
   const { handleZoomClear } = useCanvasEvent()
 
   const currentMenuSetting = () => {
@@ -245,6 +253,7 @@ export function useContextMenu() {
 
   useEffect(() => {
     if (currentObject?.name) {
+      console.log(currentObject?.name)
       switch (currentObject.name) {
         case 'triangleDormer':
         case 'pentagonDormer':
@@ -486,6 +495,110 @@ export function useContextMenu() {
             ],
           ])
           break
+        case 'panel':
+          setContextMenu([
+            [
+              {
+                id: 'remove',
+                name: getMessage('contextmenu.remove'),
+              },
+              {
+                id: 'move',
+                name: getMessage('contextmenu.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'copy',
+                name: getMessage('contextmenu.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+            ],
+            [
+              {
+                id: 'columnMove',
+                name: getMessage('contextmenu.column.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'columnCopy',
+                name: getMessage('contextmenu.column.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+              {
+                id: 'columnRemove',
+                name: getMessage('contextmenu.column.remove'),
+                component: <ColumnRemove id={popupId} />,
+              },
+              {
+                id: 'columnInsert',
+                name: getMessage('contextmenu.column.insert'),
+                component: <ColumnInsert id={popupId} />,
+              },
+            ],
+            [
+              {
+                id: 'rowMove',
+                name: getMessage('contextmenu.row.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'rowCopy',
+                name: getMessage('contextmenu.row.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+              {
+                id: 'rowRemove',
+                name: getMessage('contextmenu.row.remove'),
+                component: <RowRemove id={popupId} />,
+              },
+              {
+                id: 'rowInsert',
+                name: getMessage('contextmenu.row.insert'),
+                component: <RowInsert id={popupId} />,
+              },
+            ],
+          ])
+          break
+        case 'module':
+        case 'dimensionLineText':
+          setContextMenu([
+            [
+              {
+                id: 'moduleVerticalCenterAlign',
+                name: getMessage('contextmenu.module.vertical.align'),
+              },
+              {
+                id: 'moduleHorizonCenterAlign',
+                name: getMessage('contextmenu.module.horizon.align'),
+              },
+              {
+                id: 'moduleLeftAlign',
+                name: getMessage('contextmenu.module.left.align'),
+              },
+              {
+                id: 'moduleRightAlign',
+                name: getMessage('contextmenu.module.right.align'),
+              },
+              {
+                id: 'moduleUpAlign',
+                name: getMessage('contextmenu.module.up.align'),
+              },
+              {
+                id: 'moduleDownAlign',
+                name: getMessage('contextmenu.module.down.align'),
+              },
+              {
+                id: 'moduleRemove',
+                name: getMessage('contextmenu.module.remove'),
+              },
+              {
+                id: 'moduleCircuitNumberEdit',
+                name: getMessage('contextmenu.module.circuit.number.edit'),
+                component: <CircuitNumberEdit id={popupId} />,
+              },
+            ],
+          ])
+          break
         default:
           currentMenuSetting()
       }
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 08cff23d..4740d5a0 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -284,6 +284,7 @@
   "delete": "삭제(JA)",
   "delete.all": "전체 삭제(JA)",
   "refresh": "새로고침(JA)",
+  "margin": "間隔",
   "contextmenu.roof.material.placement": "지붕재 배치(JA)",
   "contextmenu.roof.material.edit": "지붕재 변경(JA)",
   "contextmenu.roof.material.remove": "지붕재 삭제(JA)",
@@ -302,24 +303,75 @@
   "contextmenu.column.move": "열 이동(JA)",
   "contextmenu.column.copy": "열 복사(JA)",
   "contextmenu.column.remove": "コピー設定",
-  "contextmenu.column.insert": "열 삽입(JA)",
+  "modal.panel.column.remove": "コピー設定",
+  "modal.panel.column.remove.info": "削除列をどのようにしますか？",
+  "modal.panel.column.remove.type.left": "左に減らす",
+  "modal.panel.column.remove.type.right": "右に減らす",
+  "modal.panel.column.remove.type.side": "両側に減る",
+  "modal.panel.column.remove.type.none": "減らさない",
+  "modal.panel.select.column": "選択列",
+  "modal.panel.select.row": "選択段",
+  "modal.panel.insert.column": "挿入列",
+  "modal.panel.insert.row": "挿入段",
+  "modal.panel.column.insert": "列の挿入",
+  "modal.panel.column.insert.info": "挿入する方向を選択してください。",
+  "modal.panel.column.insert.type.left": "左挿入",
+  "modal.panel.column.insert.type.right": "右挿入",
+  "contextmenu.column.insert": "列の挿入",
   "contextmenu.row.move": "단 이동(JA)",
   "contextmenu.row.copy": "단 복사(JA)",
-  "contextmenu.row.remove": "단 삭제(JA)",
-  "contextmenu.row.insert": "단 삽입(JA)",
+  "contextmenu.row.remove": "ただし削除",
+  "modal.row.remove": "ただし削除",
+  "modal.row.remove.info": "削除列をどのようにしますか？",
+  "modal.row.remove.type.up": "上向きに減らす",
+  "modal.row.remove.type.down": "下向きに減らす",
+  "modal.row.remove.type.side": "両側に減らす",
+  "modal.row.remove.type.none": "減らさない",
+  "contextmenu.row.insert": "段挿入",
+  "modal.row.insert": "段挿入",
+  "modal.row.insert.info": "挿入する方向を選択してください。",
+  "modal.row.insert.type.up": "上部挿入",
+  "modal.row.insert.type.down": "下の挿入",
+  "modal.move.setting": "移動設定",
+  "modal.move.setting.info": "間隔を設定し、移動方向を選択します。",
+  "modal.copy.setting": "コピー設定",
+  "modal.copy.setting.info": "間隔を設定し、コピー方向を選択します。",
   "modal.line.property.edit.info": "属性を変更する辺を選択してください。",
   "modal.line.property.edit.selected": "選択した値",
   "contextmenu.flow.direction.edit": "흐름 방향 변경(JA)",
   "contextmenu.font.setting": "폰트 설정(JA)",
   "contextmenu.grid.color.edit": "그리드 색 변경(JA)",
   "contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경(JA)",
-  "contextmenu.display.edit": "표시 변경(JA)",
+  "contextmenu.display.edit": "表示の変更",
+  "modal.display.edit.info": "寸法線に表示する数値を入力してください",
+  "modal.display.edit.before.length": "既存の長さ",
+  "modal.display.edit.after.length": "変更の長さ",
+  "modal.display.edit.corner.valley": "コーナー・ゴールの場合",
+  "modal.display.edit.input.slope": "경사를 傾斜を着せてください。",
+  "modal.display.edit.input.slope.info": "傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。",
+  "modal.distance": "距離測定",
+  "modal.distance.dual.point": "2点間距離",
+  "modal.distance.horizon": "水平距離",
+  "modal.distance.vertical": "垂直距離",
   "contextmenu.opening.offset": "개구 오프셋(JA)",
   "contextmenu.remove": "삭제(JA)",
   "contextmenu.remove.all": "전체 삭제(JA)",
   "contextmenu.move": "이동(JA)",
   "contextmenu.copy": "복사(JA)",
   "contextmenu.edit": "편집(JA)",
+  "contextmenu.module.vertical.align": "모듈 세로 가운데 정렬(JA)",
+  "contextmenu.module.horizon.align": "모듈 가로 가운데 정렬(JA)",
+  "contextmenu.module.left.align": "모듈 왼쪽 정렬(JA)",
+  "contextmenu.module.right.align": "모듈 오른쪽 정렬(JA)",
+  "contextmenu.module.up.align": "모듈 위쪽 정렬(JA)",
+  "contextmenu.module.down.align": "모듈 아래쪽 정렬(JA)",
+  "contextmenu.module.remove": "모듈 일괄 삭제(JA)",
+  "contextmenu.module.move": "모듈 일괄 이동(JA)",
+  "contextmenu.module.copy": "모듈 일괄 복사(JA)",
+  "contextmenu.module.circuit.number.edit": "モジュール一括回路番号の変更",
+  "modal.module.circuit.number.edit": "モジュール一括回路番号の変更",
+  "modal.module.circuit.number.edit.info": "回路番号を入力してください。",
+  "modal.module.circuit.number": "回路番号",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
   "common.message.noData": "表示するデータがありません",
@@ -410,6 +462,7 @@
   "common.input.file": "ファイルを読み込む",
   "common.input.file.load": "ファイルの追加",
   "common.require": "必須",
+  "common.ok": "確認",
   "commons.west": "立つ",
   "commons.east": "ドン",
   "commons.south": "南",
@@ -685,6 +738,7 @@
   "shed": "片側の流れ",
   "apply": "適用",
   "module": "モジュール",
+  "legend": "凡例",
   "has.sleeve": "袖あり",
   "has.not.sleeve": "袖なし",
   "jerkinhead.width": "半折先幅",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index f63e04b6..05f4bcf3 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -289,6 +289,7 @@
   "delete": "삭제",
   "delete.all": "전체 삭제",
   "refresh": "새로고침",
+  "margin": "간격",
   "contextmenu.roof.material.placement": "지붕재 배치",
   "contextmenu.roof.material.edit": "지붕재 변경",
   "contextmenu.roof.material.remove": "지붕재 삭제",
@@ -307,11 +308,39 @@
   "contextmenu.column.move": "열 이동",
   "contextmenu.column.copy": "열 복사",
   "contextmenu.column.remove": "열 삭제",
+  "modal.panel.column.remove": "열 삭제",
+  "modal.panel.column.remove.info": "삭제열을 어떻게 하시겠습니까?",
+  "modal.panel.column.remove.type.left": "왼쪽으로 줄이다",
+  "modal.panel.column.remove.type.right": "오른쪽으로 줄이다",
+  "modal.panel.column.remove.type.side": "양쪽으로 줄이다",
+  "modal.panel.column.remove.type.none": "줄이지 않는다",
+  "modal.panel.select.column": "선택 열",
+  "modal.panel.select.row": "선택 단",
+  "modal.panel.insert.column": "삽입 열",
+  "modal.panel.insert.row": "삽입 단",
   "contextmenu.column.insert": "열 삽입",
+  "modal.panel.column.insert": "열 삽입",
+  "modal.panel.column.insert.info": "삽입할 방향을 선택해주세요.",
+  "modal.panel.column.insert.type.left": "왼쪽 삽입",
+  "modal.panel.column.insert.type.right": "오른쪽 삽입",
   "contextmenu.row.move": "단 이동",
   "contextmenu.row.copy": "단 복사",
   "contextmenu.row.remove": "단 삭제",
+  "modal.row.remove": "단 삭제",
+  "modal.row.remove.info": "삭제 단을 어떻게 하시겠습니까?",
+  "modal.row.remove.type.up": "위족으로 줄이다",
+  "modal.row.remove.type.down": "아래쪽으로 줄이다",
+  "modal.row.remove.type.side": "양쪽으로 줄이다",
+  "modal.row.remove.type.none": "줄이지 않는다",
   "contextmenu.row.insert": "단 삽입",
+  "modal.row.insert": "단 삽입",
+  "modal.row.insert.info": "삽입할 방향을 선택해주세요.",
+  "modal.row.insert.type.up": "위쪽 삽입",
+  "modal.row.insert.type.down": "아래쪽 삽입",
+  "modal.move.setting": "이동 설정",
+  "modal.move.setting.info": "간격을 설정하고 이동 방향을 선택하십시오.",
+  "modal.copy.setting": "복사 설정",
+  "modal.copy.setting.info": "간격을 설정하고 복사 방향을 선택하십시오.",
   "modal.line.property.edit.info": "속성을 변경할 변을 선택해주세요.",
   "modal.line.property.edit.selected": "선택한 값",
   "contextmenu.flow.direction.edit": "흐름 방향 변경",
@@ -319,12 +348,35 @@
   "contextmenu.grid.color.edit": "그리드 색 변경",
   "contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경",
   "contextmenu.display.edit": "표시 변경",
+  "modal.display.edit.info": "치수선에 표시할 수치를 입력해 주세요.",
+  "modal.display.edit.before.length": "기존 길이",
+  "modal.display.edit.after.length": "변경 길이",
+  "modal.display.edit.corner.valley": "구석・골의 경우",
+  "modal.display.edit.input.slope": "경사를 입력해주세요.",
+  "modal.display.edit.input.slope.info": "경사 설정되어 있는 경우 입력한 수치에 경사 계산을 한 수치가 표시됩니다.",
+  "modal.distance": "거리 측정",
+  "modal.distance.dual.point": "두 점간 거리",
+  "modal.distance.horizon": "수평 거리",
+  "modal.distance.vertical": "수직 거리",
   "contextmenu.opening.offset": "개구 오프셋",
   "contextmenu.remove": "삭제",
   "contextmenu.remove.all": "전체 삭제",
   "contextmenu.move": "이동",
   "contextmenu.copy": "복사",
   "contextmenu.edit": "편집",
+  "contextmenu.module.vertical.align": "모듈 세로 가운데 정렬",
+  "contextmenu.module.horizon.align": "모듈 가로 가운데 정렬",
+  "contextmenu.module.left.align": "모듈 왼쪽 정렬",
+  "contextmenu.module.right.align": "모듈 오른쪽 정렬",
+  "contextmenu.module.up.align": "모듈 위쪽 정렬",
+  "contextmenu.module.down.align": "모듈 아래쪽 정렬",
+  "contextmenu.module.remove": "모듈 일괄 삭제",
+  "contextmenu.module.move": "모듈 일괄 이동",
+  "contextmenu.module.copy": "모듈 일괄 복사",
+  "contextmenu.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
+  "modal.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
+  "modal.module.circuit.number.edit.info": "회로 번호를 입력해주세요.",
+  "modal.module.circuit.number": "회로 번호",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
   "common.message.noData": "No data to display",
@@ -415,6 +467,7 @@
   "common.input.file": "파일 불러오기",
   "common.input.file.load": "불러오기",
   "common.require": "필수",
+  "common.ok": "확인",
   "commons.west": "서",
   "commons.east": "동",
   "commons.south": "남",
@@ -690,6 +743,7 @@
   "shed": "한쪽흐름",
   "apply": "적용",
   "module": "모듈",
+  "legend": "범례",
   "has.sleeve": "소매 있음",
   "has.not.sleeve": "소매 없음",
   "jerkinhead.width": "반절처 폭",
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 8e29b78a..97f69dbe 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -23,7 +23,7 @@
     left: 0;
     display: block;
     width: 100%;
-    height: 46.8px;
+    min-width: 1280px;
     padding-bottom: 0;
     background-color: #383838;
     transition: padding .17s ease-in-out;
@@ -34,6 +34,7 @@
         align-items: center;
         padding: 0 40px 0 20px;
         background-color: #2C2C2C;
+        height: 46.8px;
         z-index: 999;
         .canvas-menu-list{
             display: flex;
@@ -55,11 +56,11 @@
                     transition: all .17s ease-in-out;
                     .menu-icon{
                         display: block;
-                        width: 16px;
-                        height: 16px;
+                        width: 14px;
+                        height: 14px;
                         background-repeat: no-repeat;
                         background-position: center;
-                        background-size: cover;
+                        background-size: contain;
                         margin-right: 10px;
                         &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
                         &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
@@ -85,6 +86,7 @@
             .select-box{
                 width: 124px;
                 margin-right: 5px;
+                height: 30px;
                 > div{
                     width: 100%;
                 }
@@ -329,6 +331,7 @@
         background-color: #1C1C1C;
         border-top: 1px solid #000;
         width: 100%;
+        min-width: 1280px;
         transition: all .17s ease-in-out;
         z-index: 99;
         &.active{
@@ -444,6 +447,7 @@
     top: 46px;
     left: 0;
     width: 100%;
+    min-width: 1280px;
     height: 46px;
     border-bottom: 1px solid #000;
     background: #2C2C2C;
@@ -1304,4 +1308,109 @@
         background: url(../../public/static/images/sub/product-del.svg)no-repeat center;
         background-size: 15px 15px;
     }
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 1800px) {
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item button{
+                    .menu-icon{
+                        margin-right: 5px;
+                    }
+                } 
+                .canvas-menu-item{
+                    button{
+                        padding: 15px 15px;
+                        font-size: 11px;
+                    }
+                }
+            }
+        }
+        .canvas-depth2-wrap{
+            .canvas-depth2-inner{
+                .canvas-depth2-list{
+                    .canvas-depth2-item{
+                        button{
+                            font-size: 11px;
+                        }
+                    } 
+                } 
+            }
+        }
+    } 
+}
+
+@media screen and (max-width: 1600px) {
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item button{
+                    .menu-icon{
+                        display: none;
+                    }
+                } 
+            }
+        }
+    } 
+    .canvas-content{
+        .canvas-frame{
+            height: calc(100vh - 129.5px);
+        }
+        &.active{
+            .canvas-frame{
+                height: calc(100vh - 179.5px);
+            }
+        } 
+    } 
+}
+
+@media screen and (max-width: 1500px) {
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item{
+                    button{
+                        padding: 15px 10px;
+                        font-size: 10px;
+                    }
+                }
+            }
+            .canvas-side-btn-wrap{
+                .btn-from{
+                    gap: 3px;
+                }
+                .vertical-horizontal{
+                    margin: 0 3px;
+                    min-width: 150px;
+                }
+                .select-box{
+                    width: 100px;
+                    margin-right: 3px;
+                }
+                .size-control{
+                    width: 90px;
+                    margin: 0 3px;
+                }
+            } 
+        }
+    }
+    .sub-header{
+        .sub-header-inner{
+            .sub-header-title{
+                font-size: 15px;
+            }
+            .sub-header-title-wrap{
+                .title-item{
+                    a{
+                        .icon{
+                            width: 20px;
+                            height: 20px;
+                        }
+                    } 
+                } 
+            } 
+        } 
+    } 
+    
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 7f3834df..fc8870a2 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -29,7 +29,7 @@ header{
     top: 0;
     left: 0;
     width: 100%;
-    min-width: 1600px;
+    min-width: 1280px;
     height: 46px;
     background-color: #1C1C1C;
     border-bottom: 1px solid #000;
@@ -230,4 +230,22 @@ footer{
             text-align: center;
         }
     }
+}
+
+@media screen and (max-width: 1500px) {
+    header{
+        .header-inner{
+            .header-right{
+                nav{
+                    .nav-list{
+                        .nav-item{
+                            button{
+                                font-size: 13px;
+                            }
+                        } 
+                    } 
+                } 
+            } 
+        } 
+    } 
 }
\ No newline at end of file
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index ea1535b1..75632a27 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -595,8 +595,9 @@
     overflow-x: hidden;
     .center-page-inner{
         width: 100%;
-        max-width: 1720px;
+        max-width: 1760px;
         margin: 0 auto;
+        padding: 10px 20px;
         .center-page-tit{
             font-size: 18px;
             font-weight: 600;
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 361aa957..51f55fb0 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -488,6 +488,7 @@ $alert-color: #101010;
         color: #101010;
         background-color: #fff;
         border-radius: 2px;
+        cursor: pointer;
         transition: all .15s ease-in-out;
         .img-edit{
             width: 16px;
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 4225db2e..b7778926 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -346,6 +346,11 @@ button{
         font-size: 13px;
         color: #fff;
         height: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
     }
     .select-item-wrap{
         position: absolute;
diff --git a/src/styles/publishpage.scss b/src/styles/publishpage.scss
index 941b29de..9ea724ac 100644
--- a/src/styles/publishpage.scss
+++ b/src/styles/publishpage.scss
@@ -4,7 +4,7 @@ ul, li {padding: 0; margin: 0; list-style: none; }
 body, td { line-height: normal;font-style: normal; font-variant: normal; font-size: 12px;  color: #6b6b6b; }
 table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
 #g_header h1 { height: 60px; line-height: 60px; padding-left: 28px; margin-top: 0; color: #fff; background: #424242;font-size: 24px;  font-family:'Pretendard', 돋움, Sans-Serif;}
-#g_body { padding: 0 30px; }
+#g_body { padding: 0 30px 1px; }
 .guide_table { width: 100%;border-top:1px solid #424242;table-layout: auto;}
 .guide_table thead th { background: #f1f1f1; text-align: center; padding:20px 3px;border:1px solid #dadada;border-top:1px solid #424242;font-size:15px;font-weight: 600; font-family:'Pretendard', 돋움, Sans-Serif;}
 .guide_table tbody td { padding:12px 3px; vertical-align: middle; border: solid 1px #dadada;text-align:left;font-size:13px; font-family:'Pretendard', 돋움, Sans-Serif;}