diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
index d6d281918cf..50327601542 100644
--- a/app/src/atoms/InputField/index.tsx
+++ b/app/src/atoms/InputField/index.tsx
@@ -75,247 +75,487 @@ export interface InputFieldProps {
     | typeof TYPOGRAPHY.textAlignCenter
   /** small or medium input field height, relevant only */
   size?: 'medium' | 'small'
+  /** react useRef for controlling focus on ODD */
+  ref?: React.MutableRefObject<HTMLInputElement | null>
 }
 
-export function InputField(props: InputFieldProps): JSX.Element {
-  return (
-    <Flex
-      alignItems={ALIGN_CENTER}
-      lineHeight={1}
-      fontSize={TYPOGRAPHY.fontSizeP}
-      fontWeight={TYPOGRAPHY.fontWeightRegular}
-      color={props.error != null ? COLOR_WARNING_DARK : COLORS.black90}
-      opacity={props.disabled ?? false ? 0.5 : ''}
-    >
-      <Input {...props} />
-    </Flex>
-  )
-}
+export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
+  (props, ref): JSX.Element => {
+    const {
+      placeholder,
+      textAlign = TYPOGRAPHY.textAlignLeft,
+      size = 'small',
+      title,
+      tooltipText,
+      tabIndex = 0,
+      ...inputProps
+    } = props
+    const hasError = props.error != null
+    const value = props.isIndeterminate ?? false ? '' : props.value ?? ''
+    const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder
+    const [targetProps, tooltipProps] = useHoverTooltip()
 
-function Input(props: InputFieldProps): JSX.Element {
-  const {
-    placeholder,
-    textAlign = TYPOGRAPHY.textAlignLeft,
-    size = 'small',
-    title,
-    tooltipText,
-    tabIndex = 0,
-    ...inputProps
-  } = props
-  const hasError = props.error != null
-  const value = props.isIndeterminate ?? false ? '' : props.value ?? ''
-  const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder
-  const [targetProps, tooltipProps] = useHoverTooltip()
-
-  const OUTER_CSS = css`
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      grid-gap: ${SPACING.spacing8};
-      &:focus-within {
-        filter: ${hasError
-          ? 'none'
-          : `drop-shadow(0px 0px 10px ${COLORS.blue50})`};
+    const OUTER_CSS = css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        grid-gap: ${SPACING.spacing8};
+        &:focus-within {
+          filter: ${hasError
+            ? 'none'
+            : `drop-shadow(0px 0px 10px ${COLORS.blue50})`};
+        }
       }
-    }
-  `
-
-  const INPUT_FIELD = css`
-    display: flex;
-    background-color: ${COLORS.white};
-    border-radius: ${BORDERS.borderRadius4};
-    padding: ${SPACING.spacing8};
-    border: 1px ${BORDERS.styleSolid} ${hasError ? COLORS.red50 : COLORS.grey50};
-    font-size: ${TYPOGRAPHY.fontSizeP};
-    width: 100%;
-    height: 2rem;
-
-    &:active:enabled {
-      border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
-    }
-
-    & input {
-      border-radius: inherit;
-      color: ${COLORS.black90};
-      border: none;
-      flex: 1 1 auto;
-      width: 100%;
-      height: ${SPACING.spacing16};
-      text-align: ${textAlign};
-    }
-    & input:focus {
-      outline: none;
-    }
+    `
 
-    &:hover {
+    const INPUT_FIELD = css`
+      display: flex;
+      background-color: ${COLORS.white};
+      border-radius: ${BORDERS.borderRadius4};
+      padding: ${SPACING.spacing8};
       border: 1px ${BORDERS.styleSolid}
-        ${hasError ? COLORS.red50 : COLORS.grey60};
-    }
-
-    &:focus-visible {
-      border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
-      outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
-      outline-offset: 2px;
-    }
-
-    &:focus-within {
-      border: 1px ${BORDERS.styleSolid}
-        ${hasError ? COLORS.red50 : COLORS.blue50};
-    }
-
-    &:disabled {
-      border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
-    }
-    input[type='number']::-webkit-inner-spin-button,
-    input[type='number']::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      height: ${size === 'small' ? '4.25rem' : '5rem'};
-      font-size: ${TYPOGRAPHY.fontSize28};
-      padding: ${SPACING.spacing16} ${SPACING.spacing24};
-      border: 2px ${BORDERS.styleSolid}
         ${hasError ? COLORS.red50 : COLORS.grey50};
+      font-size: ${TYPOGRAPHY.fontSizeP};
+      width: 100%;
+      height: 2rem;
 
-      &:focus-within {
-        box-shadow: none;
-        border: ${hasError ? '2px' : '3px'} ${BORDERS.styleSolid}
-          ${hasError ? COLORS.red50 : COLORS.blue50};
+      &:active:enabled {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
       }
 
       & input {
+        border-radius: inherit;
         color: ${COLORS.black90};
+        border: none;
         flex: 1 1 auto;
         width: 100%;
-        height: 100%;
+        height: ${SPACING.spacing16};
+        text-align: ${textAlign};
+      }
+      & input:focus {
+        outline: none;
+      }
+
+      &:hover {
+        border: 1px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.grey60};
+      }
+
+      &:focus-visible {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
+        outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+        outline-offset: 2px;
+      }
+
+      &:focus-within {
+        border: 1px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.blue50};
+      }
+
+      &:disabled {
+        border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
+      }
+      input[type='number']::-webkit-inner-spin-button,
+      input[type='number']::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        height: ${size === 'small' ? '4.25rem' : '5rem'};
         font-size: ${TYPOGRAPHY.fontSize28};
-        line-height: ${TYPOGRAPHY.lineHeight36};
+        padding: ${SPACING.spacing16} ${SPACING.spacing24};
+        border: 2px ${BORDERS.styleSolid}
+          ${hasError ? COLORS.red50 : COLORS.grey50};
+
+        &:focus-within {
+          box-shadow: none;
+          border: ${hasError ? '2px' : '3px'} ${BORDERS.styleSolid}
+            ${hasError ? COLORS.red50 : COLORS.blue50};
+        }
+
+        & input {
+          color: ${COLORS.black90};
+          flex: 1 1 auto;
+          width: 100%;
+          height: 100%;
+          font-size: ${TYPOGRAPHY.fontSize28};
+          line-height: ${TYPOGRAPHY.lineHeight36};
+        }
       }
-    }
-  `
-
-  const FORM_BOTTOM_SPACE_STYLE = css`
-    padding-top: ${SPACING.spacing4};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing8} 0rem;
-      padding-bottom: 0;
-    }
-  `
-
-  const TITLE_STYLE = css`
-    color: ${hasError ? COLORS.red50 : COLORS.black90};
-    padding-bottom: ${SPACING.spacing8};
-    text-align: ${textAlign};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      font-size: ${TYPOGRAPHY.fontSize22};
-      font-weight: ${TYPOGRAPHY.fontWeightRegular};
-      line-height: ${TYPOGRAPHY.lineHeight28};
-      justify-content: ${textAlign};
-    }
-  `
-
-  const ERROR_TEXT_STYLE = css`
-    color: ${COLORS.red50};
-    padding-top: ${SPACING.spacing4};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      font-size: ${TYPOGRAPHY.fontSize22};
+    `
+
+    const FORM_BOTTOM_SPACE_STYLE = css`
+      padding-top: ${SPACING.spacing4};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        padding: ${SPACING.spacing8} 0rem;
+        padding-bottom: 0;
+      }
+    `
+
+    const TITLE_STYLE = css`
+      color: ${hasError ? COLORS.red50 : COLORS.black90};
+      padding-bottom: ${SPACING.spacing8};
+      text-align: ${textAlign};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        font-size: ${TYPOGRAPHY.fontSize22};
+        font-weight: ${TYPOGRAPHY.fontWeightRegular};
+        line-height: ${TYPOGRAPHY.lineHeight28};
+        justify-content: ${textAlign};
+      }
+    `
+
+    const ERROR_TEXT_STYLE = css`
       color: ${COLORS.red50};
-      padding-top: ${SPACING.spacing8};
-    }
-  `
-
-  const UNITS_STYLE = css`
-    color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
-    font-size: ${TYPOGRAPHY.fontSizeLabel};
-    font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
-    line-height: ${TYPOGRAPHY.lineHeight12};
-    align-text: ${TEXT_ALIGN_RIGHT};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      padding-top: ${SPACING.spacing4};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        font-size: ${TYPOGRAPHY.fontSize22};
+        color: ${COLORS.red50};
+        padding-top: ${SPACING.spacing8};
+      }
+    `
+
+    const UNITS_STYLE = css`
       color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
-      font-size: ${TYPOGRAPHY.fontSize22};
-      font-weight: ${TYPOGRAPHY.fontWeightRegular};
-      line-height: ${TYPOGRAPHY.lineHeight28};
-      justify-content: ${textAlign};
-    }
-  `
-
-  return (
-    <Flex flexDirection={DIRECTION_COLUMN} width="100%">
-      {title != null ? (
-        <Flex gridGap={SPACING.spacing8}>
-          <StyledText
-            as="label"
-            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-            htmlFor={props.id}
-            css={TITLE_STYLE}
-          >
-            {title}
-          </StyledText>
-          {tooltipText != null ? (
-            <>
-              <Flex {...targetProps}>
-                <Icon
-                  name="information"
-                  size={SPACING.spacing12}
-                  color={COLORS.grey60}
-                />
-              </Flex>
-              <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
-            </>
+      font-size: ${TYPOGRAPHY.fontSizeLabel};
+      font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+      line-height: ${TYPOGRAPHY.lineHeight12};
+      align-text: ${TEXT_ALIGN_RIGHT};
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+        color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
+        font-size: ${TYPOGRAPHY.fontSize22};
+        font-weight: ${TYPOGRAPHY.fontWeightRegular};
+        line-height: ${TYPOGRAPHY.lineHeight28};
+        justify-content: ${textAlign};
+      }
+    `
+
+    return (
+      <Flex
+        alignItems={ALIGN_CENTER}
+        lineHeight={1}
+        fontSize={TYPOGRAPHY.fontSizeP}
+        fontWeight={TYPOGRAPHY.fontWeightRegular}
+        color={props.error != null ? COLOR_WARNING_DARK : COLORS.black90}
+        opacity={props.disabled ?? false ? 0.5 : ''}
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} width="100%">
+          {title != null ? (
+            <Flex gridGap={SPACING.spacing8}>
+              <StyledText
+                as="label"
+                fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+                htmlFor={props.id}
+                css={TITLE_STYLE}
+              >
+                {title}
+              </StyledText>
+              {tooltipText != null ? (
+                <>
+                  <Flex {...targetProps}>
+                    <Icon
+                      name="information"
+                      size={SPACING.spacing12}
+                      color={COLORS.grey60}
+                    />
+                  </Flex>
+                  <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+                </>
+              ) : null}
+            </Flex>
           ) : null}
-        </Flex>
-      ) : null}
-      <Flex width="100%" flexDirection={DIRECTION_COLUMN} css={OUTER_CSS}>
-        <Flex
-          tabIndex={tabIndex}
-          css={INPUT_FIELD}
-          alignItems={ALIGN_CENTER}
-          onClick={() => {
-            if (props.id != null) {
-              document.getElementById(props.id)?.focus()
-            }
-          }}
-        >
-          <StyledInput
-            {...inputProps}
-            data-testid={props.id}
-            id={props.id}
-            value={value}
-            placeholder={placeHolder}
-            onWheel={event => event.currentTarget.blur()} // prevent value change with scrolling
-            type={props.type}
-          />
-          {props.units != null ? (
-            <Flex css={UNITS_STYLE}>{props.units}</Flex>
+          <Flex width="100%" flexDirection={DIRECTION_COLUMN} css={OUTER_CSS}>
+            <Flex
+              tabIndex={tabIndex}
+              css={INPUT_FIELD}
+              alignItems={ALIGN_CENTER}
+              onClick={() => {
+                if (props.id != null) {
+                  document.getElementById(props.id)?.focus()
+                }
+              }}
+            >
+              <StyledInput
+                {...inputProps}
+                data-testid={props.id}
+                value={value}
+                placeholder={placeHolder}
+                onWheel={event => event.currentTarget.blur()} // prevent value change with scrolling
+                type={props.type}
+                ref={ref}
+              />
+              {props.units != null ? (
+                <Flex css={UNITS_STYLE}>{props.units}</Flex>
+              ) : null}
+            </Flex>
+          </Flex>
+          {props.caption != null ? (
+            <StyledText
+              as="label"
+              css={FORM_BOTTOM_SPACE_STYLE}
+              color={COLORS.grey60}
+            >
+              {props.caption}
+            </StyledText>
+          ) : null}
+          {props.secondaryCaption != null ? (
+            <StyledText
+              as="label"
+              css={FORM_BOTTOM_SPACE_STYLE}
+              color={COLORS.grey60}
+            >
+              {props.secondaryCaption}
+            </StyledText>
+          ) : null}
+          {hasError ? (
+            <StyledText as="label" css={ERROR_TEXT_STYLE}>
+              {props.error}
+            </StyledText>
           ) : null}
         </Flex>
       </Flex>
-      {props.caption != null ? (
-        <StyledText
-          as="label"
-          css={FORM_BOTTOM_SPACE_STYLE}
-          color={COLORS.grey60}
-        >
-          {props.caption}
-        </StyledText>
-      ) : null}
-      {props.secondaryCaption != null ? (
-        <StyledText
-          as="label"
-          css={FORM_BOTTOM_SPACE_STYLE}
-          color={COLORS.grey60}
-        >
-          {props.secondaryCaption}
-        </StyledText>
-      ) : null}
-      {hasError ? (
-        <StyledText as="label" css={ERROR_TEXT_STYLE}>
-          {props.error}
-        </StyledText>
-      ) : null}
-    </Flex>
-  )
-}
+    )
+  }
+)
+
+// export function InputField(props: InputFieldProps): JSX.Element {
+//   return (
+//     <Flex
+//       alignItems={ALIGN_CENTER}
+//       lineHeight={1}
+//       fontSize={TYPOGRAPHY.fontSizeP}
+//       fontWeight={TYPOGRAPHY.fontWeightRegular}
+//       color={props.error != null ? COLOR_WARNING_DARK : COLORS.black90}
+//       opacity={props.disabled ?? false ? 0.5 : ''}
+//     >
+//       <Input {...props} />
+//     </Flex>
+//   )
+// }
+
+// function Input(props: InputFieldProps): JSX.Element {
+//   const {
+//     placeholder,
+//     textAlign = TYPOGRAPHY.textAlignLeft,
+//     size = 'small',
+//     title,
+//     tooltipText,
+//     tabIndex = 0,
+//     ref,
+//     ...inputProps
+//   } = props
+//   const hasError = props.error != null
+//   const value = props.isIndeterminate ?? false ? '' : props.value ?? ''
+//   const placeHolder = props.isIndeterminate ?? false ? '-' : props.placeholder
+//   const [targetProps, tooltipProps] = useHoverTooltip()
+
+//   const OUTER_CSS = css`
+//     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+//       grid-gap: ${SPACING.spacing8};
+//       &:focus-within {
+//         filter: ${hasError
+//           ? 'none'
+//           : `drop-shadow(0px 0px 10px ${COLORS.blue50})`};
+//       }
+//     }
+//   `
+
+//   const INPUT_FIELD = css`
+//     display: flex;
+//     background-color: ${COLORS.white};
+//     border-radius: ${BORDERS.borderRadius4};
+//     padding: ${SPACING.spacing8};
+//     border: 1px ${BORDERS.styleSolid} ${hasError ? COLORS.red50 : COLORS.grey50};
+//     font-size: ${TYPOGRAPHY.fontSizeP};
+//     width: 100%;
+//     height: 2rem;
+
+//     &:active:enabled {
+//       border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+//     }
+
+//     & input {
+//       border-radius: inherit;
+//       color: ${COLORS.black90};
+//       border: none;
+//       flex: 1 1 auto;
+//       width: 100%;
+//       height: ${SPACING.spacing16};
+//       text-align: ${textAlign};
+//     }
+//     & input:focus {
+//       outline: none;
+//     }
+
+//     &:hover {
+//       border: 1px ${BORDERS.styleSolid}
+//         ${hasError ? COLORS.red50 : COLORS.grey60};
+//     }
+
+//     &:focus-visible {
+//       border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
+//       outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+//       outline-offset: 2px;
+//     }
+
+//     &:focus-within {
+//       border: 1px ${BORDERS.styleSolid}
+//         ${hasError ? COLORS.red50 : COLORS.blue50};
+//     }
+
+//     &:disabled {
+//       border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
+//     }
+//     input[type='number']::-webkit-inner-spin-button,
+//     input[type='number']::-webkit-outer-spin-button {
+//       -webkit-appearance: none;
+//       margin: 0;
+//     }
+
+//     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+//       height: ${size === 'small' ? '4.25rem' : '5rem'};
+//       font-size: ${TYPOGRAPHY.fontSize28};
+//       padding: ${SPACING.spacing16} ${SPACING.spacing24};
+//       border: 2px ${BORDERS.styleSolid}
+//         ${hasError ? COLORS.red50 : COLORS.grey50};
+
+//       &:focus-within {
+//         box-shadow: none;
+//         border: ${hasError ? '2px' : '3px'} ${BORDERS.styleSolid}
+//           ${hasError ? COLORS.red50 : COLORS.blue50};
+//       }
+
+//       & input {
+//         color: ${COLORS.black90};
+//         flex: 1 1 auto;
+//         width: 100%;
+//         height: 100%;
+//         font-size: ${TYPOGRAPHY.fontSize28};
+//         line-height: ${TYPOGRAPHY.lineHeight36};
+//       }
+//     }
+//   `
+
+//   const FORM_BOTTOM_SPACE_STYLE = css`
+//     padding-top: ${SPACING.spacing4};
+//     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+//       padding: ${SPACING.spacing8} 0rem;
+//       padding-bottom: 0;
+//     }
+//   `
+
+//   const TITLE_STYLE = css`
+//     color: ${hasError ? COLORS.red50 : COLORS.black90};
+//     padding-bottom: ${SPACING.spacing8};
+//     text-align: ${textAlign};
+//     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+//       font-size: ${TYPOGRAPHY.fontSize22};
+//       font-weight: ${TYPOGRAPHY.fontWeightRegular};
+//       line-height: ${TYPOGRAPHY.lineHeight28};
+//       justify-content: ${textAlign};
+//     }
+//   `
+
+//   const ERROR_TEXT_STYLE = css`
+//     color: ${COLORS.red50};
+//     padding-top: ${SPACING.spacing4};
+//     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+//       font-size: ${TYPOGRAPHY.fontSize22};
+//       color: ${COLORS.red50};
+//       padding-top: ${SPACING.spacing8};
+//     }
+//   `
+
+//   const UNITS_STYLE = css`
+//     color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
+//     font-size: ${TYPOGRAPHY.fontSizeLabel};
+//     font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+//     line-height: ${TYPOGRAPHY.lineHeight12};
+//     align-text: ${TEXT_ALIGN_RIGHT};
+//     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+//       color: ${props.disabled ? COLORS.grey40 : COLORS.grey50};
+//       font-size: ${TYPOGRAPHY.fontSize22};
+//       font-weight: ${TYPOGRAPHY.fontWeightRegular};
+//       line-height: ${TYPOGRAPHY.lineHeight28};
+//       justify-content: ${textAlign};
+//     }
+//   `
+
+//   return (
+//     <Flex flexDirection={DIRECTION_COLUMN} width="100%">
+//       {title != null ? (
+//         <Flex gridGap={SPACING.spacing8}>
+//           <StyledText
+//             as="label"
+//             fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+//             htmlFor={props.id}
+//             css={TITLE_STYLE}
+//           >
+//             {title}
+//           </StyledText>
+//           {tooltipText != null ? (
+//             <>
+//               <Flex {...targetProps}>
+//                 <Icon
+//                   name="information"
+//                   size={SPACING.spacing12}
+//                   color={COLORS.grey60}
+//                 />
+//               </Flex>
+//               <Tooltip tooltipProps={tooltipProps}>{tooltipText}</Tooltip>
+//             </>
+//           ) : null}
+//         </Flex>
+//       ) : null}
+//       <Flex width="100%" flexDirection={DIRECTION_COLUMN} css={OUTER_CSS}>
+//         <Flex
+//           tabIndex={tabIndex}
+//           css={INPUT_FIELD}
+//           alignItems={ALIGN_CENTER}
+//           onClick={() => {
+//             if (props.id != null) {
+//               document.getElementById(props.id)?.focus()
+//             }
+//           }}
+//         >
+//           <StyledInput
+//             {...inputProps}
+//             data-testid={props.id}
+//             value={value}
+//             placeholder={placeHolder}
+//             onWheel={event => event.currentTarget.blur()} // prevent value change with scrolling
+//             type={props.type}
+//             ref={ref}
+//           />
+//           {props.units != null ? (
+//             <Flex css={UNITS_STYLE}>{props.units}</Flex>
+//           ) : null}
+//         </Flex>
+//       </Flex>
+//       {props.caption != null ? (
+//         <StyledText
+//           as="label"
+//           css={FORM_BOTTOM_SPACE_STYLE}
+//           color={COLORS.grey60}
+//         >
+//           {props.caption}
+//         </StyledText>
+//       ) : null}
+//       {props.secondaryCaption != null ? (
+//         <StyledText
+//           as="label"
+//           css={FORM_BOTTOM_SPACE_STYLE}
+//           color={COLORS.grey60}
+//         >
+//           {props.secondaryCaption}
+//         </StyledText>
+//       ) : null}
+//       {hasError ? (
+//         <StyledText as="label" css={ERROR_TEXT_STYLE}>
+//           {props.error}
+//         </StyledText>
+//       ) : null}
+//     </Flex>
+//   )
+// }
 
 const StyledInput = styled.input`
   &::placeholder {
diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx
index 34cbef2330f..485bc28ec8f 100644
--- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx
+++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx
@@ -32,8 +32,21 @@ export function SetWifiCred({
   const { t } = useTranslation(['device_settings', 'shared'])
   const keyboardRef = React.useRef(null)
   const [showPassword, setShowPassword] = React.useState<boolean>(false)
+  const inputRef = React.useRef<HTMLInputElement>(null)
   const isUnboxingFlowOngoing = useIsUnboxingFlowOngoing()
 
+  const handleBlur = (): void => {
+    if (inputRef.current != null) inputRef.current?.focus()
+  }
+
+  React.useEffect(() => {
+    if (inputRef.current != null || password.length > 0) {
+      console.log('hello')
+      console.log(inputRef?.current)
+      inputRef?.current?.focus()
+    }
+  }, [password])
+
   return (
     <>
       <Flex
@@ -54,15 +67,22 @@ export function SetWifiCred({
               aria-label="wifi_password"
               id="wifiPassword"
               value={password}
-              onChange={e => setPassword(e.target.value)}
               type={showPassword ? 'text' : 'password'}
-              onBlur={e => e.target.focus()}
+              onBlur={handleBlur}
+              ref={inputRef}
               autoFocus
             />
           </Box>
           <Btn
             marginLeft={SPACING.spacing24}
-            onClick={() => setShowPassword(currentState => !currentState)}
+            onClick={() => {
+              setShowPassword(currentState => !currentState)
+              const input = document.querySelector('input')
+              console.log('onclick')
+              console.log(input)
+              inputRef?.current?.focus()
+              input?.setSelectionRange(input.value.length, input.value.length)
+            }}
           >
             <Flex
               flexDirection={DIRECTION_ROW}
@@ -79,7 +99,10 @@ export function SetWifiCred({
       </Flex>
       <Flex width="100%" position={POSITION_FIXED} left="0" bottom="0">
         <FullKeyboard
-          onChange={e => e != null && setPassword(String(e))}
+          onChange={e => {
+            e != null && setPassword(String(e))
+            inputRef?.current?.focus()
+          }}
           keyboardRef={keyboardRef}
         />
       </Flex>