diff --git a/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx b/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
index 674525a8..cb38560f 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
@@ -11,8 +11,20 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={pitch}
-                 onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          {/*<input type="text" className="input-origin block" value={pitch}*/}
+          {/*       onChange={(e) => setPitch(normalizeDecimalLimit(e.target.value, 2))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={pitch}
+            onChange={(value) => setPitch(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
@@ -21,8 +33,21 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={eavesOffset}
-                 onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={eavesOffset}*/}
+          {/*       onChange={(e) => setEavesOffset(normalizeDigits(e.target.value))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={eavesOffset}
+            onChange={(value) => setEavesOffset(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
+
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx b/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
index c4f8736f..30c1a9bd 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
@@ -19,8 +19,8 @@ export default function Jerkinhead({
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={gableOffset}
-                 onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={gableOffset}*/}
+          {/*       onChange={(e) => setGableOffset(normalizeDigits(e.target.value))} />*/}
           <CalculatorInput
             id=""
             name=""
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 7326204e..6fe1d32f 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Shed.jsx
@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }) {
   const { getMessage } = useMessage()
@@ -8,16 +9,40 @@ export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch,
       <div className="outline-form mb10">
         <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) => setShedPitch(normalizeDecimalLimit(e.target.value, 2))} />
+          {/*<input type="text" className="input-origin block" value={shedPitch}*/}
+          {/*       onChange={(e) => setShedPitch(normalizeDecimalLimit(e.target.value, 2))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={shedPitch}
+            onChange={(value) => setShedPitch(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: true //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">{pitchText}</span>
       </div>
       <div className="outline-form">
         <span className="mr10">{getMessage('shed.width')}</span>
         <div className="input-grid mr5" style={{ width: '100px' }}>
-          <input type="text" className="input-origin block" value={shedWidth}
-                 onChange={(e) => setShedWidth(normalizeDigits(e.target.value))} />
+          {/*<input type="text" className="input-origin block" value={shedWidth}*/}
+          {/*       onChange={(e) => setShedWidth(normalizeDigits(e.target.value))} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={shedWidth}
+            onChange={(value) => setShedWidth(value)}
+            options={{
+              allowNegative: false,
+              allowDecimal: false //(index !== 0),
+            }}
+          ></CalculatorInput>
         </div>
         <span className="thin">mm</span>
       </div>