diff --git a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
index 3b128644..b603f77f 100644
--- a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
+++ b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
@@ -38,7 +38,10 @@ export function KnowledgeBaseCards() {
           <button
             key={item.label}
             onClick={() => navigate(item.href)}
-            className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
+            className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
+            style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
+            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
+            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
           >
             <item.icon size={20} style={{ color: item.color }} />
             <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
diff --git a/frontend/src/components/dashboard/TeamSummary.tsx b/frontend/src/components/dashboard/TeamSummary.tsx
index bc3389fc..a7a246a3 100644
--- a/frontend/src/components/dashboard/TeamSummary.tsx
+++ b/frontend/src/components/dashboard/TeamSummary.tsx
@@ -43,7 +43,10 @@ export function TeamSummary() {
           <button
             key={item.label}
             onClick={() => navigate(item.href)}
-            className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
+            className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
+            style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
+            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
+            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
           >
             <item.icon size={20} style={{ color: item.color }} />
             <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ef9ca6d2..e1327ed0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -166,9 +166,13 @@
   background: var(--color-bg-card);
   border: 1px solid var(--color-border-default);
   border-radius: 8px;
-  transition: border-color 200ms ease;
+  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
+              border-color 200ms ease,
+              box-shadow 200ms ease;
   &:hover {
+    transform: translateY(-4px);
     border-color: var(--color-border-hover);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
   }
 }