diff --git a/packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx b/packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx
index f6d3244133a7..06e1f385f954 100644
--- a/packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx
+++ b/packages/trader/src/App/Components/Layout/Header/toggle-account-management.jsx
@@ -7,6 +7,7 @@ import MenuAccordion from 'App/Components/Elements/MenuAccordion';
 import Lazy          from 'App/Containers/Lazy';
 import UILoader      from '../../Elements/ui-loader.jsx';
 import Icon          from 'Assets/icon.jsx';
+import { connect }   from 'Stores/connect';
 
 // Profile
 const PersonalDetails     = () => import('App/Containers/AccountManagementModal/Profile/personal-details.jsx');
@@ -18,13 +19,13 @@ const ProofOfIdentity = () => import('App/Containers/AccountManagementModal/Veri
 
 // Security and Safety
 const AccountLimits           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx');
-const ApiToken                = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/api-token.jsx');
-const ConnectedApps           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/connected-apps.jsx');
-const DerivPassword           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/DerivPassword');
-const LoginHistory            = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/login-history.jsx');
-const SelfExclusion           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/self-exclusion.jsx');
-const TwoFactorAuthentication = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/two-factor-authentication.jsx');
-const Vpn                     = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/vpn.jsx');
+// const ApiToken                = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/api-token.jsx');
+// const ConnectedApps           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/connected-apps.jsx');
+const DerivPassword           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/DerivPassword/');
+// const LoginHistory            = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/login-history.jsx');
+// const SelfExclusion           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/self-exclusion.jsx');
+// const TwoFactorAuthentication = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/two-factor-authentication.jsx');
+// const Vpn                     = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/vpn.jsx');
 
 const modal_content = [
     {
@@ -100,18 +101,18 @@ const modal_content = [
                     />
                 )
             },
-            {     
-                label: localize('Self-exclusion'),
-                // eslint-disable-next-line react/display-name
-                value: () => (
-                    <Lazy
-                        ctor={SelfExclusion}
-                        should_load={true}
-                        has_progress={true}
-                    />
-                )
+            // {     
+            //     label: localize('Self-exclusion'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={SelfExclusion}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
 
-            },
+            // },
             {     
                 label: localize('Account limits'),
                 // eslint-disable-next-line react/display-name
@@ -124,79 +125,102 @@ const modal_content = [
                 )
 
             },
-            {     
-                label: localize('Login history'),
-                // eslint-disable-next-line react/display-name
-                value: () => (
-                    <Lazy
-                        ctor={LoginHistory}
-                        should_load={true}
-                        has_progress={true}
-                    />
-                )
+            // {     
+            //     label: localize('Login history'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={LoginHistory}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
 
-            },
-            {     
-                label: localize('API token'),
-                // eslint-disable-next-line react/display-name
-                value: () => (
-                    <Lazy
-                        ctor={ApiToken}
-                        should_load={true}
-                        has_progress={true}
-                    />
-                )
+            // },
+            // {     
+            //     label: localize('API token'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={ApiToken}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
 
-            },
-            {     
-                label: localize('Connected apps'),
-                // eslint-disable-next-line react/display-name
-                value: () => (
-                    <Lazy
-                        ctor={ConnectedApps}
-                        should_load={true}
-                        has_progress={true}
-                    />
-                )
+            // },
+            // {     
+            //     label: localize('Connected apps'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={ConnectedApps}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
 
-            },
-            {     
-                label: localize('Two-factor authentication'),
-                // eslint-disable-next-line react/display-name
-                value: () => (
-                    <Lazy
-                        ctor={TwoFactorAuthentication}
-                        should_load={true}
-                        has_progress={true}
-                    />
-                )
+            // },
+            // {     
+            //     label: localize('Two-factor authentication'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={TwoFactorAuthentication}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
 
-            },
-            {     
-                label: localize('VPN'),
-                // eslint-disable-next-line react/display-name
-                value: () => (
-                    <Lazy
-                        ctor={Vpn}
-                        should_load={true}
-                        has_progress={true}
-                    />
-                )
+            // },
+            // {     
+            //     label: localize('VPN'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={Vpn}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
 
-            }
+            // }
         ],
     }
 ];
 
+const Header = ({ text, currency }) => (
+    <>
+        {currency ?
+            <div className='account-management-modal-header'>
+                <h1>{text}</h1>
+                <div className='account-management-modal-header__icon-wrapper'>
+                    <span>For your {currency} account</span>
+                    <Icon icon='IconAccountsCurrency' type={currency.toLowerCase()} />
+                </div>
+            </div>
+            : <h1>{text}</h1>
+        }
+    </>)
+
+const makeHeader = (header_text, currency) => {
+    const has_currency = header_text === 'Account limits';
+
+    if (has_currency) return <Header text={header_text} currency={currency} />
+
+    return <Header text={header_text} />
+}
+
 class ToggleAccountManagement extends React.PureComponent {
     state = {
         header: modal_content[0].sub_tab_list[0].label,
     };
 
-    onChangeHeader = (header) => this.setState({ header });
+    onChangeHeader = header => this.setState({ header });
 
     render() {
-        const { disableApp, enableApp, is_open } = this.props;
+        const { disableApp, enableApp, is_open, currency } = this.props;
+        const HeaderComponent = makeHeader(this.state.header, currency);
 
         return (
             <React.Suspense fallback={<UILoader />}>
@@ -207,12 +231,13 @@ class ToggleAccountManagement extends React.PureComponent {
                     className='account-management'
                     disableApp={disableApp}
                     enableApp={enableApp}
-                    header={this.state.header}
+                    header={HeaderComponent}
                     menu_type='accordion'
                     modal_content={modal_content}
                     is_open={is_open}
                     title={localize('Settings')}
                     toggleModal={this.props.toggleModal}
+                    id='account-management-modal'
                 >
                     <MenuAccordion
                         alignment='center'
@@ -233,5 +258,8 @@ ToggleAccountManagement.propTypes = {
     is_open    : PropTypes.bool,
     toggleModal: PropTypes.func,
 };
-
-export default ToggleAccountManagement;
+export default connect(
+    ({ client }) => ({
+        currency         : client.currency,
+    })
+)(ToggleAccountManagement);
diff --git a/packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx b/packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx
index 1e15caa40dc5..63c05e34ef01 100644
--- a/packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx
+++ b/packages/trader/src/App/Containers/AccountManagementModal/Components/layout-components.jsx
@@ -1,17 +1,33 @@
-import React          from 'react';
-import { Scrollbars } from 'tt-react-custom-scrollbars';
+import classNames       from 'classnames';
+import React            from 'react';
+import { Scrollbars }   from 'tt-react-custom-scrollbars';
 
 export const FormFooter = ({ children }) => (
     <div className='account-management-form-footer'>{children}</div>
 );
 
 export const FormBody = ({ children, scroll_offset }) => (
-    <Scrollbars
-        autoHide
-        style={{
-            height: scroll_offset ? `calc(100% - ${scroll_offset})` : '100%',
-        }}
-    >
-        <div className='account-management-form-body'>{children}</div>
-    </Scrollbars>
+        <Scrollbars
+            autoHide
+            style={{
+                height: scroll_offset ? `calc(100% - ${scroll_offset})` : '100%',
+            }}
+        >
+            <div className='account-management-form-body'>{children}</div>
+        </Scrollbars>
+    );
+
+export const FormSubHeader = ({ text }) => (
+        <h2 className='account-management-form-header'>{text}</h2>
+);
+
+export const TextContainer = ({ children }) => <div className='account-management-text-container'>{children}</div>
+
+export const Text = ({ children, size, color, className }) => (
+        <p
+                className={classNames('account-management-text', className, {
+                'account-management-text--xsmall': size === 'xsmall',
+                'account-management-text--small': size === 'small',
+                'account-management-text--grey': color === 'grey',
+        })}>{children}</p>
 );
diff --git a/packages/trader/src/App/Containers/AccountManagementModal/Profile/personal-details.jsx b/packages/trader/src/App/Containers/AccountManagementModal/Profile/personal-details.jsx
index 1536a264c571..f6453400f7d9 100644
--- a/packages/trader/src/App/Containers/AccountManagementModal/Profile/personal-details.jsx
+++ b/packages/trader/src/App/Containers/AccountManagementModal/Profile/personal-details.jsx
@@ -2,15 +2,12 @@
 import React            from 'react';
 import { WS }           from 'Services';
 import { connect }      from 'Stores/connect';
-import {
-    Autocomplete,
-    Button,
-    Checkbox,
-    Input,
-    Form,
-}                       from 'deriv-components';
-import DatePicker       from 'App/Components/Form/DatePicker';
-import { formatDate } from 'Utils/Date';
+import { Button }       from 'deriv-components';
+// import DatePicker       from 'App/Components/Form/DatePicker';
+import { Formik }       from 'formik';
+import { formatDate }   from 'Utils/Date';
+import Loading          from '../../../../templates/app/components/loading.jsx';
+import { FormFooter, FormSubHeader } from '../Components/layout-components.jsx';
 
 const makeSettingsRequest = (settings, residence_list) => {
     let citizen = residence_list.find(location => location.text === settings.tax_residence_text).value
@@ -25,19 +22,13 @@ const makeSettingsRequest = (settings, residence_list) => {
 
 // TODO: localize
 // TODO: make dynamic
-const InputGroup = ({ children }) => <div className='dt-input-group'>{children}</div>
-const DatepickerInput = ({ children }) => <div className='dt-datepicker-input'>{children}</div>
+const InputGroup = ({ children }) => <div>{children}</div>
+const DatepickerInput = ({ children }) => <div>{children}</div>
 const account_opening_reasons = ['Speculative', 'Income Earning', 'Hedging'];
 
 class PersonalDetailsForm extends React.Component {
-    state = {
-        date_of_birth: '',
-        email: '',
-        first_name: '',
-        last_name: '',
-        citizen: '',
-        is_loading: true,
-    }
+    state = { is_loading: true }
+
     updateSettings = settings => {
         const request = makeSettingsRequest(settings, this.props.residence_list);
         WS.setSettings(request).then(() => {
@@ -47,129 +38,121 @@ class PersonalDetailsForm extends React.Component {
     }
 
     render() {
-        return (<div>div</div>)
-        // const {
-        //     date_of_birth,
-        //     first_name,
-        //     last_name,
-        //     citizen,
-        //     email,
-        //     tax_identification_number,
-        //     tax_residence,
-        //     email_consent,
-        //     is_loading } = this.state
+        const {
+            date_of_birth,
+            first_name,
+            last_name,
+            citizen,
+            email,
+            tax_identification_number,
+            tax_residence,
+            email_consent,
+            is_loading } = this.state;
+
+        if (is_loading || !this.props.residence_list.length) return <Loading />;
+
+        let citizen_text = '';
+        let tax_residence_text = '';
+        if (this.props.residence_list.length) {
+            // console.log('citizen', citizen, this.props.residence_list.find(location => location.value === citizen));
+            // console.log('residence_list', this.props.residence_list);
+            // citizen_text = citizen ? this.props.residence_list.find(location => location.value === citizen).text : '';
+            // tax_residence_text = this.props.residence_list.find(location => location.value === tax_residence).text;
+        }
+        const date_of_birth_human = formatDate(date_of_birth)
 
-        // let citizen_text = '';
-        // let tax_residence_text = '';
-        // if (this.props.residence_list.length && !is_loading) {
-        //     citizen_text = this.props.residence_list.find(location => location.value === citizen).text
-        //     tax_residence_text = this.props.residence_list.find(location => location.value === tax_residence).text
-        // }
-        // const date_of_birth_human = formatDate(date_of_birth)
-        // return (
-        //     <>
-        //         {(!is_loading && this.props.residence_list.length) &&
-        //             <Form 
-        //                 initialValues={{ first_name, last_name, email, tax_identification_number, email_consent, citizen_text, tax_residence_text, date_of_birth_human }}
-        //                 onSubmit={ this.updateSettings }
-        //             >
-        //             {
-        //                     ({ values, handleChange }) => {
-        //                         return (
-        //                     <>
-        //                         <h2 style={{fontSize: '14px', fontWeight: 'bold', marginBottom: '20px'}}>Details</h2>
-        //                         <InputGroup>
-        //                             <Input
-        //                                 data-lpignore="true"
-        //                                 type='text'
-        //                                 name='first_name'
-        //                                 label='First name'
-        //                                 required
-        //                             />
-        //                             <Input
-        //                                 data-lpignore="true"
-        //                                 type='text'
-        //                                 name='last_name'
-        //                                 label='Last name'
-        //                                 required
-        //                             />
-        //                         </InputGroup>
-        //                         <DatepickerInput>
-        //                             <DatePicker 
-        //                                 name="date_of_birth_human"
-        //                                 value={values.date_of_birth_human}
-        //                                 min_date="1919-01-01"
-        //                                 alignment="bottom"
-        //                                 onChange={handleChange}
-        //                             />
-        //                         </DatepickerInput>
-        //                         <Autocomplete
-        //                             data-lpignore="true"
-        //                             type='text'
-        //                             name='citizen_text'
-        //                             label='Citizenship'
-        //                             required
-        //                             list_items={ this.props.residence_list }
-        //                         />
-        //                         <Input
-        //                             data-lpignore="true"
-        //                             type='text'
-        //                             name='email'
-        //                             label='Email'
-        //                             required
-        //                             disabled
-        //                         />
-        //                         <h2 style={{fontSize: '16px', fontWeight: 'bold', margin: '20px 0'}}>Tax information</h2>
-        //                         <Autocomplete
-        //                             data-lpignore="true"
-        //                             type='text'
-        //                             name='tax_residence_text'
-        //                             label='Tax residence'
-        //                             required
-        //                             list_items={ this.props.residence_list }
-        //                         />
-        //                         <Input
-        //                             data-lpignore="true"
-        //                             type='text'
-        //                             name='tax_identification_number'
-        //                             label='Tax identification number'
-        //                             required
-        //                         />
-        //                         <h2 style={{fontSize: '16px', fontWeight: 'bold', margin: '20px 0'}}>Email preference</h2>
-        //                         <Checkbox value={values.email_consent} onClick={handleChange} name='email_consent' label='Get updates about Deriv products, services and events.'/>
-        //                         <Button type='submit'>Save</Button>
-        //                     </>
-        //             )}}
-        //             </Form>
-        //         }
-        //     </>
-        // );
+        return (
+            <Formik
+                initialValues={{ first_name, last_name, email, tax_identification_number, email_consent, citizen_text, tax_residence_text, date_of_birth_human }}
+                onSubmit={ this.updateSettings }
+            >
+                {({
+              values,
+              errors,
+              touched,
+              handleChange,
+              handleBlur,
+              handleSubmit,
+              isSubmitting,
+              validateField,
+            }) => (
+                <form>
+                    <FormSubHeader text="Personal Details" />
+                    {/* <InputGroup>
+                        <Input
+                            data-lpignore="true"
+                            type='text'
+                            name='first_name'
+                            label='First name'
+                            required
+                        />
+                        <Input
+                            data-lpignore="true"
+                            type='text'
+                            name='last_name'
+                            label='Last name'
+                            required
+                        />
+                    </InputGroup>
+                    <DatepickerInput>
+                        <DatePicker 
+                            name="date_of_birth_human"
+                            value={values.date_of_birth_human}
+                            min_date="1919-01-01"
+                            alignment="bottom"
+                            onChange={handleChange}
+                        />
+                    </DatepickerInput>
+                    <Autocomplete
+                        data-lpignore="true"
+                        type='text'
+                        name='citizen_text'
+                        label='Citizenship'
+                        required
+                        list_items={ this.props.residence_list }
+                    />
+                    <Input
+                        data-lpignore="true"
+                        type='text'
+                        name='email'
+                        label='Email'
+                        required
+                        disabled
+                    />
+                    <h2 style={{fontSize: '16px', fontWeight: 'bold', margin: '20px 0'}}>Tax information</h2>
+                    <Autocomplete
+                        data-lpignore="true"
+                        type='text'
+                        name='tax_residence_text'
+                        label='Tax residence'
+                        required
+                        list_items={ this.props.residence_list }
+                    />
+                    <Input
+                        data-lpignore="true"
+                        type='text'
+                        name='tax_identification_number'
+                        label='Tax identification number'
+                        required
+                    />
+                    <h2 style={{fontSize: '16px', fontWeight: 'bold', margin: '20px 0'}}>Email preference</h2>
+                    <Checkbox value={values.email_consent} onClick={handleChange} name='email_consent' label='Get updates about Deriv products, services and events.'/> */}
+                    <FormFooter>
+                        <button type="submit" disabled={isSubmitting}>
+                            Submit
+                        </button>
+                    </FormFooter>
+                </form>
+            )}
+            </Formik>
+        )
     }
 
     componentDidMount() {
         this.props.fetchResidenceList();
         WS.getSettings().then((data) => {
-            const {
-                date_of_birth,
-                first_name,
-                last_name,
-                citizen,
-                email,
-                tax_residence,
-                tax_identification_number,
-                email_consent } = data.get_settings;
             console.log(data.get_settings);
-            this.setState({
-                date_of_birth,
-                first_name,
-                last_name,
-                citizen,
-                email,
-                tax_identification_number,
-                tax_residence,
-                email_consent,
-                is_loading: false
-            })
+            this.setState({ ...data.get_settings, is_loading: false });
         });
     }
 }
diff --git a/packages/trader/src/App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx b/packages/trader/src/App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx
index 89e9f18f32ce..8152a58079c1 100644
--- a/packages/trader/src/App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx
+++ b/packages/trader/src/App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx
@@ -1,10 +1,199 @@
 // import PropTypes        from 'prop-types';
+import classNames       from 'classnames';
 import React            from 'react';
+import { Scrollbars }   from 'tt-react-custom-scrollbars';
+import { localize }     from 'App/i18n';
+import Localize         from 'App/Components/Elements/localize.jsx';
+import { WS }           from 'Services';
+import Loading          from '../../../../templates/app/components/loading.jsx';
+import { addCommaToNumber } from '../../../Components/Elements/PositionsDrawer/helpers/positions-helper';
+import { Popover }     from 'deriv-components';
+import { TextContainer, Text } from '../Components/layout-components';
+
+const display_decimals = 2;
+const makeTurnoverLimitRow = arr => (
+    <>
+        { arr &&
+            arr.map(item => 
+                <Row key={item.name}>
+                    <Td>{item.name}</Td>
+                    <Td>{addCommaToNumber(item.turnover_limit, display_decimals)}</Td>
+                </Row>    
+            )
+        }
+    </>
+);
+
+const TableHeader = ({ children, is_flex }) => (
+    <th
+        className={classNames({'account-management-flex-wrapper': is_flex})}
+    >{children}</th>
+);
+
+const Row = ({ children }) => (
+    <tr style={{ display: 'flex', justifyContent: 'space-between' }}>
+        {children}
+    </tr>
+);
+
+const Td = ({ children, is_flex }) => (
+    <td
+        className={classNames('account-management-text', {
+            'account-management-flex-wrapper': is_flex,
+    })}>{children}</td>
+);
 
 class AccountLimits extends React.Component {
+    state = { is_loading: true }
+
+    componentDidMount() {
+        WS.getAccountLimits().then((data) => {
+            this.setState({ ...data.get_limits, is_loading: false });
+        });
+    }
+
     render() {
+        const { 
+            is_loading,
+            open_positions,
+            account_balance,
+            payout,
+            market_specific,
+            num_of_days_limit,
+            remainder,
+            withdrawal_since_inception_monetary } = this.state;
+
+        if (is_loading) return <Loading is_fullscreen={false} className='initial-loader--accounts-modal' />
+
+        const { commodities, forex, indices, volidx } = market_specific;
+
         return (
-            <h1>Account Limits</h1>
+            <section className='account-limit-container'>
+                <Scrollbars>
+                    <Text className='account-limit-container__main-text'>
+                        <Localize
+                            i18n_default_text='These are default limits that we apply to your accounts. To learn more about trading limits and how they apply, please go to the <0>Help Centre</0>.'
+                            components={[
+                                <a key={0} className='link link--orange' rel='noopener noreferrer' target='_blank' href='https://www.deriv.com/help-centre/' />,
+                            ]}
+                        />
+                    </Text>
+                    <table className='account-management-table'>
+                        <thead>
+                            <Row>
+                                <TableHeader>{localize('Trading limits - item')}</TableHeader>
+                                <TableHeader>{localize('Limit')}</TableHeader>
+                            </Row>
+                            <tr className='account-management-table__divider'>
+                                <th />
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <Row>
+                                <Td is_flex>
+                                    {localize('*Maximum number of open positions')}
+                                    <Popover
+                                        alignment='top'
+                                        classNameTargetIcon='account-limit-popover'
+                                        classNameTarget='account-limit-popover-target'
+                                        icon='info'
+                                        message={localize('Represents the maximum number of outstanding contracts in your portfolio. Each line in your portfolio counts for one open position. Once the maximum is reached, you will not be able to open new positions without closing an existing position first.')}
+                                        portal_container='modal_root'
+                                    />
+                                </Td>
+                                <Td>{ addCommaToNumber(open_positions, 0) }</Td>
+                            </Row>
+                            <Row>
+                                <Td is_flex>
+                                    {localize('*Maximum account cash balance')}
+                                    <Popover
+                                        alignment='top'
+                                        classNameTargetIcon='account-limit-popover'
+                                        classNameTarget='account-limit-popover-target'
+                                        icon='info'
+                                        message={localize('Represents the maximum amount of cash that you may hold in your account.  If the maximum is reached, you will be asked to withdraw funds.')}
+                                        portal_container='modal_root'
+                                    />
+                                </Td>
+                                <Td>{ addCommaToNumber(account_balance, display_decimals) }</Td>
+                            </Row>
+                            <Row>
+                                <Td is_flex>
+                                    {localize('Maximum aggregate payouts on open positions')}
+                                    <Popover
+                                        alignment='top'
+                                        classNameTargetIcon='account-limit-popover'
+                                        classNameTarget='account-limit-popover-target'
+                                        icon='info'
+                                        message={localize('Presents the maximum aggregate payouts on outstanding contracts in your portfolio. If the maximum is attained, you may not purchase additional contracts without first closing out existing positions.')}
+                                        portal_container='modal_root'
+                                    />
+                                </Td>
+                                <Td>{ addCommaToNumber(payout, display_decimals) }</Td>
+                            </Row>
+                        </tbody>
+                    </table>
+                    <TextContainer>
+                        <Text size='xsmall'>{localize('*Any limits in your Self-exclusion settings will override these default limits.')}</Text>
+                    </TextContainer>
+                    <table className='account-management-table'>
+                        <thead>
+                            <Row>
+                                <TableHeader is_flex>
+                                    {localize('Trading limits - Maximum daily turnover')}
+                                    <Popover
+                                        alignment='top'
+                                        classNameTargetIcon='account-limit-popover'
+                                        classNameTarget='account-limit-popover-target'
+                                        icon='info'
+                                        message={localize('Presents the maximum aggregate payouts on outstanding contracts in your portfolio. If the maximum is attained, you may not purchase additional contracts without first closing out existing positions.')}
+                                        margin={0}
+                                        portal_container='modal_root'
+                                    />
+                                </TableHeader>
+                                <TableHeader>{localize('Limit')}</TableHeader>
+                            </Row>
+                            <tr className='account-management-table__divider'>
+                                <th />
+                            </tr>
+                        </thead>
+                        <tbody>
+                            { makeTurnoverLimitRow(commodities) }
+                            { makeTurnoverLimitRow(forex) }
+                            { makeTurnoverLimitRow(indices) }
+                            { makeTurnoverLimitRow(volidx) }
+                        </tbody>
+                    </table>
+                    <table className='account-management-table account-management-table--last'>
+                        <thead>
+                            <Row>
+                                <TableHeader>{localize('Withdrawal limits')}</TableHeader>
+                                <TableHeader>{localize('Limit')}</TableHeader>
+                            </Row>
+                            <tr  className='account-management-table__divider'>
+                                <th />
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <Row>
+                                <Td>{localize('Total withdrawal allowed')}</Td>
+                                <Td>{addCommaToNumber(num_of_days_limit, display_decimals)}</Td>
+                            </Row>
+                            <Row>
+                                <Td>{localize('Total withdrawn')}</Td>
+                                <Td>{addCommaToNumber(withdrawal_since_inception_monetary, display_decimals)}</Td>
+                            </Row>
+                            <Row>
+                                <Td>{localize('Maximum withdrawal remaining')}</Td>
+                                <Td>{addCommaToNumber(remainder, display_decimals)}</Td>
+                            </Row>
+                        </tbody>
+                    </table>
+                    <TextContainer>
+                        <Text size='small' color='grey'>{localize('Stated limits are subject to change without prior notice.')}</Text>
+                    </TextContainer>
+                </Scrollbars>
+            </section>
         );
     }
 }
diff --git a/packages/trader/src/Modules/Account/Containers/account.jsx b/packages/trader/src/Modules/Account/Containers/account.jsx
index d6654214f817..fa5b5500cbe4 100644
--- a/packages/trader/src/Modules/Account/Containers/account.jsx
+++ b/packages/trader/src/Modules/Account/Containers/account.jsx
@@ -1,14 +1,200 @@
 import PropTypes         from 'prop-types';
 import React             from 'react';
+import Lazy          from 'App/Containers/Lazy';
 import { withRouter }    from 'react-router-dom';
 import { localize }      from 'App/i18n';
 import { FadeWrapper }   from 'App/Components/Animations';
-import VerticalTab       from 'App/Components/Elements/VerticalTabs/vertical-tab.jsx';
+// import VerticalTab       from 'App/Components/Elements/VerticalTabs/vertical-tab.jsx';
+import MenuAccordion from 'App/Components/Elements/MenuAccordion';
 import AppRoutes         from 'Constants/routes';
 import { connect }       from 'Stores/connect';
-import 'Sass/app/modules/reports.scss';
+import 'Sass/app/modules/account.scss';
+
+// Profile
+const PersonalDetails     = () => import('App/Containers/AccountManagementModal/Profile/personal-details.jsx');
+const FinancialAssessment = () => import('App/Containers/AccountManagementModal/Profile/financial-assessment.jsx');
+
+// Verification
+const ProofOfAddress  = () => import('App/Containers/AccountManagementModal/Verification/proof-of-address.jsx');
+const ProofOfIdentity = () => import('App/Containers/AccountManagementModal/Verification/proof-of-identity.jsx');
+
+// Security and Safety
+const AccountLimits           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/account-limits.jsx');
+// const ApiToken                = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/api-token.jsx');
+// const ConnectedApps           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/connected-apps.jsx');
+const DerivPassword           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/DerivPassword/');
+// const LoginHistory            = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/login-history.jsx');
+// const SelfExclusion           = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/self-exclusion.jsx');
+// const TwoFactorAuthentication = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/two-factor-authentication.jsx');
+// const Vpn                     = () => import('App/Containers/AccountManagementModal/SecurityAndSafety/vpn.jsx');
+
+const modal_content = [
+    {
+        icon        : 'IconUser',
+        label       : localize('Profile'),
+        sub_tab_list: [
+            {
+                label: localize('Personal details'),
+                // eslint-disable-next-line react/display-name
+                value: () => (
+                    <Lazy
+                        ctor={PersonalDetails}
+                        should_load={true}
+                        has_progress={true}
+                    />
+                )
+            },
+            {     
+                label: localize('Financial assessment'),
+                // eslint-disable-next-line react/display-name
+                value: () => (
+                    <Lazy
+                        ctor={FinancialAssessment}
+                        should_load={true}
+                        has_progress={true}
+                    />
+                )
+
+            }
+        ],
+    },
+    {
+        icon        : 'IconVerification',
+        label       : localize('Verification'),
+        sub_tab_list: [
+            {
+                label: localize('Proof of identity'),
+                // eslint-disable-next-line react/display-name
+                value: () => (
+                    <Lazy
+                        ctor={ProofOfIdentity}
+                        should_load={true}
+                        has_progress={true}
+                    />
+                )
+            },
+            {     
+                label: localize('Proof of address'),
+                // eslint-disable-next-line react/display-name
+                value: () => (
+                    <Lazy
+                        ctor={ProofOfAddress}
+                        should_load={true}
+                        has_progress={true}
+                    />
+                )
+
+            }
+        ],
+    },
+    {
+        icon        : 'IconSecurity',
+        label       : localize('Security and safety'),
+        sub_tab_list: [
+            {
+                label: localize('Deriv password'),
+                // eslint-disable-next-line react/display-name
+                value: () => (
+                    <Lazy
+                        ctor={DerivPassword}
+                        should_load={true}
+                        has_progress={true}
+                    />
+                )
+            },
+            // {     
+            //     label: localize('Self-exclusion'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={SelfExclusion}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
+
+            // },
+            {     
+                label: localize('Account limits'),
+                // eslint-disable-next-line react/display-name
+                value: () => (
+                    <Lazy
+                        ctor={AccountLimits}
+                        should_load={true}
+                        has_progress={true}
+                    />
+                )
+
+            },
+            // {     
+            //     label: localize('Login history'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={LoginHistory}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
+
+            // },
+            // {     
+            //     label: localize('API token'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={ApiToken}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
+
+            // },
+            // {     
+            //     label: localize('Connected apps'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={ConnectedApps}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
+
+            // },
+            // {     
+            //     label: localize('Two-factor authentication'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={TwoFactorAuthentication}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
+
+            // },
+            // {     
+            //     label: localize('VPN'),
+            //     // eslint-disable-next-line react/display-name
+            //     value: () => (
+            //         <Lazy
+            //             ctor={Vpn}
+            //             should_load={true}
+            //             has_progress={true}
+            //         />
+            //     )
+
+            // }
+        ],
+    }
+];
 
 class Account extends React.Component {
+    state = {
+        header: modal_content[0].sub_tab_list[0].label,
+    };
+
     setWrapperRef = (node) => {
         this.wrapper_ref = node;
     };
@@ -31,6 +217,8 @@ class Account extends React.Component {
         document.removeEventListener('mousedown', this.handleClickOutside);
     }
 
+    onChangeHeader = header => this.setState({ header });
+
     render () {
         const menu_options = () => {
             const options = [];
@@ -65,7 +253,7 @@ class Account extends React.Component {
                 keyname='account-page-wrapper'
             >
                 <div className='account' ref={this.setWrapperRef}>
-                    <VerticalTab
+                    {/* <VerticalTab
                         header_title={localize('Settings')}
                         action_bar={action_bar_items}
                         action_bar_classname='account__inset_header'
@@ -76,6 +264,12 @@ class Account extends React.Component {
                         is_routed={true}
                         is_full_width={true}
                         list={menu_options()}
+                    /> */}
+                    <MenuAccordion
+                        alignment='center'
+                        classNameHeader='modal__tab-header'
+                        list={modal_content}
+                        onChangeHeader={this.onChangeHeader}
                     />
                 </div>
             </FadeWrapper>
diff --git a/packages/trader/src/Modules/Account/Containers/personal-details.jsx b/packages/trader/src/Modules/Account/Containers/personal-details.jsx
index 1536a264c571..fca7947e2ae4 100644
--- a/packages/trader/src/Modules/Account/Containers/personal-details.jsx
+++ b/packages/trader/src/Modules/Account/Containers/personal-details.jsx
@@ -2,15 +2,12 @@
 import React            from 'react';
 import { WS }           from 'Services';
 import { connect }      from 'Stores/connect';
-import {
-    Autocomplete,
-    Button,
-    Checkbox,
-    Input,
-    Form,
-}                       from 'deriv-components';
-import DatePicker       from 'App/Components/Form/DatePicker';
-import { formatDate } from 'Utils/Date';
+import { Button }       from 'deriv-components';
+// import DatePicker       from 'App/Components/Form/DatePicker';
+import { Formik }       from 'formik';
+import { formatDate }   from 'Utils/Date';
+import Loading          from '../../../templates/app/components/loading.jsx';
+import { FormFooter, FormSubHeader } from '../Components/layout-components.jsx';
 
 const makeSettingsRequest = (settings, residence_list) => {
     let citizen = residence_list.find(location => location.text === settings.tax_residence_text).value
@@ -25,19 +22,13 @@ const makeSettingsRequest = (settings, residence_list) => {
 
 // TODO: localize
 // TODO: make dynamic
-const InputGroup = ({ children }) => <div className='dt-input-group'>{children}</div>
-const DatepickerInput = ({ children }) => <div className='dt-datepicker-input'>{children}</div>
+const InputGroup = ({ children }) => <div>{children}</div>
+const DatepickerInput = ({ children }) => <div>{children}</div>
 const account_opening_reasons = ['Speculative', 'Income Earning', 'Hedging'];
 
 class PersonalDetailsForm extends React.Component {
-    state = {
-        date_of_birth: '',
-        email: '',
-        first_name: '',
-        last_name: '',
-        citizen: '',
-        is_loading: true,
-    }
+    state = { is_loading: true }
+
     updateSettings = settings => {
         const request = makeSettingsRequest(settings, this.props.residence_list);
         WS.setSettings(request).then(() => {
@@ -47,129 +38,121 @@ class PersonalDetailsForm extends React.Component {
     }
 
     render() {
-        return (<div>div</div>)
-        // const {
-        //     date_of_birth,
-        //     first_name,
-        //     last_name,
-        //     citizen,
-        //     email,
-        //     tax_identification_number,
-        //     tax_residence,
-        //     email_consent,
-        //     is_loading } = this.state
+        const {
+            date_of_birth,
+            first_name,
+            last_name,
+            citizen,
+            email,
+            tax_identification_number,
+            tax_residence,
+            email_consent,
+            is_loading } = this.state;
+
+        if (is_loading || !this.props.residence_list.length) return <Loading />;
+
+        let citizen_text = '';
+        let tax_residence_text = '';
+        if (this.props.residence_list.length) {
+            // console.log('citizen', citizen, this.props.residence_list.find(location => location.value === citizen));
+            // console.log('residence_list', this.props.residence_list);
+            // citizen_text = citizen ? this.props.residence_list.find(location => location.value === citizen).text : '';
+            // tax_residence_text = this.props.residence_list.find(location => location.value === tax_residence).text;
+        }
+        const date_of_birth_human = formatDate(date_of_birth)
 
-        // let citizen_text = '';
-        // let tax_residence_text = '';
-        // if (this.props.residence_list.length && !is_loading) {
-        //     citizen_text = this.props.residence_list.find(location => location.value === citizen).text
-        //     tax_residence_text = this.props.residence_list.find(location => location.value === tax_residence).text
-        // }
-        // const date_of_birth_human = formatDate(date_of_birth)
-        // return (
-        //     <>
-        //         {(!is_loading && this.props.residence_list.length) &&
-        //             <Form 
-        //                 initialValues={{ first_name, last_name, email, tax_identification_number, email_consent, citizen_text, tax_residence_text, date_of_birth_human }}
-        //                 onSubmit={ this.updateSettings }
-        //             >
-        //             {
-        //                     ({ values, handleChange }) => {
-        //                         return (
-        //                     <>
-        //                         <h2 style={{fontSize: '14px', fontWeight: 'bold', marginBottom: '20px'}}>Details</h2>
-        //                         <InputGroup>
-        //                             <Input
-        //                                 data-lpignore="true"
-        //                                 type='text'
-        //                                 name='first_name'
-        //                                 label='First name'
-        //                                 required
-        //                             />
-        //                             <Input
-        //                                 data-lpignore="true"
-        //                                 type='text'
-        //                                 name='last_name'
-        //                                 label='Last name'
-        //                                 required
-        //                             />
-        //                         </InputGroup>
-        //                         <DatepickerInput>
-        //                             <DatePicker 
-        //                                 name="date_of_birth_human"
-        //                                 value={values.date_of_birth_human}
-        //                                 min_date="1919-01-01"
-        //                                 alignment="bottom"
-        //                                 onChange={handleChange}
-        //                             />
-        //                         </DatepickerInput>
-        //                         <Autocomplete
-        //                             data-lpignore="true"
-        //                             type='text'
-        //                             name='citizen_text'
-        //                             label='Citizenship'
-        //                             required
-        //                             list_items={ this.props.residence_list }
-        //                         />
-        //                         <Input
-        //                             data-lpignore="true"
-        //                             type='text'
-        //                             name='email'
-        //                             label='Email'
-        //                             required
-        //                             disabled
-        //                         />
-        //                         <h2 style={{fontSize: '16px', fontWeight: 'bold', margin: '20px 0'}}>Tax information</h2>
-        //                         <Autocomplete
-        //                             data-lpignore="true"
-        //                             type='text'
-        //                             name='tax_residence_text'
-        //                             label='Tax residence'
-        //                             required
-        //                             list_items={ this.props.residence_list }
-        //                         />
-        //                         <Input
-        //                             data-lpignore="true"
-        //                             type='text'
-        //                             name='tax_identification_number'
-        //                             label='Tax identification number'
-        //                             required
-        //                         />
-        //                         <h2 style={{fontSize: '16px', fontWeight: 'bold', margin: '20px 0'}}>Email preference</h2>
-        //                         <Checkbox value={values.email_consent} onClick={handleChange} name='email_consent' label='Get updates about Deriv products, services and events.'/>
-        //                         <Button type='submit'>Save</Button>
-        //                     </>
-        //             )}}
-        //             </Form>
-        //         }
-        //     </>
-        // );
+        return (
+            <Formik
+                initialValues={{ first_name, last_name, email, tax_identification_number, email_consent, citizen_text, tax_residence_text, date_of_birth_human }}
+                onSubmit={ this.updateSettings }
+            >
+                {({
+              values,
+              errors,
+              touched,
+              handleChange,
+              handleBlur,
+              handleSubmit,
+              isSubmitting,
+              validateField,
+            }) => (
+                <form>
+                    <FormSubHeader text="Personal Details" />
+                    {/* <InputGroup>
+                        <Input
+                            data-lpignore="true"
+                            type='text'
+                            name='first_name'
+                            label='First name'
+                            required
+                        />
+                        <Input
+                            data-lpignore="true"
+                            type='text'
+                            name='last_name'
+                            label='Last name'
+                            required
+                        />
+                    </InputGroup>
+                    <DatepickerInput>
+                        <DatePicker 
+                            name="date_of_birth_human"
+                            value={values.date_of_birth_human}
+                            min_date="1919-01-01"
+                            alignment="bottom"
+                            onChange={handleChange}
+                        />
+                    </DatepickerInput>
+                    <Autocomplete
+                        data-lpignore="true"
+                        type='text'
+                        name='citizen_text'
+                        label='Citizenship'
+                        required
+                        list_items={ this.props.residence_list }
+                    />
+                    <Input
+                        data-lpignore="true"
+                        type='text'
+                        name='email'
+                        label='Email'
+                        required
+                        disabled
+                    />
+                    <h2 style={{fontSize: '16px', fontWeight: 'bold', margin: '20px 0'}}>Tax information</h2>
+                    <Autocomplete
+                        data-lpignore="true"
+                        type='text'
+                        name='tax_residence_text'
+                        label='Tax residence'
+                        required
+                        list_items={ this.props.residence_list }
+                    />
+                    <Input
+                        data-lpignore="true"
+                        type='text'
+                        name='tax_identification_number'
+                        label='Tax identification number'
+                        required
+                    />
+                    <h2 style={{fontSize: '16px', fontWeight: 'bold', margin: '20px 0'}}>Email preference</h2>
+                    <Checkbox value={values.email_consent} onClick={handleChange} name='email_consent' label='Get updates about Deriv products, services and events.'/> */}
+                    <FormFooter>
+                        <button type="submit" disabled={isSubmitting}>
+                            Submit
+                        </button>
+                    </FormFooter>
+                </form>
+            )}
+            </Formik>
+        )
     }
 
     componentDidMount() {
         this.props.fetchResidenceList();
         WS.getSettings().then((data) => {
-            const {
-                date_of_birth,
-                first_name,
-                last_name,
-                citizen,
-                email,
-                tax_residence,
-                tax_identification_number,
-                email_consent } = data.get_settings;
             console.log(data.get_settings);
-            this.setState({
-                date_of_birth,
-                first_name,
-                last_name,
-                citizen,
-                email,
-                tax_identification_number,
-                tax_residence,
-                email_consent,
-                is_loading: false
-            })
+            this.setState({ ...data.get_settings, is_loading: false });
         });
     }
 }
diff --git a/packages/trader/src/Services/ws-methods.js b/packages/trader/src/Services/ws-methods.js
index c31652d3cd8b..1af53cdefb1b 100644
--- a/packages/trader/src/Services/ws-methods.js
+++ b/packages/trader/src/Services/ws-methods.js
@@ -16,6 +16,9 @@ const WS = (() => {
     const contractsFor = (symbol) =>
         BinarySocket.send({ contracts_for: symbol });
 
+    const getAccountLimits = () =>
+        BinarySocket.send({ get_limits: 1 });
+
     const getAccountStatus = () =>
         BinarySocket.send({ get_account_status: 1 });
 
@@ -132,6 +135,7 @@ const WS = (() => {
         buy,
         cashier,
         contractsFor,
+        getAccountLimits,
         getAccountStatus,
         getFinancialAssessment,
         getSelfExclusion,
diff --git a/packages/trader/src/sass/app.scss b/packages/trader/src/sass/app.scss
index a9059a9b8a58..e76fe7295c06 100644
--- a/packages/trader/src/sass/app.scss
+++ b/packages/trader/src/sass/app.scss
@@ -45,7 +45,6 @@
 @import 'app/_common/components/trade-type-info-dialog';
 @import 'app/_common/components/date-picker';
 @import 'app/_common/components/error-boundary';
-@import 'app/_common/components/input-group';
 @import 'app/_common/components/login-prompt';
 @import 'app/_common/components/market-is-closed-overlay';
 @import 'app/_common/components/market-symbol-icon';
diff --git a/packages/trader/src/sass/app/_common/components/input-group.scss b/packages/trader/src/sass/app/_common/components/input-group.scss
deleted file mode 100644
index 7a13ccbca27c..000000000000
--- a/packages/trader/src/sass/app/_common/components/input-group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.dt-input-group {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4px;
-}
-
-.dt-datepicker-input {
-    div.datepicker {
-        margin: 13px 0 !important;
-    }
-}
\ No newline at end of file
diff --git a/packages/trader/src/sass/app/modules/account-management.scss b/packages/trader/src/sass/app/modules/account-management.scss
index a9a6d27b7da0..3941c819f852 100644
--- a/packages/trader/src/sass/app/modules/account-management.scss
+++ b/packages/trader/src/sass/app/modules/account-management.scss
@@ -18,10 +18,10 @@
         position: relative;
         height: 1.4em;
         margin: 0 0 1em;
+        font-size: 1.4em;
+        font-weight: bold;
 
         &-text {
-            font-size: 1.4em;
-            font-weight: bold;
             position: absolute;
             padding: 0 8px;
             @include themify($themes) {
@@ -102,6 +102,121 @@
     }
 }
 
+.account-management-modal-header {
+    display: flex;
+
+    &__icon-wrapper {
+        display: flex;
+        align-content: center;
+        font-size: 12px;
+        font-weight: normal;
+
+        span {
+            padding: 0 8px;
+        }
+        svg {
+            height: 24px;
+            width: 24px;
+        }
+    }
+}
+
+.account-management-text {
+    @include typeface(--paragraph-left-normal-black, none);
+    @include themify($themes) {
+        color: themed('text_primary_color');
+    }
+
+    &--small {
+        @include typeface(--small-left-normal-black, none);
+    }
+    &--xsmall {
+        @include typeface(--xsmall-left-normal-black, none);
+    }
+    &--grey {
+        @include themify($themes) {
+            color: themed('active_color');
+        }
+    }
+}
+
+.account-management-flex-wrapper {
+    display: flex;
+}
+
+.account-management-text-container {
+    margin-top: 12px;
+    margin-bottom: 24px;
+}
+
+.account-management-table {
+    width: 100%;
+    max-width: 546px;
+
+    thead {
+        position: relative;
+        tr {
+            padding-bottom: 8px;
+        }
+        th {
+            @include typeface(--paragraph-left-bold-black, none);
+        }
+    }
+    &__divider {
+        position: relative;
+        display: block;
+
+        th {
+            position: absolute;
+            width: 100%;
+            height: 1px;
+            left: 0px;
+            @include themify($themes) {
+                border-bottom: 1px solid themed('tab_background_color');
+            }
+        }
+    }
+    tbody {
+        tr {
+            &:not(:first-child):not(:last-child) {
+                padding: 8px 0;
+            }
+            &:first-child {
+                padding-top: 8px;
+                padding-bottom: 4px;
+            }
+            &:last-child {
+                padding-top: 4px;
+            }
+        }
+    }
+    &--last {
+        margin-top: 28px;
+    }
+}
+
+.account-limit-container {
+    margin-top: -24px;
+    height: 100%;
+    width: 100%;
+    overflow: scroll;
+
+    &__main-text {
+        margin: 16px 0;
+    }
+}
+
+.account-limit-popover {
+    display: flex;
+    align-content: center;
+    padding-left: 4px;
+}
+
+.account-limit-popover-target {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
 /**
  * Deriv password
  */
diff --git a/packages/trader/src/sass/app/modules/account.scss b/packages/trader/src/sass/app/modules/account.scss
new file mode 100644
index 000000000000..ce19a6cd8616
--- /dev/null
+++ b/packages/trader/src/sass/app/modules/account.scss
@@ -0,0 +1,5 @@
+@import '../_common/base/index';
+
+.account {
+    margin: 0 16px;
+}
\ No newline at end of file