diff --git a/apps/remix-ide-e2e/src/commands/verifyContracts.ts b/apps/remix-ide-e2e/src/commands/verifyContracts.ts
index ae4ca93369..027f71dd05 100644
--- a/apps/remix-ide-e2e/src/commands/verifyContracts.ts
+++ b/apps/remix-ide-e2e/src/commands/verifyContracts.ts
@@ -22,12 +22,12 @@ function verifyContracts (browser: NightwatchBrowser, compiledContractNames: str
       if (opts.version) {
         browser
           .click('*[data-id="compilation-details"]')
-          .waitForElementVisible('*[data-id="treeViewDivcompiler"]')
+          .waitForElementVisible('*[data-id="treeViewDivtreeViewItemcompiler"]')
           .pause(2000)
-          .click('*[data-id="treeViewDivcompiler"]')
-          .waitForElementVisible('*[data-id="treeViewLicompiler/version"]')
-          .assert.containsText('*[data-id="treeViewLicompiler/version"]', `version:\n ${opts.version}`)
-          .modalFooterCancelClick()
+          .click('*[data-id="treeViewDivtreeViewItemcompiler"]')
+          .waitForElementVisible('*[data-id="treeViewLiversion"]')
+          .assert.containsText('*[data-id="treeViewLiversion"]', `${opts.version}`)
+          .click('[data-id="workspacesModalDialog-modal-footer-ok-react"]')
           .perform(() => {
             done()
             callback()
diff --git a/apps/remix-ide/src/app/tabs/compile-tab.js b/apps/remix-ide/src/app/tabs/compile-tab.js
index 6e6daad29d..6ed2c52ce7 100644
--- a/apps/remix-ide/src/app/tabs/compile-tab.js
+++ b/apps/remix-ide/src/app/tabs/compile-tab.js
@@ -70,6 +70,8 @@ class CompileTab extends ViewPlugin {
     this.isHardHatProject = false
     this.compileErrors = {}
     this.compiledFileName = ''
+    this.selectedVersion = ''
+    this.configurationSettings = null
 
     this.el = document.createElement('div')
     this.el.setAttribute('id', 'compileTabView')
@@ -196,6 +198,10 @@ class CompileTab extends ViewPlugin {
     this.hhCompilation = value
   }
 
+  setSelectedVersion (version) {
+    this.selectedVersion = version
+  }
+
   getCompilationResult () {
     return this.compileTabLogic.compiler.state.lastCompilationResult
   }
@@ -219,7 +225,7 @@ class CompileTab extends ViewPlugin {
    * @param {object} settings {evmVersion, optimize, runs, version, language}
    */
   async compileWithParameters (compilationTargets, settings) {
-    settings.version = settings.version || this.compilerContainer.data.selectedVersion
+    settings.version = settings.version || this.selectedVersion
     const res = await compile(compilationTargets, settings)
     return res
   }
@@ -227,7 +233,7 @@ class CompileTab extends ViewPlugin {
   // This function is used for passing the compiler configuration to 'remix-tests'
   getCurrentCompilerConfig () {
     return {
-      currentVersion: this.compilerContainer.data.selectedVersion,
+      currentVersion: this.selectedVersion,
       evmVersion: this.compileTabLogic.evmVersion,
       optimize: this.compileTabLogic.optimize,
       runs: this.compileTabLogic.runs
@@ -240,20 +246,10 @@ class CompileTab extends ViewPlugin {
    * @param {object} settings {evmVersion, optimize, runs, version, language}
    */
   setCompilerConfig (settings) {
-    return new Promise((resolve, reject) => {
-      addTooltip(yo`<div><b>${this.currentRequest.from}</b> is updating the <b>Solidity compiler configuration</b>.<pre class="text-left">${JSON.stringify(settings, null, '\t')}</pre></div>`)
-      this.compilerContainer.setConfiguration(settings)
-      // @todo(#2875) should use loading compiler return value to check whether the compiler is loaded instead of "setInterval"
-      let timeout = 0
-      const id = setInterval(() => {
-        timeout++
-        console.log(this.data.loading)
-        if (!this.data.loading || timeout > 10) {
-          resolve()
-          clearInterval(id)
-        }
-      }, 200)
-    })
+    this.configurationSettings = settings
+    this.renderComponent()
+    // @todo(#2875) should use loading compiler return value to check whether the compiler is loaded instead of "setInterval"
+    addTooltip(yo`<div><b>${this.currentRequest.from}</b> is updating the <b>Solidity compiler configuration</b>.<pre class="text-left">${JSON.stringify(settings, null, '\t')}</pre></div>`)
   }
 
   // TODO : Add success alert when compilation succeed
diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 6c1ab03710..f90e933f25 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef, useReducer } from 'react' // eslint-disable-line
 import semver from 'semver'
-import { CompilerContainerProps } from './types'
+import { CompilerContainerProps, ConfigurationSettings } from './types'
 import * as helper from '../../../../../apps/remix-ide/src/lib/helper'
 import { canUseWorker, baseURLBin, baseURLWasm, urlFromVersion, pathToURL, promisedMiniXhr } from './logic/compiler-utils' // eslint-disable-line
 import { compilerReducer, compilerInitialState } from './reducers/compiler'
@@ -9,7 +9,7 @@ import { resetCompilerMode, resetEditorMode, listenToEvents } from './actions/co
 import './css/style.css'
 
 export const CompilerContainer = (props: CompilerContainerProps) => {
-  const { editor, config, queryParams, compileTabLogic, tooltip, modal, compiledFileName, setHardHatCompilation, updateCurrentVersion, isHardHatProject } = props // eslint-disable-line
+  const { editor, config, queryParams, compileTabLogic, tooltip, modal, compiledFileName, setHardHatCompilation, updateCurrentVersion, isHardHatProject, configurationSettings  } = props // eslint-disable-line
   const [state, setState] = useState({
     hideWarnings: false,
     autoCompile: false,
@@ -38,13 +38,13 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
       setState(prevState => {
         return { ...prevState, allversions }
       })
-      if (isURL) _updateVersionSelector(selectedVersion)
+      if (isURL) _updateVersionSelector(state.defaultVersion, selectedVersion)
       else {
         setState(prevState => {
           return { ...prevState, selectedVersion }
         })
         updateCurrentVersion(selectedVersion)
-        _updateVersionSelector()
+        _updateVersionSelector(selectedVersion)
       }
     })
     const currentFileName = config.get('currentFile')
@@ -115,6 +115,12 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     }
   }, [compilerContainer.editor.mode])
 
+  useEffect(() => {
+    if (configurationSettings) {
+      setConfiguration(configurationSettings)
+    }
+  }, [configurationSettings])
+
   // fetching both normal and wasm builds and creating a [version, baseUrl] map
   const fetchAllVersion = async (callback) => {
     let selectedVersion, allVersionsWasm, isURL
@@ -197,8 +203,10 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
           const compilerToLoad = semver.maxSatisfying(releasedVersions, pragma)
           const compilerPath = state.allversions.filter(obj => !obj.prerelease && obj.version === compilerToLoad)[0].path
           if (state.selectedVersion !== compilerPath) {
-            state.selectedVersion = compilerPath
-            _updateVersionSelector()
+            setState((prevState) => {
+              return { ...prevState, selectedVersion: compilerPath }
+            })
+            _updateVersionSelector(compilerPath)
           }
         }
       }
@@ -293,9 +301,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     return semver.coerce(version) ? semver.coerce(version).version : ''
   }
 
-  const _updateVersionSelector = (customUrl = '') => {
+  const _updateVersionSelector = (version, customUrl = '') => {
     // update selectedversion of previous one got filtered out
-    let selectedVersion = state.selectedVersion
+    let selectedVersion = version
     if (!selectedVersion || !_shouldBeAdded(selectedVersion)) {
       selectedVersion = state.defaultVersion
       setState(prevState => {
@@ -370,7 +378,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     setState(prevState => {
       return { ...prevState, selectedVersion: url }
     })
-    _updateVersionSelector(url)
+    _updateVersionSelector(state.defaultVersion, url)
   }
 
   const handleLoadVersion = (value) => {
@@ -378,7 +386,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
       return { ...prevState, selectedVersion: value }
     })
     updateCurrentVersion(value)
-    _updateVersionSelector()
+    _updateVersionSelector(value)
     _updateLanguageSelector()
   }
 
@@ -402,8 +410,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     })
   }
 
-  const handleOptimizeChange = (e) => {
-    const checked = !!e.target.checked
+  const handleOptimizeChange = (value) => {
+    const checked = !!value
 
     config.set('optimise', checked)
     compileTabLogic.setOptimize(checked)
@@ -418,8 +426,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     })
   }
 
-  const onChangeRuns = (e) => {
-    const runs = e.target.value
+  const onChangeRuns = (value) => {
+    const runs = value
 
     compileTabLogic.setRuns(parseInt(runs))
     state.autoCompile && compile()
@@ -456,6 +464,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }
 
   const handleEvmVersionChange = (value) => {
+    if (!value) return
     let v = value
     if (v === 'default') {
       v = null
@@ -474,6 +483,18 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     setHardHatCompilation(checked)
   }
 
+    /*
+    The following functions map with the above event handlers.
+    They are an external API for modifying the compiler configuration.
+  */
+  const setConfiguration = (settings: ConfigurationSettings) => {
+    handleLoadVersion(`soljson-v${settings.version}.js`)
+    handleEvmVersionChange(settings.evmVersion)
+    handleLanguageChange(settings.language)
+    handleOptimizeChange(settings.optimize)
+    onChangeRuns(settings.runs)
+  }
+
   return (
     <section>
       <article>
@@ -501,9 +522,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
           </div>
           <div className="mb-2">
             <label className="remixui_compilerLabel form-check-label" htmlFor="compilierLanguageSelector">Language</label>
-            <select onChange={(e) => handleLanguageChange(e.target.value)} className="custom-select" id="compilierLanguageSelector" title="Available since v0.5.7">
-              <option>Solidity</option>
-              <option>Yul</option>
+            <select onChange={(e) => handleLanguageChange(e.target.value)} value={state.language} className="custom-select" id="compilierLanguageSelector" title="Available since v0.5.7">
+              <option value='Solidity'>Solidity</option>
+              <option value='Yul'>Yul</option>
             </select>
           </div>
           <div className="mb-2">
@@ -528,7 +549,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </div>
             <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
               <div className="justify-content-between align-items-center d-flex">
-                <input onChange={handleOptimizeChange} className="custom-control-input" id="optimize" type="checkbox" checked={state.optimise} />
+                <input onChange={(e) => { handleOptimizeChange(e.target.checked) }} className="custom-control-input" id="optimize" type="checkbox" checked={state.optimise} />
                 <label className="form-check-label custom-control-label" htmlFor="optimize">Enable optimization</label>
                 <input
                   min="1"
@@ -538,7 +559,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                   defaultValue="200"
                   type="number"
                   title="Estimated number of times each opcode of the deployed code will be executed across the life-time of the contract."
-                  onChange={onChangeRuns}
+                  onChange={(e) => onChangeRuns(e.target.value)}
                   disabled={!state.optimise}
                 />
               </div>
diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
index 203c1cc2fa..afc398dd6b 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@@ -19,7 +19,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     })) : []
 
     setContractList(contractList)
-    if (!selectedContract && contractList.length) setSelectedContract(contractList[0].name)
+    if (contractList.length) setSelectedContract(contractList[0].name)
   }, [contractMap])
 
   const resetStorage = () => {
@@ -162,7 +162,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
       swarmLocation: 'Swarm url where all metadata information can be found (contract needs to be published first)',
       web3Deploy: 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract'
     }
-    const contractProperties = contractsDetails[selectedContract]
+    const contractProperties = contractsDetails[selectedContract] || {}
     const log = <div className="remixui_detailsJSON">
       {
         Object.keys(contractProperties).map((propertyName, index) => {
diff --git a/libs/remix-ui/solidity-compiler/src/lib/logic/compiler-helpers.ts b/libs/remix-ui/solidity-compiler/src/lib/logic/compiler-helpers.ts
index 757cf2b897..c052f19cbe 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/logic/compiler-helpers.ts
+++ b/libs/remix-ui/solidity-compiler/src/lib/logic/compiler-helpers.ts
@@ -4,19 +4,16 @@ import { Compiler } from '@remix-project/remix-solidity'
 import { CompilerAbstract } from './compiler-abstract'
 
 export const compile = async (compilationTargets, settings, contentResolverCallback) => {
-  const res = await (() => {
-    return new Promise((resolve, reject) => {
-      const compiler = new Compiler(contentResolverCallback)
-      compiler.set('evmVersion', settings.evmVersion)
-      compiler.set('optimize', settings.optimize)
-      compiler.set('language', settings.language)
-      compiler.set('runs', settings.runs)
-      compiler.loadVersion(canUseWorker(settings.version), urlFromVersion(settings.version))
-      compiler.event.register('compilationFinished', (success, compilationData, source) => {
-        resolve(new CompilerAbstract(settings.version, compilationData, source))
-      })
-      compiler.event.register('compilerLoaded', _ => compiler.compile(compilationTargets, ''))
+  return new Promise((resolve, reject) => {
+    const compiler = new Compiler(contentResolverCallback)
+    compiler.set('evmVersion', settings.evmVersion)
+    compiler.set('optimize', settings.optimize)
+    compiler.set('language', settings.language)
+    compiler.set('runs', settings.runs)
+    compiler.loadVersion(canUseWorker(settings.version), urlFromVersion(settings.version))
+    compiler.event.register('compilationFinished', (success, compilationData, source) => {
+      resolve(new CompilerAbstract(settings.version, compilationData, source))
     })
-  })()
-  return res
+    compiler.event.register('compilerLoaded', _ => compiler.compile(compilationTargets, ''))
+  })
 }
diff --git a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
index 9c6dd75e5b..8957ddc8ba 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
@@ -9,7 +9,7 @@ import { Renderer } from '@remix-ui/renderer'
 import './css/style.css'
 
 export const SolidityCompiler = (props: SolidityCompilerProps) => {
-  const { plugin, plugin : { editor, config, queryParams, compileTabLogic, currentFile, fileProvider, fileManager, contractsDetails, contractMap, compileErrors, isHardHatProject, setHardHatCompilation } } = props
+  const { plugin, plugin : { editor, config, queryParams, compileTabLogic, currentFile, fileProvider, fileManager, contractsDetails, contractMap, compileErrors, isHardHatProject, setHardHatCompilation, configurationSettings } } = props
   const [state, setState] = useState({
     contractsDetails: {},
     eventHandlers: {},
@@ -42,6 +42,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
 
   const updateCurrentVersion = (value) => {
     setCurrentVersion(value)
+    plugin.setSelectedVersion(value)
   }
 
   const modal = async (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
@@ -81,7 +82,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
   return (
     <>
       <div id="compileTabView">
-        <CompilerContainer editor={editor} config={config} queryParams={queryParams} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} setHardHatCompilation={setHardHatCompilation.bind(plugin)} updateCurrentVersion={updateCurrentVersion} isHardHatProject={isHardHatProject} />
+        <CompilerContainer editor={editor} config={config} queryParams={queryParams} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} setHardHatCompilation={setHardHatCompilation.bind(plugin)} updateCurrentVersion={updateCurrentVersion} isHardHatProject={isHardHatProject} configurationSettings={configurationSettings} />
         <ContractSelection contractMap={contractMap} fileProvider={fileProvider} fileManager={fileManager} contractsDetails={contractsDetails} modal={modal} />
         <div className="remixui_errorBlobs p-4" data-id="compiledErrors">
           <span data-id={`compilationFinishedWith_${currentVersion}`}></span>
diff --git a/libs/remix-ui/solidity-compiler/src/lib/types/index.ts b/libs/remix-ui/solidity-compiler/src/lib/types/index.ts
index c3a8b71e8f..7dbd9165a5 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/types/index.ts
+++ b/libs/remix-ui/solidity-compiler/src/lib/types/index.ts
@@ -18,6 +18,8 @@ export interface SolidityCompilerProps {
     call: (...args) => void
     on: (...args) => void,
     setHardHatCompilation: (value: boolean) => void,
+    setSelectedVersion: (value: string) => void,
+    configurationSettings: ConfigurationSettings
   },
 }
 
@@ -26,12 +28,13 @@ export interface CompilerContainerProps {
   config: any,
   queryParams: any,
   compileTabLogic: any,
-  tooltip: (message: string) => void,
+  tooltip: (message: string | JSX.Element) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   compiledFileName: string,
   setHardHatCompilation: (value: boolean) => void,
   updateCurrentVersion: any,
-  isHardHatProject: boolean
+  isHardHatProject: boolean,
+  configurationSettings: ConfigurationSettings
 }
 export interface ContractSelectionProps {
   contractMap: {
@@ -42,3 +45,11 @@ export interface ContractSelectionProps {
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   contractsDetails: Record<string, any>
 }
+
+export interface ConfigurationSettings {
+  version: string,
+  evmVersion: string,
+  language: string,
+  optimize: boolean,
+  runs: string
+}