diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js
index ed24b8105f0..6aab0be71b7 100644
--- a/src/pages/blog/_recent-featured-posts.js
+++ b/src/pages/blog/_recent-featured-posts.js
@@ -1,12 +1,7 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Clock from './recent-featured-posts/images/clock.svg'
 import Dot from './recent-featured-posts/images/dot.svg'
-import {
-    recent_article_data,
-    featured_article_data,
-    article_data,
-    article_data_2,
-} from './recent-featured-posts/_data'
 import {
     StyledContainer,
     StyledTabs,
@@ -21,7 +16,6 @@ import {
     BottomDescription,
     SmallArticle,
     SmallArticleImageWrapper,
-    SmallArticleImage,
     SmallArticleCategories,
     SmallArticleTopContent,
     SmallArticleDateTimeDesktop,
@@ -35,8 +29,10 @@ import {
     MobileDotIcon,
     MobileHeader,
 } from './recent-featured-posts/_style'
-import { Carousel, Tabs, Header } from 'components/elements'
-import { localize, WithIntl } from 'components/localization'
+import { convertDate } from 'common/utility'
+import { Flex } from 'components/containers'
+import { QueryImage, Carousel, Tabs, Header } from 'components/elements'
+import { localize, WithIntl, Localize } from 'components/localization'
 
 // Settings for carousel
 const settings = {
@@ -55,11 +51,13 @@ const settings = {
     },
 }
 
-const RecentFeaturedPosts = () => {
-    const recent = recent_article_data
-    const featured = featured_article_data
-    const articles = article_data
-    const articles_2 = article_data_2
+const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
+    const recents = recent_data.slice(1)
+    const headline_recent = recent_data[0]
+    const featureds = featured_data.slice(1)
+    const headline_featured = featured_data[0]
+
+    const truncateString = (input) => (input.length > 40 ? `${input.substring(0, 40)}...` : input)
 
     return (
         <StyledContainer m="20px auto 0" fd="column" ai="center">
@@ -76,18 +74,30 @@ const RecentFeaturedPosts = () => {
                 <Tabs.Panel label={localize('Recent posts')}>
                     <ArticleContentWrapper>
                         <LeftContent>
-                            <RedirectLink to={recent.link}>
-                                <MainArticle image={recent.image}>
+                            <RedirectLink to={`/academy/blog/posts/${headline_recent.slug}`}>
+                                <MainArticle>
+                                    <QueryImage
+                                        className="main-article-bg"
+                                        data={headline_recent.main_image.imageFile}
+                                        alt={headline_recent.main_image.description || ''}
+                                        height="464px"
+                                    />
                                     <Description>
                                         <TagParentWrapper>
-                                            <TagWrapper>
-                                                <StyledCategories>
-                                                    {recent.category}
-                                                </StyledCategories>
-                                            </TagWrapper>
+                                            {headline_recent.tags.map((article) => {
+                                                return (
+                                                    <>
+                                                        <TagWrapper key={article.id}>
+                                                            <StyledCategories>
+                                                                {article.tags_id.tag_name}
+                                                            </StyledCategories>
+                                                        </TagWrapper>
+                                                    </>
+                                                )
+                                            })}
                                         </TagParentWrapper>
                                         <Header as="h3" type="heading-3" color="white" mb="5px">
-                                            {recent.title}
+                                            {headline_recent.blog_title}
                                         </Header>
                                         <Header
                                             as="p"
@@ -95,51 +105,79 @@ const RecentFeaturedPosts = () => {
                                             color="white"
                                             weight="normal"
                                         >
-                                            {recent.description}
+                                            {headline_recent.blog_description}
                                         </Header>
                                     </Description>
                                     <BottomDescription>
-                                        {recent.date}
+                                        {headline_recent?.published_date &&
+                                            convertDate(headline_recent?.published_date)}
                                         <ClockIcon src={Clock} />
-                                        {recent.reading_time} min read
+                                        {headline_recent.read_time_in_minutes}{' '}
+                                        <Localize translate_text="min read" />
                                     </BottomDescription>
                                 </MainArticle>
                             </RedirectLink>
                         </LeftContent>
                         <RightContent>
                             <Carousel {...settings}>
-                                {articles.map((article) => {
+                                {recents.map((article) => {
                                     return (
-                                        <RedirectLink to={article.link} key={article.title}>
+                                        <RedirectLink
+                                            to={`/academy/blog/posts/${article.slug}`}
+                                            key={article.slug}
+                                        >
                                             <SmallArticle>
                                                 <SmallArticleLeftContent>
                                                     <SmallArticleImageWrapper>
-                                                        <SmallArticleImage
-                                                            src={article.image}
-                                                            alt={article.title}
+                                                        <QueryImage
+                                                            className="small-article-bg"
+                                                            data={article.main_image.imageFile}
+                                                            alt={
+                                                                article.main_image.description || ''
+                                                            }
+                                                            height="102px"
                                                         />
                                                     </SmallArticleImageWrapper>
                                                 </SmallArticleLeftContent>
                                                 <SmallArticleRightContent>
                                                     <SmallArticleTopContent>
-                                                        <SmallArticleCategories>
-                                                            {article.category}
-                                                        </SmallArticleCategories>
+                                                        <Flex
+                                                            jc="start"
+                                                            laptopM={{ flexDirection: 'start' }}
+                                                        >
+                                                            {article.tags &&
+                                                                article.tags
+                                                                    .slice(0, 1)
+                                                                    .map((tag) => (
+                                                                        <SmallArticleCategories
+                                                                            key={tag.id}
+                                                                        >
+                                                                            {tag.tags_id.tag_name}
+                                                                        </SmallArticleCategories>
+                                                                    ))}
+                                                        </Flex>
                                                         <SmallArticleDateTimeMobile>
-                                                            {article.date}
+                                                            {article?.published_date &&
+                                                                convertDate(
+                                                                    article?.published_date,
+                                                                )}
                                                             <MobileDotIcon src={Dot} />
-                                                            {article.reading_time} min
+                                                            {article.read_time_in_minutes}{' '}
+                                                            <Localize translate_text="min" />
                                                         </SmallArticleDateTimeMobile>
                                                         <Header as="p" type="paragraph-1">
-                                                            {article.title}
+                                                            {truncateString(article.blog_title)}
                                                         </Header>
                                                     </SmallArticleTopContent>
                                                     <MobileHeader as="p" type="paragraph-1">
-                                                        {article.title}
+                                                        {truncateString(article.blog_title)}
                                                     </MobileHeader>
                                                     <SmallArticleDateTimeDesktop>
-                                                        {article.date} <DotIcon src={Dot} />
-                                                        {article.reading_time} min read
+                                                        {article?.published_date &&
+                                                            convertDate(article?.published_date)}
+                                                        <DotIcon src={Dot} />
+                                                        {article.read_time_in_minutes}{' '}
+                                                        <Localize translate_text="min read" />
                                                     </SmallArticleDateTimeDesktop>
                                                 </SmallArticleRightContent>
                                             </SmallArticle>
@@ -153,18 +191,30 @@ const RecentFeaturedPosts = () => {
                 <Tabs.Panel label={localize('Featured posts')}>
                     <ArticleContentWrapper>
                         <LeftContent>
-                            <RedirectLink to={featured.link}>
-                                <MainArticle image={featured.image}>
+                            <RedirectLink to={`/academy/blog/posts/${headline_featured.slug}`}>
+                                <MainArticle>
+                                    <QueryImage
+                                        className="main-article-bg"
+                                        data={headline_featured.main_image.imageFile}
+                                        alt={headline_featured.main_image.description || ''}
+                                        height="464px"
+                                    />
                                     <Description>
                                         <TagParentWrapper>
-                                            <TagWrapper>
-                                                <StyledCategories>
-                                                    {featured.category}
-                                                </StyledCategories>
-                                            </TagWrapper>
+                                            {headline_featured.tags.map((article) => {
+                                                return (
+                                                    <>
+                                                        <TagWrapper key={article.id}>
+                                                            <StyledCategories>
+                                                                {article.tags_id.tag_name}
+                                                            </StyledCategories>
+                                                        </TagWrapper>
+                                                    </>
+                                                )
+                                            })}
                                         </TagParentWrapper>
                                         <Header as="h3" type="heading-3" color="white" mb="5px">
-                                            {featured.title}
+                                            {headline_featured.blog_title}
                                         </Header>
                                         <Header
                                             as="p"
@@ -172,50 +222,79 @@ const RecentFeaturedPosts = () => {
                                             color="white"
                                             weight="normal"
                                         >
-                                            {featured.description}
+                                            {headline_featured.blog_description}
                                         </Header>
                                     </Description>
                                     <BottomDescription>
-                                        {featured.date} <ClockIcon src={Clock} />
-                                        {featured.reading_time} min read
+                                        {headline_featured.published_date &&
+                                            convertDate(headline_featured?.published_date)}
+                                        <ClockIcon src={Clock} />
+                                        {headline_featured.read_time_in_minutes}{' '}
+                                        <Localize translate_text="min read" />
                                     </BottomDescription>
                                 </MainArticle>
                             </RedirectLink>
                         </LeftContent>
                         <RightContent>
                             <Carousel {...settings}>
-                                {articles_2.map((article) => {
+                                {featureds.map((article) => {
                                     return (
-                                        <RedirectLink to={article.link} key={article.title}>
+                                        <RedirectLink
+                                            to={`/academy/blog/posts/${article.slug}`}
+                                            key={article.slug}
+                                        >
                                             <SmallArticle>
                                                 <SmallArticleLeftContent>
                                                     <SmallArticleImageWrapper>
-                                                        <SmallArticleImage
-                                                            src={article.image}
-                                                            alt={article.title}
+                                                        <QueryImage
+                                                            className="small-article-bg"
+                                                            data={article.main_image.imageFile}
+                                                            alt={
+                                                                article.main_image.description || ''
+                                                            }
+                                                            height="102px"
                                                         />
                                                     </SmallArticleImageWrapper>
                                                 </SmallArticleLeftContent>
                                                 <SmallArticleRightContent>
                                                     <SmallArticleTopContent>
-                                                        <SmallArticleCategories>
-                                                            {article.category}
-                                                        </SmallArticleCategories>
+                                                        <Flex
+                                                            jc="start"
+                                                            laptopM={{ flexDirection: 'start' }}
+                                                        >
+                                                            {article.tags &&
+                                                                article.tags
+                                                                    .slice(0, 1)
+                                                                    .map((tag) => (
+                                                                        <SmallArticleCategories
+                                                                            key={tag.id}
+                                                                        >
+                                                                            {tag.tags_id.tag_name}
+                                                                        </SmallArticleCategories>
+                                                                    ))}
+                                                        </Flex>
                                                         <SmallArticleDateTimeMobile>
-                                                            {article.date}
+                                                            {article?.published_date &&
+                                                                convertDate(
+                                                                    article?.published_date,
+                                                                )}
                                                             <MobileDotIcon src={Dot} />
-                                                            {article.reading_time} min
+                                                            {article.read_time_in_minutes}{' '}
+                                                            <Localize translate_text="min" />
                                                         </SmallArticleDateTimeMobile>
                                                         <Header as="p" type="paragraph-1">
-                                                            {article.title}
+                                                            {truncateString(article.blog_title)}
                                                         </Header>
                                                     </SmallArticleTopContent>
                                                     <MobileHeader as="p" type="paragraph-1">
-                                                        {article.title}
+                                                        {truncateString(article.blog_title)}
                                                     </MobileHeader>
                                                     <SmallArticleDateTimeDesktop>
-                                                        {article.date} <DotIcon src={Dot} />
-                                                        {article.reading_time} min read
+                                                        {article?.published_date &&
+                                                            convertDate(article?.published_date)}
+                                                        <DotIcon src={Dot} />
+                                                        {article.read_time_in_minutes}{' '}
+                                                        <Localize translate_text="min read" />
                                                     </SmallArticleDateTimeDesktop>
                                                 </SmallArticleRightContent>
                                             </SmallArticle>
@@ -234,4 +313,9 @@ const RecentFeaturedPosts = () => {
     )
 }
 
+RecentFeaturedPosts.propTypes = {
+    featured_data: PropTypes.array,
+    recent_data: PropTypes.array,
+}
+
 export default WithIntl()(RecentFeaturedPosts)
diff --git a/src/pages/blog/articles/_first-article.js b/src/pages/blog/articles/_first-article.js
index 4b7c6eaf96e..94596c2475c 100644
--- a/src/pages/blog/articles/_first-article.js
+++ b/src/pages/blog/articles/_first-article.js
@@ -13,14 +13,24 @@ const StyledFlex = styled(Flex)`
     overflow: hidden;
     transition: transform 0.3s;
     cursor: pointer;
+    width: 100vw;
+    max-width: 1200px;
 
     &:hover {
         transform: translateY(-1.1rem) scale(1.02);
     }
+
+    @media (max-width: 1333px) {
+        width: 100%;
+        min-width: 800px;
+    }
+
     @media (max-width: 823px) {
         flex-direction: column;
         height: auto;
+        width: 90vw;
         max-width: 384px;
+        min-width: unset;
         margin-top: 40px;
     }
 `
@@ -33,6 +43,10 @@ const ImageWrapper = styled.div`
         width: 100%;
         height: unset;
     }
+
+    > .main-article-bg {
+        display: contents;
+    }
 `
 
 const StyledCategories = styled(Header)`
@@ -53,7 +67,6 @@ const FirstContentWrapper = styled(Flex)`
 
 const RedirectLink = styled(LocalizedLink)`
     text-decoration: none;
-    max-width: 1200px;
 `
 
 const FirstArticle = ({ item }) => {
@@ -65,6 +78,7 @@ const FirstArticle = ({ item }) => {
                         data={getImage(item.main_image.imageFile)}
                         alt={item.main_image.description || ''}
                         width="100%"
+                        className="main-article-bg"
                     />
                 </ImageWrapper>
                 <FirstContentWrapper fd="column" p="35px 40px" width="45%">
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js
index a724a53ed40..85df23ba578 100644
--- a/src/pages/blog/index.js
+++ b/src/pages/blog/index.js
@@ -76,6 +76,62 @@ export const query = graphql`
                     }
                 }
             }
+            recent: blog(
+                filter: { status: { _eq: "published" } }
+                sort: "-published_date"
+                limit: 6
+            ) {
+                id
+                main_image {
+                    id
+                    description
+                    imageFile {
+                        childImageSharp {
+                            gatsbyImageData
+                        }
+                    }
+                }
+                slug
+                published_date
+                featured
+                tags {
+                    id
+                    tags_id {
+                        tag_name
+                    }
+                }
+                blog_title
+                blog_description
+                read_time_in_minutes
+            }
+            featured: blog(
+                filter: { status: { _eq: "published" }, featured: { _eq: true } }
+                sort: "-published_date"
+                limit: 6
+            ) {
+                id
+                main_image {
+                    id
+                    description
+                    imageFile {
+                        childImageSharp {
+                            gatsbyImageData
+                        }
+                    }
+                }
+                slug
+                published_date
+                featured
+                tags {
+                    id
+                    tags_id {
+                        tag_name
+                    }
+                }
+                blog_title
+                blog_description
+                read_time_in_minutes
+            }
         }
     }
 `
@@ -99,6 +155,9 @@ const DerivBlog = ({ data }) => {
     }
     const homepage_banner_data = data.directus.homepage_banners
     const market_news_data = data.directus.blog
+
+    const recent_data = data.directus.recent
+    const featured_data = data.directus.featured
     const video_list_data = data.directus.videos
 
     return (
@@ -133,7 +192,7 @@ const DerivBlog = ({ data }) => {
                     })}
                 </Carousel>
             </MainWrapper>
-            <RecentFeaturedPosts />
+            <RecentFeaturedPosts recent_data={recent_data} featured_data={featured_data} />
             <DVideoBanner video_list_data={video_list_data} />
             <MarketNews data={market_news_data} />
             <Container>
diff --git a/src/pages/blog/recent-featured-posts/_data.js b/src/pages/blog/recent-featured-posts/_data.js
deleted file mode 100644
index e6748d26fda..00000000000
--- a/src/pages/blog/recent-featured-posts/_data.js
+++ /dev/null
@@ -1,161 +0,0 @@
-export const recent_article_data = {
-    image: 'https://source.unsplash.com/random/1',
-    reading_time: '2',
-    category: 'CFDs',
-    title: 'The complete beginner’s guide to cryptocurrency trading',
-    description:
-        'Love the idea of leverage, but hate the thought of getting wiped out with one bad trade? We have the ideal trade type for you. One that combines the upside of a leveraged trade with the limited downside of an options trade',
-    date: 'Nov 5, 2020',
-    id: 1,
-    link: '/blog/articles/',
-}
-
-export const featured_article_data = {
-    image: 'https://source.unsplash.com/random/2',
-    reading_time: '3',
-    category: 'Finance news',
-    title: 'Why it’s the Tesla of the financial industry',
-    description:
-        'Tesla, Inc. designs, develops, manufactures and sells electric vehicles and designs, manufactures, installs and sells solar energy generation and energy storage products',
-    date: 'Nov 5, 2020',
-    id: 2,
-    link: '/blog/articles/',
-}
-
-export const article_data = [
-    {
-        image: 'https://source.unsplash.com/random/3',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com',
-        date: '12 June 2021',
-        id: 1,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/4',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv this is for',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on deriv.com',
-        date: '12 June 2021',
-        id: 2,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/5',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes',
-        date: '12 June 2021',
-        id: 3,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/6',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes',
-        date: '12 June 2021',
-        id: 4,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/5',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes',
-        date: '12 June 2021',
-        id: 5,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/6',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes',
-        date: '12 June 2021',
-        id: 6,
-        link: '/blog/articles/',
-    },
-]
-
-export const article_data_2 = [
-    {
-        image: 'https://source.unsplash.com/random/7',
-        reading_time: '3',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on deriv.com',
-        date: '12 June 2021',
-        id: 1,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/8',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv this is for really',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on deriv.com',
-        date: '12 June 2021',
-        id: 2,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/9',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes',
-        date: '12 June 2021',
-        id: 3,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/10',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes',
-        date: '12 June 2021',
-        id: 4,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/11',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes',
-        date: '12 June 2021',
-        id: 5,
-        link: '/blog/articles/',
-    },
-    {
-        image: 'https://source.unsplash.com/random/12',
-        reading_time: '2',
-        category: 'Multipliers',
-        title: 'How to trade multipliers on Deriv',
-        description:
-            'To help you begin, we will look at the basics of cryptocurrency: what it is, how it works, and how to start trading cryptos on Deriv.com. This has an extra extra long section of the description for testing purposes',
-        date: '12 June 2021',
-        id: 6,
-        link: '/blog/articles/',
-    },
-]
diff --git a/src/pages/blog/recent-featured-posts/_style.js b/src/pages/blog/recent-featured-posts/_style.js
index ca8c616b40c..02cc5dad634 100644
--- a/src/pages/blog/recent-featured-posts/_style.js
+++ b/src/pages/blog/recent-featured-posts/_style.js
@@ -56,7 +56,6 @@ export const MainArticle = styled(Flex)`
     width: 792px;
     max-height: 300px;
     align-items: flex-end;
-    padding-bottom: 80px;
     cursor: pointer;
     transition: transform 0.3s;
 
@@ -66,7 +65,7 @@ export const MainArticle = styled(Flex)`
     @media ${device.laptopM} {
         /* prettier-ignore */
         min-width: 328px;
-        width: unset;
+        width: 90vw;
         padding: 0;
         background: ${(props) =>
             props.image
@@ -77,14 +76,21 @@ export const MainArticle = styled(Flex)`
     }
 
     @media ${device.tablet} {
-        width: 100%;
+        width: 88vw;
         min-width: 270px;
     }
+
+    > .main-article-bg {
+        display: contents;
+        opacity: 0.8;
+    }
 `
 
 export const Description = styled.div`
+    position: absolute;
+    left: 0;
     padding: 24px 40px 0 40px;
-    margin-bottom: 24px;
+    margin-bottom: 80px;
 
     @media ${device.laptopM} {
         padding: 30px;
@@ -167,17 +173,18 @@ export const SmallArticleImageWrapper = styled.div`
     @media ${device.laptopM} {
         height: 78px;
     }
-`
 
-export const SmallArticleImage = styled.img`
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    position: absolute;
-    object-fit: cover;
+    &.small-article-bg {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        position: absolute;
+        object-fit: cover;
+        opacity: 0.8;
+    }
 `
 
 export const SmallArticleCategories = styled(Text)`
@@ -190,9 +197,12 @@ export const SmallArticleCategories = styled(Text)`
     line-height: 20px;
     font-size: 14px;
     font-weight: 700;
+    display: inline-block;
 
     @media ${device.laptopM} {
         position: static;
+        height: 18px;
+        padding: 0 8px 0;
         font-size: 10px;
     }
 `
@@ -273,6 +283,13 @@ export const SmallArticleTopContent = styled(Flex)`
     }
 `
 
+export const SmallArticleCategoryWrapper = styled(Flex)`
+    justify-content: start;
+    @media ${device.laptopM} {
+        flex-direction: row;
+    }
+`
+
 export const SmallArticleDateTimeMobile = styled(Flex)`
     color: var(--color-grey-5);
     width: 100%;
@@ -285,6 +302,7 @@ export const SmallArticleDateTimeMobile = styled(Flex)`
         display: flex;
         font-size: 10px;
         justify-content: flex-end;
+        white-space: nowrap;
     }
 `