diff --git a/web/src/components/ArticleCard.tsx b/web/src/components/ArticleCard.tsx
index 1dfd967..699e888 100644
--- a/web/src/components/ArticleCard.tsx
+++ b/web/src/components/ArticleCard.tsx
@@ -11,32 +11,32 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
     const timeToRead = Math.ceil((article.content?.length || 500) / 1000) + 1;
 
     return (
-        <article className="magazine-card group cursor-pointer flex flex-col h-full relative overflow-visible shadow-xl shadow-paper-muted/20 hover:shadow-2xl hover:shadow-gold/20 transition-all duration-500 rounded-xl border border-transparent hover:border-gold/10" onClick={() => onClick(article)}>
+        <article className="magazine-card group cursor-pointer flex flex-col h-full relative overflow-visible shadow-xl shadow-paper-muted/20 hover:shadow-2xl hover:shadow-nature/20 transition-all duration-500 rounded-xl border border-transparent hover:border-nature/10" onClick={() => onClick(article)}>
 
             {/* Unread Ribbon - Polished Wrapping Effect */}
             {!article.is_read && (
                 <div className="absolute -top-2 -right-2 z-50 w-[100px] h-[100px] overflow-hidden pointer-events-none">
                     {/* The Ribbon Itself */}
-                    <div className="absolute top-[22px] -right-[35px] w-[140px] bg-gold text-carbon text-[10px] font-extrabold uppercase tracking-widest py-1.5 text-center transform rotate-45 shadow-lg shadow-black/10 border-b border-white/10 flex items-center justify-center">
+                    <div className="absolute top-[22px] -right-[35px] w-[140px] bg-nature text-white text-[10px] font-extrabold uppercase tracking-widest py-1.5 text-center transform rotate-45 shadow-lg shadow-black/20 border-b border-white/10 flex items-center justify-center opacity-100 z-50">
                         Non Lu
                     </div>
 
                     {/* Darker Folds for "Wrapping" Effect (Simulated behind the card) */}
-                    <div className="absolute top-0 left-[22px] w-3 h-3 bg-yellow-900 rotate-45 transform -translate-x-1/2 -translate-y-1/2 z-[-1]"></div>
-                    <div className="absolute bottom-[22px] right-0 w-3 h-3 bg-yellow-900 rotate-45 transform translate-x-1/2 translate-y-1/2 z-[-1]"></div>
+                    <div className="absolute top-0 left-[22px] w-3 h-3 bg-green-900 rotate-45 transform -translate-x-1/2 -translate-y-1/2 z-[-1]"></div>
+                    <div className="absolute bottom-[22px] right-0 w-3 h-3 bg-green-900 rotate-45 transform translate-x-1/2 translate-y-1/2 z-[-1]"></div>
                 </div>
             )}
             {!article.is_read && (
                 /* External fold bits to cover the corner if needed for perfection */
                 <>
-                    <div className="absolute -top-[5px] right-[62px] w-2 h-2 bg-yellow-800 rotate-45 z-40 rounded-sm"></div>
-                    <div className="absolute top-[62px] -right-[5px] w-2 h-2 bg-yellow-800 rotate-45 z-40 rounded-sm"></div>
+                    <div className="absolute -top-[5px] right-[62px] w-2 h-2 bg-green-800 rotate-45 z-40 rounded-sm"></div>
+                    <div className="absolute top-[62px] -right-[5px] w-2 h-2 bg-green-800 rotate-45 z-40 rounded-sm"></div>
                 </>
             )}
 
-            {/* Image Placeholder with Gold Overlay */}
-            <div className="aspect-[16/10] overflow-hidden rounded-xl bg-carbon-light relative mb-6">
-                <div className="absolute inset-0 bg-gradient-to-t from-carbon-dark/80 via-transparent to-transparent opacity-60 z-10"></div>
+            {/* Image Placeholder with Gradient Overlay */}
+            <div className="aspect-[16/10] overflow-hidden rounded-t-xl rounded-b-none bg-carbon-light relative mb-6">
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-90 z-10"></div>
 
                 {/* Visual placeholder or real image */}
                 <div
@@ -49,10 +49,10 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
 
                 {/* Meta on top of image */}
                 <div className="absolute bottom-4 left-4 right-4 z-20 flex justify-between items-end">
-                    <span className="text-[10px] text-gold-bright uppercase tracking-[.25em] font-black drop-shadow-md">
+                    <span className="text-[10px] text-white uppercase tracking-[.25em] font-black drop-shadow-md">
                         {article.feed_title || 'Journal'}
                     </span>
-                    <span className="text-[10px] text-paper-muted uppercase tracking-widest font-bold">
+                    <span className="text-[10px] text-white/80 uppercase tracking-widest font-bold">
                         {timeToRead} min
                     </span>
                 </div>
@@ -60,14 +60,14 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
 
             {/* Content */}
             <div className="space-y-4 px-1">
-                <h2 className={`text-xl font-serif italic transition-colors duration-300 group-hover:text-gold ${article.is_read ? 'text-paper-muted font-normal' : 'text-paper-white font-bold'}`}
+                <h2 className={`text-xl font-serif italic transition-colors duration-300 group-hover:text-nature-light ${article.is_read ? 'text-paper-muted font-normal' : 'text-paper-white font-bold'}`}
                     style={article.is_read ? {} : { textShadow: '0 1px 1px rgba(0,0,0,0.1)' }}
                 >
                     {article.title}
                 </h2>
 
                 {article.summary && (
-                    <p className="text-paper-muted text-sm leading-relaxed line-clamp-3 font-reading opacity-80 decoration-gold/0 group-hover:opacity-100 transition-opacity">
+                    <p className="text-paper-muted text-sm leading-relaxed line-clamp-3 font-reading opacity-80 decoration-nature/0 group-hover:opacity-100 transition-opacity">
                         {article.summary.replace(/<[^>]*>?/gm, '').substring(0, 160)}...
                     </p>
                 )}
@@ -79,7 +79,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
                                 e.stopPropagation();
                                 onToggleRead(article.id, !article.is_read);
                             }}
-                            className={`p-1.5 rounded-full transition-all duration-300 border ${article.is_read ? 'text-gold/40 border-gold/10' : 'text-gold bg-gold/5 border-paper-white/40 hover:bg-gold/20 hover:border-paper-white'}`}
+                            className={`p-1.5 rounded-full transition-all duration-300 border ${article.is_read ? 'text-nature/40 border-nature/10' : 'text-nature bg-nature/5 border-paper-white/40 hover:bg-nature/20 hover:border-nature'}`}
                             title={article.is_read ? "Marquer comme non lu" : "Marquer comme lu"}
                         >
                             <svg className="w-4 h-4" fill={article.is_read ? "none" : "currentColor"} viewBox="0 0 24 24" stroke="currentColor">
@@ -91,7 +91,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
                                 e.stopPropagation();
                                 onToggleFavorite(article.id);
                             }}
-                            className={`p-1.5 rounded-full transition-all duration-300 ${article.is_favorite ? 'text-gold gold-glow' : 'text-paper-muted hover:text-gold hover:bg-gold/10'}`}
+                            className={`p-1.5 rounded-full transition-all duration-300 ${article.is_favorite ? 'text-nature nature-glow' : 'text-paper-muted hover:text-nature hover:bg-nature/10'}`}
                             title="Ajouter aux favoris"
                         >
                             <svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index fe9b346..5c97354 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -68,16 +68,17 @@ export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
             <aside className="w-72 bg-carbon-dark/50 backdrop-blur-xl border-r border-white/5 h-screen flex flex-col z-20">
                 <div className="p-8 pb-4">
                     <div className="flex items-center justify-between mb-8">
+
                         <h1
-                            className="text-gold text-3xl font-serif italic tracking-tight cursor-pointer hover:opacity-80 transition-opacity"
-                            style={{ textShadow: '1px 1px 2px rgba(100, 100, 100, 0.5)' }}
+                            className="text-nature text-3xl font-serif italic tracking-tight cursor-pointer hover:opacity-80 transition-opacity"
+                            style={{ textShadow: '1px 1px 2px rgba(100, 100, 100, 0.2)' }}
                             onClick={() => onSelectFeed(null)}
                         >
                             FlowReader
                         </h1>
                         <button
                             onClick={() => setIsAddModalOpen(true)}
-                            className="w-8 h-8 flex items-center justify-center rounded-full border border-gold/20 text-gold hover:bg-gold hover:text-carbon transition-all duration-300 shadow-sm"
+                            className="w-8 h-8 flex items-center justify-center rounded-full border border-nature/20 text-nature hover:bg-nature hover:text-white transition-all duration-300 shadow-sm"
                             title="Ajouter un flux"
                         >
                             <span className="text-xl leading-none">+</span>
@@ -89,8 +90,8 @@ export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
                             onClick={() => markAllReadMutation.mutate()}
                             disabled={markAllReadMutation.isPending}
                             className={`w-full group flex items-center justify-center space-x-3 px-4 py-3 rounded-lg transition-all duration-300 border ${markAllReadMutation.isPending
-                                ? 'bg-gold/5 border-gold/10 text-gold/50 cursor-wait'
-                                : 'bg-transparent border-gold/20 text-paper-muted hover:text-gold hover:bg-gold/5 hover:border-gold/40'
+                                ? 'bg-nature/5 border-nature/10 text-nature/50 cursor-wait'
+                                : 'bg-transparent border-nature/20 text-paper-muted hover:text-nature hover:bg-nature/5 hover:border-nature/40'
                                 }`}
                             title="Tout marquer comme lu"
                         >
@@ -115,12 +116,12 @@ export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
                                 <button
                                     onClick={() => onSelectFeed(null)}
                                     className={`w-full flex items-center justify-between px-4 py-2.5 rounded-lg transition-all duration-300 text-left ${selectedFeedId === null
-                                        ? 'bg-gold/10 text-gold-bright'
-                                        : 'text-paper-muted hover:text-gold hover:bg-gold/5'
+                                        ? 'bg-nature/10 text-nature border border-nature/20'
+                                        : 'text-paper-muted hover:text-nature-light hover:bg-nature/5'
                                         }`}
                                 >
                                     <span className="text-sm font-medium truncate flex items-center">
-                                        <span className={`w-1.5 h-1.5 rounded-full bg-gold/40 mr-3 transition-opacity ${selectedFeedId === null ? 'opacity-100' : 'opacity-0 group-hover/item:opacity-100'}`}></span>
+                                        <span className={`w-1.5 h-1.5 rounded-full bg-nature mr-3 transition-opacity ${selectedFeedId === null ? 'opacity-100' : 'opacity-0 group-hover/item:opacity-100'}`}></span>
                                         Tous les articles
                                     </span>
                                 </button>
@@ -129,12 +130,12 @@ export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
                                 <button
                                     onClick={() => onSelectFeed('favorites')}
                                     className={`w-full flex items-center justify-between px-4 py-2.5 rounded-lg transition-all duration-300 text-left ${selectedFeedId === 'favorites'
-                                        ? 'bg-gold/10 text-gold-bright'
-                                        : 'text-paper-muted hover:text-gold hover:bg-gold/5'
+                                        ? 'bg-nature/10 text-nature border border-nature/20'
+                                        : 'text-paper-muted hover:text-nature-light hover:bg-nature/5'
                                         }`}
                                 >
                                     <span className="text-sm font-medium truncate flex items-center">
-                                        <span className={`w-1.5 h-1.5 rounded-full bg-gold/40 mr-3 transition-opacity ${selectedFeedId === 'favorites' ? 'opacity-100' : 'opacity-0 group-hover/item:opacity-100'}`}></span>
+                                        <span className={`w-1.5 h-1.5 rounded-full bg-nature mr-3 transition-opacity ${selectedFeedId === 'favorites' ? 'opacity-100' : 'opacity-0 group-hover/item:opacity-100'}`}></span>
                                         Mes Favoris
                                     </span>
                                 </button>
@@ -144,24 +145,24 @@ export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
                                     <button
                                         onClick={() => onSelectFeed(feed.id)}
                                         className={`w-full flex items-center justify-between px-4 py-2.5 rounded-lg transition-all duration-300 text-left ${selectedFeedId === feed.id
-                                            ? 'bg-gold/10 text-gold-bright'
-                                            : 'text-paper-muted hover:text-gold hover:bg-gold/5'
+                                            ? 'bg-nature/10 text-nature border border-nature/20'
+                                            : 'text-paper-muted hover:text-nature-light hover:bg-nature/5'
                                             }`}
                                     >
                                         <span className="text-sm font-medium truncate flex items-center">
-                                            <span className={`w-1.5 h-1.5 rounded-full bg-gold/40 mr-3 transition-opacity ${selectedFeedId === feed.id ? 'opacity-100' : 'opacity-0 group-hover/item:opacity-100'}`}></span>
+                                            <span className={`w-1.5 h-1.5 rounded-full bg-nature mr-3 transition-opacity ${selectedFeedId === feed.id ? 'opacity-100' : 'opacity-0 group-hover/item:opacity-100'}`}></span>
                                             {feed.title}
                                         </span>
 
                                         <div className="flex items-center space-x-2">
                                             {(feed.unread_count ?? 0) > 0 && (
-                                                <span className="bg-gold/20 text-gold text-[10px] px-1.5 py-0.5 rounded-full min-w-[1.2rem] text-center font-bold">
+                                                <span className="bg-nature/20 text-nature text-[10px] px-1.5 py-0.5 rounded-full min-w-[1.2rem] text-center font-bold">
                                                     {feed.unread_count}
                                                 </span>
                                             )}
                                             <button
                                                 onClick={(e) => handleRename(e, feed.id, feed.title)}
-                                                className="opacity-0 group-hover/item:opacity-50 hover:!opacity-100 p-1 text-gold transition-all duration-300 transform scale-75 hover:scale-100"
+                                                className="opacity-0 group-hover/item:opacity-50 hover:!opacity-100 p-1 text-nature transition-all duration-300 transform scale-75 hover:scale-100"
                                                 title="Renommer le flux"
                                             >
                                                 <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -186,8 +187,8 @@ export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
                 </div>
 
                 <div className="p-6 border-t border-white/5">
-                    <div className="p-4 rounded-xl bg-gold/5 border border-gold/10">
-                        <p className="text-[10px] text-gold/60 uppercase tracking-widest font-bold mb-1">Mode Zen</p>
+                    <div className="p-4 rounded-xl bg-nature/5 border border-nature/10">
+                        <p className="text-[10px] text-nature/60 uppercase tracking-widest font-bold mb-1">Mode Zen</p>
                         <p className="text-[9px] text-paper-muted leading-relaxed italic">"Le silence est le bruit des esprits."</p>
                     </div>
                 </div>