diff --git a/src/index.d.ts b/src/index.d.ts
deleted file mode 100644
index 63199ce7eeb..00000000000
--- a/src/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '*.svg'
diff --git a/src/pages/help-centre/_article.js b/src/pages/help-centre/_article.tsx
similarity index 76%
rename from src/pages/help-centre/_article.js
rename to src/pages/help-centre/_article.tsx
index a99e2c3eaab..1e917f34545 100644
--- a/src/pages/help-centre/_article.js
+++ b/src/pages/help-centre/_article.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { DidntFindYourAnswerBanner } from './_didnt-find-answer'
 import { Community } from './_community'
 import Layout from 'components/layout/layout'
@@ -9,6 +8,17 @@ import { SideTab, StyledLink } from 'components/elements'
 import { Container, SEO } from 'components/containers'
 import device from 'themes/device'
 
+export type ArticleProps = {
+    children?: React.ReactNode
+    header?: string
+    title?: string
+    description?: string
+    text?: string
+    label?: string
+    is_mounted?: boolean
+    has_note?: string
+}
+
 const Content = styled.div`
     display: flex;
     flex-direction: row;
@@ -26,10 +36,24 @@ const TabWrapper = styled.div`
 const ContactContainer = styled.div`
     margin-top: 8rem;
 `
-export const Article = ({ children, header, title, description }) => {
+export const Article = ({
+    children,
+    header = '',
+    title = '',
+    description = '',
+    text = '',
+    label = '',
+    is_mounted = false,
+}: ArticleProps) => {
     return (
         <Layout>
-            <SEO title={title} description={description} />
+            <SEO
+                title={title}
+                description={description}
+                text={text}
+                label={label}
+                is_mounted={is_mounted}
+            />
             <Container align="left" justify="flex-start" direction="column">
                 <StyledLink
                     to="/help-centre/"
@@ -63,10 +87,3 @@ export const Article = ({ children, header, title, description }) => {
         </Layout>
     )
 }
-
-Article.propTypes = {
-    children: PropTypes.node,
-    description: PropTypes.string,
-    header: PropTypes.string,
-    title: PropTypes.string,
-}
diff --git a/src/pages/help-centre/account.js b/src/pages/help-centre/account.tsx
similarity index 93%
rename from src/pages/help-centre/account.js
rename to src/pages/help-centre/account.tsx
index d006a9d409a..c550b0192a6 100644
--- a/src/pages/help-centre/account.js
+++ b/src/pages/help-centre/account.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, ExternalLink, StyledHeader, StyledText } from './_help-centre-style'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { deriv_app_url } from 'common/constants'
@@ -22,7 +22,7 @@ const StyledLink = styled(ExternalLink)`
     }
 `
 
-const WhoCanOpenAnAccount = () => (
+const WhoCanOpenAnAccount = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize("Why can't I create an account?")}</StyledHeader>
         <Text>
@@ -43,7 +43,7 @@ const WhoCanOpenAnAccount = () => (
     </ArticleWrapper>
 )
 
-const ChangingPersonalDetails = () => (
+const ChangingPersonalDetails = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How can I change my personal details?')}</StyledHeader>
         <Text>
@@ -70,7 +70,7 @@ const ChangingPersonalDetails = () => (
     </ArticleWrapper>
 )
 
-const ChangeAccountCurrency = () => (
+const ChangeAccountCurrency = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize("How can I change my account's currency?")}</StyledHeader>
         <Text>
@@ -81,7 +81,7 @@ const ChangeAccountCurrency = () => (
     </ArticleWrapper>
 )
 
-const RecoveringPassword = () => (
+const RecoveringPassword = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize(
@@ -106,7 +106,7 @@ const RecoveringPassword = () => (
     </ArticleWrapper>
 )
 
-const CloseAccount = () => (
+const CloseAccount = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How can I close my account?')}</StyledHeader>
         <Text>
@@ -132,7 +132,7 @@ const CloseAccount = () => (
     </ArticleWrapper>
 )
 
-const UnsubscribeEmail = () => (
+const UnsubscribeEmail = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('How do I unsubscribe from marketing emails?')}
@@ -156,7 +156,7 @@ const UnsubscribeEmail = () => (
     </ArticleWrapper>
 )
 
-const DormantFee = () => (
+const DormantFee = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What is a dormant fee?')}</StyledHeader>
         <Text>
diff --git a/src/pages/help-centre/dbot.js b/src/pages/help-centre/dbot.tsx
similarity index 96%
rename from src/pages/help-centre/dbot.js
rename to src/pages/help-centre/dbot.tsx
index d323be70a08..e5ae54d95ba 100644
--- a/src/pages/help-centre/dbot.js
+++ b/src/pages/help-centre/dbot.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, StyledHeader, StyledText } from './_help-centre-style'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { Text } from 'components/elements'
@@ -94,13 +94,13 @@ const Td = styled.td`
 const Tr = styled.tr`
     border: 1px solid var(--color-grey-7);
 `
-const StyledTable = styled.table`
+const StyledTable = styled.table<ArticleProps>`
     border-collapse: collapse;
     width: 100%;
     margin-bottom: ${(props) => (props.has_note ? '2.4rem' : 0)};
 `
 
-const WhatIsDBot = () => (
+const WhatIsDBot = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('What is DBot?')}</StyledHeader>
         <Text>
@@ -111,7 +111,7 @@ const WhatIsDBot = () => (
     </ArticleWrapper>
 )
 
-const FindBlocks = () => (
+const FindBlocks = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('How do I find the blocks I need?')}</StyledHeader>
         <Text>
@@ -148,7 +148,7 @@ const FindBlocks = () => (
     </ArticleWrapper>
 )
 
-const RemoveBlocks = () => (
+const RemoveBlocks = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">
             {localize('How do I remove blocks from the workspace?')}
@@ -170,7 +170,7 @@ const RemoveBlocks = () => (
     </ArticleWrapper>
 )
 
-const CreateVariables = () => (
+const CreateVariables = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('How do I create variables?')}</StyledHeader>
         <Text>{localize("1. Click 'Get started' to open the blocks menu.")}</Text>
@@ -224,7 +224,7 @@ const CreateVariables = () => (
     </ArticleWrapper>
 )
 
-const QuickStrategy = () => (
+const QuickStrategy = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">
             {localize('What is a quick strategy and how do I use it?')}
@@ -314,7 +314,7 @@ const QuickStrategy = () => (
     </ArticleWrapper>
 )
 
-const MartingaleStrategy = () => (
+const MartingaleStrategy = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('What is the Martingale strategy?')}</StyledHeader>
         <Text>
@@ -325,7 +325,7 @@ const MartingaleStrategy = () => (
     </ArticleWrapper>
 )
 
-const AlembertStrategy = () => (
+const AlembertStrategy = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('What is the D’Alembert strategy?')}</StyledHeader>
         <Text>
@@ -336,7 +336,7 @@ const AlembertStrategy = () => (
     </ArticleWrapper>
 )
 
-const OskarStrategy = () => (
+const OskarStrategy = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize("What is the Oscar's Grind strategy?")}</StyledHeader>
         <Text>
@@ -347,7 +347,7 @@ const OskarStrategy = () => (
     </ArticleWrapper>
 )
 
-const SaveStrategy = () => (
+const SaveStrategy = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('How do I save my strategy?')}</StyledHeader>
         <Text>
@@ -438,7 +438,7 @@ const SaveStrategy = () => (
     </ArticleWrapper>
 )
 
-const ImportStrategy = () => (
+const ImportStrategy = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('How do I import my strategies into DBot?')}</StyledHeader>
         <Text>
@@ -494,7 +494,7 @@ const ImportStrategy = () => (
     </ArticleWrapper>
 )
 
-const ResetWorkspace = () => (
+const ResetWorkspace = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('How do I reset the workspace?')}</StyledHeader>
         <Text>
@@ -514,7 +514,7 @@ const ResetWorkspace = () => (
     </ArticleWrapper>
 )
 
-const TransactionLog = () => (
+const TransactionLog = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('How do I clear my transaction log?')}</StyledHeader>
         <Text>
@@ -542,7 +542,7 @@ const TransactionLog = () => (
     </ArticleWrapper>
 )
 
-const ControlLosses = () => (
+const ControlLosses = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('How do I control my losses with DBot?')}</StyledHeader>
         <Text>
@@ -655,7 +655,7 @@ const ControlLosses = () => (
     </ArticleWrapper>
 )
 
-const TradeStatus = () => (
+const TradeStatus = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">
             {localize('Where can I see the status of my trades in DBot?')}
@@ -693,7 +693,7 @@ const TradeStatus = () => (
     </ArticleWrapper>
 )
 
-const ViewChart = () => (
+const ViewChart = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper margin_left="2rem">
         <StyledHeader as="h4">{localize('How do I view the chart in DBot?')}</StyledHeader>
         <Text>
diff --git a/src/pages/help-centre/deposits-and-withdrawals.js b/src/pages/help-centre/deposits-and-withdrawals.tsx
similarity index 91%
rename from src/pages/help-centre/deposits-and-withdrawals.js
rename to src/pages/help-centre/deposits-and-withdrawals.tsx
index 0f68c49acf6..eb6eb2d353b 100644
--- a/src/pages/help-centre/deposits-and-withdrawals.js
+++ b/src/pages/help-centre/deposits-and-withdrawals.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, ExternalLink, StyledHeader, StyledText } from './_help-centre-style'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { deriv_app_url } from 'common/constants'
 import { Text } from 'components/elements'
 import { Localize, localize, WithIntl } from 'components/localization'
 
-const PaymentMethods = () => (
+const PaymentMethods = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What payment methods do you support?')}</StyledHeader>
         <Text>
@@ -30,7 +30,7 @@ const PaymentMethods = () => (
     </ArticleWrapper>
 )
 
-const WithdrawalProcessingTime = () => (
+const WithdrawalProcessingTime = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('How long does it take to process deposits and withdrawals?')}
@@ -43,7 +43,7 @@ const WithdrawalProcessingTime = () => (
     </ArticleWrapper>
 )
 
-const MinimumDepositWithdrawal = () => (
+const MinimumDepositWithdrawal = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('What is the minimum deposit or withdrawal amount?')}
@@ -59,7 +59,7 @@ const MinimumDepositWithdrawal = () => (
     </ArticleWrapper>
 )
 
-const ExpiredVerificationLink = () => (
+const ExpiredVerificationLink = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('My withdrawal verification link expired. What should I do?')}
@@ -72,7 +72,7 @@ const ExpiredVerificationLink = () => (
     </ArticleWrapper>
 )
 
-const LiftWithdrawalLimits = () => (
+const LiftWithdrawalLimits = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How can I lift my withdrawal limits?')}</StyledHeader>
         <Text>
@@ -93,7 +93,7 @@ const LiftWithdrawalLimits = () => (
     </ArticleWrapper>
 )
 
-const CreditCardDepositDeclined = () => (
+const CreditCardDepositDeclined = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('Why does my credit card deposit keep getting declined?')}
@@ -106,7 +106,7 @@ const CreditCardDepositDeclined = () => (
     </ArticleWrapper>
 )
 
-const WithdrawDepositBonus = () => (
+const WithdrawDepositBonus = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('Can I withdraw my deposit bonus?')}</StyledHeader>
         <Text>
@@ -117,7 +117,7 @@ const WithdrawDepositBonus = () => (
     </ArticleWrapper>
 )
 
-const WithdrawMaestroMastercard = () => (
+const WithdrawMaestroMastercard = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize("Why can't I withdraw funds to my Maestro/Mastercard?")}
diff --git a/src/pages/help-centre/deriv-p2p.js b/src/pages/help-centre/deriv-p2p.tsx
similarity index 92%
rename from src/pages/help-centre/deriv-p2p.js
rename to src/pages/help-centre/deriv-p2p.tsx
index 5817da2b22d..b9502195a1e 100644
--- a/src/pages/help-centre/deriv-p2p.js
+++ b/src/pages/help-centre/deriv-p2p.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, StyledHeader, StyledText } from './_help-centre-style'
 import { Text } from 'components/elements'
 import { localize, Localize, WithIntl } from 'components/localization'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 
-const WhatisDerivP2P = () => (
+const WhatisDerivP2P = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What is Deriv P2P?')}</StyledHeader>
         <Text>
@@ -26,7 +26,7 @@ const WhatisDerivP2P = () => (
     </ArticleWrapper>
 )
 
-const HowSecureDerivP2P = () => (
+const HowSecureDerivP2P = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {<Localize translate_text="How secure is Deriv P2P?" components={[<br key={0} />]} />}
@@ -44,7 +44,7 @@ const HowSecureDerivP2P = () => (
     </ArticleWrapper>
 )
 
-const BuyOrSellLimit = () => (
+const BuyOrSellLimit = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {
@@ -62,7 +62,7 @@ const BuyOrSellLimit = () => (
     </ArticleWrapper>
 )
 
-const PaymentMethods = () => (
+const PaymentMethods = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {
@@ -85,7 +85,7 @@ const PaymentMethods = () => (
     </ArticleWrapper>
 )
 
-const DisputeWithTheTrader = () => (
+const DisputeWithTheTrader = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {
@@ -103,7 +103,7 @@ const DisputeWithTheTrader = () => (
     </ArticleWrapper>
 )
 
-const InTouchWithTheCounterparty = () => (
+const InTouchWithTheCounterparty = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {
@@ -121,7 +121,7 @@ const InTouchWithTheCounterparty = () => (
     </ArticleWrapper>
 )
 
-const DifferentAccountBalance = () => (
+const DifferentAccountBalance = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {
diff --git a/src/pages/help-centre/deriv-x.js b/src/pages/help-centre/deriv-x.tsx
similarity index 92%
rename from src/pages/help-centre/deriv-x.js
rename to src/pages/help-centre/deriv-x.tsx
index 5bd9a926319..f0b08de0695 100644
--- a/src/pages/help-centre/deriv-x.js
+++ b/src/pages/help-centre/deriv-x.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, StyledHeader, StyledText } from './_help-centre-style'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { derivx_app_url, deriv_app_url } from 'common/constants'
@@ -16,7 +16,7 @@ const ExternalLink = styled.a`
     }
 `
 
-const WhatisDerivX = () => (
+const WhatisDerivX = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What is Deriv X?')}</StyledHeader>
         <Text>
@@ -27,7 +27,7 @@ const WhatisDerivX = () => (
     </ArticleWrapper>
 )
 
-const DepositDerivX = () => (
+const DepositDerivX = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {
@@ -45,7 +45,7 @@ const DepositDerivX = () => (
     </ArticleWrapper>
 )
 
-const DerivXMarkets = () => (
+const DerivXMarkets = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What markets can I trade on Deriv X?')}</StyledHeader>
         <Text>
@@ -56,7 +56,7 @@ const DerivXMarkets = () => (
     </ArticleWrapper>
 )
 
-const DerivXTrade = () => (
+const DerivXTrade = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('What is the minimum and maximum amount to trade on Deriv X?')}
@@ -69,7 +69,7 @@ const DerivXTrade = () => (
     </ArticleWrapper>
 )
 
-const DifferenceDMT5DTraderDerivX = () => (
+const DifferenceDMT5DTraderDerivX = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize(
@@ -89,7 +89,7 @@ const DifferenceDMT5DTraderDerivX = () => (
     </ArticleWrapper>
 )
 
-const DerivXAccount = () => (
+const DerivXAccount = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How do I create a Deriv X account?')}</StyledHeader>
         <Text>
@@ -108,7 +108,7 @@ const DerivXAccount = () => (
     </ArticleWrapper>
 )
 
-const DifferentAccounts = () => (
+const DifferentAccounts = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('What are the differences between Synthetics and Financial accounts?')}
@@ -126,7 +126,7 @@ const DifferentAccounts = () => (
     </ArticleWrapper>
 )
 
-const TradingPassword = () => (
+const TradingPassword = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What is a Deriv X password?')}</StyledHeader>
         <Text>
@@ -135,7 +135,7 @@ const TradingPassword = () => (
     </ArticleWrapper>
 )
 
-const DifferentPassword = () => (
+const DifferentPassword = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('How is my Deriv X password different from my Deriv password?')}
@@ -148,7 +148,7 @@ const DifferentPassword = () => (
     </ArticleWrapper>
 )
 
-const ResetDerivXPassowrd = () => (
+const ResetDerivXPassowrd = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How do I reset my Deriv X password?')}</StyledHeader>
         <Text>
@@ -168,7 +168,7 @@ const ResetDerivXPassowrd = () => (
     </ArticleWrapper>
 )
 
-const AccountInformation = () => (
+const AccountInformation = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('Where can I find my Deriv X account information?')}
@@ -189,7 +189,7 @@ const AccountInformation = () => (
     </ArticleWrapper>
 )
 // TOOD: uncomment once deriv x real is ready
-const DerivXRealMoneyAccount = () => (
+const DerivXRealMoneyAccount = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('How can I deposit funds into my Deriv X real money account?')}
@@ -215,7 +215,7 @@ const DerivXRealMoneyAccount = () => (
     </ArticleWrapper>
 )
 
-const WithdrawDerivX = () => (
+const WithdrawDerivX = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('How do I withdraw funds from my Deriv X real money account?')}
diff --git a/src/pages/help-centre/dmt5.js b/src/pages/help-centre/dmt5.tsx
similarity index 93%
rename from src/pages/help-centre/dmt5.js
rename to src/pages/help-centre/dmt5.tsx
index 053de4226a9..e2799aa3928 100644
--- a/src/pages/help-centre/dmt5.js
+++ b/src/pages/help-centre/dmt5.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, ExternalLink, StyledHeader, StyledText } from './_help-centre-style'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { deriv_app_url } from 'common/constants'
@@ -7,7 +7,7 @@ import { Text } from 'components/elements'
 import { localize, Localize, WithIntl } from 'components/localization'
 import { DerivStore } from 'store'
 
-const WhatIsDMT5 = () => (
+const WhatIsDMT5 = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What is DMT5?')}</StyledHeader>
         <Text>
@@ -18,7 +18,7 @@ const WhatIsDMT5 = () => (
     </ArticleWrapper>
 )
 
-const DifferenceDMT5DTrader = () => (
+const DifferenceDMT5DTrader = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('What are the major differences between DTrader and DMT5?')}
@@ -36,7 +36,7 @@ const DifferenceDMT5DTrader = () => (
     </ArticleWrapper>
 )
 
-const DifferentAccounts = () => {
+const DifferentAccounts = ({ text, label, is_mounted }: ArticleProps) => {
     return (
         <ArticleWrapper>
             <StyledHeader as="h4">
@@ -65,7 +65,7 @@ const DifferentAccounts = () => {
     )
 }
 
-const WhatIsCFDsAccount = () => {
+const WhatIsCFDsAccount = ({ text, label, is_mounted }: ArticleProps) => {
     return (
         <ArticleWrapper>
             <StyledHeader as="h4">{localize('What is the CFDs account?')}</StyledHeader>
@@ -80,7 +80,7 @@ const WhatIsCFDsAccount = () => {
     )
 }
 
-const DepositDMT5 = () => (
+const DepositDMT5 = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('How can I deposit funds into my DMT5 real money account?')}
@@ -108,7 +108,7 @@ const DepositDMT5 = () => (
     </ArticleWrapper>
 )
 
-const WithdrawDMT5 = () => (
+const WithdrawDMT5 = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('How can I withdraw funds from my DMT5 real money account?')}
@@ -136,7 +136,7 @@ const WithdrawDMT5 = () => (
     </ArticleWrapper>
 )
 
-const LoginCredentials = () => (
+const LoginCredentials = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('Why are my DMT5 login details different from my Deriv login details?')}
@@ -149,7 +149,7 @@ const LoginCredentials = () => (
     </ArticleWrapper>
 )
 
-const ResetDMT5Password = () => (
+const ResetDMT5Password = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How can I reset my DMT5 account password?')}</StyledHeader>
         <Text>
diff --git a/src/pages/help-centre/dtrader.js b/src/pages/help-centre/dtrader.tsx
similarity index 90%
rename from src/pages/help-centre/dtrader.js
rename to src/pages/help-centre/dtrader.tsx
index c66f136e96f..839bad65fc4 100644
--- a/src/pages/help-centre/dtrader.js
+++ b/src/pages/help-centre/dtrader.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, StyledHeader } from './_help-centre-style'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { Text } from 'components/elements'
 import { localize, WithIntl } from 'components/localization'
 
-const WhatIsDMT5 = () => (
+const WhatIsDMT5 = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What is DTrader?')}</StyledHeader>
         <Text>
@@ -16,7 +16,7 @@ const WhatIsDMT5 = () => (
     </ArticleWrapper>
 )
 
-const DTraderMarkets = () => (
+const DTraderMarkets = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What markets can I trade on DTrader?')}</StyledHeader>
         <Text>
@@ -27,7 +27,7 @@ const DTraderMarkets = () => (
     </ArticleWrapper>
 )
 
-const DTraderContracts = () => (
+const DTraderContracts = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What contract types can I use on DTrader?')}</StyledHeader>
         <Text>
diff --git a/src/pages/help-centre/security.js b/src/pages/help-centre/security.tsx
similarity index 90%
rename from src/pages/help-centre/security.js
rename to src/pages/help-centre/security.tsx
index 3a0621ca495..232a6bd17ee 100644
--- a/src/pages/help-centre/security.js
+++ b/src/pages/help-centre/security.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, StyledHeader } from './_help-centre-style'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { Text } from 'components/elements'
 import { localize, WithIntl } from 'components/localization'
 
-const VerifyAccount = () => (
+const VerifyAccount = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('Do I need to verify my Deriv account?')}</StyledHeader>
         <Text>
@@ -16,7 +16,7 @@ const VerifyAccount = () => (
     </ArticleWrapper>
 )
 
-const VerificationDuration = () => (
+const VerificationDuration = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How long does verification take?')}</StyledHeader>
         <Text>
@@ -27,7 +27,7 @@ const VerificationDuration = () => (
     </ArticleWrapper>
 )
 
-const DocumentsDeclined = () => (
+const DocumentsDeclined = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('Why were my documents declined?')}</StyledHeader>
         <Text>
diff --git a/src/pages/help-centre/trading.js b/src/pages/help-centre/trading.tsx
similarity index 90%
rename from src/pages/help-centre/trading.js
rename to src/pages/help-centre/trading.tsx
index 44a6262700d..909f3de1bdc 100644
--- a/src/pages/help-centre/trading.js
+++ b/src/pages/help-centre/trading.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Article } from './_article'
+import { Article, ArticleProps } from './_article'
 import { ArticleWrapper, ExternalLink, StyledHeader } from './_help-centre-style'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import { deriv_app_url } from 'common/constants'
 import { Text } from 'components/elements'
 import { localize, Localize, WithIntl } from 'components/localization'
 
-const Forex = () => (
+const Forex = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What is forex?')}</StyledHeader>
         <Text>
@@ -17,7 +17,7 @@ const Forex = () => (
     </ArticleWrapper>
 )
 
-const Commodities = () => (
+const Commodities = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What are commodities?')}</StyledHeader>
         <Text>
@@ -28,7 +28,7 @@ const Commodities = () => (
     </ArticleWrapper>
 )
 
-const StockIndices = () => (
+const StockIndices = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What are stock indices?')}</StyledHeader>
         <Text>
@@ -39,7 +39,7 @@ const StockIndices = () => (
     </ArticleWrapper>
 )
 
-const SyntheticIndices = () => (
+const SyntheticIndices = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What are synthetic indices?')}</StyledHeader>
         <Text>
@@ -50,7 +50,7 @@ const SyntheticIndices = () => (
     </ArticleWrapper>
 )
 
-const CFD = () => (
+const CFD = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What are contracts for difference (CFDs)?')}</StyledHeader>
         <Text>
@@ -61,7 +61,7 @@ const CFD = () => (
     </ArticleWrapper>
 )
 
-const DigitalOptions = () => (
+const DigitalOptions = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What are digital options?')}</StyledHeader>
         <Text>
@@ -72,7 +72,7 @@ const DigitalOptions = () => (
     </ArticleWrapper>
 )
 
-const TradingPlatforms = () => (
+const TradingPlatforms = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How many trading platforms do you offer?')}</StyledHeader>
         <Text>
@@ -83,7 +83,7 @@ const TradingPlatforms = () => (
     </ArticleWrapper>
 )
 
-const AutomateTradingStrategy = () => (
+const AutomateTradingStrategy = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('How can I automate my trading strategy?')}</StyledHeader>
         <Text>
@@ -94,7 +94,7 @@ const AutomateTradingStrategy = () => (
     </ArticleWrapper>
 )
 
-const TradingLimits = () => (
+const TradingLimits = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">{localize('What are my trading limits?')}</StyledHeader>
         <Text>
@@ -115,7 +115,7 @@ const TradingLimits = () => (
     </ArticleWrapper>
 )
 
-const WeekendContracts = () => (
+const WeekendContracts = ({ text, label, is_mounted }: ArticleProps) => (
     <ArticleWrapper>
         <StyledHeader as="h4">
             {localize('What contracts are available for trading on weekends?')}