diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index 0fdf657bfc..74a86ad83d 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -32,12 +32,24 @@ let css = csjs`
     margin:30px;
     padding-right: 90px;
   }
+  .mediaBadge {
+   font-size: 2em;
+   height: 2em;
+   width: 2em;
+  }
+  .logoImg {
+    height: 10em;
+  }
   .hpSections {
     min-width: 640px;
   }
   .remixHomeMedia {
-    overflow-x: hidden;
     overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 570px;
+  }
+  .panels {
+    box-shadow: 5px 5px 15px 0px;
   }
   .labelIt {
     margin-bottom: 0;
@@ -49,9 +61,6 @@ let css = csjs`
   .importFrom p {
     margin-right: 10px;
   }
-  .logoContainer {
-    float: left;
-  }
   .logoContainer img{
     height: 150px;
     opacity: 0.7;
@@ -66,18 +75,14 @@ let css = csjs`
     width: 120px;
     height: 70px;
   }
-  .block input[type='radio']:checked ~ .media{
-    width: auto;
-    display: block;
-    transition: .5s ease-in;
-  }
-  .media{
-    width: 0;
-    display: none;
+  .media {
     overflow: hidden;
+    width: 400px;
     transition: .5s ease-out;
+    z-index: 1000;
   }
-  .mediumPanel {
+
+  .mediaMedium {
     width: 400px;
   }
 }
@@ -106,7 +111,7 @@ export class LandingPage extends ViewPlugin {
     this.twitterFrame = yo`
       <div class="px-2 ${css.media}">
         <a class="twitter-timeline"
-          data-width="400"
+          data-width="350"
           data-theme="${themeQuality}"
           data-chrome="nofooter noheader transparent"
           data-tweet-limit="8"
@@ -116,6 +121,39 @@ export class LandingPage extends ViewPlugin {
         <script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
       </div>
     `
+    this.badgeTwitter = yo`<button
+      class="btn-info p-2 m-1 border rounded-circle ${css.mediaBadge} fab fa-twitter"
+      src="assets/img/sleepingRemiCroped.webp"
+      id="remixIDEHomeTwitterbtn"
+      onclick=${(e) => this.showMediaPanel(e)}
+    ></button>`
+    this.badgeMedium = yo`<button
+      class="btn-danger p-2 m-1 border rounded-circle ${css.mediaBadge} fab fa-medium"
+      src="assets/img/sleepingRemiCroped.webp"
+      id="remixIDEHomeMediumbtn"
+      onclick=${(e) => this.showMediaPanel(e)}
+    ></button>`
+    this.twitterPanel = yo`
+      <div id="remixIDE_TwitterBlock" class="p-2 mx-0 mb-0 d-none ${css.remixHomeMedia}">
+        ${this.twitterFrame}
+      </div>
+    `
+    this.mediumPanel = yo`
+      <div id="remixIDE_MediumBlock" class="p-2 mx-04 mb-0 d-none ${css.remixHomeMedia}">
+        <div id="medium-widget" class="p-3 ${css.media}">
+          <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-buttonclass="btn mb-3"
+            data-offset="-100">
+          </div>
+        </div>
+      </div>
+    `
     globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
       console.log("theme is ", theme.quality)
       this.onThemeChanged(theme.quality)
@@ -127,7 +165,7 @@ export class LandingPage extends ViewPlugin {
     let twitterFrame = yo`
       <div class="px-2 ${css.media}">
         <a class="twitter-timeline"
-          data-width="400"
+          data-width="350"
           data-theme="${themeQuality}"
           data-chrome="nofooter noheader transparent"
           data-tweet-limit="8"
@@ -140,6 +178,18 @@ export class LandingPage extends ViewPlugin {
     yo.update(this.twitterFrame, twitterFrame)
   }
 
+  showMediaPanel (e) {
+    console.log(e)
+    if (e.target.id === 'remixIDEHomeTwitterbtn') {
+      this.mediumPanel.classList.remove('d-block')
+      this.mediumPanel.classList.add('d-none')
+      this.twitterPanel.classList.toggle('d-block')
+    } else {
+      this.twitterPanel.classList.remove('d-block')
+      this.twitterPanel.classList.add('d-none')
+      this.mediumPanel.classList.toggle('d-block')
+    }
+  }
   render () {
     let load = (service, item, examples, info) => {
       let compilerImport = new CompilerImport()
@@ -233,7 +283,11 @@ export class LandingPage extends ViewPlugin {
 
     const createLargeButton = (imgPath, envID, envText, callback) => {
       return yo`
-        <button class="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center ${css.envButton}" data-id="landingPageStartSolidity" onclick=${() => callback()}>
+        <button
+          class="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center ${css.envButton}"
+          data-id="landingPageStartSolidity"
+          onclick=${() => callback()}
+        >
           <img class="m-2 align-self-center ${css.envLogo}" id=${envID} src="${imgPath}">
           <label class="text-uppercase text-dark ${css.cursorStyle}">${envText}</label>
         </button>
@@ -263,107 +317,97 @@ export class LandingPage extends ViewPlugin {
       query.update({appVersion: '0.7.7'})
       document.location.reload()
     }
-    const img = yo`<img src="assets/img/sleepingRemiCroped.webp"></img>`
+    const img = yo`<img class=${css.logoImg} src="assets/img/sleepingRemiCroped.webp"></img>`
 
     // to retrieve medium posts
     document.body.appendChild(yo`<script src="https://www.retainable.io/assets/retainable/rss-embed/retainable-rss-embed.js"></script>`)
     const container = yo`
       <div class="${css.homeContainer} d-flex" data-id="landingPageHomeContainer">
         <div class="${css.mainContent} bg-light">
-          <div class="border-bottom clearfix py-3 align-items-center mb-4">
-            <div class="mx-4 ${css.logoContainer}">${img}</div>
-          </div>
-          <div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
-            <div class="ml-3">
-              <div class="plugins mb-5">
-              <h4>Featured Plugins</h4>
-              <div class="d-flex flex-row pt-2">
-                ${solEnv}
-                ${pipelineEnv}
-                ${mythXEnv}
-                ${sourceVerifyEnv}
-                ${debuggerEnv}
-                ${moreEnv}
+          <div class="d-flex justify-content-between">
+            <div class="d-flex flex-column">
+              <div class="border-bottom d-flex justify-content-between clearfix py-3 mb-4">
+                <div class="mx-4 w-100">${img}</div>
               </div>
-            </div>
-              <div class="d-flex">
-                <div class="file">
-                  <h4>File</h4>
-                  <p class="mb-1">
-                    <i class="mr-1 far fa-file"></i>
-                    <span class="ml-1 mb-1 ${css.text}" onclick=${() => createNewFile()}>New File</span>
-                  </p>
-                  <p class="mb-1">
-                    <i class="mr-1 far fa-file-alt"></i>
-                    <span class="ml-1 ${css.labelIt} ${css.text}">
-                      Open Files
-                      <input title="open file" type="file" onchange="${
-                        (event) => {
-                          event.stopPropagation()
-                          let fileExplorer = globalRegistry.get('fileexplorer/browser').api
-                          fileExplorer.uploadFile(event)
-                        }
-                      }" multiple />
-                    </span>
-                  </p>
-                  <p class="mb-1">
-                    <i class="far fa-hdd"></i>
-                    <span class="ml-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</span>
-                  </p>
-                  <p class="mt-3 mb-0"><label>IMPORT FROM:</label></p>
-                  <div class="btn-group">
-                    <button class="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
-                    <button class="btn mx-1 btn-secondary" onclick="${() => load('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol', 'github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'])}">GitHub</button>
-                    <button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
-                    <button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
-                    <button class="btn mx-1 btn-secondary" onclick="${() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-solidity/master/contracts/crowdsale/validation/IndividuallyCappedCrowdsale.sol'])}">https</button>
-                    <button class="btn mx-1 btn-secondary  text-nowrap" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button>
-                  </div><!-- end of btn-group -->
-                </div><!-- end of div.file -->
+
+              <div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
                 <div class="ml-3">
-                  <h4>Resources</h4>
-                  <p class="mb-1">
-                    <i class="mr-1 fas fa-book"></i>
-                    <a class="${css.text}" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
-                  </p>
-                  <p class="mb-1">
-                    <i class="mr-1 fab fa-gitter"></i>
-                    <a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
-                    </p>
-                  <p class="mb-1">
-                    <i class="mr-1 fab fa-medium"></i>
-                    <a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a>
-                  </p>
-                  <p>
-                    <i class="fab fa-ethereum"></i>
-                    <span class="ml-2 ${css.text}" onclick=${() => switchToPreviousVersion()}>Old experience</span>
-                  </p>
+                  <div class="plugins mb-5">
+                  <h4>Featured Plugins</h4>
+                  <div class="d-flex flex-row pt-2">
+                    ${solEnv}
+                    ${pipelineEnv}
+                    ${mythXEnv}
+                    ${sourceVerifyEnv}
+                    ${debuggerEnv}
+                    ${moreEnv}
+                  </div>
                 </div>
-              </div>
-            </div>
-          </div><!-- end of hpSections -->
-        </div>
-        <div class="d-flex">
-          <div id="remixIDE_TwitterBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}">
-            <input type="radio" name="media" id="remixIDE_TwitterRadio" class="d-none" checked />
-            <label class="mx-1 mt-0 mb-1 btn p-0 text-info fab fa-twitter ${css.cursorStyle}" for="remixIDE_TwitterRadio"></label>
-            ${this.twitterFrame}
-          </div>
-          <div id="remixIDE_MediumBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}">
-            <input type="radio" name="media" id="remixIDE_MediumRadio" class="d-none" />
-            <label class="mx-1 mt-0 mb-1 btn p-0 text-danger fab fa-medium ${css.cursorStyle}" for="remixIDE_MediumRadio"></label>
-            <div class="px-2 ${css.media}">
-              <div id="medium-widget" class="${css.mediumPanel}">
-                <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-buttonclass="btn mb-3"
-                  data-offset="-100">
+                  <div class="d-flex">
+                    <div class="file">
+                      <h4>File</h4>
+                      <p class="mb-1">
+                        <i class="mr-1 far fa-file"></i>
+                        <span class="ml-1 mb-1 ${css.text}" onclick=${() => createNewFile()}>New File</span>
+                      </p>
+                      <p class="mb-1">
+                        <i class="mr-1 far fa-file-alt"></i>
+                        <span class="ml-1 ${css.labelIt} ${css.text}">
+                          Open Files
+                          <input title="open file" type="file" onchange="${
+                            (event) => {
+                              event.stopPropagation()
+                              let fileExplorer = globalRegistry.get('fileexplorer/browser').api
+                              fileExplorer.uploadFile(event)
+                            }
+                          }" multiple />
+                        </span>
+                      </p>
+                      <p class="mb-1">
+                        <i class="far fa-hdd"></i>
+                        <span class="ml-1 ${css.text}" onclick=${() => connectToLocalhost()}>Connect to Localhost</span>
+                      </p>
+                      <p class="mt-3 mb-0"><label>IMPORT FROM:</label></p>
+                      <div class="btn-group">
+                        <button class="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
+                        <button class="btn mx-1 btn-secondary" onclick="${() => load('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol', 'github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'])}">GitHub</button>
+                        <button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
+                        <button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
+                        <button class="btn mx-1 btn-secondary" onclick="${() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-solidity/master/contracts/crowdsale/validation/IndividuallyCappedCrowdsale.sol'])}">https</button>
+                        <button class="btn mx-1 btn-secondary  text-nowrap" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button>
+                      </div><!-- end of btn-group -->
+                    </div><!-- end of div.file -->
+                    <div class="ml-4 pl-4">
+                      <h4>Resources</h4>
+                      <p class="mb-1">
+                        <i class="mr-1 fas fa-book"></i>
+                        <a class="${css.text}" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
+                      </p>
+                      <p class="mb-1">
+                        <i class="mr-1 fab fa-gitter"></i>
+                        <a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
+                        </p>
+                      <p class="mb-1">
+                        <i class="mr-1 fab fa-medium"></i>
+                        <a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a>
+                      </p>
+                      <p>
+                        <i class="fab fa-ethereum"></i>
+                        <span class="ml-2 ${css.text}" onclick=${() => switchToPreviousVersion()}>Old experience</span>
+                      </p>
+                    </div>
+                  </div>
                 </div>
+              </div><!-- end of hpSections -->
+            </div>
+            <div class="d-flex flex-column">
+              <div class="d-flex pr-2 py-2 align-self-end">
+                ${this.badgeTwitter}
+                ${this.badgeMedium}
+              </div>
+              <div class="d-flex bg-light ${css.panels}">
+                ${this.mediumPanel}
+                ${this.twitterPanel}
               </div>
             </div>
           </div>