diff --git a/components/ArticleHeader.vue b/components/ArticleHeader.vue
index 93b3e5881..46c5f2143 100644
--- a/components/ArticleHeader.vue
+++ b/components/ArticleHeader.vue
@@ -3,7 +3,7 @@
         <h1 class="text-4xl text-gray-700 font-extrabold text-center mb-3">
             {{ article.title }}
         </h1>
-        <p class="text-slate-400 text-center mb-1">
+        <p class="text-slate-500 text-center mb-1">
             <span v-if="article.alternates">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -27,7 +27,7 @@
 
         <div class="grid grid-cols-3 text-center sm:w-full md:w-1/2 mx-auto">
             <div>
-                <p class="text-center font-bold my-4 text-slate-400 text-xs">
+                <p class="text-center font-bold my-4 text-slate-500 text-xs">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         class="h-6 w-6 inline-block"
@@ -46,7 +46,7 @@
                 </p>
             </div>
             <div>
-                <p class="text-center font-bold my-4 text-slate-400 text-xs">
+                <p class="text-center font-bold my-4 text-slate-500 text-xs">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         class="h-6 w-6 inline-block"
@@ -65,20 +65,20 @@
                 </p>
             </div>
             <div class="flex items-center font-medium sm:mx-3 justify-center">
-                <img
+                <NuxtImg
                     :src="siteMetadata.author_image"
                     loading="lazy"
                     alt=""
                     class="mr-3 w-10 h-10 rounded-full bg-slate-50 dark:bg-slate-800"
                 />
                 <div>
-                    <div class="font-bold text-slate-400 text-xs">
+                    <div class="font-bold text-slate-500 text-xs">
                         {{ siteMetadata.author }}
                     </div>
                     <a
                         target="_blank"
                         :href="siteMetadata.twitter + siteMetadata.twitter_user"
-                        class="font-bold text-sky-400 text-xs hover:text-sky-600"
+                        class="font-bold text-sky-500 text-xs hover:text-sky-600"
                     >
                         @{{ siteMetadata.twitter_user }}
                     </a>
diff --git a/components/BlogCardHorizontal.vue b/components/BlogCardHorizontal.vue
index 5ce2a0e34..33702e315 100644
--- a/components/BlogCardHorizontal.vue
+++ b/components/BlogCardHorizontal.vue
@@ -3,7 +3,7 @@
         class="card-lateral mb-4 bg-white border border-gray-200 border-b-2 border-b-slate-400 hover:drop-shadow-xl hover:border-gray-300 transition-all hover:-translate-y-1 flex flex-row"
     >
         <NuxtLink class="w-1/4" :to="postLink">
-            <img
+            <NuxtImg
                 class="object-cover w-56 h-56"
                 :src="'/images/' + img"
                 :alt="postTitle"
diff --git a/components/BlogSectionHeader.vue b/components/BlogSectionHeader.vue
index b40f7b60c..155e44d61 100644
--- a/components/BlogSectionHeader.vue
+++ b/components/BlogSectionHeader.vue
@@ -4,7 +4,7 @@
             <div class="flex flex-col items-center justify-center">
                 <div class="p-3 text-white rounded">
                     <div class="flex items-center">
-                        <img
+                        <NuxtImg
                             :src="siteMetadata.author_image"
                             loading="lazy"
                             alt="me"
diff --git a/components/BuyMeACoffee.vue b/components/BuyMeACoffee.vue
index 4665adb13..388a0e90d 100644
--- a/components/BuyMeACoffee.vue
+++ b/components/BuyMeACoffee.vue
@@ -5,7 +5,7 @@
         <p class="mb-2">Did you like this blog post?</p>
         <p>
             <a href="https://www.buymeacoffee.com/hlassiege" target="_blank"
-                ><img
+                ><NuxtImg
                     src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png"
                     alt="Buy Me A Coffee"
                     style="height: 60px !important; width: 217px !important"
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
index ce2645d5a..adce93351 100644
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -16,7 +16,7 @@
                                 rel="noopener noreferrer"
                                 :href="projectHref"
                                 ><span class="sr-only"></span
-                                ><img
+                                ><NuxtImg
                                     class="w-6 h-6"
                                     src="~assets/icon/external.svg"
                             /></a>
@@ -28,7 +28,7 @@
                                 rel="noopener noreferrer"
                                 :href="projectGithub"
                                 ><span class="sr-only">github</span
-                                ><img
+                                ><NuxtImg
                                     class="w-6 h-6"
                                     src="~assets/icon/github_new.svg"
                             /></a>
diff --git a/components/SharingButtons.vue b/components/SharingButtons.vue
index 8f778b71f..debf63e2e 100644
--- a/components/SharingButtons.vue
+++ b/components/SharingButtons.vue
@@ -76,7 +76,7 @@
             </div>
             <div class="">
                 <a href="https://www.buymeacoffee.com/hlassiege" target="_blank"
-                    ><img
+                    ><NuxtImg
                         src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png"
                         alt="Buy Me A Coffee"
                         style="
diff --git a/components/TimeLine.vue b/components/TimeLine.vue
index f507a0d50..9c241cda9 100644
--- a/components/TimeLine.vue
+++ b/components/TimeLine.vue
@@ -40,7 +40,7 @@
                             <span v-html="event.description"></span>
                         </p>
                         <div class="flex flex-row flex-wrap">
-                            <img
+                            <NuxtImg
                                 v-for="image in event.images"
                                 :key="image.src"
                                 class="mr-[8px]"
diff --git a/pages/[...slug]/[id].vue b/pages/[...slug]/[id].vue
index 2d018503a..18c4137d7 100644
--- a/pages/[...slug]/[id].vue
+++ b/pages/[...slug]/[id].vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex justify-center mt-24">
-            <img
+            <NuxtImg
                 :src="'/images/covers/' + article.cover"
                 :alt="article.title"
                 class="object-cover w-96"
diff --git a/pages/about.vue b/pages/about.vue
index 9ac91daa7..e9f64fea7 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -3,7 +3,7 @@
         <keep-alive>
             <HeroSection>
                 <template #content>
-                    <img
+                    <NuxtImg
                         :src="siteMetaInfo.author_image"
                         loading="lazy"
                         alt="me"
@@ -33,7 +33,7 @@
                     href="https://www.buymeacoffee.com/hlassiege"
                     target="_blank"
                     class="hover:-backdrop-hue-rotate-30 hover:-translate-y-1 transition-all"
-                    ><img
+                    ><NuxtImg
                         src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
                         alt="Buy Me A Coffee"
                         style="
diff --git a/pages/fr/index.vue b/pages/fr/index.vue
index 4d312e3a6..48cfd902b 100644
--- a/pages/fr/index.vue
+++ b/pages/fr/index.vue
@@ -6,7 +6,7 @@
                     <div class="flex flex-col items-center justify-center">
                         <div class="p-3 text-white rounded">
                             <div class="flex items-center">
-                                <img
+                                <NuxtImg
                                     :src="siteMetaInfo.author_image"
                                     loading="lazy"
                                     alt="me"
diff --git a/pages/index.vue b/pages/index.vue
index 148bda491..4187785da 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,7 +6,7 @@
                     <div class="flex flex-col items-start justify-center">
                         <div class="p-3 text-white rounded">
                             <div class="flex items-center">
-                                <img
+                                <NuxtImg
                                     :src="siteMetaInfo.author_image"
                                     loading="lazy"
                                     alt="me"
diff --git a/pages/resources.vue b/pages/resources.vue
index 46c2e2996..b48334714 100644
--- a/pages/resources.vue
+++ b/pages/resources.vue
@@ -3,45 +3,21 @@
         <keep-alive>
             <HeroSection>
                 <template #content>
-                    <img
-                        :src="'/images/covers/' + article.cover"
-                        :alt="article.title"
-                        class="absolute top-96 w-96 -translate-y-32"
-                    />
+                    <div class="flex justify-center items-center">
+                        <NuxtImg
+                            :src="'/images/covers/' + article.cover"
+                            :alt="article.title"
+                            width="200"
+                        />
+                    </div>
                 </template>
             </HeroSection>
         </keep-alive>
 
-        <div class="px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0 mt-10">
-            <h1 class="text-4xl text-gray-700 font-extrabold mb-10 text-center">
+        <div class="px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0">
+            <h1 class="text-4xl text-gray-600 font-extrabold text-center mt-4">
                 {{ article.title }}
             </h1>
-            <div
-                class="flex items-center font-medium mt-6 sm:mx-3 justify-center"
-            >
-                <img
-                    :src="siteMetadata.author_image"
-                    loading="lazy"
-                    alt=""
-                    class="mr-3 w-10 h-10 rounded-full bg-slate-50 dark:bg-slate-800"
-                />
-                <div>
-                    <div class="text-slate-900 dark:text-slate-200">
-                        {{ siteMetadata.author }}
-                    </div>
-                    <a
-                        target="_blank"
-                        :href="siteMetadata.twitter + siteMetadata.twitter_user"
-                        class="text-sky-500 hover:text-sky-600 dark:text-sky-400"
-                    >
-                        @{{ siteMetadata.twitter_user }}
-                    </a>
-                </div>
-            </div>
-            <img
-                class="mx-auto w-4/5 my-10 rounded-md drop-shadow-sm"
-                :src="article.image"
-            />
 
             <ContentRenderer
                 class="prose min-w-full p-10 mx-auto"
diff --git a/pages/speaking.vue b/pages/speaking.vue
index 6ff9f52ff..ff439a80a 100644
--- a/pages/speaking.vue
+++ b/pages/speaking.vue
@@ -6,7 +6,7 @@
                     <div class="flex flex-col items-center justify-center">
                         <div class="p-3 text-white rounded">
                             <div class="flex items-center">
-                                <img
+                                <NuxtImg
                                     :src="siteMetaInfo.author_image"
                                     loading="lazy"
                                     alt="me"