diff --git a/layouts/index.html b/layouts/index.html
index 08d3d11..897dc04 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,18 +6,18 @@
     <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">Exploring Technology's Impact on Work & Life</h1>
-                    <p class="text-xl text-gray-700 mb-8">Insights, analysis and trends about how technology is shaping our future</p>
+                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">Explorer l'Impact de la Technologie sur le Travail et la Vie</h1>
+                    <p class="text-xl text-gray-700 mb-8">Perspectives, analyses et tendances sur la manière dont la technologie façonne notre avenir</p>
                     <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">AI</span>
-                        <span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Remote Work</span>
-                        <span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivity</span>
+                        <span class="tag bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">IA</span>
+                        <span class="tag bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full">Télétravail</span>
+                        <span class="tag bg-purple-100 text-purple-800 text-sm font-medium px-3 py-1 rounded-full">Productivité</span>
                         <span class="tag bg-yellow-100 text-yellow-800 text-sm font-medium px-3 py-1 rounded-full">Innovation</span>
                         <span class="tag bg-red-100 text-red-800 text-sm font-medium px-3 py-1 rounded-full">Web3</span>
                     </div>
                     <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
-                        <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Get Updates</button>
+                        <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Recevoir les mises à jour</button>
                 </form>
             </div>
         </div>
@@ -26,10 +26,10 @@
     <!-- Featured Articles -->
     <section class="py-12 md:py-16">
         <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">Featured Articles</h2>
+            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Articles en Vedette</h2>
             
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
-                {{ range first 2 $.Site.RegularPages }}
+                {{ range first 2 (where $.Site.RegularPages "Params.categories" "intersect" (slice "Featured")) }}
                 <div class="bg-white rounded-xl overflow-hidden shadow-lg article-card">
                     <div class="featured-article">
                         <a href="{{ .RelPermalink }}">
@@ -60,10 +60,10 @@
                         </p>
                         <div class="flex items-center justify-between">
                             <div class="flex items-center text-sm text-gray-500">
-                                <img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2">
+                                {{/* <img src="https://i.pravatar.cc/24" alt="{{ .Params.author }}" class="w-6 h-6 rounded-full mr-2"> */}}
                                 <a href="/author/{{ .Params.author | urlize }}" class="hover:underline">{{ .Params.author }}</a>
                                 <span class="mx-2">•</span>
-                                <span>{{ .Date | time.Format "Jan 2, 2006" }}</span>
+                                <span>{{ .Date | time.Format "2 Jan 2006" }}</span>
                             </div>
                             <a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Lire la suite →</a>
                         </div>
@@ -73,21 +73,26 @@
             </div>
             
             <div class="text-center">
-                <a href="/articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
-                    View all articles
-                    <i class="fas fa-arrow-right ml-2"></i>
+                <a href="#latest-articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
+                    Voir plus d'articles
+                    <i class="fas fa-arrow-down ml-2"></i>
                 </a>
             </div>
         </div>
     </section>
 
     <!-- Latest Articles -->
-    <section class="py-12 md:py-16 bg-gray-50">
+    <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">Latest Articles</h2>
+            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Derniers Articles</h2>
+            
+            {{ $featuredPosts := where $.Site.RegularPages "Params.categories" "intersect" (slice "Featured") }}
+            {{ $regularPosts := where $.Site.RegularPages "Type" "!=" "page" }}
+            {{ $nonFeaturedPosts := complement $featuredPosts $regularPosts }}
+            {{ $paginator := .Paginate $nonFeaturedPosts 9 }}
             
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
-                {{ range first 6 (after 2 $.Site.RegularPages) }}
+                {{ range $paginator.Pages }}
                 <div class="bg-white rounded-xl overflow-hidden shadow-md article-card">
                     <a href="{{ .RelPermalink }}">
                         {{ if .Params.featured_image }}
@@ -98,11 +103,13 @@
                     </a>
                     <div class="p-6">
                         <div class="flex flex-wrap gap-2 mb-3">
-                            {{ 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>
+                            {{ 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">{{ .Title }}</h3>
+                        <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 }}
@@ -113,48 +120,49 @@
                             {{ end }}
                         </p>
                         <div class="flex items-center justify-between text-sm text-gray-500">
-                            <span>{{ .Date | time.Format "Jan 2, 2006" }}</span>
-                            <a href="{{ .RelPermalink }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">Read more →</a>
+                            <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 }}
             </div>
             
-            <div class="text-center">
-                <a href="/articles" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
-                    View all articles
-                    <i class="fas fa-arrow-right ml-2"></i>
-                </a>
+            <!-- Pagination -->
+            <div class="flex justify-center mt-12">
+                {{ if gt .Paginator.TotalPages 1 }}
+                    {{ partial "pagination-tailwind.html" .Paginator }}
+                {{ end }}
             </div>
         </div>
     </section>
 
+    {{/*
     <!-- Popular Topics -->
     <section class="py-12 md:py-16">
         <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">Explore Topics</h2>
+            <h2 class="text-3xl font-bold text-gray-900 mb-10 text-center">Explorer les Thèmes</h2>
             
             <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12">
                     <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
                         <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
                             <i class="fas fa-robot text-blue-600 text-xl"></i>
                         </div>
-                        <span class="text-sm font-medium text-gray-900">AI</span>
+                        <span class="text-sm font-medium text-gray-900">IA</span>
                     </a>
                     
                     <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
                         <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3">
                             <i class="fas fa-laptop-house text-green-600 text-xl"></i>
                         </div>
-                        <span class="text-sm font-medium text-gray-900">Remote Work</span>
+                        <span class="text-sm font-medium text-gray-900">Télétravail</span>
                     </a>
                     
                     <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
                         <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3">
                             <i class="fas fa-tachometer-alt text-purple-600 text-xl"></i>
                         </div>
-                        <span class="text-sm font-medium text-gray-900">Productivity</span>
+                        <span class="text-sm font-medium text-gray-900">Productivité</span>
                     </a>
                     
                     <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
@@ -168,7 +176,7 @@
                         <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-3">
                             <i class="fas fa-code text-red-600 text-xl"></i>
                         </div>
-                        <span class="text-sm font-medium text-gray-900">Development</span>
+                        <span class="text-sm font-medium text-gray-900">Développement</span>
                     </a>
                     
                     <a href="#" class="flex flex-col items-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow">
@@ -181,31 +189,35 @@
                 
                 <div class="text-center">
                     <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
-                        Browse all topics
+                        Parcourir tous les thèmes
                         <i class="fas fa-arrow-right ml-2"></i>
                     </a>
             </div>
         </div>
     </section>
+    */}}
 
+    {{/*
     <!-- Newsletter Section -->
     <section class="py-12 md:py-16 bg-blue-50">
         <div class="container mx-auto px-4 sm:px-6 lg:px-8">
             <div class="max-w-3xl mx-auto text-center">
-                <h2 class="text-3xl font-bold text-gray-900 mb-4">Stay Updated</h2>
-                <p class="text-gray-700 mb-6">Join our newsletter and get the latest insights on technology and the future of work delivered to your inbox.</p>
+                <h2 class="text-3xl font-bold text-gray-900 mb-4">Restez Informé</h2>
+                <p class="text-gray-700 mb-6">Rejoignez notre newsletter et recevez les dernières perspectives sur la technologie et l'avenir du travail directement dans votre boîte mail.</p>
                 <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
-                    <input type="email" 
-                           placeholder="Your email address" 
+                    <input type="email"
+                           placeholder="Votre adresse email"
                            class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                    <button type="submit" 
+                    <button type="submit"
                             class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">
-                        Subscribe
+                        S'abonner
                     </button>
                 </form>
-                <p class="text-sm text-gray-500 mt-4">No spam. Unsubscribe at any time.</p>
+                <p class="text-sm text-gray-500 mt-4">Pas de spam. Désabonnez-vous à tout moment.</p>
             </div>
         </div>
     </section>
+    */}}
+
 </div>
 {{ end }}
diff --git a/layouts/partials/pagination-tailwind.html b/layouts/partials/pagination-tailwind.html
new file mode 100644
index 0000000..6353880
--- /dev/null
+++ b/layouts/partials/pagination-tailwind.html
@@ -0,0 +1,96 @@
+<!-- Tailwind CSS Pagination -->
+{{ $paginator := . }}
+{{ if gt $paginator.TotalPages 1 }}
+<nav class="bg-white rounded-lg shadow-lg mx-auto max-w-2xl my-8 px-4 py-3">
+  <div class="flex items-center justify-between">
+    <div class="flex w-0 flex-1">
+      {{ if $paginator.HasPrev }}
+        <a href="{{ $paginator.Prev.URL }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md hover:bg-gray-100 transition-colors duration-200">
+          <svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
+          </svg>
+          Précédent
+        </a>
+      {{ else }}
+        <span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-gray-50 rounded-md cursor-not-allowed">
+          <svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
+          </svg>
+          Précédent
+        </span>
+      {{ end }}
+    </div>
+    
+    <!-- Desktop pagination - hidden on mobile -->
+    <div class="hidden md:flex items-center space-x-1">
+      {{ $currentPage := $paginator.PageNumber }}
+      {{ $totalPages := $paginator.TotalPages }}
+      
+      <!-- Always show first page -->
+      <a href="{{ $paginator.First.URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $currentPage 1 }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
+        1
+      </a>
+
+      <!-- Show ellipsis if current page is > 4 -->
+      {{ if gt $currentPage 4 }}
+        <span class="relative inline-flex items-center px-2 text-sm font-medium text-gray-500">
+          ...
+        </span>
+      {{ end }}
+
+      <!-- Show pages around current page -->
+      {{ range $paginator.Pagers }}
+        {{ $pageNumber := .PageNumber }}
+        {{ if and (gt $pageNumber 1) (lt $pageNumber $totalPages) (ge $pageNumber (sub $currentPage 1)) (le $pageNumber (add $currentPage 1)) }}
+          {{ if ne $pageNumber 1 }}
+            {{ if ne $pageNumber $totalPages }}
+              <a href="{{ .URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $pageNumber $currentPage }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
+                {{ $pageNumber }}
+              </a>
+            {{ end }}
+          {{ end }}
+        {{ end }}
+      {{ end }}
+
+      <!-- Show ellipsis if current page is < totalPages - 3 -->
+      {{ if lt $currentPage (sub $totalPages 3) }}
+        <span class="relative inline-flex items-center px-2 text-sm font-medium text-gray-500">
+          ...
+        </span>
+      {{ end }}
+
+      <!-- Always show last page -->
+      {{ if gt $totalPages 1 }}
+        <a href="{{ $paginator.Last.URL }}" class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full transition-colors duration-200 {{ if eq $currentPage $totalPages }}text-white bg-blue-600{{ else }}text-gray-700 hover:bg-gray-100{{ end }}">
+          {{ $totalPages }}
+        </a>
+      {{ end }}
+    </div>
+    
+    <!-- Mobile current page display -->
+    <div class="md:hidden">
+      <span class="relative inline-flex items-center justify-center w-10 h-10 text-sm font-medium text-white bg-blue-600 rounded-full">
+        {{ $paginator.PageNumber }}
+      </span>
+    </div>
+    
+    <div class="flex w-0 flex-1 justify-end">
+      {{ if $paginator.HasNext }}
+        <a href="{{ $paginator.Next.URL }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md hover:bg-gray-100 transition-colors duration-200">
+          Suivant
+          <svg class="w-5 h-5 ml-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+          </svg>
+        </a>
+      {{ else }}
+        <span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-gray-50 rounded-md cursor-not-allowed">
+          Suivant
+          <svg class="w-5 h-5 ml-2" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+          </svg>
+        </span>
+      {{ end }}
+    </div>
+  </div>
+</nav>
+{{ end }}