diff --git a/src/common/constants.js b/src/common/constants.js
index fdf9fff8202..4ac67987021 100644
--- a/src/common/constants.js
+++ b/src/common/constants.js
@@ -95,3 +95,4 @@ export const linkedin_url_career = 'https://www.linkedin.com/company/derivdotcom
 export const twitter_non_eu_url = 'https://twitter.com/derivdotcom/'
 export const twitter_uk_url = 'https://www.twitter.com/deriv_uk/'
 export const twitter_eu_url = 'https://www.twitter.com/deriv_eu/'
+export const cms_assets_end_point = 'https://cms.deriv.cloud/assets/'
diff --git a/src/pages/academy/blog/components/side-subscription-banner/index.js b/src/pages/academy/blog/components/side-subscription-banner/index.js
index c904121a2be..bb327c5f13a 100644
--- a/src/pages/academy/blog/components/side-subscription-banner/index.js
+++ b/src/pages/academy/blog/components/side-subscription-banner/index.js
@@ -249,7 +249,7 @@ const ArticleEmailBanner = () => {
             return setIsSubmitting(false)
         }
 
-        customerioData(formattedEmail)
+        customerioData()
         submit_status && setSubmitStatus('success')
         clearName()
         clearEmail()
@@ -295,7 +295,7 @@ const ArticleEmailBanner = () => {
                                     src={CrossIcon}
                                     alt="error icon"
                                     onClick={() => {
-                                        clearName(name)
+                                        clearName()
                                     }}
                                 />
                             </>
@@ -324,7 +324,7 @@ const ArticleEmailBanner = () => {
                                     src={CrossIcon}
                                     alt="error icon"
                                     onClick={() => {
-                                        clearEmail(email)
+                                        clearEmail()
                                     }}
                                 />
                             </>
diff --git a/src/pages/academy/blog/posts/_style.js b/src/pages/academy/blog/posts/_style.js
index f8fdc474dea..4bb3e8fe9bf 100644
--- a/src/pages/academy/blog/posts/_style.js
+++ b/src/pages/academy/blog/posts/_style.js
@@ -164,7 +164,7 @@ export const PreviewContainer = styled(Box)`
     font-size: 16px;
     max-width: 792px;
     width: 100%;
-    padding-bottom: 16px;
+    margin-bottom: 40px;
 
     & br {
         display: none;
@@ -214,7 +214,8 @@ export const PreviewContainer = styled(Box)`
         }
     }
     & img {
-        max-width: 100%;
+        max-width: 610px;
+        width: 100%;
         height: auto;
         display: block;
         margin: auto;
diff --git a/src/pages/academy/blog/posts/preview/index.js b/src/pages/academy/blog/posts/preview/index.js
index 287df2cd3c6..6e726868e5f 100644
--- a/src/pages/academy/blog/posts/preview/index.js
+++ b/src/pages/academy/blog/posts/preview/index.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { graphql, useStaticQuery } from 'gatsby'
 import {
     Background,
     HeroContainer,
@@ -28,105 +27,49 @@ import SocialSharing from '../../../../blog/_social-sharing'
 import { localize, WithIntl } from 'components/localization'
 import Layout from 'components/layout/layout'
 import { SEO, Show, Box, Flex, SectionContainer } from 'components/containers'
-import { Header, QueryImage } from 'components/elements'
+import { Header } from 'components/elements'
 import { convertDate, isBrowser } from 'common/utility'
+import { cms_assets_end_point } from 'common/constants'
 
-const query_preview = graphql`
-    query Preview {
-        directus {
-            blog {
-                id
-                slug
-                blog_title
-                published_date
-                read_time_in_minutes
-                blog_post
-                author {
-                    id
-                    name
-                    image {
-                        id
-                        imageFile {
-                            childImageSharp {
-                                gatsbyImageData
-                            }
-                        }
-                    }
-                }
-                main_image {
-                    id
-                    imageFile {
-                        childImageSharp {
-                            gatsbyImageData
-                        }
-                    }
-                }
-                tags {
-                    id
-                    tags_id {
-                        id
-                        tag_name
-                    }
-                }
-                footer_banners {
-                    id
-                    cta_url
-                    name
-                    desktop_banner_image {
-                        id
-                        imageFile {
-                            childImageSharp {
-                                gatsbyImageData
-                            }
-                        }
-                    }
-                    mobile_banner_image {
-                        id
-                        imageFile {
-                            childImageSharp {
-                                gatsbyImageData
-                            }
-                        }
-                    }
-                }
-                side_banners {
-                    id
-                    cta_url
-                    name
-                    banner_image {
-                        id
-                        imageFile {
-                            childImageSharp {
-                                gatsbyImageData
-                            }
-                        }
-                    }
+const BlogPreview = () => {
+    const [data, setData] = useState(null)
+    const [id, setId] = useState(null)
+    const end_point_url = 'https://cms.deriv.cloud/items/blog/'
+
+    useEffect(() => {
+        const getPreviewId = () => {
+            if (isBrowser()) {
+                const query_string = window.location.search
+                const url_params = new URLSearchParams(query_string)
+                const params = url_params.get('id')
+                if (params) {
+                    setId(params)
                 }
             }
         }
-    }
-`
 
-const BlogPreview = (props) => {
-    const data = useStaticQuery(query_preview)
-    const pathname = props.pageContext.pathname
-    const [post_data, setPostData] = useState()
-    const [isMounted, setMounted] = useState(false)
+        const fetchBlogPreview = async () => {
+            const url = `${end_point_url}${id}?fields=*.*.*.*.*`
+            const res = await fetch(url, { cache: 'no-store' })
+            const data = await res.json()
+            return data
+        }
 
-    useEffect(() => {
-        setMounted(true)
+        const getPreviews = async () => {
+            const dataFromServer = await fetchBlogPreview()
+            setData(dataFromServer)
+            if (dataFromServer) {
+                window.scrollTo(0, 0)
+            }
+        }
 
-        if (isMounted && isBrowser()) {
-            const query_string = window.location.search
-            const url_params = new URLSearchParams(query_string)
-            const params = url_params.get('id')
-            const item_data = data.directus.blog.find((items) => {
-                return items.id == params
-            })
-            setPostData(item_data)
-            window.scrollTo(0, 0)
+        getPreviewId()
+        if (id) {
+            getPreviews()
         }
-    }, [isMounted])
+    }, [id])
+
+    const post_data = data?.data
 
     const footer_banner_data = post_data?.footer_banners
     const side_banner_data = post_data?.side_banners
@@ -136,7 +79,7 @@ const BlogPreview = (props) => {
         max_w_tablet: '320px',
         isExternal: true,
         redirectLink: side_banner_data?.cta_url,
-        imgSrcDesktop: side_banner_data?.banner_image?.imageFile,
+        imgSrcDesktop: side_banner_data?.banner_image?.id,
     }
 
     const footer_banner_details = {
@@ -144,35 +87,31 @@ const BlogPreview = (props) => {
         max_w_tablet: '580px',
         isExternal: true,
         redirectLink: footer_banner_data?.cta_url,
-        imgSrcDesktop: footer_banner_data?.desktop_banner_image?.imageFile,
-        imgSrcMobile: footer_banner_data?.mobile_banner_image?.imageFile,
+        imgSrcDesktop: footer_banner_data?.desktop_banner_image?.id,
+        imgSrcMobile: footer_banner_data?.mobile_banner_image?.id,
     }
 
     return (
         <Layout>
-            <SEO
-                description={
-                    'Checkout latest trading news, market updates, useful tips, and how-to guides for Deriv products and online trading platforms on our official blog.'
-                }
-                title={'Blog Post Preview | Deriv Academy'}
-                no_index
-            />
+            <SEO description={post_data?.meta_description} title={post_data?.meta_title} no_index />
             <>
-                {isMounted && (
+                {post_data && (
                     <SectionContainer padding="0" position="relative">
                         <Background>
                             <HeroContainer>
                                 <HeroLeftWrapper width="100%">
                                     <InfoText mb="16px" size="14px">
                                         {post_data?.published_date &&
-                                            localize(convertDate(post_data?.published_date))}
+                                            convertDate(post_data?.published_date)}
                                     </InfoText>
                                     <Header as="h1" type="page-title">
                                         {post_data?.blog_title}
                                     </Header>
                                     <InfoText size="14px" mt="16px">
                                         {post_data?.read_time_in_minutes &&
-                                            localize(post_data?.read_time_in_minutes + ' min read')}
+                                            post_data?.read_time_in_minutes +
+                                                ' ' +
+                                                localize('min read')}
                                     </InfoText>
                                     <Show.Mobile min_width="laptop">
                                         <SideBarContainer fd="column" mr="126px" height="auto">
@@ -203,11 +142,8 @@ const BlogPreview = (props) => {
                                                 <>
                                                     {post_data?.author?.image && (
                                                         <WriterImage>
-                                                            <QueryImage
-                                                                data={
-                                                                    post_data?.author?.image
-                                                                        ?.imageFile
-                                                                }
+                                                            <img
+                                                                src={`${cms_assets_end_point}${post_data?.author?.image.id}`}
                                                                 alt=""
                                                             />
                                                         </WriterImage>
@@ -218,9 +154,7 @@ const BlogPreview = (props) => {
                                                     <WrittenbyText color="grey-5" size="12px">
                                                         {localize('Written by')}
                                                     </WrittenbyText>
-                                                    <InfoText>
-                                                        {localize(post_data?.author?.name)}
-                                                    </InfoText>
+                                                    <InfoText>{post_data?.author?.name}</InfoText>
                                                 </Box>
                                             </Flex>
                                         )}
@@ -228,8 +162,8 @@ const BlogPreview = (props) => {
                                 </HeroLeftWrapper>
                                 <HeroRightWrapper>
                                     <HeroImageContainer tabletL={{ mt: '24px' }}>
-                                        <QueryImage
-                                            data={post_data?.main_image?.imageFile}
+                                        <img
+                                            src={`${cms_assets_end_point}${post_data?.main_image?.id}`}
                                             alt=""
                                         />
                                     </HeroImageContainer>
@@ -245,10 +179,8 @@ const BlogPreview = (props) => {
                                             <>
                                                 {post_data?.author?.image && (
                                                     <WriterImage>
-                                                        <QueryImage
-                                                            data={
-                                                                post_data?.author?.image?.imageFile
-                                                            }
+                                                        <img
+                                                            src={`${cms_assets_end_point}${post_data?.author?.image.id}`}
                                                             alt=""
                                                         />
                                                     </WriterImage>
@@ -259,9 +191,7 @@ const BlogPreview = (props) => {
                                                 <WrittenbyText color="grey-5" size="12px">
                                                     {localize('Written by')}
                                                 </WrittenbyText>
-                                                <InfoText>
-                                                    {localize(post_data?.author?.name)}
-                                                </InfoText>
+                                                <InfoText>{post_data?.author?.name}</InfoText>
                                             </Box>
                                         </Flex>
                                     )}
@@ -288,7 +218,7 @@ const BlogPreview = (props) => {
                                             })}
                                         </Flex>
                                         {side_banner_data_details && (
-                                            <Banner detailsObj={side_banner_data_details} />
+                                            <Banner detailsPreviewObj={side_banner_data_details} />
                                         )}
                                         <DesktopWrapper>
                                             <ArticleEmailBanner />
@@ -307,19 +237,21 @@ const BlogPreview = (props) => {
                                     />
 
                                     {footer_banner_details && (
-                                        <Banner detailsObj={footer_banner_details} />
+                                        <Banner detailsPreviewObj={footer_banner_details} />
                                     )}
                                     <SocialComponentsWrapper>
                                         <LeftSocialComponents />
                                         <RightSocialComponents>
-                                            <SocialSharing pathname={pathname} />
+                                            <SocialSharing />
                                         </RightSocialComponents>
                                     </SocialComponentsWrapper>
 
                                     {side_banner_data_details && (
                                         <Show.Mobile>
                                             <Flex mt="24px">
-                                                <Banner detailsObj={side_banner_data_details} />
+                                                <Banner
+                                                    detailsPreviewObj={side_banner_data_details}
+                                                />
                                             </Flex>
                                         </Show.Mobile>
                                     )}
diff --git a/src/pages/blog/_social-sharing.js b/src/pages/blog/_social-sharing.js
index a53988eed8d..7479b1128f0 100644
--- a/src/pages/blog/_social-sharing.js
+++ b/src/pages/blog/_social-sharing.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { Flex } from 'components/containers'
 import { LocalizedLink } from 'components/localization'
 import { Header } from 'components/elements/typography'
@@ -29,74 +28,63 @@ const StyledFlex = styled(Flex)`
     }
 `
 
-const SocialSharing = ({ pathname }) => {
+const SocialSharing = () => {
+    const url = typeof window !== 'undefined' ? window.location.href : ''
     return (
-        <Flex>
-            <StyledFlex
-                jc="flex-end"
-                ai="center"
-                tablet_direction="column"
-                tablet_jc="flex-end"
-                tablet_ai="flex-end"
-            >
-                <HeaderWrapper>
-                    <Header type="paragraph-2" weight="normal">
-                        Share this post
-                    </Header>
-                </HeaderWrapper>
-                <IconWrapper>
-                    <Flex jc="space-between">
-                        <LocalizedLink
-                            external
-                            to={
-                                'https://www.facebook.com/sharer/sharer.php?u=https://deriv.com' +
-                                pathname
-                            }
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <img src={FacebookIcon} width="24px" height="24px" />
-                        </LocalizedLink>
-                        <LocalizedLink
-                            external
-                            to={
-                                'http://www.linkedin.com/shareArticle?mini=true&url=https://deriv.com' +
-                                pathname
-                            }
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <img src={LinkedInIcon} width="24px" height="24px" />
-                        </LocalizedLink>
-                        <LocalizedLink
-                            external
-                            to={'https://www.twitter.com/share?url=https://deriv.com' + pathname}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <img src={TwitterIcon} width="24px" height="24px" />
-                        </LocalizedLink>
-                        <LocalizedLink
-                            external
-                            to={
-                                'https://pinterest.com/pin/create/button/?url=https://deriv.com' +
-                                pathname +
-                                '&media=&description='
-                            }
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <img src={PinterestIcon} width="24px" height="24px" />
-                        </LocalizedLink>
-                    </Flex>
-                </IconWrapper>
-            </StyledFlex>
-        </Flex>
+        url && (
+            <Flex>
+                <StyledFlex
+                    jc="flex-end"
+                    ai="center"
+                    tablet_direction="column"
+                    tablet_jc="flex-end"
+                    tablet_ai="flex-end"
+                >
+                    <HeaderWrapper>
+                        <Header type="paragraph-2" weight="normal">
+                            Share this post
+                        </Header>
+                    </HeaderWrapper>
+                    <IconWrapper>
+                        <Flex jc="space-between">
+                            <LocalizedLink
+                                external
+                                to={`https://www.facebook.com/sharer/sharer.php?u=${url}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <img src={FacebookIcon} width="24px" height="24px" />
+                            </LocalizedLink>
+                            <LocalizedLink
+                                external
+                                to={`http://www.linkedin.com/shareArticle?mini=true&url=${url}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <img src={LinkedInIcon} width="24px" height="24px" />
+                            </LocalizedLink>
+                            <LocalizedLink
+                                external
+                                to={`https://www.twitter.com/share?url=${url}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <img src={TwitterIcon} width="24px" height="24px" />
+                            </LocalizedLink>
+                            <LocalizedLink
+                                external
+                                to={`https://pinterest.com/pin/create/button/?url=${url}&media=&description=`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <img src={PinterestIcon} width="24px" height="24px" />
+                            </LocalizedLink>
+                        </Flex>
+                    </IconWrapper>
+                </StyledFlex>
+            </Flex>
+        )
     )
 }
 
-SocialSharing.propTypes = {
-    pathname: PropTypes.string,
-}
-
 export default SocialSharing
diff --git a/src/pages/blog/components/_banner.js b/src/pages/blog/components/_banner.js
index 7d3de72d6d7..665cb95c8e2 100644
--- a/src/pages/blog/components/_banner.js
+++ b/src/pages/blog/components/_banner.js
@@ -4,12 +4,17 @@ import PropTypes from 'prop-types'
 import { QueryImage } from 'components/elements'
 import { Flex } from 'components/containers'
 import { LocalizedLink } from 'components/localization'
+import { cms_assets_end_point } from 'common/constants'
 import device from 'themes/device'
 
 const ParentWrapper = styled(Flex)`
     max-width: ${(props) => (props.max_w ? props.max_w : '792px')};
     margin: 0 auto;
 
+    img {
+        width: 100%;
+    }
+
     @media ${device.tabletS} {
         max-width: ${(props) => (props.max_w_tablet ? props.max_w_tablet : '100%')};
     }
@@ -27,8 +32,8 @@ const MobileWrapper = styled.div`
     }
 `
 
-const Banner = ({ detailsObj }) => {
-    return (
+const Banner = ({ detailsObj, detailsPreviewObj }) => {
+    return detailsObj ? (
         <ParentWrapper max_w={detailsObj.max_w_value} max_w_tablet={detailsObj.max_w_tablet}>
             <LocalizedLink
                 external={detailsObj.isExternal}
@@ -62,11 +67,49 @@ const Banner = ({ detailsObj }) => {
                 )}
             </LocalizedLink>
         </ParentWrapper>
+    ) : (
+        <ParentWrapper
+            max_w={detailsPreviewObj.max_w_value}
+            max_w_tablet={detailsPreviewObj.max_w_tablet}
+        >
+            <LocalizedLink
+                external={detailsPreviewObj.isExternal}
+                to={detailsPreviewObj.redirectLink}
+                rel="noopener noreferrer"
+                target="_blank"
+            >
+                {detailsPreviewObj.imgSrcDesktop && !detailsPreviewObj.imgSrcMobile && (
+                    <>
+                        <img
+                            src={`${cms_assets_end_point}${detailsPreviewObj.imgSrcDesktop}`}
+                            alt={detailsPreviewObj.imgAltDesktop}
+                        />
+                    </>
+                )}
+                {detailsPreviewObj.imgSrcDesktop && detailsPreviewObj.imgSrcMobile && (
+                    <>
+                        <DesktopWrapper>
+                            <img
+                                src={`${cms_assets_end_point}${detailsPreviewObj.imgSrcDesktop}`}
+                                alt={detailsPreviewObj.imgAltDesktop}
+                            />
+                        </DesktopWrapper>
+                        <MobileWrapper>
+                            <img
+                                src={`${cms_assets_end_point}${detailsPreviewObj.imgSrcMobile}`}
+                                alt={detailsPreviewObj.imgAltMobile}
+                            />
+                        </MobileWrapper>
+                    </>
+                )}
+            </LocalizedLink>
+        </ParentWrapper>
     )
 }
 
 Banner.propTypes = {
     detailsObj: PropTypes.object,
+    detailsPreviewObj: PropTypes.object,
 }
 
 export default Banner
diff --git a/src/pages/blog/social-sharing/index.js b/src/pages/blog/social-sharing/index.js
deleted file mode 100644
index cc1c8bfb8c7..00000000000
--- a/src/pages/blog/social-sharing/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import SocialSharing from '../_social-sharing'
-import { WithIntl } from 'components/localization'
-import Layout from 'components/layout/layout'
-
-const Index = (props) => {
-    const pathname = props.pageContext.pathname
-    return (
-        <Layout>
-            <SocialSharing pathname={pathname} />
-        </Layout>
-    )
-}
-
-Index.propTypes = {
-    pageContext: PropTypes.object,
-}
-
-export default WithIntl()(Index)
diff --git a/src/templates/article.js b/src/templates/article.js
index 4e3054efbda..4bdc0be635e 100644
--- a/src/templates/article.js
+++ b/src/templates/article.js
@@ -38,12 +38,12 @@ const ArticlesTemplate = (props) => {
         isMounted && window.scrollTo(0, 0)
     }, [isMounted])
 
-    const pathname = props.pageContext.pathname
     const post_data = props.data.directus.blog[0]
     const footer_banner_data = post_data?.footer_banners
     const side_banner_data = post_data?.side_banners
     const meta_title = post_data?.meta_title
     const meta_description = post_data?.meta_description
+    const og_image = post_data?.og_image?.imageFile.childImageSharp.fixed.src
 
     const side_banner_data_details = {
         max_w_value: '328px',
@@ -65,9 +65,20 @@ const ArticlesTemplate = (props) => {
         imgAltMobile: footer_banner_data?.mobile_banner_image?.description,
     }
 
+    const meta_attributes = {
+        og_type: 'website',
+        og_img_width: '600',
+        og_img_height: '315',
+        og_img: og_image,
+    }
+
     return (
         <Layout>
-            <SEO description={meta_description} title={meta_title} />
+            <SEO
+                description={meta_description}
+                title={meta_title}
+                meta_attributes={meta_attributes}
+            />
             <>
                 {isMounted && (
                     <SectionContainer padding="0" position="relative">
@@ -221,7 +232,7 @@ const ArticlesTemplate = (props) => {
                                     <SocialComponentsWrapper>
                                         <LeftSocialComponents />
                                         <RightSocialComponents>
-                                            <SocialSharing pathname={pathname} />
+                                            <SocialSharing />
                                         </RightSocialComponents>
                                     </SocialComponentsWrapper>
 
@@ -286,6 +297,17 @@ export const query = graphql`
                         }
                     }
                 }
+                og_image: main_image {
+                    id
+                    imageFile {
+                        childImageSharp {
+                            gatsbyImageData
+                            fixed(width: 600) {
+                                src
+                            }
+                        }
+                    }
+                }
                 tags {
                     id
                     tags_id {