diff --git a/src/pages/trade-types/multiplier/_available-trades.js b/src/pages/trade-types/multiplier/_available-trades.js
new file mode 100644
index 00000000000..37d3e2e0232
--- /dev/null
+++ b/src/pages/trade-types/multiplier/_available-trades.js
@@ -0,0 +1,246 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import PropTypes from 'prop-types'
+import { SectionContainer, Flex, Container } from 'components/containers'
+import { Localize } from 'components/localization'
+import { Header } from 'components/elements'
+import device from 'themes/device'
+//SVG
+import ForexIcon from 'images/svg/market-forex.svg'
+import SyntheticIcon from 'images/svg/market-synthetic-indices.svg'
+
+const StyledHeader = styled(Header)`
+    @media ${device.tabletL} {
+        max-width: 35.75rem;
+        font-size: 32px;
+        margin: 0 auto;
+    }
+`
+
+const StyledSection = styled(SectionContainer)`
+    padding: 5rem 0;
+`
+
+const StyledContainer = styled(Container)`
+    margin-top: 2.8rem;
+
+    @media ${device.tabletL} {
+        width: 100%;
+        margin-top: 0;
+    }
+`
+const CardWrapper = styled(Flex)`
+    max-width: 100.6rem;
+    justify-content: flex-start;
+    z-index: 1;
+    height: 8rem;
+    align-items: flex-end;
+    padding-left: 0.8rem;
+    overflow: hidden;
+
+    div:first-child {
+        z-index: 3;
+        margin: 0 -0.3rem;
+    }
+    div:nth-child(2) {
+        z-index: 2;
+    }
+    div:last-child {
+        z-index: 1;
+    }
+
+    @media ${device.mobileL} {
+        overflow: scroll;
+    }
+`
+const CardContainer = styled(Flex)`
+    position: relative;
+    width: fit-content;
+    min-width: 36rem;
+    height: 7.72rem;
+    padding: 0;
+    margin: 0 -0.6rem;
+    cursor: pointer;
+    z-index: ${(props) => (props.active_tab === props.name ? '4 !important' : '')};
+    padding-right: 5rem;
+
+    ${Flex} {
+        padding: 2.71rem 0 0 3.2rem;
+
+        img {
+            width: 32px;
+            height: 32px;
+            margin-right: 1.6rem;
+            opacity: ${(props) => (props.active_tab === props.name ? '1' : '0')};
+        }
+        h4 {
+            color: ${(props) =>
+        props.active_tab === props.name ? 'var(--color-red)' : 'var(--color-black-3)'};
+            opacity: ${(props) => (props.active_tab === props.name ? '1' : '0.56')};
+        }
+        @media ${device.tabletL} {
+            width: 100%;
+            height: 100%;
+            justify-content: flex-start;
+            padding: 10px 44px 0;
+
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 1rem;
+            }
+        }
+    }
+    ::before {
+        content: ''; /* To generate the box */
+        width: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: -1rem;
+        left: 0;
+        z-index: -1;
+        border-bottom: none;
+        border-radius: 10px 30px 0 0;
+        background: var(--color-grey-36);
+        transform: perspective(14px) rotateX(1.4deg);
+        transform-origin: bottom left;
+        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
+        ${(props) => {
+        if (props.active_tab === props.name)
+            return css`
+                    background-color: var(--color-white);
+                    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
+                `
+    }}
+    }
+    @media ${device.tabletL} {
+        width: 100%;
+        height: 6rem;
+        min-width: unset;
+        padding-right: 0;
+    }
+`
+const TabMarginIcon = styled.img`
+    min-width: 16px;
+    ${(props) => {
+        if (props.active_tab === props.name)
+            return css`
+                margin-left: 16px;
+            `
+    }}
+`
+const TabOptionIcon = styled.img`
+    min-width: 16px;
+    ${(props) => {
+        if (props.active_tab === props.name)
+            return css`
+                margin-left: 16px;
+            `
+    }}
+`
+
+const ContentWrapper = styled.div`
+    width: 100%;
+    max-width: 99.6rem;
+    display: block;
+    background: var(--color-white);
+    border-radius: 0.15em;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
+
+    @media ${device.tabletL} {
+        padding: 0 2rem;
+    }
+`
+const CardHeader = styled(Header)`
+    @media ${device.tabletL} {
+        font-size: 1.75rem;
+        line-height: 16px;
+    }
+`
+const Card = ({ display_name, active_tab, onTabChange, name }) => {
+    return (
+        <CardContainer name={name} active_tab={active_tab} onClick={() => onTabChange(name)}>
+            <Flex height="fit-content" jc="flex-start" ai="center">
+                {active_tab === 'Forex' && (
+                    <TabMarginIcon
+                        src={ForexIcon}
+                        alt="margin icon"
+                        name={name}
+                        active_tab={active_tab}
+                    />
+                )}
+                {active_tab === 'Synthetic Indices' && (
+                    <TabOptionIcon
+                        src={SyntheticIcon}
+                        alt="option icon"
+                        name={name}
+                        active_tab={active_tab}
+                    />
+                )}
+                <CardHeader as="h4" type="sub-section-title" width="auto">
+                    {display_name}
+                </CardHeader>
+            </Flex>
+        </CardContainer>
+    )
+}
+
+Card.propTypes = {
+    active_tab: PropTypes.string,
+    display_name: PropTypes.object,
+    name: PropTypes.string,
+    onTabChange: PropTypes.func,
+}
+
+class AvailableTrades extends React.Component {
+    state = {
+        active_tab: 'Forex',
+    }
+    handleTabChange = (new_tab) => {
+        if (new_tab === this.state.active_tab) return
+        this.setState({ active_tab: new_tab })
+    }
+    render() {
+        const { display_title, Forex, SyntheticIndices } = this.props
+        return (
+            <StyledSection>
+                <StyledHeader size="var(--text-size-header-1)" align="center" as='h2'>
+                    {display_title}
+                </StyledHeader>
+                <StyledContainer direction="column">
+                    <CardWrapper position="relative">
+                        {Forex && (
+                            <Card
+                                name="Forex"
+                                display_name={<Localize translate_text="Forex" />}
+                                onTabChange={() => this.handleTabChange('Forex')}
+                                active_tab={this.state.active_tab}
+                            />
+                        )}
+                        {SyntheticIndices && (
+                            <Card
+                                name="Synthetic Indices"
+                                display_name={<Localize translate_text="Synthetic Indices" />}
+                                onTabChange={() => this.handleTabChange('Synthetic Indices')}
+                                active_tab={this.state.active_tab}
+                            />
+                        )}
+                    </CardWrapper>
+                    <ContentWrapper>
+                        {this.state.active_tab === 'Forex' && <Forex />}
+                        {this.state.active_tab === 'Synthetic Indices' && <SyntheticIndices />}
+                    </ContentWrapper>
+                </StyledContainer>
+            </StyledSection>
+        )
+    }
+}
+
+AvailableTrades.propTypes = {
+    display_title: PropTypes.object,
+    Forex: PropTypes.func,
+    SyntheticIndices: PropTypes.func,
+}
+
+export default AvailableTrades
diff --git a/src/pages/trade-types/multiplier/_margin.js b/src/pages/trade-types/multiplier/_margin.js
new file mode 100644
index 00000000000..523ae48a16e
--- /dev/null
+++ b/src/pages/trade-types/multiplier/_margin.js
@@ -0,0 +1,88 @@
+import React from 'react'
+import styled from 'styled-components'
+import { MajorPairs } from '../../markets/sub-markets/_submarkets.js'
+import AvailablePlatforms from '../../markets/_available-platforms.js'
+import { Text } from 'components/elements'
+import { SectionContainer, Flex, CssGrid } from 'components/containers'
+import { localize } from 'components/localization'
+import device from 'themes/device'
+
+const StyledText = styled(Text)`
+    @media ${device.tabletL} {
+        text-align: left;
+    }
+`
+
+const Col = styled(Flex)`
+    max-width: 12.9rem;
+    padding: 0 0.4rem;
+`
+const Row = styled(Flex)`
+    border: 1px solid var(--color-grey-22);
+    margin-top: 2.4rem;
+    border-radius: 8px;
+`
+const MarketsList = styled(CssGrid)`
+    border-left: 1px solid var(--color-grey-22);
+    grid-template-columns: repeat(5, 1fr);
+    width: 100%;
+    padding: 2.4rem;
+    grid-row-gap: 1.6rem;
+
+    @media ${device.tabletL} {
+        grid-template-columns: repeat(3, 1fr);
+
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+        }
+        ${Text} {
+            font-size: 1.5rem;
+            line-height: 1.5;
+        }
+    }
+
+    @media ${device.mobileL} {
+        grid-template-columns: repeat(2, 1fr);
+    }
+`
+
+const Title = styled(Text)`
+    text-align: center;
+
+    @media ${device.tabletL} {
+        font-weight: 600;
+    }
+`
+
+const StyledTitle = styled(Text)`
+    text-align: left;
+    font-weight: bold;
+`
+
+const Margin = () => {
+    return (
+        <SectionContainer padding="4rem 0 8rem">
+            <Flex max_width="79.2rem" m="0 auto" direction="column">
+                <StyledText mb='12px' align="center">
+                    {localize('Trade Forex with multipliers for high leverage, tight spreads and benefit from multiple opportunities to trade on world events.')}
+                </StyledText>
+                <StyledTitle>
+                    {localize('Forex pairs available for Multipliers trading')}
+                </StyledTitle>
+                <Row jc="flex-start" ai="center">
+                    <Col>
+                        <title>Codestin Search App</title>
+                    </Col>
+                    <MarketsList>
+                        <MajorPairs />
+                    </MarketsList>
+                </Row>
+                <AvailablePlatforms dtrader />
+            </Flex>
+        </SectionContainer>
+    )
+}
+
+export default Margin
diff --git a/src/pages/trade-types/multiplier/_synthetic-indices.js b/src/pages/trade-types/multiplier/_synthetic-indices.js
new file mode 100644
index 00000000000..c0ce6403c3e
--- /dev/null
+++ b/src/pages/trade-types/multiplier/_synthetic-indices.js
@@ -0,0 +1,173 @@
+import React from 'react'
+import styled from 'styled-components'
+import { CrashBoom, ContinuousIndices } from '../../markets/sub-markets/_submarkets.js'
+import MarketsAccordion from '../../markets/_markets_accordion.js'
+import AvailablePlatforms from '../../markets/_available-platforms.js'
+import { Text } from 'components/elements'
+import { SectionContainer, Flex, CssGrid, Show } from 'components/containers'
+import { localize, Localize } from 'components/localization'
+import device from 'themes/device'
+
+const StyledText = styled(Text)`
+    @media ${device.tabletL} {
+        text-align: left;
+    }
+`
+
+const Col = styled(Flex)`
+    max-width: 13.2rem;
+
+    @media ${device.tabletL} {
+        max-width: 12rem;
+    }
+`
+
+const MarketsWrapper = styled(Flex)`
+    flex-direction: column;
+
+    > div {
+        margin-top: 2.4rem;
+    }
+`
+const MarketsList = styled(CssGrid)`
+    border-left: 1px solid var(--color-grey-22);
+    border-right: 1px solid var(--color-grey-22);
+    width: 100%;
+    padding: 2.4rem 0.7rem;
+    grid-row-gap: 1.6rem;
+    grid-template-columns: repeat(3, 1fr);
+
+    @media ${device.tabletL} {
+        grid-template-columns: repeat(2, 1fr);
+
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+        }
+        ${Text} {
+            font-size: 12px;
+            line-height: 1.5;
+        }
+    }
+
+    @media ${device.tabletS} {
+        grid-template-columns: repeat(1, 1fr);
+    }
+`
+
+const Title = styled(Text)`
+    text-align: center;
+
+    @media ${device.tabletL} {
+        font-weight: 600;
+    }
+`
+
+const DetailsContainer = styled(Flex)`
+    flex-direction: column;
+
+    ${Text} {
+        font-size: 1.4rem;
+        margin-top: 1.6rem;
+
+        @media ${device.tabletL} {
+            margin-top: 1rem;
+        }
+    }
+`
+
+const CrashBoomDetails = () => (
+    <DetailsContainer>
+        <Text>
+            <Localize
+                translate_text="With these indices, there is an average of one drop (crash) or one spike (boom) in prices that occur in a <0>series of 1000 or 500 ticks</0>."
+                components={[<strong key={0} />]}
+            />
+        </Text>
+    </DetailsContainer>
+)
+
+const ContinuousIndicesDetails = () => (
+    <DetailsContainer>
+        <Text>
+            {localize(
+                'These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.',
+            )}
+        </Text>
+        <Text>
+            <Localize
+                translate_text="<0>One tick</0> is generated <0>every two seconds</0> for volatility indices <0>10, 25, 50, 75, and 100</0>."
+                components={[<strong key={0} />]}
+            />
+        </Text>
+        <Text>
+            <Localize
+                translate_text="<0>One tick</0> is generated <0>every second</0> for volatility indices <0>10 (1s), 25 (1s), 50 (1s), 75 (1s), and 100 (1s)</0>."
+                components={[<strong key={0} />]}
+            />
+        </Text>
+    </DetailsContainer>
+)
+
+const SyntheticIndices = () => {
+    return (
+        <SectionContainer padding="4rem 0 8rem">
+            <Flex max_width="79.2rem" m="0 auto" direction="column">
+                <StyledText mb='12px' align="center">
+                    {localize('Synthetic indices are engineered to mimic real-world market movement; minus real life risk. Trade multipliers on Synthetic Indices 24/7 and benefit from high leverage, tight spreads and fixed generation intervals.')}
+                </StyledText>
+                <Text weight="bold">
+                    {localize('Synthetics indices available for Multipliers trading')}
+                </Text>
+                <MarketsWrapper direction="column">
+                    <MarketsAccordion
+                        renderTitle={() => (
+                            <Flex jc="flex-start" ai="center">
+                                <Col max_width="13.2rem">
+                                    <Show.Desktop>
+                                        <title>Codestin Search App</title>
+                                    </Show.Desktop>
+                                    <Show.Mobile>
+                                        <title>Codestin Search App</title>
+                                    </Show.Mobile>
+                                </Col>
+                                <MarketsList>
+                                    <CrashBoom />
+                                </MarketsList>
+                            </Flex>
+                        )}
+                        renderDetails={CrashBoomDetails}
+                    />
+                </MarketsWrapper>
+                <AvailablePlatforms dtrader />
+
+                <MarketsWrapper direction="column">
+                    <MarketsAccordion
+                        renderTitle={() => (
+                            <Flex jc="flex-start" ai="center">
+                                <Col>
+                                    <title>Codestin Search App</title>
+                                </Col>
+                                <MarketsList>
+                                    <ContinuousIndices />
+                                </MarketsList>
+                            </Flex>
+                        )}
+                        renderDetails={ContinuousIndicesDetails}
+                    />
+                </MarketsWrapper>
+                <AvailablePlatforms dtrader />
+
+            </Flex>
+        </SectionContainer>
+    )
+}
+
+export default SyntheticIndices
diff --git a/src/pages/trade-types/multiplier/_what-are-multipliers.js b/src/pages/trade-types/multiplier/_what-are-multipliers.js
index aadff28eed4..090a0132a7a 100644
--- a/src/pages/trade-types/multiplier/_what-are-multipliers.js
+++ b/src/pages/trade-types/multiplier/_what-are-multipliers.js
@@ -1,7 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
 import { graphql, useStaticQuery } from 'gatsby'
+import Loadable from '@loadable/component'
 import { SmallContainer, Grid, WhyTradeItem } from '../components/_style'
+import Margin from './_margin.js'
+import SyntheticIndices from './_synthetic-indices.js'
 import device from 'themes/device'
 import { SectionContainer, Flex } from 'components/containers'
 import { Header, Text, QueryImage } from 'components/elements'
@@ -14,6 +17,7 @@ import ResponsivePlatform from 'images/svg/trade-types/responsive-platform.svg'
 import FriendlySupport from 'images/svg/trade-types/friendly-support.svg'
 import Seven from 'images/svg/trade-types/seven.svg'
 import CrashBoom from 'images/svg/trade-types/crash-boom.svg'
+const AvailableTrades = Loadable(() => import('./_available-trades.js'))
 
 const StyledHeader = styled(Header)`
     @media ${device.tablet} {
@@ -242,6 +246,11 @@ const WhatAreOptions = () => {
                     </Flex>
                 </SmallContainer>
             </StyledSectionContainer>
+            <AvailableTrades
+                display_title={localize('Instruments available to trade on Multipliers')}
+                Forex={Margin}
+                SyntheticIndices={SyntheticIndices}
+            />
             <SectionContainer background="grey-23" padding="4rem 0">
                 <SmallContainer direction="column" jc="flex-start" ai="flex-start">
                     <Header as="h3" size="3.2rem" mb="4rem">
diff --git a/src/themes/variables.js b/src/themes/variables.js
index 70ffc3eb1f0..594528be577 100644
--- a/src/themes/variables.js
+++ b/src/themes/variables.js
@@ -53,6 +53,7 @@ const Variables = css`
         --color-grey-33: #8e9190;
         --color-grey-34: #e7e7e7;
         --color-grey-35: #f5f7f9;
+        --color-grey-36: #f3f3f3;
         --color-green: #85acb0;
         --color-blue: #4c76be;
         --color-blue-2: #365899;