diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 6c2f40fb25..29dc9f14f2 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -318,7 +318,7 @@ class App {
     ])
 
     // LAYOUT & SYSTEM VIEWS
-    const appPanel = new MainPanel()
+    const appPanel = new MainPanel(registry.get('config').api)
     const mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
     registry.put({ api: mainview, name: 'mainview' })
 
diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js
index c976a8c159..ea0931dd9e 100644
--- a/apps/remix-ide/src/app/components/main-panel.js
+++ b/apps/remix-ide/src/app/components/main-panel.js
@@ -4,16 +4,16 @@ import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
-const yo = require('yo-yo')
-const csjs = require('csjs-inject')
-
-const css = csjs`
-  .pluginsContainer {
-    height: 100%;
-    display: flex;
-    overflow-y: hidden;
-  }
-`
+// const yo = require('yo-yo')
+// const csjs = require('csjs-inject')
+
+// const css = csjs`
+//   .pluginsContainer {
+//     height: 100%;
+//     display: flex;
+//     overflow-y: hidden;
+//   }
+// `
 
 const profile = {
   name: 'mainPanel',
@@ -24,9 +24,10 @@ const profile = {
 }
 
 export class MainPanel extends AbstractPanel {
-  constructor () {
+  constructor (config) {
     super(profile)
     this.element = document.createElement('div')
+    this.config = config
   }
 
   focus (name) {
@@ -34,24 +35,28 @@ export class MainPanel extends AbstractPanel {
     super.focus(name)
   }
 
-  // onActivation () {
-  //   this.renderComponent()
-  // }
+  onActivation () {
+    this.renderComponent()
+  }
+
+  getTheme () {
+    return this.config.get('settings/theme')
+  }
 
   render () {
-    // return this.element
-    return yo`
-      <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
-        ${this.view}
-      </div>`
+    return this.element
+    // return yo`
+    //   <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
+    //     ${this.view}
+    //   </div>`
   }
 
-  // renderComponent () {
-  //   ReactDOM.render(
-  //     <RemixUiMainPanel
-  //       plugin={this}
-  //     />,
-  //     this.element
-  //   )
-  // }
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiMainPanel
+        plugin={this}
+      />,
+      this.element
+    )
+  }
 }
diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js
index 08d9abf20f..a15fcccfe8 100644
--- a/apps/remix-ide/src/app/components/panel.js
+++ b/apps/remix-ide/src/app/components/panel.js
@@ -1,5 +1,9 @@
+import React from 'react' // eslint-disable-line
+import ReactDOM from 'react-dom'
+import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel' // eslint-disable-line
 import { EventEmitter } from 'events'
-import { HostPlugin } from '@remixproject/engine-web'
+const EventManager = require('../../lib/events')
+import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
 const csjs = require('csjs-inject')
 const yo = require('yo-yo')
 
@@ -31,13 +35,21 @@ export class AbstractPanel extends HostPlugin {
   constructor (profile) {
     super(profile)
     this.events = new EventEmitter()
+    this.event = new EventManager()
     this.contents = {}
     this.active = undefined
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'plugins')
+    this.element.setAttribute('class', 'abstract-panel-plugins')
 
     // View where the plugin HTMLElement leaves
     this.view = yo`<div id="plugins" class="${css.plugins}"></div>`
   }
 
+  onActivation () {
+    this.renderComponent()
+  }
+
   /**
    * Add the plugin to the panel
    * @param {String} name the name of the plugin
@@ -108,4 +120,13 @@ export class AbstractPanel extends HostPlugin {
   focus (name) {
     this.showContent(name)
   }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiAbstractPanel
+        plugin={this}
+      />,
+      this.element
+    )
+  }
 }
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
index e69de29bb2..8061ad4a25 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css
@@ -0,0 +1,20 @@
+.abstract-panel-plugins        {
+    height: 100%;
+  }
+  .abstract-panel-plugItIn       {
+    display        : none;
+    height         : 100%;
+  }
+  .abstract-panel-plugItIn > div {
+    overflow-y     : auto;
+    overflow-x     : hidden;
+    height         : 100%;
+    width          : 100%;
+  }
+  .abstract-panel-plugItIn.active     {
+    display        : block;
+  }
+  .abstract-panel-pluginsContainer {
+    height         : 100%;
+    overflow-y     : hidden;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
index 8d0a1f8347..5920047ff8 100644
--- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
+++ b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx
@@ -1,3 +1,4 @@
+import React from 'react' // eslint-disable-line
 import './remix-ui-abstract-panel.module.css';
 
 /* eslint-disable-next-line */
@@ -5,8 +6,8 @@ export interface RemixUiAbstractPanelProps {}
 
 export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
   return (
-    <div>
-      <h1>Welcome to remix-ui-abstract-panel!</h1>
+    <div id="plugins" className="plugins">
+      
     </div>
   );
 }
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
index e69de29bb2..86ce5ed9db 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css
@@ -0,0 +1,20 @@
+.plugins        {
+    height: 100%;
+  }
+  .plugItIn       {
+    display        : none;
+    height         : 100%;
+  }
+  .plugItIn > div {
+    overflow-y     : auto;
+    overflow-x     : hidden;
+    height         : 100%;
+    width          : 100%;
+  }
+  .plugItIn.active     {
+    display        : block;
+  }
+  .pluginsContainer {
+    height         : 100%;
+    overflow-y     : hidden;
+  }
\ No newline at end of file
diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
index bf6b8328e7..efab1e75f6 100644
--- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
+++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx
@@ -1,4 +1,4 @@
-import React from 'react' // eslint-disable-line
+import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './remix-ui-main-panel.module.css';
 
 /* eslint-disable-next-line */
@@ -7,12 +7,115 @@ export interface RemixUiMainPanelProps {
 }
 
 export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
+   const darkTheme = ['Dark', 'Black', 'Cyborg']
+
+   const [invertNumber, setInvertNumber] = useState(0)
+   
+   const handlePluginCall = (pluginName: string) => {
+      props.plugin.call('menuicons', 'select', pluginName)
+      props.plugin.call(pluginName, pluginName, '')
+   }
+
+
+
   return (
-    <div>
-      {console.log( props.plugin.view)}
-      <h1>Remix UI Main Panel</h1>
-      {/* { props.plugin.view }  */}
+    <div className="plugItIn_2byTty" style={{ display: "block" }}>
+       {console.log({ props })}
+    <div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
+            <div className="mainContent_2A2Ew bg-light">
+          <div className="d-flex justify-content-between">
+             <div className="d-flex flex-column">
+                <div className="border-bottom d-flex justify-content-between clearfix py-3 mb-4">
+                   <div className="mx-4 w-100 d-flex">
+                      <img src="assets/img/guitarRemiCroped.webp" className="m-4 logoImg_2A2Ew" style={{ filter:  `invert(${invertNumber})`}}/>
+                      <audio id="remiAudio" src="assets/audio/remiGuitar-single-power-chord-A-minor.wav"></audio>
+                      <div className="w-80 pl-5 ml-5">
+                         <h5 className="mb-1">Quicklinks</h5>
+                         <a target="__blank" href="https://medium.com/remix-ide/migrating-files-to-workspaces-8e34737c751c?source=friends_link&amp;sk=b75cfd9093aa23c78be13cce49e4a5e8" className="text_2A2Ew mr-1">Guide</a>for migrating the old File System
+                         <p className="font-weight-bold mb-0 py-1">Migration tools:</p>
+                         <li className="pl-1">
+                            <span className="pl-0"><u className="text_2A2Ew pr-1">Basic migration</u></span>
+                         </li>
+                         <li className="pl-1"><u className="text_2A2Ew pr-1">Download all Files</u> as a backup zip</li>
+                         <li className="pl-1"><u className="text_2A2Ew pr-1">Restore files</u>from backup zip</li>
+                         <p className="font-weight-bold mb-0 mt-2">Help:</p>
+                         <div className="d-flex flex-column mt-1 pl-0"><a target="__blank" href="https://gitter.im/ethereum/remix" className="text_2A2Ew mx-1">Gitter channel</a> <a target="__blank" href="https://github.com/ethereum/remix-project/issues" className="text_2A2Ew mx-1">Report on Github</a></div>
+                      </div>
+                   </div>
+                </div>
+                <div data-id="landingPageHpSections" className="row hpSections_2A2Ew mx-4">
+                   <div className="ml-3">
+                      <div className="plugins mb-5">
+                         <h4>Featured Plugins</h4>
+                         <div className="d-flex flex-row pt-2">
+                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick = {() => handlePluginCall('solidity') }>
+                             <img src="assets/img/solidityLogo.webp" className="m-2 align-self-center envLogo_2A2Ew text-dark" alt='Solidity' style={{ filter: `invert(${invertNumber})` }}/>
+                             <label className="text-uppercase text-dark cursorStyle_2A2Ew">Solidity</label>
+                           </button>
+                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('optimism-compiler') }> 
+                             <img id="optimismLogo" src="assets/img/optimismLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                             <label className="text-uppercase text-dark cursorStyle_2A2Ew">Optimism</label>
+                           </button>
+                           <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('LearnEth') }>
+                             <img id="learnEthLogo" src="assets/img/learnEthLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                               <label className="text-uppercase text-dark cursorStyle_2A2Ew">LearnEth</label>
+                            </button>
+                            <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('solhint') }>
+                              <img id="solhintLogo" src="assets/img/solhintLogo.png" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                              <label className="text-uppercase text-dark cursorStyle_2A2Ew">Solhint linter</label>
+                            </button><button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('source-verification') }>
+                              <img id="sourcifyLogo" src="assets/img/sourcifyLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                                <label className="text-uppercase text-dark cursorStyle_2A2Ew">Sourcify</label>
+                            </button> 
+                            <button data-id="landingPageStartSolidity" className="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center envButton_2A2Ew" onClick={() => handlePluginCall('pluginManager') }>
+                              <img id="moreLogo" src="assets/img/moreLogo.webp" className="m-2 align-self-center envLogo_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/>
+                                <label className="text-uppercase text-dark cursorStyle_2A2Ew">More</label>
+                            </button>
+                          </div>
+                      </div>
+                      <div className="d-flex">
+                         <div className="file">
+                            <h4>File</h4>
+                            <p className="mb-1"><i className="mr-1 far fa-file"></i> <span className="ml-1 mb-1 text_2A2Ew">New File</span></p>
+                            <p className="mb-1"><i className="mr-1 far fa-file-alt"></i> <label className="ml-1 labelIt_2A2Ew bigLabelSize_2A2Ew text_2A2Ew">Open Files <input title="open file" type="file" multiple /></label></p>
+                            <p className="mb-1"><i className="far fa-hdd"></i> <span className="ml-1 text_2A2Ew">Connect to Localhost</span></p>
+                            <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
+                            <div className="btn-group"><button data-id="landingPageImportFromGistButton" className="btn mr-1 btn-secondary">Gist</button><button className="btn mx-1 btn-secondary">GitHub</button><button className="btn mx-1 btn-secondary">Ipfs</button><button className="btn mx-1 btn-secondary">https</button></div>
+                            {/* <!-- end of btn-group --> */}
+                         </div>
+                         {/* <!-- end of div.file --> */}
+                         <div className="ml-4 pl-4">
+                            <h4>Resources</h4>
+                            <p className="mb-1"><i className="mr-1 fas fa-book"></i> <a target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#" className="text_2A2Ew">Documentation</a></p>
+                            <p className="mb-1"><i className="mr-1 fab fa-gitter"></i> <a target="__blank" href="https://gitter.im/ethereum/remix" className="text_2A2Ew">Gitter channel</a></p>
+                            <p className="mb-1"><img id="remixHhomeWebsite" src="assets/img/remixLogo.webp" className="mr-1 image_2A2Ew" style={{ filter: `invert(${invertNumber})` }}/><a target="__blank" href="https://remix-project.org" className="text_2A2Ew">Featuring website</a></p>
+                            <p className="mb-1"><i className="fab fa-ethereum image_2A2Ew"></i> <span className="text_2A2Ew">Old experience</span></p>
+                         </div>
+                      </div>
+                   </div>
+                </div>
+                {/* <!-- end of hpSections --> */}
+             </div>
+             <div className="d-flex flex-column rightPanel_2A2Ew">
+                <div id="remixIDEMediaPanelsTitle" className="d-flex pr-3 py-2 align-self-end"><button id="remixIDEHomeTwitterbtn" className="btn-info p-2 m-1 border rounded-circle mediaBadge_2A2Ew fab fa-twitter"></button><button id="remixIDEHomeMediumbtn" className="btn-danger p-2 m-1 border rounded-circle mediaBadge_2A2Ew fab fa-medium"></button></div>
+                <div id="remixIDEMediaPanels" className="mr-3 d-flex bg-light panels_2A2Ew">
+                   <div id="remixIDE_MediumBlock" className="p-2 mx-0 mb-0 d-none remixHomeMedia_2A2Ew" style={{ maxHeight: "514px" }}>
+                      <div id="medium-widget" className="p-3 media_2A2Ew">
+                         <div id="retainable-rss-embed" data-rss="https://medium.com/feed/remix-ide" data-maxcols="1" data-layout="grid" data-poststyle="external" data-readmore="More..." data-buttonclassName="btn mb-3" data-offset="-100"> -</div>
+                      </div>
+                   </div>
+                   <div id="remixIDE_TwitterBlock" className="p-2 mx-0 mb-0 d-none remixHomeMedia_2A2Ew" style={{ maxHeight: "514px" }}>
+                      <div className="px-2 media_2A2Ew">
+                         <a data-width="350" data-theme="dark" data-chrome="nofooter noheader transparent" data-tweet-limit="8" href="https://twitter.com/EthereumRemix" className="twitter-timeline"></a>
+                         {/* <script async="async" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> */}
+                      </div>
+                   </div>
+                </div>
+             </div>
+          </div>
+       </div>
     </div>
+ </div>
   );
 }