diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
index 938b5244..d7696a84 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
@@ -8,6 +8,7 @@ import { currentObjectState } from '@/store/canvasAtom'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
 import { useSwal } from '@/hooks/useSwal'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function AuxiliaryEdit(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -66,7 +67,19 @@ export default function AuxiliaryEdit(props) {
               <p className="mb5">{getMessage('length')}</p>
               <div className="input-move-wrap mb5">
                 <div className="input-move">
-                  <input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(normalizeDigits(e.target.value))} />
+                  {/*<input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(normalizeDigits(e.target.value))} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={verticalSize}
+                    onChange={(value) => setVerticalSize(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
                 </div>
                 <span>mm</span>
                 <div className="direction-move-wrap">
@@ -88,7 +101,19 @@ export default function AuxiliaryEdit(props) {
               </div>
               <div className="input-move-wrap">
                 <div className="input-move">
-                  <input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(normalizeDigits(e.target.value))} />
+                  {/*<input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(normalizeDigits(e.target.value))} />*/}
+                  <CalculatorInput
+                    id=""
+                    name=""
+                    label=""
+                    className="input-origin block"
+                    value={horizonSize}
+                    onChange={(value) => setHorizonSize(value)}
+                    options={{
+                      allowNegative: false,
+                      allowDecimal: false
+                    }}
+                  />
                 </div>
                 <span>mm</span>
                 <div className="direction-move-wrap">
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
index 5a9cde6f..40fb9f76 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
@@ -8,19 +8,21 @@ import { useEffect, useState } from 'react'
 import Big from 'big.js'
 import { calcLineActualSize, calcLinePlaneSize } from '@/util/qpolygon-utils'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 export default function AuxiliarySize(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const [checkedRadio, setCheckedRadio] = useState(null)
-  const [value1, setValue1] = useState(null)
-  const [value2, setValue2] = useState(null)
+  const [value1, setValue1] = useState('')
+  const [value2, setValue2] = useState('')
   const [size, setSize] = useState(0)
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const currentObject = useRecoilValue(currentObjectState)
   const canvas = useRecoilValue(canvasState)
 
+
   useEffect(() => {
     return () => {
       canvas?.discardActiveObject()
@@ -37,7 +39,7 @@ export default function AuxiliarySize(props) {
   }, [currentObject])
 
   const handleInput = (e) => {
-    let value = e.target.value.replace(/^0+/, '')
+    let value = e.replace(/^0+/, '')
     if (value === '') {
       if (checkedRadio === 1) setValue1(value)
       if (checkedRadio === 2) setValue2(value)
@@ -130,7 +132,20 @@ export default function AuxiliarySize(props) {
           <div className="outline-form">
             <span style={{ width: 'auto' }}>{getMessage('length')}</span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />
+              {/*<input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                value={value1}
+                onChange={handleInput}
+                readOnly={checkedRadio !== 1}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
+              />
             </div>
             <span className="thin">mm</span>
           </div>
@@ -149,7 +164,20 @@ export default function AuxiliarySize(props) {
           <div className="outline-form">
             <span style={{ width: 'auto' }}>{getMessage('length')}</span>
             <div className="input-grid mr5">
-              <input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />
+              {/*<input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
+                className="input-origin block"
+                value={value2}
+                onChange={handleInput}
+                readOnly={checkedRadio !== 2}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
+              />
             </div>
             <span className="thin">mm</span>
           </div>
diff --git a/src/components/floor-plan/modal/movement/type/FlowLine.jsx b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
index 7c400fd4..d4267a27 100644
--- a/src/components/floor-plan/modal/movement/type/FlowLine.jsx
+++ b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
@@ -2,6 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useState } from 'react'
 import { currentObjectState } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const FLOW_LINE_TYPE = {
   DOWN_LEFT: 'downLeft',
@@ -69,13 +70,27 @@ export default function FlowLine({ FLOW_LINE_REF }) {
           <div className="outline-form">
             <span>{getMessage('modal.movement.flow.line.movement')}</span>
             <div className="input-grid mr5">
-              <input
-                type="text"
+              {/*<input*/}
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  ref={FLOW_LINE_REF.FILLED_INPUT_REF}*/}
+              {/*  value={filledInput}*/}
+              {/*  onFocus={handleFocus}*/}
+              {/*  onChange={handleInput}*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 ref={FLOW_LINE_REF.FILLED_INPUT_REF}
                 value={filledInput}
                 onFocus={handleFocus}
-                onChange={handleInput}
+                onChange={(value)=>{setFilledInput(value)}}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
             <span className="thin">mm</span>
diff --git a/src/components/floor-plan/modal/movement/type/Updown.jsx b/src/components/floor-plan/modal/movement/type/Updown.jsx
index f03685e7..ab88bbbf 100644
--- a/src/components/floor-plan/modal/movement/type/Updown.jsx
+++ b/src/components/floor-plan/modal/movement/type/Updown.jsx
@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { currentObjectState } from '@/store/canvasAtom'
 import { normalizeDigits } from '@/util/input-utils'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const UP_DOWN_TYPE = {
   UP: 'up',
@@ -35,6 +36,7 @@ export default function Updown({ UP_DOWN_REF }) {
           <span>{getMessage('modal.movement.flow.line.position')}</span>
           <div className="input-grid mr5">
             <input type="text" className="input-origin block" defaultValue={100} readOnly={true} ref={UP_DOWN_REF.POINTER_INPUT_REF} />
+
           </div>
         </div>
         <div className="moving-tab-content">
@@ -68,13 +70,27 @@ export default function Updown({ UP_DOWN_REF }) {
           <div className="outline-form">
             <span>{getMessage('modal.movement.flow.line.movement')}</span>
             <div className="input-grid mr5">
-              <input
-                type="text"
+              {/*<input*/}
+              {/*  type="text"*/}
+              {/*  className="input-origin block"*/}
+              {/*  ref={UP_DOWN_REF.FILLED_INPUT_REF}*/}
+              {/*  value={filledInput}*/}
+              {/*  onFocus={handleFocus}*/}
+              {/*  onChange={handleInput}*/}
+              {/*/>*/}
+              <CalculatorInput
+                id=""
+                name=""
+                label=""
                 className="input-origin block"
                 ref={UP_DOWN_REF.FILLED_INPUT_REF}
                 value={filledInput}
                 onFocus={handleFocus}
-                onChange={handleInput}
+                onChange={(value)=>{setFilledInput(value)}}
+                options={{
+                  allowNegative: false,
+                  allowDecimal: false
+                }}
               />
             </div>
             <span className="thin">mm</span>
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
index 7ab89106..4ede1367 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
 import { forwardRef, useState } from 'react'
+import { CalculatorInput } from '@/components/common/input/CalcInput'
 
 const PlacementSurface = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
@@ -74,10 +75,32 @@ const PlacementSurface = forwardRef((props, refs) => {
                     <div className="eaves-keraba-td">
                       <div className="outline-form">
                         <div className="input-grid mr5" style={{ width: '57px' }}>
-                          <input
-                            type="text"
+                          {/*<input*/}
+                          {/*  type="text"*/}
+                          {/*  className="input-origin plane block"*/}
+                          {/*  defaultValue={line.value}*/}
+                          {/*  ref={*/}
+                          {/*    line.isDiagonal*/}
+                          {/*      ? lengthetc*/}
+                          {/*      : index === 0*/}
+                          {/*        ? length1*/}
+                          {/*        : index === 1*/}
+                          {/*          ? length2*/}
+                          {/*          : index === 2*/}
+                          {/*            ? length3*/}
+                          {/*            : index === 3*/}
+                          {/*              ? length4*/}
+                          {/*              : length5*/}
+                          {/*  }*/}
+                          {/*/>*/}
+
+                          <CalculatorInput
+                            id=""
+                            name=""
+                            label=""
                             className="input-origin plane block"
-                            defaultValue={line.value}
+                            value={line.value}
+                            onChange={()=>{}}
                             ref={
                               line.isDiagonal
                                 ? lengthetc
@@ -91,6 +114,10 @@ const PlacementSurface = forwardRef((props, refs) => {
                                         ? length4
                                         : length5
                             }
+                            options={{
+                              allowNegative: false,
+                              allowDecimal: false
+                            }}
                           />
                         </div>
                         <span className="thin">mm</span>
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>