diff --git a/layouts/partials/posts-defile.html b/layouts/partials/posts-defile.html
index 4af780e..c552bd1 100644
--- a/layouts/partials/posts-defile.html
+++ b/layouts/partials/posts-defile.html
@@ -2,33 +2,32 @@
 {{ $context := .context }}
 
 <div class="scrolling-posts-container">
+  
   <div class="scrolling-posts-inner">
+
     <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">
+      <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 }}');">
         <span class="section-badge">{{ .Section }}</span>
-        <h2>{{ .Title }}</h2>
-        <div class="scrolling-posts-cover" style="height: 40px; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-            <img src="{{ .Permalink }}{{ .Params.cover.image }}" alt="{{ .Title }} cover image" style="width: 100%; height: 40px; object-fit: cover;">
-        </div>
+        <span class="scrolling-posts-item-title">{{ .Title }}</span>
         <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
       </a>
       {{- end -}}
     </div>
-    <div class="scrolling-posts {{ $direction }}-scroll">
+
+
+    <div class="scrolling-posts {{ $direction }}-scroll">s
       {{- $pages := where $context.Site.RegularPages "Section" "ne" "" -}}
       {{- range (sort $pages "Date" "desc") -}}
-      <a href="{{ .RelPermalink }}" class="scrolling-posts-item">
+      <a href="{{ .RelPermalink }}" class="scrolling-posts-item" style="background-image: url('{{ .Permalink }}{{ .Params.cover.image }}');">
         <span class="section-badge">{{ .Section }}</span>
-        <h2>{{ .Title }}</h2>
-        <div class="scrolling-posts-cover" style="height: 40px; overflow: hidden; display: flex; justify-content: center; align-items: center;">
-          <img src="{{ .Params.cover.image }}" alt="{{ .Title }} cover image" style="height: 100%; object-fit: cover;">
-        </div>
+        <span class="scrolling-posts-item-title">{{ .Title }}</span>
         <p class="scrolling-posts-date">{{ .Date.Format "2006-01-02" }}</p>
       </a>
       {{- end -}}
     </div>
+
   </div>
 </div>
 
@@ -65,12 +64,18 @@
   background: var(--entry);
   border-radius: var(--radius);
   border: 1px solid var(--border);
+  height: 100px;
+
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  backdrop-filter: blur(100px);
 }
 
-.scrolling-posts-item h2 {
+.scrolling-posts-item-title {
   font-size: 1em;
   margin: 0;
-  color: var(--text);
+  color: #ccc;
   font-weight: 400;
   line-height: 1.5em;
   text-decoration: none;
@@ -80,7 +85,7 @@
 
 .scrolling-posts-date {
   font-size: 0.8em;
-  color: var(--text);
+  color: #ccc;
   margin: 0;
   text-align: left;
 }
@@ -90,7 +95,7 @@
   font-size: 0.8em;
   padding: 2px 6px;
   margin-right: 5px;
-  background: var(--theme);
+  background-color: var(--theme);
   border-radius: 3px;
   color: var(--primary);
 }