diff --git a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 977b1eb3ec5a..8d37b4b7b8c2 100644
--- a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -249,7 +249,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
           <div
             class="confirm-page-container-summary__nonce"
           >
-            #undefined
+            #70
           </div>
         </div>
         <div
@@ -449,6 +449,33 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                 </div>
               </div>
             </div>
+            <div>
+              <div
+                class="confirm-detail-row"
+              >
+                <div
+                  class="confirm-detail-row__label"
+                >
+                  Custom nonce
+                </div>
+                <div
+                  class="custom-nonce-input"
+                >
+                  <div
+                    class="mm-box mm-text-field mm-text-field--size-md mm-text-field--truncate mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-width-1 box--border-style-solid"
+                    min="0"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                      focused="false"
+                      type="number"
+                      value="70"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
index 8caf1043cf4a..b33ada06ccde 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js
@@ -23,7 +23,6 @@ import {
 import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display';
 
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
-import TextField from '../../../components/ui/text-field';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import { getMethodName } from '../../../helpers/utils/metrics';
 import {
@@ -42,7 +41,7 @@ import {
 import { TransactionModalContextProvider } from '../../../contexts/transaction-modal';
 import TransactionDetail from '../components/transaction-detail/transaction-detail.component';
 import TransactionDetailItem from '../components/transaction-detail-item/transaction-detail-item.component';
-import { Text } from '../../../components/component-library';
+import { Text, TextField } from '../../../components/component-library';
 import LoadingHeartBeat from '../../../components/ui/loading-heartbeat';
 import LedgerInstructionField from '../components/ledger-instruction-field';
 import {
@@ -431,6 +430,19 @@ export default class ConfirmTransactionBase extends Component {
       );
     };
 
+    const handleNonceChange = ({ target: { value } }) => {
+      const inputValue = Number(value);
+
+      if (inputValue < 0 || isNaN(inputValue)) {
+        updateCustomNonce(undefined);
+        return;
+      }
+
+      updateCustomNonce(inputValue);
+
+      getNextNonce();
+    };
+
     const renderTotalMaxAmount = ({
       useMaxFee,
       isBoldTextAndNotOverridden = false,
@@ -496,36 +508,34 @@ export default class ConfirmTransactionBase extends Component {
         : primaryTotalTextOverride;
     };
 
-    const nonceField =
-      useNonceField && !isSigningOrSubmitting ? (
-        <div>
-          <div className="confirm-detail-row">
-            <div className="confirm-detail-row__label">
-              {t('nonceFieldHeading')}
-            </div>
-            <div className="custom-nonce-input">
-              <TextField
-                type="number"
-                min={0}
-                placeholder={
-                  typeof nextNonce === 'number' ? nextNonce.toString() : null
-                }
-                onChange={({ target: { value } }) => {
-                  if (!value.length || Number(value) < 0) {
-                    updateCustomNonce('');
-                  } else {
-                    updateCustomNonce(String(Math.floor(value)));
-                  }
-                  getNextNonce();
-                }}
-                fullWidth
-                margin="dense"
-                value={customNonceValue || ''}
-              />
-            </div>
+    const nextNonceValue =
+      typeof nextNonce === 'number' ? nextNonce.toString() : null;
+    const renderNonceField = useNonceField && !isSigningOrSubmitting;
+
+    if (renderNonceField && !customNonceValue && nextNonceValue) {
+      updateCustomNonce(nextNonceValue);
+    }
+
+    const nonceField = renderNonceField ? (
+      <div>
+        <div className="confirm-detail-row">
+          <div className="confirm-detail-row__label">
+            {t('nonceFieldHeading')}
+          </div>
+          <div className="custom-nonce-input">
+            <TextField
+              type="number"
+              min={0}
+              placeholder={nextNonceValue}
+              onChange={handleNonceChange}
+              fullWidth
+              margin="dense"
+              value={customNonceValue ?? ''}
+            />
           </div>
         </div>
-      ) : null;
+      </div>
+    ) : null;
 
     const { simulationData } = txData;
 
diff --git a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
index 393280aee3f1..f8a7b40430fb 100644
--- a/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
+++ b/ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.test.js
@@ -163,6 +163,8 @@ const baseStore = {
     tokenList: {},
     ensResolutionsByAddress: {},
     snaps: {},
+    useNonceField: true,
+    customNonceValue: '70',
   },
   confirmTransaction: {
     txData: {