diff --git a/assets/css/styles.css b/assets/css/styles.css
index b411dbd..6ff3dc7 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1772,6 +1772,11 @@ body:is(.dark *) {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-hacking-royal-darker {
+  --tw-text-opacity: 1;
+  color: rgb(36 3 101 / var(--tw-text-opacity));
+}
+
 .opacity-20 {
   opacity: 0.2;
 }
@@ -1976,6 +1981,11 @@ body:is(.dark *) {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark\:text-hacking-royal-darker:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(36 3 101 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:text-hacking-violet-lighter:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(143 110 217 / var(--tw-text-opacity));
diff --git a/layouts/partials/components/post-card.html b/layouts/partials/components/post-card.html
new file mode 100644
index 0000000..93f65e8
--- /dev/null
+++ b/layouts/partials/components/post-card.html
@@ -0,0 +1,56 @@
+{{ $showFeaturedImage := and site.Params.show_featured_image_in_list .Params.featured_image }}
+<div class="relative shadow-lg rounded-lg overflow-hidden h-full {{ if $showFeaturedImage }}bg-transparent{{ else }}bg-white dark:bg-hacking-slate{{ end }}">
+  {{ if $showFeaturedImage }}
+    <div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('{{ .Params.featured_image }}');"></div>
+    <div class="absolute inset-0 bg-black opacity-70 z-10"></div>
+  {{ end }}
+  <div class="relative z-20 p-6 flex flex-col h-full">
+    <!-- Tags at the top -->
+    {{ if .Params.tags }}
+      <div class="mb-4 flex flex-wrap">
+        {{ range .Params.tags }}
+          <a href="/tags/{{ . | urlize }}" class="inline-block bg-hacking-violet text-white text-xs px-2 py-1 rounded mr-2 mb-2">{{ . }}</a>
+        {{ end }}
+      </div>
+    {{ end }}
+
+    <a href="{{ .RelPermalink }}" class="block flex-grow">
+      <h3 class="text-xl font-semibold mb-2 {{ if $showFeaturedImage }}text-white{{ else }}text-hacking-midnight dark:text-white{{ end }} hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">{{ .Title }}</h3>
+      
+      {{ $content := default .Summary .Description | plainify }}
+      <p class="{{ if $showFeaturedImage }}text-white{{ else }}text-neutral-600 dark:text-neutral-300{{ end }} mb-4">
+        {{ $content | truncate 120 }}
+      </p>
+    </a>
+
+    <!-- Author, Date and Category -->
+    <div class="flex flex-wrap items-center text-sm {{ if $showFeaturedImage }}text-neutral-300{{ else }}text-neutral-500{{ end }} mb-4">
+      {{ if .Params.author }}
+        <span class="font-bold text-lg mr-4">
+          By 
+          <a href="/authors/{{ .Params.author | urlize }}" class="text-hacking-royal-lighter hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">
+            {{ .Params.author }}
+          </a>
+        </span>
+      {{ end }}
+      
+      <span class="mr-4">
+        {{ .Date.Format "January 2, 2006" }}
+      </span>
+
+      {{ if .Params.category }}
+        <span class="mr-4">Category: <span class="font-semibold">{{ .Params.category }}</span></span>
+      {{ end }}
+    </div>
+
+    <!-- Reading Time -->
+    {{ if .ReadingTime }}
+      <div class="flex items-center text-sm {{ if $showFeaturedImage }}text-neutral-300{{ else }}text-neutral-500{{ end }}">
+        <span class="icon-[mdi-light--clock] w-4 h-4 mr-1"></span>
+        <span>{{ .ReadingTime }} min read</span>
+      </div>
+    {{ end }}
+
+    <span class="text-hacking-royal-lighter hover:underline mt-4">Read more</span>
+  </div>
+</div>
diff --git a/layouts/partials/components/recent-posts.html b/layouts/partials/components/recent-posts.html
index 7624844..0093248 100644
--- a/layouts/partials/components/recent-posts.html
+++ b/layouts/partials/components/recent-posts.html
@@ -1,60 +1,11 @@
 <section class="bg-white dark:bg-hacking-slate-darker py-16">
   <div class="container mx-auto px-4">
     <h2 class="text-3xl font-bold mb-8 text-hacking-violet dark:text-hacking-violet-lighter text-center">Recent Posts</h2>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      {{ $posts := where .Site.RegularPages "Section" "posts" }}
-      {{ range first 6 $posts }}
-        <div class="relative shadow-lg rounded-lg overflow-hidden h-full {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}bg-transparent{{ else }}bg-white dark:bg-hacking-slate{{ end }}">
-          {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}
-            <div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('{{ .Params.featured_image }}');"></div>
-            <!-- Increased opacity for better readability -->
-            <div class="absolute inset-0 bg-black opacity-70 z-10"></div>
-          {{ end }}
-          <div class="relative z-20 p-6 flex flex-col h-full">
-            <!-- Tags at the top -->
-            {{ if .Params.tags }}
-              <div class="mb-4 flex flex-wrap">
-                {{ range .Params.tags }}
-                  <a href="/tags/{{ . | urlize }}" class="inline-block bg-hacking-violet text-white text-xs px-2 py-1 rounded mr-2 mb-2">{{ . }}</a>
-                {{ end }}
-              </div>
-            {{ end }}
-
-            <a href="{{ .RelPermalink }}" class="block flex-grow">
-              <h3 class="text-xl font-semibold mb-2 {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-white{{ else }}text-hacking-midnight dark:text-white{{ end }} hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">{{ .Title }}</h3>
-              
-              {{ $content := default .Summary .Description | plainify }}
-              <p class="{{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-white{{ else }}text-neutral-600 dark:text-neutral-300{{ end }} mb-4">
-                {{ $content | truncate 120 }}
-              </p>
-            </a>
-
-            <!-- Author and Category -->
-            <div class="flex items-center text-sm {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-neutral-300{{ else }}text-neutral-500{{ end }} mb-4">
-              {{ if .Params.author }}
-                <span class="font-bold text-lg mr-4">
-                  By 
-                  <a href="/authors/{{ .Params.author | urlize }}" class="hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300 text-hacking-royal-lighter">
-                    {{ .Params.author }}
-                  </a>
-                </span>
-              {{ end }}
-              {{ if .Params.category }}
-                <span class="mr-4">Category: <span class="font-semibold">{{ .Params.category }}</span></span>
-              {{ end }}
-            </div>
-
-            <!-- Reading Time -->
-            {{ if .ReadingTime }}
-            <div class="flex items-center text-sm {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-neutral-300{{ else }}text-neutral-500{{ end }}">
-              <span class="icon-[mdi-light--clock] w-4 h-4 mr-1"></span>
-              <span>{{ .ReadingTime }} min read</span>
-            </div>
-            {{ end }}
-
-            <span class="text-hacking-violet dark:text-hacking-violet-lighter hover:underline mt-4">Read more</span>
-          </div>
-        </div>
+    {{ $posts := where .Site.RegularPages "Section" "posts" }}
+    {{ $postCount := len $posts }}
+    <div class="grid grid-cols-1 md:grid-cols-2 {{ if ge $postCount 8 }}lg:grid-cols-4{{ else if ge $postCount 4 }}lg:grid-cols-4{{ else }}lg:grid-cols-3{{ end }} gap-8">
+      {{ range first (cond (ge $postCount 8) 8 (cond (ge $postCount 4) 4 3)) $posts }}
+        {{ partial "components/post-card.html" . }}
       {{ end }}
     </div>
   </div>
diff --git a/layouts/posts/list.html b/layouts/posts/list.html
index f148473..2068cd8 100644
--- a/layouts/posts/list.html
+++ b/layouts/posts/list.html
@@ -13,56 +13,7 @@ <h1 class="text-4xl md:text-6xl font-bold mb-4 text-center">{{ .Title }}</h1>
     <div class="container mx-auto px-4">
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
         {{ range .Pages }}
-          <div class="relative shadow-lg rounded-lg overflow-hidden h-full {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}bg-transparent{{ else }}bg-white dark:bg-hacking-slate{{ end }}">
-            {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}
-              <div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('{{ .Params.featured_image }}');"></div>
-              <div class="absolute inset-0 bg-black opacity-70 z-10"></div>
-            {{ end }}
-            <div class="relative z-20 p-6 flex flex-col h-full">
-              <!-- Tags at the top -->
-              {{ if .Params.tags }}
-                <div class="mb-4 flex flex-wrap">
-                  {{ range .Params.tags }}
-                    <a href="/tags/{{ . | urlize }}" class="inline-block bg-hacking-violet text-white text-xs px-2 py-1 rounded mr-2 mb-2">{{ . }}</a>
-                  {{ end }}
-                </div>
-              {{ end }}
-
-              <a href="{{ .RelPermalink }}" class="block flex-grow">
-                <h2 class="text-xl font-semibold mb-2 {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-white{{ else }}text-hacking-midnight dark:text-white{{ end }} hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">{{ .Title }}</h2>
-                
-                {{ $content := default .Summary .Description | plainify }}
-                <p class="{{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-white{{ else }}text-neutral-600 dark:text-neutral-300{{ end }} mb-4">
-                  {{ $content | truncate 120 }}
-                </p>
-              </a>
-
-              <!-- Author and Category -->
-              <div class="flex items-center text-sm {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-neutral-300{{ else }}text-neutral-500{{ end }} mb-4">
-                {{ if .Params.author }}
-                  <span class="font-bold text-lg mr-4">
-                    By 
-                    <a href="/authors/{{ .Params.author | urlize }}" class="text-hacking-royal-lighter hover:text-hacking-violet dark:hover:text-hacking-violet-lighter transition duration-300">
-                      {{ .Params.author }}
-                    </a>
-                  </span>
-                {{ end }}
-                {{ if .Params.category }}
-                  <span class="mr-4">Category: <span class="font-semibold">{{ .Params.category }}</span></span>
-                {{ end }}
-              </div>
-
-              <!-- Reading Time -->
-              {{ if .ReadingTime }}
-                <div class="flex items-center text-sm {{ if and site.Params.show_featured_image_in_list .Params.featured_image }}text-neutral-300{{ else }}text-neutral-500{{ end }}">
-                  <span class="icon-[mdi-light--clock] w-4 h-4 mr-1"></span>
-                  <span>{{ .ReadingTime }} min read</span>
-                </div>
-              {{ end }}
-
-              <span class="text-hacking-royal-lighter  hover:underline mt-4">Read more</span>
-            </div>
-          </div>
+          {{ partial "components/post-card.html" . }}
         {{ end }}
       </div>
     </div>
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 7f3b9cf..f10c006 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -12,7 +12,7 @@ <h1 class="text-4xl font-bold text-white mb-4">{{ .Title }}</h1>
           <span class="mr-4">{{ .Date.Format "January 2, 2006" }}</span>
           <span class="mr-4">{{ .ReadingTime }} min read</span>
           {{ with .Params.author }}
-            <span class="mr-4">By <a href="{{ "/authors/" | relLangURL }}{{ . | urlize }}" class="text-hacking-violet-lighter dark:text-hacking-violet-lighter hover:underline">{{ . }}</a></span>
+            <span class="mr-4">By <a href="{{ "/authors/" | relLangURL }}{{ . | urlize }}" class="text-hacking-voilet-darker dark:text-hacking-royal-darker hover:underline">{{ . }}</a></span>
           {{ end }}
           {{ with .Params.categories }}
             <span class="mr-4">In