diff --git a/libs/remix-lib/src/execution/txRunnerWeb3.ts b/libs/remix-lib/src/execution/txRunnerWeb3.ts
index 163be3651e5..1cebf59ecc8 100644
--- a/libs/remix-lib/src/execution/txRunnerWeb3.ts
+++ b/libs/remix-lib/src/execution/txRunnerWeb3.ts
@@ -18,7 +18,6 @@ export class TxRunnerWeb3 {
   }
 
   async _executeTx (tx, network, txFee, api, promptCb, callback) {
-    console.log('executeTx', tx)
     if (network && network.lastBlock && network.lastBlock.baseFeePerGas) {
       // the sending stack (web3.js / metamask need to have the type defined)
       // this is to avoid the following issue: https://github.com/MetaMask/metamask-extension/issues/11824
diff --git a/libs/remix-ui/panel/src/lib/main/main-panel.tsx b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
index 9de2fb6706a..0786a644fdc 100644
--- a/libs/remix-ui/panel/src/lib/main/main-panel.tsx
+++ b/libs/remix-ui/panel/src/lib/main/main-panel.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable no-unused-expressions */
-import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import React, {useContext, useEffect, useRef, useState} from 'react' // eslint-disable-line
 import DragBar from '../dragbar/dragbar'
 import RemixUIPanelPlugin from '../plugins/panel-plugin'
 import { PluginRecord } from '../types'
-import { AppContext, appPlatformTypes, platformContext } from '@remix-ui/app'
+import { appPlatformTypes, platformContext } from '@remix-ui/app'
 import './main-panel.css'
 
 export type RemixUIMainPanelProps = {
@@ -18,7 +18,6 @@ const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
   const mainPanelRef = useRef<HTMLDivElement>(null)
   const tabsRef = useRef<HTMLDivElement>(null)
   const terminalRef = useRef<HTMLDivElement>(null)
-  const appContext = useContext(AppContext)
 
   const refs = [tabsRef, editorRef, mainPanelRef, terminalRef]
 
@@ -30,7 +29,7 @@ const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
           profile: panel.plugin.profile,
           active: panel.active,
           view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
-          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized ' : ' ') + ((platform === appPlatformTypes.desktop) ? 'desktop' : ''),
+          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized ' : ' ') + ((platform === appPlatformTypes.desktop)? 'desktop' : ''),
           minimized: panel.minimized,
           pinned: panel.pinned
         })
diff --git a/libs/remix-ui/run-tab/src/lib/actions/account.ts b/libs/remix-ui/run-tab/src/lib/actions/account.ts
index c58dafae399..4d937cdc5eb 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/account.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/account.ts
@@ -16,7 +16,6 @@ export const updateAccountBalances = async (plugin: RunTab, dispatch: React.Disp
 }
 
 export const fillAccountsList = async (plugin: RunTab, dispatch: React.Dispatch<any>) => {
-  console.log('fillAccountsList')
   try {
     dispatch(fetchAccountsListRequest())
     try {
@@ -35,7 +34,6 @@ export const fillAccountsList = async (plugin: RunTab, dispatch: React.Dispatch<
         const selectedAddress = plugin.blockchain.getInjectedWeb3Address()
         if (!(Object.keys(loadedAccounts).includes(toChecksumAddress(selectedAddress)))) setAccount(dispatch, null)
       }
-      console.log('loadedAccounts', loadedAccounts)
       dispatch(fetchAccountsListSuccess(loadedAccounts))
     } catch (e) {
       dispatch(fetchAccountsListFailed(e.message))
@@ -59,7 +57,6 @@ const _getProviderDropdownValue = (plugin: RunTab): string => {
 }
 
 export const setExecutionContext = (plugin: RunTab, dispatch: React.Dispatch<any>, executionContext: { context: string, fork: string }) => {
-  console.log('setExecutionContext', executionContext)
   plugin.blockchain.changeExecutionContext(executionContext, null, (alertMsg) => {
     plugin.call('notification', 'toast', alertMsg)
   }, () => { setFinalContext(plugin, dispatch) })
diff --git a/libs/remix-ui/run-tab/src/lib/actions/events.ts b/libs/remix-ui/run-tab/src/lib/actions/events.ts
index e766f05dd47..2e06963e11a 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/events.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/events.ts
@@ -38,7 +38,6 @@ export const setupEvents = (plugin: RunTab) => {
   })
 
   plugin.blockchain.event.register('contextChanged', async (context) => {
-    console.log('contextChanged', context)
     dispatch(resetProxyDeployments())
     if (!context.startsWith('vm')) getNetworkProxyAddresses(plugin, dispatch)
     if (context !== 'walletconnect') {
@@ -99,12 +98,6 @@ export const setupEvents = (plugin: RunTab) => {
 
   plugin.on('truffle', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult('truffle', plugin, dispatch, file, source, languageVersion, data))
 
-  plugin.on('desktopHost', 'chainChanged', (context) => {
-    //console.log('desktopHost chainChanged', context)
-    //fillAccountsList(plugin, dispatch)
-    //updateInstanceBalance(plugin, dispatch)
-  })
-
   plugin.on('udapp', 'setEnvironmentModeReducer', (env: { context: string, fork: string }, from: string) => {
     plugin.call('notification', 'toast', envChangeNotification(env, from))
     setExecutionContext(plugin, dispatch, env)
@@ -131,7 +124,7 @@ export const setupEvents = (plugin: RunTab) => {
     if (activatedPlugin.name === 'remixd') {
       dispatch(setRemixDActivated(true))
     } else {
-      if (activatedPlugin && (activatedPlugin.name.startsWith('injected') || activatedPlugin.name === 'desktopHost')) {
+      if (activatedPlugin && activatedPlugin.name.startsWith('injected')) {
         plugin.on(activatedPlugin.name, 'accountsChanged', (accounts: Array<string>) => {
           const accountsMap = {}
           accounts.map(account => { accountsMap[account] = shortenAddress(account, '0')})
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
index 443fe151b40..e3faf9938ef 100644
--- a/libs/remix-ui/run-tab/src/lib/components/environment.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -1,25 +1,13 @@
-import React, { useRef, useState, useContext, useEffect } from 'react'
+// eslint-disable-next-line no-use-before-define
+import React, { useRef } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { EnvironmentProps, Provider } from '../types'
 import { Dropdown } from 'react-bootstrap'
 import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
-import EnvironmentDropdown from './EnvironmentDropdown'
-import { AppContext } from '@remix-ui/app'
-import { desktopConnextionType } from '@remix-api'
-
 const _paq = (window._paq = window._paq || [])
 
 export function EnvironmentUI(props: EnvironmentProps) {
   const vmStateName = useRef('')
-  const [filters, setFilters] = useState<((provider: Provider) => boolean)[]>([])
-  const context = useContext(AppContext) // Use the AppContext
-
-  useEffect(() => {
-    const filterFunction = (provider: Provider) => {
-      return context.appState.connectedToDesktop != desktopConnextionType.disabled ? provider.isInjected : true
-    }
-    setFilters((prevFilters) => [...prevFilters, filterFunction])
-  }, [context.appState.connectedToDesktop])
 
   Object.entries(props.providers.providerList.filter((provider) => { return provider.isVM }))
   Object.entries(props.providers.providerList.filter((provider) => { return provider.isInjected }))
@@ -147,7 +135,85 @@ export function EnvironmentUI(props: EnvironmentProps) {
         </CustomTooltip> }
       </label>
       <div className="udapp_environment" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>
-        <EnvironmentDropdown currentProvider={currentProvider} isL2={isL2} bridges={bridges} handleChangeExEnv={handleChangeExEnv} filters={filters} props={props} />
+        <Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="udapp_selectExEnvOptions">
+          <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
+            {isL2(currentProvider && currentProvider.displayName)}
+            {currentProvider && currentProvider.displayName}
+            {currentProvider && bridges[currentProvider.displayName.substring(0, 13)] && (
+              <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
+                <i
+                  style={{ fontSize: 'medium' }}
+                  className={'ml-2 fa fa-rocket-launch'}
+                  aria-hidden="true"
+                  onClick={() => {
+                    window.open(bridges[currentProvider.displayName.substring(0, 13)], '_blank')
+                  }}
+                ></i>
+              </CustomTooltip>
+            )}
+          </Dropdown.Toggle>
+          <Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
+            {props.providers.providerList.length === 0 && <Dropdown.Item>
+              <span className="">
+                No provider pinned
+              </span>
+            </Dropdown.Item>}
+            { (props.providers.providerList.filter((provider) => { return provider.isInjected })).map(({ name, displayName }) => (
+              <Dropdown.Item
+                key={name}
+                onClick={async () => {
+                  handleChangeExEnv(name)
+                }}
+                data-id={`dropdown-item-${name}`}
+              >
+                <span className="">
+                  {displayName}
+                </span>
+              </Dropdown.Item>
+            ))}
+            { props.providers.providerList.filter((provider) => { return provider.isInjected }).length !== 0 && <Dropdown.Divider className='border-secondary'></Dropdown.Divider> }
+            { (props.providers.providerList.filter((provider) => { return provider.isVM })).map(({ displayName, name }) => (
+              <Dropdown.Item
+                key={name}
+                onClick={() => {
+                  handleChangeExEnv(name)
+                }}
+                data-id={`dropdown-item-${name}`}
+              >
+                <span className="">
+                  {displayName}
+                </span>
+              </Dropdown.Item>
+            ))}
+            { props.providers.providerList.filter((provider) => { return provider.isVM }).length !== 0 && <Dropdown.Divider className='border-secondary'></Dropdown.Divider> }
+            { (props.providers.providerList.filter((provider) => { return !(provider.isVM || provider.isInjected) })).map(({ displayName, name }) => (
+              <Dropdown.Item
+                key={name}
+                onClick={() => {
+                  handleChangeExEnv(name)
+                }}
+                data-id={`dropdown-item-${name}`}
+              >
+                <span className="">
+                  {isL2(displayName)}
+                  {displayName}
+                </span>
+              </Dropdown.Item>
+            ))}
+            <Dropdown.Divider className='border-secondary'></Dropdown.Divider>
+            <Dropdown.Item
+              key={10000}
+              onClick={() => {
+                props.setExecutionContext({ context: 'item-another-chain' })
+              }}
+              data-id={`dropdown-item-another-chain`}
+            >
+              <span className="">
+                Customize this list...
+              </span>
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
     </div>
   )
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
index e21a2d8c889..733c867205e 100644
--- a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx
@@ -1,17 +1,14 @@
 // eslint-disable-next-line no-use-before-define
-import React, { useContext, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { SettingsProps } from '../types'
 import { EnvironmentUI } from './environment'
 import { NetworkUI } from './network'
 import { AccountUI } from './account'
 import { GasLimitUI } from './gasLimit'
 import { ValueUI } from './value'
-import { AppContext } from '@remix-ui/app'
-import { desktopConnextionType } from '@remix-api'
 
 export function SettingsUI(props: SettingsProps) {
   //   this._deps.config.events.on('settings/personal-mode_changed', this.onPersonalChange.bind(this))
-  const appContext = useContext(AppContext)
 
   return (
     <div className="udapp_settings">
@@ -39,8 +36,8 @@ export function SettingsUI(props: SettingsProps) {
         signMessageWithAddress={props.signMessageWithAddress}
         passphrase={props.passphrase}
       />
-      {appContext.appState.connectedToDesktop === desktopConnextionType.disabled ?
-        <><GasLimitUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} /><ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} setSendValue={props.setSendValue} /></> : null}
+      <GasLimitUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
+      <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} setSendValue={props.setSendValue} />
     </div>
   )
 }
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
index 442086513ae..9fba9ec4470 100644
--- a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
+++ b/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts
@@ -158,7 +158,6 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
 
   case SET_EXECUTION_ENVIRONMENT: {
     const payload: string = action.payload
-    console.log('SET_EXECUTION_ENVIRONMENT', payload)
 
     return {
       ...state,
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
index b9fe2ede8c1..c6eb716af69 100644
--- a/libs/remix-ui/run-tab/src/lib/run-tab.tsx
+++ b/libs/remix-ui/run-tab/src/lib/run-tab.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment, useCallback, useContext, useEffect, useReducer, useState } from 'react'
+import React, { Fragment, useCallback, useEffect, useReducer, useState } from 'react'
 import semver from 'semver'
 import { FormattedMessage } from 'react-intl'
 import { ModalDialog } from '@remix-ui/modal-dialog'
@@ -57,8 +57,6 @@ import { MainnetPrompt } from './components/mainnet'
 import { ScenarioPrompt } from './components/scenario'
 import { setIpfsCheckedState, setRemixDActivated } from './actions/payload'
 import { ChainCompatibleInfo, getCompatibleChain, getCompatibleChains, HardFork, isChainCompatible, isChainCompatibleWithAnyFork } from './actions/evmmap'
-import { AppContext } from '@remix-ui/app'
-import { desktopConnextionType } from '@remix-api'
 
 export type CheckStatus = 'Passed' | 'Failed' | 'Not Found'
 
@@ -69,9 +67,9 @@ export function RunTabUI(props: RunTabProps) {
     title: '',
     message: '',
     okLabel: '',
-    okFn: () => { },
+    okFn: () => {},
     cancelLabel: '',
-    cancelFn: () => { }
+    cancelFn: () => {}
   })
   const [modals, setModals] = useState<Modal[]>([])
   const [focusToaster, setFocusToaster] = useState<string>('')
@@ -89,9 +87,8 @@ export function RunTabUI(props: RunTabProps) {
   const [runTab, dispatch] = useReducer(runTabReducer, initialState)
   const REACT_API = { runTab }
   const currentfile = plugin.config.get('currentFile')
-  const [solcVersion, setSolcVersion] = useState<{ version: string, canReceive: boolean }>({ version: '', canReceive: true })
+  const [solcVersion, setSolcVersion] = useState<{version: string, canReceive: boolean}>({ version: '', canReceive: true })
   const [evmCheckComplete, setEvmCheckComplete] = useState(false)
-  const appContext = useContext(AppContext)
 
   const getVersion = () => {
     let version = '0.8.25'
@@ -144,7 +141,7 @@ export function RunTabUI(props: RunTabProps) {
         return 'Not Found'
       } else {
         if (!IsCompatible) {
-          //show modal
+        //show modal
           plugin.call('notification', 'modal', {
             id: 'evm-chainId-incompatible',
             title: 'Incompatible EVM for the selected chain',
@@ -160,7 +157,7 @@ export function RunTabUI(props: RunTabProps) {
             okLabel: 'Switch EVM and Recompile',
             cancelLabel: 'Cancel',
             okFn: () => checkEvmChainCompatibilityOkFunction(chain),
-            cancelFn: () => { }
+            cancelFn: () => {}
           })
           return 'Failed'
         } else {
@@ -373,87 +370,84 @@ export function RunTabUI(props: RunTabProps) {
             signMessageWithAddress={signMessage}
             passphrase={runTab.passphrase}
           />
-          {appContext.appState.connectedToDesktop === desktopConnextionType.disabled && (
-            <>
-              <ContractDropdownUI
-                selectedAccount={runTab.accounts.selectedAccount}
-                syncContracts={syncContracts}
-                exEnvironment={runTab.selectExEnv}
-                contracts={runTab.contracts}
-                getSelectedContract={fetchSelectedContract}
-                modal={modal}
-                passphrase={runTab.passphrase}
-                setPassphrase={setPassphraseModal}
-                createInstance={createNewInstance}
-                ipfsCheckedState={runTab.ipfsChecked}
-                setIpfsCheckedState={setCheckIpfs}
-                publishToStorage={publishToStorage}
-                gasEstimationPrompt={gasEstimationPrompt}
-                passphrasePrompt={passphrasePrompt}
-                mainnetPrompt={mainnetPrompt}
-                tooltip={toast}
-                loadAddress={loadFromAddress}
-                networkName={runTab.networkName}
-                setNetworkName={setNetworkName}
-                setSelectedContract={updateSelectedContract}
-                remixdActivated={runTab.remixdActivated}
-                isValidProxyAddress={isValidProxyAddress}
-                isValidProxyUpgrade={isValidProxyUpgrade}
-                proxy={runTab.proxy}
-                solCompilerVersion={solcVersion}
-                setCompilerVersion={setSolcVersion}
-                getCompilerVersion={getVersion}
-                getCompilerDetails={getCompilerDetails}
-                evmCheckComplete={evmCheckComplete}
-                setEvmCheckComplete={setEvmCheckComplete}
-                plugin={plugin}
-                runTabState={runTab}
-              />
-              <RecorderUI
-                plugin={plugin}
-                gasEstimationPrompt={gasEstimationPrompt}
-                passphrasePrompt={passphrasePrompt}
-                mainnetPrompt={mainnetPrompt}
-                storeScenario={storeNewScenario}
-                runCurrentScenario={runScenario}
-                scenarioPrompt={scenarioPrompt}
-                count={runTab.recorder.transactionCount}
-                currentFile={currentfile}
-              />
-              <InstanceContainerUI
-                plugin={plugin}
-                getCompilerDetails={getCompilerDetails}
-                evmCheckComplete={evmCheckComplete}
-                runTabState={runTab}
-                instances={runTab.instances}
-                clearInstances={removeInstances}
-                unpinInstance={unpinPinnedInstance}
-                pinInstance={pinUnpinnedInstance}
-                removeInstance={removeSingleInstance}
-                getContext={getExecutionContext}
-                gasEstimationPrompt={gasEstimationPrompt}
-                passphrasePrompt={passphrasePrompt}
-                mainnetPrompt={mainnetPrompt}
-                runTransactions={executeTransactions}
-                sendValue={runTab.sendValue}
-                solcVersion={solcVersion}
-                getVersion={getVersion}
-                getFuncABIInputs={getFuncABIValues}
-                exEnvironment={runTab.selectExEnv}
-                editInstance={(instance) => {
-                  const { metadata, abi, object } = instance.contractData;
-                  plugin.call('quick-dapp', 'edit', {
-                    address: instance.address,
-                    abi: abi,
-                    name: instance.name,
-                    network: runTab.networkName,
-                    devdoc: object.devdoc,
-                    methodIdentifiers: object.evm.methodIdentifiers,
-                    solcVersion: JSON.parse(metadata).compiler.version,
-                  })
-                }}
-              /></>
-          )}
+          <ContractDropdownUI
+            selectedAccount={runTab.accounts.selectedAccount}
+            syncContracts={syncContracts}
+            exEnvironment={runTab.selectExEnv}
+            contracts={runTab.contracts}
+            getSelectedContract={fetchSelectedContract}
+            modal={modal}
+            passphrase={runTab.passphrase}
+            setPassphrase={setPassphraseModal}
+            createInstance={createNewInstance}
+            ipfsCheckedState={runTab.ipfsChecked}
+            setIpfsCheckedState={setCheckIpfs}
+            publishToStorage={publishToStorage}
+            gasEstimationPrompt={gasEstimationPrompt}
+            passphrasePrompt={passphrasePrompt}
+            mainnetPrompt={mainnetPrompt}
+            tooltip={toast}
+            loadAddress={loadFromAddress}
+            networkName={runTab.networkName}
+            setNetworkName={setNetworkName}
+            setSelectedContract={updateSelectedContract}
+            remixdActivated={runTab.remixdActivated}
+            isValidProxyAddress={isValidProxyAddress}
+            isValidProxyUpgrade={isValidProxyUpgrade}
+            proxy={runTab.proxy}
+            solCompilerVersion={solcVersion}
+            setCompilerVersion={setSolcVersion}
+            getCompilerVersion={getVersion}
+            getCompilerDetails={getCompilerDetails}
+            evmCheckComplete={evmCheckComplete}
+            setEvmCheckComplete={setEvmCheckComplete}
+            plugin={plugin}
+            runTabState={runTab}
+          />
+          <RecorderUI
+            plugin={plugin}
+            gasEstimationPrompt={gasEstimationPrompt}
+            passphrasePrompt={passphrasePrompt}
+            mainnetPrompt={mainnetPrompt}
+            storeScenario={storeNewScenario}
+            runCurrentScenario={runScenario}
+            scenarioPrompt={scenarioPrompt}
+            count={runTab.recorder.transactionCount}
+            currentFile={currentfile}
+          />
+          <InstanceContainerUI
+            plugin={plugin}
+            getCompilerDetails={getCompilerDetails}
+            evmCheckComplete={evmCheckComplete}
+            runTabState={runTab}
+            instances={runTab.instances}
+            clearInstances={removeInstances}
+            unpinInstance={unpinPinnedInstance}
+            pinInstance={pinUnpinnedInstance}
+            removeInstance={removeSingleInstance}
+            getContext={getExecutionContext}
+            gasEstimationPrompt={gasEstimationPrompt}
+            passphrasePrompt={passphrasePrompt}
+            mainnetPrompt={mainnetPrompt}
+            runTransactions={executeTransactions}
+            sendValue={runTab.sendValue}
+            solcVersion={solcVersion}
+            getVersion={getVersion}
+            getFuncABIInputs={getFuncABIValues}
+            exEnvironment={runTab.selectExEnv}
+            editInstance={(instance) => {
+              const { metadata, abi, object } = instance.contractData;
+              plugin.call('quick-dapp', 'edit', {
+                address: instance.address,
+                abi: abi,
+                name: instance.name,
+                network: runTab.networkName,
+                devdoc: object.devdoc,
+                methodIdentifiers: object.evm.methodIdentifiers,
+                solcVersion: JSON.parse(metadata).compiler.version,
+              })
+            }}
+          />
         </div>
       </div>
       <ModalDialog id="udappNotify" {...focusModal} handleHide={handleHideModal} />