diff --git a/src/javascript/app/App/Components/Animations/fade-wrapper.jsx b/src/javascript/app/App/Components/Animations/fade-wrapper.jsx
new file mode 100644
index 000000000000..e5fa852ec159
--- /dev/null
+++ b/src/javascript/app/App/Components/Animations/fade-wrapper.jsx
@@ -0,0 +1,38 @@
+import PropTypes      from 'prop-types';
+import React          from 'react';
+import posed,
+{ PoseGroup }         from 'react-pose';
+
+const FadeDiv = posed.div({
+    enter: {
+        opacity   : 1,
+        transition: { duration: 300 },
+    },
+    exit: {
+        opacity   : 0,
+        transition: { duration: 300 },
+    },
+});
+
+const FadeWrapper = ({
+    children,
+    className,
+    keyname,
+    is_visible,
+}) => (
+    <PoseGroup>
+        {is_visible &&
+            <FadeDiv className={className} key={keyname}>
+                {children}
+            </FadeDiv>
+        }
+    </PoseGroup>
+);
+
+FadeWrapper.propTypes = {
+    children  : PropTypes.node,
+    is_visible: PropTypes.bool,
+    keyname   : PropTypes.string,
+};
+
+export { FadeWrapper };
diff --git a/src/javascript/app/App/Components/Animations/index.js b/src/javascript/app/App/Components/Animations/index.js
new file mode 100644
index 000000000000..cbfa65f94278
--- /dev/null
+++ b/src/javascript/app/App/Components/Animations/index.js
@@ -0,0 +1 @@
+export * from './fade-wrapper.jsx';
diff --git a/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx b/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx
index 05dc6dbfef97..5ec870f27479 100644
--- a/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx
+++ b/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx
@@ -2,34 +2,64 @@ import classNames            from 'classnames';
 import PropTypes             from 'prop-types';
 import React, { Component }  from 'react';
 import { withRouter }        from 'react-router';
-import Localize              from 'App/Components/Elements/localize.jsx';
 import { Icon, IconBack }    from 'Assets/Common';
-import routes                from 'Constants/routes';
+import Localize              from 'App/Components/Elements/localize.jsx';
+import { UnderlyingIcon }    from 'App/Components/Elements/underlying-icon.jsx';
+import ContractAudit         from 'App/Components/Elements/PositionsDrawer/result-details.jsx';
+import ContractTypeCell      from 'App/Components/Elements/PositionsDrawer/contract-type-cell.jsx';
 import ProfitLossCardContent from 'Modules/Reports/Components/profit-loss-card-content.jsx';
-import MarketSymbolIconRow   from 'Modules/Reports/Components/market-symbol-icon-row.jsx';
 import ContractCardBody      from './contract-card-body.jsx';
 import ContractCardFooter    from './contract-card-footer.jsx';
 import ContractCardHeader    from './contract-card-header.jsx';
 import ContractCard          from './contract-card.jsx';
-import ContractAudit         from '../ContractAudit/contract-audit.jsx';
+import {
+    getDurationPeriod,
+    getDurationTime,
+    getDurationUnitText }    from '../../../../Stores/Modules/Portfolio/Helpers/details';
+import {
+    getEndTime,
+    isUserSold }             from '../../../../Stores/Modules/Contract/Helpers/logic';
 import Money                 from '../money.jsx';
 
 class ContractDrawer extends Component {
+    state = {
+        is_shade_on: false,
+    }
+
+    handleShade = (shade) => {
+        this.setState({ is_shade_on: shade });
+    }
+
     getBodyContent () {
         const {
             buy_price,
             currency,
+            exit_tick,
+            is_sold,
             payout,
             profit,
         } = this.props.contract_info;
+        const { contract_info } = this.props;
+        const exit_spot = isUserSold(contract_info) ? '-' : exit_tick;
 
         return (
-            <ContractCard contract_info={this.props.contract_info}>
+            <ContractCard contract_info={contract_info}>
                 <ContractCardHeader>
-                    <MarketSymbolIconRow
-                        show_description={true}
-                        payload={this.props.contract_info}
-                    />
+                    <div className={classNames(
+                        'contract-card__grid',
+                        'contract-card__grid-underlying-trade'
+                    )}
+                    >
+                        <div className='contract-card__underlying-name'>
+                            <UnderlyingIcon market={contract_info.underlying} />
+                            <span className='contract-card__symbol'>
+                                {contract_info.display_name}
+                            </span>
+                        </div>
+                        <div className='contract-card__type'>
+                            <ContractTypeCell type={contract_info.contract_type} />
+                        </div>
+                    </div>
                 </ContractCardHeader>
                 <ContractCardBody>
                     <ProfitLossCardContent
@@ -48,19 +78,28 @@ class ContractDrawer extends Component {
                             />
                         </span>
                     </div>
-                    <ContractAudit contract={this.props.contract_info} />
+                    <ContractAudit
+                        contract_info={contract_info}
+                        contract_end_time={getEndTime(contract_info)}
+                        is_shade_visible={this.handleShade}
+                        duration={getDurationTime(contract_info)}
+                        duration_unit={getDurationUnitText(getDurationPeriod(contract_info))}
+                        exit_spot={exit_spot}
+                        has_result={!!(is_sold)}
+                    />
                 </ContractCardFooter>
             </ContractCard>
         );
     }
 
     render() {
+        if (!this.props.contract_info) return null;
         const body_content = this.getBodyContent();
         return (
             <div className={classNames('contract-drawer', {})}>
                 <div
                     className='contract-drawer__heading'
-                    onClick={() => this.props.history.push(routes.reports)}
+                    onClick={() => this.props.history.goBack()}
                 >
                     <Icon icon={IconBack} />
                     <h2><Localize str={this.props.heading || 'Contract'} /></h2>
diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
index 0978e3627144..586142e334cb 100644
--- a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
+++ b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer.jsx
@@ -81,7 +81,7 @@ class PositionsDrawer extends React.Component {
                 })}
             >
                 <div className='positions-drawer__header'>
-                    <span className='positions-drawer__title'>{localize('Positions')}</span>
+                    <span className='positions-drawer__title'>{localize('Open Positions')}</span>
                     <div
                         className='positions-drawer__icon-close'
                         onClick={toggleDrawer}
diff --git a/src/javascript/app/App/Components/Routes/binary-routes.jsx b/src/javascript/app/App/Components/Routes/binary-routes.jsx
index f5176ca6bdf2..7a56b151bdc9 100644
--- a/src/javascript/app/App/Components/Routes/binary-routes.jsx
+++ b/src/javascript/app/App/Components/Routes/binary-routes.jsx
@@ -1,11 +1,10 @@
 import React              from 'react';
 import { Switch }         from 'react-router-dom';
 import getRoutesConfig    from 'App/Constants/routes-config';
-import UILoader           from 'App/Components/Elements/ui-loader.jsx';
 import RouteWithSubRoutes from './route-with-sub-routes.jsx';
 
 const BinaryRoutes = (props) => (
-    <React.Suspense fallback={<UILoader />}>
+    <React.Suspense fallback={<div />}>
         <Switch>
             {
                 getRoutesConfig().map((route, idx) => (
diff --git a/src/javascript/app/App/Containers/Layout/footer.jsx b/src/javascript/app/App/Containers/Layout/footer.jsx
index 0b9d200443ce..429f5826ab0f 100644
--- a/src/javascript/app/App/Containers/Layout/footer.jsx
+++ b/src/javascript/app/App/Containers/Layout/footer.jsx
@@ -21,6 +21,7 @@ const Footer = ({
     is_loading,
     is_logged_in,
     is_positions_drawer_on,
+    is_route_blurred,
     is_settings_dialog_on,
     location,
     showFullBlur,
@@ -29,7 +30,7 @@ const Footer = ({
     toggleSettingsDialog,
 }) => (
     <footer className={classNames('footer', {
-        'footer--is-blurred': is_fully_blurred,
+        'footer--is-blurred': (is_fully_blurred || is_route_blurred),
         'footer--show'      : !is_loading || location.pathname !== routes.trade,
     })}
     >
@@ -66,6 +67,7 @@ Footer.propTypes = {
     is_language_dialog_visible: PropTypes.bool,
     is_logged_in              : PropTypes.bool,
     is_positions_drawer_on    : PropTypes.bool,
+    is_route_blurred          : PropTypes.bool,
     is_settings_dialog_on     : PropTypes.bool,
     location                  : PropTypes.object,
     show_positions_toggle     : PropTypes.bool,
@@ -79,6 +81,7 @@ export default withRouter(connect(
         hideFullBlur              : ui.hideFullBlur,
         is_fully_blurred          : ui.is_fully_blurred,
         is_dark_mode              : ui.is_dark_mode_on,
+        is_route_blurred          : ui.is_route_blurred,
         is_logged_in              : client.is_logged_in,
         is_language_dialog_visible: ui.is_language_dialog_on,
         is_loading                : ui.is_loading,
diff --git a/src/javascript/app/App/Containers/Layout/header.jsx b/src/javascript/app/App/Containers/Layout/header.jsx
index 81def1f7942d..2f4c8a2e917b 100644
--- a/src/javascript/app/App/Containers/Layout/header.jsx
+++ b/src/javascript/app/App/Containers/Layout/header.jsx
@@ -26,6 +26,7 @@ const Header = ({
     is_loading,
     is_logged_in,
     is_mobile,
+    is_route_blurred,
     is_virtual,
     location,
     loginid,
@@ -33,7 +34,7 @@ const Header = ({
     toggleAccountsDialog,
 }) => (
     <header className={classNames('header', {
-        'header--is-blurred': is_fully_blurred,
+        'header--is-blurred': (is_fully_blurred || is_route_blurred),
         'header--show'      : !is_loading || location.pathname !== routes.trade,
     })}
     >
@@ -94,6 +95,7 @@ Header.propTypes = {
     is_loading          : PropTypes.bool,
     is_logged_in        : PropTypes.bool,
     is_mobile           : PropTypes.bool,
+    is_route_blurred    : PropTypes.bool,
     is_virtual          : PropTypes.bool,
     location            : PropTypes.object,
     loginid             : PropTypes.string,
@@ -116,6 +118,7 @@ export default withRouter(connect(
         is_acc_switcher_on  : ui.is_accounts_switcher_on,
         is_dark_mode        : ui.is_dark_mode_on,
         is_fully_blurred    : ui.is_fully_blurred,
+        is_route_blurred    : ui.is_route_blurred,
         is_mobile           : ui.is_mobile,
         toggleAccountsDialog: ui.toggleAccountsDialog,
     })
diff --git a/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx b/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
index 93a9b7a0d09e..dfb5940b2680 100644
--- a/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
+++ b/src/javascript/app/Modules/Contract/Containers/contract-replay.jsx
@@ -1,59 +1,129 @@
-import PropType       from 'prop-types';
-import React          from 'react';
-import ContractDrawer from 'App/Components/Elements/ContractDrawer';
-import UILoader       from 'App/Components/Elements/ui-loader.jsx';
-import { connect }    from 'Stores/connect';
-import { isEnded }    from 'Stores/Modules/Contract/Helpers/logic';
-import Digits         from './digits.jsx';
-import InfoBox        from './info-box.jsx';
+import PropTypes       from 'prop-types';
+import React           from 'react';
+import { withRouter }  from 'react-router';
+import { FadeWrapper } from 'App/Components/Animations';
+import ChartLoader     from 'App/Components/Elements/chart-loader.jsx';
+import ContractDrawer  from 'App/Components/Elements/ContractDrawer';
+import { connect }     from 'Stores/connect';
+import { Icon }        from 'Assets/Common';
+import { IconClose }   from 'Assets/Settings';
+import AppRoutes       from 'Constants/routes';
+import { localize }    from '_common/localize';
+import InfoBox         from './info-box.jsx';
+import Digits          from './digits.jsx';
 
 class ContractReplay extends React.Component {
+    setWrapperRef = (node) => {
+        this.wrapper_ref = node;
+    };
+
     componentDidMount() {
-        this.props.onMount(this.props.contract_id);
+        this.props.setChartLoader(true);
+        this.props.showBlur();
+        const url_contract_id = /[^/]*$/.exec(location.pathname)[0];
+        this.props.onMount(this.props.contract_id || url_contract_id);
+        document.addEventListener('mousedown', this.handleClickOutside);
     }
 
     componentWillUnmount() {
+        this.props.hideBlur();
         this.props.onUnmount();
+        document.removeEventListener('mousedown', this.handleClickOutside);
     }
 
+    handleClickOutside = (event) => {
+        if (this.wrapper_ref && !this.wrapper_ref.contains(event.target)) {
+            this.props.history.push(AppRoutes.trade);
+        }
+    };
+
     render() {
         const SmartChart = React.lazy(() => import(/* webpackChunkName: "smart_chart" */'../../SmartChart'));
-        const { status } = this.props.contract_info;
 
-        if (status) {
-            return (
-                <React.Fragment>
-                    <ContractDrawer contract_info={this.props.contract_info} heading='Reports' />
-                    <React.Suspense fallback={<UILoader />}>
+        const action_bar_items = [
+            {
+                onClick: () => this.props.history.push(AppRoutes.trade),
+                icon   : IconClose,
+                title  : localize('Close'),
+            },
+        ];
+
+        const {
+            config,
+            contract_info,
+            chart_id,
+            is_chart_loading,
+        } = this.props;
+
+        return (
+            <div className='trade-container__replay' ref={this.setWrapperRef}>
+                <FadeWrapper
+                    className='contract-drawer-wrapper'
+                    is_visible={!!(contract_info.status)}
+                    keyname='contract-drawer-wrapper'
+                >
+                    <ContractDrawer
+                        contract_info={contract_info}
+                        heading='Reports'
+                    />
+                </FadeWrapper>
+                <React.Suspense fallback={<div />}>
+                    <div className='replay-chart__container'>
+                        <div className='vertical-tab__action-bar'>
+                            {
+                                action_bar_items.map(({ icon, onClick, title }) => (
+                                    <Icon
+                                        className='vertical-tab__action-bar--icon'
+                                        key={title}
+                                        icon={icon}
+                                        onClick={onClick}
+                                    />
+                                ))
+                            }
+                        </div>
+                        <ChartLoader is_visible={is_chart_loading} />
                         <SmartChart
-                            chart_id={this.props.chart_id}
-                            is_contract_mode={true}
+                            chart_id={chart_id}
+                            chartControlsWidgets={null}
                             Digits={<Digits />}
                             InfoBox={<InfoBox />}
-                            is_ended={isEnded(this.props.contract_info)}
-                            end_epoch={this.props.contract_info.date_start}
-                            start_epoch={this.props.contract_info.date_expiry}
+                            should_show_last_digit_stats={false}
+                            {...config}
                         />
-                    </React.Suspense>
-                </React.Fragment>
-            );
-        }
-        return <UILoader />;
+                    </div>
+                </React.Suspense>
+            </div>
+        );
     }
 }
 
 ContractReplay.propTypes = {
-    chart_id     : PropType.number,
-    contract_id  : PropType.string,
-    contract_info: PropType.object,
-    onMount      : PropType.func,
-    onUnmount    : PropType.func,
-    symbol       : PropType.string,
+    chart_id        : PropTypes.string,
+    config          : PropTypes.object,
+    contract_id     : PropTypes.string,
+    contract_info   : PropTypes.object,
+    hideBlur        : PropTypes.func,
+    history         : PropTypes.object,
+    is_chart_loading: PropTypes.bool,
+    location        : PropTypes.object,
+    onMount         : PropTypes.func,
+    onUnmount       : PropTypes.func,
+    routes          : PropTypes.arrayOf(PropTypes.object),
+    setChartLoader  : PropTypes.func,
+    showBlur        : PropTypes.func,
 };
 
-export default connect(({ modules }) => ({
-    contract_info: modules.contract.contract_info,
-    chart_id     : modules.trade.chart_id,
-    onMount      : modules.contract.onMount,
-    onUnmount    : modules.contract.onUnmount,
-}))(ContractReplay);
+export default withRouter(connect(
+    ({ modules, ui }) => ({
+        chart_id        : modules.smart_chart.replay_id,
+        config          : modules.contract.replay_config,
+        onMount         : modules.contract.onMountReplay,
+        onUnmount       : modules.contract.onUnmountReplay,
+        contract_info   : modules.contract.replay_info,
+        setChartLoader  : modules.smart_chart.setIsChartLoading,
+        is_chart_loading: modules.smart_chart.is_chart_loading,
+        hideBlur        : ui.hideRouteBlur,
+        showBlur        : ui.showRouteBlur,
+
+    })
+)(ContractReplay));
diff --git a/src/javascript/app/Modules/Contract/Containers/contract.jsx b/src/javascript/app/Modules/Contract/Containers/contract.jsx
index 361c800cd304..b25e8ff90602 100644
--- a/src/javascript/app/Modules/Contract/Containers/contract.jsx
+++ b/src/javascript/app/Modules/Contract/Containers/contract.jsx
@@ -15,22 +15,21 @@ const Contract = ({
             has_error ?
                 <ErrorComponent message={error_message} />
                 :
-                <div className='trade-container'>
-                    <div>
-                        <CSSTransition
-                            in={!has_error}
-                            timeout={400}
-                            classNames={{
-                                enter    : 'contract--enter',
-                                enterDone: 'contract--enter-done',
-                                exit     : 'contract--exit',
-                            }}
-                            unmountOnExit
-                        >
-                            <ContractReplay contract_id={match.params.contract_id} key={match.params.contract_id} />
-                        </CSSTransition>
-                    </div>
-                </div>
+                <CSSTransition
+                    in={!has_error}
+                    timeout={400}
+                    classNames={{
+                        enter    : 'contract--enter',
+                        enterDone: 'contract--enter-done',
+                        exit     : 'contract--exit',
+                    }}
+                    unmountOnExit
+                >
+                    <ContractReplay
+                        contract_id={match.params.contract_id}
+                        key={match.params.contract_id}
+                    />
+                </CSSTransition>
         }
     </React.Fragment>
 );
diff --git a/src/javascript/app/Modules/Contract/Containers/digits.jsx b/src/javascript/app/Modules/Contract/Containers/digits.jsx
index 7097dd91fcf4..944ae7e5375e 100644
--- a/src/javascript/app/Modules/Contract/Containers/digits.jsx
+++ b/src/javascript/app/Modules/Contract/Containers/digits.jsx
@@ -2,7 +2,6 @@ import PropTypes               from 'prop-types';
 import React                   from 'react';
 import { CSSTransition }       from 'react-transition-group';
 import { connect }             from 'Stores/connect';
-import { isEnded }             from 'Stores/Modules/Contract/Helpers/logic';
 import { LastDigitPrediction } from '../Components/LastDigitPrediction';
 
 class Digits extends React.Component {
@@ -20,11 +19,13 @@ class Digits extends React.Component {
             digits_info,
             display_status,
             is_digit_contract,
+            is_ended,
             is_trade_page,
             last_digit,
+            replay_info,
         } = this.props;
-        const { barrier, contract_type } = contract_info;
-        const is_ended = isEnded(contract_info);
+        const barrier       = contract_info.barrier || replay_info.barrier;
+        const contract_type = contract_info.contract_type || replay_info.contract_type;
 
         return (
             <CSSTransition
@@ -55,11 +56,13 @@ Digits.propTypes = {
     digits_info      : PropTypes.object,
     display_status   : PropTypes.string,
     is_digit_contract: PropTypes.bool,
+    is_ended         : PropTypes.bool,
     is_trade_page    : PropTypes.bool,
     last_digit       : PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string,
     ]),
+    replay_info: PropTypes.object,
 };
 
 export default connect(
@@ -68,6 +71,8 @@ export default connect(
         digits_info      : modules.contract.digits_info,
         display_status   : modules.contract.display_status,
         is_digit_contract: modules.contract.is_digit_contract,
+        is_ended         : modules.contract.is_ended,
+        replay_info      : modules.contract.replay_info,
         last_digit       : modules.trade.last_digit,
     })
 )(Digits);
diff --git a/src/javascript/app/Modules/Contract/Containers/info-box.jsx b/src/javascript/app/Modules/Contract/Containers/info-box.jsx
index 3c3fb194481e..8f69c8194370 100644
--- a/src/javascript/app/Modules/Contract/Containers/info-box.jsx
+++ b/src/javascript/app/Modules/Contract/Containers/info-box.jsx
@@ -1,29 +1,24 @@
-import classNames          from 'classnames';
 import PropTypes           from 'prop-types';
 import React               from 'react';
 import { CSSTransition }   from 'react-transition-group';
 import { connect }         from 'Stores/connect';
-import { isEnded }         from 'Stores/Modules/Contract/Helpers/logic';
 import ContractError       from '../Components/contract-error.jsx';
 import { InfoBoxLongcode } from '../Components/InfoBox';
 import ChartCloseBtn       from '../../SmartChart/Components/chart-close-btn.jsx';
 
 const InfoBox = ({
-    is_contract_mode,
     contract_info,
+    is_contract_mode,
+    is_trade_page,
     onClickNewTrade,
     onClose,
+    error_message,
     removeError,
-    sell_info,
+    replay_info,
 }) => {
-    const is_ended = isEnded(contract_info);
-    const box_class = classNames('info-box', {
-        'ended': is_ended,
-    });
-
     const Contents = InfoBoxLongcode;
+    const info     = is_trade_page ? contract_info : replay_info;
     return (
-        // TODO: Resolve issue with undefined contract_info showing upon unmounting transition
         <CSSTransition
             in={is_contract_mode}
             timeout={250}
@@ -36,17 +31,15 @@ const InfoBox = ({
         >
             <React.Fragment>
                 <div className='info-box-container'>
-                    { contract_info.contract_type &&
-                        <div className={box_class}>
+                    { info.contract_type &&
+                        <div className='info-box'>
                             <Contents
-                                contract_info={contract_info}
-                                is_ended={is_ended}
-                                sell_info={sell_info}
+                                contract_info={info}
                             />
                         </div>
                     }
                     <ContractError
-                        message={sell_info.error_message}
+                        message={error_message}
                         onClickClose={removeError}
                     />
                     <ChartCloseBtn
@@ -64,19 +57,21 @@ const InfoBox = ({
 
 InfoBox.propTypes = {
     contract_info   : PropTypes.object,
+    error_message   : PropTypes.string,
     is_contract_mode: PropTypes.bool,
     is_trade_page   : PropTypes.bool,
     onClickNewTrade : PropTypes.func,
     onClose         : PropTypes.func,
     removeError     : PropTypes.func,
-    sell_info       : PropTypes.object,
+    replay_info     : PropTypes.object,
 };
 
 export default connect(
     ({ modules }) => ({
         contract_info   : modules.contract.contract_info,
-        removeError     : modules.contract.removeSellError,
-        sell_info       : modules.contract.sell_info,
+        error_message   : modules.contract.error_message,
+        replay_info     : modules.contract.replay_info,
+        removeError     : modules.contract.removeErrorMessage,
         onClickNewTrade : modules.trade.onClickNewTrade,
         onClose         : modules.contract.onCloseContract,
         is_contract_mode: modules.smart_chart.is_contract_mode,
diff --git a/src/javascript/app/Modules/Portfolio/Components/empty-portfolio-message.jsx b/src/javascript/app/Modules/Portfolio/Components/empty-portfolio-message.jsx
index 89d95166f7c6..3a1c0d25fbcc 100644
--- a/src/javascript/app/Modules/Portfolio/Components/empty-portfolio-message.jsx
+++ b/src/javascript/app/Modules/Portfolio/Components/empty-portfolio-message.jsx
@@ -3,11 +3,10 @@ import { localize }      from '_common/localize';
 import { IconPositions } from 'Assets/Footer';
 
 const EmptyPortfolioMessage = () => (
-    // TODO: combine with statement component, once design is final
     <div className='portfolio-empty'>
         <div className='portfolio-empty__wrapper'>
             <IconPositions className='portfolio-empty__icon' />
-            <span className='portfolio-empty__text'>{localize('No running positions')}</span>
+            <span className='portfolio-empty__text'>{localize('No open positions')}</span>
         </div>
     </div>
 );
diff --git a/src/javascript/app/Modules/Reports/Constants/data-table-constants.js b/src/javascript/app/Modules/Reports/Constants/data-table-constants.js
index edc6bfcd226e..7661e7686c58 100644
--- a/src/javascript/app/Modules/Reports/Constants/data-table-constants.js
+++ b/src/javascript/app/Modules/Reports/Constants/data-table-constants.js
@@ -129,7 +129,7 @@ export const getOpenPositionsColumnsTemplate = (currency) => [
         col_index: 'reference',
     }, {
         title            : localize('Buy price'),
-        col_index        : 'buy_price',
+        col_index        : 'purchase',
         renderCellContent: ({ cell_value }) => (
             <Money amount={cell_value} currency={currency} />
         ),
diff --git a/src/javascript/app/Modules/Reports/Containers/open-positions.jsx b/src/javascript/app/Modules/Reports/Containers/open-positions.jsx
index f29e5a04b4e6..b5409867ba6f 100644
--- a/src/javascript/app/Modules/Reports/Containers/open-positions.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/open-positions.jsx
@@ -56,8 +56,7 @@ class OpenPositions extends React.Component {
                         columns={getOpenPositionsColumnsTemplate(currency)}
                         footer={totals}
                         data_source={active_positions}
-                        getRowAction={undefined}
-                        // getRowAction={(row_obj) => getContractPath(row_obj.id)} TODO uncomment once smart-chart component is fixed.
+                        // getRowAction={(row_obj) => getContractPath(row_obj.id)}
                     >
                         <PlaceholderComponent
                             is_loading={is_loading}
diff --git a/src/javascript/app/Modules/Reports/Containers/profit-table.jsx b/src/javascript/app/Modules/Reports/Containers/profit-table.jsx
index 2798ab0cb8e6..274adbe5c746 100644
--- a/src/javascript/app/Modules/Reports/Containers/profit-table.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/profit-table.jsx
@@ -4,6 +4,7 @@ import React                             from 'react';
 import { withRouter }                    from 'react-router';
 import { localize }                      from '_common/localize';
 import DataTable                         from 'App/Components/Elements/DataTable';
+import { getContractPath }               from 'App/Components/Routes/helpers';
 import { connect }                       from 'Stores/connect';
 import EmptyTradeHistoryMessage          from '../Components/empty-trade-history-message.jsx';
 import PlaceholderComponent              from '../Components/placeholder-component.jsx';
@@ -59,6 +60,7 @@ class ProfitTable extends React.Component {
                         onScroll={handleScroll}
                         footer={totals}
                         is_empty={is_empty}
+                        getRowAction={(row_obj) => getContractPath(row_obj.contract_id)}
                     >
                         <PlaceholderComponent
                             is_loading={is_loading}
@@ -97,4 +99,3 @@ export default connect(
         totals           : modules.profit_table.totals,
     })
 )(withRouter(ProfitTable));
-
diff --git a/src/javascript/app/Modules/Reports/Containers/reports.jsx b/src/javascript/app/Modules/Reports/Containers/reports.jsx
index 907c5d4f7fe6..153bc1e398c5 100644
--- a/src/javascript/app/Modules/Reports/Containers/reports.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/reports.jsx
@@ -1,56 +1,99 @@
-import PropTypes      from 'prop-types';
-import React          from 'react';
-import { withRouter } from 'react-router-dom';
-import VerticalTab    from 'App/Components/Elements/VerticalTabs/vertical-tab.jsx';
-import { IconClose }  from 'Assets/Settings';
-import AppRoutes      from 'Constants/routes';
-import { localize }   from '_common/localize';
-
-const Reports = ({ routes, location, history }) => {
-    const menu_options = () => {
-        const options = [];
-
-        routes.forEach(route => {
-            options.push({
-                default: route.default,
-                icon   : route.icon_component,
-                label  : route.title,
-                value  : route.component,
-                path   : route.path,
-            });
-        });
+import PropTypes       from 'prop-types';
+import React           from 'react';
+import { withRouter }  from 'react-router-dom';
+import { connect }     from 'Stores/connect';
+import { FadeWrapper } from 'App/Components/Animations';
+import VerticalTab     from 'App/Components/Elements/VerticalTabs/vertical-tab.jsx';
+import { IconClose }   from 'Assets/Settings';
+import AppRoutes       from 'Constants/routes';
+import { localize }    from '_common/localize';
+
+class Reports extends React.Component {
+    state = { is_visible: false };
 
-        return options;
+    setWrapperRef = (node) => {
+        this.wrapper_ref = node;
     };
 
-    const action_bar_items = [
-        {
-            onClick: () => { history.push(AppRoutes.trade); },
-            icon   : IconClose,
-            title  : localize('Close'),
-        },
-    ];
-
-    return (
-        <div className='reports'>
-            <VerticalTab
-                header_title={localize('Reports')}
-                action_bar={action_bar_items}
-                alignment='center'
-                classNameHeader='reports__tab-header'
-                current_path={location.pathname}
-                is_routed={true}
-                is_full_width={true}
-                list={menu_options()}
-            />
-        </div>
-    );
-};
+    handleClickOutside = (event) => {
+        if (this.wrapper_ref && !this.wrapper_ref.contains(event.target)) {
+            this.props.history.push(AppRoutes.trade);
+        }
+    };
+
+    componentDidMount() {
+        this.props.showBlur();
+        document.addEventListener('mousedown', this.handleClickOutside);
+        this.setState({ is_visible: true });
+    }
+
+    componentWillUnmount() {
+        this.setState({ is_visible: false });
+        this.props.hideBlur();
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+
+    render () {
+        const menu_options = () => {
+            const options = [];
+
+            this.props.routes.forEach(route => {
+                options.push({
+                    default: route.default,
+                    icon   : route.icon_component,
+                    label  : route.title,
+                    value  : route.component,
+                    path   : route.path,
+                });
+            });
+
+            return options;
+        };
+
+        const action_bar_items = [
+            {
+                onClick: () => {
+                    this.props.history.push(AppRoutes.trade);
+                    this.setState({ is_visible: false });
+                },
+                icon : IconClose,
+                title: localize('Close'),
+            },
+        ];
+        return (
+            <FadeWrapper
+                is_visible={this.state.is_visible}
+                className='reports-page-wrapper'
+                keyname='reports-page-wrapper'
+            >
+                <div className='reports' ref={this.setWrapperRef}>
+                    <VerticalTab
+                        header_title={localize('Reports')}
+                        action_bar={action_bar_items}
+                        alignment='center'
+                        classNameHeader='reports__tab-header'
+                        current_path={this.props.location.pathname}
+                        is_routed={true}
+                        is_full_width={true}
+                        list={menu_options()}
+                    />
+                </div>
+            </FadeWrapper>
+        );
+    }
+}
 
 Reports.propTypes = {
+    hideBlur: PropTypes.func,
     history : PropTypes.object,
     location: PropTypes.object,
     routes  : PropTypes.arrayOf(PropTypes.object),
+    showBlur: PropTypes.func,
 };
 
-export default withRouter(Reports);
+export default connect(
+    ({ ui }) => ({
+        hideBlur: ui.hideRouteBlur,
+        showBlur: ui.showRouteBlur,
+    })
+)(withRouter(Reports));
diff --git a/src/javascript/app/Modules/Reports/Containers/statement.jsx b/src/javascript/app/Modules/Reports/Containers/statement.jsx
index e41779d4017d..223358cd1764 100644
--- a/src/javascript/app/Modules/Reports/Containers/statement.jsx
+++ b/src/javascript/app/Modules/Reports/Containers/statement.jsx
@@ -49,6 +49,7 @@ class Statement extends React.Component {
         if (error) return <p>{error}</p>;
 
         const columns = getStatementTableColumnsTemplate(currency);
+        const hasRowAction = (row) => data.filter(el => el.id === row.id).length > 1 || ['withdrawal', 'deposit'].includes(row.action_type);
 
         return (
             <React.Fragment>
@@ -72,8 +73,7 @@ class Statement extends React.Component {
                         data_source={data}
                         columns={columns}
                         onScroll={handleScroll}
-                        // getRowAction={this.getRowAction} // TODO uncomment when chart layout is ready for statements
-                        getRowAction={undefined}
+                        getRowAction={(row) => hasRowAction(row) ? this.getRowAction(row) : null}
                         is_empty={is_empty}
                     >
                         <PlaceholderComponent
diff --git a/src/javascript/app/Modules/SmartChart/Containers/smart-chart.jsx b/src/javascript/app/Modules/SmartChart/Containers/smart-chart.jsx
index 8391618600c9..ea9854f8e949 100644
--- a/src/javascript/app/Modules/SmartChart/Containers/smart-chart.jsx
+++ b/src/javascript/app/Modules/SmartChart/Containers/smart-chart.jsx
@@ -93,10 +93,12 @@ Chart.propTypes = {
     is_socket_opened            : PropTypes.bool,
     is_static_chart             : PropTypes.bool,
     is_title_enabled            : PropTypes.bool,
+    is_trade_page               : PropTypes.bool,
     markers_array               : PropTypes.array,
     onMount                     : PropTypes.func,
     onSymbolChange              : PropTypes.func,
     onUnmount                   : PropTypes.func,
+    replay_controls             : PropTypes.object,
     scroll_to_epoch             : PropTypes.number,
     scroll_to_epoch_offset      : PropTypes.number,
     settings                    : PropTypes.object,
@@ -118,11 +120,8 @@ export default connect(
     ({ modules, ui, common }) => ({
         is_socket_opened    : common.is_socket_opened,
         barriers_array      : modules.smart_chart.barriers_array,
-        chart_type          : modules.smart_chart.chart_type,
-        end_epoch           : modules.smart_chart.end_epoch,
         exportLayout        : modules.smart_chart.exportLayout,
         getChartStatus      : modules.smart_chart.getChartStatus,
-        granularity         : modules.smart_chart.granularity,
         is_contract_mode    : modules.smart_chart.is_contract_mode,
         is_title_enabled    : modules.smart_chart.is_title_enabled,
         is_static_chart     : modules.smart_chart.is_static_chart,
@@ -133,7 +132,6 @@ export default connect(
         should_clear_chart  : modules.smart_chart.should_clear_chart,
         should_export_layout: modules.smart_chart.should_export_layout,
         should_import_layout: modules.smart_chart.should_import_layout,
-        start_epoch         : modules.smart_chart.start_epoch,
         trade_chart_layout  : modules.smart_chart.trade_chart_layout,
         updateChartType     : modules.smart_chart.updateChartType,
         updateGranularity   : modules.smart_chart.updateGranularity,
diff --git a/src/javascript/app/Modules/Trading/Containers/trade.jsx b/src/javascript/app/Modules/Trading/Containers/trade.jsx
index fed07be4147a..c43326bf1769 100644
--- a/src/javascript/app/Modules/Trading/Containers/trade.jsx
+++ b/src/javascript/app/Modules/Trading/Containers/trade.jsx
@@ -44,11 +44,16 @@ class Trade extends React.Component {
                             <ChartLoader is_visible={is_chart_visible} />
                             <SmartChart
                                 chart_id={this.props.chart_id}
+                                chart_type={this.props.chart_type}
                                 Digits={<Digits is_trade_page />}
                                 InfoBox={<InfoBox is_trade_page />}
+                                end_epoch={this.props.end_epoch}
+                                granularity={this.props.granularity}
+                                is_trade_page
                                 onSymbolChange={this.props.onSymbolChange}
                                 scroll_to_epoch={this.props.scroll_to_epoch}
                                 scroll_to_offset={this.props.scroll_to_offset}
+                                start_epoch={this.props.start_epoch}
                                 should_show_bottom_widgets={should_show_bottom_widgets}
                                 should_show_last_digit_stats={should_show_last_digit_stats}
                                 symbol={this.props.symbol}
@@ -79,7 +84,10 @@ class Trade extends React.Component {
 
 Trade.propTypes = {
     chart_id         : PropTypes.string,
+    chart_type       : PropTypes.string,
     contract_type    : PropTypes.string,
+    end_epoch        : PropTypes.number,
+    granularity      : PropTypes.number,
     hidePositions    : PropTypes.func,
     is_chart_loading : PropTypes.bool,
     is_chart_ready   : PropTypes.bool,
@@ -96,6 +104,7 @@ Trade.propTypes = {
     scroll_to_epoch  : PropTypes.number,
     scroll_to_offset : PropTypes.number,
     showPositions    : PropTypes.func,
+    start_epoch      : PropTypes.number,
     symbol           : PropTypes.string,
 };
 
@@ -104,11 +113,15 @@ export default connect(
         is_digit_contract                  : modules.contract.is_digit_contract,
         onCloseContract                    : modules.contract.onCloseContract,
         chart_id                           : modules.smart_chart.chart_id,
+        chart_type                         : modules.smart_chart.chart_type,
+        scroll_to_epoch                    : modules.smart_chart.scroll_to_left_epoch,
+        scroll_to_offset                   : modules.smart_chart.scroll_to_left_epoch_offset,
+        granularity                        : modules.smart_chart.granularity,
+        end_epoch                          : modules.smart_chart.end_epoch,
+        start_epoch                        : modules.smart_chart.start_epoch,
         is_chart_loading                   : modules.smart_chart.is_chart_loading,
         is_chart_ready                     : modules.smart_chart.is_chart_ready,
         is_contract_mode                   : modules.smart_chart.is_contract_mode,
-        scroll_to_epoch                    : modules.smart_chart.scroll_to_left_epoch,
-        scroll_to_offset                   : modules.smart_chart.scroll_to_left_epoch_offset,
         contract_type                      : modules.trade.contract_type,
         is_trade_enabled                   : modules.trade.is_trade_enabled,
         onClickNewTrade                    : modules.trade.onClickNewTrade,
diff --git a/src/javascript/app/Stores/Modules/Contract/Helpers/logic.js b/src/javascript/app/Stores/Modules/Contract/Helpers/logic.js
index 1f63702a826c..8eb622a78b1f 100644
--- a/src/javascript/app/Stores/Modules/Contract/Helpers/logic.js
+++ b/src/javascript/app/Stores/Modules/Contract/Helpers/logic.js
@@ -1,5 +1,24 @@
-import moment     from 'moment';
-import ServerTime from '_common/base/server_time';
+import moment            from 'moment';
+import { isEmptyObject } from '_common/utility';
+import ServerTime        from '_common/base/server_time';
+
+export const getChartConfig = (contract_info, is_digit_contract) => {
+    if (isEmptyObject(contract_info)) return null;
+    const start = contract_info.date_start;
+    const end   = getEndTime(contract_info);
+    const granularity = getChartGranularity(start, end);
+    const chart_type  = getChartType(start, end);
+
+    return {
+        granularity,
+        start_epoch               : start,
+        end_epoch                 : end,
+        chart_type,
+        symbol                    : contract_info.underlying,
+        scroll_to_epoch           : contract_info.purchase_time,
+        should_show_bottom_widgets: is_digit_contract,
+    };
+};
 
 const hour_to_granularity_map = [
     [1      , 0],
diff --git a/src/javascript/app/Stores/Modules/Contract/contract-store.js b/src/javascript/app/Stores/Modules/Contract/contract-store.js
index ca4a8f1ec89c..bf54132f4fe3 100644
--- a/src/javascript/app/Stores/Modules/Contract/contract-store.js
+++ b/src/javascript/app/Stores/Modules/Contract/contract-store.js
@@ -15,6 +15,7 @@ import {
     getDigitInfo,
     isDigitContract }            from './Helpers/digits';
 import {
+    getChartConfig,
     getChartGranularity,
     getChartType,
     getDisplayStatus,
@@ -39,6 +40,10 @@ export default class ContractStore extends BaseStore {
     @observable error_message     = '';
     @observable is_sell_requested = false;
 
+    // ---- Replay Contract Config ----
+    @observable replay_contract_id;
+    @observable replay_info = observable.object({});
+
     // ---- Normal properties ---
     forget_id;
     chart_type          = 'mountain';
@@ -126,12 +131,32 @@ export default class ContractStore extends BaseStore {
             if (this.is_from_positions) {
                 this.smart_chart.setIsChartLoading(true);
             }
-            this.smart_chart.saveAndClearTradeChartLayout();
+            this.smart_chart.saveAndClearTradeChartLayout('contract');
             this.smart_chart.setContractMode(true);
             WS.subscribeProposalOpenContract(this.contract_id.toString(), this.updateProposal, false);
         }
     }
 
+    @action.bound
+    onMountReplay(contract_id) {
+        if (contract_id) {
+            this.smart_chart = this.root_store.modules.smart_chart;
+            this.smart_chart.setContractMode(true);
+            this.replay_contract_id = contract_id;
+            WS.subscribeProposalOpenContract(this.replay_contract_id.toString(), this.populateConfig, false);
+        }
+    }
+
+    @action.bound
+    onUnmountReplay() {
+        this.forgetProposalOpenContract();
+        this.forget_id          = null;
+        this.replay_contract_id = null;
+        this.replay_info        = {};
+        this.smart_chart.setContractMode(false);
+        this.smart_chart.cleanupContractChartView();
+    }
+
     @action.bound
     accountSwitcherListener () {
         this.smart_chart.setContractMode(false);
@@ -165,6 +190,35 @@ export default class ContractStore extends BaseStore {
         this.onCloseContract();
     }
 
+    @action.bound
+    populateConfig(response) {
+        if ('error' in response) {
+            this.has_error     = true;
+            this.contract_config = {};
+            this.smart_chart.setIsChartLoading(false);
+            return;
+        }
+        if (isEmptyObject(response.proposal_open_contract)) {
+            this.has_error       = true;
+            this.error_message   = localize('Contract does not exist or does not belong to this client.');
+            this.contract_config = {};
+            this.smart_chart.setContractMode(false);
+            this.smart_chart.setIsChartLoading(false);
+            return;
+        }
+        if (+response.proposal_open_contract.contract_id !== +this.replay_contract_id) return;
+
+        this.forget_id   = response.proposal_open_contract.id;
+        this.replay_info = response.proposal_open_contract;
+
+        createChartBarrier(this.smart_chart, this.replay_info);
+        createChartMarkers(this.smart_chart, this.replay_info);
+        this.handleDigits(this.replay_info);
+
+        this.waitForChartListener(this.smart_chart);
+
+    }
+
     @action.bound
     updateProposal(response) {
         if ('error' in response) {
@@ -194,13 +248,13 @@ export default class ContractStore extends BaseStore {
 
         this.drawChart(this.smart_chart, this.contract_info);
 
-        this.handleDigits();
+        this.handleDigits(this.contract_info);
     }
 
     @action.bound
-    handleDigits() {
+    handleDigits(contract_info) {
         if (this.is_digit_contract) {
-            extendObservable(this.digits_info, getDigitInfo(this.digits_info, this.contract_info));
+            extendObservable(this.digits_info, getDigitInfo(this.digits_info, contract_info));
         }
     }
 
@@ -269,8 +323,8 @@ export default class ContractStore extends BaseStore {
     };
 
     @action.bound
-    removeSellError() {
-        delete this.sell_info.error_message;
+    removeErrorMessage() {
+        delete this.error_message;
     }
 
     @action.bound
@@ -282,6 +336,11 @@ export default class ContractStore extends BaseStore {
     // ---------------------------
     // TODO: currently this runs on each response, even if contract_info is deep equal previous one
 
+    @computed
+    get replay_config() {
+        return getChartConfig(this.replay_info, this.is_digit_contract);
+    }
+
     @computed
     get details_expiry() {
         return getDetailsExpiry(this);
@@ -294,7 +353,7 @@ export default class ContractStore extends BaseStore {
 
     @computed
     get display_status() {
-        return getDisplayStatus(this.contract_info);
+        return getDisplayStatus(this.contract_info.status ? this.contract_info : this.replay_info);
     }
 
     @computed
@@ -320,7 +379,7 @@ export default class ContractStore extends BaseStore {
 
     @computed
     get is_ended() {
-        return isEnded(this.contract_info);
+        return isEnded(this.contract_info.is_expired ? this.contract_info : this.replay_info);
     }
 
     @computed
@@ -345,6 +404,6 @@ export default class ContractStore extends BaseStore {
 
     @computed
     get is_digit_contract() {
-        return isDigitContract(this.contract_info.contract_type);
+        return isDigitContract(this.contract_info.contract_type || this.replay_info.contract_type);
     }
 }
diff --git a/src/javascript/app/Stores/Modules/SmartChart/Constants/markers.js b/src/javascript/app/Stores/Modules/SmartChart/Constants/markers.js
index 9cc54bbaf766..c9ecaa9295c2 100644
--- a/src/javascript/app/Stores/Modules/SmartChart/Constants/markers.js
+++ b/src/javascript/app/Stores/Modules/SmartChart/Constants/markers.js
@@ -61,7 +61,7 @@ export const MARKER_TYPES_CONFIG = {
     SPOT_SELL: {
         type          : 'SPOT_SELL',
         marker_config : MARKER_CONTENT_TYPES.SPOT_SELL,
-        content_config: { className: 'chart-spot__spot' },
+        content_config: { className: 'chart-spot__sell' },
     },
     SPOT_EXIT: {
         type          : 'SPOT_EXIT',
diff --git a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js
index 817565329a69..8281c3d587f3 100644
--- a/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js
+++ b/src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js
@@ -30,6 +30,7 @@ export default class SmartChartStore extends BaseStore {
     @observable scroll_to_left_epoch_offset = 0;
 
     @observable chart_id             = 'trade';
+    @observable replay_id            = 'contract-replay';
     @observable is_chart_loading     = false;
     @observable is_chart_ready       = false;
     @observable should_import_layout = false;
@@ -88,6 +89,7 @@ export default class SmartChartStore extends BaseStore {
 
     @action.bound
     onMount = () => {
+        // remove any barriers and markers before chart is ready
         if (this.trade_chart_layout && !isEmptyObject(this.trade_chart_layout)) {
             this.applySavedTradeChartLayout();
         }
@@ -96,8 +98,6 @@ export default class SmartChartStore extends BaseStore {
     @action.bound
     onUnmount = () => {
         this.symbol = null;
-        this.removeBarriers();
-        this.removeMarkers();
     };
 
     // --------- Set Contract Scroll to Left ---------
@@ -154,7 +154,9 @@ export default class SmartChartStore extends BaseStore {
 
     @action.bound
     updateBarrierColor(is_dark_mode) {
-        this.barriers.main.updateBarrierColor(is_dark_mode);
+        if (!isEmptyObject(this.barriers.main)) {
+            this.barriers.main.updateBarrierColor(is_dark_mode);
+        }
     }
 
     @action.bound
@@ -163,16 +165,17 @@ export default class SmartChartStore extends BaseStore {
     }
 
     @action.bound
-    saveAndClearTradeChartLayout() {
+    saveAndClearTradeChartLayout(chart_id) {
         this.should_export_layout = true;
         this.should_import_layout = false;
         this.trade_chart_symbol   = this.root_store.modules.trade.symbol;
-        this.chart_id             = 'contract';
+        this.chart_id             = chart_id;
     }
 
     @action.bound
     applySavedTradeChartLayout() {
         if (!this.trade_chart_layout) return;
+
         this.setIsChartLoading(true);
         this.should_export_layout = false;
         this.should_import_layout = true;
@@ -231,7 +234,7 @@ export default class SmartChartStore extends BaseStore {
 
     // ---------- Chart Settings ----------
     @computed
-    get settings() { // TODO: consider moving chart settings from ui_store to chart_store
+    get settings() {
         return (({ common, ui } = this.root_store) => ({
             assetInformation: ui.is_chart_asset_info_visible,
             countdown       : ui.is_chart_countdown_visible,
diff --git a/src/javascript/app/Stores/Modules/Trading/trade-store.js b/src/javascript/app/Stores/Modules/Trading/trade-store.js
index 481a1b9e3d4c..4524b934cc2d 100644
--- a/src/javascript/app/Stores/Modules/Trading/trade-store.js
+++ b/src/javascript/app/Stores/Modules/Trading/trade-store.js
@@ -371,7 +371,7 @@ export default class TradeStore extends BaseStore {
                 proposal_info      : {},
             });
 
-            if (!this.smart_chart.is_contract_mode) {
+            if (!this.root_store.modules.smart_chart.is_contract_mode) {
                 const is_barrier_changed = 'barrier_1' in new_state || 'barrier_2' in new_state;
                 if (is_barrier_changed) {
                     this.smart_chart.updateBarriers(this.barrier_1, this.barrier_2);
@@ -445,7 +445,7 @@ export default class TradeStore extends BaseStore {
             [contract_type]: getProposalInfo(this, response, obj_prev_contract_basis),
         };
 
-        if (!this.smart_chart.is_contract_mode) {
+        if (!this.root_store.modules.smart_chart.is_contract_mode) {
             const color = this.root_store.ui.is_dark_mode_on ? BARRIER_COLORS.DARK_GRAY : BARRIER_COLORS.GRAY;
             const barrier_config = { color };
             setChartBarrier(this.smart_chart, response, this.onChartBarrierChange, barrier_config);
diff --git a/src/javascript/app/Stores/ui-store.js b/src/javascript/app/Stores/ui-store.js
index a0261b1fc71e..fd7575b4ac43 100644
--- a/src/javascript/app/Stores/ui-store.js
+++ b/src/javascript/app/Stores/ui-store.js
@@ -53,8 +53,9 @@ export default class UIStore extends BaseStore {
     @observable duration_h             = 1;
     @observable duration_d             = 1;
 
-    @observable is_fully_blurred      = false;
-    @observable is_app_blurred        = false;
+    @observable is_fully_blurred = false;
+    @observable is_app_blurred   = false;
+    @observable is_route_blurred = false;
     @observable show_positions_toggle = true;
 
     getDurationFromUnit = (unit) => this[`duration_${unit}`];
@@ -118,6 +119,16 @@ export default class UIStore extends BaseStore {
         return this.screen_width <= MAX_TABLET_WIDTH;
     }
 
+    @action.bound
+    showRouteBlur() {
+        this.is_route_blurred = true;
+    }
+
+    @action.bound
+    hideRouteBlur() {
+        this.is_route_blurred = false;
+    }
+
     @action.bound
     showAppBlur() {
         this.is_app_blurred = true;
diff --git a/src/sass/app/_common/components/pl-card.scss b/src/sass/app/_common/components/pl-card.scss
index 85fe2aff5e0b..d8073c118820 100644
--- a/src/sass/app/_common/components/pl-card.scss
+++ b/src/sass/app/_common/components/pl-card.scss
@@ -10,14 +10,15 @@
         align-items: center;
 
         &__header {
+            margin-bottom: 0.2em;
             @include themify($themes) {
-                @include typeface(--small-center-normal-black);
-                color: themed('label_default_background');
+                @include typeface(--xsmall-center-normal-black);
+                color: themed('text_color');
             }
         }
         &__body {
             @include themify($themes) {
-                @include typeface(--paragraph-center-bold-black);
+                @include typeface(--small-center-bold-black);
                 color: themed('text_color');
             }
         }
diff --git a/src/sass/app/_common/drawer/contract-drawer.scss b/src/sass/app/_common/drawer/contract-drawer.scss
index 0ba3ad645e3f..47511e6c1479 100644
--- a/src/sass/app/_common/drawer/contract-drawer.scss
+++ b/src/sass/app/_common/drawer/contract-drawer.scss
@@ -46,6 +46,8 @@ $header-height: 4em;
         justify-content: flex-start;
         align-items: center;
         height: 56px;
+        cursor: pointer;
+
         @include typeface(--title-left-bold-black);
         @include themify($themes) {
             color: themed('text_primary_color');
@@ -61,19 +63,64 @@ $header-height: 4em;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    cursor: pointer;
     text-decoration: none;
     position: relative;
     border-radius: $BORDER_RADIUS;
     padding: 4px;
-    @include themify($themes) {
-        background-color: themed('background_cover');
-        color: themed('text_color');
+
+    &__grid {
+        display: grid;
+        grid-template-rows: 1fr auto;
+
+        &-underlying-trade, &-profit-payout {
+            grid-template-columns: 1fr 1fr;
+        }
+        &-profit-payout {
+            padding: 8px 0;
+            border-radius: $BORDER_RADIUS;
+            margin-left: -4px;
+            margin-right: -4px;
+            @include themify($themes) {
+                background: themed('hover_color');
+            }
+        }
+    }
+    .purchase-price {
+        font-weight: bold;
+        font-size: 1em;
+    }
+    &__underlying-name {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-weight: bold;
+        font-size: 1.2em;
     }
+    &__type {
+        font-size: 1.2em;
+        display: flex;
+        justify-content: flex-start;
+        font-weight: bold;
 
+        /* postcss-bem-linter: ignore */
+        .category-type {
+            .color1-fill {
+                @include themify($themes) {
+                    fill: themed('icon_color');
+                }
+            }
+        }
+    }
+    &__symbol {
+        margin-left: 0.5rem;
+        font-size: 1em;
+        line-height: 1.5;
+        max-width: 60px;
+    }
     &__header {
         display: flex;
         justify-content: space-evenly;
+        margin: 0.5em 0.2em 1em;
     }
     &__body {
         border-radius: $BORDER_RADIUS;
@@ -95,4 +142,25 @@ $header-height: 4em;
         justify-content: center;
         align-items: center;
     }
+    .result-details {
+        &__wrapper--is-open {
+            margin-top: 0.4em;
+        }
+        &__toggle {
+            margin: 0;
+            width: 100%;
+        }
+        &__label {
+            font-size: 0.8em;
+            text-align: left;
+        }
+        &__value {
+            font-size: 1em;
+            text-align: left;
+        }
+    }
+    @include themify($themes) {
+        background-color: themed('container_color');
+        color: themed('text_color');
+    }
 }
diff --git a/src/sass/app/_common/layout/footer.scss b/src/sass/app/_common/layout/footer.scss
index b07c70347b46..ca23e6d55312 100644
--- a/src/sass/app/_common/layout/footer.scss
+++ b/src/sass/app/_common/layout/footer.scss
@@ -20,6 +20,7 @@
     }
 
     &--is-blurred {
+        pointer-events: none;
         filter: blur(3px);
     }
     &--show {
diff --git a/src/sass/app/_common/layout/header.scss b/src/sass/app/_common/layout/header.scss
index 12f99aa9e906..f65eba6361a7 100644
--- a/src/sass/app/_common/layout/header.scss
+++ b/src/sass/app/_common/layout/header.scss
@@ -16,6 +16,7 @@
     }
 
     &--is-blurred {
+        pointer-events: none;
         filter: blur(3px);
     }
     &--show {
diff --git a/src/sass/app/_common/layout/layouts.scss b/src/sass/app/_common/layout/layouts.scss
index 2100d5be8856..9ed450350c3a 100644
--- a/src/sass/app/_common/layout/layouts.scss
+++ b/src/sass/app/_common/layout/layouts.scss
@@ -62,7 +62,7 @@
     }
 }
 
-/** @define trade-container */
+/** @define trade-container; weak */
 .trade-container {
     position: relative;
     padding: 0.8em 1.2em 0;
@@ -72,6 +72,70 @@
     will-change: transform;
     overflow: hidden;
 
+    &__replay {
+        display: flex;
+        flex-direction: row;
+        margin: 16px;
+        height: calc(100vh - 115px);
+        border-radius: $BORDER_RADIUS;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+
+        .contract-drawer {
+            top: -16px;
+            left: 16px;
+            height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT} - (#{$POSITIONS_DRAWER_MARGIN} * 4));
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+
+            &-wrapper {
+                z-index: 4;
+            }
+        }
+        .replay-chart__container {
+            width: 100%;
+            position: relative;
+            margin-left: 252px;
+
+            .smartcharts {
+                left: 2px;
+                width: calc(100vw - 300px);
+                height: calc(100% - 66px);
+                top: 66px;
+
+                .ciq-chart {
+                    .cq-top-ui-widgets, & .info-box {
+                        transition: transform 0.25s ease;
+
+                        .cq-symbols-display {
+                            z-index: 1;
+
+                            &.ciq-disabled {
+                                display: none;
+                            }
+                        }
+                        .info-box-container {
+                            transform: none;
+                            opacity: 1;
+                            left: 1px;
+
+                            .chart-close-btn {
+                                display: none;
+                            }
+                        }
+                    }
+                    .ciq-asset-information {
+                        top: 75px;
+                    }
+                    .stx_jump_today.home > svg {
+                        top: 6px;
+                        left: 8px;
+                        padding: 0;
+                        position: absolute;
+                    }
+                }
+            }
+        }
+    }
     @media (max-width: 768px) {
         flex-direction: column;
     }
@@ -116,6 +180,9 @@
             .cq-symbols-display {
                 display: none;
             }
+            .cq-chart-controls {
+                display: none;
+            }
         }
         @include themify($themes) {
             background-color: themed('container_color');
@@ -144,6 +211,9 @@
                 padding: 0;
                 position: absolute;
             }
+            div.stx-marker {
+                z-index: 2;
+            }
         }
         div.cq-chart-control-left {
             .cq-top-ui-widgets {
diff --git a/src/sass/app/modules/contract.scss b/src/sass/app/modules/contract.scss
index 503459332f94..6f7fd2a53c3d 100644
--- a/src/sass/app/modules/contract.scss
+++ b/src/sass/app/modules/contract.scss
@@ -157,6 +157,17 @@ $CONTRACT_INFO_BOX_PADDING: 1.6em;
                 @include typeface(--paragraph-left-normal-black, unset);
                 max-width: 360px;
             }
+            &:before {
+                position: absolute;
+                content: '';
+                background: rgba(42, 48, 82, 0.02);
+                filter: blur(2px);
+                z-index: 0;
+                top: -2px;
+                left: -2px;
+                width: calc(100% + 4px);
+                height: calc(100% + 4px);
+            }
         }
         .expired {
             display: flex;
@@ -264,7 +275,7 @@ $CONTRACT_INFO_BOX_PADDING: 1.6em;
         top: 0;
     }
 }
-
+// TODO: THEMIFY
 // Dark Theme
 .theme--dark {
     .contract-container {
@@ -300,6 +311,9 @@ $CONTRACT_INFO_BOX_PADDING: 1.6em;
             background: rgba(16, 19, 32, 0.6); // this is color dark blue 2 with 0.6 opacity
 
             &-longcode {
+                &:before {
+                    background: rgba(16, 19, 32, 0.25);
+                }
                 &-text {
                     color: $COLOR_WHITE;
                 }
diff --git a/src/sass/app/modules/smart-chart.scss b/src/sass/app/modules/smart-chart.scss
index dee6758d50e5..ceae52791698 100644
--- a/src/sass/app/modules/smart-chart.scss
+++ b/src/sass/app/modules/smart-chart.scss
@@ -42,6 +42,17 @@
         height: 24px;
         border-radius: 50%;
     }
+    &__sell {
+        border-radius: 50%;
+        width: 2px;
+        height: 2px;
+        margin-left: -2px;
+        margin-bottom: -1px;
+        @include themify($themes) {
+            background-color: themed('tick_step_marked');
+            border: 2px solid themed('tick_step_marked');
+        }
+    }
 }
 
 /** @define chart-spot-label */