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 746f110d6d..8fada2cb3a 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -39,10 +39,14 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     language: 'Solidity',
     evmVersion: ''
   })
-  const [toggleExpander, setToggleExpander] = useState<boolean>(true)
+  const [manualConfig, setManualConfig] = useState<boolean>(true)
+  const [configFilePath, setConfigFilePath] = useState<string>("/compiler_config.json")
+  const [showFilePathInput, setShowFilePathInput] = useState<boolean>(false)
+
   const [disableCompileButton, setDisableCompileButton] = useState<boolean>(false)
   const compileIcon = useRef(null)
   const promptMessageInput = useRef(null)
+  const configFilePathInput = useRef(null)
   const [hhCompilation, sethhCompilation] = useState(false)
   const [truffleCompilation, setTruffleCompilation] = useState(false)
   const [compilerContainer, dispatch] = useReducer(compilerReducer, compilerInitialState)
@@ -147,8 +151,27 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     }
   }, [configurationSettings])
 
-  const toggleClass = () => {
-    setToggleExpander(!toggleExpander)
+  const toggleConfigType = () => {
+    setManualConfig(!manualConfig)
+  }
+
+  const createNewConfigFile = async () => {
+      await api.writeFile(configFilePathInput.current.value, "")
+      setConfigFilePath(configFilePathInput.current.value)
+  }
+  const handleConfigPathChange = async () => {
+    if (await api.fileExists(configFilePathInput.current.value))
+      setConfigFilePath(configFilePathInput.current.value)
+    else {
+      modal(
+        'New configuration file', 'The file you entered does not exist. Do you want to create a new one?',
+        'Create',
+        async () => await createNewConfigFile,
+        'Cancel',
+        () => {}
+      )
+    }
+    setShowFilePathInput(false)
   }
 
   const _retrieveVersion = (version?) => {
@@ -546,74 +569,107 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     <section>
       <article>
         <header className='remixui_compilerSection border-bottom'>
-          <div className="mb-2">
-            <label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">
-              Compiler
-              <button className="far fa-plus-square border-0 p-0 mx-2 btn-sm" onClick={promptCompiler} title="Add a custom compiler with URL"></button>
-            </label>
-            <select value={ state.selectedVersion || state.defaultVersion } onChange={(e) => handleLoadVersion(e.target.value) } className="custom-select" id="versionSelector" disabled={state.allversions.length <= 0}>
-              { state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === state.defaultVersion ? 'selected' : ''}>{ state.defaultVersion }</option> }
-              { state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === 'builtin' ? 'selected' : ''}>builtin</option> }
-              { state.customVersions.map((url, i) => <option key={i} data-id={state.selectedVersion === url ? 'selected' : ''} value={url}>custom</option>)}
-              { state.allversions.map((build, i) => {
-                return _shouldBeAdded(build.longVersion)
-                  ? <option key={i} value={build.path} data-id={state.selectedVersion === build.path ? 'selected' : ''}>{build.longVersion}</option>
-                  : null
-              })
-              }
-            </select>
-          </div>
-          <div className="mb-2 remixui_nightlyBuilds custom-control custom-checkbox">
-            <input className="mr-2 custom-control-input" id="nightlies" type="checkbox" onChange={handleNightliesChange} checked={state.includeNightlies} />
-            <label htmlFor="nightlies" data-id="compilerNightliesBuild" className="form-check-label custom-control-label">Include nightly builds</label>
-          </div>
-          <div className="mb-2">
-            <label className="remixui_compilerLabel form-check-label" htmlFor="compilierLanguageSelector">Language</label>
-            <select onChange={(e) => handleLanguageChange(e.target.value)} value={state.language} className="custom-select" id="compilierLanguageSelector" title="Available since v0.5.7">
-              <option data-id={state.language === 'Solidity' ? 'selected' : ''} value='Solidity'>Solidity</option>
-              <option data-id={state.language === 'Yul' ? 'selected' : ''} value='Yul'>Yul</option>
-            </select>
-          </div>
-          <div className="mb-2">
-            <label className="remixui_compilerLabel form-check-label" htmlFor="evmVersionSelector">EVM Version</label>
-            <select value={state.evmVersion} onChange={(e) => handleEvmVersionChange(e.target.value)} className="custom-select" id="evmVersionSelector">
-              {compileTabLogic.evmVersions.map((version, index) => (<option key={index} data-id={state.evmVersion === version ? 'selected' : ''} value={version}>{version}</option>))}
-            </select>
+          <div className="pl-0 d-flex remixui_compilerConfig custom-control custom-checkbox" onClick={toggleConfigType}>
+            <input type="radio" value="manual" checked={manualConfig} name="configType" />
+            <label className="font-weight-bold ml-1 remixui_compilerLabel">Compiler Configuration</label>
           </div>
-          <div className="mt-3">
-            <div className="d-flex justify-content-between">
-              <label className="mt-1 remixui_compilerLabel" onClick={toggleClass}>Compiler Configuration</label>
-              <span data-id='compilerConfigUiTitleExpander' onClick={toggleClass}>
-                <i className={`fas ${!toggleExpander ? 'fa-angle-right' : 'fa-angle-down'}`} aria-hidden="true"></i>
-              </span>
+          <div className={`pt-2 ml-3 flex-column ${manualConfig ? 'd-flex' : 'd-none'}`}>
+            <div className="mb-2">
+              <label className="remixui_compilerLabel form-check-label" htmlFor="versionSelector">
+                Compiler
+                <button className="far fa-plus-square border-0 p-0 mx-2 btn-sm" onClick={promptCompiler} title="Add a custom compiler with URL"></button>
+              </label>
+              <select value={ state.selectedVersion || state.defaultVersion } onChange={(e) => handleLoadVersion(e.target.value) } className="custom-select" id="versionSelector" disabled={state.allversions.length <= 0}>
+                { state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === state.defaultVersion ? 'selected' : ''}>{ state.defaultVersion }</option> }
+                { state.allversions.length <= 0 && <option disabled data-id={state.selectedVersion === 'builtin' ? 'selected' : ''}>builtin</option> }
+                { state.customVersions.map((url, i) => <option key={i} data-id={state.selectedVersion === url ? 'selected' : ''} value={url}>custom</option>)}
+                { state.allversions.map((build, i) => {
+                  return _shouldBeAdded(build.longVersion)
+                    ? <option key={i} value={build.path} data-id={state.selectedVersion === build.path ? 'selected' : ''}>{build.longVersion}</option>
+                    : null
+                })
+                }
+              </select>
             </div>
-            <div className={`border-dark pb-3 flex-column ${toggleExpander ? 'd-flex' : 'd-none'}`}>
-              <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
-                <input className="remixui_autocompile custom-control-input" type="checkbox" onChange={handleAutoCompile} data-id="compilerContainerAutoCompile" id="autoCompile" title="Auto compile" checked={state.autoCompile} />
-                <label className="form-check-label custom-control-label" htmlFor="autoCompile">Auto compile</label>
-              </div>
-              <div className="mt-1 remixui_compilerConfig custom-control custom-checkbox">
-                <div className="justify-content-between align-items-center d-flex">
-                  <input onChange={(e) => { handleOptimizeChange(e.target.checked) }} className="custom-control-input" id="optimize" type="checkbox" checked={state.optimize} />
-                  <label className="form-check-label custom-control-label" htmlFor="optimize">Enable optimization</label>
-                  <input
-                    min="1"
-                    className="custom-select ml-2 remixui_runs"
-                    id="runs"
-                    placeholder="200"
-                    value={state.runs}
-                    type="number"
-                    title="Estimated number of times each opcode of the deployed code will be executed across the life-time of the contract."
-                    onChange={(e) => onChangeRuns(e.target.value)}
-                    disabled={!state.optimize}
-                  />
+            <div className="mb-2 remixui_nightlyBuilds custom-control custom-checkbox">
+              <input className="mr-2 custom-control-input" id="nightlies" type="checkbox" onChange={handleNightliesChange} checked={state.includeNightlies} />
+              <label htmlFor="nightlies" data-id="compilerNightliesBuild" className="form-check-label custom-control-label">Include nightly builds</label>
+            </div>
+            <div className="mb-2">
+              <label className="remixui_compilerLabel form-check-label" htmlFor="compilierLanguageSelector">Language</label>
+              <select onChange={(e) => handleLanguageChange(e.target.value)} value={state.language} className="custom-select" id="compilierLanguageSelector" title="Available since v0.5.7">
+                <option data-id={state.language === 'Solidity' ? 'selected' : ''} value='Solidity'>Solidity</option>
+                <option data-id={state.language === 'Yul' ? 'selected' : ''} value='Yul'>Yul</option>
+              </select>
+            </div>
+            <div className="mb-2">
+              <label className="remixui_compilerLabel form-check-label" htmlFor="evmVersionSelector">EVM Version</label>
+              <select value={state.evmVersion} onChange={(e) => handleEvmVersionChange(e.target.value)} className="custom-select" id="evmVersionSelector">
+                {compileTabLogic.evmVersions.map((version, index) => (<option key={index} data-id={state.evmVersion === version ? 'selected' : ''} value={version}>{version}</option>))}
+              </select>
+            </div>
+            <div className="mt-3">
+              <div className="border-dark pb-3 flex-column">
+                <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
+                  <input className="remixui_autocompile custom-control-input" type="checkbox" onChange={handleAutoCompile} data-id="compilerContainerAutoCompile" id="autoCompile" title="Auto compile" checked={state.autoCompile} />
+                  <label className="form-check-label custom-control-label" htmlFor="autoCompile">Auto compile</label>
+                </div>
+                <div className="mt-1 remixui_compilerConfig custom-control custom-checkbox">
+                  <div className="justify-content-between align-items-center d-flex">
+                    <input onChange={(e) => { handleOptimizeChange(e.target.checked) }} className="custom-control-input" id="optimize" type="checkbox" checked={state.optimize} />
+                    <label className="form-check-label custom-control-label" htmlFor="optimize">Enable optimization</label>
+                    <input
+                      min="1"
+                      className="custom-select ml-2 remixui_runs"
+                      id="runs"
+                      placeholder="200"
+                      value={state.runs}
+                      type="number"
+                      title="Estimated number of times each opcode of the deployed code will be executed across the life-time of the contract."
+                      onChange={(e) => onChangeRuns(e.target.value)}
+                      disabled={!state.optimize}
+                    />
+                  </div>
+                </div>
+                <div className="mt-1 remixui_compilerConfig custom-control custom-checkbox">
+                  <input className="remixui_autocompile custom-control-input" onChange={handleHideWarningsChange} id="hideWarningsBox" type="checkbox" title="Hide warnings" checked={state.hideWarnings} />
+                  <label className="form-check-label custom-control-label" htmlFor="hideWarningsBox">Hide warnings</label>
                 </div>
-              </div>
-              <div className="mt-1 remixui_compilerConfig custom-control custom-checkbox">
-                <input className="remixui_autocompile custom-control-input" onChange={handleHideWarningsChange} id="hideWarningsBox" type="checkbox" title="Hide warnings" checked={state.hideWarnings} />
-                <label className="form-check-label custom-control-label" htmlFor="hideWarningsBox">Hide warnings</label>
               </div>
             </div>
+            {
+              isHardhatProject &&
+              <div className="mt-3 remixui_compilerConfig custom-control custom-checkbox">
+                <input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} />
+                <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
+                <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation' target={'_blank'}>
+                  <OverlayTrigger placement={'right'} overlay={
+                    <Tooltip className="text-nowrap" id="overlay-tooltip">
+                      <span className="p-1 pr-3" style={{ backgroundColor: 'black', minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>
+                    </Tooltip>
+                  }>
+                    <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
+                  </OverlayTrigger>
+                </a>
+              </div>
+            }
+          </div>
+          <div className="pl-0 d-flex remixui_compilerConfig custom-control custom-checkbox" onClick={toggleConfigType}>
+            <input type="radio" value="file" checked={!manualConfig} name="configType" />
+            <label className="font-weight-bold ml-1 remixui_compilerLabel">Use configuration file</label>
+          </div>
+          <div className={`pt-2 ml-3 align-items-start flex-column ${!manualConfig ? 'd-flex' : 'd-none'}`}>
+            { !showFilePathInput && <span>{configFilePath}</span> }
+              { showFilePathInput && <input
+                ref={configFilePathInput}
+                placeholder={"Enter new path"}
+                onKeyPress={event => {
+                  if (event.key === 'Enter') {
+                    handleConfigPathChange()
+                  }
+                }}
+              /> }
+              { !showFilePathInput && <button className="mt-2 btn-secondary" onClick={() => {setShowFilePathInput(true)}}>Set new config file</button> }
           </div>
           {
             isHardhatProject &&