diff --git a/explorer-nextjs/public/images/placeholder.webp b/explorer-nextjs/public/images/placeholder.webp
new file mode 100644
index 00000000000..2c5e4325eee
Binary files /dev/null and b/explorer-nextjs/public/images/placeholder.webp differ
diff --git a/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx b/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx
index b81e11b05af..b4ffe2be941 100644
--- a/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx
+++ b/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx
@@ -124,6 +124,8 @@ export default async function BlogPage({
       </ContentLayout>
     );
   } catch (error) {
+    console.log(error);
+
     return (
       <ContentLayout>
         <Wrapper>
diff --git a/explorer-nextjs/src/app/globals.css b/explorer-nextjs/src/app/globals.css
index 79be221e4f3..9e6cea0114f 100644
--- a/explorer-nextjs/src/app/globals.css
+++ b/explorer-nextjs/src/app/globals.css
@@ -19,7 +19,6 @@
 html,
 body {
   max-width: 100vw;
-  overflow-x: hidden;
 }
 
 a {
diff --git a/explorer-nextjs/src/app/page.tsx b/explorer-nextjs/src/app/page.tsx
index 55068c9856a..ad3feff1290 100644
--- a/explorer-nextjs/src/app/page.tsx
+++ b/explorer-nextjs/src/app/page.tsx
@@ -1,8 +1,7 @@
-import ExplorerHeroCard from "@/components/cards/ExplorerHeroCard";
+import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
 import CardSkeleton from "@/components/cards/Skeleton";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
-import Gateway from "@/components/icons/Gateway";
 import { CurrentEpochCard } from "@/components/landingPageComponents/CurrentEpochCard";
 import { NetworkStakeCard } from "@/components/landingPageComponents/NetworkStakeCard";
 import { NoiseCard } from "@/components/landingPageComponents/NoiseCard";
@@ -14,7 +13,7 @@ import { Stack, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { Suspense } from "react";
 
-export default function Home() {
+export default async function Home() {
   return (
     <ContentLayout>
       <Stack gap={5}>
@@ -61,26 +60,7 @@ export default function Home() {
         <Grid size={12}>
           <SectionHeading title="Onboarding" />
         </Grid>
-        <Grid size={6}>
-          <ExplorerHeroCard
-            label="Onboarding"
-            title="How to select Nym vpn gateway?"
-            description="Stake your tokens to well performing mix nodes, and earn a share of operator rewards!"
-            image={<Gateway />}
-            link={"/onboarding"}
-            sx={{ width: "100%" }}
-          />
-        </Grid>
-        <Grid size={6}>
-          <ExplorerHeroCard
-            label="Onboarding"
-            title="How to select Nym vpn gateway?"
-            description="Stake your tokens to well performing mix nodes, and earn a share of operator rewards!"
-            image={<Gateway />}
-            link={"/onboarding"}
-            sx={{ width: "100%" }}
-          />
-        </Grid>
+        <BlogArticlesCards limit={2} />
       </Grid>
     </ContentLayout>
   );
diff --git a/explorer-nextjs/src/components/blogs/types.ts b/explorer-nextjs/src/components/blogs/types.ts
index 3e2b186a7a7..d376f3b18ed 100644
--- a/explorer-nextjs/src/components/blogs/types.ts
+++ b/explorer-nextjs/src/components/blogs/types.ts
@@ -2,4 +2,8 @@ import type data from "@/data/blog-template.json";
 
 type BlogArticle = typeof data;
 
+export type BlogArticleWithLink = BlogArticle & {
+  link: string;
+};
+
 export default BlogArticle;
diff --git a/explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx b/explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx
index 0e97f033a77..16d6f472143 100644
--- a/explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx
+++ b/explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx
@@ -7,6 +7,7 @@ import {
   type SxProps,
   Typography,
 } from "@mui/material";
+import Image from "next/image";
 import { Link } from "../muiLink";
 
 const cardStyles = {
@@ -27,14 +28,14 @@ const ExplorerHeroCard = ({
   title,
   label,
   description,
-  image,
+  icon,
   link,
   sx,
 }: {
   title: string;
   label: string;
   description: string;
-  image: React.ReactNode;
+  icon: string;
   link: string;
   sx?: SxProps;
 }) => {
@@ -53,7 +54,12 @@ const ExplorerHeroCard = ({
         />
         <CardContent sx={cardContentStyles}>
           <Stack spacing={4}>
-            {image}
+            <Image
+              src={icon}
+              alt={"explorer-blog-image"}
+              width={84}
+              height={84}
+            />
             <Typography variant="h2">{title}</Typography>
             <Typography variant="body3">{description}</Typography>
           </Stack>