diff --git a/src/assets/xlayers-bg-2.png b/src/assets/xlayers-bg-2.png
index c5a7ef40a..80522a6c8 100644
Binary files a/src/assets/xlayers-bg-2.png and b/src/assets/xlayers-bg-2.png differ
diff --git a/src/assets/xlayers-bg-2.webp b/src/assets/xlayers-bg-2.webp
index c1d44c961..9d11aeddb 100644
Binary files a/src/assets/xlayers-bg-2.webp and b/src/assets/xlayers-bg-2.webp differ
diff --git a/src/assets/xlayers-bg-3-ng.png b/src/assets/xlayers-bg-3-ng.png
index b8054a276..ef446ed36 100644
Binary files a/src/assets/xlayers-bg-3-ng.png and b/src/assets/xlayers-bg-3-ng.png differ
diff --git a/src/assets/xlayers-bg-3-ng.webp b/src/assets/xlayers-bg-3-ng.webp
index d27812f67..d775955c2 100644
Binary files a/src/assets/xlayers-bg-3-ng.webp and b/src/assets/xlayers-bg-3-ng.webp differ
diff --git a/src/assets/xlayers-bg-4.png b/src/assets/xlayers-bg-4.png
index f22c9bd8a..ebcf368aa 100644
Binary files a/src/assets/xlayers-bg-4.png and b/src/assets/xlayers-bg-4.png differ
diff --git a/src/assets/xlayers-bg-4.webp b/src/assets/xlayers-bg-4.webp
index 90cf398a5..03405e707 100644
Binary files a/src/assets/xlayers-bg-4.webp and b/src/assets/xlayers-bg-4.webp differ
diff --git a/src/assets/xlayers-ui-1.png b/src/assets/xlayers-ui-1.png
index faa7987c4..18447dec0 100644
Binary files a/src/assets/xlayers-ui-1.png and b/src/assets/xlayers-ui-1.png differ
diff --git a/src/assets/xlayers-ui-1.webp b/src/assets/xlayers-ui-1.webp
index d68df1d7e..b5a912ea9 100644
Binary files a/src/assets/xlayers-ui-1.webp and b/src/assets/xlayers-ui-1.webp differ
diff --git a/src/home/landing/landing.component.css b/src/home/landing/landing.component.css
index e268149b1..8dbf88c13 100644
--- a/src/home/landing/landing.component.css
+++ b/src/home/landing/landing.component.css
@@ -51,7 +51,7 @@ nav a {
   text-decoration: none;
 }
 header img {
-  max-width: 844px;
+  max-width: 750px;
   display: block;
   margin: auto;
   width: 100%;
@@ -158,7 +158,7 @@ footer i {
   width: 150px;
   height: 150px;
   position: absolute;
-  background: url(/assets/xlayers-bg-3-ng.png) -1200px -171px/1480px no-repeat;
+  background: url(/assets/xlayers-bg-3-ng.png) -150px -17px/1480px no-repeat;
   border-radius: 50%;
   border: 1px solid #fff;
 }
@@ -184,8 +184,8 @@ footer i {
   .bg-3:before {
     width: 200px;
     height: 200px;
-    margin-top: -76px;
-    margin-left: 281px;
+    margin-top: -165px;
+    margin-left: -103px;
   }
 }
 
diff --git a/src/home/landing/landing.component.html b/src/home/landing/landing.component.html
index 9fd4e4cd0..1611e6fef 100644
--- a/src/home/landing/landing.component.html
+++ b/src/home/landing/landing.component.html
@@ -26,7 +26,7 @@ <h3>{{'APP.preview' | translate}}</h3>
 
 <section class="bg interactive">
   <h1>{{'APP.explore_viewer' | translate }}</h1>
-  <xly-interactive-bg width="1142px" height="797px" src="/assets/xlayers-ui-2.png" [sections]="viewerSections"></xly-interactive-bg>
+  <xly-interactive-bg width="1142px" height="797px" src="/assets/xlayers-ui-1.png" [sections]="viewerSections"></xly-interactive-bg>
   <h1>{{'APP.explore_codegen' | translate }}</h1>
   <xly-interactive-bg width="1142px" height="797px" src="/assets/xlayers-bg-3-ng.png" [sections]="editorSections"></xly-interactive-bg>
 </section>
diff --git a/src/home/landing/landing.component.ts b/src/home/landing/landing.component.ts
index 5b849ee9d..543c570af 100644
--- a/src/home/landing/landing.component.ts
+++ b/src/home/landing/landing.component.ts
@@ -12,48 +12,48 @@ export class LandingComponent implements OnInit {
   viewerSections = [
     {
       frame: {
-        width: '240px',
-        left: '447px',
-        top: '50px',
+        width: '340px',
+        left: '400px',
+        top: '54px',
         height: '50px'
       },
       tooltip: {
         direction: 'right',
-        left: '140px',
-        top: '12px'
+        left: '90px',
+        top: '20px'
       },
       button: {
-        top: '66px',
-        left: '414px'
+        top: '70px',
+        left: '375px'
       },
       description:
       'Quick access to layers inspection, zooming functionalities and 3D mode, with the addition of the codegen editor (see below for more details).'
     },
     {
       frame: {
-        width: '166px',
-        left: '45px',
+        width: '200px',
+        left: '0px',
         top: '120px',
-        height: '560px'
+        height: '640px'
       },
       tooltip: {
         direction: 'left',
-        left: '230px',
+        left: '155px',
         top: '338px'
       },
       button: {
         top: '370px',
-        left: '100px'
+        left: '80px'
       },
       description:
         'Quickly access and inspect the layers hierarchy of the Sketch design.'
     },
     {
       frame: {
-        width: '686px',
-        left: '226px',
-        top: '103px',
-        height: '629px'
+        width: '730px',
+        left: '203px',
+        top: '110px',
+        height: '650px'
       },
       tooltip: {
         direction: 'right',
@@ -69,38 +69,38 @@ export class LandingComponent implements OnInit {
     },
     {
       frame: {
-        width: '176px',
-        left: '916px',
-        top: '103px',
-        height: '325px'
+        width: '180px',
+        left: '950px',
+        top: '179px',
+        height: '290px'
       },
       tooltip: {
         direction: 'right',
-        left: '610px',
+        left: '710px',
         top: '215px'
       },
       button: {
-        top: '270px',
-        left: '995px'
+        top: '285px',
+        left: '1050px'
       },
       description:
         'Quick access and download the original design as it was exported by SketchApp.'
     },
     {
       frame: {
-        width: '176px',
-        left: '916px',
-        top: '440px',
-        height: '291px'
+        width: '195px',
+        left: '940px',
+        top: '480px',
+        height: '180px'
       },
       tooltip: {
         direction: 'right',
-        left: '610px',
-        top: '535px'
+        left: '650px',
+        top: '520px'
       },
       button: {
-        top: '584px',
-        left: '1000px'
+        top: '550px',
+        left: '1020px'
       },
       description:
         'Complementary property inspector of each layer including size and dimensions, style information and much more. '
@@ -111,26 +111,26 @@ export class LandingComponent implements OnInit {
     frame: {
       width: '175px',
       left: '485px',
-      top: '50px',
-      height: '50px'
+      top: '119px',
+      height: '35px'
     },
     tooltip: {
       direction: 'right',
       left: '180px',
-      top: '24px'
+      top: '85px'
     },
     button: {
-      top: '67px',
+      top: '130px',
       left: '472px'
     },
     description:
       'Additional export options to external editors and IDEs, and a handy archive download feature for local development.'
   }, {
     frame: {
-      width: '1046px',
-      left: '46px',
-      top: '99px',
-      height: '632px'
+      width: '1136px',
+      left: '0px',
+      top: '195px',
+      height: '496px'
     },
     tooltip: {
       direction: 'right',
@@ -145,19 +145,19 @@ export class LandingComponent implements OnInit {
       'A code editor to quickly view the generated code of the current design for the selected technology.'
   }, {
     frame: {
-      width: '140px',
-      left: '940px',
-      top: '135px',
-      height: '150px'
+      width: '840px',
+      left: '120px',
+      top: '150px',
+      height: '50px'
     },
     tooltip: {
-      direction: 'right',
-      left: '634px',
-      top: '136px'
+      direction: 'left',
+      left: '750px',
+      top: '130px'
     },
     button: {
-      top: '152px',
-      left: '1042px'
+      top: '162px',
+      left: '700px'
     },
     description:
       'Many ouput Web technologies including but not limited to Angular, Vue.js, React, Web Components, etc...'