diff --git a/themes/aurelia-theme/layouts/_default/list.html b/themes/aurelia-theme/layouts/_default/list.html
index 50fc92d..3b8b098 100644
--- a/themes/aurelia-theme/layouts/_default/list.html
+++ b/themes/aurelia-theme/layouts/_default/list.html
@@ -1,8 +1,56 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
-  {{ .Content }}
-  {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
-  {{ end }}
+<!-- Header Section -->
+<section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
+  <!-- Decorative Background -->
+  <div class="absolute inset-0 overflow-hidden">
+    <div class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl"></div>
+    <div class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl"></div>
+  </div>
+
+  <!-- Header Content -->
+  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+      {{ .Title }}
+    </h1>
+    {{ with .Content }}
+    <div class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
+      {{ . }}
+    </div>
+    {{ end }}
+  </div>
+</section>
+
+<!-- Content List -->
+<section class="py-4 bg-white">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="grid gap-8">
+      {{ range .Pages }}
+      <article>
+        <a href="{{ .RelPermalink }}" class="group block p-6 rounded-xl hover:bg-gray-50 transition-colors duration-300">
+          <div class="flex justify-between items-start gap-6">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-3 text-sm text-gray-600 mb-2">
+                {{ with .Date }}
+                <span>{{ .Format "January 2, 2006" }}</span>
+                {{ end }}
+              </div>
+              <h2 class="text-xl font-bold text-gray-900 group-hover:text-aurelia transition-colors duration-300 mb-2">
+                {{ .Title }}
+              </h2>
+              <p class="text-gray-600 text-sm leading-relaxed line-clamp-2">
+                {{ .Description | default .Summary }}
+              </p>
+            </div>
+            <div class="text-aurelia transform group-hover:translate-x-2 transition-transform duration-300">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              </svg>
+            </div>
+          </div>
+        </a>
+      </article>
+      {{ end }}
+    </div>
+  </div>
+</section>
 {{ end }}