add logo and fix navigation

app/about/page-new.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+import { ExternalLink } from "lucide-react"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      
+      <PageHeader 
+        title="About AI Evaluation Dashboard"
+        description="A comprehensive platform for documenting and sharing AI system evaluations with transparency and rigor."
+      />
+
+      <div className="container mx-auto px-4 sm:px-6 py-6 max-w-4xl">
+        <div className="grid gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Project Goals</CardTitle>
+              <CardDescription>
+                Our mission is to advance responsible AI development through transparent evaluation
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid gap-3">
+                <div className="flex items-start gap-3">
+                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0" />
+                  <div>
+                    <h4 className="font-medium">Comprehensive Evaluation Framework</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Support structured evaluation across 20+ categories covering capabilities and risks
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0" />
+                  <div>
+                    <h4 className="font-medium">Transparency & Accountability</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Promote open documentation of AI system capabilities, limitations, and risks
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0" />
+                  <div>
+                    <h4 className="font-medium">Industry Standards</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Facilitate adoption of consistent evaluation practices across organizations
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Key Features</CardTitle>
+              <CardDescription>
+                Tools and capabilities that support comprehensive AI evaluation
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Badge variant="secondary" className="mb-2">Evaluation</Badge>
+                  <ul className="space-y-1 text-sm">
+                    <li>• Structured evaluation forms</li>
+                    <li>• Multi-modal system support</li>
+                    <li>• Evidence-based assessments</li>
+                    <li>• Category-specific questions</li>
+                  </ul>
+                </div>
+                <div className="space-y-2">
+                  <Badge variant="secondary" className="mb-2">Analytics</Badge>
+                  <ul className="space-y-1 text-sm">
+                    <li>• Completeness tracking</li>
+                    <li>• Performance benchmarking</li>
+                    <li>• Risk area identification</li>
+                    <li>• Comparative analysis</li>
+                  </ul>
+                </div>
+                <div className="space-y-2">
+                  <Badge variant="secondary" className="mb-2">Documentation</Badge>
+                  <ul className="space-y-1 text-sm">
+                    <li>• Standardized reporting</li>
+                    <li>• Evidence management</li>
+                    <li>• Version tracking</li>
+                    <li>• Export capabilities</li>
+                  </ul>
+                </div>
+                <div className="space-y-2">
+                  <Badge variant="secondary" className="mb-2">Collaboration</Badge>
+                  <ul className="space-y-1 text-sm">
+                    <li>• Team evaluation workflows</li>
+                    <li>• Review processes</li>
+                    <li>• Stakeholder engagement</li>
+                    <li>• Public transparency</li>
+                  </ul>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Evaluation Categories</CardTitle>
+              <CardDescription>
+                Comprehensive coverage across capabilities and risk areas
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid gap-6 sm:grid-cols-2">
+                <div>
+                  <h4 className="font-medium mb-3 text-primary">Capability Areas</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <Badge variant="outline">Language Communication</Badge>
+                    <Badge variant="outline">Problem Solving</Badge>
+                    <Badge variant="outline">Creativity Innovation</Badge>
+                    <Badge variant="outline">Learning Memory</Badge>
+                    <Badge variant="outline">Social Intelligence</Badge>
+                    <Badge variant="outline">Perception Vision</Badge>
+                    <Badge variant="outline">Physical Manipulation</Badge>
+                    <Badge variant="outline">Metacognition</Badge>
+                    <Badge variant="outline">Robotic Intelligence</Badge>
+                  </div>
+                </div>
+                <div>
+                  <h4 className="font-medium mb-3 text-destructive">Risk Areas</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <Badge variant="outline">Harmful Content</Badge>
+                    <Badge variant="outline">Information Integrity</Badge>
+                    <Badge variant="outline">Privacy Data</Badge>
+                    <Badge variant="outline">Bias Fairness</Badge>
+                    <Badge variant="outline">Security Robustness</Badge>
+                    <Badge variant="outline">Dangerous Capabilities</Badge>
+                    <Badge variant="outline">Human AI Interaction</Badge>
+                    <Badge variant="outline">Environmental Impact</Badge>
+                    <Badge variant="outline">Economic Displacement</Badge>
+                    <Badge variant="outline">Governance Accountability</Badge>
+                    <Badge variant="outline">Value Chain</Badge>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Getting Started</CardTitle>
+              <CardDescription>
+                Begin evaluating AI systems with our structured approach
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid gap-4 sm:grid-cols-3">
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">
+                    1
+                  </div>
+                  <h4 className="font-medium mb-1">Create Evaluation</h4>
+                  <p className="text-xs text-muted-foreground">Start a new evaluation for your AI system</p>
+                </div>
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">
+                    2
+                  </div>
+                  <h4 className="font-medium mb-1">Complete Assessment</h4>
+                  <p className="text-xs text-muted-foreground">Answer questions across relevant categories</p>
+                </div>
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">
+                    3
+                  </div>
+                  <h4 className="font-medium mb-1">Review & Share</h4>
+                  <p className="text-xs text-muted-foreground">Analyze results and share with stakeholders</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Separator />
+
+          <div className="text-center space-y-4">
+            <h3 className="text-lg font-semibold">Ready to get started?</h3>
+            <p className="text-muted-foreground">
+              Create your first evaluation card and begin documenting your AI system's capabilities and risks.
+            </p>
+            <Link href="/">
+              <Button size="lg" className="gap-2">
+                Start Evaluating
+                <ExternalLink className="h-4 w-4" />
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/about/page-old.tsx

@@ -0,0 +1,176 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+import { ExternalLink } from "lucide-react"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      
+      <PageHeader 
+        title="About AI Evaluation Dashboard"
+        description="A comprehensive platform for documenting and sharing AI system evaluations with transparency and rigor."
+      />
+
+      <div className="container mx-auto px-4 sm:px-6 py-6 max-w-4xl">
+        <div className="grid gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Project Goals</CardTitle>
+            <CardDescription>
+              Our mission is to advance responsible AI development through transparent evaluation
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-3">
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Standardize AI Evaluation Reporting</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Provide a consistent framework for documenting AI system capabilities and limitations across different models and platforms.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Facilitate Transparency</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Enable AI developers and researchers to share detailed evaluation results in an accessible, standardized format.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Enable Comparative Analysis</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Support side-by-side comparison of AI systems across multiple dimensions including capabilities and risks.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-orange-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Support Research and Policy</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Consolidate evaluation data to inform AI research directions and policy development.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Promote Responsible AI Development</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Encourage comprehensive risk assessment and responsible deployment practices through structured evaluation.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+    {/* EvalEval link removed from page body per request; footer includes external link instead */}
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Standards and Frameworks</CardTitle>
+            <CardDescription>
+              Built on established international standards for AI evaluation
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="p-4 border rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <Badge variant="destructive">Risk Assessment</Badge>
+                </div>
+                <h4 className="font-semibold mb-2">NIST AI 600-1</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Risk categories are derived from the NIST AI Risk Management Framework (AI RMF 1.0), providing a comprehensive approach to identifying and managing AI-related risks.
+                </p>
+                <Link href="https://nvlpubs.nist.gov/nistpubs/ai/NIST.AI.600-1.pdf" target="_blank">
+                  <Button variant="outline" size="sm">
+                    <ExternalLink className="mr-2 h-3 w-3" />
+                    Learn More
+                  </Button>
+                </Link>
+              </div>
+              <div className="p-4 border rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <Badge variant="default">Capabilities</Badge>
+                </div>
+                <h4 className="font-semibold mb-2">OECD AI Classification</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Capability categories are based on the OECD AI Classification Framework, ensuring alignment with international standards for AI system categorization.
+                </p>
+                <Link href="https://www.oecd.org/en/publications/introducing-the-oecd-ai-capability-indicators_be745f04-en/full-report/component-4.html#chapter-d1e230-f85c23a209" target="_blank">
+                  <Button variant="outline" size="sm">
+                    <ExternalLink className="mr-2 h-3 w-3" />
+                    Learn More
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>For Contributors</CardTitle>
+            <CardDescription>
+              How to contribute to the evaluation framework
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="p-4 bg-muted rounded-lg">
+              <h4 className="font-semibold mb-2">Schema-Driven Architecture</h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                All evaluation categories, form fields, and data structures are centrally managed in the <code className="bg-background px-1 py-0.5 rounded">schema/</code> folder. This is the primary location for making structural changes to the evaluation framework.
+              </p>
+              <div className="space-y-2 text-sm">
+                <div><code className="bg-background px-2 py-1 rounded">schema/evaluation-schema.json</code> - Evaluation categories and types</div>
+                <div><code className="bg-background px-2 py-1 rounded">schema/output-schema.json</code> - Complete data structure</div>
+                <div><code className="bg-background px-2 py-1 rounded">schema/system-info-schema.json</code> - Form field options</div>
+                <div><code className="bg-background px-2 py-1 rounded">schema/category-details.json</code> - Detailed descriptions</div>
+              </div>
+            </div>
+            <div className="p-4 bg-muted rounded-lg">
+              <h4 className="font-semibold mb-2">Adding Evaluations</h4>
+              <p className="text-sm text-muted-foreground">
+                Evaluation data files are stored in <code className="bg-background px-1 py-0.5 rounded">public/evaluations/</code> as JSON files. Each file represents a complete evaluation of an AI system and must conform to the schema.
+              </p>
+            </div>
+            <Link href="https://huggingface.co/spaces/evaleval/general-eval-card/tree/main/schema" target="_blank">
+              <Button className="w-full flex items-center justify-center gap-2">
+                <img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="Hugging Face" className="h-4 w-4" />
+                View on Hugging Face
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Separator className="my-8" />
+
+      <div className="text-center text-sm text-muted-foreground">
+        <p className="mt-2">AI Evaluation Dashboard is an open-source project dedicated to advancing responsible AI development — built with ❤️ by the EvalEval Coalition.</p>
+        <p className="mt-2 flex items-center justify-center gap-3">
+          <img src="https://evalevalai.com/assets/img/logo-square.png" alt="EvalEval" className="h-8 w-8 rounded" />
+          <span>Learn more about EvalEval: <Link href="https://evalevalai.com/" target="_blank">evalevalai.com</Link></span>
+        </p>
+      </div>
+    </div>
+      </div>
+    </div>
+  )
+}

app/about/page.tsx

@@ -5,187 +5,203 @@ import { Badge } from "@/components/ui/badge"
 import { Separator } from "@/components/ui/separator"
 import { Button } from "@/components/ui/button"
 import Link from "next/link"
-import { ArrowLeft, ExternalLink, Sun, Moon } from "lucide-react"
-import { useTheme } from "next-themes"
+import { ExternalLink } from "lucide-react"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
 
 export default function AboutPage() {
-  const { theme, setTheme } = useTheme()
-  
   return (
-    <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-8 max-w-4xl">
-      <div className="mb-6">
-        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4">
-          <Link href="/">
-            <Button variant="ghost">
-              <ArrowLeft className="mr-2 h-4 w-4" />
-              Back to Dashboard
-            </Button>
-          </Link>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-            className="h-9 w-9 p-0"
-          >
-            <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-            <span className="sr-only">Toggle theme</span>
-          </Button>
-        </div>
-        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2">About AI Evaluation Dashboard</h1>
-        <p className="text-lg sm:text-xl text-muted-foreground">
-          A comprehensive platform for documenting and sharing AI system evaluations
-        </p>
-      </div>
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      
+      <PageHeader 
+        title="About AI Evaluation Dashboard"
+        description="A comprehensive platform for documenting and sharing AI system evaluations with transparency and rigor."
+      />
 
-      <div className="grid gap-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>Project Goals</CardTitle>
-            <CardDescription>
-              Our mission is to advance responsible AI development through transparent evaluation
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid gap-3">
-              <div className="flex items-start gap-3">
-                <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
-                <div>
-                  <h4 className="font-semibold">Standardize AI Evaluation Reporting</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Provide a consistent framework for documenting AI system capabilities and limitations across different models and platforms.
-                  </p>
+      <div className="container mx-auto px-4 sm:px-6 py-6 max-w-4xl">
+        <div className="grid gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Project Goals</CardTitle>
+              <CardDescription>
+                Our mission is to advance responsible AI development through transparent evaluation
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid gap-3">
+                <div className="flex items-start gap-3">
+                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0" />
+                  <div>
+                    <h4 className="font-medium">Comprehensive Evaluation Framework</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Support structured evaluation across 20+ categories covering capabilities and risks
+                    </p>
+                  </div>
                 </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
-                <div>
-                  <h4 className="font-semibold">Facilitate Transparency</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Enable AI developers and researchers to share detailed evaluation results in an accessible, standardized format.
-                  </p>
+                <div className="flex items-start gap-3">
+                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0" />
+                  <div>
+                    <h4 className="font-medium">Transparency & Accountability</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Promote open documentation of AI system capabilities, limitations, and risks
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0" />
+                  <div>
+                    <h4 className="font-medium">Industry Standards</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Facilitate adoption of consistent evaluation practices across organizations
+                    </p>
+                  </div>
                 </div>
               </div>
-              <div className="flex items-start gap-3">
-                <div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0"></div>
-                <div>
-                  <h4 className="font-semibold">Enable Comparative Analysis</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Support side-by-side comparison of AI systems across multiple dimensions including capabilities and risks.
-                  </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Key Features</CardTitle>
+              <CardDescription>
+                Tools and capabilities that support comprehensive AI evaluation
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-2">
+                  <Badge variant="secondary" className="mb-2">Evaluation</Badge>
+                  <ul className="space-y-1 text-sm">
+                    <li>• Structured evaluation forms</li>
+                    <li>• Multi-modal system support</li>
+                    <li>• Evidence-based assessments</li>
+                    <li>• Category-specific questions</li>
+                  </ul>
+                </div>
+                <div className="space-y-2">
+                  <Badge variant="secondary" className="mb-2">Analytics</Badge>
+                  <ul className="space-y-1 text-sm">
+                    <li>• Completeness tracking</li>
+                    <li>• Performance benchmarking</li>
+                    <li>• Risk area identification</li>
+                    <li>• Comparative analysis</li>
+                  </ul>
+                </div>
+                <div className="space-y-2">
+                  <Badge variant="secondary" className="mb-2">Documentation</Badge>
+                  <ul className="space-y-1 text-sm">
+                    <li>• Standardized reporting</li>
+                    <li>• Evidence management</li>
+                    <li>• Version tracking</li>
+                    <li>• Export capabilities</li>
+                  </ul>
+                </div>
+                <div className="space-y-2">
+                  <Badge variant="secondary" className="mb-2">Collaboration</Badge>
+                  <ul className="space-y-1 text-sm">
+                    <li>• Team evaluation workflows</li>
+                    <li>• Review processes</li>
+                    <li>• Stakeholder engagement</li>
+                    <li>• Public transparency</li>
+                  </ul>
                 </div>
               </div>
-              <div className="flex items-start gap-3">
-                <div className="w-2 h-2 bg-orange-500 rounded-full mt-2 flex-shrink-0"></div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Evaluation Categories</CardTitle>
+              <CardDescription>
+                Comprehensive coverage across capabilities and risk areas
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid gap-6 sm:grid-cols-2">
                 <div>
-                  <h4 className="font-semibold">Support Research and Policy</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Consolidate evaluation data to inform AI research directions and policy development.
-                  </p>
+                  <h4 className="font-medium mb-3 text-primary">Capability Areas</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <Badge variant="outline">Language Communication</Badge>
+                    <Badge variant="outline">Problem Solving</Badge>
+                    <Badge variant="outline">Creativity Innovation</Badge>
+                    <Badge variant="outline">Learning Memory</Badge>
+                    <Badge variant="outline">Social Intelligence</Badge>
+                    <Badge variant="outline">Perception Vision</Badge>
+                    <Badge variant="outline">Physical Manipulation</Badge>
+                    <Badge variant="outline">Metacognition</Badge>
+                    <Badge variant="outline">Robotic Intelligence</Badge>
+                  </div>
                 </div>
-              </div>
-              <div className="flex items-start gap-3">
-                <div className="w-2 h-2 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
                 <div>
-                  <h4 className="font-semibold">Promote Responsible AI Development</h4>
-                  <p className="text-sm text-muted-foreground">
-                    Encourage comprehensive risk assessment and responsible deployment practices through structured evaluation.
-                  </p>
+                  <h4 className="font-medium mb-3 text-destructive">Risk Areas</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <Badge variant="outline">Harmful Content</Badge>
+                    <Badge variant="outline">Information Integrity</Badge>
+                    <Badge variant="outline">Privacy Data</Badge>
+                    <Badge variant="outline">Bias Fairness</Badge>
+                    <Badge variant="outline">Security Robustness</Badge>
+                    <Badge variant="outline">Dangerous Capabilities</Badge>
+                    <Badge variant="outline">Human AI Interaction</Badge>
+                    <Badge variant="outline">Environmental Impact</Badge>
+                    <Badge variant="outline">Economic Displacement</Badge>
+                    <Badge variant="outline">Governance Accountability</Badge>
+                    <Badge variant="outline">Value Chain</Badge>
+                  </div>
                 </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
-
-    {/* EvalEval link removed from page body per request; footer includes external link instead */}
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Standards and Frameworks</CardTitle>
-            <CardDescription>
-              Built on established international standards for AI evaluation
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="p-4 border rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <Badge variant="destructive">Risk Assessment</Badge>
+          <Card>
+            <CardHeader>
+              <CardTitle>Getting Started</CardTitle>
+              <CardDescription>
+                Begin evaluating AI systems with our structured approach
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid gap-4 sm:grid-cols-3">
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">
+                    1
+                  </div>
+                  <h4 className="font-medium mb-1">Create Evaluation</h4>
+                  <p className="text-xs text-muted-foreground">Start a new evaluation for your AI system</p>
                 </div>
-                <h4 className="font-semibold mb-2">NIST AI 600-1</h4>
-                <p className="text-sm text-muted-foreground mb-3">
-                  Risk categories are derived from the NIST AI Risk Management Framework (AI RMF 1.0), providing a comprehensive approach to identifying and managing AI-related risks.
-                </p>
-                <Link href="https://nvlpubs.nist.gov/nistpubs/ai/NIST.AI.600-1.pdf" target="_blank">
-                  <Button variant="outline" size="sm">
-                    <ExternalLink className="mr-2 h-3 w-3" />
-                    Learn More
-                  </Button>
-                </Link>
-              </div>
-              <div className="p-4 border rounded-lg">
-                <div className="flex items-center gap-2 mb-2">
-                  <Badge variant="default">Capabilities</Badge>
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">
+                    2
+                  </div>
+                  <h4 className="font-medium mb-1">Complete Assessment</h4>
+                  <p className="text-xs text-muted-foreground">Answer questions across relevant categories</p>
+                </div>
+                <div className="text-center p-4 border rounded-lg">
+                  <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center mx-auto mb-2 text-sm font-bold">
+                    3
+                  </div>
+                  <h4 className="font-medium mb-1">Review & Share</h4>
+                  <p className="text-xs text-muted-foreground">Analyze results and share with stakeholders</p>
                 </div>
-                <h4 className="font-semibold mb-2">OECD AI Classification</h4>
-                <p className="text-sm text-muted-foreground mb-3">
-                  Capability categories are based on the OECD AI Classification Framework, ensuring alignment with international standards for AI system categorization.
-                </p>
-                <Link href="https://www.oecd.org/en/publications/introducing-the-oecd-ai-capability-indicators_be745f04-en/full-report/component-4.html#chapter-d1e230-f85c23a209" target="_blank">
-                  <Button variant="outline" size="sm">
-                    <ExternalLink className="mr-2 h-3 w-3" />
-                    Learn More
-                  </Button>
-                </Link>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>For Contributors</CardTitle>
-            <CardDescription>
-              How to contribute to the evaluation framework
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="p-4 bg-muted rounded-lg">
-              <h4 className="font-semibold mb-2">Schema-Driven Architecture</h4>
-              <p className="text-sm text-muted-foreground mb-3">
-                All evaluation categories, form fields, and data structures are centrally managed in the <code className="bg-background px-1 py-0.5 rounded">schema/</code> folder. This is the primary location for making structural changes to the evaluation framework.
-              </p>
-              <div className="space-y-2 text-sm">
-                <div><code className="bg-background px-2 py-1 rounded">schema/evaluation-schema.json</code> - Evaluation categories and types</div>
-                <div><code className="bg-background px-2 py-1 rounded">schema/output-schema.json</code> - Complete data structure</div>
-                <div><code className="bg-background px-2 py-1 rounded">schema/system-info-schema.json</code> - Form field options</div>
-                <div><code className="bg-background px-2 py-1 rounded">schema/category-details.json</code> - Detailed descriptions</div>
-              </div>
-            </div>
-            <div className="p-4 bg-muted rounded-lg">
-              <h4 className="font-semibold mb-2">Adding Evaluations</h4>
-              <p className="text-sm text-muted-foreground">
-                Evaluation data files are stored in <code className="bg-background px-1 py-0.5 rounded">public/evaluations/</code> as JSON files. Each file represents a complete evaluation of an AI system and must conform to the schema.
-              </p>
-            </div>
-            <Link href="https://huggingface.co/spaces/evaleval/general-eval-card/tree/main/schema" target="_blank">
-              <Button className="w-full flex items-center justify-center gap-2">
-                <img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="Hugging Face" className="h-4 w-4" />
-                View on Hugging Face
+          <Separator />
+
+          <div className="text-center space-y-4">
+            <h3 className="text-lg font-semibold">Ready to get started?</h3>
+            <p className="text-muted-foreground">
+              Create your first evaluation card and begin documenting your AI system's capabilities and risks.
+            </p>
+            <Link href="/">
+              <Button size="lg" className="gap-2">
+                Start Evaluating
+                <ExternalLink className="h-4 w-4" />
               </Button>
             </Link>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Separator className="my-8" />
-
-      <div className="text-center text-sm text-muted-foreground">
-        <p className="mt-2">AI Evaluation Dashboard is an open-source project dedicated to advancing responsible AI development — built with ❤️ by the EvalEval Coalition.</p>
-        <p className="mt-2 flex items-center justify-center gap-3">
-          <img src="https://evalevalai.com/assets/img/logo-square.png" alt="EvalEval" className="h-8 w-8 rounded" />
-          <span>Learn more about EvalEval: <Link href="https://evalevalai.com/" target="_blank">evalevalai.com</Link></span>
-        </p>
+          </div>
+        </div>
       </div>
     </div>
   )

app/analytics/page-new.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import AnalyticsDashboard from "@/components/analytics-dashboard"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
+
+interface Evaluation {
+  id: string
+  name: string
+  organization: string
+  overallScore: number
+  modality: string[]
+  submittedDate: string
+  categoryEvaluations?: {
+    [categoryId: string]: {
+      benchmarkAnswers?: { [questionId: string]: string }
+      processAnswers?: { [questionId: string]: string }
+    }
+  }
+}
+
+const loadEvaluationData = async (): Promise<Evaluation[]> => {
+  const evaluationFiles = [
+    "/evaluations/gpt-4-turbo.json",
+    "/evaluations/claude-3-sonnet.json", 
+    "/evaluations/gemini-pro.json",
+    "/evaluations/fraud-detector.json"
+  ]
+
+  const evaluations: Evaluation[] = []
+
+  for (const file of evaluationFiles) {
+    try {
+      const response = await fetch(file)
+      if (!response.ok) continue
+
+      const data = await response.json()
+      
+      // Calculate overall score based on evaluation completeness
+      const totalQuestions = Object.values(data.categoryEvaluations || {}).reduce((acc: number, catEval: any) => {
+        const benchmarkCount = Object.keys(catEval.benchmarkAnswers || {}).length
+        const processCount = Object.keys(catEval.processAnswers || {}).length
+        return acc + benchmarkCount + processCount
+      }, 0)
+
+      const answeredQuestions = Object.values(data.categoryEvaluations || {}).reduce((acc: number, catEval: any) => {
+        const benchmarkAnswered = Object.values(catEval.benchmarkAnswers || {}).filter((answer: any) => 
+          answer !== null && answer !== undefined && answer !== ""
+        ).length
+        const processAnswered = Object.values(catEval.processAnswers || {}).filter((answer: any) => 
+          answer !== null && answer !== undefined && answer !== ""
+        ).length
+        return acc + benchmarkAnswered + processAnswered
+      }, 0)
+
+      const overallScore = totalQuestions > 0 ? Math.round((answeredQuestions / totalQuestions) * 100) : 0
+
+      const evaluation: Evaluation = {
+        id: data.id || file.split('/').pop()?.replace('.json', '') || 'unknown',
+        name: data.systemName || 'Unknown System',
+        organization: data.provider || 'Unknown Provider',
+        overallScore,
+        modality: [
+          ...(data.inputModalities || []),
+          ...(data.outputModalities || [])
+        ].filter((v, i, a) => a.indexOf(v) === i), // Remove duplicates
+        submittedDate: data.evaluationDate || new Date().toISOString().split('T')[0],
+        categoryEvaluations: data.categoryEvaluations
+      }
+
+      evaluations.push(evaluation)
+    } catch (error) {
+      console.error(`Failed to load ${file}:`, error)
+      continue
+    }
+  }
+
+  return evaluations
+}
+
+export default function AnalyticsPage() {
+  const [evaluations, setEvaluations] = useState<Evaluation[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const data = await loadEvaluationData()
+        setEvaluations(data)
+      } catch (error) {
+        console.error("Failed to load evaluation data:", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading analytics...</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      
+      <PageHeader 
+        title="Analytics & Leaderboards"
+        description="Explore evaluation completeness across models and categories with comprehensive analytics and insights."
+      />
+
+      <div className="container mx-auto px-4 sm:px-6 py-6">
+        <AnalyticsDashboard evaluations={evaluations} />
+      </div>
+    </div>
+  )
+}

app/analytics/page-old.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import AnalyticsDashboard from "@/components/analytics-dashboard"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
+
+interface Evaluation {
+  id: string
+  name: string
+  organization: string
+  overallScore: number
+  modality: string[]
+  submittedDate: string
+  categoryEvaluations?: {
+    [categoryId: string]: {
+      benchmarkAnswers?: { [questionId: string]: string }
+      processAnswers?: { [questionId: string]: string }
+    }
+  }
+}
+
+const loadEvaluationData = async (): Promise<Evaluation[]> => {
+  const evaluationFiles = [
+    "/evaluations/gpt-4-turbo.json",
+    "/evaluations/claude-3-sonnet.json", 
+    "/evaluations/gemini-pro.json",
+    "/evaluations/fraud-detector.json",
+  ]
+
+  const additionalFiles = []
+  for (let i = 1; i <= 10; i++) {
+    additionalFiles.push(`/evaluations/eval-${Date.now() - i * 86400000}.json`)
+  }
+
+  const allFiles = [...evaluationFiles, ...additionalFiles]
+  const evaluations: Evaluation[] = []
+
+  for (const file of allFiles) {
+    try {
+      const response = await fetch(file)
+      if (!response.ok) continue
+
+      const data = await response.json()
+
+      // Calculate overall score based on completion percentage
+      let overallScore = 0
+      if (data.categoryEvaluations) {
+        const allCategories = Object.keys(data.categoryEvaluations)
+        const categoryScores = allCategories.map(categoryId => {
+          const categoryData = data.categoryEvaluations[categoryId]
+          if (!categoryData) return 0
+
+          // Count total questions and answered questions
+          const benchmarkAnswers = categoryData.benchmarkAnswers || {}
+          const processAnswers = categoryData.processAnswers || {}
+          
+          const allAnswers = { ...benchmarkAnswers, ...processAnswers }
+          const totalQuestions = Object.keys(allAnswers).length
+          if (totalQuestions === 0) return 0
+
+          // Count answered questions (not N/A, null, undefined, or empty)
+          const answeredQuestions = Object.values(allAnswers).filter(
+            (answer: any) => answer && answer !== "N/A" && String(answer).trim() !== ""
+          ).length
+
+          return (answeredQuestions / totalQuestions) * 100
+        })
+
+        overallScore = categoryScores.length > 0 
+          ? categoryScores.reduce((sum, score) => sum + score, 0) / categoryScores.length 
+          : 0
+      }
+
+      const evaluation: Evaluation = {
+        id: data.id || `eval-${Date.now()}`,
+        name: data.systemName || "Unknown System",
+        organization: data.provider || "Unknown Provider",
+        overallScore,
+        modality: [...(data.inputModalities || ["Text"]), ...(data.outputModalities || ["Text"])],
+        submittedDate: data.evaluationDate || new Date().toISOString().split("T")[0],
+        categoryEvaluations: data.categoryEvaluations
+      }
+
+      evaluations.push(evaluation)
+    } catch (error) {
+      console.error(`Failed to load evaluation from ${file}:`, error)
+    }
+  }
+
+  return evaluations
+}
+
+export default function AnalyticsPage() {
+  const { theme, setTheme } = useTheme()
+  const [evaluations, setEvaluations] = useState<Evaluation[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const data = await loadEvaluationData()
+        setEvaluations(data)
+      } catch (error) {
+        console.error("Failed to load evaluation data:", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading analytics...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
+      <header className="border-b bg-card/80 backdrop-blur-sm">
+        <div className="container mx-auto px-4 sm:px-6 py-4">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+            <div>
+              <h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">Analytics & Leaderboards</h1>
+              <p className="text-sm text-muted-foreground">Explore evaluation completeness across models and categories</p>
+            </div>
+            <div className="flex items-center gap-2 sm:gap-3">
+              <Link href="/">
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <Home className="h-4 w-4" />
+                  <span className="hidden sm:inline">Dashboard</span>
+                </Button>
+              </Link>
+              <Link href="/about">
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <Info className="h-4 w-4" />
+                  <span className="hidden sm:inline">About</span>
+                </Button>
+              </Link>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                className="h-9 w-9 p-0"
+              >
+                <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span className="sr-only">Toggle theme</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="container mx-auto px-4 py-8">
+        <AnalyticsDashboard evaluations={evaluations} />
+      </div>
+    </div>
+  )
+}

app/analytics/page.tsx

@@ -2,10 +2,8 @@
 
 import { useState, useEffect } from "react"
 import AnalyticsDashboard from "@/components/analytics-dashboard"
-import { Button } from "@/components/ui/button"
-import { Home, Info, Moon, Sun } from "lucide-react"
-import Link from "next/link"
-import { useTheme } from "next-themes"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
 
 interface Evaluation {
   id: string
@@ -27,66 +25,54 @@ const loadEvaluationData = async (): Promise<Evaluation[]> => {
     "/evaluations/gpt-4-turbo.json",
     "/evaluations/claude-3-sonnet.json", 
     "/evaluations/gemini-pro.json",
-    "/evaluations/fraud-detector.json",
+    "/evaluations/fraud-detector.json"
   ]
 
-  const additionalFiles = []
-  for (let i = 1; i <= 10; i++) {
-    additionalFiles.push(`/evaluations/eval-${Date.now() - i * 86400000}.json`)
-  }
-
-  const allFiles = [...evaluationFiles, ...additionalFiles]
   const evaluations: Evaluation[] = []
 
-  for (const file of allFiles) {
+  for (const file of evaluationFiles) {
     try {
       const response = await fetch(file)
       if (!response.ok) continue
 
       const data = await response.json()
-
-      // Calculate overall score based on completion percentage
-      let overallScore = 0
-      if (data.categoryEvaluations) {
-        const allCategories = Object.keys(data.categoryEvaluations)
-        const categoryScores = allCategories.map(categoryId => {
-          const categoryData = data.categoryEvaluations[categoryId]
-          if (!categoryData) return 0
-
-          // Count total questions and answered questions
-          const benchmarkAnswers = categoryData.benchmarkAnswers || {}
-          const processAnswers = categoryData.processAnswers || {}
-          
-          const allAnswers = { ...benchmarkAnswers, ...processAnswers }
-          const totalQuestions = Object.keys(allAnswers).length
-          if (totalQuestions === 0) return 0
-
-          // Count answered questions (not N/A, null, undefined, or empty)
-          const answeredQuestions = Object.values(allAnswers).filter(
-            (answer: any) => answer && answer !== "N/A" && String(answer).trim() !== ""
-          ).length
-
-          return (answeredQuestions / totalQuestions) * 100
-        })
-
-        overallScore = categoryScores.length > 0 
-          ? categoryScores.reduce((sum, score) => sum + score, 0) / categoryScores.length 
-          : 0
-      }
+      
+      // Calculate overall score based on evaluation completeness
+      const totalQuestions = Object.values(data.categoryEvaluations || {}).reduce((acc: number, catEval: any) => {
+        const benchmarkCount = Object.keys(catEval.benchmarkAnswers || {}).length
+        const processCount = Object.keys(catEval.processAnswers || {}).length
+        return acc + benchmarkCount + processCount
+      }, 0)
+
+      const answeredQuestions = Object.values(data.categoryEvaluations || {}).reduce((acc: number, catEval: any) => {
+        const benchmarkAnswered = Object.values(catEval.benchmarkAnswers || {}).filter((answer: any) => 
+          answer !== null && answer !== undefined && answer !== ""
+        ).length
+        const processAnswered = Object.values(catEval.processAnswers || {}).filter((answer: any) => 
+          answer !== null && answer !== undefined && answer !== ""
+        ).length
+        return acc + benchmarkAnswered + processAnswered
+      }, 0)
+
+      const overallScore = totalQuestions > 0 ? Math.round((answeredQuestions / totalQuestions) * 100) : 0
 
       const evaluation: Evaluation = {
-        id: data.id || `eval-${Date.now()}`,
-        name: data.systemName || "Unknown System",
-        organization: data.provider || "Unknown Provider",
+        id: data.id || file.split('/').pop()?.replace('.json', '') || 'unknown',
+        name: data.systemName || 'Unknown System',
+        organization: data.provider || 'Unknown Provider',
         overallScore,
-        modality: [...(data.inputModalities || ["Text"]), ...(data.outputModalities || ["Text"])],
-        submittedDate: data.evaluationDate || new Date().toISOString().split("T")[0],
+        modality: [
+          ...(data.inputModalities || []),
+          ...(data.outputModalities || [])
+        ].filter((v, i, a) => a.indexOf(v) === i), // Remove duplicates
+        submittedDate: data.evaluationDate || new Date().toISOString().split('T')[0],
         categoryEvaluations: data.categoryEvaluations
       }
 
       evaluations.push(evaluation)
     } catch (error) {
-      console.error(`Failed to load evaluation from ${file}:`, error)
+      console.error(`Failed to load ${file}:`, error)
+      continue
     }
   }
 
@@ -94,7 +80,6 @@ const loadEvaluationData = async (): Promise<Evaluation[]> => {
 }
 
 export default function AnalyticsPage() {
-  const { theme, setTheme } = useTheme()
   const [evaluations, setEvaluations] = useState<Evaluation[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -114,53 +99,28 @@ export default function AnalyticsPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
-          <p className="text-muted-foreground">Loading analytics...</p>
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading analytics...</p>
+          </div>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900">
-      <header className="border-b bg-card/80 backdrop-blur-sm">
-        <div className="container mx-auto px-4 sm:px-6 py-4">
-          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-            <div>
-              <h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">Analytics & Leaderboards</h1>
-              <p className="text-sm text-muted-foreground">Explore evaluation completeness across models and categories</p>
-            </div>
-            <div className="flex items-center gap-2 sm:gap-3">
-              <Link href="/">
-                <Button variant="ghost" size="sm" className="gap-2">
-                  <Home className="h-4 w-4" />
-                  <span className="hidden sm:inline">Dashboard</span>
-                </Button>
-              </Link>
-              <Link href="/about">
-                <Button variant="ghost" size="sm" className="gap-2">
-                  <Info className="h-4 w-4" />
-                  <span className="hidden sm:inline">About</span>
-                </Button>
-              </Link>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-                className="h-9 w-9 p-0"
-              >
-                <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                <span className="sr-only">Toggle theme</span>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <div className="container mx-auto px-4 py-8">
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      
+      <PageHeader 
+        title="Analytics & Leaderboards"
+        description="Explore evaluation completeness across models and categories with comprehensive analytics and insights."
+      />
+
+      <div className="container mx-auto px-4 sm:px-6 py-6">
         <AnalyticsDashboard evaluations={evaluations} />
       </div>
     </div>

app/page-new.tsx

@@ -0,0 +1,573 @@
+"use client"
+
+import { useState, useMemo, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Filter, ArrowUpDown } from "lucide-react"
+import { EvaluationCard, type EvaluationCardData } from "@/components/evaluation-card"
+import { getBenchmarkQuestions, getProcessQuestions } from "@/lib/schema"
+import { AIEvaluationDashboard } from "@/components/ai-evaluation-dashboard"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
+
+const loadEvaluationData = async (): Promise<EvaluationCardData[]> => {
+  const evaluationFiles = [
+    "/evaluations/gpt-4-turbo.json",
+    "/evaluations/claude-3-sonnet.json",
+    "/evaluations/gemini-pro.json",
+    "/evaluations/fraud-detector.json",
+  ]
+
+  const additionalFiles = []
+  for (let i = 1; i <= 10; i++) {
+    additionalFiles.push(`/evaluations/eval-${Date.now() - i * 86400000}.json`) // Check for files from last 10 days
+  }
+
+  const allFiles = [...evaluationFiles, ...additionalFiles]
+  const evaluations: EvaluationCardData[] = []
+
+  for (const file of allFiles) {
+    try {
+      const response = await fetch(file)
+      if (!response.ok) continue // Skip files that don't exist
+
+      const data = await response.json()
+
+      const cardData: EvaluationCardData = {
+        id: data.id || `eval-${Date.now()}`,
+        systemName: data.systemName || "Unknown System",
+        provider: data.provider || "Unknown Provider",
+        inputModalities: data.inputModalities || ["Text"],
+        outputModalities: data.outputModalities || ["Text"],
+        completedDate: data.evaluationDate || new Date().toISOString().split("T")[0],
+        applicableCategories: data.overallStats?.totalApplicable || 0,
+        completedCategories: data.overallStats?.totalApplicable || 0,
+        status:
+          data.overallStats?.strongCategories?.length >= (data.overallStats?.adequateCategories?.length || 0)
+            ? "strong"
+            : data.overallStats?.adequateCategories?.length >= (data.overallStats?.weakCategories?.length || 0)
+              ? "adequate"
+              : "weak",
+        capabilityEval: {
+          strong: (data.overallStats?.strongCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ).length,
+          adequate: (data.overallStats?.adequateCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ).length,
+          weak: (data.overallStats?.weakCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ).length,
+          insufficient: (data.overallStats?.insufficientCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ).length,
+          strongCategories: (data.overallStats?.strongCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ),
+          adequateCategories: (data.overallStats?.adequateCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ),
+          weakCategories: (data.overallStats?.weakCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ),
+          insufficientCategories: (data.overallStats?.insufficientCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ),
+          totalApplicable: data.overallStats?.capabilityApplicable || 0,
+        },
+        riskEval: {
+          strong: (data.overallStats?.strongCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ).length,
+          adequate: (data.overallStats?.adequateCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ).length,
+          weak: (data.overallStats?.weakCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ).length,
+          insufficient: (data.overallStats?.insufficientCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ).length,
+          strongCategories: (data.overallStats?.strongCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ),
+          adequateCategories: (data.overallStats?.adequateCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ),
+          weakCategories: (data.overallStats?.weakCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ),
+          insufficientCategories: (data.overallStats?.insufficientCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ),
+          totalApplicable: data.overallStats?.riskApplicable || 0,
+        },
+        priorityAreas: data.overallStats?.priorityAreas || [],
+        priorityDetails: (() => {
+          // Build a richer structure: for each area, include yes questions and negative questions (no/na) with optional reason
+          const pd: Record<
+            string,
+            {
+              yes: string[]
+              negative: { text: string; status: "no" | "na"; reason?: string }[]
+            }
+          > = {}
+          const areas = data.overallStats?.priorityAreas || []
+          for (const area of areas) {
+            const catEval = data.categoryEvaluations?.[area]
+            if (!catEval) continue
+
+            const yesList: string[] = []
+            const negList: { text: string; status: "no" | "na"; reason?: string }[] = []
+
+            // Helper to detect NA reason from category metadata
+            const naReasonFromMeta = (): string | undefined => {
+              if (typeof catEval.additionalAspects === "string" && /not applicable/i.test(catEval.additionalAspects)) {
+                return catEval.additionalAspects
+              }
+              // look into processSources scopes for any note
+              if (catEval.processSources) {
+                for (const entries of Object.values(catEval.processSources)) {
+                  if (Array.isArray(entries)) {
+                    for (const ent of entries as any[]) {
+                      if (ent && typeof ent.scope === "string" && /not applicable/i.test(ent.scope)) {
+                        return ent.scope
+                      }
+                    }
+                  }
+                }
+              }
+              return undefined
+            }
+
+            const naMeta = naReasonFromMeta()
+
+            // check benchmarkAnswers (A1..A6)
+            if (catEval.benchmarkAnswers) {
+              for (const [qid, ans] of Object.entries(catEval.benchmarkAnswers)) {
+                const answer = ans
+                const isArray = Array.isArray(answer)
+                const negative = answer === "no" || (isArray && (answer as any[]).includes("no"))
+                const positive = answer === "yes" || (isArray && (answer as any[]).includes("yes"))
+                const qText = getBenchmarkQuestions().find((x) => x.id === qid)?.text || qid
+                if (positive) yesList.push(qText)
+                if (negative) {
+                  const status = naMeta ? "na" : "no"
+                  negList.push({ text: qText, status, reason: naMeta })
+                }
+              }
+            }
+
+            // check processAnswers (B1..B6)
+            if (catEval.processAnswers) {
+              for (const [qid, ans] of Object.entries(catEval.processAnswers)) {
+                const answer = ans
+                const isArray = Array.isArray(answer)
+                const negative = answer === "no" || (isArray && (answer as any[]).includes("no"))
+                const positive = answer === "yes" || (isArray && (answer as any[]).includes("yes"))
+                const qText = getProcessQuestions().find((x) => x.id === qid)?.text || qid
+                if (positive) yesList.push(qText)
+                if (negative) {
+                  const status = naMeta ? "na" : "no"
+                  negList.push({ text: qText, status, reason: naMeta })
+                }
+              }
+            }
+
+            if (yesList.length || negList.length) pd[area] = { yes: yesList, negative: negList }
+          }
+          return pd
+        })(),
+      }
+
+      evaluations.push(cardData)
+    } catch (error) {
+      continue
+    }
+  }
+
+  return evaluations
+}
+
+export default function HomePage() {
+  const [showNewEvaluation, setShowNewEvaluation] = useState(false)
+  const [evaluationsData, setEvaluationsData] = useState<EvaluationCardData[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      const data = await loadEvaluationData()
+      setEvaluationsData(data)
+      setLoading(false)
+    }
+    loadData()
+  }, [])
+
+  const [sortBy, setSortBy] = useState<"date-newest" | "date-oldest" | "completeness-highest" | "completeness-lowest">("date-newest")
+  const [filterByProvider, setFilterByProvider] = useState<string>("all")
+  const [filterByModality, setFilterByModality] = useState<string>("all")
+
+  const uniqueProviders = useMemo(() => {
+    const providers = [...new Set(evaluationsData.map((item) => item.provider))].sort()
+    return providers
+  }, [evaluationsData])
+
+  const uniqueModalities = useMemo(() => {
+    // Define all possible modalities to ensure complete filter options
+    const allModalities = ["Text", "Image", "Audio", "Video", "Tabular", "Robotics/Action", "Other"]
+    
+    // Get modalities that actually exist in the data
+    const existingModalities = new Set<string>()
+    evaluationsData.forEach((item) => {
+      item.inputModalities.forEach((mod) => existingModalities.add(mod))
+      item.outputModalities.forEach((mod) => existingModalities.add(mod))
+    })
+
+    // Return only modalities that exist in the data, in the order defined by allModalities
+    return allModalities.filter((mod) => existingModalities.has(mod))
+  }, [evaluationsData])
+
+  const filteredAndSortedEvaluations = useMemo(() => {
+    let filtered = evaluationsData
+
+    if (filterByProvider !== "all") {
+      filtered = filtered.filter((item) => item.provider === filterByProvider)
+    }
+
+    if (filterByModality !== "all") {
+      filtered = filtered.filter((item) => 
+        item.inputModalities.includes(filterByModality) || 
+        item.outputModalities.includes(filterByModality)
+      )
+    }
+
+    filtered = filtered.sort((a, b) => {
+      if (sortBy.includes("completeness")) {
+        const aCompleteness = (a.completedCategories / a.applicableCategories) * 100
+        const bCompleteness = (b.completedCategories / b.applicableCategories) * 100
+
+        if (sortBy === "completeness-highest") {
+          return bCompleteness - aCompleteness
+        } else {
+          return aCompleteness - bCompleteness
+        }
+      } else {
+        const dateA = new Date(a.completedDate)
+        const dateB = new Date(b.completedDate)
+
+        if (sortBy === "date-newest") {
+          return dateB.getTime() - dateA.getTime()
+        } else {
+          return dateA.getTime() - dateB.getTime()
+        }
+      }
+    })
+
+    return filtered
+  }, [evaluationsData, sortBy, filterByProvider, filterByModality])
+
+  const handleViewEvaluation = (id: string) => {}
+
+  const handleDeleteEvaluation = (id: string) => {
+    setEvaluationsData((prev) => prev.filter((evaluation) => evaluation.id !== id))
+  }
+
+  const handleSaveEvaluation = (newEvaluation: EvaluationCardData) => {
+    setEvaluationsData((prev) => [newEvaluation, ...prev])
+  }
+
+  if (showNewEvaluation) {
+    return <AIEvaluationDashboard onBack={() => setShowNewEvaluation(false)} onSaveEvaluation={handleSaveEvaluation} />
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading evaluations...</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation onNewEvaluation={() => setShowNewEvaluation(true)} />
+      
+      <PageHeader 
+        title="Evaluation Cards"
+        description={`Track and manage AI system evaluations across capabilities and risks. ${filteredAndSortedEvaluations.length} eval cards available.`}
+      />
+
+      <div className="container mx-auto px-4 sm:px-6 py-6">
+        <div className="space-y-6">
+          {/* Filters */}
+          <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-3 sm:gap-4 p-4 bg-card rounded-lg border">
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Sort by:</span>
+              <Select value={sortBy} onValueChange={(value: "date-newest" | "date-oldest" | "completeness-highest" | "completeness-lowest") => setSortBy(value)}>
+                <SelectTrigger className="w-full sm:w-48">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="date-newest">Date (Newest)</SelectItem>
+                  <SelectItem value="date-oldest">Date (Oldest)</SelectItem>
+                  <SelectItem value="completeness-highest">Completeness (Highest)</SelectItem>
+                  <SelectItem value="completeness-lowest">Completeness (Lowest)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <Filter className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Provider:</span>
+              <Select value={filterByProvider} onValueChange={setFilterByProvider}>
+                <SelectTrigger className="w-full sm:w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Providers</SelectItem>
+                  {uniqueProviders.map((provider) => (
+                    <SelectItem key={provider} value={provider}>
+                      {provider}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <Filter className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Modality:</span>
+              <Select value={filterByModality} onValueChange={setFilterByModality}>
+                <SelectTrigger className="w-full sm:w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Modalities</SelectItem>
+                  {uniqueModalities.map((modality) => (
+                    <SelectItem key={modality} value={modality}>
+                      {modality}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Results */}
+          {filteredAndSortedEvaluations.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredAndSortedEvaluations.map((evaluation) => (
+                <EvaluationCard
+                  key={evaluation.id}
+                  evaluation={evaluation}
+                  onView={handleViewEvaluation}
+                  onDelete={handleDeleteEvaluation}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <div className="mx-auto w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-4">
+                <Filter className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <h3 className="text-lg font-semibold mb-2">No evaluations match your filters</h3>
+              <p className="text-muted-foreground mb-4">Try adjusting your filter criteria to see more results</p>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setFilterByProvider("all")
+                  setFilterByModality("all")
+                }}
+              >
+                Clear Filters
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

app/page-old.tsx

@@ -0,0 +1,636 @@
+"use client"
+
+import { useState, useMemo, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Filter, ArrowUpDown } from "lucide-react"
+import { EvaluationCard, type EvaluationCardData } from "@/components/evaluation-card"
+import { geexport default function HomePage() {
+  const [showNewEvaluation, setShowNewEvaluation] = useState(false)
+  const [evaluationsData, setEvaluationsData] = useState<EvaluationCardData[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      const data = await loadEvaluationData()
+      setEvaluationsData(data)
+      setLoading(false)
+    }
+    loadData()
+  }, [])tions, getProcessQuestions } from "@/lib/schema"
+import { AIEvaluationDashboard } from "@/components/ai-evaluation-dashboard"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
+
+const loadEvaluationData = async (): Promise<EvaluationCardData[]> => {
+  const evaluationFiles = [
+    "/evaluations/gpt-4-turbo.json",
+    "/evaluations/claude-3-sonnet.json",
+    "/evaluations/gemini-pro.json",
+    "/evaluations/fraud-detector.json",
+  ]
+
+  const additionalFiles = []
+  for (let i = 1; i <= 10; i++) {
+    additionalFiles.push(`/evaluations/eval-${Date.now() - i * 86400000}.json`) // Check for files from last 10 days
+  }
+
+  const allFiles = [...evaluationFiles, ...additionalFiles]
+  const evaluations: EvaluationCardData[] = []
+
+  for (const file of allFiles) {
+    try {
+      const response = await fetch(file)
+      if (!response.ok) continue // Skip files that don't exist
+
+      const data = await response.json()
+
+      const cardData: EvaluationCardData = {
+        id: data.id || `eval-${Date.now()}`,
+        systemName: data.systemName || "Unknown System",
+        provider: data.provider || "Unknown Provider",
+        inputModalities: data.inputModalities || ["Text"],
+        outputModalities: data.outputModalities || ["Text"],
+        completedDate: data.evaluationDate || new Date().toISOString().split("T")[0],
+        applicableCategories: data.overallStats?.totalApplicable || 0,
+        completedCategories: data.overallStats?.totalApplicable || 0,
+        status:
+          data.overallStats?.strongCategories?.length >= (data.overallStats?.adequateCategories?.length || 0)
+            ? "strong"
+            : data.overallStats?.adequateCategories?.length >= (data.overallStats?.weakCategories?.length || 0)
+              ? "adequate"
+              : "weak",
+        capabilityEval: {
+          strong: (data.overallStats?.strongCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ).length,
+          adequate: (data.overallStats?.adequateCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ).length,
+          weak: (data.overallStats?.weakCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ).length,
+          insufficient: (data.overallStats?.insufficientCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ).length,
+          strongCategories: (data.overallStats?.strongCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ),
+          adequateCategories: (data.overallStats?.adequateCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ),
+          weakCategories: (data.overallStats?.weakCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ),
+          insufficientCategories: (data.overallStats?.insufficientCategories || []).filter((cat: string) =>
+            [
+              "language-communication",
+              "social-intelligence",
+              "problem-solving",
+              "creativity-innovation",
+              "learning-memory",
+              "perception-vision",
+              "physical-manipulation",
+              "metacognition",
+              "robotic-intelligence",
+            ].includes(cat),
+          ),
+          totalApplicable: data.overallStats?.capabilityApplicable || 0,
+        },
+        riskEval: {
+          strong: (data.overallStats?.strongCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ).length,
+          adequate: (data.overallStats?.adequateCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ).length,
+          weak: (data.overallStats?.weakCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ).length,
+          insufficient: (data.overallStats?.insufficientCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ).length,
+          strongCategories: (data.overallStats?.strongCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ),
+          adequateCategories: (data.overallStats?.adequateCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ),
+          weakCategories: (data.overallStats?.weakCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ),
+          insufficientCategories: (data.overallStats?.insufficientCategories || []).filter((cat: string) =>
+            [
+              "harmful-content",
+              "information-integrity",
+              "privacy-data",
+              "bias-fairness",
+              "security-robustness",
+              "dangerous-capabilities",
+              "human-ai-interaction",
+              "environmental-impact",
+              "economic-displacement",
+              "governance-accountability",
+              "value-chain",
+            ].includes(cat),
+          ),
+          totalApplicable: data.overallStats?.riskApplicable || 0,
+        },
+        priorityAreas: data.overallStats?.priorityAreas || [],
+        priorityDetails: (() => {
+          // Build a richer structure: for each area, include yes questions and negative questions (no/na) with optional reason
+          const pd: Record<
+            string,
+            {
+              yes: string[]
+              negative: { text: string; status: "no" | "na"; reason?: string }[]
+            }
+          > = {}
+          const areas = data.overallStats?.priorityAreas || []
+          for (const area of areas) {
+            const catEval = data.categoryEvaluations?.[area]
+            if (!catEval) continue
+
+            const yesList: string[] = []
+            const negList: { text: string; status: "no" | "na"; reason?: string }[] = []
+
+            // Helper to detect NA reason from category metadata
+            const naReasonFromMeta = (): string | undefined => {
+              if (typeof catEval.additionalAspects === "string" && /not applicable/i.test(catEval.additionalAspects)) {
+                return catEval.additionalAspects
+              }
+              // look into processSources scopes for any note
+              if (catEval.processSources) {
+                for (const entries of Object.values(catEval.processSources)) {
+                  if (Array.isArray(entries)) {
+                    for (const ent of entries as any[]) {
+                      if (ent && typeof ent.scope === "string" && /not applicable/i.test(ent.scope)) {
+                        return ent.scope
+                      }
+                    }
+                  }
+                }
+              }
+              return undefined
+            }
+
+            const naMeta = naReasonFromMeta()
+
+            // check benchmarkAnswers (A1..A6)
+            if (catEval.benchmarkAnswers) {
+              for (const [qid, ans] of Object.entries(catEval.benchmarkAnswers)) {
+                const answer = ans
+                const isArray = Array.isArray(answer)
+                const negative = answer === "no" || (isArray && (answer as any[]).includes("no"))
+                const positive = answer === "yes" || (isArray && (answer as any[]).includes("yes"))
+                const qText = getBenchmarkQuestions().find((x) => x.id === qid)?.text || qid
+                if (positive) yesList.push(qText)
+                if (negative) {
+                  const status = naMeta ? "na" : "no"
+                  negList.push({ text: qText, status, reason: naMeta })
+                }
+              }
+            }
+
+            // check processAnswers (B1..B6)
+            if (catEval.processAnswers) {
+              for (const [qid, ans] of Object.entries(catEval.processAnswers)) {
+                const answer = ans
+                const isArray = Array.isArray(answer)
+                const negative = answer === "no" || (isArray && (answer as any[]).includes("no"))
+                const positive = answer === "yes" || (isArray && (answer as any[]).includes("yes"))
+                const qText = getProcessQuestions().find((x) => x.id === qid)?.text || qid
+                if (positive) yesList.push(qText)
+                if (negative) {
+                  const status = naMeta ? "na" : "no"
+                  negList.push({ text: qText, status, reason: naMeta })
+                }
+              }
+            }
+
+            if (yesList.length || negList.length) pd[area] = { yes: yesList, negative: negList }
+          }
+          return pd
+        })(),
+      }
+
+      evaluations.push(cardData)
+    } catch (error) {
+      continue
+    }
+  }
+
+  return evaluations
+}
+
+export default function HomePage() {
+  const { theme, setTheme } = useTheme()
+  const [showNewEvaluation, setShowNewEvaluation] = useState(false)
+  const [evaluationsData, setEvaluationsData] = useState<EvaluationCardData[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      const data = await loadEvaluationData()
+      setEvaluationsData(data)
+      setLoading(false)
+    }
+    loadData()
+  }, [])
+
+  const [sortBy, setSortBy] = useState<"date-newest" | "date-oldest" | "completeness-highest" | "completeness-lowest">("date-newest")
+  const [filterByProvider, setFilterByProvider] = useState<string>("all")
+  const [filterByModality, setFilterByModality] = useState<string>("all")
+
+  const uniqueProviders = useMemo(() => {
+    const providers = [...new Set(evaluationsData.map((item) => item.provider))].sort()
+    return providers
+  }, [evaluationsData])
+
+  const uniqueModalities = useMemo(() => {
+    // Define all possible modalities to ensure complete filter options
+    const allModalities = ["Text", "Image", "Audio", "Video", "Tabular", "Robotics/Action", "Other"]
+    
+    // Get modalities that actually exist in the data
+    const existingModalities = new Set<string>()
+    evaluationsData.forEach((item) => {
+      item.inputModalities.forEach((mod) => existingModalities.add(mod))
+      item.outputModalities.forEach((mod) => existingModalities.add(mod))
+    })
+    
+    // Return all predefined modalities, with existing ones first, then missing ones
+    const existing = allModalities.filter(mod => existingModalities.has(mod)).sort()
+    const missing = allModalities.filter(mod => !existingModalities.has(mod)).sort()
+    
+    return [...existing, ...missing]
+  }, [evaluationsData])
+
+  const filteredAndSortedEvaluations = useMemo(() => {
+    let filtered = evaluationsData
+
+    if (filterByProvider !== "all") {
+      filtered = filtered.filter((item) => item.provider === filterByProvider)
+    }
+
+    if (filterByModality !== "all") {
+      filtered = filtered.filter((item) => 
+        item.inputModalities.includes(filterByModality) || 
+        item.outputModalities.includes(filterByModality)
+      )
+    }
+
+    filtered = [...filtered].sort((a, b) => {
+      if (sortBy === "completeness-highest" || sortBy === "completeness-lowest") {
+        // Calculate completeness scores for both items
+        const calculateCompletenessScore = (evaluation: EvaluationCardData) => {
+          const capTotal = evaluation.capabilityEval.strong + evaluation.capabilityEval.adequate + evaluation.capabilityEval.weak + evaluation.capabilityEval.insufficient
+          const riskTotal = evaluation.riskEval.strong + evaluation.riskEval.adequate + evaluation.riskEval.weak + evaluation.riskEval.insufficient
+          const totalItems = capTotal + riskTotal
+          
+          if (totalItems === 0) return 0
+          
+          const capScore = evaluation.capabilityEval.strong * 4 + evaluation.capabilityEval.adequate * 3 + evaluation.capabilityEval.weak * 2 + evaluation.capabilityEval.insufficient * 1
+          const riskScore = evaluation.riskEval.strong * 4 + evaluation.riskEval.adequate * 3 + evaluation.riskEval.weak * 2 + evaluation.riskEval.insufficient * 1
+          
+          return Math.round(((capScore + riskScore) / (totalItems * 4)) * 100)
+        }
+        
+        const scoreA = calculateCompletenessScore(a)
+        const scoreB = calculateCompletenessScore(b)
+        
+        if (sortBy === "completeness-highest") {
+          return scoreB - scoreA
+        } else {
+          return scoreA - scoreB
+        }
+      } else {
+        const dateA = new Date(a.completedDate)
+        const dateB = new Date(b.completedDate)
+
+        if (sortBy === "date-newest") {
+          return dateB.getTime() - dateA.getTime()
+        } else {
+          return dateA.getTime() - dateB.getTime()
+        }
+      }
+    })
+
+    return filtered
+  }, [evaluationsData, sortBy, filterByProvider, filterByModality])
+
+  const handleViewEvaluation = (id: string) => {}
+
+  const handleDeleteEvaluation = (id: string) => {
+    setEvaluationsData((prev) => prev.filter((evaluation) => evaluation.id !== id))
+  }
+
+  const handleSaveEvaluation = (newEvaluation: EvaluationCardData) => {
+    setEvaluationsData((prev) => [newEvaluation, ...prev])
+  }
+
+  if (showNewEvaluation) {
+    return <AIEvaluationDashboard onBack={() => setShowNewEvaluation(false)} onSaveEvaluation={handleSaveEvaluation} />
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading evaluations...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="border-b bg-card">
+        <div className="container mx-auto px-4 sm:px-6 py-4">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+            <div>
+              <h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">AI Evaluation Dashboard</h1>
+              <p className="text-sm text-muted-foreground">Manage and track your AI system evaluations</p>
+            </div>
+            <div className="flex items-center gap-2 sm:gap-3">
+              <Link href="/analytics">
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <ArrowUpDown className="h-4 w-4" />
+                  <span className="hidden sm:inline">Analytics</span>
+                </Button>
+              </Link>
+              <Link href="/about">
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <Info className="h-4 w-4" />
+                  <span className="hidden sm:inline">About</span>
+                </Button>
+              </Link>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                className="h-9 w-9 p-0"
+              >
+                <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span className="sr-only">Toggle theme</span>
+              </Button>
+              <Button onClick={() => setShowNewEvaluation(true)} className="gap-2">
+                <Plus className="h-4 w-4" />
+                <span className="hidden sm:inline">New Eval Card</span>
+                <span className="sm:hidden">New</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-6">
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <h2 className="text-xl font-semibold font-heading">Evaluation Cards</h2>
+            <p className="text-sm text-muted-foreground">{filteredAndSortedEvaluations.length} eval cards</p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-3 sm:gap-4 p-4 bg-card rounded-lg border">
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Sort by:</span>
+              <Select value={sortBy} onValueChange={(value: "date-newest" | "date-oldest" | "completeness-highest" | "completeness-lowest") => setSortBy(value)}>
+                <SelectTrigger className="w-full sm:w-48">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="date-newest">Date (Newest)</SelectItem>
+                  <SelectItem value="date-oldest">Date (Oldest)</SelectItem>
+                  <SelectItem value="completeness-highest">Completeness (Highest)</SelectItem>
+                  <SelectItem value="completeness-lowest">Completeness (Lowest)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <Filter className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Provider:</span>
+              <Select value={filterByProvider} onValueChange={setFilterByProvider}>
+                <SelectTrigger className="w-full sm:w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Providers</SelectItem>
+                  {uniqueProviders.map((provider) => (
+                    <SelectItem key={provider} value={provider}>
+                      {provider}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <Filter className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Modality:</span>
+              <Select value={filterByModality} onValueChange={setFilterByModality}>
+                <SelectTrigger className="w-full sm:w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Modalities</SelectItem>
+                  {uniqueModalities.map((modality) => (
+                    <SelectItem key={modality} value={modality}>
+                      {modality}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {filteredAndSortedEvaluations.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredAndSortedEvaluations.map((evaluation) => (
+                <EvaluationCard
+                  key={evaluation.id}
+                  evaluation={evaluation}
+                  onView={handleViewEvaluation}
+                  onDelete={handleDeleteEvaluation}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <div className="mx-auto w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-4">
+                <Filter className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <h3 className="text-lg font-semibold mb-2">No evaluations match your filters</h3>
+              <p className="text-muted-foreground mb-4">Try adjusting your filter criteria to see more results</p>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setFilterByProvider("all")
+                  setFilterByModality("all")
+                }}
+              >
+                Clear Filters
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

app/page.tsx

@@ -3,12 +3,12 @@
 import { useState, useMemo, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Plus, Moon, Sun, Filter, ArrowUpDown, Info } from "lucide-react"
-import { useTheme } from "next-themes"
+import { Filter, ArrowUpDown, Plus } from "lucide-react"
 import { EvaluationCard, type EvaluationCardData } from "@/components/evaluation-card"
 import { getBenchmarkQuestions, getProcessQuestions } from "@/lib/schema"
 import { AIEvaluationDashboard } from "@/components/ai-evaluation-dashboard"
-import Link from "next/link"
+import { Navigation } from "@/components/navigation"
+import { PageHeader } from "@/components/page-header"
 
 const loadEvaluationData = async (): Promise<EvaluationCardData[]> => {
   const evaluationFiles = [
@@ -366,7 +366,6 @@ const loadEvaluationData = async (): Promise<EvaluationCardData[]> => {
 }
 
 export default function HomePage() {
-  const { theme, setTheme } = useTheme()
   const [showNewEvaluation, setShowNewEvaluation] = useState(false)
   const [evaluationsData, setEvaluationsData] = useState<EvaluationCardData[]>([])
   const [loading, setLoading] = useState(true)
@@ -399,12 +398,9 @@ export default function HomePage() {
       item.inputModalities.forEach((mod) => existingModalities.add(mod))
       item.outputModalities.forEach((mod) => existingModalities.add(mod))
     })
-    
-    // Return all predefined modalities, with existing ones first, then missing ones
-    const existing = allModalities.filter(mod => existingModalities.has(mod)).sort()
-    const missing = allModalities.filter(mod => !existingModalities.has(mod)).sort()
-    
-    return [...existing, ...missing]
+
+    // Return only modalities that exist in the data, in the order defined by allModalities
+    return allModalities.filter((mod) => existingModalities.has(mod))
   }, [evaluationsData])
 
   const filteredAndSortedEvaluations = useMemo(() => {
@@ -421,29 +417,15 @@ export default function HomePage() {
       )
     }
 
-    filtered = [...filtered].sort((a, b) => {
-      if (sortBy === "completeness-highest" || sortBy === "completeness-lowest") {
-        // Calculate completeness scores for both items
-        const calculateCompletenessScore = (evaluation: EvaluationCardData) => {
-          const capTotal = evaluation.capabilityEval.strong + evaluation.capabilityEval.adequate + evaluation.capabilityEval.weak + evaluation.capabilityEval.insufficient
-          const riskTotal = evaluation.riskEval.strong + evaluation.riskEval.adequate + evaluation.riskEval.weak + evaluation.riskEval.insufficient
-          const totalItems = capTotal + riskTotal
-          
-          if (totalItems === 0) return 0
-          
-          const capScore = evaluation.capabilityEval.strong * 4 + evaluation.capabilityEval.adequate * 3 + evaluation.capabilityEval.weak * 2 + evaluation.capabilityEval.insufficient * 1
-          const riskScore = evaluation.riskEval.strong * 4 + evaluation.riskEval.adequate * 3 + evaluation.riskEval.weak * 2 + evaluation.riskEval.insufficient * 1
-          
-          return Math.round(((capScore + riskScore) / (totalItems * 4)) * 100)
-        }
-        
-        const scoreA = calculateCompletenessScore(a)
-        const scoreB = calculateCompletenessScore(b)
-        
+    filtered = filtered.sort((a, b) => {
+      if (sortBy.includes("completeness")) {
+        const aCompleteness = (a.completedCategories / a.applicableCategories) * 100
+        const bCompleteness = (b.completedCategories / b.applicableCategories) * 100
+
         if (sortBy === "completeness-highest") {
-          return scoreB - scoreA
+          return bCompleteness - aCompleteness
         } else {
-          return scoreA - scoreB
+          return aCompleteness - bCompleteness
         }
       } else {
         const dateA = new Date(a.completedDate)
@@ -476,10 +458,13 @@ export default function HomePage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
-          <p className="text-muted-foreground">Loading evaluations...</p>
+      <div className="min-h-screen bg-background">
+        <Navigation />
+        <div className="flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Loading evaluations...</p>
+          </div>
         </div>
       </div>
     )
@@ -487,53 +472,22 @@ export default function HomePage() {
 
   return (
     <div className="min-h-screen bg-background">
-      <header className="border-b bg-card">
-        <div className="container mx-auto px-4 sm:px-6 py-4">
-          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-            <div>
-              <h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">AI Evaluation Dashboard</h1>
-              <p className="text-sm text-muted-foreground">Manage and track your AI system evaluations</p>
-            </div>
-            <div className="flex items-center gap-2 sm:gap-3">
-              <Link href="/analytics">
-                <Button variant="ghost" size="sm" className="gap-2">
-                  <ArrowUpDown className="h-4 w-4" />
-                  <span className="hidden sm:inline">Analytics</span>
-                </Button>
-              </Link>
-              <Link href="/about">
-                <Button variant="ghost" size="sm" className="gap-2">
-                  <Info className="h-4 w-4" />
-                  <span className="hidden sm:inline">About</span>
-                </Button>
-              </Link>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-                className="h-9 w-9 p-0"
-              >
-                <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                <span className="sr-only">Toggle theme</span>
-              </Button>
-              <Button onClick={() => setShowNewEvaluation(true)} className="gap-2">
-                <Plus className="h-4 w-4" />
-                <span className="hidden sm:inline">New Eval Card</span>
-                <span className="sm:hidden">New</span>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-6">
+      <Navigation />
+      
+      <PageHeader 
+        title="Evaluation Cards"
+        description={`Track and manage AI system evaluations across capabilities and risks. ${filteredAndSortedEvaluations.length} eval cards available.`}
+      >
+        <Button onClick={() => setShowNewEvaluation(true)} className="gap-2">
+          <Plus className="h-4 w-4" />
+          <span className="hidden sm:inline">New Eval Card</span>
+          <span className="sm:hidden">New</span>
+        </Button>
+      </PageHeader>
+
+      <div className="container mx-auto px-4 sm:px-6 py-6">
         <div className="space-y-6">
-          <div className="flex items-center justify-between">
-            <h2 className="text-xl font-semibold font-heading">Evaluation Cards</h2>
-            <p className="text-sm text-muted-foreground">{filteredAndSortedEvaluations.length} eval cards</p>
-          </div>
-
+          {/* Filters */}
           <div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-3 sm:gap-4 p-4 bg-card rounded-lg border">
             <div className="flex items-center gap-2 w-full sm:w-auto">
               <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
@@ -588,6 +542,7 @@ export default function HomePage() {
             </div>
           </div>
 
+          {/* Results */}
           {filteredAndSortedEvaluations.length > 0 ? (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {filteredAndSortedEvaluations.map((evaluation) => (

components/navigation.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Moon, Sun, Home, ArrowUpDown, Info } from "lucide-react"
+import { useTheme } from "next-themes"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+
+export function Navigation() {
+  const { theme, setTheme } = useTheme()
+  const pathname = usePathname()
+
+  const navItems = [
+    {
+      href: "/",
+      label: "Home",
+      icon: Home,
+      isActive: pathname === "/"
+    },
+    {
+      href: "/analytics",
+      label: "Analytics",
+      icon: ArrowUpDown,
+      isActive: pathname === "/analytics"
+    },
+    {
+      href: "/about",
+      label: "About",
+      icon: Info,
+      isActive: pathname === "/about"
+    }
+  ]
+
+  return (
+    <header className="border-b bg-card">
+      <div className="container mx-auto px-4 sm:px-6 py-4">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+          {/* Logo and branding */}
+          <div className="flex items-center gap-4">
+            {/* Logo */}
+            <Link href="/" className="flex-shrink-0">
+              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-lg hover:scale-105 transition-transform">
+                AI
+              </div>
+            </Link>
+            
+            {/* App title and description */}
+            <div>
+              <Link href="/" className="block group">
+                <h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground group-hover:text-primary transition-colors">
+                  AI Eval Dashboard
+                </h1>
+              </Link>
+              <p className="text-sm text-muted-foreground">
+                AI evaluation documentation platform
+              </p>
+            </div>
+          </div>
+
+          {/* Navigation and actions */}
+          <div className="flex items-center gap-2 sm:gap-3">
+            {/* Navigation links */}
+            <nav className="flex items-center gap-1">
+              {navItems.map((item) => (
+                <Link key={item.href} href={item.href}>
+                  <Button
+                    variant={item.isActive ? "default" : "ghost"}
+                    size="sm"
+                    className={cn(
+                      "gap-2",
+                      item.isActive && "bg-primary text-primary-foreground"
+                    )}
+                  >
+                    <item.icon className="h-4 w-4" />
+                    <span className="hidden sm:inline">{item.label}</span>
+                  </Button>
+                </Link>
+              ))}
+            </nav>
+
+            {/* Separator */}
+            <div className="w-px h-6 bg-border" />
+
+            {/* Theme toggle */}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              className="h-9 w-9 p-0"
+            >
+              <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+              <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+              <span className="sr-only">Toggle theme</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

components/page-header.tsx

@@ -0,0 +1,29 @@
+interface PageHeaderProps {
+  title: string
+  description?: string
+  children?: React.ReactNode
+}
+
+export function PageHeader({ title, description, children }: PageHeaderProps) {
+  return (
+    <div className="container mx-auto px-4 sm:px-6 py-6 border-b bg-muted/30">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+        <div>
+          <h2 className="text-2xl sm:text-3xl font-bold font-heading text-foreground">
+            {title}
+          </h2>
+          {description && (
+            <p className="text-base text-muted-foreground mt-1">
+              {description}
+            </p>
+          )}
+        </div>
+        {children && (
+          <div className="flex items-center gap-2">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}