diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 5d28577..0fb948a 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -5,7 +5,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function BlogPage() {
@@ -44,10 +44,15 @@ export default function BlogPage() {
                     </div>
                 ) : (
                     <div id="blog" data-section="blog">
-                        <BlogCardThree
-                            posts={posts}
+                        <MetricCardSeven
                             title="From Our Blog"
                             description="Stay up-to-date with the latest plumbing tips, tricks, and company news."
+                            metrics={posts.map((post: any) => ({
+                                id: post.slug || post.id,
+                                title: post.title,
+                                value: post.date ? new Date(post.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : 'New',
+                                items: post.excerpt ? [post.excerpt] : [],
+                            }))}
                             animationType="slide-up"
                             textboxLayout="default"
                             useInvertedBackground={false}