diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index d3cc9684..b7d9a5da 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -4,14 +4,15 @@ import { useEffect, useRef } from 'react'
 
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
-import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useRecoilValue } from 'recoil'
 import { currentObjectState } from '@/store/canvasAtom'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
+import QContextMenu from '@/components/common/context-menu/QContextMenu'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
+  console.log(canvasRef)
   const { canvas } = useCanvas('canvas')
   const { handleZoomClear } = useCanvasEvent()
   const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({
@@ -42,10 +43,8 @@ export default function CanvasFrame({ plan }) {
   const onClickContextMenu = (index) => {}
 
   return (
-    <div className="canvas-frame flex justify-center">
-      <div className="canvas-container" style={{ position: 'relative' }}>
-        <canvas ref={canvasRef} id={'canvas'}></canvas>
-      </div>
+    <div className="canvas-frame">
+      <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
 
       <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
         {contextMenu.map((menus, index) => (
@@ -62,7 +61,7 @@ export default function CanvasFrame({ plan }) {
               >
                 {menu.name}
               </li>
-              ))}
+            ))}
           </ul>
         ))}
       </QContextMenu>
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 1836f4df..54c82ce8 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -23,6 +23,7 @@ import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { popupState } from '@/store/popupAtom'
 import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
 import { usePopup } from '@/hooks/usePopup'
+import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
 
 const canvasMenus = [
   { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
@@ -79,6 +80,19 @@ export default function CanvasMenu(props) {
   const { swalFire } = useSwal()
   const [popup, setPopup] = useRecoilState(popupState)
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
+  useEffect(() => {
+    console.log(canvas)
+    if (canvas) {
+      const circle = new fabric.Circle({
+        left: 300,
+        top: 300,
+        radius: 5,
+        stroke: 'black',
+      })
+      canvas.add(circle)
+      canvas.renderAll()
+    }
+  }, [])
   const onClickNav = (menu) => {
     setMenuNumber(menu.index)
     setCurrentMenu(menu.title)
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index b115ca48..21b90616 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -128,8 +128,8 @@ export default function FloorPlan() {
     <>
       <div className="canvas-wrap">
         <CanvasMenu {...modalProps} />
-        <div className="canvas-content">
-          <CanvasLayout />
+        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
+          <CanvasLayout menuNumber={menuNumber} />
           {showOutlineModal && <WallLineSetting {...outlineProps} />}
           {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
           {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx
index ba9ede2a..4e6d63aa 100644
--- a/src/components/floor-plan/modal/Slope.jsx
+++ b/src/components/floor-plan/modal/Slope.jsx
@@ -9,7 +9,7 @@ export default function Slope({ setShowSlopeSettingModal }) {
   const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
   const inputRef = useRef()
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap xxxm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
index 2aa5cd84..8ce885c4 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
@@ -121,7 +121,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
     setType(button.type)
   }
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx
index 555cdfcb..94ad7317 100644
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx
@@ -14,7 +14,7 @@ export default function BasicSetting({ setShowBasicSettingModal }) {
   const [tabNum, setTabNum] = useState(1)
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap lx-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
index f165bde0..6daf04b2 100644
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@@ -14,7 +14,7 @@ export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModa
     setCircuitAllocationType,
   }
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap lx-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
index bab1e696..b19f435e 100644
--- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
+++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
 import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves'
 import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
 import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
@@ -35,7 +34,7 @@ export default function EavesGableEdit({ setShowEavesGableEditModal }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx
index 569249d6..2e6bd7ec 100644
--- a/src/components/floor-plan/modal/movement/MovementSetting.jsx
+++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx
@@ -13,7 +13,7 @@ export default function MovementSetting({ setShowMovementModal }) {
   ]
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx
index 764535e3..d028e9a7 100644
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@@ -1,9 +1,8 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
-import { useEvent } from '@/hooks/useEvent'
 import { canvasState } from '@/store/canvasAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
@@ -74,7 +73,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
     { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
   ]
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap lrr`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
index d26b2ef3..a1e848be 100644
--- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
@@ -9,7 +9,7 @@ export default function PropertiesSetting(props) {
   const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(setShowPropertiesSettingModal)
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap ssm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
index 975a582a..84e59da4 100644
--- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
@@ -109,7 +109,7 @@ export default function WallLineSetting(props) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap r mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
index 0d2c301c..9374dbf9 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
@@ -5,7 +5,6 @@ import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
 import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
 import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
 import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
-import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing'
@@ -120,7 +119,7 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal })
     setType(button.type)
   }
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 55cfcb6b..bc7ba2b7 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -1,7 +1,6 @@
 import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
 import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
 import { useRecoilState } from 'recoil'
 import { Fragment, useEffect, useState } from 'react'
 import { canvasSettingState } from '@/store/canvasAtom'
@@ -18,7 +17,18 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
   const [basicSetting, setBasicSettings] = useState({
     roofSizeSet: 1,
     roofAngleSet: 'slope',
-    roofs: [{ roofApply: true, roofSeq: 1, roofType: 1, roofWidth: 200, roofHeight: 200, roofHajebichi: 200, roofGap: 0, roofLayout: 'parallel' }],
+    roofs: [
+      {
+        roofApply: true,
+        roofSeq: 1,
+        roofType: 1,
+        roofWidth: 200,
+        roofHeight: 200,
+        roofHajebichi: 200,
+        roofGap: 0,
+        roofLayout: 'parallel',
+      },
+    ],
   })
 
   const { getMessage } = useMessage()
@@ -159,7 +169,7 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap l mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index e667667e..90e05dbf 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
@@ -239,7 +239,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
   }, [])
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap l-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
index 72599bbe..52ee2e3f 100644
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
 
@@ -10,7 +9,7 @@ export default function RoofAllocationSetting({ setShowRoofAllocationSettingModa
     useRoofAllocationSetting(setShowRoofAllocationSettingModal)
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap ml`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
index ec1684a6..9e9dc93f 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
@@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap xxm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
index 60355848..d92ed807 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
@@ -67,10 +67,19 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
     handleRollBack,
   }
 
-  const directionProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth }
+  const directionProps = {
+    pitch,
+    setPitch,
+    eavesOffset,
+    setEavesOffset,
+    gableOffset,
+    setGableOffset,
+    shedWidth,
+    setShedWidth,
+  }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap lr mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
diff --git a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
index 7e5230b1..1e421440 100644
--- a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
+++ b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
 import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
 import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
 import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting'
@@ -38,7 +37,7 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa
   }
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>