diff --git a/www/_case-studies/xendit copy 2.mdx b/www/_case-studies/xendit-copy 4.mdx
similarity index 100%
rename from www/_case-studies/xendit copy 2.mdx
rename to www/_case-studies/xendit-copy 4.mdx
diff --git a/www/_case-studies/xendit copy 3.mdx b/www/_case-studies/xendit-copy 5.mdx
similarity index 100%
rename from www/_case-studies/xendit copy 3.mdx
rename to www/_case-studies/xendit-copy 5.mdx
diff --git a/www/_case-studies/xendit copy 4.mdx b/www/_case-studies/xendit-copy-2.mdx
similarity index 100%
rename from www/_case-studies/xendit copy 4.mdx
rename to www/_case-studies/xendit-copy-2.mdx
diff --git a/www/_case-studies/xendit copy 5.mdx b/www/_case-studies/xendit-copy-3.mdx
similarity index 100%
rename from www/_case-studies/xendit copy 5.mdx
rename to www/_case-studies/xendit-copy-3.mdx
diff --git a/www/_case-studies/xendit copy.mdx b/www/_case-studies/xendit-copy.mdx
similarity index 100%
rename from www/_case-studies/xendit copy.mdx
rename to www/_case-studies/xendit-copy.mdx
diff --git a/www/components/Blog/BlogListItem.tsx b/www/components/Blog/BlogListItem.tsx
index be3280947ad..66d5a30d419 100644
--- a/www/components/Blog/BlogListItem.tsx
+++ b/www/components/Blog/BlogListItem.tsx
@@ -3,6 +3,8 @@ import authors from 'lib/authors.json'
 import Link from 'next/link'
 import React from 'react'
 import { capitalize } from '~/lib/helpers'
+
+import Image from 'next/image'
 import PostTypes from '~/types/post'
 
 interface Props {
@@ -19,15 +21,19 @@ const BlogListItem = ({ blog }: Props) => {
       <a href={`/blog/${blog.url}`}>
         <div className="inline-block">
           <div className="flex flex-col space-y-3">
-            <img
-              src={
-                !blog.thumb
-                  ? `https://images.unsplash.com/photo-1569982175971-d92b01cf8694?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1`
-                  : `/images/blog/${blog.thumb}`
-              }
-              style={{ minHeight: '220px', maxHeight: '220px', minWidth: '100%' }}
-              className="w-full object-cover border dark:border-dark rounded-sm shadow-sm"
-            />
+            <div
+              className={`relative overflow-auto w-full h-40 border dark:border-dark rounded-sm shadow-sm`}
+            >
+              <Image
+                layout="fill"
+                src={
+                  !blog.thumb
+                    ? `https://images.unsplash.com/photo-1569982175971-d92b01cf8694?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1`
+                    : `/images/blog/${blog.thumb}`
+                }
+                objectFit="cover"
+              />
+            </div>
 
             <div>
               <div className="space-x-3">
diff --git a/www/next.config.js b/www/next.config.js
index a300dc59fa8..dcfa6076a04 100644
--- a/www/next.config.js
+++ b/www/next.config.js
@@ -6,7 +6,7 @@ module.exports = withMDX({
 
   trailingSlash: false,
   images: {
-    domains: ['github.com', 'ca.slack-edge.com', 'res.cloudinary.com'],
+    domains: ['github.com', 'ca.slack-edge.com', 'res.cloudinary.com', 'images.unsplash.com'],
   },
   async headers() {
     return [