diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js
index f3eb1a950a40..4f488701bad5 100644
--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@@ -117,7 +117,7 @@ const custodyConfirmModalStyle = {
 
 const MODALS = {
   ONBOARDING_ADD_NETWORK: {
-    contents: <AddNetworkModal />,
+    contents: <AddNetworkModal newNetworkMenuDesignActive={false} />,
     testId: 'add-network-modal',
     ...accountModalStyle,
   },
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index 022ad7f055b0..6f1c6dab3233 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -67,12 +67,23 @@ import {
   getIsUnlocked,
 } from '../../../ducks/metamask/metamask';
 import { getLocalNetworkMenuRedesignFeatureFlag } from '../../../helpers/utils/feature-flags';
+import AddNetworkModal from '../../../pages/onboarding-flow/add-network-modal';
 import PopularNetworkList from './popular-network-list/popular-network-list';
 import NetworkListSearch from './network-list-search/network-list-search';
 
+const ACTION_MODES = {
+  // Displays the search box and network list
+  LIST: 'list',
+  // Displays the Add form
+  ADD: 'add',
+  // Displays the Edit form
+  EDIT: 'edit',
+};
+
 export const NetworkListMenu = ({ onClose }) => {
   const t = useI18nContext();
 
+  const [actionMode, setActionMode] = useState(ACTION_MODES.LIST);
   const nonTestNetworks = useSelector(getNonTestNetworks);
   const testNetworks = useSelector(getTestNetworks);
   const showTestNetworks = useSelector(getShowTestNetworks);
@@ -99,6 +110,13 @@ export const NetworkListMenu = ({ onClose }) => {
 
   const isUnlocked = useSelector(getIsUnlocked);
 
+  let title = t('networkMenuHeading');
+  if (actionMode === ACTION_MODES.ADD) {
+    title = t('addCustomNetwork');
+  } else if (actionMode === ACTION_MODES.EDIT) {
+    title = currentNetwork.nickname;
+  }
+
   const orderedNetworksList = useSelector(getOrderedNetworksList);
 
   const networkConfigurationChainIds = Object.values(networkConfigurations).map(
@@ -315,6 +333,11 @@ export const NetworkListMenu = ({ onClose }) => {
     }
   };
 
+  const headerAdditionalProps =
+    actionMode === ACTION_MODES.LIST
+      ? {}
+      : { onBack: () => setActionMode(ACTION_MODES.LIST) };
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
@@ -332,145 +355,156 @@ export const NetworkListMenu = ({ onClose }) => {
           paddingRight={4}
           paddingBottom={6}
           onClose={onClose}
+          {...headerAdditionalProps}
         >
-          {t('networkMenuHeading')}
+          {title}
         </ModalHeader>
-        <>
-          <NetworkListSearch
-            searchQuery={searchQuery}
-            setSearchQuery={setSearchQuery}
-            setFocusSearch={setFocusSearch}
-          />
-          {showBanner ? (
-            <BannerBase
-              className="network-list-menu__banner"
-              marginLeft={4}
-              marginRight={4}
-              marginBottom={4}
-              backgroundColor={BackgroundColor.backgroundAlternative}
-              startAccessory={
-                <Box
-                  display={Display.Flex}
-                  alignItems={AlignItems.center}
-                  justifyContent={JustifyContent.center}
-                >
-                  <img
-                    src="./images/dragging-animation.svg"
-                    alt="drag-and-drop"
-                  />
-                </Box>
-              }
-              onClose={() => hideNetworkBanner()}
-              description={t('dragAndDropBanner')}
+        {actionMode === ACTION_MODES.LIST ? (
+          <>
+            <NetworkListSearch
+              searchQuery={searchQuery}
+              setSearchQuery={setSearchQuery}
+              setFocusSearch={setFocusSearch}
             />
-          ) : null}
-          <Box className="multichain-network-list-menu">
-            {searchResults.length === 0 && focusSearch ? (
-              <Text
-                paddingLeft={4}
-                paddingRight={4}
-                color={TextColor.textMuted}
-                data-testid="multichain-network-menu-popover-no-results"
-              >
-                {t('noNetworksFound')}
-              </Text>
-            ) : (
-              <DragDropContext onDragEnd={onDragEnd}>
-                <Droppable droppableId="characters">
-                  {(provided) => (
-                    <Box
-                      className="characters"
-                      {...provided.droppableProps}
-                      ref={provided.innerRef}
-                    >
-                      {searchResults.map((network, index) => {
-                        const isCurrentNetwork =
-                          currentNetwork.id === network.id;
-
-                        const canDeleteNetwork =
-                          isUnlocked && !isCurrentNetwork && network.removable;
-
-                        const networkListItem = generateNetworkListItem({
-                          network,
-                          isCurrentNetwork,
-                          canDeleteNetwork,
-                        });
-
-                        return (
-                          <Draggable
-                            key={network.id}
-                            draggableId={network.id}
-                            index={index}
-                          >
-                            {(providedDrag) => (
-                              <Box
-                                ref={providedDrag.innerRef}
-                                {...providedDrag.draggableProps}
-                                {...providedDrag.dragHandleProps}
-                              >
-                                {networkListItem}
-                              </Box>
-                            )}
-                          </Draggable>
-                        );
-                      })}
-                      {provided.placeholder}
-                    </Box>
-                  )}
-                </Droppable>
-              </DragDropContext>
-            )}
-            {networkMenuRedesign ? (
-              <PopularNetworkList
-                searchAddNetworkResults={searchAddNetworkResults}
+            {showBanner ? (
+              <BannerBase
+                className="network-list-menu__banner"
+                marginLeft={4}
+                marginRight={4}
+                marginBottom={4}
+                backgroundColor={BackgroundColor.backgroundAlternative}
+                startAccessory={
+                  <Box
+                    display={Display.Flex}
+                    alignItems={AlignItems.center}
+                    justifyContent={JustifyContent.center}
+                  >
+                    <img
+                      src="./images/dragging-animation.svg"
+                      alt="drag-and-drop"
+                    />
+                  </Box>
+                }
+                onClose={() => hideNetworkBanner()}
+                description={t('dragAndDropBanner')}
               />
             ) : null}
-            <Box
-              padding={4}
-              display={Display.Flex}
-              justifyContent={JustifyContent.spaceBetween}
-            >
-              <Text>{t('showTestnetNetworks')}</Text>
-              <ToggleButton
-                value={showTestNetworks}
-                disabled={currentlyOnTestNetwork}
-                onToggle={handleToggle}
-              />
-            </Box>
-            {showTestNetworks || currentlyOnTestNetwork ? (
-              <Box className="multichain-network-list-menu">
-                {generateMenuItems(searchTestNetworkResults)}
+            <Box className="multichain-network-list-menu">
+              {searchResults.length === 0 && focusSearch ? (
+                <Text
+                  paddingLeft={4}
+                  paddingRight={4}
+                  color={TextColor.textMuted}
+                  data-testid="multichain-network-menu-popover-no-results"
+                >
+                  {t('noNetworksFound')}
+                </Text>
+              ) : (
+                <DragDropContext onDragEnd={onDragEnd}>
+                  <Droppable droppableId="characters">
+                    {(provided) => (
+                      <Box
+                        className="characters"
+                        {...provided.droppableProps}
+                        ref={provided.innerRef}
+                      >
+                        {searchResults.map((network, index) => {
+                          const isCurrentNetwork =
+                            currentNetwork.id === network.id;
+
+                          const canDeleteNetwork =
+                            isUnlocked &&
+                            !isCurrentNetwork &&
+                            network.removable;
+
+                          const networkListItem = generateNetworkListItem({
+                            network,
+                            isCurrentNetwork,
+                            canDeleteNetwork,
+                          });
+
+                          return (
+                            <Draggable
+                              key={network.id}
+                              draggableId={network.id}
+                              index={index}
+                            >
+                              {(providedDrag) => (
+                                <Box
+                                  ref={providedDrag.innerRef}
+                                  {...providedDrag.draggableProps}
+                                  {...providedDrag.dragHandleProps}
+                                >
+                                  {networkListItem}
+                                </Box>
+                              )}
+                            </Draggable>
+                          );
+                        })}
+                        {provided.placeholder}
+                      </Box>
+                    )}
+                  </Droppable>
+                </DragDropContext>
+              )}
+              {networkMenuRedesign ? (
+                <PopularNetworkList
+                  searchAddNetworkResults={searchAddNetworkResults}
+                />
+              ) : null}
+              <Box
+                padding={4}
+                display={Display.Flex}
+                justifyContent={JustifyContent.spaceBetween}
+              >
+                <Text>{t('showTestnetNetworks')}</Text>
+                <ToggleButton
+                  value={showTestNetworks}
+                  disabled={currentlyOnTestNetwork}
+                  onToggle={handleToggle}
+                />
               </Box>
-            ) : null}
-          </Box>
-          <Box paddingLeft={4} paddingRight={4} paddingTop={4}>
-            <ButtonSecondary
-              size={ButtonSecondarySize.Lg}
-              startIconName={IconName.Add}
-              block
-              onClick={() => {
-                if (isFullScreen) {
-                  if (completedOnboarding) {
-                    history.push(ADD_POPULAR_CUSTOM_NETWORK);
-                  } else {
-                    dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
+              {showTestNetworks || currentlyOnTestNetwork ? (
+                <Box className="multichain-network-list-menu">
+                  {generateMenuItems(searchTestNetworkResults)}
+                </Box>
+              ) : null}
+            </Box>
+            <Box paddingLeft={4} paddingRight={4} paddingTop={4}>
+              <ButtonSecondary
+                size={ButtonSecondarySize.Lg}
+                startIconName={IconName.Add}
+                block
+                onClick={() => {
+                  if (!networkMenuRedesign) {
+                    if (isFullScreen) {
+                      if (completedOnboarding) {
+                        history.push(ADD_POPULAR_CUSTOM_NETWORK);
+                      } else {
+                        dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
+                      }
+                    } else {
+                      global.platform.openExtensionInBrowser(
+                        ADD_POPULAR_CUSTOM_NETWORK,
+                      );
+                    }
+                    dispatch(toggleNetworkMenu());
+                    return;
                   }
-                } else {
-                  global.platform.openExtensionInBrowser(
-                    ADD_POPULAR_CUSTOM_NETWORK,
-                  );
-                }
-                dispatch(toggleNetworkMenu());
-                trackEvent({
-                  event: MetaMetricsEventName.AddNetworkButtonClick,
-                  category: MetaMetricsEventCategory.Network,
-                });
-              }}
-            >
-              {t('addNetwork')}
-            </ButtonSecondary>
-          </Box>
-        </>
+                  trackEvent({
+                    event: MetaMetricsEventName.AddNetworkButtonClick,
+                    category: MetaMetricsEventCategory.Network,
+                  });
+                  setActionMode(ACTION_MODES.ADD);
+                }}
+              >
+                {t('addNetwork')}
+              </ButtonSecondary>
+            </Box>
+          </>
+        ) : (
+          <AddNetworkModal newNetworkMenuDesignActive />
+        )}
       </ModalContent>
     </Modal>
   );
diff --git a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
index 69f0570a0252..5a098ceed47e 100644
--- a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
+++ b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
@@ -12,12 +12,25 @@ jest.mock('../../../store/actions', () => ({
 }));
 
 describe('Add Network Modal', () => {
+  // Set the environment variable before tests run
+  beforeEach(() => {
+    process.env.ENABLE_NETWORK_UI_REDESIGN = '';
+  });
+
+  // Reset the environment variable after tests complete
+  afterEach(() => {
+    delete process.env.ENABLE_NETWORK_UI_REDESIGN;
+  });
+
   it('should render', async () => {
     const mockStore = configureMockStore([])({
       metamask: { useSafeChainsListValidation: true },
     });
 
-    const { container } = renderWithProvider(<AddNetworkModal />, mockStore);
+    const { container } = renderWithProvider(
+      <AddNetworkModal newNetworkMenuDesignActive={false} />,
+      mockStore,
+    );
 
     await waitFor(() => {
       expect(container).toMatchSnapshot();
@@ -29,7 +42,10 @@ describe('Add Network Modal', () => {
       metamask: { useSafeChainsListValidation: true },
     });
 
-    const { queryByText } = renderWithProvider(<AddNetworkModal />, mockStore);
+    const { queryByText } = renderWithProvider(
+      <AddNetworkModal newNetworkMenuDesignActive={false} />,
+      mockStore,
+    );
 
     const cancelButton = queryByText('Cancel');
     fireEvent.click(cancelButton);
@@ -38,4 +54,20 @@ describe('Add Network Modal', () => {
       expect(mockHideModal).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('should not render the new network flow modal', async () => {
+    const mockStore = configureMockStore([thunk])({
+      metamask: { useSafeChainsListValidation: true },
+    });
+
+    const { queryByText } = renderWithProvider(
+      <AddNetworkModal newNetworkMenuDesignActive />,
+      mockStore,
+    );
+
+    await waitFor(() => {
+      expect(queryByText('Cancel')).not.toBeInTheDocument();
+      expect(queryByText('Save')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/ui/pages/onboarding-flow/add-network-modal/index.js b/ui/pages/onboarding-flow/add-network-modal/index.js
index e3f813d04054..2f2b820d9791 100644
--- a/ui/pages/onboarding-flow/add-network-modal/index.js
+++ b/ui/pages/onboarding-flow/add-network-modal/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
 import { hideModal } from '../../../store/actions';
@@ -14,7 +15,9 @@ import {
 
 import NetworksForm from '../../settings/networks-tab/networks-form/networks-form';
 
-export default function AddNetworkModal() {
+export default function AddNetworkModal({
+  newNetworkMenuDesignActive = false,
+}) {
   const dispatch = useDispatch();
   const t = useI18nContext();
 
@@ -23,15 +26,17 @@ export default function AddNetworkModal() {
 
   return (
     <>
-      <Box paddingTop={4}>
-        <Typography
-          variant={TypographyVariant.H4}
-          align={TEXT_ALIGN.CENTER}
-          fontWeight={FONT_WEIGHT.BOLD}
-        >
-          {t('onboardingMetametricsModalTitle')}
-        </Typography>
-      </Box>
+      {newNetworkMenuDesignActive ? null : (
+        <Box paddingTop={4}>
+          <Typography
+            variant={TypographyVariant.H4}
+            align={TEXT_ALIGN.CENTER}
+            fontWeight={FONT_WEIGHT.BOLD}
+          >
+            {t('onboardingMetametricsModalTitle')}
+          </Typography>
+        </Box>
+      )}
       <NetworksForm
         addNewNetwork
         restrictHeight
@@ -39,7 +44,16 @@ export default function AddNetworkModal() {
         networksToRender={[]}
         cancelCallback={closeCallback}
         submitCallback={closeCallback}
+        newNetworkMenuDesignActive={newNetworkMenuDesignActive}
       />
     </>
   );
 }
+
+AddNetworkModal.propTypes = {
+  newNetworkMenuDesignActive: PropTypes.bool,
+};
+
+AddNetworkModal.defaultProps = {
+  newNetworkMenuDesignActive: false,
+};
diff --git a/ui/pages/settings/networks-tab/index.scss b/ui/pages/settings/networks-tab/index.scss
index b8d1458a77ed..bbe958c3c6e0 100644
--- a/ui/pages/settings/networks-tab/index.scss
+++ b/ui/pages/settings/networks-tab/index.scss
@@ -220,8 +220,14 @@
     }
   }
 
+  &__new-network-form-footer {
+    position: sticky;
+    bottom: 0;
+  }
+
   &__add-network-form {
-    padding: 16px 24px;
+    margin-left: 16px;
+    margin-right: 16px;
     grid-column: span 2; // spread both columns of grid layout
 
     @include design-system.screen-sm-min {
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.js b/ui/pages/settings/networks-tab/networks-form/networks-form.js
index b5a072ac3312..7b9e87097c5e 100644
--- a/ui/pages/settings/networks-tab/networks-form/networks-form.js
+++ b/ui/pages/settings/networks-tab/networks-form/networks-form.js
@@ -44,17 +44,25 @@ import {
   setSelectedNetworkConfigurationId,
   showDeprecatedNetworkModal,
   showModal,
+  toggleNetworkMenu,
   upsertNetworkConfiguration,
 } from '../../../../store/actions';
 import {
+  Box,
   ButtonLink,
+  ButtonPrimary,
+  ButtonPrimarySize,
   HelpText,
   HelpTextSeverity,
   Text,
 } from '../../../../components/component-library';
 import { FormTextField } from '../../../../components/component-library/form-text-field/deprecated';
 import {
+  AlignItems,
+  BackgroundColor,
+  BlockSize,
   FontWeight,
+  TextAlign,
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
@@ -104,6 +112,7 @@ const NetworksForm = ({
   selectedNetwork,
   cancelCallback,
   submitCallback,
+  newNetworkMenuDesignActive,
 }) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
@@ -860,36 +869,61 @@ const NetworksForm = ({
           dataTestId="network-form-block-explorer-url"
         />
       </div>
-      <div
-        className={classnames({
-          'networks-tab__network-form-footer': !addNewNetwork,
-          'networks-tab__add-network-form-footer': addNewNetwork,
-        })}
-      >
-        {!viewOnly && (
-          <>
-            {deletable && (
-              <Button type="danger" onClick={onDelete}>
-                {t('delete')}
+
+      {newNetworkMenuDesignActive ? (
+        <Box
+          backgroundColor={BackgroundColor.backgroundDefault}
+          textAlign={TextAlign.Center}
+          paddingTop={4}
+          className="networks-tab__new-network-form-footer"
+        >
+          <ButtonPrimary
+            disabled={isSubmitDisabled}
+            onClick={() => {
+              onSubmit();
+              dispatch(toggleNetworkMenu());
+            }}
+            size={ButtonPrimarySize.Lg}
+            width={BlockSize.Full}
+            alignItems={AlignItems.center}
+          >
+            {t('save')}
+          </ButtonPrimary>
+        </Box>
+      ) : (
+        <div
+          className={classnames({
+            'networks-tab__network-form-footer': !addNewNetwork,
+            'networks-tab__add-network-form-footer': addNewNetwork,
+          })}
+        >
+          {!viewOnly && (
+            <>
+              {deletable && (
+                <Button type="danger" onClick={onDelete}>
+                  {t('delete')}
+                </Button>
+              )}
+
+              <Button
+                type="secondary"
+                onClick={onCancel}
+                disabled={stateUnchanged}
+              >
+                {t('cancel')}
               </Button>
-            )}
-            <Button
-              type="secondary"
-              onClick={onCancel}
-              disabled={stateUnchanged}
-            >
-              {t('cancel')}
-            </Button>
-            <Button
-              type="primary"
-              disabled={isSubmitDisabled}
-              onClick={onSubmit}
-            >
-              {t('save')}
-            </Button>
-          </>
-        )}
-      </div>
+
+              <Button
+                type="primary"
+                disabled={isSubmitDisabled}
+                onClick={onSubmit}
+              >
+                {t('save')}
+              </Button>
+            </>
+          )}
+        </div>
+      )}
     </div>
   );
 };
@@ -903,10 +937,12 @@ NetworksForm.propTypes = {
   submitCallback: PropTypes.func,
   restrictHeight: PropTypes.bool,
   setActiveOnSubmit: PropTypes.bool,
+  newNetworkMenuDesignActive: PropTypes.bool,
 };
 
 NetworksForm.defaultProps = {
   selectedNetwork: {},
+  newNetworkMenuDesignActive: false,
 };
 
 export default NetworksForm;