diff --git a/src/pages/academy/_recent-featured-posts.js b/src/pages/academy/_recent-featured-posts.js
index 4147590ace8..6757a243f2a 100644
--- a/src/pages/academy/_recent-featured-posts.js
+++ b/src/pages/academy/_recent-featured-posts.js
@@ -29,7 +29,7 @@ import {
     MobileDotIcon,
     MobileHeader,
 } from './components/recent-featured-posts/_style'
-import { convertDate, truncateString } from 'common/utility'
+import { convertDate, truncateString, getAssetUrl } from 'common/utility'
 import { Flex } from 'components/containers'
 import { QueryImage, Carousel, Tabs, Header } from 'components/elements'
 import { localize, WithIntl, Localize } from 'components/localization'
@@ -73,13 +73,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                     <ArticleContentWrapper>
                         <LeftContent>
                             <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"
-                                    />
+                                <MainArticle image={getAssetUrl(headline_recent.main_image.id)}>
                                     <Description>
                                         <TagParentWrapper>
                                             {headline_recent.tags.map((article) => {
@@ -190,13 +184,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                     <ArticleContentWrapper>
                         <LeftContent>
                             <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"
-                                    />
+                                <MainArticle image={getAssetUrl(headline_featured.main_image.id)}>
                                     <Description>
                                         <TagParentWrapper>
                                             {headline_featured.tags.map((article) => {
diff --git a/src/pages/academy/blog/_first-article.js b/src/pages/academy/blog/_first-article.js
index a4205d5a8ee..a1a7109ba46 100644
--- a/src/pages/academy/blog/_first-article.js
+++ b/src/pages/academy/blog/_first-article.js
@@ -44,7 +44,7 @@ const ImageWrapper = styled.div`
         height: unset;
     }
 
-    > .main-article-bg {
+    > .first-article-image {
         display: contents;
     }
 `
@@ -78,7 +78,7 @@ const FirstArticle = ({ item }) => {
                         data={getImage(item.main_image.imageFile)}
                         alt={item.main_image.description || ''}
                         width="100%"
-                        className="main-article-bg"
+                        className="first-article-image"
                     />
                 </ImageWrapper>
                 <FirstContentWrapper fd="column" p="35px 40px" width="45%">
diff --git a/src/pages/academy/components/recent-featured-posts/_style.js b/src/pages/academy/components/recent-featured-posts/_style.js
index 02cc5dad634..dc8db25f6e1 100644
--- a/src/pages/academy/components/recent-featured-posts/_style.js
+++ b/src/pages/academy/components/recent-featured-posts/_style.js
@@ -76,14 +76,8 @@ export const MainArticle = styled(Flex)`
     }
 
     @media ${device.tablet} {
-        width: 88vw;
         min-width: 270px;
     }
-
-    > .main-article-bg {
-        display: contents;
-        opacity: 0.8;
-    }
 `
 
 export const Description = styled.div`
@@ -160,6 +154,7 @@ export const SmallArticle = styled(Flex)`
     @media ${device.laptopM} {
         height: 82px;
         margin-bottom: 16px;
+        min-width: unset;
     }
 `
 
@@ -234,7 +229,6 @@ export const SmallArticleRightContent = styled(Flex)`
     }
 
     @media (max-width: 425px) {
-        width: 185px;
         margin-left: 0;
     }
 `