diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 4af4a17..720302c 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -6,21 +6,22 @@ import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
 
-// Assuming the BlogPost type is available from the hook or a types file
-interface BlogPost {
-    id: string;
-    title: string;
-    description: string;
-    date: string;
-    author: string;
-    imageSrc: string;
-    imageAlt: string;
-    href: string;
-}
-
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const formattedPosts = !isLoading && Array.isArray(posts)
+        ? posts.map((post: any) => ({
+            id: post.id || '',
+            title: post.title || 'Untitled',
+            description: post.description || 'No description available.',
+            date: post.date || new Date().toISOString(),
+            author: post.author || 'Unknown Author',
+            imageSrc: post.imageSrc || '/placeholder-image.jpg',
+            imageAlt: post.imageAlt || 'Blog post image',
+            href: post.href || `/blog/${post.id || ''}`,
+        }))
+        : [];
+
     return (
         <ThemeProvider
             defaultButtonVariant="elastic-effect"
@@ -57,7 +58,7 @@ export default function BlogPage() {
                         </div>
                     ) : (
                         <BlogCardTwo
-                            posts={posts as BlogPost[]}
+                            articles={formattedPosts}
                             title="Latest Articles"
                             description="Insights and updates from our team"
                             animationType="slide-up"