diff --git a/src/pages/landing/jump-indices/_dBanner.js b/src/pages/landing/jump-indices/_dBanner.tsx
similarity index 100%
rename from src/pages/landing/jump-indices/_dBanner.js
rename to src/pages/landing/jump-indices/_dBanner.tsx
diff --git a/src/pages/landing/jump-indices/_dHero.js b/src/pages/landing/jump-indices/_dHero.tsx
similarity index 98%
rename from src/pages/landing/jump-indices/_dHero.js
rename to src/pages/landing/jump-indices/_dHero.tsx
index e5bd715884a..6b424f9587c 100644
--- a/src/pages/landing/jump-indices/_dHero.js
+++ b/src/pages/landing/jump-indices/_dHero.tsx
@@ -123,7 +123,7 @@ const StyledAnimationWrapper = styled(Flex)`
 `
 
 const DHero = () => {
-    const animation_container = createRef()
+    const animation_container = createRef<HTMLElement>()
     useEffect(() => {
         const anim = lottie.loadAnimation({
             container: animation_container.current,
diff --git a/src/pages/landing/jump-indices/_jumpSection.js b/src/pages/landing/jump-indices/_jumpSection.tsx
similarity index 100%
rename from src/pages/landing/jump-indices/_jumpSection.js
rename to src/pages/landing/jump-indices/_jumpSection.tsx
diff --git a/src/pages/landing/jump-indices/_leverages.js b/src/pages/landing/jump-indices/_leverages.tsx
similarity index 66%
rename from src/pages/landing/jump-indices/_leverages.js
rename to src/pages/landing/jump-indices/_leverages.tsx
index f6f1e0f1a1b..16fff1e4751 100644
--- a/src/pages/landing/jump-indices/_leverages.js
+++ b/src/pages/landing/jump-indices/_leverages.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 import { Flex } from 'components/containers'
 import { Header } from 'components/elements'
-import { localize } from 'components/localization'
+import { localize, Localize } from 'components/localization'
 import { LinkButton } from 'components/form'
 import device from 'themes/device.js'
 import TradingIcon from 'images/svg/jump-indices/jump-indices-24-7-trading.svg'
@@ -80,28 +80,41 @@ const StyledLinkButton = styled(LinkButton)`
     padding: 11px 16px;
 `
 
+type ContentType = {
+    imgsrc: string
+    header: ReactElement
+    title: ReactElement
+}
+
+const content: ContentType[] = [
+    {
+        imgsrc: TradingIcon,
+        header: <Localize translate_text="Available 24/7" />,
+        title: (
+            <Localize translate_text="As jump indices are synthetics, you can trade them 24/7, 365 days of the year." />
+        ),
+    },
+    {
+        imgsrc: LeverageIcon,
+        header: <Localize translate_text="High leverage" />,
+        title: (
+            <Localize translate_text="Trade with high leverage ratios to have even more opportunities to increase your position size." />
+        ),
+    },
+]
 const Leverages = () => {
     return (
         <MainWrapper>
             <ParentWrapper>
-                <EachWrapper>
-                    <ImgWrapper src={TradingIcon} />
-                    <StyledHeader type="section-title">{localize('Available 24/7')}</StyledHeader>
-                    <StyledHeaderSmall type="sub-section-title" weight="normal">
-                        {localize(
-                            'As jump indices are synthetics, you can trade them 24/7, 365 days of the year.',
-                        )}
-                    </StyledHeaderSmall>
-                </EachWrapper>
-                <EachWrapper>
-                    <ImgWrapper src={LeverageIcon} />
-                    <StyledHeader type="section-title">{localize('High leverage')}</StyledHeader>
-                    <StyledHeaderSmall type="sub-section-title" weight="normal">
-                        {localize(
-                            'Trade with high leverage ratios to have even more opportunities to increase your position size.',
-                        )}
-                    </StyledHeaderSmall>
-                </EachWrapper>
+                {content.map((item, index) => (
+                    <EachWrapper key={`key-${index}`}>
+                        <ImgWrapper src={item.imgsrc} />
+                        <StyledHeader type="section-title">{item.header}</StyledHeader>
+                        <StyledHeaderSmall type="sub-section-title" weight="normal">
+                            {item.title}
+                        </StyledHeaderSmall>
+                    </EachWrapper>
+                ))}
             </ParentWrapper>
             <BtnWrapper>
                 <StyledLinkButton
diff --git a/src/pages/landing/jump-indices/index.js b/src/pages/landing/jump-indices/index.tsx
similarity index 84%
rename from src/pages/landing/jump-indices/index.js
rename to src/pages/landing/jump-indices/index.tsx
index 57ae448d756..f5da3db1d49 100644
--- a/src/pages/landing/jump-indices/index.js
+++ b/src/pages/landing/jump-indices/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import DHero from './_dHero'
-import DBanner from './_dBanner.js'
-import JumpSection from './_jumpSection.js'
-import Leverages from './_leverages.js'
+import DBanner from './_dBanner'
+import JumpSection from './_jumpSection'
+import Leverages from './_leverages'
 import { SEO } from 'components/containers'
 import Layout from 'components/layout/layout'
 import { localize, WithIntl } from 'components/localization'
diff --git a/tsconfig.json b/tsconfig.json
index 7e72e92731f..1706dea90f9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,7 @@
     "noEmit": true,
     "skipLibCheck": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "downlevelIteration": true,
   },
   "paths": {