diff --git a/web/index.html b/web/index.html
index af88f03..d5c6a03 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>web</title>
   </head>
diff --git a/web/public/favicon.png b/web/public/favicon.png
new file mode 100644
index 0000000..4c6cf17
Binary files /dev/null and b/web/public/favicon.png differ
diff --git a/web/public/logo.png b/web/public/logo.png
new file mode 100644
index 0000000..71ffdc6
Binary files /dev/null and b/web/public/logo.png differ
diff --git a/web/src/components/ArticleCard.tsx b/web/src/components/ArticleCard.tsx
index 564d18d..cfd0b5b 100644
--- a/web/src/components/ArticleCard.tsx
+++ b/web/src/components/ArticleCard.tsx
@@ -11,7 +11,7 @@ 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 break-inside-avoid-column inline-block w-full mb-8 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 break-inside-avoid-column inline-block w-full mb-8 shadow-2xl shadow-gold/10 hover:shadow-carbon/10 transition-all duration-500 rounded-xl border border-transparent hover:border-gold/10" onClick={() => onClick(article)}>
             {/* 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>
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 009f814..b8ffb04 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -39,7 +39,7 @@ 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-2xl font-serif italic tracking-tight">FlowReader</h1>
+                        <img src="/logo.png" alt="FlowReader" className="h-12 w-auto object-contain" />
                         <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"
@@ -53,7 +53,7 @@ export function Sidebar({ onSelectFeed, selectedFeedId }: SidebarProps) {
                         <button
                             onClick={() => onSelectFeed(null)}
                             className={`w-full group flex items-center justify-between px-4 py-3 rounded-lg transition-all duration-300 ${selectedFeedId === null
-                                ? 'bg-gold/10 text-gold-bright shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]'
+                                ? 'bg-gold/20 text-yellow-700 shadow-sm border border-gold/20'
                                 : 'text-paper-muted hover:text-gold hover:bg-gold/5'
                                 }`}
                         >