diff --git a/src/indexPage/react-components/binary-landing/Hero.jsx b/src/indexPage/react-components/binary-landing/Hero.jsx
index 44e3a7bab5..967a591ea4 100644
--- a/src/indexPage/react-components/binary-landing/Hero.jsx
+++ b/src/indexPage/react-components/binary-landing/Hero.jsx
@@ -2,96 +2,78 @@ import React from 'react'
 import Slider from 'react-slick';
 import { translate } from '../../../common/i18n';
 
-const carouselImageArray = [
-    {
-        img: 'image/hero-dmt5.png',
-    },
-    {
-        img: 'image/hero-derivgo.png',
-    },
-    {
-        img: 'image/hero-derivx.png',
-    },
-    {
-        img: 'image/hero-dtrader.png',
-    },
+const carouselImages = [
+    'image/hero-dmt5.png',
+    'image/hero-derivgo.png',
+    'image/hero-derivx.png',
+    'image/hero-dtrader.png',
 ]
 
-const Hero = () => {
-    const settings = {
-        dots          : false,
-        infinite      : true,
-        speed         : 1000,
-        slidesToShow  : 1,
-        slidesToScroll: 1,
-        arrows        : false,
-        autoplay      : true,
-        autoplaySpeed : 3000,
-        responsive    : [
-            {
-                breakpoint: 1024,
-                settings  : {
-                    slidesToShow  : 1,
-                    slidesToScroll: 1,
-                },
+const carouselSettings = {
+    dots          : false,
+    infinite      : true,
+    speed         : 1000,
+    slidesToShow  : 1,
+    slidesToScroll: 1,
+    arrows        : false,
+    autoplay      : true,
+    autoplaySpeed : 3000,
+    responsive    : [
+        {
+            breakpoint: 1024,
+            settings  : {
+                slidesToShow  : 1,
+                slidesToScroll: 1,
             },
-            {
-                breakpoint: 700,
-                settings  : {
-                    slidesToShow  : 1,
-                    slidesToScroll: 1,
-                },
+        },
+        {
+            breakpoint: 700,
+            settings  : {
+                slidesToShow  : 1,
+                slidesToScroll: 1,
             },
-        ],
-    };
-    return (
-        <section className="binary-hero">
-            <div className="binary-hero-inner section-container">
+        },
+    ],
+};
 
-                <div className="binary-hero-inner__content">
-                    <h1>{translate('We’re moving!')}</h1>
-                    <h2>
-                        {translate('We’ve been')}<b>{translate(' Binary.com')}</b>{translate(' for 2 decades and it’s time for an exciting new chapter.')}
-                    </h2>
-                    <div className='binary-hero-inner_content-subheader'>
-                        <h2>{translate('Say hello to our new home,')}<b>{translate(' Deriv.')}</b>
-                        </h2>
-                    </div>
-                    <div className="btn-group">
-                        <a href="https://deriv.com">
-                            <button className="l-btn primary">{translate('Hello Deriv!')}</button>
-                        </a>
-                        <a href="https://www.binary.com?binary-bot-lp" id="logo">
-                            <button className="l-btn">{translate('Maybe later')}</button>
-                        </a>
-                    </div>
-                </div>
-                <div className="binary-hero-inner__placeholder">
-                    <a href=''>
-                        <img className='binary-hero-inner__binary_logo' src="image/binary.svg" />
-                    </a>
-                    <div className="binary-hero-inner__placeholder-inner">
-                        <Slider {...settings}>
-                            {carouselImageArray.map((slide, index) => {
-                                const { img } = slide;
-                                return (
-                                    <div>
-                                        <div className='binary-hero-inner__placeholder-image-container'>
-                                            <img
-                                                className="binary-hero-inner__slide_img"
-                                                key={index}
-                                                src={img}
-                                            />
-                                        </div>
-                                    </div>
-                                )
-                            }
-                            )}
-                        </Slider>
-                    </div>
-                </div>
+const Hero = () => {
+    const renderContent = () => (
+        <div className='container-x_box-x left-x'>
+            <h1>{translate('We’re moving!')}</h1>
+            <h2>
+                {translate('We’ve been')}<b>{translate(' Binary.com')}</b>{translate(' for 2 decades and it’s time for an exciting new chapter.')}
+            </h2>
+            <h2>{translate('Say hello to our new home,')}<b>{translate(' Deriv.')}</b></h2>
+            <div className="btn-group">
+                <a href="https://deriv.com" target="_blank">
+                    <button className="l-btn primary">{translate('Hello Deriv!')}</button>
+                </a>
+                <a href="https://www.binary.com?binary-bot-lp" target="blank" id="logo">
+                    <button className="l-btn">{translate('Maybe later')}</button>
+                </a>
             </div>
-        </section>
+        </div>
+    )
+
+    const renderCarousel = () => (
+        <div className='container-x_box-x right-x'>
+            <Slider {...carouselSettings}>
+                {carouselImages.map((slide, index) => <img key={index} src={slide}/>)}
+            </Slider>
+        </div>
+    )
+
+
+    return (
+        <div className='background-x'>
+            <section className="container-x">
+                {renderContent()}
+                {renderCarousel()}
+                <div class="logo-x">
+                    <img src="image/binary.png"/>
+                </div>
+            </section>
+        </div>
     )
 };
 
diff --git a/static/css/_landing-binary.scss b/static/css/_landing-binary.scss
index fe7453e734..726e1dba83 100644
--- a/static/css/_landing-binary.scss
+++ b/static/css/_landing-binary.scss
@@ -28,6 +28,11 @@ $header-color : #333333;
   display: block;
   padding: 0 2rem;
   background: #16212d; 
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+
   @include for-size(mobile) {
     display: none;
   }
@@ -42,8 +47,6 @@ $header-color : #333333;
     margin: 0px auto;
   }
 
-
- 
   &-logo {
     width: 138px;
 
@@ -67,116 +70,6 @@ $header-color : #333333;
 
 }
 
-.binary-hero {
-  margin-top: -107px;
-  padding: 0px 20px;
-  height: 100vh;
-  display: flex;
-
-  @include for-size(mobile) {
-    margin-top: unset;
-  }
-  background: $hero-BG url(../image/hero_desktop.png) no-repeat;
-  background-size: cover;
-  @include for-size(mobile) {
-      background: $hero-BG url(../image/hero_mobile.png) no-repeat;
-      background-size: cover;
-  }
-  &-inner {
-    display: flex;
-    align-items: center;
-    padding: calc(7rem + 5rem) 1rem;
-
-    @include for-size(desktop) {
-      padding: calc(7rem + 5rem) 2rem;
-    }
-
-    @include for-size(mobile) {
-      flex-direction: column-reverse;
-      padding: 4rem 2rem;
-
-      .btn-group {
-        text-align: left;
-      }
-    }
-
-    &__content {
-      flex: 1 1 50%;
-
-      h1 {
-        color: #FFF;
-        margin: 2rem 2rem 2rem 0;
-        font: 700 5rem $font-IBM;
-
-        @include for-size(mobile) {
-          font: 700 3rem $font-IBM;
-          margin: 0 0 2rem 0;
-        }
-      }
-
-      h2 {
-        color: $white;
-        line-height: 40px;
-        margin-bottom: 2rem;
-        font: 400 2rem $font-IBM;
-
-        @include for-size(mobile) {
-          font: 400 1.5rem $font-IBM;
-          margin: 0 0 2.5rem 0;
-        }
-      }
-      &-subheader {
-        margin-top: 2.3rem;
-      }
-    }
-
-    &__placeholder {
-      flex: 1 1 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      @include for-size(mobile) {
-        flex-direction: column;
-      }
-
-      img {
-        @include for-size(mobile) {
-          object-fit: contain;
-          width: 100%;
-        }
-      }
-      &-inner {
-        width: 600px !important;
-        @include for-size(mobile) {
-          width: 300px !important;
-        }
-
-      }
-      &-image-container {
-        width: 600px !important;
-        @include for-size(mobile) {
-          width: 300px !important;
-        }
-        img {
-            width    : 100% !important;
-            object-fit : 'cover' !important;
-        }
-      }
-    }
-
-    &__binary_logo {
-      display: none;
-      width: 14.75rem !important;
-      margin-bottom: 3rem;
-
-      @include for-size(mobile) {
-        display: block;
-      }
-    }
-  }
-}
-
 .l-btn {
   height: 2.5rem;
   border-radius: 0.25rem;
@@ -525,7 +418,6 @@ $header-color : #333333;
   }
 }
 
-
 .arrow {
   &.right {
     transform: rotate(180deg);
@@ -716,7 +608,6 @@ $header-color : #333333;
   }
 }
 
-
 .bot-gif-placeholder {
   display: flex;
   align-items: center;
@@ -753,7 +644,6 @@ $header-color : #333333;
   display: none !important;
 }
 
-
 .card-container{
   padding: 2rem 0rem 3rem 0rem;
   margin: 0 auto;
@@ -840,4 +730,102 @@ $header-color : #333333;
 
 }
 
+.background-x {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: $hero-BG url(../image/hero_desktop.png) no-repeat;
+  background-size: cover;
+
+  @include for-size(mobile) {
+    background: $hero-BG url(../image/hero_mobile.png) no-repeat;
+    background-size: cover;
+  }
+}
+
+.container-x {
+  height: 100vh;
+  width: 100%;
+  max-width: 1440px;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  padding: 0px 3rem;
+  gap: 2.4rem;
+
+  @include for-size(mobile) {
+    flex-direction: column-reverse;
+    padding: 1rem 1.4rem 0px 1.4rem;
+  }
+
+  &_box-x {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  h1 {
+    color: #FFF;
+    margin: 2rem 2rem 2rem 0;
+    font: 700 5rem $font-IBM;
+
+    @include for-size(mobile) {
+      font: 700 2rem $font-IBM;
+      margin: 0 0 1rem 0;
+    }
+  }
+
+  h2 {
+    color: $white;
+    line-height: 40px;
+    margin-bottom: 2rem;
+    font: 400 2rem $font-IBM;
+
+    @include for-size(mobile) {
+      font: 400 1rem $font-IBM;
+      margin: 0 0 1.5rem 0;
+    }
+  }
+}
+
+.left-x {
+  align-items: start;
+  
+  @include for-size(mobile) {
+    flex: 0;
+  }
+}
+
+.right-x {
+  align-items: end;
+  min-width: 0px;
+
+  @include for-size(mobile) {
+    margin: 0 10%;
+  }
+}
+
+.logo-x {
+  display: none;
+  justify-content: center;
+  
+  img {
+    width: 50%;
+  }
+  
+  @include for-size(mobile) {
+    display: flex;
+  }
+}
+
+// To make the slider responsive, we need to override the default slider style.
+.slick-slider {
+  width: 100%;
+}
 
+.slick-track {
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+}