diff --git a/.eslintignore b/.eslintignore
index acdb7fe434..fcd6dee850 100755
--- a/.eslintignore
+++ b/.eslintignore
@@ -248,7 +248,6 @@ src/components/common/edge/rectangularEdge.tsx
 src/components/common/edge/straightEdge.tsx
 src/components/common/errorBoundary.tsx
 src/components/common/formFields/CopyButton.tsx
-src/components/common/formFields/CustomPassword.tsx
 src/components/common/formFields/DevtronSwitch.tsx
 src/components/common/formFields/Typeahead.tsx
 src/components/common/helpers/Helpers.tsx
diff --git a/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx b/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
index f9fe674bab..835661ddff 100644
--- a/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
+++ b/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
@@ -26,12 +26,16 @@ import {
     SelectPicker,
     ToastVariantType,
     ToastManager,
+    CustomInput,
+    ComponentSizeType,
+    Button,
+    ButtonVariantType,
+    ButtonStyleType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useParams } from 'react-router-dom'
 import { ReactComponent as InfoIcon } from '../../../assets/icons/info-filled.svg'
 import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
 import { ReactComponent as DeleteIcon } from '../../../assets/icons/ic-delete-interactive.svg'
-import { ReactComponent as AlertTriangle } from '../../../assets/icons/ic-alert-triangle.svg'
 import { ReactComponent as HelpIcon } from '../../../assets/icons/ic-help.svg'
 import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
 import { updateTaints } from '../clusterNodes.service'
@@ -55,6 +59,7 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
 
     const deleteTaint = (e): void => {
         const { index } = e.currentTarget.dataset
+        console.log(index)
         const _taintList = [...taintList]
         _taintList.splice(index, 1)
         setTaintList(_taintList)
@@ -199,45 +204,32 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
                     {taintList?.map((taintDetails, index) => {
                         const _errorObj = errorObj?.taintErrorList[index]
                         return (
-                            <div className="flexbox mb-8">
-                                <div className="w-100 mr-8">
-                                    <input
-                                        type="text"
-                                        name="key"
-                                        data-index={index}
-                                        value={taintDetails.key}
-                                        className="form__input h-32"
-                                        onChange={handleInputChange}
-                                        placeholder="Key"
-                                    />
-                                    {_errorObj && !_errorObj['key'].isValid && (
-                                        <span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
-                                            <AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
-                                            <span>{_errorObj['key'].message}</span>
-                                        </span>
-                                    )}
-                                </div>
-                                <div className="w-100 mr-8">
-                                    <input
-                                        type="text"
-                                        name="value"
-                                        data-index={index}
-                                        value={taintDetails.value}
-                                        className="form__input h-32"
-                                        onChange={handleInputChange}
-                                        placeholder="Value"
-                                    />
-                                    {_errorObj && !_errorObj['value'].isValid && (
-                                        <span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
-                                            <AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
-                                            <span>{_errorObj['value'].message}</span>
-                                        </span>
-                                    )}
-                                </div>
-
-                                <div className="w-70 mr-8">
+                            <div className="flex left dc__gap-8 mb-8">
+                                <CustomInput
+                                    type="text"
+                                    name="key"
+                                    data-index={index}
+                                    value={taintDetails.key}
+                                    onChange={handleInputChange}
+                                    placeholder="Key"
+                                    error={errorObj && !_errorObj['key'].isValid ? _errorObj['key'].message : null}
+                                    fullWidth
+                                />
+                                <CustomInput
+                                    type="text"
+                                    name="value"
+                                    data-index={index}
+                                    value={taintDetails.value}
+                                    onChange={handleInputChange}
+                                    placeholder="Value"
+                                    error={
+                                        errorObj && !_errorObj['value'].isValid ? _errorObj['value'].message : null
+                                    }
+                                    fullWidth
+                                />
+                                <div className="w-70">
                                     <SelectPicker
-                                        inputId='select-taint-effect'
+                                        inputId="select-taint-effect"
                                         options={TAINT_OPTIONS}
                                         onChange={(selectedValue: OptionType) => {
                                             onEffectChange(selectedValue, index)
@@ -247,15 +239,20 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
                                             label: taintDetails.effect,
                                             value: taintDetails.effect,
                                         }}
+                                        size={ComponentSizeType.large}
                                     />
                                 </div>
-                                <div>
-                                    <DeleteIcon
-                                        className="icon-dim-20 mt-4 pointer"
-                                        data-index={index}
-                                        onClick={deleteTaint}
-                                    />
-                                </div>
+                                <Button
+                                    icon={<DeleteIcon />}
+                                    dataTestId={`delete-taint-${index}`}
+                                    onClick={deleteTaint}
+                                    data-index={index}
+                                    ariaLabel="Delete Taint"
+                                    showAriaLabelInTippy={false}
+                                    size={ComponentSizeType.small}
+                                    variant={ButtonVariantType.borderLess}
+                                    style={ButtonStyleType.negativeGrey}
+                                />
                             </div>
                         )
                     })}
diff --git a/src/components/cluster/ClusterForm.tsx b/src/components/cluster/ClusterForm.tsx
index e72953db2b..5a9a2c5195 100644
--- a/src/components/cluster/ClusterForm.tsx
+++ b/src/components/cluster/ClusterForm.tsx
@@ -40,12 +40,13 @@ import {
     DeleteConfirmationModal,
     DC_DELETE_SUBTITLES,
     Textarea,
+    PasswordField,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
 import TippyHeadless from '@tippyjs/react/headless'
 import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning-y6.svg'
-import { useForm, CustomPassword, importComponentFromFELibrary } from '../common'
+import { useForm, importComponentFromFELibrary } from '../common'
 import { ModuleStatus } from '../v2/devtronStackManager/DevtronStackManager.type'
 import { saveCluster, updateCluster, deleteCluster, validateCluster, saveClusters } from './cluster.service'
 import { ReactComponent as Close } from '@Icons/ic-close.svg'
@@ -893,12 +894,14 @@ export default function ClusterForm({
                                     />
                                 </div>
                                 <div className="w-50 ml-8">
-                                    <CustomPassword
+                                    <PasswordField
+                                        placeholder="Enter password"
                                         name="password"
                                         value={state.password.value}
                                         error={state.userName.error}
                                         onChange={handleOnChange}
                                         label="Password"
+                                        shouldShowDefaultPlaceholderOnBlur={false}
                                     />
                                 </div>
                             </div>
diff --git a/src/components/common/formFields/CustomPassword.tsx b/src/components/common/formFields/CustomPassword.tsx
deleted file mode 100644
index fafc57a3c2..0000000000
--- a/src/components/common/formFields/CustomPassword.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { useState } from 'react'
-import { ReactComponent as Show } from '../../../assets/icons/ic-visibility-off.svg'
-import { ReactComponent as FormError } from '../../../assets/icons/ic-warning.svg'
-import './customPassword.css'
-
-export const CustomPassword = ({ name, value, error, onChange, label, disabled = false }) => {
-    const [showPassword, setShowPassword] = useState(false)
-    const type = showPassword ? 'text' : 'password'
-    return (
-        <div className="flex column left top">
-            <label className="form__label">{label}</label>
-            <div className="pos-relative w-100">
-                <input
-                    type={type}
-                    name={name}
-                    className="form__input p-r-41"
-                    onChange={(e) => {
-                        e.persist()
-                        onChange(e)
-                    }}
-                    value={value}
-                    disabled={disabled}
-                />
-                <button
-                    type="button"
-                    className="dc__transparent custom-password__show-btn"
-                    onClick={(e) => setShowPassword(!showPassword)}
-                    style={{ bottom: error ? 28 : 7 }}
-                >
-                    <Show className={`icon-dim-24 ${showPassword ? 'scn-5' : 'scn-3'}`} />
-                </button>
-            </div>
-            {error && (
-                <div className="form__error">
-                    <FormError className="form__icon form__icon--error" />
-                    {error}
-                </div>
-            )}
-        </div>
-    )
-}
diff --git a/src/components/common/formFields/customPassword.css b/src/components/common/formFields/customPassword.css
deleted file mode 100644
index 5faa559b95..0000000000
--- a/src/components/common/formFields/customPassword.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.custom-password__show-btn {
-    position: absolute;
-    bottom: 7px;
-    right: 10px;
-    height: 28px;
-}
-
-.p-r-41 {
-    padding-right: 41px;
-}
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 6cb87c5a0f..51b463e651 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -30,7 +30,6 @@ export * from './helpers/isEmpty'
 export * from './helpers/utils'
 export * from './helpers/time'
 export * from './Contexts'
-export { CustomPassword } from './formFields/CustomPassword'
 export * from './DatePickers/Calender'
 export * from './DatePickers/DayPickerRangeController'
 export * from './helpers/compareVersion'
diff --git a/src/components/dockerRegistry/ManageRegistry.tsx b/src/components/dockerRegistry/ManageRegistry.tsx
index ef12f144c2..96c24f96c3 100644
--- a/src/components/dockerRegistry/ManageRegistry.tsx
+++ b/src/components/dockerRegistry/ManageRegistry.tsx
@@ -425,56 +425,43 @@ const ManageRegistry = ({
                     <div className="flexbox w-100 cn-7">
                         <div className="flexbox w-100 mb-16">
                             <div className="w-50 mr-8">
-                                <div className="mb-6"> Registry URL</div>
-                                <input
-                                    tabIndex={3}
+                                <CustomInput
+                                    label="Registry URL"
                                     placeholder="Enter registry URL"
-                                    className="form__input"
                                     name="server"
                                     value={customCredential?.server}
                                     onChange={onClickSpecifyImagePullSecret}
                                     autoFocus
-                                    autoComplete="off"
                                 />
                             </div>
                             <div className="w-50">
                                 <div className="mb-6">Email</div>
-                                <input
-                                    tabIndex={4}
+                                <CustomInput
+                                    label="Email"
                                     placeholder="Enter email"
-                                    className="form__input"
                                     name="email"
                                     value={customCredential?.email}
                                     onChange={onClickSpecifyImagePullSecret}
-                                    autoFocus
-                                    autoComplete="off"
                                 />
                             </div>
                         </div>
                         <div className="w-50 mr-8">
                             <div className="mb-6">Username</div>
-                            <input
-                                tabIndex={5}
+                            <CustomInput
+                                label="Username"
                                 placeholder="Enter username"
-                                className="form__input"
                                 name="username"
                                 value={customCredential?.username}
                                 onChange={onClickSpecifyImagePullSecret}
-                                autoFocus
-                                autoComplete="off"
                             />
                         </div>
                         <div className="w-50">
                             <div className="mb-6">Password</div>
-                            <input
-                                tabIndex={6}
+                            <CustomInput
                                 placeholder="Enter password"
-                                className="form__input"
                                 name="password"
                                 value={customCredential?.password}
                                 onChange={onClickSpecifyImagePullSecret}
-                                autoFocus
-                                autoComplete="off"
                             />
                         </div>
                     </div>