diff --git a/frontend/src/components/ui/Badge.tsx b/frontend/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..f674e0d
--- /dev/null
+++ b/frontend/src/components/ui/Badge.tsx
@@ -0,0 +1,53 @@
+import { FC, ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+
+interface BadgeProps {
+  children: ReactNode;
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  animated?: boolean;
+}
+
+/**
+ * Badge component for displaying status indicators
+ * 
+ * Note: The animated prop uses the 'animate-ui-pulse-glow' CSS class
+ * which is defined in src/index.css
+ */
+export const Badge: FC<BadgeProps> = ({
+  children,
+  variant = 'default',
+  size = 'md',
+  className,
+  animated = false,
+}) => {
+  const variants = {
+    default: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+    success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
+    warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+    error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+    info: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300',
+    neutral: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
+  };
+
+  const sizes = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2.5 py-1 text-sm',
+    lg: 'px-3 py-1.5 text-base',
+  };
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center font-medium rounded-full transition-colors',
+        variants[variant],
+        sizes[size],
+        animated && 'animate-ui-pulse-glow',
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+};
diff --git a/frontend/src/components/ui/Breadcrumbs.tsx b/frontend/src/components/ui/Breadcrumbs.tsx
new file mode 100644
index 0000000..6cf742f
--- /dev/null
+++ b/frontend/src/components/ui/Breadcrumbs.tsx
@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { ChevronRight, Home } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  className?: string;
+}
+
+export const Breadcrumbs: FC<BreadcrumbsProps> = ({ items, className }) => {
+  return (
+    <nav aria-label="Breadcrumb" className={cn('flex items-center text-sm', className)}>
+      <Link
+        to="/"
+        className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+        aria-label="Home"
+      >
+        <Home className="h-4 w-4" />
+      </Link>
+      
+      {items.map((item, index) => (
+        <div key={index} className="flex items-center">
+          <ChevronRight className="h-4 w-4 mx-2 text-slate-400 dark:text-slate-500" />
+          {item.href && index < items.length - 1 ? (
+            <Link
+              to={item.href}
+              className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+            >
+              {item.label}
+            </Link>
+          ) : (
+            <span className="text-slate-900 dark:text-slate-100 font-medium">
+              {item.label}
+            </span>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+};
diff --git a/frontend/src/components/ui/EmptyState.tsx b/frontend/src/components/ui/EmptyState.tsx
new file mode 100644
index 0000000..90f91f2
--- /dev/null
+++ b/frontend/src/components/ui/EmptyState.tsx
@@ -0,0 +1,41 @@
+import { FC, ReactNode } from 'react';
+import { FileQuestion } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export const EmptyState: FC<EmptyStateProps> = ({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center p-12 text-center',
+        className
+      )}
+    >
+      <div className="mb-4 text-slate-400 dark:text-slate-500">
+        {icon || <FileQuestion className="h-16 w-16" />}
+      </div>
+      <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
+        {title}
+      </h3>
+      {description && (
+        <p className="text-sm text-slate-500 dark:text-slate-400 mb-6 max-w-md">
+          {description}
+        </p>
+      )}
+      {action && <div>{action}</div>}
+    </div>
+  );
+};
diff --git a/frontend/src/components/ui/LoadingSkeleton.tsx b/frontend/src/components/ui/LoadingSkeleton.tsx
new file mode 100644
index 0000000..4269796
--- /dev/null
+++ b/frontend/src/components/ui/LoadingSkeleton.tsx
@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { cn } from '../../lib/utils';
+
+interface LoadingSkeletonProps {
+  variant?: 'text' | 'circular' | 'rectangular' | 'card';
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  count?: number;
+}
+
+/**
+ * LoadingSkeleton component for showing loading states
+ * 
+ * Note: Uses the 'animate-ui-shimmer' CSS class defined in src/index.css
+ */
+export const LoadingSkeleton: FC<LoadingSkeletonProps> = ({
+  variant = 'rectangular',
+  width,
+  height,
+  className,
+  count = 1,
+}) => {
+  const baseClasses = [
+    'animate-ui-shimmer',
+    'bg-gradient-to-r',
+    'from-slate-200 via-slate-300 to-slate-200',
+    'dark:from-slate-700 dark:via-slate-600 dark:to-slate-700'
+  ].join(' ');
+  
+  const variants = {
+    text: 'rounded h-4',
+    circular: 'rounded-full',
+    rectangular: 'rounded-md',
+    card: 'rounded-xl h-32',
+  };
+
+  const style = {
+    width: width || (variant === 'text' ? '100%' : variant === 'circular' ? '48px' : '100%'),
+    height: height || (variant === 'circular' ? '48px' : variant === 'card' ? '128px' : '16px'),
+  };
+
+  if (count > 1) {
+    return (
+      <div className="space-y-2">
+        {Array.from({ length: count }).map((_, index) => (
+          <div
+            key={index}
+            className={cn(baseClasses, variants[variant], className)}
+            style={style}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(baseClasses, variants[variant], className)}
+      style={style}
+    />
+  );
+};
diff --git a/frontend/src/components/ui/Tooltip.tsx b/frontend/src/components/ui/Tooltip.tsx
new file mode 100644
index 0000000..0bb5f6a
--- /dev/null
+++ b/frontend/src/components/ui/Tooltip.tsx
@@ -0,0 +1,76 @@
+import { FC, ReactNode, useState, KeyboardEvent } from 'react';
+import { cn } from '../../lib/utils';
+
+interface TooltipProps {
+  content: string | ReactNode;
+  children: ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+}
+
+/**
+ * Tooltip component for displaying contextual help
+ * 
+ * Keyboard navigation:
+ * - Press Enter or Space to toggle tooltip visibility
+ * - Press Escape to close the tooltip
+ */
+export const Tooltip: FC<TooltipProps> = ({
+  content,
+  children,
+  position = 'top',
+  className,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const positionClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setIsVisible(false);
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setIsVisible(prev => !prev);
+    }
+  };
+
+  return (
+    <div className="relative inline-block">
+      <div
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        onFocus={() => setIsVisible(true)}
+        onBlur={() => setIsVisible(false)}
+        onKeyDown={handleKeyDown}
+      >
+        {children}
+      </div>
+      {isVisible && (
+        <div
+          role="tooltip"
+          className={cn(
+            'absolute z-50 px-3 py-2 text-sm text-white bg-slate-900 dark:bg-slate-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none animate-in fade-in-0 zoom-in-95',
+            positionClasses[position],
+            className
+          )}
+        >
+          {content}
+          <div
+            className={cn(
+              'absolute w-2 h-2 bg-slate-900 dark:bg-slate-700 rotate-45',
+              position === 'top' && 'bottom-[-4px] left-1/2 -translate-x-1/2',
+              position === 'bottom' && 'top-[-4px] left-1/2 -translate-x-1/2',
+              position === 'left' && 'right-[-4px] top-1/2 -translate-y-1/2',
+              position === 'right' && 'left-[-4px] top-1/2 -translate-y-1/2'
+            )}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2e81f44..8435093 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -23,3 +23,33 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* Custom Animations */
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+  }
+  50% {
+    opacity: 0.9;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+  }
+}
+
+.animate-ui-shimmer {
+  animation: shimmer 2s infinite linear;
+  background-size: 2000px 100%;
+}
+
+.animate-ui-pulse-glow {
+  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
diff --git a/frontend/src/pages/FinalSummary.tsx b/frontend/src/pages/FinalSummary.tsx
index 7f309c2..789e8b3 100644
--- a/frontend/src/pages/FinalSummary.tsx
+++ b/frontend/src/pages/FinalSummary.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { FileInput, GitMerge, Gavel, ArrowLeft } from 'lucide-react';
+import { FileInput, GitMerge, Gavel, TrendingUp, Clock } from 'lucide-react';
 import { toast } from 'react-hot-toast';
 
 import { SuccessBanner } from '../components/summary/SuccessBanner';
@@ -10,7 +10,10 @@ import { KeyFindings, Finding } from '../components/summary/KeyFindings';
 import { ChartEmbed } from '../components/summary/ChartEmbed';
 import { PDFGenerator } from '../components/summary/PDFGenerator';
 import { ActionButtons } from '../components/summary/ActionButtons';
-import { Button } from '../components/ui/Button';
+import { Breadcrumbs } from '../components/ui/Breadcrumbs';
+import { Badge } from '../components/ui/Badge';
+import { Tooltip } from '../components/ui/Tooltip';
+import { LoadingSkeleton } from '../components/ui/LoadingSkeleton';
 import { apiRequest } from '../lib/api';
 
 
@@ -106,10 +109,31 @@ export const FinalSummary: FC = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen p-8 flex items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
-          <p className="text-slate-500">Generating Case Summary...</p>
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-6 md:p-8">
+        <div className="max-w-7xl mx-auto space-y-6">
+          {/* Header Skeleton */}
+          <div className="flex items-center gap-4">
+            <LoadingSkeleton variant="rectangular" width="120px" height="32px" />
+          </div>
+          
+          {/* Success Banner Skeleton */}
+          <LoadingSkeleton variant="card" height="120px" />
+          
+          {/* Summary Cards Skeleton */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2 space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <LoadingSkeleton variant="card" count={3} />
+              </div>
+              <LoadingSkeleton variant="card" height="300px" />
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <LoadingSkeleton variant="card" count={4} />
+              </div>
+            </div>
+            <div className="space-y-6">
+              <LoadingSkeleton variant="card" height="200px" />
+            </div>
+          </div>
         </div>
       </div>
     );
@@ -121,15 +145,42 @@ export const FinalSummary: FC = () => {
     <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-6 md:p-8 animate-in fade-in duration-500">
       <div className="max-w-7xl mx-auto">
         
+        {/* Breadcrumbs */}
+        <Breadcrumbs 
+          items={[
+            { label: 'Cases', href: '/cases' },
+            { label: `Case ${caseId}`, href: `/cases/${caseId}` },
+            { label: 'Summary' }
+          ]}
+          className="mb-6"
+        />
+        
         {/* Header */}
-        <div className="flex items-center gap-4 mb-8">
-            <Button variant="ghost" size="sm" onClick={() => navigate('/cases')} className="text-slate-500 hover:text-slate-800 dark:hover:text-slate-200">
-                <ArrowLeft className="w-4 h-4 mr-1" />
-                Back to Cases
-            </Button>
-            <h1 className="text-xl font-semibold text-slate-800 dark:text-slate-200">
-                Case Summary / <span className="text-slate-500 font-normal">{caseId}</span>
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-4">
+            <h1 className="text-2xl font-bold text-slate-800 dark:text-slate-200">
+              Case Summary
             </h1>
+            <Badge variant="neutral" size="md">
+              {caseId}
+            </Badge>
+            <Tooltip content={data ? `Data quality: ${data.dataQuality}%` : 'Loading...'}>
+              <Badge 
+                variant={data && data.dataQuality >= 90 ? 'success' : data && data.dataQuality >= 70 ? 'info' : 'warning'} 
+                size="sm"
+              >
+                {data ? `${data.dataQuality}% Quality` : 'Loading...'}
+              </Badge>
+            </Tooltip>
+          </div>
+          <div className="flex items-center gap-3">
+            <Tooltip content="Days to resolution">
+              <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 px-3 py-2 rounded-lg">
+                <Clock className="h-4 w-4" />
+                <span className="font-medium">{data ? `${data.daysToResolution} days` : 'Loading...'}</span>
+              </div>
+            </Tooltip>
+          </div>
         </div>
 
         {/* Success Banner */}
@@ -214,11 +265,53 @@ export const FinalSummary: FC = () => {
                 <PDFGenerator caseId={caseId} onGenerate={handleGenerateReport} />
              </motion.div>
              
-             {/* Additional context or quick stats could go here */}
-             <div className="bg-slate-50 dark:bg-slate-800/50 rounded-xl p-6 border border-slate-200 dark:border-slate-800 text-sm opacity-80">
-                 <h4 className="font-semibold mb-2">Analyst Note</h4>
-                 <p>This case exceeds the threshold for automatic reporting. Please review all findings before generating the final compliance PDF.</p>
-             </div>
+             {/* Case Metrics Summary */}
+             <motion.div
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.6 }}
+                className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/10 rounded-xl p-6 border border-blue-200 dark:border-blue-800"
+             >
+                <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-4 flex items-center gap-2">
+                  <TrendingUp className="h-4 w-4" />
+                  Case Metrics
+                </h4>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-blue-700 dark:text-blue-300">Status</span>
+                    <Badge 
+                      variant={data?.status === 'success' ? 'success' : data?.status === 'partial' ? 'warning' : 'error'} 
+                      size="sm"
+                    >
+                      {data?.status || 'Unknown'}
+                    </Badge>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-blue-700 dark:text-blue-300">Data Quality</span>
+                    <span className="text-sm font-semibold text-blue-900 dark:text-blue-100">{data?.dataQuality || 0}%</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-blue-700 dark:text-blue-300">Time to Resolve</span>
+                    <span className="text-sm font-semibold text-blue-900 dark:text-blue-100">{data?.daysToResolution || 0} days</span>
+                  </div>
+                </div>
+             </motion.div>
+             
+             {/* Analyst Note */}
+             <motion.div
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.7 }}
+                className="bg-amber-50 dark:bg-amber-900/10 rounded-xl p-6 border border-amber-200 dark:border-amber-800"
+             >
+                <h4 className="font-semibold text-amber-900 dark:text-amber-100 mb-2 flex items-center gap-2">
+                  <FileInput className="h-4 w-4" />
+                  Analyst Note
+                </h4>
+                <p className="text-sm text-amber-800 dark:text-amber-200">
+                  This case exceeds the threshold for automatic reporting. Please review all findings before generating the final compliance PDF.
+                </p>
+             </motion.div>
 
           </div>
         </div>
diff --git a/frontend/src/pages/Visualization.tsx b/frontend/src/pages/Visualization.tsx
index 35f969a..dc33b7c 100644
--- a/frontend/src/pages/Visualization.tsx
+++ b/frontend/src/pages/Visualization.tsx
@@ -8,11 +8,18 @@ import {
   Calendar,
   Download,
   RefreshCw,
-  Share2
+  Share2,
+  Info,
+  ArrowUpRight,
+  ArrowDownRight
 } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/Card';
 import { Button } from '../components/ui/Button';
+import { Breadcrumbs } from '../components/ui/Breadcrumbs';
+import { Tooltip } from '../components/ui/Tooltip';
+import { Badge } from '../components/ui/Badge';
+import { LoadingSkeleton } from '../components/ui/LoadingSkeleton';
 import { MilestoneTracker } from '../components/visualization/MilestoneTracker';
 import { FraudDetectionPanel } from '../components/visualization/FraudDetectionPanel';
 import { VisualizationDashboard } from '../components/visualization/VisualizationDashboard';
@@ -170,10 +177,28 @@ export function Visualization() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-slate-50 dark:bg-slate-950 flex items-center justify-center">
-        <div className="text-center">
-          <RefreshCw className="h-12 w-12 animate-spin text-blue-500 mx-auto mb-4" />
-          <p className="text-slate-600 dark:text-slate-400">Loading visualization...</p>
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-950 p-8">
+        <div className="container mx-auto max-w-7xl space-y-6">
+          {/* Header Skeleton */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-2">
+              <LoadingSkeleton variant="text" width="300px" height="32px" />
+              <LoadingSkeleton variant="text" width="450px" height="20px" />
+            </div>
+            <div className="flex gap-3">
+              <LoadingSkeleton variant="rectangular" width="100px" height="40px" />
+              <LoadingSkeleton variant="rectangular" width="100px" height="40px" />
+              <LoadingSkeleton variant="rectangular" width="100px" height="40px" />
+            </div>
+          </div>
+          
+          {/* KPI Cards Skeleton */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <LoadingSkeleton variant="card" count={4} />
+          </div>
+          
+          {/* Content Skeleton */}
+          <LoadingSkeleton variant="card" height="400px" />
         </div>
       </div>
     );
@@ -201,85 +226,151 @@ export function Visualization() {
   return (
     <div className="min-h-screen bg-slate-50 dark:bg-slate-950 p-8">
       <div className="container mx-auto max-w-7xl space-y-6">
+        {/* Breadcrumbs */}
+        <Breadcrumbs 
+          items={[
+            { label: 'Cases', href: '/cases' },
+            { label: `Case ${caseId}`, href: `/cases/${caseId}` },
+            { label: 'Financial Visualization' }
+          ]} 
+        />
+        
         {/* Header */}
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
-              Financial Visualization
-            </h1>
+            <div className="flex items-center gap-3">
+              <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
+                Financial Visualization
+              </h1>
+              <Badge variant="info" size="sm">
+                Live Data
+              </Badge>
+            </div>
             <p className="text-slate-500 dark:text-slate-400 mt-2">
               Case {caseId} - Interactive financial analysis and fraud detection
             </p>
           </div>
           <div className="flex gap-3">
-            <Button variant="outline" onClick={() => refetch()}>
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Refresh
-            </Button>
-            <Button variant="outline" onClick={handleShare}>
-              <Share2 className="h-4 w-4 mr-2" />
-              Share
-            </Button>
-            <Button onClick={handleExport}>
-              <Download className="h-4 w-4 mr-2" />
-              Export
-            </Button>
+            <Tooltip content="Refresh all data">
+              <Button variant="outline" onClick={() => refetch()}>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Refresh
+              </Button>
+            </Tooltip>
+            <Tooltip content="Share visualization">
+              <Button variant="outline" onClick={handleShare}>
+                <Share2 className="h-4 w-4 mr-2" />
+                Share
+              </Button>
+            </Tooltip>
+            <Tooltip content="Export to PDF & CSV">
+              <Button onClick={handleExport}>
+                <Download className="h-4 w-4 mr-2" />
+                Export
+              </Button>
+            </Tooltip>
           </div>
         </div>
 
         {/* KPI Cards */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <Card data-testid="kpi-card" className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/10 border-green-200 dark:border-green-800">
+          <Card data-testid="kpi-card" className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/10 border-green-200 dark:border-green-800 hover:shadow-lg transition-shadow">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-green-700 dark:text-green-300">Total Inflow</CardTitle>
-              <TrendingUp className="h-4 w-4 text-green-500" />
+              <CardTitle className="text-sm font-medium text-green-700 dark:text-green-300 flex items-center gap-2">
+                Total Inflow
+                <Tooltip content="Sum of all incoming transactions">
+                  <Info className="h-3 w-3 text-green-500/70" />
+                </Tooltip>
+              </CardTitle>
+              <div className="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
+                <TrendingUp className="h-4 w-4 text-green-500" />
+              </div>
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold text-green-600 dark:text-green-400">
                 ${(data?.total_inflow || 0).toLocaleString()}
               </div>
-              <p className="text-xs text-green-600/70 dark:text-green-400/70 mt-1">All incoming transactions</p>
+              <div className="flex items-center gap-2 mt-1">
+                <ArrowUpRight className="h-3 w-3 text-green-600 dark:text-green-400" />
+                <p className="text-xs text-green-600/70 dark:text-green-400/70">All incoming transactions</p>
+              </div>
             </CardContent>
           </Card>
 
-          <Card data-testid="kpi-card" className="bg-gradient-to-br from-red-50 to-rose-50 dark:from-red-900/20 dark:to-rose-900/10 border-red-200 dark:border-red-800">
+          <Card data-testid="kpi-card" className="bg-gradient-to-br from-red-50 to-rose-50 dark:from-red-900/20 dark:to-rose-900/10 border-red-200 dark:border-red-800 hover:shadow-lg transition-shadow">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-red-700 dark:text-red-300">Total Outflow</CardTitle>
-              <TrendingUp className="h-4 w-4 text-red-500 rotate-180" />
+              <CardTitle className="text-sm font-medium text-red-700 dark:text-red-300 flex items-center gap-2">
+                Total Outflow
+                <Tooltip content="Sum of all outgoing transactions">
+                  <Info className="h-3 w-3 text-red-500/70" />
+                </Tooltip>
+              </CardTitle>
+              <div className="p-2 rounded-lg bg-red-100 dark:bg-red-900/30">
+                <TrendingUp className="h-4 w-4 text-red-500 rotate-180" />
+              </div>
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold text-red-600 dark:text-red-400">
                 ${(data?.total_outflow || 0).toLocaleString()}
               </div>
-              <p className="text-xs text-red-600/70 dark:text-red-400/70 mt-1">All outgoing transactions</p>
+              <div className="flex items-center gap-2 mt-1">
+                <ArrowDownRight className="h-3 w-3 text-red-600 dark:text-red-400" />
+                <p className="text-xs text-red-600/70 dark:text-red-400/70">All outgoing transactions</p>
+              </div>
             </CardContent>
           </Card>
 
-          <Card data-testid="kpi-card" className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/10 border-blue-200 dark:border-blue-800">
+          <Card data-testid="kpi-card" className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/10 border-blue-200 dark:border-blue-800 hover:shadow-lg transition-shadow">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-blue-700 dark:text-blue-300">Net Cashflow</CardTitle>
-              <DollarSign className="h-4 w-4 text-blue-500" />
+              <CardTitle className="text-sm font-medium text-blue-700 dark:text-blue-300 flex items-center gap-2">
+                Net Cashflow
+                <Tooltip content="Difference between inflow and outflow">
+                  <Info className="h-3 w-3 text-blue-500/70" />
+                </Tooltip>
+              </CardTitle>
+              <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
+                <DollarSign className="h-4 w-4 text-blue-500" />
+              </div>
             </CardHeader>
             <CardContent>
               <div className={`text-2xl font-bold ${(data?.net_cashflow || 0) >= 0 ? 'text-blue-600 dark:text-blue-400' : 'text-red-600 dark:text-red-400'}`}>
                 ${Math.abs(data?.net_cashflow || 0).toLocaleString()}
               </div>
-              <p className="text-xs text-blue-600/70 dark:text-blue-400/70 mt-1">
-                {(data?.net_cashflow || 0) >= 0 ? 'Surplus' : 'Deficit'}
-              </p>
+              <div className="flex items-center gap-2 mt-1">
+                <Badge variant={(data?.net_cashflow || 0) >= 0 ? 'success' : 'warning'} size="sm">
+                  {(data?.net_cashflow || 0) >= 0 ? 'Surplus' : 'Deficit'}
+                </Badge>
+              </div>
             </CardContent>
           </Card>
 
-          <Card data-testid="kpi-card" className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/10 border-amber-200 dark:border-amber-800">
+          <Card data-testid="kpi-card" className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/10 border-amber-200 dark:border-amber-800 hover:shadow-lg transition-shadow">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium text-amber-700 dark:text-amber-300">Suspect Items</CardTitle>
-              <AlertTriangle className="h-4 w-4 text-amber-500" />
+              <CardTitle className="text-sm font-medium text-amber-700 dark:text-amber-300 flex items-center gap-2">
+                Suspect Items
+                <Tooltip content="Transactions flagged for review">
+                  <Info className="h-3 w-3 text-amber-500/70" />
+                </Tooltip>
+              </CardTitle>
+              <div className="p-2 rounded-lg bg-amber-100 dark:bg-amber-900/30">
+                <AlertTriangle className="h-4 w-4 text-amber-500" />
+              </div>
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold text-amber-600 dark:text-amber-400">
                 {data?.suspect_transactions || 0}
               </div>
-              <p className="text-xs text-amber-600/70 dark:text-amber-400/70 mt-1">Flagged transactions</p>
+              <div className="flex items-center gap-2 mt-1">
+                {(data?.suspect_transactions || 0) > 0 ? (
+                  <Badge variant="warning" size="sm" animated>
+                    Needs Review
+                  </Badge>
+                ) : (
+                  <Badge variant="success" size="sm">
+                    All Clear
+                  </Badge>
+                )}
+              </div>
             </CardContent>
           </Card>
         </div>