diff --git a/src/components/common/draggable/withDraggable.jsx b/src/components/common/draggable/withDraggable.jsx
index 2e83e530..23195fbe 100644
--- a/src/components/common/draggable/withDraggable.jsx
+++ b/src/components/common/draggable/withDraggable.jsx
@@ -8,13 +8,19 @@ export default function WithDraggable({ isShow, children, pos }) {
 
   const handleOnDrag = (e, data) => {
     e.stopPropagation()
-    console.log('pos', data)
     setPosition({ x: data.x, y: data.y })
   }
-
   useEffect(() => {
     setPosition({ ...pos })
   }, [])
 
-  return <>{isShow && <Draggable onDrag={(e, data) => handleOnDrag(e, data)}>{children}</Draggable>}</>
+  return (
+    <>
+      {isShow && (
+        <Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)}>
+          {children}
+        </Draggable>
+      )}
+    </>
+  )
 }
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index 3306dba5..6ffd4f8b 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -1,20 +1,22 @@
 'use client'
 
+import { useEffect, useState } from 'react'
+import '@/styles/contents.scss'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
-import '@/styles/contents.scss'
 import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
-import { useEffect, useState } from 'react'
+import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
   const [showOutlineModal, setShowOutlineModal] = useState(false)
-  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
+  const [showDotLineGridModal, setShowDotLineGridModal] = useState(true)
   const [showGridCopyModal, setShowGridCopyModal] = useState(false)
   const [showGridMoveModal, setShowGridMoveModal] = useState(false)
   const canvasSettingProps = {
     setShowCanvasSettingModal,
+    setShowDotLineGridModal,
   }
 
   const outlineProps = {
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index 2432395e..63c85952 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -10,6 +10,7 @@ export default function MenuDepth01(props) {
   const [activeMenu, setActiveMenu] = useState()
   const onClickMenu = (menuNum) => {
     setActiveMenu(menuNum)
+    console.log(menuNum)
     if (type === 'outline') {
       setShowOutlineModal(menuNum === 0)
     }
diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
index e39aa864..aaab09d9 100644
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -1,27 +1,37 @@
 import WithDraggable from '@/components/common/draggable/withDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'
 
 export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
   const [close, setClose] = useState(false)
-
-  const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
+  const { setShowDotLineGridModal } = props
+  const { getMessage } = useMessage()
+  const SelectOption = [
+    { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin') },
+    { id: 2, name: '1/2' },
+    {
+      id: 3,
+      name: '1/4',
+    },
+    { id: 4, name: '1/10' },
+  ]
 
   const HandleClickClose = () => {
-    setClose(true)
-    setTimeout(() => {
-      setModalOption({ ...modalOption, gridoption: false })
-      setClose(false)
-    }, 180)
+    // setClose(true)
+    // setTimeout(() => {
+    //   setModalOption({ ...modalOption, gridoption: false })
+    //   setClose(false)
+    // }, 180)
   }
   return (
-    <WithDraggable isShow={true}>
-      <div className={`modal-pop-wrap ssm mount `}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
+      <div className={`modal-pop-wrap ssm `}>
         {/* <div className={`modal-pop-wrap ssm ${modalOption.gridoption ? 'mount' : ''} ${close ? 'unmount' : ''} `}> */}
         <div className="modal-head">
-          <h1 className="title">ドット・ライングリッドの設定</h1>
-          <button className="modal-close" onClick={HandleClickClose}>
+          <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
+          <button className="modal-close" onClick={() => setShowDotLineGridModal(false)}>
             닫기
           </button>
         </div>
@@ -29,11 +39,11 @@ export default function DotLineGrid(props) {
           <div className="grid-check-form">
             <div className="d-check-box pop">
               <input type="checkbox" id="ch01" />
-              <label htmlFor="ch01">点グリッド表示</label>
+              <label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label>
             </div>
             <div className="d-check-box pop">
               <input type="checkbox" id="ch02" />
-              <label htmlFor="ch02">ライングリッドの表示</label>
+              <label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
             </div>
           </div>
           <div className="grid-option-wrap">
@@ -43,14 +53,14 @@ export default function DotLineGrid(props) {
                 <label htmlFor="ra01"></label>
               </div>
               <div className="grid-input-form">
-                <span className="mr10">横間隔</span>
+                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.horizon')}</span>
                 <div className="input-grid mr5">
                   <input type="text" className="input-origin" defaultValue={910} />
                 </div>
                 <span>mm</span>
               </div>
               <div className="grid-input-form">
-                <span className="mr10">横間隔</span>
+                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.vertical')}</span>
                 <div className="input-grid mr5">
                   <input type="text" className="input-origin" defaultValue={910} />
                 </div>
@@ -63,20 +73,20 @@ export default function DotLineGrid(props) {
                 <label htmlFor="ra02"></label>
               </div>
               <div className="grid-input-form">
-                <span className="mr10">横間隔</span>
+                <span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.ratio')}</span>
                 <div className="input-grid mr5">
                   <input type="text" className="input-origin" defaultValue={910} />
                 </div>
                 <span>mm</span>
               </div>
               <div className="grid-select">
-                <QSelectBox title={'原寸'} option={SelectOption} />
+                <QSelectBox title={'原寸'} options={SelectOption} />
               </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal mr5">初期化</button>
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal mr5">{getMessage('modal.canvas.setting.grid.dot.line.setting.reset')}</button>
+            <button className="btn-frame modal act">{getMessage('modal.canvas.setting.grid.dot.line.setting.save')}</button>
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
index c8a61e11..ce635c87 100644
--- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
@@ -347,8 +347,8 @@ export default function OuterLineWall(props) {
     })
   }
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -1000 + 50 }}>
-      <div className={`modal-pop-wrap ssm`}>
+    <WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
+      <div className={`modal-pop-wrap ssm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
           <button className="modal-close" onClick={() => setShowOutlineModal(false)}>
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx
index e8178cee..6147f610 100644
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@@ -1,11 +1,10 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useRecoilState } from 'recoil'
 import { settingModalGridOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
-import { useScopedI18n } from '@/locales/client'
-import DotLineGrid from '../grid/DotLineGrid'
 
-export default function GridOption() {
+export default function GridOption(props) {
+  const { setShowDotLineGridModal } = props
   const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
   const { getMessage } = useMessage()
 
diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
index 04fc2a98..88f3a972 100644
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@@ -8,12 +8,12 @@ import { useMessage } from '@/hooks/useMessage'
 import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
 
 export default function SettingModal01(props) {
-  const { setShowCanvasSettingModal } = props
+  const { setShowCanvasSettingModal, setShowDotLineGridModal } = props
   const [buttonAct, setButtonAct] = useState(1)
   const { getMessage } = useMessage()
 
   return (
-    <WithDraggable isShow={true} pos={{ x: window.innerWidth - 450 - 50, y: -1000 + 50 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
       <div className={`modal-pop-wrap sm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
@@ -36,7 +36,7 @@ export default function SettingModal01(props) {
           </div>
           {buttonAct === 1 && <FirstOption />}
           {buttonAct === 2 && <SecondOption />}
-          {buttonAct === 3 && <GridOption />}
+          {buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} />}
         </div>
       </div>
     </WithDraggable>
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 8aaa0aad..bcc6c7ad 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -60,6 +60,15 @@
   "modal.canvas.setting.grid": "그리드(JA)",
   "modal.canvas.setting.grid.optional.line": "ランダムグリッド",
   "modal.canvas.setting.grid.dot.line": "ドット・ライングリッド",
+  "modal.canvas.setting.grid.dot.line.setting": "ドット・ライングリッドの設定",
+  "modal.canvas.setting.grid.dot.line.setting.dot.display": "点グリッド表示",
+  "modal.canvas.setting.grid.dot.line.setting.line.display": "ライングリッドの表示",
+  "modal.canvas.setting.grid.dot.line.setting.line.origin": "原寸",
+  "modal.canvas.setting.grid.dot.line.setting.horizon": "横間隔",
+  "modal.canvas.setting.grid.dot.line.setting.vertical": "縦間隔",
+  "modal.canvas.setting.grid.dot.line.setting.ratio": "比間隔",
+  "modal.canvas.setting.grid.dot.line.setting.reset": "初期化",
+  "modal.canvas.setting.grid.dot.line.setting.save": "保存",
   "modal.canvas.setting.grid.absorption.add": "吸着点を追加",
   "modal.canvas.setting.grid.color.setting": "グリッド色の設定",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 89f93d23..068dd262 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -57,6 +57,15 @@
   "modal.canvas.setting.grid": "그리드",
   "modal.canvas.setting.grid.optional.line": "임의 그리드",
   "modal.canvas.setting.grid.dot.line": "점·선 그리드",
+  "modal.canvas.setting.grid.dot.line.setting": "점·선 그리드 설정",
+  "modal.canvas.setting.grid.dot.line.setting.dot.display": "점 그리드 표시",
+  "modal.canvas.setting.grid.dot.line.setting.line.display": "선 그리드 표시",
+  "modal.canvas.setting.grid.dot.line.setting.line.origin": "원치수",
+  "modal.canvas.setting.grid.dot.line.setting.horizon": "가로간격",
+  "modal.canvas.setting.grid.dot.line.setting.vertical": "세로간격",
+  "modal.canvas.setting.grid.dot.line.setting.ratio": "비율간격",
+  "modal.canvas.setting.grid.dot.line.setting.reset": "초기화",
+  "modal.canvas.setting.grid.dot.line.setting.save": "저장",
   "modal.canvas.setting.grid.absorption.add": "흡착점 추가",
   "modal.canvas.setting.grid.color.setting": "그리드 색 설정",
   "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",