diff --git a/assets/css/wordpress.css b/assets/css/wordpress.css
new file mode 100644
index 0000000..38fb6e1
--- /dev/null
+++ b/assets/css/wordpress.css
@@ -0,0 +1,289 @@
+/* Wordpress Content Styles */
+
+/* General Prose Styles (already in app.css, but can be extended here if needed) */
+.prose {
+    /* max-width: none; */ /* Already handled by Tailwind's prose plugin or app.css */
+}
+
+/* Headings */
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+    font-weight: 700;
+    line-height: 1.25;
+    margin-top: 2em;
+    margin-bottom: 1em;
+    color: var(--gray-900);
+}
+
+.prose h1 {
+    font-size: 2.5em;
+}
+
+.prose h2 {
+    font-size: 2em;
+}
+
+.prose h3 {
+    font-size: 1.75em;
+}
+
+.prose h4 {
+    font-size: 1.5em;
+}
+
+.prose h5 {
+    font-size: 1.25em;
+}
+
+.prose h6 {
+    font-size: 1em;
+    color: var(--gray-600);
+}
+
+/* Paragraphs */
+.prose p {
+    margin-bottom: 1.5em;
+    line-height: 1.75;
+    color: var(--gray-700);
+}
+
+/* Lists */
+.prose ul,
+.prose ol {
+    margin-bottom: 1.5em;
+    padding-left: 2em;
+}
+
+.prose ul {
+    list-style-type: disc;
+}
+
+.prose ol {
+    list-style-type: decimal;
+}
+
+.prose li {
+    margin-bottom: 0.5em;
+    line-height: 1.75;
+    color: var(--gray-700);
+}
+
+.prose ul ul,
+.prose ol ol,
+.prose ul ol,
+.prose ol ul {
+    margin-bottom: 0;
+    margin-top: 0.5em;
+}
+
+/* Links */
+.prose a {
+    color: var(--primary-blue);
+    text-decoration: underline;
+    text-decoration-color: var(--primary-blue);
+    transition: color 0.2s ease, text-decoration-color 0.2s ease;
+}
+
+.prose a:hover {
+    color: var(--primary-blue-dark);
+    text-decoration-color: var(--primary-blue-dark);
+}
+
+/* Images */
+.prose img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+}
+
+.prose figure {
+    margin: 2em 0;
+    text-align: center;
+}
+
+.prose figcaption {
+    font-size: 0.875em;
+    color: var(--gray-600);
+    margin-top: 0.5em;
+    text-align: center;
+    font-style: italic;
+}
+
+/* Tables */
+.prose table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1.5em;
+    border: 1px solid var(--gray-300);
+}
+
+.prose th,
+.prose td {
+    padding: 0.75em 1em;
+    text-align: left;
+    border-bottom: 1px solid var(--gray-300);
+}
+
+.prose th {
+    background-color: var(--gray-100);
+    font-weight: 600;
+    color: var(--gray-900);
+}
+
+.prose tbody tr:nth-child(even) {
+    background-color: var(--gray-50);
+}
+
+/* Blockquotes */
+.prose blockquote {
+    border-left: 4px solid var(--primary-blue);
+    padding-left: 1.5rem;
+    margin: 2em 0;
+    font-style: italic;
+    color: var(--gray-600);
+    background-color: var(--gray-50);
+    padding: 1.5rem;
+    border-radius: 0.25rem;
+}
+
+.prose blockquote p:last-child {
+    margin-bottom: 0;
+}
+
+/* Code Blocks */
+.prose code {
+    background-color: var(--gray-100);
+    color: var(--gray-800);
+    padding: 0.25em 0.5em;
+    border-radius: 0.25rem;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-size: 0.875em;
+}
+
+.prose pre {
+    background-color: var(--gray-900);
+    color: var(--gray-50);
+    padding: 1.5em;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin-bottom: 1.5em;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-size: 0.875em;
+}
+
+.prose pre code {
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+    border-radius: 0;
+}
+
+/* Embeds */
+.prose iframe,
+.prose video,
+.prose audio {
+    max-width: 100%;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+}
+
+.prose .wp-block-embed {
+    margin: 2em 0;
+}
+
+/* Separators */
+.prose hr {
+    border: none;
+    height: 1px;
+    background-color: var(--gray-300);
+    margin: 2em 0;
+}
+
+/* WordPress Specific Classes */
+.prose .wp-caption {
+    background-color: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    padding: 1em;
+    border-radius: 0.5rem;
+    text-align: center;
+}
+
+.prose .wp-caption-text {
+    font-size: 0.875em;
+    color: var(--gray-600);
+    margin-top: 0.5em;
+    font-style: italic;
+}
+
+.prose .alignleft {
+    float: left;
+    margin: 0.5em 1.5em 0.5em 0;
+}
+
+.prose .alignright {
+    float: right;
+    margin: 0.5em 0 0.5em 1.5em;
+}
+
+.prose .aligncenter {
+    display: block;
+    margin: 1.5em auto;
+}
+
+/* Responsive adjustments for images */
+@media (max-width: 768px) {
+    .prose .alignleft,
+    .prose .alignright {
+        float: none;
+        display: block;
+        margin: 1.5em auto;
+        clear: both;
+    }
+}
+
+/* WordPress Gutenberg Block Styles */
+.prose .wp-block-gallery {
+    margin: 2em 0;
+}
+
+.prose .wp-block-gallery .blocks-gallery-item {
+    margin: 0.5em;
+}
+
+.prose .wp-block-quote {
+    border-left: 4px solid var(--primary-blue);
+    padding-left: 1.5rem;
+    margin: 2em 0;
+    font-style: italic;
+    color: var(--gray-600);
+    background-color: var(--gray-50);
+    padding: 1.5rem;
+    border-radius: 0.25rem;
+}
+
+.prose .wp-block-pullquote {
+    border-top: 4px solid var(--primary-blue);
+    border-bottom: 4px solid var(--primary-blue);
+    padding: 2em;
+    margin: 2em 0;
+    text-align: center;
+    font-style: italic;
+    color: var(--gray-700);
+}
+
+.prose .wp-block-code {
+    background-color: var(--gray-900);
+    color: var(--gray-50);
+    padding: 1.5em;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin-bottom: 1.5em;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-size: 0.875em;
+}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 7c02800..824bd34 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,63 +1,81 @@
 {{ define "main" }}
-
 <!-- layouts/_default/list.html -->
-<div class="section-sm bg-gray-lighter">
-  <div class="container text-center">
-    <h1 class="font-family-playfair">{{ .Site.Title }}</h1>
-  </div><!-- end container -->
-</div>
+<div class="min-h-screen bg-white">
+    
+    <!-- Hero Section with Category Title -->
+    <section class="gradient-bg py-12 md:py-16 lg:py-20">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="max-w-4xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
+                    {{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}
+                </h1>
+                {{ if .Description }}
+                <p class="text-xl text-gray-700 mb-8">{{ .Description }}</p>
+                {{ else if .Site.Params.seo.description }}
+                <p class="text-xl text-gray-700 mb-8">{{ .Site.Params.seo.description }}</p>
+                {{ end }}
+                
+                <!-- Category tags if this is a taxonomy page -->
+                {{ if eq .Kind "taxonomy" }}
+                <div class="flex flex-wrap justify-center gap-3 mb-10">
+                    <span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">{{ .Title }}</span>
+                </div>
+                {{ end }}
+            </div>
+        </div>
+    </section>
 
-<!-- Blog section  -->
-<div class="section">
-    <div class="container">
-        <div class="row g-4">
-            <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
-                {{ $paginationLimit := 10 }}
-                {{ if .Site.Params.paginationLimit }}{{ $paginationLimit = .Site.Params.paginationLimit }}{{ end }}
-                {{ $paginator := .Paginator $paginationLimit }}
+    <!-- Latest Articles Section -->
+    <section id="latest-articles" class="py-12 md:py-16 bg-gray-50">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Articles</h2>
+            
+            {{ $paginator := .Paginate .Pages 9 }}
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                 {{ range $paginator.Pages }}
-                <!-- Blog Post box -->
-                <div class="mb-5">
-                    <div class="img-link-box">
-                        <a href="{{ .RelPermalink }}">
-                            {{ if .Params.featured_image }}
-                            <img src="{{ .Params.featured_image }}" alt="{{ .Title }}">
-                            {{ else }}
-                            <img src="/assets/images/col-1.jpg" alt="{{ .Title }}">
-                            {{ end }}
-                        </a>
-                    </div>
-                    <div class="mt-4">
-                        <div class="d-flex justify-content-between mb-2">
-                            <!-- Display  category -->
-                            {{ partial "categories-first.html" . }}
-                            
-                            <div class="d-inline-flex">
-                                <span class="font-small">{{ .Date.Format "02/07/2006" }}</span>
-                            </div>
-                        </div>
-                        <h2><a class="text-link-1" href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
-                        {{ if .Params.excerpt }}
-                        <p>{{ .Params.excerpt }}</p>
-                        {{ else if .Summary }}
-                        <p>{{ .Summary }}</p>
+                <div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
+                    <a href="{{ .RelPermalink }}">
+                        {{ if .Params.featured_image }}
+                        <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-48 object-cover">
                         {{ else }}
-                        <p>{{ truncate 200 .Content }}</p>
+                        <img src="/assets/images/col-1.jpg" alt="{{ .Title }}" class="w-full h-48 object-cover">
                         {{ end }}
-                        <div class="mt-3">
-                            <a class="button-text-1" href="{{ .RelPermalink }}">Lire la suite</a>
+                    </a>
+                    <div class="p-6">
+                        <div class="flex flex-wrap gap-2 mb-3">
+                            {{ if .Params.categories }}
+                                {{ range first 1 .Params.categories }}
+                                <a href="/categories/{{ . | urlize }}" class="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded hover:underline">{{ . }}</a>
+                                {{ end }}
+                            {{ end }}
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 mb-3"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+                        <p class="text-gray-600 text-sm mb-4">
+                            {{ if .Params.excerpt }}
+                            {{ .Params.excerpt }}
+                            {{ else if .Summary }}
+                            {{ .Summary }}
+                            {{ else }}
+                            {{ truncate 200 .Content }}
+                            {{ end }}
+                        </p>
+                        <div class="flex items-center justify-between text-sm text-gray-500">
+                            <span>{{ .Date | time.Format "2 Jan 2006" }}</span>
+                            <a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
                         </div>
                     </div>
                 </div>
-                <!-- End Blog Post box -->
                 {{ end }}
-                
-                <!-- Pagination -->
-                {{ partial "pagination.html" (dict "Paginator" .Paginator "Page" .) }}
             </div>
-        </div><!-- end row -->
-    </div><!-- end container -->
+            
+            <!-- Pagination -->
+            <div class="flex justify-center mt-12">
+                {{ if gt .Paginator.TotalPages 1 }}
+                    {{ partial "pagination-tailwind.html" .Paginator }}
+                {{ end }}
+            </div>
+        </div>
+    </section>
 </div>
-<!-- end Blog section -->
 {{ end }}
-
diff --git a/layouts/categories/list.html b/layouts/categories/list.html
deleted file mode 100644
index df9c4c3..0000000
--- a/layouts/categories/list.html
+++ /dev/null
@@ -1,44 +0,0 @@
-{{ define "main" }}
-
-<!-- layouts/categories/list.html -->
-<div class="section-sm bg-gray-lighter">
-  <div class="container text-center">
-    <h1 class="font-family-playfair">{{ .Title }}</h1>
-  </div><!-- end container -->
-</div>
-
-<!-- Blog section  -->
-<div class="section">
-    <div class="container">
-        <div class="row g-4">
-            <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
-                {{ range $.Site.Data.wordpress.categories }}
-                <!-- Category box -->
-                <div class="mb-5">
-                    <div class="mt-4">
-                        <div class="d-flex justify-content-between mb-2">
-                            <!-- Display category info -->
-                            <div class="d-inline-flex">
-                                <span class="font-small">Catégorie</span>
-                            </div>
-                        </div>
-                        <h2><a class="text-link-1" href="{{ .link | relURL }}">{{ .name }}</a></h2>
-                        {{ if .description }}
-                        <p>{{ .description | safeHTML }}</p>
-                        {{ else }}
-                        <p>Découvrez tous les articles de la catégorie {{ .name }}.</p>
-                        {{ end }}
-                        <div class="mt-3">
-                            <a class="button-text-1" href="{{ .link | relURL }}">Voir la catégorie</a>
-                        </div>
-                    </div>
-                </div>
-                <!-- End Category box -->
-                {{ if not .IsLast }}<hr class="my-5">{{ end }}
-                {{ end }}
-            </div>
-        </div><!-- end row -->
-    </div><!-- end container -->
-</div>
-<!-- end Blog section -->
-{{ end }}