diff --git a/src/pages/landing/weekend-trading/components/_hero.js b/src/pages/landing/weekend-trading/components/_hero.tsx
similarity index 72%
rename from src/pages/landing/weekend-trading/components/_hero.js
rename to src/pages/landing/weekend-trading/components/_hero.tsx
index a5894cf33b9..4c695ed1867 100644
--- a/src/pages/landing/weekend-trading/components/_hero.js
+++ b/src/pages/landing/weekend-trading/components/_hero.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
-import { Flex, Container, Show } from 'components/containers'
+import { Flex, Container } from 'components/containers'
 import { Header } from 'components/elements'
-import { localize } from 'components/localization'
+import { localize, Localize } from 'components/localization'
 import { Background } from 'components/elements/background-image'
 import { LinkButton } from 'components/form'
 import device from 'themes/device.js'
+import { useBrowserResize } from 'components/hooks/use-browser-resize'
 
 const BackgroundWrapper = styled(Background)`
     background-size: cover;
@@ -114,14 +114,35 @@ const TryButton = styled(LinkButton)`
     }
 `
 
-const HeroComponent = ({ title, content, background_data }) => {
+const query = graphql`
+    query {
+        p2p_hero_background: file(relativePath: { eq: "landing/weekend.png" }) {
+            ...fadeIn
+        }
+        p2p_hero_background_mobile: file(relativePath: { eq: "landing/weekend-m.png" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const Hero = () => {
+    const data = useStaticQuery(query)
+    const [is_mobile] = useBrowserResize()
+    const background = is_mobile ? data['p2p_hero_background_mobile'] : data['p2p_hero_background']
+
     return (
-        <BackgroundWrapper data={background_data}>
+        <BackgroundWrapper data={background}>
             <Wrapper p="4rem 0 0" justify="space-between" height="unset">
                 <InformationWrapper height="unset" direction="column">
-                    <StyledHeader type="hero">{title}</StyledHeader>
+                    <StyledHeader type="hero">
+                        {localize('Ride the trends even on weekends')}
+                    </StyledHeader>
                     <HeroContent direction="column" justify="flex-start">
-                        <Header type="subtitle-1">{content}</Header>
+                        <Header as="h2" type="subtitle-1">
+                            {
+                                <Localize translate_text="Trade even when most financial markets are closed" />
+                            }
+                        </Header>
                     </HeroContent>
                     <TryButton
                         target="_blank"
@@ -138,49 +159,4 @@ const HeroComponent = ({ title, content, background_data }) => {
     )
 }
 
-const query = graphql`
-    query {
-        p2p_hero_background: file(relativePath: { eq: "landing/weekend.png" }) {
-            ...fadeIn
-        }
-        p2p_hero_background_mobile: file(relativePath: { eq: "landing/weekend-m.png" }) {
-            ...fadeIn
-        }
-    }
-`
-
-const Hero = ({ title, content }) => {
-    const data = useStaticQuery(query)
-
-    return (
-        <div>
-            <Show.Desktop min_width="800">
-                <HeroComponent
-                    title={title}
-                    content={content}
-                    background_data={data['p2p_hero_background']}
-                />
-            </Show.Desktop>
-            <Show.Mobile>
-                <HeroComponent
-                    title={title}
-                    content={content}
-                    background_data={data['p2p_hero_background_mobile']}
-                />
-            </Show.Mobile>
-        </div>
-    )
-}
-
-HeroComponent.propTypes = {
-    background_data: PropTypes.any,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    title: PropTypes.string,
-}
-
-Hero.propTypes = {
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    title: PropTypes.string,
-}
-
 export default Hero
diff --git a/src/pages/landing/weekend-trading/components/_icon-text-row.js b/src/pages/landing/weekend-trading/components/_icon-text-row.tsx
similarity index 100%
rename from src/pages/landing/weekend-trading/components/_icon-text-row.js
rename to src/pages/landing/weekend-trading/components/_icon-text-row.tsx
diff --git a/src/pages/landing/weekend-trading/components/_image-text-switching.js b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
similarity index 63%
rename from src/pages/landing/weekend-trading/components/_image-text-switching.js
rename to src/pages/landing/weekend-trading/components/_image-text-switching.tsx
index 684e70fafc2..17888db83ac 100644
--- a/src/pages/landing/weekend-trading/components/_image-text-switching.js
+++ b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx
@@ -1,12 +1,20 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
-import device from 'themes/device'
-import { Container, SectionContainer, Show } from 'components/containers'
+import device, { size } from 'themes/device'
+import { Container, SectionContainer } from 'components/containers'
 import { Header, Text, QueryImage } from 'components/elements'
 import { localize } from 'components/localization'
 import { isIndexEven } from 'common/utility'
+import { useBrowserResize } from 'components/hooks/use-browser-resize'
+
+type ImageWrapperProps = {
+    margin_right: string
+}
+
+type RowProps = {
+    flex_direction: string
+}
 
 const StyledSection = styled(SectionContainer)`
     @media ${device.tabletL} {
@@ -18,7 +26,7 @@ const StyledContainer = styled(Container)`
         width: 100%;
     }
 `
-const Content = styled.div`
+const Content = styled.div<ImageWrapperProps>`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -38,7 +46,7 @@ const Content = styled.div`
     }
 `
 
-const ImageWrapper = styled.div`
+const ImageWrapper = styled.div<ImageWrapperProps>`
     max-width: 47.1rem;
     width: 100%;
     max-height: 30rem;
@@ -60,7 +68,7 @@ const StyledText = styled(Text)`
         line-height: 30px;
     }
 `
-const Row = styled.div`
+const Row = styled.div<RowProps>`
     flex-direction: ${(props) => props.flex_direction};
     width: 100%;
     display: flex;
@@ -86,8 +94,26 @@ const query = graphql`
         }
     }
 `
-const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
+
+type P2PType = {
+    title: React.ReactElement
+    subtitle1: React.ReactElement
+    subtitle2: React.ReactElement
+    subtitle_mobile1: React.ReactElement
+    subtitle_mobile2: React.ReactElement
+    image_name: string
+    image_alt: string
+}
+
+type ImageTextSwitchingProps = {
+    P2P: P2PType[]
+    reverse: boolean
+}
+
+const ImageTextSwitching = ({ P2P, reverse }: ImageTextSwitchingProps) => {
     const data = useStaticQuery(query)
+    const [is_tabletL] = useBrowserResize(size.tabletL)
+
     return (
         <StyledSection background="var(--color-white)" padding="5rem 0 0 0">
             <StyledContainer direction="column">
@@ -102,38 +128,24 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
                 </StyledText>
 
                 {P2P.map((item, index) => {
-                    let is_even = isIndexEven(index, reverse)
+                    const is_even = isIndexEven(index, reverse)
                     return (
                         <Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={index}>
-                            <Content
-                                width="100%"
-                                max_width="58.8rem"
-                                margin_right={!is_even ? '12.6rem' : '0'}
-                            >
+                            <Content margin_right={!is_even ? '12.6rem' : '0'}>
                                 <StyledHeader type="heading-3" mb="1rem">
                                     {item.title}
                                 </StyledHeader>
-                                <Show.Desktop>
-                                    <Text size="var(--text-size-m)" pb="2rem">
-                                        {item.subtitle1}
-                                    </Text>
-                                </Show.Desktop>
-                                <Show.Desktop>
-                                    <Text size="var(--text-size-m)">{item.subtitle2}</Text>
-                                </Show.Desktop>
-                                <Show.Mobile>
-                                    <Text pb="2rem">{item.subtitle_mobile1}</Text>
-                                </Show.Mobile>
-                                <Show.Mobile>
-                                    <Text>{item.subtitle_mobile2}</Text>
-                                </Show.Mobile>
-                                {two_title && (
+                                {is_tabletL ? (
                                     <>
-                                        <StyledHeader type="heading-3">
-                                            {item.second_title}
-                                        </StyledHeader>
-                                        <Text>{item.second_subtitle1}</Text>
-                                        <Text>{item.second_subtitle2}</Text>
+                                        <Text pb="2rem">{item.subtitle_mobile1}</Text>
+                                        <Text>{item.subtitle_mobile2}</Text>
+                                    </>
+                                ) : (
+                                    <>
+                                        <Text size="var(--text-size-m)" pb="2rem">
+                                            {item.subtitle1}
+                                        </Text>
+                                        <Text size="var(--text-size-m)">{item.subtitle2}</Text>
                                     </>
                                 )}
                             </Content>
@@ -152,10 +164,4 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => {
     )
 }
 
-ImageTextSwitching.propTypes = {
-    P2P: PropTypes.array,
-    reverse: PropTypes.bool,
-    two_title: PropTypes.bool,
-}
-
 export default ImageTextSwitching
diff --git a/src/pages/landing/weekend-trading/components/_title-btn.js b/src/pages/landing/weekend-trading/components/_title-btn.tsx
similarity index 90%
rename from src/pages/landing/weekend-trading/components/_title-btn.js
rename to src/pages/landing/weekend-trading/components/_title-btn.tsx
index 2d44846944f..0e00c2b7d17 100644
--- a/src/pages/landing/weekend-trading/components/_title-btn.js
+++ b/src/pages/landing/weekend-trading/components/_title-btn.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import device from 'themes/device'
 import { Container, SectionContainer } from 'components/containers'
 import { Text } from 'components/elements'
@@ -37,7 +36,12 @@ const TryButton = styled(LinkButton)`
     }
 `
 
-const Titlebtn = ({ btnlabel, text }) => {
+type TitlebtnProps = {
+    btnlabel: string
+    text: string
+}
+
+const Titlebtn = ({ btnlabel, text }: TitlebtnProps) => {
     return (
         <StyledSection background="var(--color-grey-30)" padding="7rem 0 3rem" mt="9rem">
             <StyledContainer direction="column">
@@ -59,9 +63,4 @@ const Titlebtn = ({ btnlabel, text }) => {
     )
 }
 
-Titlebtn.propTypes = {
-    btnlabel: PropTypes.string,
-    text: PropTypes.string,
-}
-
 export default Titlebtn
diff --git a/src/pages/landing/weekend-trading/index.js b/src/pages/landing/weekend-trading/index.tsx
similarity index 92%
rename from src/pages/landing/weekend-trading/index.js
rename to src/pages/landing/weekend-trading/index.tsx
index 2811dd927a0..832b72f4f55 100644
--- a/src/pages/landing/weekend-trading/index.js
+++ b/src/pages/landing/weekend-trading/index.tsx
@@ -29,7 +29,6 @@ const DP2P_CONTENT = [
         subtitle_mobile2: (
             <Localize translate_text="Available to trade on Deriv MT5 and Deriv X (with margin), DTrader (with options and multipliers), and Deriv GO (with multipliers)." />
         ),
-
         image_name: 'buy_sell',
         image_alt: localize('Buy and sell'),
     },
@@ -66,12 +65,7 @@ const WeekenLP = () => {
                 title={localize('Weekends')}
                 description={localize('Ride the trends even on weekends')}
             />
-            <Hero
-                title={localize('Ride the trends even on weekends')}
-                content={
-                    <Localize translate_text="Trade even when most financial markets are closed" />
-                }
-            />
+            <Hero />
             <IconTextRow />
             <ImageTextSwitching reverse P2P={DP2P_CONTENT} />
             <Titlebtn