diff --git a/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx b/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx
index 76f09cc7..79ae0898 100644
--- a/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx
+++ b/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx
@@ -1,6 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
   const { getMessage } = useMessage()
@@ -74,7 +75,20 @@ export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
               <div className="eaves-keraba-td">
                 <div className="outline-form">
                   <div className="input-grid mr5" style={{ width: '100px' }}>
-                    <input type="text" className="input-origin block" placeholder={0} ref={length1Ref} />
+                    {/*<input type="text" className="input-origin block" placeholder={0} ref={length1Ref} />*/}
+                    <CalculatorInput
+                      id=""
+                      name=""
+                      label=""
+                      className="input-origin block"
+                      value={length1Ref.current?.value ?? 0}
+                      ref={length1Ref}
+                      onChange={() => {}}
+                      options={{
+                        allowNegative: false,
+                        allowDecimal: false
+                      }}
+                    />
                   </div>
                   <span className="thin">mm</span>
                 </div>
diff --git a/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx b/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx
index 92f6a10b..d78a202f 100644
--- a/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx
+++ b/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx
@@ -1,6 +1,7 @@
 import { useMessage } from '@/hooks/useMessage'
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref, arrow2Ref, radioTypeRef, currentWallLineRef }, ref) {
   const { getMessage } = useMessage()
@@ -46,7 +47,21 @@ export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref,
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '100px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} readOnly={type !== 1} ref={length1Ref} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} readOnly={type !== 1} ref={length1Ref} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={length1Ref.current?.value ?? 0}
+                        ref={length1Ref}
+                        onChange={() => {}}
+                        readOnly={type !== 1}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -80,7 +95,21 @@ export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref,
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '100px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} readOnly={type !== 2} ref={length2Ref} />
+                      {/*<input type="text" className="input-origin block" placeholder={0} readOnly={type !== 2} ref={length2Ref} />*/}
+                      <CalculatorInput
+                        id=""
+                        name=""
+                        label=""
+                        className="input-origin block"
+                        value={length2Ref.current?.value ?? 0}
+                        ref={length2Ref}
+                        onChange={() => {}}
+                        readOnly={type !== 2}
+                        options={{
+                          allowNegative: false,
+                          allowDecimal: false
+                        }}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>