diff --git a/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx b/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
index fac8701e..f3dd4052 100644
--- a/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
+++ b/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
@@ -43,7 +43,20 @@ export default function Eaves({ offsetRef, pitchRef, pitchText }) {
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />
+          {/*<input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={offsetRef.current?.value ?? 500}  // Set default value to 500
+            ref={offsetRef}
+            onChange={() => {}}
+            options={{
+              allowNegative: false,
+              allowDecimal: false
+            }}
+          />
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx b/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
index 6da1266e..fe04a65e 100644
--- a/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
+++ b/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
@@ -1,6 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue } from 'recoil'
 import { currentAngleTypeSelector } from '@/store/canvasAtom'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Gable({ offsetRef }) {
   const { getMessage } = useMessage()
@@ -12,7 +13,20 @@ export default function Gable({ offsetRef }) {
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
+          {/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={offsetRef.current?.value ?? 300}  // Set default value to 500
+            ref={offsetRef}
+            onChange={() => {}}
+            options={{
+              allowNegative: false,
+              allowDecimal: false
+            }}
+          />
         </div>
         <span className="thin">mm</span>
       </div>
diff --git a/src/components/floor-plan/modal/roofShape/passivity/Shed.jsx b/src/components/floor-plan/modal/roofShape/passivity/Shed.jsx
index 474c2f60..67a47bb0 100644
--- a/src/components/floor-plan/modal/roofShape/passivity/Shed.jsx
+++ b/src/components/floor-plan/modal/roofShape/passivity/Shed.jsx
@@ -1,4 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Shed({ offsetRef }) {
   const { getMessage } = useMessage()
@@ -9,7 +10,20 @@ export default function Shed({ offsetRef }) {
           {getMessage('shed.width')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
+          {/*<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />*/}
+          <CalculatorInput
+            id=""
+            name=""
+            label=""
+            className="input-origin block"
+            value={offsetRef.current?.value ?? 300}  // Set default value to 500
+            ref={offsetRef}
+            onChange={() => {}}
+            options={{
+              allowNegative: false,
+              allowDecimal: false
+            }}
+          />
         </div>
         <span className="thin">mm</span>
       </div>