diff --git a/layouts/partials/posts-defile.html b/layouts/partials/posts-defile.html
index 8fcea45..dab876a 100644
--- a/layouts/partials/posts-defile.html
+++ b/layouts/partials/posts-defile.html
@@ -8,26 +8,39 @@
     <div class="scrolling-posts {{ $direction }}-scroll">
       {{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
       {{- range (sort $pages "Date" "desc") -}}
-      <a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ .Permalink }}{{ .Params.cover.image }}');">
+      {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
+      {{- if $image -}}
+
+      {{- $fittedImage := $image.Fit "400x400 webp q95" -}}
+      {{- $optimizedBlurredImage := $fittedImage.Filter (images.GaussianBlur 3) -}}
+      <a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ $optimizedBlurredImage.RelPermalink }}');">
         <span class="section-badge">{{ .Section }}</span>
         <span class="scrolling-posts-item-title">{{ .Title }}</span>
         <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
       </a>
       {{- end -}}
+      {{- end -}}
     </div>
 
 
     <div class="scrolling-posts {{ $direction }}-scroll">
       {{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
       {{- range (sort $pages "Date" "desc") -}}
-      <a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ .Permalink }}{{ .Params.cover.image }}');">
+      {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
+      {{- if $image -}}
+
+      {{- $fittedImage := $image.Fit "400x400 webp q85" -}}
+      {{- $optimizedBlurredImage := $fittedImage.Filter (images.GaussianBlur 3) -}}
+      <a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2)), url('{{ $optimizedBlurredImage.RelPermalink }}');">
         <span class="section-badge">{{ .Section }}</span>
         <span class="scrolling-posts-item-title">{{ .Title }}</span>
         <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
       </a>
       {{- end -}}
+      {{- end -}}
     </div>
 
+
   </div>
 </div>
 
@@ -69,7 +82,6 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  backdrop-filter: blur(100px);
 }
 
 .scrolling-posts-item-title {
@@ -116,7 +128,6 @@
     transform: translateY(-100%);
   }
 }
-
 @keyframes scrollDown {
   0% {
     transform: translateY(-100%);