diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx
index df4a25d7..849920bf 100644
--- a/src/components/floor-plan/modal/Slope.jsx
+++ b/src/components/floor-plan/modal/Slope.jsx
@@ -4,6 +4,7 @@ import { globalPitchState, pitchSelector, pitchTextSelector } from '@/store/canv
 import { useRecoilState } from 'recoil'
 import { useRef } from 'react'
 import { usePopup } from '@/hooks/usePopup'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Slope({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
@@ -22,7 +23,19 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
               {getMessage('slope')}
             </span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
+              {/*<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                ref={inputRef}
+                value={globalPitch}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: true //(index !== 0),
+                }}
+              ></CalculatorInput>
             </div>
             <span className="thin">{pitchText}</span>
           </div>
diff --git a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
index c5496a1e..b8eab8a7 100644
--- a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
@@ -98,7 +98,7 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
                     }}
                     options={{
                       allowNegative: false,
-                      allowDecimal: false //(index !== 0),
+                      allowDecimal: true //(index !== 0),
                     }}
                   ></CalculatorInput>
                 </div>
diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
index 78597844..82abfa3a 100644
--- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
@@ -13,6 +13,7 @@ import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function ContextRoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -204,15 +205,30 @@ export default function ContextRoofAllocationSetting(props) {
                         <div className="flex-ment">
                           <span>{getMessage('modal.object.setting.offset.slope')}</span>
                           <div className="input-grid">
-                            <input
-                              type="text"
+                            {/*<input*/}
+                            {/*  type="text"*/}
+                            {/*  className="input-origin block"*/}
+                            {/*  onChange={(e) => {*/}
+                            {/*    e.target.value = normalizeDecimalLimit(e.target.value, 2)*/}
+                            {/*    handleChangePitch(e, index)*/}
+                            {/*  }}*/}
+                            {/*  value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}*/}
+                            {/*/>*/}
+                            <CalculatorInput
+                              id=""
+                              name=""
+                              label=""
                               className="input-origin block"
-                              onChange={(e) => {
-                                e.target.value = normalizeDecimalLimit(e.target.value, 2)
-                                handleChangePitch(e, index)
-                              }}
+                              ref={pitchRef}
                               value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}
-                            />
+                              onChange={(value) => {
+                                handleChangePitch(value, index)
+                              }}
+                              options={{
+                                allowNegative: false,
+                                allowDecimal: true //(index !== 0),
+                              }}
+                            ></CalculatorInput>
                           </div>
                           <span className="absol">{pitchText}</span>
                         </div>
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
index 0e0e09ee..2e8d415b 100644
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@@ -14,6 +14,7 @@ import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
 import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { getDegreeByChon } from '@/util/canvas-util'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function RoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -205,15 +206,30 @@ export default function RoofAllocationSetting(props) {
                           <div className="flex-ment">
                             <span>{getMessage('modal.object.setting.offset.slope')}</span>
                             <div className="input-grid">
-                              <input
-                                type="text"
+                              {/*<input*/}
+                              {/*  type="text"*/}
+                              {/*  className="input-origin block"*/}
+                              {/*  onChange={(e) => {*/}
+                              {/*    e.target.value = normalizeDecimalLimit(e.target.value, 2)*/}
+                              {/*    handleChangePitch(e, index)*/}
+                              {/*  }}*/}
+                              {/*  value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}*/}
+                              {/*/>*/}
+                              <CalculatorInput
+                                id=""
+                                name=""
+                                label=""
                                 className="input-origin block"
-                                onChange={(e) => {
-                                  e.target.value = normalizeDecimalLimit(e.target.value, 2)
-                                  handleChangePitch(e, index)
-                                }}
+                                ref={pitchRef}
                                 value={currentAngleType === 'slope' ? (roof.pitch ?? '') : (roof.angle ?? '')}
-                              />
+                                onChange={(value) => {
+                                  handleChangePitch(value, index)
+                                }}
+                                options={{
+                                  allowNegative: false,
+                                  allowDecimal: true //(index !== 0),
+                                }}
+                              ></CalculatorInput>
                             </div>
                             <span className="absol">{pitchText}</span>
                           </div>
diff --git a/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx b/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
index c49cb3fa..fac8701e 100644
--- a/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
+++ b/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
@@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
 import { selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { useEffect } from 'react'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Eaves({ offsetRef, pitchRef, pitchText }) {
   const { getMessage } = useMessage()
@@ -16,12 +17,24 @@ export default function Eaves({ offsetRef, pitchRef, pitchText }) {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5">
-          <input
-            type="text"
+          {/*<input*/}
+          {/*  type="text"*/}
+          {/*  className="input-origin block"*/}
+          {/*  defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}*/}
+          {/*  ref={pitchRef}*/}
+          {/*/>*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
             className="input-origin block"
-            defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}
             ref={pitchRef}
-          />
+            value={currentAngleType === ANGLE_TYPE.SLOPE ? selectedRoofMaterial.pitch : selectedRoofMaterial.angle}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>