diff --git a/src/components/custom/_signup-public.js b/src/components/custom/_signup-public.js
index 38e0812dd6f..2d59e27e2ef 100644
--- a/src/components/custom/_signup-public.js
+++ b/src/components/custom/_signup-public.js
@@ -32,6 +32,7 @@ const Wrapper = styled.div`
     width: 100%;
     overflow: hidden;
     border-top: 1px solid rgba(151, 151, 151, 0.2);
+    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
     @media (max-width: 991px) {
         flex-direction: column;
         height: auto;
@@ -97,14 +98,18 @@ const InputGroup = styled.div`
     margin-top: 3.5rem;
 `
 const EmailButton = styled(Button)`
-    margin-left: 2rem;
-    height: 4rem;
+    margin-left: 1rem;
+    min-width: 105px;
+    height: 40px;
+    padding: 10px 28px;
+    border-radius: 4px;
     @media ${device.tabletL} {
-        width: auto;
+        padding: 10px;
+        min-width: unset;
         font-size: 1.4rem;
         margin-left: 0;
-        height: 5rem;
-        min-width: 15rem;
+        height: 40px;
+        width: 81px;
     }
 `
 const SocialWrapper = styled(Flex)`
@@ -117,7 +122,8 @@ const SocialWrapper = styled(Flex)`
     }
 `
 const SocialButton = styled(Button)`
-    width: 56px;
+    width: 70px;
+    border-radius: 4px;
     justify-content: center;
     display: flex;
     background-color: var(--color-white);
@@ -125,6 +131,8 @@ const SocialButton = styled(Button)`
     height: 4rem;
     margin: 0 0.8rem;
     @media ${device.tabletL} {
+        width: 114px;
+        height: 48px;
         justify-content: center;
         align-items: center;
     }
@@ -155,10 +163,17 @@ const StyledText = styled(Text)`
     width: auto;
     margin-right: 2rem;
     @media ${device.tabletL} {
-        width: max-content-fit;
-        margin-right: 1rem;
+        width: 90px;
+        margin-right: 0;
     }
 `
+
+const StyledSpan = styled.span`
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-grey-32);
+    margin-left: 4px;
+`
 const ImageWrapper = styled(Flex)`
     position: relative;
     width: 41.1rem;
@@ -246,7 +261,10 @@ const SignupPublic = ({
                     <SignupFormWrapper>
                         <div>
                             <StyledHeader size="3.2rem">
-                                {localize('Join over 1 million traders worldwide')}
+                                {localize('Join over 1 million')}
+                            </StyledHeader>
+                            <StyledHeader size="3.2rem">
+                                {localize('traders worldwide')}
                             </StyledHeader>
                             <br />
                             <StyledHeaderText weight="normal" size="1.6rem">
@@ -262,10 +280,12 @@ const SignupPublic = ({
                                         value={email}
                                         background="white"
                                         tabletBackground="green-1"
-                                        inputColor="var(grey-5)"
+                                        inputColor="grey-5"
                                         inputBackground="grey-8"
                                         labelFocusColor="grey-7"
                                         labelColor="black-3"
+                                        labelSize="16px"
+                                        labelTop="1.2rem"
                                         label={localize('Email')}
                                         placeholder={'example@mail.com'}
                                         handleError={clearEmail}
@@ -275,6 +295,7 @@ const SignupPublic = ({
                                         autoComplete="off"
                                         required
                                         border="unset"
+                                        height="40px"
                                         focusBorder="var(--color-grey-7)"
                                     />
                                 </InputWrapper>
@@ -288,7 +309,7 @@ const SignupPublic = ({
                                 </EmailButton>
                             </InputGroup>
                             <SocialWrapper jc="unset" ai="center">
-                                <StyledText>{localize('or sign up with')}</StyledText>
+                                <StyledText>{localize('Or sign in with')}</StyledText>
                                 <SocialButton
                                     onClick={handleSocialSignup}
                                     provider="facebook"
@@ -353,7 +374,7 @@ const SignupPublic = ({
                                         value={email}
                                         background="white"
                                         tabletBackground="green-1"
-                                        inputColor="var(grey-5)"
+                                        inputColor="grey-5"
                                         inputBackground="grey-8"
                                         labelFocusColor="grey-7"
                                         labelColor="black-3"
@@ -379,30 +400,32 @@ const SignupPublic = ({
                                 </EmailButton>
                             </InputGroup>
                             <SocialWrapper jc="unset" ai="center">
-                                <StyledText>{localize('or sign up with')}</StyledText>
+                                <StyledText>{localize('Or sign in with')}</StyledText>
                                 <SocialButton
                                     onClick={handleSocialSignup}
-                                    provider="facebook"
-                                    data-provider="facebook"
-                                    id="gtm-signup-facebook"
+                                    provider="google"
+                                    data-provider="google"
+                                    id="gtm-signup-google"
                                     type="button"
                                     social
                                 >
                                     <span>
                                         <img src={Facebook} alt="facebook" width="12" height="22" />
                                     </span>
+                                    <StyledSpan>Google</StyledSpan>
                                 </SocialButton>
                                 <SocialButton
                                     onClick={handleSocialSignup}
-                                    provider="google"
-                                    data-provider="google"
-                                    id="gtm-signup-google"
+                                    provider="facebook"
+                                    data-provider="facebook"
+                                    id="gtm-signup-facebook"
                                     type="button"
                                     social
                                 >
                                     <span>
                                         <img src={Google} alt="google" width="22" height="23" />
                                     </span>
+                                    <StyledSpan>Facebook</StyledSpan>
                                 </SocialButton>
                             </SocialWrapper>
                         </div>
diff --git a/src/components/custom/_simple-steps.js b/src/components/custom/_simple-steps.js
index 59bfb554c7a..c3df1a640dd 100644
--- a/src/components/custom/_simple-steps.js
+++ b/src/components/custom/_simple-steps.js
@@ -99,12 +99,16 @@ const MobileBackgroundPattern = styled.img`
     left: 0;
     top: 0;
 `
+
 const LinkButtonWrapper = styled.div`
     margin-top: 4.2rem;
     text-align: center;
     height: 3rem;
 
     ${LinkButton} {
+        width: 113px;
+        height: 40px;
+        border-radius: 4px;
         position: relative;
         font-size: 1.4rem;
     }
diff --git a/src/components/elements/default-tab.js b/src/components/elements/default-tab.js
index 3a2af50d559..5c11b82bbed 100644
--- a/src/components/elements/default-tab.js
+++ b/src/components/elements/default-tab.js
@@ -94,7 +94,7 @@ TabPanel.propTypes = {
 const Tabs = ({ children, tab_list }) => {
     const [selected_tab, setSelectedTab] = useState(0)
     const [active_tab, setActiveTab] = useTabState(['clients', 'business-partners'])
-    
+
     useEffect(() => {
         setSelectedTab(tab_list.indexOf(active_tab))
     }, [active_tab])
@@ -109,9 +109,7 @@ const Tabs = ({ children, tab_list }) => {
                         aria-selected={selected_tab === index ? 'true' : 'false'}
                         onClick={() => setActiveTab(tab_list[index])}
                     >
-                    <TextWrapper>
-                        {label}
-                    </TextWrapper>
+                        <TextWrapper>{label}</TextWrapper>
                     </TabButton>
                 ))}
                 <LineDivider />
diff --git a/src/components/elements/side-tab.js b/src/components/elements/side-tab.js
index 9083b0df975..2c51094de1d 100644
--- a/src/components/elements/side-tab.js
+++ b/src/components/elements/side-tab.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import { Text, Header } from './typography'
-import device, {size} from 'themes/device'
+import device, { size } from 'themes/device'
 import { getWindowWidth } from 'common/utility'
 import { Box } from 'components/containers'
 import { Desktop, Mobile } from 'components/containers/show'
@@ -113,8 +113,9 @@ const Tab = ({ active_tab, label, onClick, text, mobile, font_size }) => {
     )
 }
 
-const getTabs = (children) => children.map(child => child.props.label)
-const findCurrentTab = (children, active_tab) => children.find(child => child.props.label === active_tab)
+const getTabs = (children) => children.map((child) => child.props.label)
+const findCurrentTab = (children, active_tab) =>
+    children.find((child) => child.props.label === active_tab)
 
 const SideTab = ({ children, is_sticky, tab_header, font_size }) => {
     const [active_tab, setActiveTab] = useTabState(getTabs(children))
@@ -174,7 +175,8 @@ const SideTab = ({ children, is_sticky, tab_header, font_size }) => {
                 </Mobile>
             </TabList>
             <TabContent>
-                {(!is_menu || getWindowWidth() >= size.tabletL) && children.map((child) => (child.props.label === active_tab ? child : undefined))}
+                {(!is_menu || getWindowWidth() >= size.tabletL) &&
+                    children.map((child) => (child.props.label === active_tab ? child : undefined))}
             </TabContent>
         </StyledSideTab>
     )
diff --git a/src/components/form/input.js b/src/components/form/input.js
index 5b438838eac..ff3e00a82d6 100644
--- a/src/components/form/input.js
+++ b/src/components/form/input.js
@@ -14,7 +14,6 @@ const InputWrapper = styled.div`
     width: 100%;
     border: ${(props) => props.border || '1px solid var(--color-grey-2)'};
     border-radius: 4px;
-
     @media ${device.tabletL} {
         height: 5rem;
     }
@@ -39,7 +38,6 @@ const InputWrapper = styled.div`
         props.error &&
         css`
             border-color: var(--color-red-1) !important;
-
             & > label {
                 color: var(--color-red-1) !important;
             }
@@ -53,7 +51,6 @@ const StyledError = styled.img`
     height: 1.6rem;
     width: 1.6rem;
     cursor: pointer;
-
     @media ${device.tablet} {
         right: 2rem;
         top: 1.6rem;
@@ -66,11 +63,11 @@ const StyledInput = styled.input`
     color: var(--color-${(props) => props.inputColor || 'black'});
     font-size: var(--text-size-xs);
     padding: 1rem 1rem 1rem 0.8rem;
+    height: ${(props) => props.height || '40px'};
     width: 100%;
     display: block;
     border: none;
     border-radius: 4px;
-
     @media ${device.tabletL} {
         height: 100%;
 
@@ -79,7 +76,6 @@ const StyledInput = styled.input`
             top: 1.5rem;
         }
     }
-
     @media ${device.mobileL} {
         font-size: 14px;
 
@@ -105,7 +101,6 @@ const StyledInput = styled.input`
 
             /* prettier-ignore */
             background-color: var(--color-${(props) => props.background || 'grey-1'});
-
             @media ${device.mobileL} {
                 transform: translate(-0.6rem, -20px) scale(0.7);
             }
@@ -123,11 +118,9 @@ const StyledInput = styled.input`
                 & ~ label {
                     transform: translate(-0.6rem, -2rem) scale(0.7);
                     color: var(--color-black-3);
-
                     @media ${device.tabletL} {
                         top: 9px;
                     }
-
                     /* prettier-ignore */
                     background-color: var(--color-${(props) => props.background || 'grey-1'});
                 }
@@ -157,6 +150,7 @@ const StyledLabel = styled.label`
 
 const Input = ({
     label,
+    height,
     border,
     focusBorder,
     labelHoverColor,
@@ -185,6 +179,7 @@ const Input = ({
                     background={background}
                     maxLength={maxLength}
                     error={error}
+                    height={height}
                     {...props}
                     ref={(ip) => (current_input = ip)}
                 />
@@ -220,6 +215,7 @@ Input.propTypes = {
     error: PropTypes.string,
     focusBorder: PropTypes.string,
     handleError: PropTypes.func,
+    height: PropTypes.any,
     id: PropTypes.string,
     label: PropTypes.string,
     labelColor: PropTypes.string,
diff --git a/src/components/hooks/use-tab-state.js b/src/components/hooks/use-tab-state.js
index 54b8e8bebc4..8ae646dc443 100644
--- a/src/components/hooks/use-tab-state.js
+++ b/src/components/hooks/use-tab-state.js
@@ -1,8 +1,19 @@
 import { useState, useEffect } from 'react'
-import { checkElemInArray, getLocationHash, isBrowser, routeBack, scrollTop, setLocationHash } from 'common/utility'
+import {
+    checkElemInArray,
+    getLocationHash,
+    isBrowser,
+    routeBack,
+    scrollTop,
+    setLocationHash,
+} from 'common/utility'
 
 export const useTabState = (tab_list) => {
-    const [active_tab, setActiveTab] = useState(getLocationHash() && checkElemInArray(tab_list, getLocationHash()) ? getLocationHash() : tab_list[0])
+    const [active_tab, setActiveTab] = useState(
+        getLocationHash() && checkElemInArray(tab_list, getLocationHash())
+            ? getLocationHash()
+            : tab_list[0],
+    )
 
     useEffect(() => {
         if (!getLocationHash() || !checkElemInArray(tab_list, getLocationHash())) {
@@ -29,4 +40,4 @@ export const useTabState = (tab_list) => {
     }, [getLocationHash()])
 
     return [active_tab, setActiveTab]
-}
\ No newline at end of file
+}
diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
index e414c2626e6..2c9ad449e35 100644
--- a/src/components/layout/footer.js
+++ b/src/components/layout/footer.js
@@ -324,13 +324,13 @@ const Footer = () => {
                                         </Link>
                                     </LinkWrapper>
                                     <LinkWrapper>
-                                        <Link to="/partners">
-                                            {localize('Partnership programmes')}
+                                        <Link to="/why-choose-us">
+                                            {localize('Why choose us?')}
                                         </Link>
                                     </LinkWrapper>
                                     <LinkWrapper>
-                                        <Link to="/why-choose-us">
-                                            {localize('Why choose us?')}
+                                        <Link to="/partners">
+                                            {localize('Partnership programmes')}
                                         </Link>
                                     </LinkWrapper>
                                     <LinkWrapper>
@@ -631,10 +631,7 @@ const Footer = () => {
                                 </Show.Eu>
                                 <Show.NonEU>
                                     <DisclaimerParagraph no_margin>
-                                        <Localize
-                                            translate_text="The financial products offered on this website include options and contracts for difference (CFDs) which are considered complex derivatives and may not be suitable for everyone. CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment, and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money."
-                                            components={[<strong key={0} />]}
-                                        />
+                                        <Localize translate_text="The financial products offered on this website include options and contracts for difference (CFDs) which are considered complex derivatives and may not be suitable for everyone. CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment, and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
                                     </DisclaimerParagraph>
                                     <DisclaimerParagraph>
                                         <Localize
diff --git a/src/components/layout/nav.js b/src/components/layout/nav.js
index 26c71a79b9d..ac14edf406a 100644
--- a/src/components/layout/nav.js
+++ b/src/components/layout/nav.js
@@ -175,21 +175,21 @@ const NavRight = styled.div`
     }};
     transform: translateX(
         ${(props) => {
-        if (props.move) {
-            if (props.button_ref.current && props.mounted) {
-                props.button_ref.current.style.opacity = 1
-            }
-            return 0
-        } else {
-            if (props.button_ref.current && props.mounted) {
-                props.button_ref.current.style.opacity = 0
-
-                const calculation = props.button_ref.current.offsetWidth + 2
-                return `${calculation}px`
+            if (props.move) {
+                if (props.button_ref.current && props.mounted) {
+                    props.button_ref.current.style.opacity = 1
+                }
+                return 0
+            } else {
+                if (props.button_ref.current && props.mounted) {
+                    props.button_ref.current.style.opacity = 0
+
+                    const calculation = props.button_ref.current.offsetWidth + 2
+                    return `${calculation}px`
+                }
+                return '300px'
             }
-            return '300px'
-        }
-    }}
+        }}
     );
 
     > a {
@@ -319,26 +319,20 @@ const handleLogin = () => {
 }
 
 const NavMobile = () => {
-
     const [is_canvas_menu_open, openOffCanvasMenu, closeOffCanvasMenu] = moveOffCanvasMenu()
 
     return (
         <Wrapper>
             {is_canvas_menu_open ? (
-                <CloseMenu
-                    src={Close}
-                    alt="close menu"
-                    onClick={closeOffCanvasMenu}
+                <CloseMenu src={Close} alt="close menu" onClick={closeOffCanvasMenu} width="16px" />
+            ) : (
+                <HamburgerMenu
+                    src={Hamburger}
+                    alt="hamburger"
+                    onClick={openOffCanvasMenu}
                     width="16px"
                 />
-            ) : (
-                    <HamburgerMenu
-                        src={Hamburger}
-                        alt="hamburger"
-                        onClick={openOffCanvasMenu}
-                        width="16px"
-                    />
-                )}
+            )}
 
             <LogoLinkMobile to="/" aria-label={localize('Home')}>
                 <Flex>
@@ -364,7 +358,6 @@ const NavMobile = () => {
 }
 
 const NavDesktop = ({ base }) => {
-
     const data = useStaticQuery(query)
     const button_ref = useRef(null)
     const [show_button, showButton, hideButton] = moveButton()
@@ -555,7 +548,6 @@ const NavDesktop = ({ base }) => {
 }
 
 export const Nav = ({ base }) => {
-
     return (
         <NavWrapper>
             <StyledNav>
@@ -697,21 +689,21 @@ const StyledNavRight = styled(NavRight)`
     margin-left: auto;
     transform: translateX(
         ${(props) => {
-        if (props.move) {
-            if (props.button_ref.current && props.mounted) {
-                props.button_ref.current.style.opacity = 1
+            if (props.move) {
+                if (props.button_ref.current && props.mounted) {
+                    props.button_ref.current.style.opacity = 1
+                }
+                return '50px'
+            } else {
+                if (props.button_ref.current && props.mounted) {
+                    props.button_ref.current.style.opacity = 0
+
+                    const calculation = props.button_ref.current.offsetWidth + 50
+                    return `${calculation}px`
+                }
+                return '300px'
             }
-            return '50px'
-        } else {
-            if (props.button_ref.current && props.mounted) {
-                props.button_ref.current.style.opacity = 0
-
-                const calculation = props.button_ref.current.offsetWidth + 50
-                return `${calculation}px`
-            }
-            return '300px'
-        }
-    }}
+        }}
     );
 
     > a {
@@ -876,15 +868,15 @@ export const NavPartners = ({ no_login_signup }) => {
                                 </LinkSignupButton>
                             </StyledNavRight>
                         ) : (
-                                <NavRight
-                                    move={show_button}
-                                    button_ref={button_ref}
-                                    mounted={mounted}
-                                    has_scrolled={has_scrolled}
-                                >
-                                    <LanguageSwitcher short_name="true" is_high_nav />
-                                </NavRight>
-                            )}
+                            <NavRight
+                                move={show_button}
+                                button_ref={button_ref}
+                                mounted={mounted}
+                                has_scrolled={has_scrolled}
+                            >
+                                <LanguageSwitcher short_name="true" is_high_nav />
+                            </NavRight>
+                        )}
 
                         {is_canvas_menu_open ? (
                             <CloseMenu
@@ -894,13 +886,13 @@ export const NavPartners = ({ no_login_signup }) => {
                                 width="16px"
                             />
                         ) : (
-                                <HamburgerMenu
-                                    src={Hamburger}
-                                    alt="hamburger menu2"
-                                    onClick={openOffCanvasMenu}
-                                    width="16px"
-                                />
-                            )}
+                            <HamburgerMenu
+                                src={Hamburger}
+                                alt="hamburger menu2"
+                                onClick={openOffCanvasMenu}
+                                width="16px"
+                            />
+                        )}
 
                         <Mobile>
                             <Flex ai="center">
diff --git a/src/pages/markets/_hero.js b/src/pages/markets/_hero.js
index e5c30c810ea..003e41811b2 100644
--- a/src/pages/markets/_hero.js
+++ b/src/pages/markets/_hero.js
@@ -37,11 +37,9 @@ const StyledContainer = styled(Container)`
         padding: 12.5rem 0;
 
         h1 {
-            font-size: var(--text-size-xl);
             text-align: left;
         }
         h4 {
-            font-size: 3rem;
             text-align: left;
         }
     }
@@ -58,6 +56,20 @@ const Video = styled.video`
         transform: translate(-50%, -50%) scale(1.5);
     }
 `
+
+const MarketHeader = styled(Header)`
+    font-size: 64px;
+    @media ${device.tabletL} {
+        font-size: 40px;
+    }
+`
+
+const MarketSubHeader = styled(Header)`
+    font-size: 24px;
+    @media ${device.tabletL} {
+        font-size: 18px;
+    }
+`
 export const Hero = () => {
     useLazyVideo()
 
@@ -68,10 +80,10 @@ export const Hero = () => {
                 <source data-src={Globe2} type="video/webm" />
             </Video>
             <StyledContainer direction="column">
-                <Header as="h1" color="white" lh="1.15" align="center">
+                <MarketHeader as="h1" color="white" lh="1.15" align="center">
                     {localize('Markets to trade on Deriv')}
-                </Header>
-                <Header
+                </MarketHeader>
+                <MarketSubHeader
                     as="h4"
                     color="white"
                     lh="1.5"
@@ -83,7 +95,7 @@ export const Hero = () => {
                     {localize(
                         'Get the guidance you need to start trading on our platform. Browse through all the markets that we offer, learn about our trade types, and gain insight on how to make smarter trading decisions.',
                     )}
-                </Header>
+                </MarketSubHeader>
             </StyledContainer>
         </BackgroundWrapper>
     )
diff --git a/src/pages/markets/_other-markets.js b/src/pages/markets/_other-markets.js
index cab8897cd13..45ee4bb8500 100644
--- a/src/pages/markets/_other-markets.js
+++ b/src/pages/markets/_other-markets.js
@@ -210,9 +210,9 @@ const StyledHeader = styled(Header)`
         max-width: unset;
     }
     @media ${device.tabletL} {
-        max-width: 28.2rem;
+        max-width: 32rem;
         margin: 0 auto;
-        font-size: 4rem;
+        font-size: 24px;
         margin-bottom: 2rem;
     }
 `
diff --git a/src/pages/markets/_why-trade.js b/src/pages/markets/_why-trade.js
index 72423874357..3fadf113f80 100644
--- a/src/pages/markets/_why-trade.js
+++ b/src/pages/markets/_why-trade.js
@@ -26,7 +26,7 @@ const Item = styled(Flex)`
 `
 const ItemContainer = styled(Box)`
     display: flex;
-    margin: 3.2rem 0;
+    margin: 4rem 0;
     flex-direction: row;
     justify-content: space-between;
     max-width: 140.4rem;
@@ -58,6 +58,7 @@ const StyledSection = styled(SectionContainer)`
     }
 `
 const StyledButton = styled(LinkButton)`
+    border-radius: 4px;
     @media ${device.tabletL} {
         font-size: 1.75rem;
         padding: 1.25rem 4.75rem;
diff --git a/src/pages/markets/index.js b/src/pages/markets/index.js
index c7f7fa81bf4..056182b7f73 100644
--- a/src/pages/markets/index.js
+++ b/src/pages/markets/index.js
@@ -117,8 +117,7 @@ const Item = styled.div`
     z-index: 10;
 
     h4 {
-        color: var(--color-red);
-        opacity: ${(props) => (props.name === props.active_tab ? '1' : '0.32')};
+        color: var(--color-black);
         font-weight: ${(props) => (props.name === props.active_tab ? 'bold' : 'normal')};
     }
     @media ${device.tabletL} {
diff --git a/src/pages/markets/synthetic/_margin.js b/src/pages/markets/synthetic/_margin.js
index b96089e0901..458cc0111b5 100644
--- a/src/pages/markets/synthetic/_margin.js
+++ b/src/pages/markets/synthetic/_margin.js
@@ -79,6 +79,13 @@ const DetailsContainer = styled(Flex)`
         }
     }
 `
+
+const CrashText = styled(Text)`
+    width: 690px;
+    @media ${device.tabletL} {
+        width: 100%;
+    }
+`
 const VolatilityIndicesDetails = () => (
     <DetailsContainer>
         <Text>
@@ -102,12 +109,12 @@ const VolatilityIndicesDetails = () => (
 )
 const CrashBoomDetails = () => (
     <DetailsContainer>
-        <Text>
+        <CrashText>
             <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>
+        </CrashText>
     </DetailsContainer>
 )
 const StepIndicesDetails = () => (
diff --git a/src/pages/markets/synthetic/_multipliers.js b/src/pages/markets/synthetic/_multipliers.js
index 679bb8a14c1..e550bb77878 100644
--- a/src/pages/markets/synthetic/_multipliers.js
+++ b/src/pages/markets/synthetic/_multipliers.js
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import MarketsAccordion from '../_markets_accordion.js'
 import AvailablePlatforms from '../_available-platforms.js'
-import { ContinuousIndices } from '../sub-markets/_submarkets.js'
+import { ContinuousIndices, CrashBoom, StepIndices } from '../sub-markets/_submarkets.js'
 import { Text } from 'components/elements'
 import { SectionContainer, Flex, CssGrid, Show } from 'components/containers'
 import { localize, Localize } from 'components/localization'
@@ -74,6 +74,14 @@ const DetailsContainer = styled(Flex)`
         }
     }
 `
+
+const CrashText = styled(Text)`
+    width: 690px;
+    @media ${device.tabletL} {
+        width: 100%;
+    }
+`
+
 const ContinuousIndicesDetails = () => (
     <DetailsContainer>
         <Text>
@@ -95,6 +103,28 @@ const ContinuousIndicesDetails = () => (
         </Text>
     </DetailsContainer>
 )
+
+const CrashBoomDetails = () => (
+    <DetailsContainer>
+        <CrashText>
+            <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} />]}
+            />
+        </CrashText>
+    </DetailsContainer>
+)
+const StepIndicesDetails = () => (
+    <DetailsContainer>
+        <Text>
+            <Localize
+                translate_text="With these indices, there is an equal probability of up/down movement in a price series with a <0>fixed step size of 0.1</0>."
+                components={[<strong key={0} />]}
+            />
+        </Text>
+    </DetailsContainer>
+)
+
 const Multipliers = () => {
     return (
         <SectionContainer padding="4rem 0 8rem 0">
@@ -126,6 +156,43 @@ const Multipliers = () => {
                         )}
                         renderDetails={ContinuousIndicesDetails}
                     />
+                    <MarketsAccordion
+                        renderTitle={() => (
+                            <Row 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>
+                            </Row>
+                        )}
+                        renderDetails={CrashBoomDetails}
+                    />
+                    <MarketsAccordion
+                        renderTitle={() => (
+                            <Row jc="flex-start" ai="center">
+                                <Col max_width="13.2rem">
+                                    <title>Codestin Search App</title>
+                                </Col>
+                                <MarketsList>
+                                    <StepIndices />
+                                </MarketsList>
+                            </Row>
+                        )}
+                        renderDetails={StepIndicesDetails}
+                    />
                 </MarketsWrapper>
                 <Show.Eu>
                     <Text mt="1.6rem" color="grey-5" size="var(--text-size-xs)">
diff --git a/src/pages/terms-and-conditions/_terms-conditions-style.js b/src/pages/terms-and-conditions/_terms-conditions-style.js
index cc943dee35e..4a7b70d11d6 100644
--- a/src/pages/terms-and-conditions/_terms-conditions-style.js
+++ b/src/pages/terms-and-conditions/_terms-conditions-style.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import device from 'themes/device'
-import { CssGrid, GridContainer, CssGridColumn} from 'components/containers'
+import { CssGrid, GridContainer, CssGridColumn } from 'components/containers'
 import { Text } from 'components/elements'
 
 export const StyledGrid = styled(CssGrid)`
@@ -64,4 +64,4 @@ export const Cta = styled.div`
             margin-left: 1rem;
         }
     }
-`
\ No newline at end of file
+`
diff --git a/src/themes/variables.js b/src/themes/variables.js
index 7748cd42a43..edcc135185e 100644
--- a/src/themes/variables.js
+++ b/src/themes/variables.js
@@ -49,6 +49,7 @@ const Variables = css`
         --color-grey-29: #edeeef;
         --color-grey-30: #f5f7fa;
         --color-grey-31: #f8fafc;
+        --color-grey-32: #8e9190;
         --color-green: #85acb0;
         --color-blue: #4c76be;
         --color-blue-2: #365899;
@@ -60,6 +61,7 @@ const Variables = css`
         --color-orange: #ff6544;
         --color-green-1: #bccdce;
         --color-green-2: #e2ebec;
+        --color-white: white;
 
         /* sizes */
         --text-size-xxs: 1.2rem;