feat: Phase 8 - Frontend main views (T-026 to T-031)

Implement all main frontend views for the MITRE ATT&CK coverage platform:

- T-026: Dashboard with coverage summary cards and tactic breakdown table

- T-027: Interactive ATT&CK matrix with filtering by status, tactic, platform

- T-028: Technique detail page with tests, intel items, and review actions

- T-029: Test creation form with technique selector and validation

- T-030: Test detail page with drag and drop evidence upload and download

- T-031: System admin panel with MITRE sync and intel scan controls

New components: CoverageSummaryCard, TacticCoverageChart, AttackMatrix, TechniqueCell, TestForm, EvidenceUpload, EvidenceList

New API modules: metrics.ts, techniques.ts, tests.ts, evidence.ts, system.ts

All views use TanStack Query for data fetching with proper loading and error states. Role-based UI controls for admin/lead actions.

README.md

@@ -18,7 +18,7 @@ Aegis is a comprehensive platform for tracking and managing security coverage ag
 - **Database**: PostgreSQL 15
 - **Object Storage**: MinIO (S3-compatible)
 - **ORM**: SQLAlchemy with Alembic migrations
-- **Frontend**: React 19 + TypeScript + Vite + Tailwind CSS v4
+- **Frontend**: React 19 + TypeScript + Vite + Tailwind CSS v4 + TanStack Query
 
 ## Quick Start
 
@@ -208,19 +208,34 @@ Aegis/
         ├── index.css             # Tailwind CSS entry
         ├── api/                  # Axios clients
         │   ├── client.ts         # Base axios instance with JWT interceptor
-        │   └── auth.ts           # login(), getMe()
+        │   ├── auth.ts           # login(), getMe()
+        │   ├── metrics.ts        # getCoverageSummary(), getCoverageByTactic()
+        │   ├── techniques.ts     # getTechniques(), getTechniqueByMitreId()
+        │   ├── tests.ts          # createTest(), validateTest(), rejectTest()
+        │   ├── evidence.ts       # uploadEvidence(), getEvidence()
+        │   └── system.ts         # triggerMitreSync(), triggerIntelScan()
         ├── context/
         │   └── AuthContext.tsx    # Auth state: user, login, logout, isLoading
         ├── components/
-        │   ├── Layout.tsx        # Sidebar + header + <Outlet/>
-        │   ├── Sidebar.tsx       # Nav links (role-aware)
-        │   └── ProtectedRoute.tsx
+        │   ├── Layout.tsx              # Sidebar + header + <Outlet/>
+        │   ├── Sidebar.tsx             # Nav links (role-aware)
+        │   ├── ProtectedRoute.tsx      # Auth route guard with role support
+        │   ├── CoverageSummaryCard.tsx # Metric card component
+        │   ├── TacticCoverageChart.tsx # Coverage breakdown table
+        │   ├── AttackMatrix.tsx        # Interactive technique grid
+        │   ├── TechniqueCell.tsx       # Individual technique cell in matrix
+        │   ├── TestForm.tsx            # Reusable test creation/edit form
+        │   ├── EvidenceUpload.tsx      # Drag & drop file upload
+        │   └── EvidenceList.tsx        # Evidence file listing
         ├── pages/
-        │   ├── LoginPage.tsx
-        │   ├── DashboardPage.tsx
-        │   ├── TechniquesPage.tsx
-        │   ├── TestsPage.tsx
-        │   └── SystemPage.tsx
+        │   ├── LoginPage.tsx           # User authentication form
+        │   ├── DashboardPage.tsx       # Coverage metrics dashboard with summary cards
+        │   ├── TechniquesPage.tsx      # Interactive ATT&CK matrix view with filters
+        │   ├── TechniqueDetailPage.tsx # Individual technique detail with tests
+        │   ├── TestsPage.tsx           # Tests overview and navigation
+        │   ├── TestCreatePage.tsx      # Test creation form
+        │   ├── TestDetailPage.tsx      # Test details with evidence upload
+        │   └── SystemPage.tsx          # Admin panel for MITRE sync & intel scan
         ├── types/
         │   └── models.ts         # TS interfaces matching backend schemas
         ├── hooks/

frontend/src/App.tsx

@@ -2,7 +2,10 @@ import { Routes, Route, Navigate } from "react-router-dom";
 import LoginPage from "./pages/LoginPage";
 import DashboardPage from "./pages/DashboardPage";
 import TechniquesPage from "./pages/TechniquesPage";
+import TechniqueDetailPage from "./pages/TechniqueDetailPage";
 import TestsPage from "./pages/TestsPage";
+import TestCreatePage from "./pages/TestCreatePage";
+import TestDetailPage from "./pages/TestDetailPage";
 import SystemPage from "./pages/SystemPage";
 import Layout from "./components/Layout";
 import ProtectedRoute from "./components/ProtectedRoute";
@@ -23,7 +26,10 @@ export default function App() {
       >
         <Route path="/dashboard" element={<DashboardPage />} />
         <Route path="/techniques" element={<TechniquesPage />} />
+        <Route path="/techniques/:mitreId" element={<TechniqueDetailPage />} />
         <Route path="/tests" element={<TestsPage />} />
+        <Route path="/tests/new" element={<TestCreatePage />} />
+        <Route path="/tests/:testId" element={<TestDetailPage />} />
         <Route
           path="/system"
           element={

frontend/src/api/evidence.ts

@@ -0,0 +1,30 @@
+import client from "./client";
+
+export interface EvidenceOut {
+  id: string;
+  test_id: string;
+  file_name: string;
+  sha256_hash: string;
+  uploaded_by: string | null;
+  uploaded_at: string;
+  download_url: string;
+}
+
+/** Upload evidence file for a test. */
+export async function uploadEvidence(testId: string, file: File): Promise<EvidenceOut> {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const { data } = await client.post<EvidenceOut>(`/tests/${testId}/evidence`, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return data;
+}
+
+/** Get evidence metadata with download URL. */
+export async function getEvidence(evidenceId: string): Promise<EvidenceOut> {
+  const { data } = await client.get<EvidenceOut>(`/evidence/${evidenceId}`);
+  return data;
+}

frontend/src/api/metrics.ts

@@ -0,0 +1,14 @@
+import client from "./client";
+import type { CoverageSummary, TacticCoverage } from "../types/models";
+
+/** Fetch the global coverage summary. */
+export async function getCoverageSummary(): Promise<CoverageSummary> {
+  const { data } = await client.get<CoverageSummary>("/metrics/summary");
+  return data;
+}
+
+/** Fetch coverage breakdown by tactic. */
+export async function getCoverageByTactic(): Promise<TacticCoverage[]> {
+  const { data } = await client.get<TacticCoverage[]>("/metrics/by-tactic");
+  return data;
+}

frontend/src/api/system.ts

@@ -0,0 +1,41 @@
+import client from "./client";
+
+export interface SyncMitreResponse {
+  message: string;
+  new: number;
+  updated: number;
+}
+
+export interface IntelScanResponse {
+  message: string;
+  new_items: number;
+}
+
+export interface SchedulerJob {
+  id: string;
+  name: string;
+  next_run_time: string | null;
+}
+
+export interface SchedulerStatusResponse {
+  running: boolean;
+  jobs: SchedulerJob[];
+}
+
+/** Manually trigger MITRE ATT&CK sync. */
+export async function triggerMitreSync(): Promise<SyncMitreResponse> {
+  const { data } = await client.post<SyncMitreResponse>("/system/sync-mitre");
+  return data;
+}
+
+/** Manually trigger threat intelligence scan. */
+export async function triggerIntelScan(): Promise<IntelScanResponse> {
+  const { data } = await client.post<IntelScanResponse>("/system/run-intel-scan");
+  return data;
+}
+
+/** Get scheduler status. */
+export async function getSchedulerStatus(): Promise<SchedulerStatusResponse> {
+  const { data } = await client.get<SchedulerStatusResponse>("/system/scheduler-status");
+  return data;
+}

frontend/src/api/techniques.ts

@@ -0,0 +1,74 @@
+import client from "./client";
+import type { Technique, TechniqueStatus } from "../types/models";
+
+/** Summary representation used in list endpoints. */
+export interface TechniqueSummary {
+  id: string;
+  mitre_id: string;
+  name: string;
+  tactic: string | null;
+  status_global: TechniqueStatus;
+  review_required?: boolean;
+}
+
+/** Extended technique with tests for detail view. */
+export interface TechniqueWithTests extends Technique {
+  tests?: Array<{
+    id: string;
+    technique_id: string;
+    name: string;
+    description: string | null;
+    platform: string | null;
+    procedure_text: string | null;
+    tool_used: string | null;
+    execution_date: string | null;
+    created_by: string | null;
+    result: "detected" | "not_detected" | "partially_detected" | null;
+    state: "draft" | "in_review" | "validated" | "rejected";
+    validated_by: string | null;
+    validated_at: string | null;
+    created_at: string;
+  }>;
+  intel_items?: Array<{
+    id: string;
+    technique_id: string | null;
+    url: string;
+    title: string | null;
+    source: string | null;
+    detected_at: string;
+    reviewed: boolean;
+  }>;
+}
+
+export interface TechniqueFilters {
+  tactic?: string;
+  status?: TechniqueStatus;
+  review_required?: boolean;
+}
+
+/** Fetch all techniques (summary). */
+export async function getTechniques(filters?: TechniqueFilters): Promise<TechniqueSummary[]> {
+  const params = new URLSearchParams();
+  if (filters?.tactic) params.append("tactic", filters.tactic);
+  if (filters?.status) params.append("status", filters.status);
+  if (filters?.review_required !== undefined) {
+    params.append("review_required", String(filters.review_required));
+  }
+  
+  const { data } = await client.get<TechniqueSummary[]>(
+    `/techniques${params.toString() ? `?${params}` : ""}`
+  );
+  return data;
+}
+
+/** Fetch a single technique by mitre_id (with tests). */
+export async function getTechniqueByMitreId(mitreId: string): Promise<TechniqueWithTests> {
+  const { data } = await client.get<TechniqueWithTests>(`/techniques/${mitreId}`);
+  return data;
+}
+
+/** Mark a technique as reviewed. */
+export async function markTechniqueReviewed(mitreId: string): Promise<TechniqueWithTests> {
+  const { data } = await client.patch<TechniqueWithTests>(`/techniques/${mitreId}/review`);
+  return data;
+}

frontend/src/api/tests.ts

@@ -0,0 +1,67 @@
+import client from "./client";
+import type { Test, TestResult } from "../types/models";
+
+export interface TestCreatePayload {
+  technique_id: string;
+  name: string;
+  description?: string;
+  platform?: string;
+  procedure_text?: string;
+  tool_used?: string;
+}
+
+export interface TestUpdatePayload {
+  name?: string;
+  description?: string;
+  platform?: string;
+  procedure_text?: string;
+  tool_used?: string;
+  result?: TestResult;
+}
+
+export interface TestValidatePayload {
+  result: TestResult;
+  comments?: string;
+}
+
+export interface TestWithEvidences extends Test {
+  evidences?: Array<{
+    id: string;
+    test_id: string;
+    file_name: string;
+    sha256_hash: string;
+    uploaded_by: string | null;
+    uploaded_at: string;
+    download_url?: string;
+  }>;
+}
+
+/** Create a new test. */
+export async function createTest(payload: TestCreatePayload): Promise<Test> {
+  const { data } = await client.post<Test>("/tests", payload);
+  return data;
+}
+
+/** Get test by ID with evidences. */
+export async function getTestById(testId: string): Promise<TestWithEvidences> {
+  const { data } = await client.get<TestWithEvidences>(`/tests/${testId}`);
+  return data;
+}
+
+/** Update a test (only draft/rejected). */
+export async function updateTest(testId: string, payload: TestUpdatePayload): Promise<Test> {
+  const { data } = await client.patch<Test>(`/tests/${testId}`, payload);
+  return data;
+}
+
+/** Validate a test. */
+export async function validateTest(testId: string, payload: TestValidatePayload): Promise<Test> {
+  const { data } = await client.post<Test>(`/tests/${testId}/validate`, payload);
+  return data;
+}
+
+/** Reject a test. */
+export async function rejectTest(testId: string): Promise<Test> {
+  const { data } = await client.post<Test>(`/tests/${testId}/reject`);
+  return data;
+}

frontend/src/components/AttackMatrix.tsx

@@ -0,0 +1,112 @@
+import { useMemo } from "react";
+import TechniqueCell from "./TechniqueCell";
+import type { TechniqueSummary } from "../api/techniques";
+
+interface AttackMatrixProps {
+  techniques: TechniqueSummary[];
+}
+
+// MITRE ATT&CK Enterprise Tactics in order
+const TACTIC_ORDER = [
+  "reconnaissance",
+  "resource-development",
+  "initial-access",
+  "execution",
+  "persistence",
+  "privilege-escalation",
+  "defense-evasion",
+  "credential-access",
+  "discovery",
+  "lateral-movement",
+  "collection",
+  "command-and-control",
+  "exfiltration",
+  "impact",
+];
+
+const formatTacticName = (tactic: string): string => {
+  return tactic
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+export default function AttackMatrix({ techniques }: AttackMatrixProps) {
+  // Group techniques by tactic
+  const groupedByTactic = useMemo(() => {
+    const groups: Record<string, TechniqueSummary[]> = {};
+
+    for (const tech of techniques) {
+      // A technique can belong to multiple tactics (comma-separated)
+      const tactics = tech.tactic
+        ? tech.tactic.split(",").map((t) => t.trim().toLowerCase())
+        : ["unknown"];
+
+      for (const tactic of tactics) {
+        if (!groups[tactic]) {
+          groups[tactic] = [];
+        }
+        groups[tactic].push(tech);
+      }
+    }
+
+    // Sort techniques within each tactic by mitre_id
+    for (const tactic of Object.keys(groups)) {
+      groups[tactic].sort((a, b) => a.mitre_id.localeCompare(b.mitre_id));
+    }
+
+    return groups;
+  }, [techniques]);
+
+  // Get ordered tactics that have techniques
+  const orderedTactics = useMemo(() => {
+    const tacticSet = new Set(Object.keys(groupedByTactic));
+    const ordered = TACTIC_ORDER.filter((t) => tacticSet.has(t));
+    // Add any unknown tactics at the end
+    const remaining = Array.from(tacticSet).filter((t) => !TACTIC_ORDER.includes(t));
+    return [...ordered, ...remaining];
+  }, [groupedByTactic]);
+
+  if (techniques.length === 0) {
+    return (
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-8 text-center">
+        <p className="text-gray-400">No techniques found matching your filters</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto rounded-xl border border-gray-800 bg-gray-900">
+      <div className="min-w-max p-4">
+        <div className="flex gap-3">
+          {orderedTactics.map((tactic) => (
+            <div key={tactic} className="w-48 flex-shrink-0">
+              {/* Tactic header */}
+              <div className="mb-3 rounded-lg bg-gray-800 px-3 py-2">
+                <h3 className="text-center text-sm font-semibold text-cyan-400">
+                  {formatTacticName(tactic)}
+                </h3>
+                <p className="mt-0.5 text-center text-xs text-gray-500">
+                  {groupedByTactic[tactic]?.length || 0} techniques
+                </p>
+              </div>
+
+              {/* Technique cells */}
+              <div className="space-y-2">
+                {groupedByTactic[tactic]?.map((tech) => (
+                  <TechniqueCell
+                    key={`${tactic}-${tech.mitre_id}`}
+                    mitreId={tech.mitre_id}
+                    name={tech.name}
+                    status={tech.status_global}
+                    reviewRequired={tech.review_required}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/CoverageSummaryCard.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+interface CoverageSummaryCardProps {
+  title: string;
+  value: number;
+  total?: number;
+  icon: ReactNode;
+  colorClass: string;
+  bgClass: string;
+}
+
+export default function CoverageSummaryCard({
+  title,
+  value,
+  total,
+  icon,
+  colorClass,
+  bgClass,
+}: CoverageSummaryCardProps) {
+  const percentage = total && total > 0 ? ((value / total) * 100).toFixed(1) : null;
+
+  return (
+    <div className={`rounded-xl border border-gray-800 ${bgClass} p-5`}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-400">{title}</p>
+          <p className={`mt-1 text-3xl font-bold ${colorClass}`}>{value}</p>
+          {percentage !== null && (
+            <p className="mt-1 text-xs text-gray-500">{percentage}% of total</p>
+          )}
+        </div>
+        <div className={`rounded-lg p-3 ${bgClass} border border-gray-700`}>
+          {icon}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/EvidenceList.tsx

@@ -0,0 +1,97 @@
+import { FileIcon, Download, ExternalLink, Copy, Check } from "lucide-react";
+import { useState } from "react";
+
+interface Evidence {
+  id: string;
+  test_id: string;
+  file_name: string;
+  sha256_hash: string;
+  uploaded_by: string | null;
+  uploaded_at: string;
+  download_url?: string;
+}
+
+interface EvidenceListProps {
+  evidences: Evidence[];
+  onDownload: (evidenceId: string) => void;
+}
+
+export default function EvidenceList({ evidences, onDownload }: EvidenceListProps) {
+  const [copiedHash, setCopiedHash] = useState<string | null>(null);
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const copyHash = async (hash: string) => {
+    await navigator.clipboard.writeText(hash);
+    setCopiedHash(hash);
+    setTimeout(() => setCopiedHash(null), 2000);
+  };
+
+  if (evidences.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-800 bg-gray-800/30 p-6 text-center">
+        <FileIcon className="mx-auto h-10 w-10 text-gray-600" />
+        <p className="mt-2 text-sm text-gray-400">No evidence files uploaded yet</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {evidences.map((evidence) => (
+        <div
+          key={evidence.id}
+          className="rounded-lg border border-gray-800 bg-gray-800/30 p-4 transition-colors hover:bg-gray-800/50"
+        >
+          <div className="flex items-start justify-between">
+            <div className="flex items-start gap-3">
+              <div className="rounded-lg bg-gray-700 p-2">
+                <FileIcon className="h-5 w-5 text-gray-400" />
+              </div>
+              <div>
+                <p className="font-medium text-gray-200">{evidence.file_name}</p>
+                <p className="mt-0.5 text-xs text-gray-500">
+                  Uploaded {formatDate(evidence.uploaded_at)}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={() => onDownload(evidence.id)}
+              className="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-300 hover:border-cyan-500/50 hover:text-cyan-400 transition-colors"
+            >
+              <Download className="h-4 w-4" />
+              Download
+            </button>
+          </div>
+
+          {/* SHA256 Hash */}
+          <div className="mt-3 flex items-center gap-2">
+            <span className="text-xs font-medium text-gray-500">SHA256:</span>
+            <code className="flex-1 truncate rounded bg-gray-900 px-2 py-1 font-mono text-xs text-gray-400">
+              {evidence.sha256_hash}
+            </code>
+            <button
+              onClick={() => copyHash(evidence.sha256_hash)}
+              className="rounded p-1 text-gray-500 hover:bg-gray-700 hover:text-gray-300"
+              title="Copy hash"
+            >
+              {copiedHash === evidence.sha256_hash ? (
+                <Check className="h-4 w-4 text-green-400" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/EvidenceUpload.tsx

@@ -0,0 +1,140 @@
+import { useState, useCallback, useRef } from "react";
+import { Upload, Loader2, X, FileIcon } from "lucide-react";
+
+interface EvidenceUploadProps {
+  onUpload: (file: File) => Promise<void>;
+  isUploading: boolean;
+}
+
+export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUploadProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (file) {
+      setSelectedFile(file);
+    }
+  }, []);
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (selectedFile) {
+      await onUpload(selectedFile);
+      setSelectedFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  const clearSelection = () => {
+    setSelectedFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Drop zone */}
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={() => fileInputRef.current?.click()}
+        className={`cursor-pointer rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
+          isDragging
+            ? "border-cyan-500 bg-cyan-500/10"
+            : "border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800"
+        }`}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+        <Upload
+          className={`mx-auto h-10 w-10 ${isDragging ? "text-cyan-400" : "text-gray-500"}`}
+        />
+        <p className="mt-2 text-sm text-gray-400">
+          {isDragging ? (
+            "Drop file here"
+          ) : (
+            <>
+              Drag and drop a file, or <span className="text-cyan-400">browse</span>
+            </>
+          )}
+        </p>
+        <p className="mt-1 text-xs text-gray-500">
+          Screenshots, logs, pcap files, etc.
+        </p>
+      </div>
+
+      {/* Selected file preview */}
+      {selectedFile && (
+        <div className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800 p-3">
+          <div className="flex items-center gap-3">
+            <FileIcon className="h-8 w-8 text-gray-400" />
+            <div>
+              <p className="text-sm font-medium text-gray-200">{selectedFile.name}</p>
+              <p className="text-xs text-gray-500">{formatFileSize(selectedFile.size)}</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={clearSelection}
+              disabled={isUploading}
+              className="rounded p-1 text-gray-400 hover:bg-gray-700 hover:text-white"
+            >
+              <X className="h-4 w-4" />
+            </button>
+            <button
+              onClick={handleUpload}
+              disabled={isUploading}
+              className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50"
+            >
+              {isUploading ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Uploading...
+                </>
+              ) : (
+                <>
+                  <Upload className="h-4 w-4" />
+                  Upload
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/TacticCoverageChart.tsx

@@ -0,0 +1,97 @@
+import type { TacticCoverage } from "../types/models";
+
+interface TacticCoverageChartProps {
+  data: TacticCoverage[];
+}
+
+export default function TacticCoverageChart({ data }: TacticCoverageChartProps) {
+  if (data.length === 0) {
+    return (
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <p className="text-center text-gray-400">No tactic data available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+      <h2 className="mb-4 text-lg font-semibold text-white">Coverage by Tactic</h2>
+      <div className="overflow-x-auto">
+        <table className="w-full text-left text-sm">
+          <thead>
+            <tr className="border-b border-gray-800">
+              <th className="pb-3 pr-4 font-medium text-gray-400">Tactic</th>
+              <th className="pb-3 px-4 text-center font-medium text-gray-400">Total</th>
+              <th className="pb-3 px-4 text-center font-medium text-green-400">Validated</th>
+              <th className="pb-3 px-4 text-center font-medium text-yellow-400">Partial</th>
+              <th className="pb-3 px-4 text-center font-medium text-blue-400">In Progress</th>
+              <th className="pb-3 px-4 text-center font-medium text-red-400">Not Covered</th>
+              <th className="pb-3 px-4 text-center font-medium text-gray-500">Not Evaluated</th>
+              <th className="pb-3 pl-4 font-medium text-gray-400">Coverage</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((tactic) => {
+              const coveragePercent =
+                tactic.total > 0
+                  ? ((tactic.validated + tactic.partial) / tactic.total) * 100
+                  : 0;
+
+              return (
+                <tr
+                  key={tactic.tactic}
+                  className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
+                >
+                  <td className="py-3 pr-4">
+                    <span className="font-medium text-white capitalize">
+                      {tactic.tactic.replace(/-/g, " ")}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4 text-center text-gray-300">{tactic.total}</td>
+                  <td className="py-3 px-4 text-center">
+                    <span className={tactic.validated > 0 ? "text-green-400 font-medium" : "text-gray-600"}>
+                      {tactic.validated}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4 text-center">
+                    <span className={tactic.partial > 0 ? "text-yellow-400 font-medium" : "text-gray-600"}>
+                      {tactic.partial}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4 text-center">
+                    <span className={tactic.in_progress > 0 ? "text-blue-400 font-medium" : "text-gray-600"}>
+                      {tactic.in_progress}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4 text-center">
+                    <span className={tactic.not_covered > 0 ? "text-red-400 font-medium" : "text-gray-600"}>
+                      {tactic.not_covered}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4 text-center">
+                    <span className={tactic.not_evaluated > 0 ? "text-gray-400" : "text-gray-600"}>
+                      {tactic.not_evaluated}
+                    </span>
+                  </td>
+                  <td className="py-3 pl-4">
+                    <div className="flex items-center gap-2">
+                      <div className="h-2 w-24 overflow-hidden rounded-full bg-gray-700">
+                        <div
+                          className="h-full rounded-full bg-gradient-to-r from-green-500 to-green-400"
+                          style={{ width: `${coveragePercent}%` }}
+                        />
+                      </div>
+                      <span className="text-xs text-gray-400 w-12">
+                        {coveragePercent.toFixed(0)}%
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

frontend/src/components/TechniqueCell.tsx

@@ -0,0 +1,78 @@
+import { useNavigate } from "react-router-dom";
+import { AlertTriangle } from "lucide-react";
+import type { TechniqueStatus } from "../types/models";
+
+interface TechniqueCellProps {
+  mitreId: string;
+  name: string;
+  status: TechniqueStatus;
+  reviewRequired?: boolean;
+}
+
+const statusColors: Record<TechniqueStatus, { bg: string; border: string; text: string }> = {
+  validated: {
+    bg: "bg-green-900/40",
+    border: "border-green-500/50",
+    text: "text-green-400",
+  },
+  partial: {
+    bg: "bg-yellow-900/40",
+    border: "border-yellow-500/50",
+    text: "text-yellow-400",
+  },
+  in_progress: {
+    bg: "bg-blue-900/40",
+    border: "border-blue-500/50",
+    text: "text-blue-400",
+  },
+  not_covered: {
+    bg: "bg-red-900/40",
+    border: "border-red-500/50",
+    text: "text-red-400",
+  },
+  not_evaluated: {
+    bg: "bg-gray-800/40",
+    border: "border-gray-600/50",
+    text: "text-gray-400",
+  },
+  review_required: {
+    bg: "bg-yellow-900/40",
+    border: "border-yellow-500/50",
+    text: "text-yellow-400",
+  },
+};
+
+export default function TechniqueCell({
+  mitreId,
+  name,
+  status,
+  reviewRequired = false,
+}: TechniqueCellProps) {
+  const navigate = useNavigate();
+  const colors = statusColors[status] || statusColors.not_evaluated;
+
+  const handleClick = () => {
+    navigate(`/techniques/${mitreId}`);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`
+        relative w-full rounded-md border p-2 text-left transition-all
+        hover:scale-[1.02] hover:shadow-lg hover:z-10
+        ${colors.bg} ${colors.border}
+      `}
+    >
+      {reviewRequired && (
+        <div className="absolute -right-1 -top-1 rounded-full bg-orange-500 p-0.5">
+          <AlertTriangle className="h-3 w-3 text-white" />
+        </div>
+      )}
+      <p className={`text-xs font-semibold ${colors.text}`}>{mitreId}</p>
+      <p className="mt-0.5 truncate text-xs text-gray-300" title={name}>
+        {name}
+      </p>
+    </button>
+  );
+}

frontend/src/components/TestForm.tsx

@@ -0,0 +1,258 @@
+import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import { getTechniques, type TechniqueSummary } from "../api/techniques";
+import type { TestResult } from "../types/models";
+
+export interface TestFormData {
+  technique_id: string;
+  name: string;
+  description: string;
+  platform: string;
+  procedure_text: string;
+  tool_used: string;
+  result?: TestResult;
+}
+
+interface TestFormProps {
+  initialData?: Partial<TestFormData>;
+  preselectedTechniqueId?: string;
+  onSubmit: (data: TestFormData) => void;
+  isSubmitting: boolean;
+  showResult?: boolean;
+}
+
+const PLATFORMS = [
+  { value: "", label: "Select platform" },
+  { value: "windows", label: "Windows" },
+  { value: "linux", label: "Linux" },
+  { value: "macos", label: "macOS" },
+  { value: "cloud", label: "Cloud" },
+  { value: "network", label: "Network" },
+];
+
+const RESULTS: { value: TestResult | ""; label: string }[] = [
+  { value: "", label: "Select result (optional)" },
+  { value: "detected", label: "Detected" },
+  { value: "not_detected", label: "Not Detected" },
+  { value: "partially_detected", label: "Partially Detected" },
+];
+
+export default function TestForm({
+  initialData,
+  preselectedTechniqueId,
+  onSubmit,
+  isSubmitting,
+  showResult = false,
+}: TestFormProps) {
+  const [formData, setFormData] = useState<TestFormData>({
+    technique_id: preselectedTechniqueId || initialData?.technique_id || "",
+    name: initialData?.name || "",
+    description: initialData?.description || "",
+    platform: initialData?.platform || "",
+    procedure_text: initialData?.procedure_text || "",
+    tool_used: initialData?.tool_used || "",
+    result: initialData?.result,
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const { data: techniques, isLoading: techniquesLoading } = useQuery({
+    queryKey: ["techniques"],
+    queryFn: () => getTechniques(),
+  });
+
+  // Update technique_id when preselected changes
+  useEffect(() => {
+    if (preselectedTechniqueId) {
+      setFormData((prev) => ({ ...prev, technique_id: preselectedTechniqueId }));
+    }
+  }, [preselectedTechniqueId]);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors((prev) => ({ ...prev, [name]: "" }));
+    }
+  };
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.technique_id) {
+      newErrors.technique_id = "Technique is required";
+    }
+    if (!formData.name.trim()) {
+      newErrors.name = "Name is required";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (validate()) {
+      onSubmit({
+        ...formData,
+        result: formData.result || undefined,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {/* Technique Selector */}
+      <div>
+        <label htmlFor="technique_id" className="block text-sm font-medium text-gray-300">
+          Technique *
+        </label>
+        <select
+          id="technique_id"
+          name="technique_id"
+          value={formData.technique_id}
+          onChange={handleChange}
+          disabled={!!preselectedTechniqueId || techniquesLoading}
+          className={`mt-1 block w-full rounded-lg border bg-gray-800 px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500 ${
+            errors.technique_id ? "border-red-500" : "border-gray-700"
+          } ${preselectedTechniqueId ? "opacity-70" : ""}`}
+        >
+          <option value="">Select a technique</option>
+          {techniques?.map((tech: TechniqueSummary) => (
+            <option key={tech.id} value={tech.id}>
+              {tech.mitre_id} - {tech.name}
+            </option>
+          ))}
+        </select>
+        {errors.technique_id && (
+          <p className="mt-1 text-sm text-red-400">{errors.technique_id}</p>
+        )}
+      </div>
+
+      {/* Name */}
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium text-gray-300">
+          Name *
+        </label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+          placeholder="Enter test name"
+          className={`mt-1 block w-full rounded-lg border bg-gray-800 px-3 py-2 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 ${
+            errors.name ? "border-red-500" : "border-gray-700"
+          }`}
+        />
+        {errors.name && <p className="mt-1 text-sm text-red-400">{errors.name}</p>}
+      </div>
+
+      {/* Description */}
+      <div>
+        <label htmlFor="description" className="block text-sm font-medium text-gray-300">
+          Description
+        </label>
+        <textarea
+          id="description"
+          name="description"
+          value={formData.description}
+          onChange={handleChange}
+          rows={3}
+          placeholder="Describe the test objective and scope"
+          className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+        />
+      </div>
+
+      {/* Platform */}
+      <div>
+        <label htmlFor="platform" className="block text-sm font-medium text-gray-300">
+          Platform
+        </label>
+        <select
+          id="platform"
+          name="platform"
+          value={formData.platform}
+          onChange={handleChange}
+          className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+        >
+          {PLATFORMS.map((p) => (
+            <option key={p.value} value={p.value}>
+              {p.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Procedure */}
+      <div>
+        <label htmlFor="procedure_text" className="block text-sm font-medium text-gray-300">
+          Procedure
+        </label>
+        <textarea
+          id="procedure_text"
+          name="procedure_text"
+          value={formData.procedure_text}
+          onChange={handleChange}
+          rows={5}
+          placeholder="Step-by-step procedure for executing this test"
+          className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 font-mono text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+        />
+      </div>
+
+      {/* Tool Used */}
+      <div>
+        <label htmlFor="tool_used" className="block text-sm font-medium text-gray-300">
+          Tool Used
+        </label>
+        <input
+          type="text"
+          id="tool_used"
+          name="tool_used"
+          value={formData.tool_used}
+          onChange={handleChange}
+          placeholder="e.g., Atomic Red Team, Cobalt Strike, etc."
+          className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+        />
+      </div>
+
+      {/* Result (optional, for editing) */}
+      {showResult && (
+        <div>
+          <label htmlFor="result" className="block text-sm font-medium text-gray-300">
+            Result
+          </label>
+          <select
+            id="result"
+            name="result"
+            value={formData.result || ""}
+            onChange={handleChange}
+            className="mt-1 block w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500"
+          >
+            {RESULTS.map((r) => (
+              <option key={r.value} value={r.value}>
+                {r.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* Submit Button */}
+      <div className="flex justify-end gap-3 pt-4">
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="flex items-center gap-2 rounded-lg bg-cyan-600 px-6 py-2.5 font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
+        >
+          {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
+          {isSubmitting ? "Creating..." : "Create Test"}
+        </button>
+      </div>
+    </form>
+  );
+}

frontend/src/pages/DashboardPage.tsx

@@ -1,15 +1,134 @@
-import { Shield } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Shield,
+  CheckCircle,
+  AlertTriangle,
+  XCircle,
+  Clock,
+  HelpCircle,
+  Percent,
+  Loader2,
+  AlertCircle,
+} from "lucide-react";
+import { getCoverageSummary, getCoverageByTactic } from "../api/metrics";
+import CoverageSummaryCard from "../components/CoverageSummaryCard";
+import TacticCoverageChart from "../components/TacticCoverageChart";
 
 export default function DashboardPage() {
-  return (
-    <div className="space-y-4">
-      <h1 className="text-2xl font-bold text-white">Dashboard</h1>
-      <div className="flex items-center gap-3 rounded-xl border border-gray-800 bg-gray-900 p-6">
-        <Shield className="h-8 w-8 text-cyan-400" />
-        <p className="text-gray-300">
-          Coverage metrics will appear here.
+  const {
+    data: summary,
+    isLoading: summaryLoading,
+    error: summaryError,
+  } = useQuery({
+    queryKey: ["metrics", "summary"],
+    queryFn: getCoverageSummary,
+  });
+
+  const {
+    data: tactics,
+    isLoading: tacticsLoading,
+    error: tacticsError,
+  } = useQuery({
+    queryKey: ["metrics", "by-tactic"],
+    queryFn: getCoverageByTactic,
+  });
+
+  if (summaryLoading || tacticsLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+      </div>
+    );
+  }
+
+  if (summaryError || tacticsError) {
+    return (
+      <div className="flex h-64 flex-col items-center justify-center gap-2">
+        <AlertCircle className="h-10 w-10 text-red-400" />
+        <p className="text-red-400">Failed to load metrics</p>
+        <p className="text-sm text-gray-500">
+          {summaryError?.message || tacticsError?.message || "Unknown error"}
         </p>
       </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Dashboard</h1>
+          <p className="mt-1 text-sm text-gray-400">
+            MITRE ATT&CK coverage overview
+          </p>
+        </div>
+        {summary && (
+          <div className="flex items-center gap-2 rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-4 py-2">
+            <Percent className="h-5 w-5 text-cyan-400" />
+            <span className="text-lg font-bold text-cyan-400">
+              {summary.coverage_percentage.toFixed(1)}%
+            </span>
+            <span className="text-sm text-gray-400">Coverage</span>
+          </div>
+        )}
+      </div>
+
+      {/* Summary Cards */}
+      {summary && (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+          <CoverageSummaryCard
+            title="Total Techniques"
+            value={summary.total_techniques}
+            icon={<Shield className="h-6 w-6 text-cyan-400" />}
+            colorClass="text-cyan-400"
+            bgClass="bg-gray-900"
+          />
+          <CoverageSummaryCard
+            title="Validated"
+            value={summary.validated}
+            total={summary.total_techniques}
+            icon={<CheckCircle className="h-6 w-6 text-green-400" />}
+            colorClass="text-green-400"
+            bgClass="bg-green-950/20"
+          />
+          <CoverageSummaryCard
+            title="Partial"
+            value={summary.partial}
+            total={summary.total_techniques}
+            icon={<AlertTriangle className="h-6 w-6 text-yellow-400" />}
+            colorClass="text-yellow-400"
+            bgClass="bg-yellow-950/20"
+          />
+          <CoverageSummaryCard
+            title="In Progress"
+            value={summary.in_progress}
+            total={summary.total_techniques}
+            icon={<Clock className="h-6 w-6 text-blue-400" />}
+            colorClass="text-blue-400"
+            bgClass="bg-blue-950/20"
+          />
+          <CoverageSummaryCard
+            title="Not Covered"
+            value={summary.not_covered}
+            total={summary.total_techniques}
+            icon={<XCircle className="h-6 w-6 text-red-400" />}
+            colorClass="text-red-400"
+            bgClass="bg-red-950/20"
+          />
+          <CoverageSummaryCard
+            title="Not Evaluated"
+            value={summary.not_evaluated}
+            total={summary.total_techniques}
+            icon={<HelpCircle className="h-6 w-6 text-gray-400" />}
+            colorClass="text-gray-400"
+            bgClass="bg-gray-900"
+          />
+        </div>
+      )}
+
+      {/* Tactic Coverage Table */}
+      {tactics && <TacticCoverageChart data={tactics} />}
     </div>
   );
 }

frontend/src/pages/MatrixPage.tsx

@@ -0,0 +1,197 @@
+import { useState, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2, AlertCircle, Filter, X } from "lucide-react";
+import { getTechniques, type TechniqueSummary } from "../api/techniques";
+import AttackMatrix from "../components/AttackMatrix";
+import type { TechniqueStatus } from "../types/models";
+
+const STATUS_OPTIONS: { value: TechniqueStatus | "all"; label: string; color: string }[] = [
+  { value: "all", label: "All Statuses", color: "text-gray-400" },
+  { value: "validated", label: "Validated", color: "text-green-400" },
+  { value: "partial", label: "Partial", color: "text-yellow-400" },
+  { value: "in_progress", label: "In Progress", color: "text-blue-400" },
+  { value: "not_covered", label: "Not Covered", color: "text-red-400" },
+  { value: "not_evaluated", label: "Not Evaluated", color: "text-gray-400" },
+];
+
+const PLATFORM_OPTIONS = ["all", "windows", "linux", "macos", "cloud", "network"] as const;
+
+export default function MatrixPage() {
+  const [statusFilter, setStatusFilter] = useState<TechniqueStatus | "all">("all");
+  const [platformFilter, setPlatformFilter] = useState<string>("all");
+  const [tacticFilter, setTacticFilter] = useState<string>("all");
+
+  const {
+    data: techniques,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["techniques"],
+    queryFn: () => getTechniques(),
+  });
+
+  // Extract unique tactics from techniques
+  const availableTactics = useMemo(() => {
+    if (!techniques) return [];
+    const tactics = new Set<string>();
+    for (const tech of techniques) {
+      if (tech.tactic) {
+        tech.tactic.split(",").forEach((t) => tactics.add(t.trim().toLowerCase()));
+      }
+    }
+    return Array.from(tactics).sort();
+  }, [techniques]);
+
+  // Apply filters
+  const filteredTechniques = useMemo(() => {
+    if (!techniques) return [];
+
+    return techniques.filter((tech: TechniqueSummary) => {
+      // Status filter
+      if (statusFilter !== "all" && tech.status_global !== statusFilter) {
+        return false;
+      }
+
+      // Tactic filter
+      if (tacticFilter !== "all") {
+        const techTactics = tech.tactic?.split(",").map((t) => t.trim().toLowerCase()) || [];
+        if (!techTactics.includes(tacticFilter)) {
+          return false;
+        }
+      }
+
+      // Platform filter is handled client-side since we don't have platform in summary
+      // For now we show all - platform filtering would need the full technique data
+
+      return true;
+    });
+  }, [techniques, statusFilter, tacticFilter]);
+
+  const hasActiveFilters = statusFilter !== "all" || tacticFilter !== "all" || platformFilter !== "all";
+
+  const clearFilters = () => {
+    setStatusFilter("all");
+    setPlatformFilter("all");
+    setTacticFilter("all");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-64 flex-col items-center justify-center gap-2">
+        <AlertCircle className="h-10 w-10 text-red-400" />
+        <p className="text-red-400">Failed to load techniques</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-white">ATT&CK Matrix</h1>
+        <p className="mt-1 text-sm text-gray-400">
+          Interactive MITRE ATT&CK coverage matrix — click any technique for details
+        </p>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
+        <div className="flex items-center gap-2">
+          <Filter className="h-4 w-4 text-gray-400" />
+          <span className="text-sm font-medium text-gray-400">Filters:</span>
+        </div>
+
+        {/* Status filter */}
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value as TechniqueStatus | "all")}
+          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+        >
+          {STATUS_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+
+        {/* Tactic filter */}
+        <select
+          value={tacticFilter}
+          onChange={(e) => setTacticFilter(e.target.value)}
+          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+        >
+          <option value="all">All Tactics</option>
+          {availableTactics.map((tactic) => (
+            <option key={tactic} value={tactic}>
+              {tactic
+                .split("-")
+                .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                .join(" ")}
+            </option>
+          ))}
+        </select>
+
+        {/* Platform filter */}
+        <select
+          value={platformFilter}
+          onChange={(e) => setPlatformFilter(e.target.value)}
+          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+        >
+          {PLATFORM_OPTIONS.map((platform) => (
+            <option key={platform} value={platform}>
+              {platform === "all" ? "All Platforms" : platform.charAt(0).toUpperCase() + platform.slice(1)}
+            </option>
+          ))}
+        </select>
+
+        {hasActiveFilters && (
+          <button
+            onClick={clearFilters}
+            className="flex items-center gap-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-400 hover:border-red-500/50 hover:text-red-400"
+          >
+            <X className="h-3.5 w-3.5" />
+            Clear
+          </button>
+        )}
+
+        <div className="ml-auto text-sm text-gray-500">
+          Showing {filteredTechniques.length} of {techniques?.length || 0} techniques
+        </div>
+      </div>
+
+      {/* Matrix */}
+      <AttackMatrix techniques={filteredTechniques} />
+
+      {/* Legend */}
+      <div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
+        <span className="text-sm font-medium text-gray-400">Legend:</span>
+        {STATUS_OPTIONS.filter((s) => s.value !== "all").map((status) => (
+          <div key={status.value} className="flex items-center gap-2">
+            <div
+              className={`h-3 w-3 rounded ${
+                status.value === "validated"
+                  ? "bg-green-500"
+                  : status.value === "partial"
+                  ? "bg-yellow-500"
+                  : status.value === "in_progress"
+                  ? "bg-blue-500"
+                  : status.value === "not_covered"
+                  ? "bg-red-500"
+                  : "bg-gray-600"
+              }`}
+            />
+            <span className="text-xs text-gray-400">{status.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/SystemPage.tsx

@@ -1,8 +1,370 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Loader2,
+  AlertCircle,
+  RefreshCw,
+  Server,
+  Database,
+  HardDrive,
+  Clock,
+  CheckCircle,
+  XCircle,
+  Shield,
+  Search,
+} from "lucide-react";
+import {
+  triggerMitreSync,
+  triggerIntelScan,
+  getSchedulerStatus,
+  type SyncMitreResponse,
+  type IntelScanResponse,
+} from "../api/system";
+
 export default function SystemPage() {
+  const queryClient = useQueryClient();
+  const [syncResult, setSyncResult] = useState<SyncMitreResponse | null>(null);
+  const [intelResult, setIntelResult] = useState<IntelScanResponse | null>(null);
+
+  const {
+    data: schedulerStatus,
+    isLoading: statusLoading,
+    error: statusError,
+  } = useQuery({
+    queryKey: ["scheduler-status"],
+    queryFn: getSchedulerStatus,
+    refetchInterval: 30000, // Refresh every 30 seconds
+  });
+
+  const mitreSyncMutation = useMutation({
+    mutationFn: triggerMitreSync,
+    onSuccess: (data) => {
+      setSyncResult(data);
+      queryClient.invalidateQueries({ queryKey: ["techniques"] });
+      queryClient.invalidateQueries({ queryKey: ["metrics"] });
+    },
+  });
+
+  const intelScanMutation = useMutation({
+    mutationFn: triggerIntelScan,
+    onSuccess: (data) => {
+      setIntelResult(data);
+      queryClient.invalidateQueries({ queryKey: ["techniques"] });
+    },
+  });
+
+  const formatNextRun = (dateStr: string | null) => {
+    if (!dateStr) return "Not scheduled";
+    const date = new Date(dateStr);
+    return date.toLocaleString("en-US", {
+      dateStyle: "medium",
+      timeStyle: "short",
+    });
+  };
+
   return (
-    <div className="space-y-4">
-      <h1 className="text-2xl font-bold text-white">System</h1>
-      <p className="text-gray-400">System administration panel coming soon.</p>
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-white">System Administration</h1>
+        <p className="mt-1 text-sm text-gray-400">
+          Manage synchronization jobs and system status
+        </p>
+      </div>
+
+      {/* Actions Grid */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* MITRE Sync */}
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <div className="flex items-start gap-4">
+            <div className="rounded-lg bg-cyan-500/10 p-3">
+              <Shield className="h-6 w-6 text-cyan-400" />
+            </div>
+            <div className="flex-1">
+              <h2 className="text-lg font-semibold text-white">MITRE ATT&CK Sync</h2>
+              <p className="mt-1 text-sm text-gray-400">
+                Synchronize techniques from the MITRE ATT&CK framework via TAXII or GitHub fallback.
+              </p>
+
+              {/* Status */}
+              {schedulerStatus && (
+                <div className="mt-4 flex items-center gap-2 text-sm">
+                  <Clock className="h-4 w-4 text-gray-500" />
+                  <span className="text-gray-400">Next automatic sync:</span>
+                  <span className="text-gray-300">
+                    {formatNextRun(
+                      schedulerStatus.jobs.find((j) => j.id === "mitre_sync")?.next_run_time || null
+                    )}
+                  </span>
+                </div>
+              )}
+
+              {/* Result */}
+              {syncResult && (
+                <div className="mt-4 rounded-lg border border-green-500/30 bg-green-900/20 p-3">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-green-400" />
+                    <span className="text-sm font-medium text-green-400">Sync Complete</span>
+                  </div>
+                  <div className="mt-2 grid grid-cols-2 gap-2 text-sm">
+                    <div>
+                      <span className="text-gray-400">New techniques:</span>
+                      <span className="ml-2 font-medium text-white">{syncResult.new}</span>
+                    </div>
+                    <div>
+                      <span className="text-gray-400">Updated:</span>
+                      <span className="ml-2 font-medium text-white">{syncResult.updated}</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {mitreSyncMutation.isError && (
+                <div className="mt-4 rounded-lg border border-red-500/30 bg-red-900/20 p-3">
+                  <div className="flex items-center gap-2">
+                    <XCircle className="h-4 w-4 text-red-400" />
+                    <span className="text-sm text-red-400">
+                      Sync failed: {(mitreSyncMutation.error as Error)?.message}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              <button
+                onClick={() => mitreSyncMutation.mutate()}
+                disabled={mitreSyncMutation.isPending}
+                className="mt-4 flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
+              >
+                {mitreSyncMutation.isPending ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+                {mitreSyncMutation.isPending ? "Syncing..." : "Sync Now"}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Intel Scan */}
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <div className="flex items-start gap-4">
+            <div className="rounded-lg bg-purple-500/10 p-3">
+              <Search className="h-6 w-6 text-purple-400" />
+            </div>
+            <div className="flex-1">
+              <h2 className="text-lg font-semibold text-white">Threat Intel Scan</h2>
+              <p className="mt-1 text-sm text-gray-400">
+                Scan RSS feeds and security blogs for new threat intelligence related to techniques.
+              </p>
+
+              {/* Status */}
+              {schedulerStatus && (
+                <div className="mt-4 flex items-center gap-2 text-sm">
+                  <Clock className="h-4 w-4 text-gray-500" />
+                  <span className="text-gray-400">Next automatic scan:</span>
+                  <span className="text-gray-300">
+                    {formatNextRun(
+                      schedulerStatus.jobs.find((j) => j.id === "intel_scan")?.next_run_time || null
+                    )}
+                  </span>
+                </div>
+              )}
+
+              {/* Result */}
+              {intelResult && (
+                <div className="mt-4 rounded-lg border border-green-500/30 bg-green-900/20 p-3">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="h-4 w-4 text-green-400" />
+                    <span className="text-sm font-medium text-green-400">Scan Complete</span>
+                  </div>
+                  <div className="mt-2 text-sm">
+                    <span className="text-gray-400">New intel items:</span>
+                    <span className="ml-2 font-medium text-white">{intelResult.new_items}</span>
+                  </div>
+                </div>
+              )}
+
+              {intelScanMutation.isError && (
+                <div className="mt-4 rounded-lg border border-red-500/30 bg-red-900/20 p-3">
+                  <div className="flex items-center gap-2">
+                    <XCircle className="h-4 w-4 text-red-400" />
+                    <span className="text-sm text-red-400">
+                      Scan failed: {(intelScanMutation.error as Error)?.message}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              <button
+                onClick={() => intelScanMutation.mutate()}
+                disabled={intelScanMutation.isPending}
+                className="mt-4 flex items-center gap-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-500 disabled:opacity-50 transition-colors"
+              >
+                {intelScanMutation.isPending ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Search className="h-4 w-4" />
+                )}
+                {intelScanMutation.isPending ? "Scanning..." : "Scan Now"}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* System Information */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <h2 className="mb-4 text-lg font-semibold text-white">System Information</h2>
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {/* Backend Status */}
+          <div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
+            <div className="flex items-center gap-3">
+              <Server className="h-5 w-5 text-green-400" />
+              <div>
+                <p className="text-xs font-medium uppercase text-gray-500">Backend</p>
+                <p className="text-sm font-medium text-green-400">Online</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Database Status */}
+          <div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
+            <div className="flex items-center gap-3">
+              <Database className="h-5 w-5 text-green-400" />
+              <div>
+                <p className="text-xs font-medium uppercase text-gray-500">PostgreSQL</p>
+                <p className="text-sm font-medium text-green-400">Connected</p>
+              </div>
+            </div>
+          </div>
+
+          {/* MinIO Status */}
+          <div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
+            <div className="flex items-center gap-3">
+              <HardDrive className="h-5 w-5 text-green-400" />
+              <div>
+                <p className="text-xs font-medium uppercase text-gray-500">MinIO Storage</p>
+                <p className="text-sm font-medium text-green-400">Available</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Scheduler Status */}
+          <div className="rounded-lg border border-gray-800 bg-gray-800/50 p-4">
+            <div className="flex items-center gap-3">
+              <Clock
+                className={`h-5 w-5 ${
+                  schedulerStatus?.running ? "text-green-400" : "text-yellow-400"
+                }`}
+              />
+              <div>
+                <p className="text-xs font-medium uppercase text-gray-500">Scheduler</p>
+                <p
+                  className={`text-sm font-medium ${
+                    schedulerStatus?.running ? "text-green-400" : "text-yellow-400"
+                  }`}
+                >
+                  {statusLoading
+                    ? "Checking..."
+                    : schedulerStatus?.running
+                    ? "Running"
+                    : "Stopped"}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Scheduled Jobs */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <h2 className="mb-4 text-lg font-semibold text-white">Scheduled Jobs</h2>
+        {statusLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="h-6 w-6 animate-spin text-cyan-400" />
+          </div>
+        ) : statusError ? (
+          <div className="flex items-center justify-center gap-2 py-8 text-red-400">
+            <AlertCircle className="h-5 w-5" />
+            <span>Failed to load scheduler status</span>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-gray-800">
+                  <th className="pb-3 pr-4 font-medium text-gray-400">Job ID</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Name</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Next Run</th>
+                  <th className="pb-3 pl-4 font-medium text-gray-400">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {schedulerStatus?.jobs.map((job) => (
+                  <tr
+                    key={job.id}
+                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
+                  >
+                    <td className="py-3 pr-4">
+                      <code className="rounded bg-gray-800 px-2 py-0.5 text-xs text-cyan-400">
+                        {job.id}
+                      </code>
+                    </td>
+                    <td className="py-3 px-4 text-gray-200">{job.name}</td>
+                    <td className="py-3 px-4 text-gray-400">
+                      {formatNextRun(job.next_run_time)}
+                    </td>
+                    <td className="py-3 pl-4">
+                      {job.next_run_time ? (
+                        <span className="inline-flex items-center gap-1 text-green-400">
+                          <CheckCircle className="h-3.5 w-3.5" />
+                          Scheduled
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center gap-1 text-yellow-400">
+                          <Clock className="h-3.5 w-3.5" />
+                          Pending
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+                {(!schedulerStatus?.jobs || schedulerStatus.jobs.length === 0) && (
+                  <tr>
+                    <td colSpan={4} className="py-8 text-center text-gray-400">
+                      No scheduled jobs found
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Version Info */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <h2 className="mb-4 text-lg font-semibold text-white">Version Information</h2>
+        <dl className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <div>
+            <dt className="text-xs font-medium uppercase text-gray-500">Platform</dt>
+            <dd className="mt-1 text-sm text-gray-300">Aegis v0.1.0</dd>
+          </div>
+          <div>
+            <dt className="text-xs font-medium uppercase text-gray-500">Backend</dt>
+            <dd className="mt-1 text-sm text-gray-300">FastAPI + Python 3.11</dd>
+          </div>
+          <div>
+            <dt className="text-xs font-medium uppercase text-gray-500">Frontend</dt>
+            <dd className="mt-1 text-sm text-gray-300">React 19 + TypeScript</dd>
+          </div>
+          <div>
+            <dt className="text-xs font-medium uppercase text-gray-500">Database</dt>
+            <dd className="mt-1 text-sm text-gray-300">PostgreSQL 15</dd>
+          </div>
+        </dl>
+      </div>
     </div>
   );
 }

frontend/src/pages/TechniqueDetailPage.tsx

@@ -0,0 +1,363 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Loader2,
+  AlertCircle,
+  ArrowLeft,
+  CheckCircle,
+  Clock,
+  Shield,
+  FileText,
+  ExternalLink,
+  Plus,
+  Check,
+  X,
+  AlertTriangle,
+} from "lucide-react";
+import { getTechniqueByMitreId, markTechniqueReviewed } from "../api/techniques";
+import { useAuth } from "../context/AuthContext";
+import type { TechniqueStatus, TestState, TestResult } from "../types/models";
+
+const statusBadgeColors: Record<TechniqueStatus, string> = {
+  validated: "bg-green-900/50 text-green-400 border-green-500/30",
+  partial: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
+  in_progress: "bg-blue-900/50 text-blue-400 border-blue-500/30",
+  not_covered: "bg-red-900/50 text-red-400 border-red-500/30",
+  not_evaluated: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+  review_required: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+};
+
+const testStateBadgeColors: Record<TestState, string> = {
+  draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+  in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
+  validated: "bg-green-900/50 text-green-400 border-green-500/30",
+  rejected: "bg-red-900/50 text-red-400 border-red-500/30",
+};
+
+const testResultBadgeColors: Record<TestResult, string> = {
+  detected: "bg-green-900/50 text-green-400 border-green-500/30",
+  not_detected: "bg-red-900/50 text-red-400 border-red-500/30",
+  partially_detected: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
+};
+
+export default function TechniqueDetailPage() {
+  const { mitreId } = useParams<{ mitreId: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { user } = useAuth();
+
+  const canReview =
+    user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
+
+  const {
+    data: technique,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["technique", mitreId],
+    queryFn: () => getTechniqueByMitreId(mitreId!),
+    enabled: !!mitreId,
+  });
+
+  const reviewMutation = useMutation({
+    mutationFn: () => markTechniqueReviewed(mitreId!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["technique", mitreId] });
+      queryClient.invalidateQueries({ queryKey: ["techniques"] });
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+      </div>
+    );
+  }
+
+  if (error || !technique) {
+    return (
+      <div className="flex h-64 flex-col items-center justify-center gap-2">
+        <AlertCircle className="h-10 w-10 text-red-400" />
+        <p className="text-red-400">Failed to load technique</p>
+        <button
+          onClick={() => navigate("/techniques")}
+          className="mt-2 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to techniques
+        </button>
+      </div>
+    );
+  }
+
+  const formatDate = (dateStr: string | null) => {
+    if (!dateStr) return "—";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Back button */}
+      <button
+        onClick={() => navigate("/techniques")}
+        className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to techniques
+      </button>
+
+      {/* Header */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <div className="flex items-start justify-between">
+          <div className="flex items-start gap-4">
+            <div className="rounded-lg bg-cyan-500/10 p-3">
+              <Shield className="h-8 w-8 text-cyan-400" />
+            </div>
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-bold text-white">{technique.mitre_id}</h1>
+                <span
+                  className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
+                    statusBadgeColors[technique.status_global]
+                  }`}
+                >
+                  {technique.status_global.replace(/_/g, " ")}
+                </span>
+                {technique.review_required && (
+                  <span className="inline-flex items-center gap-1 rounded-full border border-orange-500/30 bg-orange-900/50 px-2.5 py-0.5 text-xs font-medium text-orange-400">
+                    <AlertTriangle className="h-3 w-3" />
+                    Review Required
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-lg text-gray-300">{technique.name}</p>
+            </div>
+          </div>
+
+          {canReview && technique.review_required && (
+            <button
+              onClick={() => reviewMutation.mutate()}
+              disabled={reviewMutation.isPending}
+              className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
+            >
+              {reviewMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <CheckCircle className="h-4 w-4" />
+              )}
+              Mark as Reviewed
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Info Section */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Description */}
+        <div className="lg:col-span-2 rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-3 text-lg font-semibold text-white">Description</h2>
+          <p className="text-sm text-gray-400 leading-relaxed whitespace-pre-wrap">
+            {technique.description || "No description available."}
+          </p>
+        </div>
+
+        {/* Metadata */}
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-4 text-lg font-semibold text-white">Details</h2>
+          <dl className="space-y-4">
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Tactic</dt>
+              <dd className="mt-1 text-sm text-gray-300 capitalize">
+                {technique.tactic?.replace(/-/g, " ") || "—"}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Platforms</dt>
+              <dd className="mt-1 flex flex-wrap gap-1">
+                {technique.platforms && technique.platforms.length > 0 ? (
+                  technique.platforms.map((p) => (
+                    <span
+                      key={p}
+                      className="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-300"
+                    >
+                      {p}
+                    </span>
+                  ))
+                ) : (
+                  <span className="text-sm text-gray-500">—</span>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Subtechnique</dt>
+              <dd className="mt-1 text-sm text-gray-300">
+                {technique.is_subtechnique ? `Yes (${technique.parent_mitre_id})` : "No"}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">Last Review</dt>
+              <dd className="mt-1 text-sm text-gray-300">
+                {formatDate(technique.last_review_date)}
+              </dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase text-gray-500">MITRE Version</dt>
+              <dd className="mt-1 text-sm text-gray-300">{technique.mitre_version || "—"}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      {/* Tests Section */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-white">Associated Tests</h2>
+          <button
+            onClick={() => navigate(`/tests/new?technique=${technique.id}`)}
+            className="flex items-center gap-1.5 rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-3 py-1.5 text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
+          >
+            <Plus className="h-4 w-4" />
+            New Test
+          </button>
+        </div>
+
+        {technique.tests && technique.tests.length > 0 ? (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-gray-800">
+                  <th className="pb-3 pr-4 font-medium text-gray-400">Name</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">State</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Result</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Platform</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Created</th>
+                  <th className="pb-3 pl-4 font-medium text-gray-400">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {technique.tests.map((test) => (
+                  <tr
+                    key={test.id}
+                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
+                  >
+                    <td className="py-3 pr-4">
+                      <span className="font-medium text-gray-200">{test.name}</span>
+                    </td>
+                    <td className="py-3 px-4">
+                      <span
+                        className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                          testStateBadgeColors[test.state]
+                        }`}
+                      >
+                        {test.state.replace(/_/g, " ")}
+                      </span>
+                    </td>
+                    <td className="py-3 px-4">
+                      {test.result ? (
+                        <span
+                          className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                            testResultBadgeColors[test.result]
+                          }`}
+                        >
+                          {test.result.replace(/_/g, " ")}
+                        </span>
+                      ) : (
+                        <span className="text-gray-600">—</span>
+                      )}
+                    </td>
+                    <td className="py-3 px-4">
+                      <span className="text-gray-400 capitalize">{test.platform || "—"}</span>
+                    </td>
+                    <td className="py-3 px-4">
+                      <span className="text-gray-400">{formatDate(test.created_at)}</span>
+                    </td>
+                    <td className="py-3 pl-4">
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => navigate(`/tests/${test.id}`)}
+                          className="rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-cyan-400"
+                          title="View Details"
+                        >
+                          <FileText className="h-4 w-4" />
+                        </button>
+                        {canReview && test.state === "draft" && (
+                          <>
+                            <button
+                              onClick={() => navigate(`/tests/${test.id}/validate`)}
+                              className="rounded p-1 text-gray-400 hover:bg-green-900/50 hover:text-green-400"
+                              title="Validate"
+                            >
+                              <Check className="h-4 w-4" />
+                            </button>
+                            <button
+                              onClick={() => navigate(`/tests/${test.id}/reject`)}
+                              className="rounded p-1 text-gray-400 hover:bg-red-900/50 hover:text-red-400"
+                              title="Reject"
+                            >
+                              <X className="h-4 w-4" />
+                            </button>
+                          </>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-8 text-gray-400">
+            <Clock className="mb-2 h-8 w-8" />
+            <p>No tests have been created for this technique yet.</p>
+            <button
+              onClick={() => navigate(`/tests/new?technique=${technique.id}`)}
+              className="mt-3 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
+            >
+              <Plus className="h-4 w-4" />
+              Create the first test
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Intel Items Section */}
+      {technique.intel_items && technique.intel_items.length > 0 && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-4 text-lg font-semibold text-white">Threat Intelligence</h2>
+          <div className="space-y-3">
+            {technique.intel_items.map((intel) => (
+              <div
+                key={intel.id}
+                className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/30 p-4"
+              >
+                <div>
+                  <p className="font-medium text-gray-200">{intel.title || intel.url}</p>
+                  <p className="mt-0.5 text-xs text-gray-500">
+                    {intel.source && <span>{intel.source} • </span>}
+                    Detected {formatDate(intel.detected_at)}
+                  </p>
+                </div>
+                <a
+                  href={intel.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 text-sm text-cyan-400 hover:underline"
+                >
+                  View
+                  <ExternalLink className="h-3.5 w-3.5" />
+                </a>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/TechniquesPage.tsx

@@ -1,8 +1,280 @@
+import { useState, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2, AlertCircle, Filter, X, Grid3X3, List } from "lucide-react";
+import { getTechniques, type TechniqueSummary } from "../api/techniques";
+import AttackMatrix from "../components/AttackMatrix";
+import type { TechniqueStatus } from "../types/models";
+import { useNavigate } from "react-router-dom";
+
+const STATUS_OPTIONS: { value: TechniqueStatus | "all"; label: string; color: string }[] = [
+  { value: "all", label: "All Statuses", color: "text-gray-400" },
+  { value: "validated", label: "Validated", color: "text-green-400" },
+  { value: "partial", label: "Partial", color: "text-yellow-400" },
+  { value: "in_progress", label: "In Progress", color: "text-blue-400" },
+  { value: "not_covered", label: "Not Covered", color: "text-red-400" },
+  { value: "not_evaluated", label: "Not Evaluated", color: "text-gray-400" },
+];
+
+const PLATFORM_OPTIONS = ["all", "windows", "linux", "macos", "cloud", "network"] as const;
+
+const statusBadgeColors: Record<TechniqueStatus, string> = {
+  validated: "bg-green-900/50 text-green-400 border-green-500/30",
+  partial: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
+  in_progress: "bg-blue-900/50 text-blue-400 border-blue-500/30",
+  not_covered: "bg-red-900/50 text-red-400 border-red-500/30",
+  not_evaluated: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+  review_required: "bg-orange-900/50 text-orange-400 border-orange-500/30",
+};
+
 export default function TechniquesPage() {
+  const navigate = useNavigate();
+  const [viewMode, setViewMode] = useState<"matrix" | "list">("matrix");
+  const [statusFilter, setStatusFilter] = useState<TechniqueStatus | "all">("all");
+  const [platformFilter, setPlatformFilter] = useState<string>("all");
+  const [tacticFilter, setTacticFilter] = useState<string>("all");
+
+  const {
+    data: techniques,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["techniques"],
+    queryFn: () => getTechniques(),
+  });
+
+  // Extract unique tactics from techniques
+  const availableTactics = useMemo(() => {
+    if (!techniques) return [];
+    const tactics = new Set<string>();
+    for (const tech of techniques) {
+      if (tech.tactic) {
+        tech.tactic.split(",").forEach((t) => tactics.add(t.trim().toLowerCase()));
+      }
+    }
+    return Array.from(tactics).sort();
+  }, [techniques]);
+
+  // Apply filters
+  const filteredTechniques = useMemo(() => {
+    if (!techniques) return [];
+
+    return techniques.filter((tech: TechniqueSummary) => {
+      // Status filter
+      if (statusFilter !== "all" && tech.status_global !== statusFilter) {
+        return false;
+      }
+
+      // Tactic filter
+      if (tacticFilter !== "all") {
+        const techTactics = tech.tactic?.split(",").map((t) => t.trim().toLowerCase()) || [];
+        if (!techTactics.includes(tacticFilter)) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }, [techniques, statusFilter, tacticFilter]);
+
+  const hasActiveFilters = statusFilter !== "all" || tacticFilter !== "all" || platformFilter !== "all";
+
+  const clearFilters = () => {
+    setStatusFilter("all");
+    setPlatformFilter("all");
+    setTacticFilter("all");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-64 flex-col items-center justify-center gap-2">
+        <AlertCircle className="h-10 w-10 text-red-400" />
+        <p className="text-red-400">Failed to load techniques</p>
+      </div>
+    );
+  }
+
   return (
-    <div className="space-y-4">
-      <h1 className="text-2xl font-bold text-white">Techniques</h1>
-      <p className="text-gray-400">MITRE ATT&CK technique listing coming soon.</p>
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">ATT&CK Techniques</h1>
+          <p className="mt-1 text-sm text-gray-400">
+            MITRE ATT&CK coverage matrix — click any technique for details
+          </p>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 p-1">
+          <button
+            onClick={() => setViewMode("matrix")}
+            className={`flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors ${
+              viewMode === "matrix"
+                ? "bg-cyan-500/20 text-cyan-400"
+                : "text-gray-400 hover:text-gray-200"
+            }`}
+          >
+            <Grid3X3 className="h-4 w-4" />
+            Matrix
+          </button>
+          <button
+            onClick={() => setViewMode("list")}
+            className={`flex items-center gap-1.5 rounded px-3 py-1.5 text-sm transition-colors ${
+              viewMode === "list"
+                ? "bg-cyan-500/20 text-cyan-400"
+                : "text-gray-400 hover:text-gray-200"
+            }`}
+          >
+            <List className="h-4 w-4" />
+            List
+          </button>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
+        <div className="flex items-center gap-2">
+          <Filter className="h-4 w-4 text-gray-400" />
+          <span className="text-sm font-medium text-gray-400">Filters:</span>
+        </div>
+
+        {/* Status filter */}
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value as TechniqueStatus | "all")}
+          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+        >
+          {STATUS_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+
+        {/* Tactic filter */}
+        <select
+          value={tacticFilter}
+          onChange={(e) => setTacticFilter(e.target.value)}
+          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+        >
+          <option value="all">All Tactics</option>
+          {availableTactics.map((tactic) => (
+            <option key={tactic} value={tactic}>
+              {tactic
+                .split("-")
+                .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                .join(" ")}
+            </option>
+          ))}
+        </select>
+
+        {/* Platform filter */}
+        <select
+          value={platformFilter}
+          onChange={(e) => setPlatformFilter(e.target.value)}
+          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+        >
+          {PLATFORM_OPTIONS.map((platform) => (
+            <option key={platform} value={platform}>
+              {platform === "all" ? "All Platforms" : platform.charAt(0).toUpperCase() + platform.slice(1)}
+            </option>
+          ))}
+        </select>
+
+        {hasActiveFilters && (
+          <button
+            onClick={clearFilters}
+            className="flex items-center gap-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-400 hover:border-red-500/50 hover:text-red-400"
+          >
+            <X className="h-3.5 w-3.5" />
+            Clear
+          </button>
+        )}
+
+        <div className="ml-auto text-sm text-gray-500">
+          Showing {filteredTechniques.length} of {techniques?.length || 0} techniques
+        </div>
+      </div>
+
+      {/* Matrix or List View */}
+      {viewMode === "matrix" ? (
+        <AttackMatrix techniques={filteredTechniques} />
+      ) : (
+        <div className="rounded-xl border border-gray-800 bg-gray-900">
+          <table className="w-full text-left text-sm">
+            <thead>
+              <tr className="border-b border-gray-800">
+                <th className="px-4 py-3 font-medium text-gray-400">MITRE ID</th>
+                <th className="px-4 py-3 font-medium text-gray-400">Name</th>
+                <th className="px-4 py-3 font-medium text-gray-400">Tactic</th>
+                <th className="px-4 py-3 font-medium text-gray-400">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredTechniques.map((tech) => (
+                <tr
+                  key={tech.id}
+                  onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
+                  className="cursor-pointer border-b border-gray-800/50 hover:bg-gray-800/50 transition-colors"
+                >
+                  <td className="px-4 py-3">
+                    <span className="font-mono text-cyan-400">{tech.mitre_id}</span>
+                  </td>
+                  <td className="px-4 py-3 text-gray-200">{tech.name}</td>
+                  <td className="px-4 py-3">
+                    <span className="text-gray-400 capitalize">
+                      {tech.tactic?.replace(/-/g, " ") || "—"}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                        statusBadgeColors[tech.status_global]
+                      }`}
+                    >
+                      {tech.status_global.replace(/_/g, " ")}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {filteredTechniques.length === 0 && (
+            <div className="p-8 text-center text-gray-400">
+              No techniques found matching your filters
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Legend */}
+      <div className="flex flex-wrap items-center gap-4 rounded-xl border border-gray-800 bg-gray-900 p-4">
+        <span className="text-sm font-medium text-gray-400">Legend:</span>
+        {STATUS_OPTIONS.filter((s) => s.value !== "all").map((status) => (
+          <div key={status.value} className="flex items-center gap-2">
+            <div
+              className={`h-3 w-3 rounded ${
+                status.value === "validated"
+                  ? "bg-green-500"
+                  : status.value === "partial"
+                  ? "bg-yellow-500"
+                  : status.value === "in_progress"
+                  ? "bg-blue-500"
+                  : status.value === "not_covered"
+                  ? "bg-red-500"
+                  : "bg-gray-600"
+              }`}
+            />
+            <span className="text-xs text-gray-400">{status.label}</span>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

frontend/src/pages/TestCreatePage.tsx

@@ -0,0 +1,109 @@
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
+import { ArrowLeft, FlaskConical } from "lucide-react";
+import TestForm, { type TestFormData } from "../components/TestForm";
+import { createTest } from "../api/tests";
+import { getTechniqueByMitreId } from "../api/techniques";
+
+export default function TestCreatePage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [searchParams] = useSearchParams();
+  
+  // Get technique ID from URL query param (UUID format)
+  const techniqueId = searchParams.get("technique");
+
+  // If we have a technique ID, try to get its mitre_id for the back link
+  const { data: technique } = useQuery({
+    queryKey: ["techniqueById", techniqueId],
+    queryFn: async () => {
+      // We need to find the mitre_id from the technique list
+      // This is a workaround since we get UUID but need mitre_id
+      const response = await fetch(`http://localhost:8000/api/v1/techniques`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+      const techniques = await response.json();
+      return techniques.find((t: { id: string }) => t.id === techniqueId);
+    },
+    enabled: !!techniqueId,
+  });
+
+  const createMutation = useMutation({
+    mutationFn: createTest,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["techniques"] });
+      queryClient.invalidateQueries({ queryKey: ["technique"] });
+      // Navigate back to the technique detail if we came from there
+      if (technique?.mitre_id) {
+        navigate(`/techniques/${technique.mitre_id}`);
+      } else {
+        navigate("/tests");
+      }
+    },
+  });
+
+  const handleSubmit = (data: TestFormData) => {
+    createMutation.mutate({
+      technique_id: data.technique_id,
+      name: data.name,
+      description: data.description || undefined,
+      platform: data.platform || undefined,
+      procedure_text: data.procedure_text || undefined,
+      tool_used: data.tool_used || undefined,
+    });
+  };
+
+  const handleBack = () => {
+    if (technique?.mitre_id) {
+      navigate(`/techniques/${technique.mitre_id}`);
+    } else {
+      navigate("/tests");
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Back button */}
+      <button
+        onClick={handleBack}
+        className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        {technique ? `Back to ${technique.mitre_id}` : "Back to tests"}
+      </button>
+
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <div className="rounded-lg bg-cyan-500/10 p-3">
+          <FlaskConical className="h-8 w-8 text-cyan-400" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-white">Create New Test</h1>
+          <p className="mt-1 text-sm text-gray-400">
+            Document a security test for technique validation
+          </p>
+        </div>
+      </div>
+
+      {/* Error display */}
+      {createMutation.isError && (
+        <div className="rounded-lg border border-red-500/30 bg-red-900/20 p-4">
+          <p className="text-sm text-red-400">
+            Failed to create test: {(createMutation.error as Error)?.message || "Unknown error"}
+          </p>
+        </div>
+      )}
+
+      {/* Form */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <TestForm
+          preselectedTechniqueId={techniqueId || undefined}
+          onSubmit={handleSubmit}
+          isSubmitting={createMutation.isPending}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/pages/TestDetailPage.tsx

@@ -0,0 +1,355 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Loader2,
+  AlertCircle,
+  ArrowLeft,
+  FlaskConical,
+  CheckCircle,
+  XCircle,
+  Clock,
+  FileText,
+} from "lucide-react";
+import { getTestById, validateTest, rejectTest } from "../api/tests";
+import { uploadEvidence, getEvidence } from "../api/evidence";
+import EvidenceUpload from "../components/EvidenceUpload";
+import EvidenceList from "../components/EvidenceList";
+import { useAuth } from "../context/AuthContext";
+import type { TestState, TestResult } from "../types/models";
+import { useState } from "react";
+
+const testStateBadgeColors: Record<TestState, string> = {
+  draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+  in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
+  validated: "bg-green-900/50 text-green-400 border-green-500/30",
+  rejected: "bg-red-900/50 text-red-400 border-red-500/30",
+};
+
+const testResultBadgeColors: Record<TestResult, string> = {
+  detected: "bg-green-900/50 text-green-400 border-green-500/30",
+  not_detected: "bg-red-900/50 text-red-400 border-red-500/30",
+  partially_detected: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
+};
+
+const RESULTS: { value: TestResult; label: string }[] = [
+  { value: "detected", label: "Detected" },
+  { value: "not_detected", label: "Not Detected" },
+  { value: "partially_detected", label: "Partially Detected" },
+];
+
+export default function TestDetailPage() {
+  const { testId } = useParams<{ testId: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { user } = useAuth();
+
+  const [showValidateModal, setShowValidateModal] = useState(false);
+  const [selectedResult, setSelectedResult] = useState<TestResult>("detected");
+
+  const canValidate =
+    user?.role === "admin" || user?.role === "red_lead" || user?.role === "blue_lead";
+
+  const {
+    data: test,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["test", testId],
+    queryFn: () => getTestById(testId!),
+    enabled: !!testId,
+  });
+
+  const uploadMutation = useMutation({
+    mutationFn: (file: File) => uploadEvidence(testId!, file),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["test", testId] });
+    },
+  });
+
+  const validateMutation = useMutation({
+    mutationFn: () => validateTest(testId!, { result: selectedResult }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["test", testId] });
+      queryClient.invalidateQueries({ queryKey: ["techniques"] });
+      setShowValidateModal(false);
+    },
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: () => rejectTest(testId!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["test", testId] });
+    },
+  });
+
+  const handleDownload = async (evidenceId: string) => {
+    try {
+      const evidence = await getEvidence(evidenceId);
+      if (evidence.download_url) {
+        window.open(evidence.download_url, "_blank");
+      }
+    } catch (err) {
+      console.error("Failed to get download URL:", err);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+      </div>
+    );
+  }
+
+  if (error || !test) {
+    return (
+      <div className="flex h-64 flex-col items-center justify-center gap-2">
+        <AlertCircle className="h-10 w-10 text-red-400" />
+        <p className="text-red-400">Failed to load test</p>
+        <button
+          onClick={() => navigate("/tests")}
+          className="mt-2 flex items-center gap-1 text-sm text-cyan-400 hover:underline"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to tests
+        </button>
+      </div>
+    );
+  }
+
+  const formatDate = (dateStr: string | null) => {
+    if (!dateStr) return "—";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const canEdit = test.state === "draft" || test.state === "rejected";
+
+  return (
+    <div className="space-y-6">
+      {/* Back button */}
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center gap-1 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back
+      </button>
+
+      {/* Header */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <div className="flex items-start justify-between">
+          <div className="flex items-start gap-4">
+            <div className="rounded-lg bg-cyan-500/10 p-3">
+              <FlaskConical className="h-8 w-8 text-cyan-400" />
+            </div>
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl font-bold text-white">{test.name}</h1>
+                <span
+                  className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
+                    testStateBadgeColors[test.state]
+                  }`}
+                >
+                  {test.state.replace(/_/g, " ")}
+                </span>
+                {test.result && (
+                  <span
+                    className={`inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium ${
+                      testResultBadgeColors[test.result]
+                    }`}
+                  >
+                    {test.result.replace(/_/g, " ")}
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-sm text-gray-400">
+                Created {formatDate(test.created_at)}
+              </p>
+            </div>
+          </div>
+
+          {/* Actions */}
+          {canValidate && canEdit && (
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setShowValidateModal(true)}
+                className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-500 transition-colors"
+              >
+                <CheckCircle className="h-4 w-4" />
+                Validate
+              </button>
+              <button
+                onClick={() => rejectMutation.mutate()}
+                disabled={rejectMutation.isPending}
+                className="flex items-center gap-1.5 rounded-lg border border-red-500/30 bg-red-900/20 px-4 py-2 text-sm font-medium text-red-400 hover:bg-red-900/40 transition-colors"
+              >
+                {rejectMutation.isPending ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <XCircle className="h-4 w-4" />
+                )}
+                Reject
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Content Grid */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Main Content */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Description */}
+          <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+            <h2 className="mb-3 text-lg font-semibold text-white">Description</h2>
+            <p className="text-sm text-gray-400 leading-relaxed">
+              {test.description || "No description provided."}
+            </p>
+          </div>
+
+          {/* Procedure */}
+          <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+            <h2 className="mb-3 text-lg font-semibold text-white">Procedure</h2>
+            {test.procedure_text ? (
+              <pre className="whitespace-pre-wrap rounded-lg bg-gray-800 p-4 font-mono text-sm text-gray-300">
+                {test.procedure_text}
+              </pre>
+            ) : (
+              <p className="text-sm text-gray-500">No procedure documented.</p>
+            )}
+          </div>
+
+          {/* Evidence Section */}
+          <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+            <h2 className="mb-4 text-lg font-semibold text-white">Evidence</h2>
+            
+            {/* Upload */}
+            <EvidenceUpload
+              onUpload={async (file) => {
+                await uploadMutation.mutateAsync(file);
+              }}
+              isUploading={uploadMutation.isPending}
+            />
+
+            {uploadMutation.isError && (
+              <div className="mt-3 rounded-lg border border-red-500/30 bg-red-900/20 p-3">
+                <p className="text-sm text-red-400">
+                  Upload failed: {(uploadMutation.error as Error)?.message}
+                </p>
+              </div>
+            )}
+
+            {/* Evidence List */}
+            <div className="mt-6">
+              <EvidenceList
+                evidences={test.evidences || []}
+                onDownload={handleDownload}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Metadata */}
+          <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+            <h2 className="mb-4 text-lg font-semibold text-white">Details</h2>
+            <dl className="space-y-4">
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Platform</dt>
+                <dd className="mt-1 text-sm text-gray-300 capitalize">
+                  {test.platform || "—"}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Tool Used</dt>
+                <dd className="mt-1 text-sm text-gray-300">{test.tool_used || "—"}</dd>
+              </div>
+              <div>
+                <dt className="text-xs font-medium uppercase text-gray-500">Execution Date</dt>
+                <dd className="mt-1 text-sm text-gray-300">
+                  {formatDate(test.execution_date)}
+                </dd>
+              </div>
+              {test.validated_at && (
+                <div>
+                  <dt className="text-xs font-medium uppercase text-gray-500">Validated</dt>
+                  <dd className="mt-1 text-sm text-gray-300">
+                    {formatDate(test.validated_at)}
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      {/* Validate Modal */}
+      {showValidateModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+          <div className="w-full max-w-md rounded-xl border border-gray-800 bg-gray-900 p-6">
+            <h3 className="text-lg font-semibold text-white">Validate Test</h3>
+            <p className="mt-1 text-sm text-gray-400">
+              Select the detection result for this test.
+            </p>
+
+            <div className="mt-4 space-y-2">
+              {RESULTS.map((r) => (
+                <label
+                  key={r.value}
+                  className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
+                    selectedResult === r.value
+                      ? "border-cyan-500 bg-cyan-500/10"
+                      : "border-gray-700 bg-gray-800 hover:border-gray-600"
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="result"
+                    value={r.value}
+                    checked={selectedResult === r.value}
+                    onChange={(e) => setSelectedResult(e.target.value as TestResult)}
+                    className="sr-only"
+                  />
+                  <div
+                    className={`h-4 w-4 rounded-full border-2 ${
+                      selectedResult === r.value
+                        ? "border-cyan-500 bg-cyan-500"
+                        : "border-gray-600"
+                    }`}
+                  />
+                  <span className="text-sm text-gray-200">{r.label}</span>
+                </label>
+              ))}
+            </div>
+
+            <div className="mt-6 flex justify-end gap-3">
+              <button
+                onClick={() => setShowValidateModal(false)}
+                className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => validateMutation.mutate()}
+                disabled={validateMutation.isPending}
+                className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-500 disabled:opacity-50"
+              >
+                {validateMutation.isPending && (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                )}
+                Confirm Validation
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/TestsPage.tsx

@@ -1,8 +1,229 @@
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { Loader2, AlertCircle, FlaskConical, Plus } from "lucide-react";
+import { getTechniques, type TechniqueSummary } from "../api/techniques";
+import type { TestState, TestResult } from "../types/models";
+import { useAuth } from "../context/AuthContext";
+
+const testStateBadgeColors: Record<TestState, string> = {
+  draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+  in_review: "bg-blue-900/50 text-blue-400 border-blue-500/30",
+  validated: "bg-green-900/50 text-green-400 border-green-500/30",
+  rejected: "bg-red-900/50 text-red-400 border-red-500/30",
+};
+
+const testResultBadgeColors: Record<TestResult, string> = {
+  detected: "bg-green-900/50 text-green-400 border-green-500/30",
+  not_detected: "bg-red-900/50 text-red-400 border-red-500/30",
+  partially_detected: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
+};
+
+interface TestSummary {
+  id: string;
+  technique_id: string;
+  technique_mitre_id: string;
+  technique_name: string;
+  name: string;
+  state: TestState;
+  result: TestResult | null;
+  platform: string | null;
+  created_at: string;
+}
+
 export default function TestsPage() {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+
+  const canCreate =
+    user?.role === "admin" || user?.role === "red_tech" || user?.role === "blue_tech";
+
+  // For now, we'll fetch techniques to get their tests
+  // In a production app, you'd want a dedicated /tests endpoint
+  const {
+    data: techniques,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["techniques"],
+    queryFn: () => getTechniques(),
+  });
+
+  // Note: Since we don't have a direct /tests list endpoint, we're showing
+  // a message to navigate through techniques. In a full implementation,
+  // you'd add a /tests endpoint to the backend.
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-64 flex-col items-center justify-center gap-2">
+        <AlertCircle className="h-10 w-10 text-red-400" />
+        <p className="text-red-400">Failed to load data</p>
+      </div>
+    );
+  }
+
   return (
-    <div className="space-y-4">
-      <h1 className="text-2xl font-bold text-white">Tests</h1>
-      <p className="text-gray-400">Security test management coming soon.</p>
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-white">Tests</h1>
+          <p className="mt-1 text-sm text-gray-400">
+            Security tests for technique validation
+          </p>
+        </div>
+        {canCreate && (
+          <button
+            onClick={() => navigate("/tests/new")}
+            className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 transition-colors"
+          >
+            <Plus className="h-4 w-4" />
+            New Test
+          </button>
+        )}
+      </div>
+
+      {/* Info Card */}
+      <div className="rounded-xl border border-cyan-500/30 bg-cyan-500/10 p-6">
+        <div className="flex items-start gap-4">
+          <div className="rounded-lg bg-cyan-500/20 p-3">
+            <FlaskConical className="h-6 w-6 text-cyan-400" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-white">Browse Tests by Technique</h2>
+            <p className="mt-1 text-sm text-gray-400">
+              Tests are organized by MITRE ATT&CK technique. Navigate to a technique from the{" "}
+              <button
+                onClick={() => navigate("/techniques")}
+                className="text-cyan-400 hover:underline"
+              >
+                Techniques page
+              </button>{" "}
+              to view and manage its associated tests.
+            </p>
+            <div className="mt-4 flex flex-wrap gap-3">
+              <button
+                onClick={() => navigate("/techniques")}
+                className="rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-4 py-2 text-sm font-medium text-cyan-400 hover:bg-cyan-500/20 transition-colors"
+              >
+                Browse Techniques Matrix
+              </button>
+              {canCreate && (
+                <button
+                  onClick={() => navigate("/tests/new")}
+                  className="rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm font-medium text-gray-300 hover:border-gray-600 hover:text-white transition-colors"
+                >
+                  Create Standalone Test
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Quick Stats */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
+          <p className="text-sm text-gray-400">Techniques with Tests</p>
+          <p className="mt-1 text-2xl font-bold text-cyan-400">
+            {techniques?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated").length || 0}
+          </p>
+        </div>
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
+          <p className="text-sm text-gray-400">Validated</p>
+          <p className="mt-1 text-2xl font-bold text-green-400">
+            {techniques?.filter((t: TechniqueSummary) => t.status_global === "validated").length || 0}
+          </p>
+        </div>
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
+          <p className="text-sm text-gray-400">In Progress</p>
+          <p className="mt-1 text-2xl font-bold text-blue-400">
+            {techniques?.filter((t: TechniqueSummary) => t.status_global === "in_progress").length || 0}
+          </p>
+        </div>
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-5">
+          <p className="text-sm text-gray-400">Pending Evaluation</p>
+          <p className="mt-1 text-2xl font-bold text-gray-400">
+            {techniques?.filter((t: TechniqueSummary) => t.status_global === "not_evaluated").length || 0}
+          </p>
+        </div>
+      </div>
+
+      {/* Techniques with Recent Activity */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <h2 className="mb-4 text-lg font-semibold text-white">Techniques Being Tested</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm">
+            <thead>
+              <tr className="border-b border-gray-800">
+                <th className="pb-3 pr-4 font-medium text-gray-400">Technique</th>
+                <th className="pb-3 px-4 font-medium text-gray-400">Name</th>
+                <th className="pb-3 px-4 font-medium text-gray-400">Status</th>
+                <th className="pb-3 pl-4 font-medium text-gray-400">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {techniques
+                ?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated")
+                .slice(0, 10)
+                .map((tech: TechniqueSummary) => (
+                  <tr
+                    key={tech.id}
+                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
+                  >
+                    <td className="py-3 pr-4">
+                      <span className="font-mono text-cyan-400">{tech.mitre_id}</span>
+                    </td>
+                    <td className="py-3 px-4 text-gray-200">{tech.name}</td>
+                    <td className="py-3 px-4">
+                      <span
+                        className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${
+                          tech.status_global === "validated"
+                            ? testStateBadgeColors.validated
+                            : tech.status_global === "in_progress"
+                            ? testStateBadgeColors.in_review
+                            : tech.status_global === "partial"
+                            ? "bg-yellow-900/50 text-yellow-400 border-yellow-500/30"
+                            : testStateBadgeColors.draft
+                        }`}
+                      >
+                        {tech.status_global.replace(/_/g, " ")}
+                      </span>
+                    </td>
+                    <td className="py-3 pl-4">
+                      <button
+                        onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
+                        className="text-sm text-cyan-400 hover:underline"
+                      >
+                        View Tests
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+          {techniques?.filter((t: TechniqueSummary) => t.status_global !== "not_evaluated").length === 0 && (
+            <div className="py-8 text-center text-gray-400">
+              No techniques have been tested yet. Create your first test to get started.
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   );
 }