diff --git a/web/src/components/ReaderView.tsx b/web/src/components/ReaderView.tsx
index e4dcf4f..fa22445 100644
--- a/web/src/components/ReaderView.tsx
+++ b/web/src/components/ReaderView.tsx
@@ -7,83 +7,113 @@ interface ReaderViewProps {
 }
 
 export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewProps) {
+    // Determine content to show: full content > summary > default message
+    const displayContent = article.content || article.summary || '<p class="italic text-paper-muted">Aucun contenu disponible pour cet article.</p>';
+
     return (
         <div
-            className="fixed inset-0 z-50 bg-carbon/95 backdrop-blur-sm flex justify-center overflow-y-auto animate-in fade-in duration-500"
+            className="fixed inset-0 z-50 bg-carbon/95 backdrop-blur-md flex justify-center overflow-y-auto animate-in fade-in duration-500"
             onClick={onClose}
         >
             <div
-                className="w-full max-w-reading bg-carbon-light min-h-screen my-0 md:my-12 shadow-2xl relative animate-in slide-in-from-bottom duration-700"
+                className="w-full max-w-4xl bg-carbon-light min-h-screen my-0 md:my-12 shadow-[0_0_100px_rgba(0,0,0,0.8)] relative animate-in slide-in-from-bottom duration-700 rounded-t-3xl md:rounded-3xl border border-white/5"
                 onClick={(e) => e.stopPropagation()}
             >
                 {/* Progress bar simulation */}
-                <div className="sticky top-0 left-0 right-0 h-1 bg-gold/10 z-20">
-                    <div className="h-full bg-gold w-1/3 gold-glow shadow-gold" />
+                <div className="sticky top-0 left-0 right-0 h-1 bg-gold/5 z-30">
+                    <div className="h-full bg-gold w-1/4 gold-glow shadow-gold" />
                 </div>
 
+                {/* Close button for desktop */}
                 <button
                     onClick={onClose}
-                    className="absolute top-8 -right-16 hidden md:flex w-10 h-10 items-center justify-center rounded-full border border-gold/30 text-gold hover:bg-gold hover:text-carbon transition-all duration-300"
+                    className="absolute top-8 -right-16 hidden md:flex w-12 h-12 items-center justify-center rounded-full border border-gold/20 text-gold hover:bg-gold hover:text-carbon hover:scale-110 transition-all duration-300 z-50"
+                    title="Fermer"
                 >
-                    ✕
+                    <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
                 </button>
 
-                <div className="p-8 md:p-16">
-                    <header className="mb-12">
-                        <div className="flex items-center space-x-3 text-gold text-xs uppercase tracking-[0.3em] font-bold mb-6">
-                            <span>{article.feed_title}</span>
+                {/* Hero Image Section */}
+                {article.image_url && (
+                    <div className="w-full h-[40vh] md:h-[50vh] relative overflow-hidden rounded-t-3xl md:rounded-t-[calc(1.5rem-1px)]">
+                        <img
+                            src={article.image_url}
+                            alt={article.title}
+                            className="w-full h-full object-cover"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-t from-carbon-light via-carbon-light/20 to-transparent"></div>
+                    </div>
+                )}
+
+                <div className={`p-8 md:p-20 ${!article.image_url ? 'pt-16' : 'pt-8'}`}>
+                    <header className="mb-16">
+                        <div className="flex items-center space-x-3 text-gold text-[10px] uppercase tracking-[0.4em] font-black mb-8">
+                            <span className="bg-gold/10 px-2 py-1 rounded">{article.feed_title}</span>
                             <span className="opacity-30">•</span>
-                            <span>{article.published_at ? new Date(article.published_at).toLocaleDateString() : 'Aujourd\'hui'}</span>
+                            <span>{article.published_at ? new Date(article.published_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Aujourd\'hui'}</span>
                         </div>
 
-                        <h1 className="text-4xl md:text-6xl font-serif text-paper-white leading-[1.1] mb-8 italic">
+                        <h1 className="text-4xl md:text-6xl font-serif text-paper-white leading-[1.15] mb-10 italic-gold tracking-tight">
                             {article.title}
                         </h1>
 
-                        <div className="flex items-center justify-between py-6 border-y border-carbon-dark/50">
-                            <div className="flex items-center space-x-4">
+                        <div className="flex items-center justify-between py-8 border-y border-white/5">
+                            <div className="flex items-center space-x-6">
                                 <button
                                     onClick={() => onToggleFavorite(article.id)}
-                                    className={`flex items-center space-x-2 px-4 py-2 rounded-full border transition-all ${article.is_favorite
-                                            ? 'bg-gold text-carbon border-gold'
-                                            : 'border-gold/30 text-gold hover:bg-gold/10'
+                                    className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
+                                        ? 'bg-gold text-carbon border-gold gold-glow'
+                                        : 'border-gold/20 text-gold hover:bg-gold/5'
                                         }`}
                                 >
-                                    <span>{article.is_favorite ? '★' : '☆'}</span>
-                                    <span className="text-xs uppercase tracking-widest font-bold">
-                                        {article.is_favorite ? 'Favori' : 'Ajouter'}
+                                    <svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.382-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+                                    </svg>
+                                    <span className="text-[10px] uppercase tracking-[0.2em] font-black">
+                                        {article.is_favorite ? 'Dans vos favoris' : 'Ajouter aux favoris'}
                                     </span>
                                 </button>
-
-                                <button className="p-2 text-paper-muted hover:text-gold transition-colors">
-                                    📤
-                                </button>
                             </div>
 
                             <a
                                 href={article.url}
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className="text-xs uppercase tracking-widest font-bold text-gold hover:underline"
+                                className="group flex items-center space-x-2 text-[10px] uppercase tracking-[0.2em] font-black text-paper-muted hover:text-gold transition-colors"
                             >
-                                Lire sur le site original
+                                <span>Source d'origine</span>
+                                <svg className="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                                </svg>
                             </a>
                         </div>
                     </header>
 
                     <div
-                        className="prose prose-invert prose-gold max-w-none text-paper-white/90 text-xl font-reading leading-magazine space-y-8"
-                        dangerouslySetInnerHTML={{ __html: article.content || '<p>Aucun contenu disponible pour cet article.</p>' }}
+                        className="magazine-content text-paper-white/90 text-xl font-reading leading-relaxed space-y-8 selection:bg-gold/20"
+                        dangerouslySetInnerHTML={{ __html: displayContent }}
                     />
 
-                    <footer className="mt-20 pt-12 border-t border-carbon-dark/50 text-center pb-20">
-                        <div className="text-gold text-3xl font-serif mb-4 italic italic-gold">F</div>
-                        <p className="text-paper-muted text-sm font-sans tracking-wide">
-                            FlowReader Magazine — Immersion Totale.
+                    <footer className="mt-32 pt-16 border-t border-white/5 text-center pb-24">
+                        <div className="text-gold text-4xl font-serif mb-6 italic select-none">F.</div>
+                        <p className="text-paper-muted/40 text-[10px] uppercase tracking-[0.4em] font-black">
+                            FlowReader Lux Édition • 2026
                         </p>
                     </footer>
                 </div>
             </div>
+
+            {/* Mobile close button overlay */}
+            <button
+                onClick={onClose}
+                className="fixed bottom-8 right-8 md:hidden w-14 h-14 bg-gold text-carbon rounded-full shadow-2xl flex items-center justify-center scale-90 active:scale-75 transition-transform gold-glow z-50"
+            >
+                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
         </div>
     );
 }
diff --git a/web/src/index.css b/web/src/index.css
index ca31e85..7bac883 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -93,4 +93,34 @@
   .input-field {
     @apply bg-carbon-dark border border-white/10 text-paper-white px-4 py-3 rounded-lg focus:border-gold/50 focus:ring-1 focus:ring-gold/50 outline-none transition-all placeholder:text-paper-muted/30;
   }
+
+  .magazine-content {
+    @apply font-reading leading-relaxed text-paper-white/80;
+  }
+
+  .magazine-content p {
+    @apply mb-8;
+  }
+
+  .magazine-content a {
+    @apply text-gold border-b border-gold/20 hover:border-gold transition-all no-underline;
+  }
+
+  .magazine-content h2,
+  .magazine-content h3 {
+    @apply text-white font-serif italic mb-6 mt-12;
+  }
+
+  .magazine-content img {
+    @apply rounded-2xl my-12 border border-white/5 shadow-2xl mx-auto;
+  }
+
+  .magazine-content ul,
+  .magazine-content ol {
+    @apply mb-8 ml-6 space-y-4;
+  }
+
+  .magazine-content li {
+    @apply pl-2;
+  }
 }
\ No newline at end of file