diff --git a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts
index f36d042950..ca54678a7b 100644
--- a/apps/remix-ide-e2e/src/tests/generalSettings.test.ts
+++ b/apps/remix-ide-e2e/src/tests/generalSettings.test.ts
@@ -65,7 +65,7 @@ module.exports = {
 
   'Should load dark theme ': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-      .click('*[data-id="settingsTabThemeLabelDark"]')
+      .scrollAndClick('*[data-id="settingsTabThemeLabelDark"]')
       .pause(2000)
       .checkElementStyle(':root', '--primary', remixIdeThemes.dark.primary)
       .checkElementStyle(':root', '--secondary', remixIdeThemes.dark.secondary)
@@ -77,7 +77,7 @@ module.exports = {
 
   'Should load light theme ': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-      .click('*[data-id="settingsTabThemeLabelLight"]')
+      .scrollAndClick('*[data-id="settingsTabThemeLabelLight"]')
       .pause(2000)
       .checkElementStyle(':root', '--primary', remixIdeThemes.light.primary)
       .checkElementStyle(':root', '--secondary', remixIdeThemes.light.secondary)
@@ -89,7 +89,7 @@ module.exports = {
 
   'Should load Cerulean theme ': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-      .click('*[data-id="settingsTabThemeLabelCerulean"]')
+      .scrollAndClick('*[data-id="settingsTabThemeLabelCerulean"]')
       .pause(5000)
       .checkElementStyle(':root', '--primary', remixIdeThemes.curelean.primary)
       .checkElementStyle(':root', '--secondary', remixIdeThemes.curelean.secondary)
@@ -101,7 +101,7 @@ module.exports = {
 
   'Should load Flatly theme ': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-      .click('*[data-id="settingsTabThemeLabelFlatly"]')
+      .scrollAndClick('*[data-id="settingsTabThemeLabelFlatly"]')
       .pause(2000)
       .checkElementStyle(':root', '--primary', remixIdeThemes.flatly.primary)
       .checkElementStyle(':root', '--secondary', remixIdeThemes.flatly.secondary)
@@ -113,7 +113,7 @@ module.exports = {
 
   'Should load Spacelab theme ': function (browser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-      .click('*[data-id="settingsTabThemeLabelSpacelab"]')
+      .scrollAndClick('*[data-id="settingsTabThemeLabelSpacelab"]')
       .pause(2000)
       .checkElementStyle(':root', '--primary', remixIdeThemes.spacelab.primary)
       .checkElementStyle(':root', '--secondary', remixIdeThemes.spacelab.secondary)
@@ -125,7 +125,7 @@ module.exports = {
 
   'Should load Cyborg theme ': function (browser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
-      .click('*[data-id="settingsTabThemeLabelCyborg"]')
+      .scrollAndClick('*[data-id="settingsTabThemeLabelCyborg"]')
       .pause(2000)
       .checkElementStyle(':root', '--primary', remixIdeThemes.cyborg.primary)
       .checkElementStyle(':root', '--secondary', remixIdeThemes.cyborg.secondary)
diff --git a/apps/remix-ide/src/config.js b/apps/remix-ide/src/config.js
index 7e0a900f37..cb3248ca6c 100644
--- a/apps/remix-ide/src/config.js
+++ b/apps/remix-ide/src/config.js
@@ -36,6 +36,11 @@ function Config (storage) {
     }
   }
 
+  this.clear = function () {
+    this.items = {}
+    storage.remove(CONFIG_FILE)
+  }
+
   this.getUnpersistedProperty = function (key) {
     return this.unpersistedItems[key]
   }
diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
index ea3821804f..a661869e14 100644
--- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
+++ b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
@@ -25,13 +25,20 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const [themeName, ] = useState('')
   const [privateBeeAddress, setPrivateBeeAddress] = useState('')
   const [postageStampId, setPostageStampId] = useState('')
+  const [resetState, refresh] = useState(0)
+
+  const initValue = () => {
+    const metadataConfig =  props.config.get('settings/generate-contract-metadata')
+    if (metadataConfig === undefined || metadataConfig === null) generateContractMetadat(props.config, true, dispatch)
+
+    const javascriptVM = props.config.get('settings/always-use-vm')
+    if (javascriptVM === null || javascriptVM === undefined) ethereumVM(props.config, true, dispatch)
+  }
+  useEffect(() => initValue(), [resetState, props.config])
+  useEffect(() => initValue(), [])
 
   useEffect(() => {
     const token = props.config.get('settings/' + labels['gist'].key)
-    if (token === undefined) {
-      props.config.set('settings/generate-contract-metadata', true)
-      dispatch({ type: 'contractMetadata', payload: { name: 'contractMetadata', isChecked: true, textClass: textDark } })
-    }
     if (token) {
       setTokenValue(prevState => {
         return { ...prevState, gist: token }
@@ -58,12 +65,6 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     if (props.useMatomoAnalytics !== null) useMatomoAnalytics(props.config, props.useMatomoAnalytics, dispatch)
   }, [props.useMatomoAnalytics])
 
-  useEffect(() => {
-    const javascriptVM = props.config.get('settings/always-use-vm')
-
-    if ((javascriptVM === null) || (javascriptVM === undefined)) ethereumVM(props.config, true, dispatch)
-  }, [props.config])
-
   const onchangeGenerateContractMetadata = (event) => {
     generateContractMetadat(props.config, event.target.checked, dispatch)
   }
@@ -101,6 +102,25 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
 
     return (
       <div className="$border-top">
+        <div title="Reset to Default settings." className='d-flex justify-content-end pr-4'>
+          <button className="btn btn-sm btn-secondary ml-2" onClick={() => {
+                try {
+                  if ((window as any).remixFileSystem.name === 'indexedDB') {
+                    props.config.clear()
+                    try {
+                      localStorage.clear() // remove the whole storage
+                    } catch (e) {
+                      console.log(e)
+                    }
+                  } else {
+                    props.config.clear() // remove only the remix settings
+                  }
+                  refresh(resetState + 1)
+                } catch (e) {
+                  console.log(e)
+                }
+              }}>Reset to Default settings</button>
+        </div>
         <div className="card-body pt-3 pb-2">
           <h6 className="card-title">General settings</h6>
           <div className="mt-2 custom-control custom-checkbox mb-1">
@@ -198,7 +218,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     <div className="border-top">
       <div className="card-body pt-3 pb-2">
         <h6 className="card-title">{ swarmSettingsTitle }</h6>
-        <div className="pt-2"><label>PRIVATE BEE ADDRESS:</label>
+        <div className="pt-2 mb-1"><label>PRIVATE BEE ADDRESS:</label>
           <div className="text-secondary mb-0 h6">
             <input id="swarmprivatebeeaddress" data-id="settingsPrivateBeeAddress" className="form-control" onChange={handleSavePrivateBeeAddress} value={ privateBeeAddress } />
           </div>
@@ -215,7 +235,6 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
         </div>
       </div>
     </div>
-
   )
 
   return (