diff --git a/assets/css/public.css b/assets/css/public.css
new file mode 100644
index 0000000..cbe230b
--- /dev/null
+++ b/assets/css/public.css
@@ -0,0 +1,309 @@
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
+
+/* Variables globales */
+:root {
+    /* Couleurs de fond */
+    --bg-primary: #2c2424;
+    --bg-secondary: #3e3232;
+    --bg-tertiary: #4a3f3f;
+    
+    /* Textes */
+    --text-primary: #e6d8cc;
+    --text-secondary: #cfbfa3;
+    --text-tertiary: #2c2420;
+    
+    /* Accents */
+    --accent-primary: #d2a679;
+    --accent-secondary: #e6b88a;
+    
+    /* Utilitaires */
+    --border-color: #5a4b4b;
+    --success-color: #5a8c54;
+    --error-color: #8c4646;
+    
+    /* Espacements */
+    --spacing-xs: 0.5rem;
+    --spacing-sm: 0.75rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    
+    /* Layout */
+    --content-width: 1200px;
+    --card-width: 280px;
+    
+    /* Effets */
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    --transition: all 0.3s ease;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+}
+
+/* Reset et styles de base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+/* Header container */
+.header-container {
+    width: 100%;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    padding: var(--spacing-lg) 0;
+    margin-bottom: var(--spacing-xl);
+}
+
+/* En-tête du site */
+.site-header {
+    max-width: var(--content-width);
+    margin: 0 auto;
+    padding: 0 var(--spacing-lg);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xl);
+    justify-content: center;
+}
+
+.site-header img {
+    height: 160px;
+    width: auto;
+    object-fit: contain;
+    flex-shrink: 0;
+}
+
+.site-header-content {
+    flex: 0 1 auto;
+}
+
+.site-header h1 {
+    font-family: 'Parisienne', cursive;
+    font-size: 3.5rem;
+    margin-bottom: var(--spacing-sm);
+    color: var(--text-primary);
+    font-weight: normal;
+}
+
+.site-header p {
+    font-size: 1.2rem;
+    max-width: 800px;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+/* Conteneur principal */
+.main-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+    padding: 0 var(--spacing-md);
+}
+
+/* Grille des romans */
+.novels-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-lg);
+}
+
+/* Carte de roman */
+.novel-card {
+    display: block;
+    text-decoration: none;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    position: relative;
+    will-change: transform;
+    color: inherit;
+}
+
+.novel-card:hover {
+    transform: translateY(-5px) !important;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+.novel-card.new-release::before {
+    content: 'Nouveau !';
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background-color: var(--accent-primary);
+    color: var(--text-tertiary);
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    z-index: 1;
+}
+
+.novel-cover {
+    width: 100%;
+    height: 380px;
+    object-fit: cover;
+    border-bottom: 3px solid var(--accent-primary);
+}
+
+.novel-info {
+    padding: var(--spacing-md);
+}
+
+.novel-info h2 {
+    font-size: 1.4rem;
+    margin-bottom: var(--spacing-xs);
+    color: var(--text-primary);
+}
+
+.novel-info p {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    margin-bottom: var(--spacing-sm);
+}
+
+.novel-link {
+    display: inline-block;
+    background-color: var(--accent-primary);
+    color: var(--text-tertiary);
+    text-decoration: none;
+    padding: 0.8rem 1.5rem;
+    border-radius: var(--radius-sm);
+    transition: var(--transition);
+}
+
+.novel-link:hover {
+    background-color: var(--accent-secondary);
+}
+
+/* Étiquette de date */
+.novel-date {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    margin-top: var(--spacing-xs);
+    margin-bottom: var(--spacing-sm);
+}
+
+/* Scrollbar personnalisée */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--accent-primary);
+    border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-secondary);
+}
+
+/* États de focus */
+:focus {
+    outline: none;
+}
+
+:focus-visible {
+    box-shadow: 0 0 0 2px var(--accent-primary);
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.novel-card {
+    animation: fadeIn 0.5s ease-out;
+    animation-fill-mode: backwards;
+}
+
+/* Animation décalée pour chaque carte */
+.novel-card:nth-child(n) {
+    animation-delay: calc(0.1s * var(--i, 0));
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+    :root {
+        --content-width: 95%;
+    }
+}
+
+@media (max-width: 768px) {
+    .site-header {
+        flex-direction: column;
+        text-align: center;
+        padding: var(--spacing-lg) var(--spacing-sm);
+        gap: var(--spacing-lg);
+    }
+
+    .site-header img {
+        height: 120px;
+    }
+
+    .site-header-content {
+        text-align: center;
+    }
+    
+    .site-header h1 {
+        font-size: 2.8rem;
+    }
+    
+    .site-header p {
+        font-size: 1.1rem;
+        margin: 0 auto;
+    }
+    
+    .novels-grid {
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: var(--spacing-md);
+    }
+    
+    .novel-cover {
+        height: 320px;
+    }
+}
+
+@media (max-width: 480px) {
+    .novels-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .novel-card {
+        max-width: 100%;
+    }
+    
+    .novel-cover {
+        height: 280px;
+    }
+    
+    .novel-info {
+        padding: var(--spacing-sm);
+    }
+    
+    .site-header h1 {
+        font-size: 2.4rem;
+    }
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index 73f35c4..cb8e41b 100644
--- a/index.php
+++ b/index.php
@@ -4,6 +4,34 @@ require_once 'includes/stories.php';
 
 $config = Config::load();
 $stories = Stories::getAll();
+
+// Trier les romans par date de mise à jour (du plus récent au plus ancien)
+usort($stories, function($a, $b) {
+    return strtotime($b['updated']) - strtotime($a['updated']);
+});
+
+// Fonction pour vérifier si un roman est une nouvelle parution (moins d'une semaine)
+function isNewRelease($story) {
+    $updateTime = strtotime($story['updated']);
+    $weekAgo = strtotime('-1 week');
+    return $updateTime > $weekAgo;
+}
+
+// Fonction pour formater la date en français
+function formatDate($date) {
+    $timestamp = strtotime($date);
+    $months = [
+        'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+        'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'
+    ];
+    
+    return sprintf(
+        "%d %s %d",
+        date('j', $timestamp),
+        $months[date('n', $timestamp) - 1],
+        date('Y', $timestamp)
+    );
+}
 ?>
 <!DOCTYPE html>
 <html lang="fr">
@@ -11,30 +39,51 @@ $stories = Stories::getAll();
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?= htmlspecialchars($config['site']['name']) ?></title>
+    
     <?php if (file_exists(__DIR__ . '/assets/images/site/favicon.png')): ?>
         <link rel="icon" type="image/png" href="assets/images/site/favicon.png">
     <?php endif; ?>
-    <link rel="stylesheet" href="assets/css/style.css">
+    
+    <link rel="stylesheet" href="assets/css/public.css">
+    
+    <meta name="description" content="<?= htmlspecialchars($config['site']['description']) ?>">
 </head>
 <body>
-    <header>
-        <?php if (!empty($config['site']['logo'])): ?>
-            <img src="<?= htmlspecialchars($config['site']['logo']) ?>" 
-                alt="<?= htmlspecialchars($config['site']['name']) ?>">
-        <?php endif; ?>
-        <h1><?= htmlspecialchars($config['site']['name']) ?></h1>
-        <p><?= htmlspecialchars($config['site']['description']) ?></p>
-    </header>
-    
-    <main>
-        <div class="stories-grid">
+    <div class="header-container">
+        <header class="site-header">
+            <?php if (!empty($config['site']['logo'])): ?>
+                <img src="<?= htmlspecialchars($config['site']['logo']) ?>" 
+                    alt="<?= htmlspecialchars($config['site']['name']) ?>"
+                    class="site-logo">
+            <?php endif; ?>
+            
+            <div class="site-header-content">
+                <h1><?= htmlspecialchars($config['site']['name']) ?></h1>
+                <p><?= nl2br(htmlspecialchars($config['site']['description'])) ?></p>
+            </div>
+        </header>
+    </div>
+
+    <main class="main-content">
+        <div class="novels-grid">
             <?php foreach ($stories as $story): ?>
-                <article class="story-card">
-                    <img src="<?= htmlspecialchars($story['cover']) ?>" alt="">
-                    <h2><?= htmlspecialchars($story['title']) ?></h2>
-                    <p><?= htmlspecialchars($story['description']) ?></p>
-                    <a href="story.php?id=<?= htmlspecialchars($story['id']) ?>">Lire</a>
-                </article>
+                <a href="roman.php?id=<?= htmlspecialchars($story['id']) ?>" class="novel-card <?= isNewRelease($story) ? 'new-release' : '' ?>">
+                    <img src="<?= htmlspecialchars($story['cover']) ?>" 
+                        alt="Couverture de <?= htmlspecialchars($story['title']) ?>"
+                        class="novel-cover"
+                        loading="lazy">
+                        
+                    <div class="novel-info">
+                        <h2><?= htmlspecialchars($story['title']) ?></h2>
+                        <p>
+                            <?= count($story['chapters'] ?? []) ?> 
+                            chapitre<?= count($story['chapters'] ?? []) > 1 ? 's' : '' ?>
+                        </p>
+                        <div class="novel-date">
+                            Mis à jour le <?= formatDate($story['updated']) ?>
+                        </div>
+                    </div>
+                </a>
             <?php endforeach; ?>
         </div>
     </main>