diff --git a/apps/remix-ide/src/assets/img/cairoLogo.webp b/apps/remix-ide/src/assets/img/cairoLogo.webp
new file mode 100644
index 0000000000..b7210dfa36
Binary files /dev/null and b/apps/remix-ide/src/assets/img/cairoLogo.webp differ
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index d87b6ee1a9..d3cc735b3f 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/apps/remix-ide/src/remixAppManager.js
@@ -145,16 +145,6 @@ export class RemixAppManager extends PluginManager {
       pattern: [],
       sticky: true
     })
-    await this.call('filePanel', 'registerContextMenuItem', {
-      id: 'optimism-compiler',
-      name: 'compileCustomAction',
-      label: 'Compile with Optimism',
-      type: [],
-      extension: ['.sol'],
-      path: [],
-      pattern: [],
-      sticky: true
-    })
   }
 }
 
diff --git a/libs/remix-core-plugin/src/lib/compiler-artefacts.ts b/libs/remix-core-plugin/src/lib/compiler-artefacts.ts
index 715bd2e9c4..1198a012db 100644
--- a/libs/remix-core-plugin/src/lib/compiler-artefacts.ts
+++ b/libs/remix-core-plugin/src/lib/compiler-artefacts.ts
@@ -48,11 +48,6 @@ export class CompilerArtefacts extends Plugin {
       saveCompilationPerFileResult(file, source, languageVersion, data)
     })
 
-    this.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => {
-      this.compilersArtefacts.__last = new CompilerAbstract(languageVersion, data, source)
-      saveCompilationPerFileResult(file, source, languageVersion, data)
-    })
-
     this.on('solidityUnitTesting', 'compilationFinished', (file, source, languageVersion, data) => {
       this.compilersArtefacts.__last = new CompilerAbstract(languageVersion, data, source)
       saveCompilationPerFileResult(file, source, languageVersion, data)
diff --git a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.css b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.css
index 1330c1179c..44aa0598c1 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.css
+++ b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.css
@@ -7,7 +7,7 @@
   left: 0px;
   top: 0px;
   width: 0.3em;
-  z-index: 9999;
+  z-index: 1000;
 }
 
 .overlay {
@@ -17,7 +17,7 @@
   width: 100vw;
   height: 100vh;
   display: block;
-  z-index: 9998;
+  z-index: 1000;
 }
 
 .dragbar:hover,
diff --git a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
index 468afc8756..06f108afe8 100644
--- a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
@@ -6,21 +6,26 @@ interface PluginButtonProps {
   imgPath: string,
   envID: string,
   envText: string,
-  callback: any
+  callback: any,
+  l2?: boolean
 }
 
-function PluginButton ({ imgPath, envID, envText, callback }: PluginButtonProps) {
+function PluginButton ({ imgPath, envID, envText, callback, l2 }: PluginButtonProps) {
   const themeFilter = useContext(ThemeContext)
 
   return (
-    <button
-      className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center remixui_envButton"
-      data-id={'landingPageStart' + envText}
-      onClick={() => callback()}
-    >
-      <img className="m-2 align-self-center remixui_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
-      <label className="text-uppercase text-dark remixui_cursorStyle">{envText}</label>
-    </button>
+    <div>
+      <button
+        className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center remixui_home_envButton"
+        data-id={'landingPageStart' + envText}
+        onClick={() => callback()}
+      >
+        <img className="m-2 align-self-center remixui_home_envLogo" id={envID} src={imgPath} alt="" style={ { filter: themeFilter.filter } } />
+        <label className="text-uppercase text-dark remixui_home_cursorStyle">{envText}</label>
+      </button>
+      { l2 && <label className="bg-light mx-1 px-1 mb-0 mx-2 position-relative remixui_home_l2Label">L2</label> }
+
+    </div>
   )
 }
 
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
index 6644f4988e..b6bba39140 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css
@@ -1,82 +1,85 @@
-.remixui_text {
+.remixui_home_text {
   cursor: pointer;
   font-weight: normal;
   max-width: 300px;
 }
-.remixui_text:hover {
+.remixui_home_text:hover {
   cursor: pointer;
   text-decoration: underline;
 }
-.remixui_homeContainer {
+.remixui_home_homeContainer {
   overflow-y: hidden;
   overflow-y: auto;
   flex-grow: 3;
 }
-.remixui_hpLogoContainer {
+.remixui_home_hpLogoContainer {
   margin: 30px;
   padding-right: 90px;
 }
-.remixui_mediaBadge {
+.remixui_home_mediaBadge {
   font-size: 2em;
   height: 2em;
   width: 2em;
 }
-.remixui_mediaBadge:focus {
+.remixui_home_mediaBadge:focus {
   outline: none;
 }
-.remixui_image {
+.remixui_home_image {
   height: 1em;
   width: 1em;
   text-align: center;
 }
-.remixui_logoImg {
+.remixui_home_logoImg {
   height: 10em;
 }
-.remixui_rightPanel {
+.remixui_home_rightPanel {
   right: 0;
   position: absolute;
   z-index: 3;
 }
-.remixui_remixHomeMedia {
+.remixui_home_remixHomeMedia {
   overflow-y: auto;
   overflow-x: hidden;
 }
-.remixui_panels {
+.remixui_home_panels {
   box-shadow: 0px 0px 13px -7px;
 }
-.remixui_labelIt {
+.remixui_home_labelIt {
   margin-bottom: 0;
 }
-.remixui_bigLabelSize {
+.remixui_home_bigLabelSize {
   font-size: 13px;
 }
-.remixui_seeAll {
+.remixui_home_seeAll {
   margin-top: 7px;
   white-space: nowrap;
 }
-.remixui_importFrom p {
+.remixui_home_importFrom p {
   margin-right: 10px;
 }
-.remixui_logoContainer img{
+.remixui_home_logoContainer img{
   height: 150px;
   opacity: 0.7;
 }
-.remixui_envLogo {
+.remixui_home_envLogo {
   height: 16px;
 }
-.remixui_cursorStyle {
+.remixui_home_cursorStyle {
   cursor: pointer;
 }
-.remixui_envButton {
+.remixui_home_envButton {
   width: 120px;
   height: 70px;
 }
-.remixui_media {
+.remixui_home_media {
   overflow: hidden;
   max-width: 400px;
   transition: .5s ease-out;
   z-index: 1000;
 }
-.remixui_migrationBtn {
+.remixui_home_migrationBtn {
   width: 100px;
 }
+.remixui_home_l2Label {
+  bottom: 10px;
+}
\ No newline at end of file
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
index c130d35a64..c29df17662 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@@ -150,10 +150,10 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     plugin.verticalIcons.select('solidity')
     _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
   }
-  const startOptimism = async () => {
-    await plugin.appManager.activatePlugin('optimism-compiler')
-    plugin.verticalIcons.select('optimism-compiler')
-    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'optimism-compiler'])
+  const startCairo = async () => {
+    await plugin.appManager.activatePlugin('cairo_compiler')
+    plugin.verticalIcons.select('cairo_compiler')
+    _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'cairo_compiler'])
   }
   const startSolhint = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'solhint'])
@@ -232,7 +232,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             <label style={ { fontSize: 'xxx-large', height: 'auto', alignSelf: 'flex-end' } }>Remix IDE</label>
           </div>
           <div className="mr-4 d-flex">
-            <img className="mt-4 mb-2 remixui_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
+            <img className="mt-4 mb-2 remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
             <audio
               id="remiAudio"
               muted={false}
@@ -241,14 +241,14 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
             ></audio>
           </div>
         </div>
-        <div className="row remixui_hpSections mx-2 mr-4" data-id="landingPageHpSections">
+        <div className="row mx-2 mr-4" data-id="landingPageHpSections">
           <div className="ml-3">
             <div className="mb-5">
               <h4>Featured Plugins</h4>
               <div className="d-flex flex-row pt-2">
                 <ThemeContext.Provider value={ state.themeQuality }>
                   <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
-                  <PluginButton imgPath="assets/img/optimismLogo.webp" envID="optimismLogo" envText="Optimism" callback={() => startOptimism()} />
+                  <PluginButton imgPath="assets/img/cairoLogo.webp" envID="CairoLogo" envText="Cairo compiler"  l2={true} callback={() => startCairo()} />
                   <PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} />
                   <PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={() => startLearnEth()} />
                   <PluginButton imgPath="assets/img/sourcifyLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={() => startSourceVerify()} />
@@ -261,11 +261,11 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 <h4>File</h4>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file"></i>
-                  <span className="ml-1 mb-1 remixui_text" onClick={() => createNewFile()}>New File</span>
+                  <span className="ml-1 mb-1 remixui_home_text" onClick={() => createNewFile()}>New File</span>
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 far fa-file-alt"></i>
-                  <span className="ml-1 remixui_labelIt remixui_bigLabelSize} remixui_text">
+                  <span className="ml-1 remixui_home_labelIt remixui_home_bigLabelSize remixui_home_text">
                     Open Files
                     <input title="open file" type="file" onChange={(event) => {
                       event.stopPropagation()
@@ -275,7 +275,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </p>
                 <p className="mb-1">
                   <i className="mr-1 far fa-hdd"></i>
-                  <span className="ml-1 remixui_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span>
+                  <span className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}>Connect to Localhost</span>
                 </p>
                 <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
                 <div className="btn-group">
@@ -289,28 +289,28 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 <h4>Resources</h4>
                 <p className="mb-1">
                   <i className="mr-2 fas fa-book"></i>
-                  <a className="remixui_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
+                  <a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
                 </p>
                 <p className="mb-1">
                   <i className="mr-2 fab fa-gitter"></i>
-                  <a className="remixui_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
+                  <a className="remixui_home_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
                 </p>
                 <p className="mb-1">
-                  <img id='remixHhomeWebsite' className="mr-2 remixui_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
-                  <a className="remixui_text" target="__blank" href="https://remix-project.org">Featuring website</a>
+                  <img id='remixHhomeWebsite' className="mr-2 remixui_home_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
+                  <a className="remixui_home_text" target="__blank" href="https://remix-project.org">Featuring website</a>
                 </p>
                 <p className="mb-1">
-                  <i className="mr-2 fab fa-ethereum remixui_image"></i>
-                  <span className="remixui_text" onClick={() => switchToPreviousVersion()}>Old experience</span>
+                  <i className="mr-2 fab fa-ethereum remixui_home_image"></i>
+                  <span className="remixui_home_text" onClick={() => switchToPreviousVersion()}>Old experience</span>
                 </p>
               </div>
             </div>
           </div>
         </div>
-        <div className="d-flex flex-column remixui_rightPanel">
+        <div className="d-flex flex-column remixui_home_rightPanel">
           <div className="d-flex pr-3 py-2 align-self-end" id="remixIDEMediaPanelsTitle">
             <button
-              className="btn-info p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-twitter"
+              className="btn-info p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-twitter"
               id="remixIDEHomeTwitterbtn"
               title="Twitter"
               onClick={(e) => {
@@ -321,7 +321,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
               }}
             ></button>
             <button
-              className="btn-danger p-2 m-1 border rounded-circle remixui_mediaBadge fab fa-medium"
+              className="btn-danger p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-medium"
               id="remixIDEHomeMediumbtn"
               title="Medium blogs"
               onClick={(e) => {
@@ -332,9 +332,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
               }}
             ></button>
           </div>
-          <div className="mr-3 d-flex bg-light remixui_panels" style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } } id="remixIDEMediaPanels">
-            <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_remixHomeMedia" style={ { maxHeight: maxHeight } }>
-              <div id="medium-widget" className="px-3 remixui_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: elHeight } }>
+          <div className="mr-3 d-flex bg-light remixui_home_panels" style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } } id="remixIDEMediaPanels">
+            <div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
+              <div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: elHeight } }>
                 <div
                   id="retainable-rss-embed"
                   data-rss="https://medium.com/feed/remix-ide"
@@ -348,8 +348,8 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 </div>
               </div>
             </div>
-            <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
-              <div className="remixui_media" style={ { minHeight: elHeight } } >
+            <div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
+              <div className="remixui_home_media" style={ { minHeight: elHeight } } >
                 <a className="twitter-timeline"
                   data-width="330"
                   data-theme={ state.themeQuality.name }
diff --git a/libs/remix-ui/panel/src/lib/dragbar/dragbar.css b/libs/remix-ui/panel/src/lib/dragbar/dragbar.css
index 1ad9f9de85..1cfe29f8d1 100644
--- a/libs/remix-ui/panel/src/lib/dragbar/dragbar.css
+++ b/libs/remix-ui/panel/src/lib/dragbar/dragbar.css
@@ -7,7 +7,7 @@
   left: 0px;
   top: 0px;
   height: 0.3em;
-  z-index: 9999;
+  z-index: 1000;
 }
 
 .overlay {
diff --git a/libs/remix-ui/run-tab/src/lib/actions/index.ts b/libs/remix-ui/run-tab/src/lib/actions/index.ts
index 9ee2446b1c..7937e8bc0e 100644
--- a/libs/remix-ui/run-tab/src/lib/actions/index.ts
+++ b/libs/remix-ui/run-tab/src/lib/actions/index.ts
@@ -74,8 +74,6 @@ const setupEvents = () => {
 
   plugin.on('yulp', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
 
-  plugin.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => broadcastCompilationResult(file, source, languageVersion, data))
-
   plugin.on('udapp', 'setEnvironmentModeReducer', (env: { context: string, fork: string }, from: string) => {
     dispatch(displayPopUp(plugin.REACT_API.envToasterContent(env, from)))
     setExecutionContext(env, plugin.REACT_API.web3Dialog())