diff --git a/src/components/content/BlogArticlesList/index.tsx b/src/components/content/BlogArticlesList/index.tsx
index 3fea61b73e..4115259528 100644
--- a/src/components/content/BlogArticlesList/index.tsx
+++ b/src/components/content/BlogArticlesList/index.tsx
@@ -26,13 +26,26 @@ const BlogArticlesList: React.FC<BlogArticlesListProps> = ({
   containerLayout = 'grid',
   sectionClassName = '',
 }) => {
-  const { data, loading } = useBlogPosts(limit);
+  const { data, loading, error } = useBlogPosts(limit);
   const actualDisplayCount = displayCount ?? limit;
 
   if (loading) {
     return null;
   }
 
+  if (error) {
+    return (
+      <section className={sectionClassName}>
+        <SectionHeader title={title} textColor={titleColor} />
+        <div className="my-8 flex justify-center text-center">
+          <p className="font-medium text-gray-600 dark:text-gray-400">
+            Failed to load the latest blog posts. Please check back later.
+          </p>
+        </div>
+      </section>
+    );
+  }
+
   const containerClasses =
     containerLayout === 'vertical' ? 'flex flex-col gap-4' : 'flex flex-wrap justify-center gap-4';
 
diff --git a/src/hooks/useBlogPosts.ts b/src/hooks/useBlogPosts.ts
index feaebc4421..41e002c3c3 100644
--- a/src/hooks/useBlogPosts.ts
+++ b/src/hooks/useBlogPosts.ts
@@ -20,11 +20,13 @@ interface BlogPost {
 interface UseBlogPostsReturn {
   data: BlogPost[];
   loading: boolean;
+  error: string | null;
 }
 
 export const useBlogPosts = (limit: number = 4): UseBlogPostsReturn => {
   const [data, setData] = useState<BlogPost[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -32,10 +34,15 @@ export const useBlogPosts = (limit: number = 4): UseBlogPostsReturn => {
         const rawData = await fetch(
           `https://blog.podman.io/wp-json/wp/v2/posts?per_page=${limit}&_fields=id,author_info,title,wbDate,jetpack_featured_media_url,link,excerpt`,
         );
+        if (!rawData.ok) {
+          throw new Error(`HTTP error! status: ${rawData.status}`);
+        }
         const jsonData = await rawData.json();
         setData(jsonData);
-      } catch (error) {
-        console.error(error);
+        setError(null);
+      } catch (err) {
+        console.error(err);
+        setError(err instanceof Error ? err.message : String(err));
       } finally {
         setLoading(false);
       }
@@ -43,5 +50,5 @@ export const useBlogPosts = (limit: number = 4): UseBlogPostsReturn => {
     fetchData();
   }, [limit]);
 
-  return { data, loading };
+  return { data, loading, error };
 };