diff --git a/components/shared/blog/blog-items.tsx b/components/shared/blog/blog-items.tsx
index 060a626..6fddef2 100644
--- a/components/shared/blog/blog-items.tsx
+++ b/components/shared/blog/blog-items.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react'
 import { BsCalendarPlus } from "react-icons/bs";
@@ -19,7 +20,9 @@ const BlogItems: React.FC<Props> = ({ data }) => {
     return (
         <Link className='border border-white shadow-sm rounded-md p-1' href={`blog/${data.title}`}>
             <div className="aspect-[800/600] overflow-hidden rounded-md ">
-                <img src={data.img} alt={data.title} loading="lazy" width="800" height="600" decoding="async" data-nimg="1" />
+                <div className=''>
+                    <Image src={data.img} alt={data.title} loading="lazy" width={800} height={600} decoding="async" data-nimg="1" />
+                </div>
             </div>
             <h2 className="mt-1 line-clamp-2 text-balance font-medium capitalize leading-tight">{data.title}</h2>
             <p className="mt-1 flex items-center text-xs leading-none text-muted-foreground">
diff --git a/next.config.js b/next.config.js
index f317bc3..72509be 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,7 +4,7 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'images.pexels.com"',
+        hostname: 'images.pexels.com',
       },
     ],
   },