diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8014714..a7cf5e4 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -413,8 +413,14 @@ function App() {
 }
 
 function SiteCard({ site, onClick, onToggleFav, onEdit, onDelete }) {
+  const categoryColor = site.category?.color || '#667eea'
   return (
-    <div className="site-card" onClick={onClick}>
+    <div 
+      className="site-card" 
+      onClick={onClick}
+      data-category-color={categoryColor}
+      style={{ '--category-color': categoryColor }}
+    >
       {site.category && <span className="card-category">{site.category.name}</span>}
       <div className="card-icon">
         {site.icon && site.icon.startsWith('http') ? <img src={site.icon} alt=""/> : <Icon name={site.icon || 'globe'} size={26}/>}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0daf118..2395b78 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -305,14 +305,14 @@ body {
   left: 0;
   right: 0;
   height: 4px;
-  background: linear-gradient(90deg, #667eea, #764ba2);
+  background: var(--category-color, #667eea);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
 .site-card:hover {
   transform: translateY(-6px);
-  box-shadow: 0 16px 50px rgba(102, 126, 234, 0.25);
+  box-shadow: 0 16px 50px color-mix(in srgb, var(--category-color, #667eea) 30%, transparent);
 }
 
 .site-card:hover::before {
@@ -323,6 +323,17 @@ body {
   opacity: 1;
 }
 
+.site-card:hover .card-icon {
+  background: linear-gradient(135deg, 
+    color-mix(in srgb, var(--category-color, #667eea) 15%, transparent),
+    color-mix(in srgb, var(--category-color, #667eea) 10%, transparent)
+  );
+}
+
+.site-card:hover .card-icon svg {
+  color: var(--category-color, #667eea);
+}
+
 .card-bottom-actions {
   position: absolute;
   bottom: 12px;