From ba4d16396c2a6e2ebd871d2066311a0df78a9210 Mon Sep 17 00:00:00 2001
From: jramos <jramos@apophisnetworking.net>
Date: Tue, 10 Feb 2026 09:34:22 -0700
Subject: [PATCH] Transform CVE Dashboard to tactical intelligence platform
 aesthetic

Implemented a sophisticated cyber-intelligence visual design with:

DESIGN DIRECTION:
- "Tactical Intelligence Command Center" aesthetic
- Typography: JetBrains Mono for data/code + Outfit for UI labels
- Color Palette: Deep navy (#0A0E27) base with electric cyan (#00D9FF) accents
- Visual Language: Grid patterns, glowing borders, scanning animations
- Motion: Smooth fade-ins, pulse effects, hover transformations

FRONTEND CHANGES:
- Redesigned App.css with comprehensive intelligence dashboard theme
- Custom CSS classes: intel-card, intel-button, intel-input, status-badge
- Added scanning line animations and pulse glow effects
- Implemented grid background pattern and scrollbar styling

COMPONENT UPDATES:
- App.js: Transformed all UI sections to intel theme
  - Header with stats dashboard
  - Search/filter cards
  - CVE list with expandable cards
  - Document management
  - Quick check interface
  - JIRA ticket tracking
- LoginForm.js: Redesigned authentication portal
- All modals: Add/Edit CVE, Add/Edit JIRA tickets

UI FEATURES:
- Monospace fonts for technical data
- Glowing accent borders on interactive elements
- Status badges with animated pulse indicators
- Data rows with hover states
- Responsive grid layouts
- Modal overlays with backdrop blur

TECHNICAL:
- Tailwind CSS extended with custom intel theme
- Google Fonts: JetBrains Mono & Outfit
- Maintained all existing functionality
- Build tested successfully
- No breaking changes to business logic

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .claude/agents/frontend.md           |   2 +
 .claude/instructions.md              |  25 ++
 .claude/optimization.md              | 143 ++++++++
 frontend/public/index.html           |  60 +++-
 frontend/src/App.css                 | 392 ++++++++++++++++++++--
 frontend/src/App.js                  | 467 ++++++++++++++-------------
 frontend/src/components/LoginForm.js |  53 +--
 7 files changed, 872 insertions(+), 270 deletions(-)
 create mode 100644 .claude/instructions.md
 create mode 100644 .claude/optimization.md

diff --git a/.claude/agents/frontend.md b/.claude/agents/frontend.md
index 3817964..6bcc1aa 100644
--- a/.claude/agents/frontend.md
+++ b/.claude/agents/frontend.md
@@ -3,6 +3,8 @@
 ## Role
 You are the frontend specialist for the CVE Dashboard project. You build and maintain the React UI, handle client-side state, manage API communication, and implement user-facing features.
 
+**IMPORTANT:** When creating new UI components or implementing frontend features, you should use the `frontend-design` skill to ensure production-grade, distinctive design quality. Invoke this skill using the Skill tool with `skill: "frontend-design"`.
+
 ## Project Context
 
 ### Tech Stack
diff --git a/.claude/instructions.md b/.claude/instructions.md
new file mode 100644
index 0000000..0124a89
--- /dev/null
+++ b/.claude/instructions.md
@@ -0,0 +1,25 @@
+# Project Instructions
+
+## Token Usage & Efficiency
+Follow the guidelines in `.claude/optimization.md` for:
+- When to use subagents vs main conversation
+- Model selection (Haiku vs Sonnet)
+- Token preservation strategies
+- Rate limiting rules
+
+## Project Context
+This is a CVE (Common Vulnerabilities and Exposures) dashboard application for tracking security vulnerabilities, vendors, and JIRA tickets.
+
+## Security Focus
+All code changes should consider:
+- Input validation
+- SQL injection prevention
+- XSS protection
+- Authentication/authorization
+
+## Frontend Development
+When working on frontend features or UI components:
+- Use the `frontend-design` skill for new component creation and UI implementation
+- This skill provides production-grade design quality and avoids generic AI aesthetics
+- Invoke it using: `Skill` tool with `skill: "frontend-design"`
+- The skill will guide implementation with distinctive, polished code patterns
diff --git a/.claude/optimization.md b/.claude/optimization.md
new file mode 100644
index 0000000..f0f5273
--- /dev/null
+++ b/.claude/optimization.md
@@ -0,0 +1,143 @@
+OPTIMIZATION.md - Token Usage & Subagent Strategy
+
+## SUBAGENT USAGE STRATEGY
+
+Subagents run in separate contexts and preserve main conversation tokens.
+
+### When to Use Subagents
+
+**Use Subagents for:**
+- Large-scale codebase exploration and analysis
+- Complex multi-step investigations across many files
+- Detailed code pattern searches and refactoring analysis
+- Gathering comprehensive information before main conversation work
+- When total tokens would exceed 30,000 in main conversation
+
+**Keep in Main Conversation:**
+- Direct file edits (1-3 files)
+- Simple code changes and debugging
+- Architecture decisions
+- Security reviews and approvals
+- User-facing responses and recommendations
+- Questions requiring reasoning about codebase
+- Frontend UI work (use `frontend-design` skill for new components)
+
+### Subagent Types & When to Use
+
+**Explore Agent** (Haiku 3.5)
+- Codebase exploration and file discovery
+- Pattern searching across large codebases
+- Gathering information about file structure
+- Finding references and relationships
+
+**General-Purpose Agent** (Haiku 3.5)
+- Multi-step code analysis tasks
+- Summarizing findings from exploration
+- Complex searches requiring multiple strategies
+- Collecting data for main conversation decisions
+
+---
+
+## MODEL SELECTION STRATEGY
+
+### Main Conversation (Sonnet 4.5)
+- **Always use Sonnet 4.5 in main conversation**
+- Direct file edits and modifications
+- Architecture and design decisions
+- Security analysis and approvals
+- Complex reasoning and recommendations
+- Final user responses
+
+### Subagent Models
+
+**Haiku 4.5** (Default for subagents)
+- Code exploration and pattern searching
+- File discovery and structure analysis
+- Simple codebase investigations
+- Gathering information and summarizing
+- Task: Use Haiku first for subagent work
+
+**Sonnet 4.5** (For subagents - when needed)
+- Security-critical analysis within subagents
+- Complex architectural decisions needed in exploration
+- High-risk code analysis
+- When exploration requires advanced reasoning
+
+---
+
+## RATE LIMITING GUIDANCE
+
+### API Call Throttling
+- 5 seconds minimum between API calls
+- 10 seconds minimum between web searches
+- Batch similar work whenever possible
+- If you hit 429 error: STOP and wait 5 minutes
+
+### Budget Management
+- Track tokens used across all agents
+- Main conversation should stay under 100,000 tokens
+- Subagent work can extend to 50,000 tokens per agent
+- Batch multiple subagent tasks together when possible
+
+---
+
+## TOKEN PRESERVATION RULES
+
+### Best Practices for Long-Running Conversations
+
+**In Main Conversation:**
+1. Start with subagent for exploration (saves ~20,000 tokens)
+2. Request subagent summarize findings
+3. Use summary to inform main conversation edits/decisions
+4. Keep main conversation focused on decisions and actions
+
+**Information Gathering:**
+- Use subagents to explore before asking for analysis in main conversation
+- Have subagent provide condensed summaries (250-500 words max)
+- Main conversation uses summary + provides feedback/decisions
+
+**File Editing:**
+- For <3 files: Keep in main conversation
+- For 3+ files: Split between subagent (finding/analysis) and main (approval/execution)
+- Simple edits (1-5 lines per file): Main conversation
+- Complex refactoring (10+ lines per file): Subagent analysis + main approval
+
+**Code Review Workflow:**
+1. Subagent explores and analyzes code patterns
+2. Subagent flags issues and suggests improvements
+3. Main conversation reviews suggestions
+4. Main conversation executes approved changes
+
+### Token Budget Allocation Example
+- Main conversation: 0-100,000 tokens (soft limit)
+- Per subagent task: 0-50,000 tokens
+- Critical work (security): Use Sonnet in main conversation
+- Exploratory work: Use Explore agent (Haiku) in subagent
+
+---
+
+## DECISION TREE
+
+```
+Is this a direct file edit request?
+├─ YES (1-3 files, <10 lines each) → Main conversation
+├─ NO
+└─ Is this exploratory analysis?
+   ├─ YES (finding files, patterns) → Use Explore agent (Haiku)
+   ├─ NO
+   └─ Is this complex multi-step work?
+      ├─ YES (3+ steps, many files) → Use General agent (Haiku)
+      ├─ NO
+      └─ Is this security-critical?
+         ├─ YES → Main conversation (Sonnet)
+         └─ NO → Subagent (Haiku) or Main conversation
+```
+
+---
+
+## SUMMARY
+
+**Main Conversation (You):** Architecture, decisions, edits, reviews
+**Subagents:** Exploration, analysis, information gathering
+**Sonnet 4.5:** Security, complexity, final decisions
+**Haiku 4.5:** Exploration, gathering, analysis support
\ No newline at end of file
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 0640fca..7141c16 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -25,9 +25,67 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>CVE Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              'mono': ['JetBrains Mono', 'monospace'],
+              'sans': ['Outfit', 'system-ui', 'sans-serif'],
+            },
+            colors: {
+              'intel': {
+                'darkest': '#0A0E27',
+                'dark': '#131937',
+                'medium': '#1E2749',
+                'accent': '#00D9FF',
+                'accent-dim': '#0099BB',
+                'danger': '#FF3366',
+                'warning': '#FFB800',
+                'success': '#00FF88',
+                'grid': '#1E2749',
+              }
+            },
+            backgroundImage: {
+              'grid-pattern': 'linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px)',
+            },
+            backgroundSize: {
+              'grid': '20px 20px',
+            },
+            animation: {
+              'scan': 'scan 3s ease-in-out infinite',
+              'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
+              'fade-in': 'fade-in 0.5s ease-out',
+              'slide-up': 'slide-up 0.4s ease-out',
+            },
+            keyframes: {
+              'scan': {
+                '0%, 100%': { transform: 'translateY(-100%)', opacity: '0' },
+                '50%': { transform: 'translateY(100%)', opacity: '0.3' },
+              },
+              'pulse-glow': {
+                '0%, 100%': { boxShadow: '0 0 5px rgba(0, 217, 255, 0.3)' },
+                '50%': { boxShadow: '0 0 20px rgba(0, 217, 255, 0.6)' },
+              },
+              'fade-in': {
+                '0%': { opacity: '0' },
+                '100%': { opacity: '1' },
+              },
+              'slide-up': {
+                '0%': { transform: 'translateY(10px)', opacity: '0' },
+                '100%': { transform: 'translateY(0)', opacity: '1' },
+              },
+            },
+          }
+        }
+      }
+    </script>
   </head>
-  <body>
+  <body class="bg-intel-darkest">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 74b5e05..7a4b0d8 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,38 +1,390 @@
-.App {
-  text-align: center;
+/* Tactical Intelligence Dashboard Styles */
+
+* {
+  font-family: 'Outfit', system-ui, sans-serif;
 }
 
-.App-logo {
-  height: 40vmin;
+body {
+  background-color: #0A0E27;
+  color: #E4E8F1;
+  overflow-x: hidden;
+}
+
+/* Grid background effect */
+.grid-bg {
+  background-image:
+    linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+/* Monospace font for technical data */
+.mono {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* Glowing border effect */
+.glow-border {
+  position: relative;
+  border: 1px solid rgba(0, 217, 255, 0.3);
+}
+
+.glow-border::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  background: linear-gradient(45deg, transparent, rgba(0, 217, 255, 0.1), transparent);
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.glow-border:hover::before {
+  opacity: 1;
+}
+
+/* Scanning line animation */
+.scan-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg,
+    transparent,
+    rgba(0, 217, 255, 0.8),
+    transparent
+  );
+  animation: scan 3s ease-in-out infinite;
   pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+@keyframes scan {
+  0%, 100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(2000%);
+    opacity: 0.5;
   }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+/* Card hover effects */
+.intel-card {
+  background: linear-gradient(135deg, #131937 0%, #1E2749 100%);
+  border: 1px solid rgba(0, 217, 255, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.intel-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg,
+    transparent,
+    rgba(0, 217, 255, 0.05),
+    transparent
+  );
+  transition: left 0.5s;
+}
+
+.intel-card:hover {
+  border-color: rgba(0, 217, 255, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 217, 255, 0.15);
+}
+
+.intel-card:hover::after {
+  left: 100%;
+}
+
+/* Status badges with glow */
+.status-badge {
+  position: relative;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+  border: 1px solid;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  gap: 0.5rem;
 }
 
-.App-link {
-  color: #61dafb;
+.status-badge::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  animation: pulse-glow 2s ease-in-out infinite;
 }
 
-@keyframes App-logo-spin {
+.status-critical {
+  background: rgba(255, 51, 102, 0.1);
+  border-color: rgba(255, 51, 102, 0.4);
+  color: #FF3366;
+}
+
+.status-critical::before {
+  background: #FF3366;
+  box-shadow: 0 0 10px #FF3366;
+}
+
+.status-high {
+  background: rgba(255, 184, 0, 0.1);
+  border-color: rgba(255, 184, 0, 0.4);
+  color: #FFB800;
+}
+
+.status-high::before {
+  background: #FFB800;
+  box-shadow: 0 0 10px #FFB800;
+}
+
+.status-medium {
+  background: rgba(0, 217, 255, 0.1);
+  border-color: rgba(0, 217, 255, 0.4);
+  color: #00D9FF;
+}
+
+.status-medium::before {
+  background: #00D9FF;
+  box-shadow: 0 0 10px #00D9FF;
+}
+
+.status-low {
+  background: rgba(0, 255, 136, 0.1);
+  border-color: rgba(0, 255, 136, 0.4);
+  color: #00FF88;
+}
+
+.status-low::before {
+  background: #00FF88;
+  box-shadow: 0 0 10px #00FF88;
+}
+
+/* Button styles */
+.intel-button {
+  position: relative;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  padding: 0.625rem 1.25rem;
+  border-radius: 0.375rem;
+  transition: all 0.3s;
+  border: 1px solid;
+  overflow: hidden;
+}
+
+.intel-button::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  transform: translate(-50%, -50%);
+  transition: width 0.5s, height 0.5s;
+}
+
+.intel-button:hover::before {
+  width: 300px;
+  height: 300px;
+}
+
+.intel-button-primary {
+  background: rgba(0, 217, 255, 0.15);
+  border-color: #00D9FF;
+  color: #00D9FF;
+}
+
+.intel-button-primary:hover {
+  background: rgba(0, 217, 255, 0.25);
+  box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
+}
+
+.intel-button-danger {
+  background: rgba(255, 51, 102, 0.15);
+  border-color: #FF3366;
+  color: #FF3366;
+}
+
+.intel-button-danger:hover {
+  background: rgba(255, 51, 102, 0.25);
+  box-shadow: 0 0 20px rgba(255, 51, 102, 0.3);
+}
+
+.intel-button-success {
+  background: rgba(0, 255, 136, 0.15);
+  border-color: #00FF88;
+  color: #00FF88;
+}
+
+.intel-button-success:hover {
+  background: rgba(0, 255, 136, 0.25);
+  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+}
+
+/* Input fields */
+.intel-input {
+  background: rgba(19, 25, 55, 0.5);
+  border: 1px solid rgba(0, 217, 255, 0.2);
+  color: #E4E8F1;
+  padding: 0.625rem 1rem;
+  border-radius: 0.375rem;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.875rem;
+  transition: all 0.3s;
+}
+
+.intel-input:focus {
+  outline: none;
+  border-color: #00D9FF;
+  box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.1);
+  background: rgba(19, 25, 55, 0.8);
+}
+
+.intel-input::placeholder {
+  color: rgba(228, 232, 241, 0.3);
+}
+
+/* Stat cards */
+.stat-card {
+  background: linear-gradient(135deg, rgba(19, 25, 55, 0.8) 0%, rgba(30, 39, 73, 0.6) 100%);
+  border: 1px solid rgba(0, 217, 255, 0.15);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #00D9FF, transparent);
+  opacity: 0.5;
+}
+
+/* Modal overlay */
+.modal-overlay {
+  background: rgba(10, 14, 39, 0.95);
+  backdrop-filter: blur(8px);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #131937;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 217, 255, 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 217, 255, 0.5);
+}
+
+/* Fade in animation */
+.fade-in {
+  animation: fade-in 0.5s ease-out;
+}
+
+@keyframes fade-in {
   from {
-    transform: rotate(0deg);
+    opacity: 0;
+    transform: translateY(10px);
   }
   to {
-    transform: rotate(360deg);
+    opacity: 1;
+    transform: translateY(0);
   }
 }
+
+/* Pulse glow animation */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 5px currentColor;
+  }
+  50% {
+    box-shadow: 0 0 15px currentColor;
+  }
+}
+
+/* Data table styling */
+.data-row {
+  border-bottom: 1px solid rgba(0, 217, 255, 0.05);
+  transition: all 0.2s;
+}
+
+.data-row:hover {
+  background: rgba(0, 217, 255, 0.03);
+  border-bottom-color: rgba(0, 217, 255, 0.2);
+}
+
+/* Loading spinner */
+.loading-spinner {
+  border: 2px solid rgba(0, 217, 255, 0.1);
+  border-top-color: #00D9FF;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Tooltip */
+.tooltip {
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.5rem 0.75rem;
+  background: #1E2749;
+  border: 1px solid rgba(0, 217, 255, 0.3);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s;
+  margin-bottom: 0.5rem;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.tooltip:hover::after {
+  opacity: 1;
+}
diff --git a/frontend/src/App.js b/frontend/src/App.js
index b2d0feb..53d768f 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -190,16 +190,6 @@ export default function App() {
     }
   };
 
-  const getSeverityColor = (severity) => {
-    const colors = {
-      'Critical': 'bg-red-100 text-red-800',
-      'High': 'bg-orange-100 text-orange-800',
-      'Medium': 'bg-yellow-100 text-yellow-800',
-      'Low': 'bg-blue-100 text-blue-800'
-    };
-    return colors[severity] || 'bg-gray-100 text-gray-800';
-  };
-
   const toggleDocumentSelection = (docId) => {
     setSelectedDocuments(prev => 
       prev.includes(docId) 
@@ -601,34 +591,61 @@ export default function App() {
   const filteredGroupedCVEs = groupedCVEs;
 
   return (
-    <div className="min-h-screen bg-gray-100 p-6">
-      <div className="max-w-7xl mx-auto">
+    <div className="min-h-screen bg-intel-darkest grid-bg p-6 relative overflow-hidden fade-in">
+      {/* Scanning line effect */}
+      <div className="scan-line"></div>
+
+      <div className="max-w-7xl mx-auto relative z-10">
         {/* Header */}
-        <div className="mb-8 flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">CVE Dashboard</h1>
-            <p className="text-gray-600">Query vulnerabilities, manage vendors, and attach documentation</p>
+        <div className="mb-8">
+          <div className="flex justify-between items-start mb-6">
+            <div className="flex-1">
+              <h1 className="text-4xl font-bold text-intel-accent mb-1 font-mono tracking-tight">
+                CVE INTEL
+              </h1>
+              <p className="text-gray-400 text-sm font-sans">Threat Intelligence & Vulnerability Command Center</p>
+            </div>
+            <div className="flex items-center gap-3">
+              {canWrite() && (
+                <button
+                  onClick={() => setShowNvdSync(true)}
+                  className="intel-button intel-button-success relative z-10 flex items-center gap-2"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                  NVD Sync
+                </button>
+              )}
+              {canWrite() && (
+                <button
+                  onClick={() => setShowAddCVE(true)}
+                  className="intel-button intel-button-primary relative z-10 flex items-center gap-2"
+                >
+                  <Plus className="w-4 h-4" />
+                  Add Entry
+                </button>
+              )}
+              <UserMenu onManageUsers={() => setShowUserManagement(true)} onAuditLog={() => setShowAuditLog(true)} />
+            </div>
           </div>
-          <div className="flex items-center gap-4">
-            {canWrite() && (
-              <button
-                onClick={() => setShowNvdSync(true)}
-                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2 shadow-md"
-              >
-                <RefreshCw className="w-5 h-5" />
-                Sync with NVD
-              </button>
-            )}
-            {canWrite() && (
-              <button
-                onClick={() => setShowAddCVE(true)}
-                className="px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors flex items-center gap-2 shadow-md"
-              >
-                <Plus className="w-5 h-5" />
-                Add CVE/Vendor
-              </button>
-            )}
-            <UserMenu onManageUsers={() => setShowUserManagement(true)} onAuditLog={() => setShowAuditLog(true)} />
+
+          {/* Stats Bar */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="stat-card">
+              <div className="text-xs font-sans uppercase tracking-wider text-gray-400 mb-1">Total CVEs</div>
+              <div className="text-2xl font-bold font-mono text-intel-accent">{Object.keys(filteredGroupedCVEs).length}</div>
+            </div>
+            <div className="stat-card">
+              <div className="text-xs font-sans uppercase tracking-wider text-gray-400 mb-1">Vendor Entries</div>
+              <div className="text-2xl font-bold font-mono text-gray-300">{cves.length}</div>
+            </div>
+            <div className="stat-card">
+              <div className="text-xs font-sans uppercase tracking-wider text-gray-400 mb-1">Open Tickets</div>
+              <div className="text-2xl font-bold font-mono text-intel-warning">{jiraTickets.filter(t => t.status !== 'Closed').length}</div>
+            </div>
+            <div className="stat-card">
+              <div className="text-xs font-sans uppercase tracking-wider text-gray-400 mb-1">Critical</div>
+              <div className="text-2xl font-bold font-mono text-intel-danger">{cves.filter(c => c.severity === 'Critical').length}</div>
+            </div>
           </div>
         </div>
 
@@ -649,29 +666,29 @@ export default function App() {
 
         {/* Add CVE Modal */}
         {showAddCVE && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-            <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+          <div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
+            <div className="intel-card rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border-intel-accent">
               <div className="p-6">
                 <div className="flex justify-between items-center mb-4">
-                  <h2 className="text-2xl font-bold text-gray-900">Add CVE Entry</h2>
+                  <h2 className="text-2xl font-bold text-intel-accent font-mono">Add CVE Entry</h2>
                   <button
                     onClick={() => { setShowAddCVE(false); setNvdLoading(false); setNvdError(null); setNvdAutoFilled(false); }}
-                    className="text-gray-400 hover:text-gray-600"
+                    className="text-gray-400 hover:text-intel-accent transition-colors"
                   >
                     <XCircle className="w-6 h-6" />
                   </button>
                 </div>
-                
-                <div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
-                  <p className="text-sm text-blue-800">
-                    <strong>Tip:</strong> You can add the same CVE-ID multiple times with different vendors. 
+
+                <div className="mb-4 p-3 bg-intel-medium border border-intel-accent/30 rounded">
+                  <p className="text-sm text-gray-300">
+                    <strong className="text-intel-accent">Tip:</strong> You can add the same CVE-ID multiple times with different vendors.
                     Each vendor will have its own documents folder.
                   </p>
                 </div>
 
                 <form onSubmit={handleAddCVE} className="space-y-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                       CVE ID *
                     </label>
                     <div className="relative">
@@ -682,29 +699,29 @@ export default function App() {
                         value={newCVE.cve_id}
                         onChange={(e) => { setNewCVE({...newCVE, cve_id: e.target.value.toUpperCase()}); setNvdAutoFilled(false); setNvdError(null); }}
                         onBlur={(e) => lookupNVD(e.target.value)}
-                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                        className="intel-input w-full"
                       />
                       {nvdLoading && (
-                        <Loader className="absolute right-3 top-2.5 w-5 h-5 text-[#0476D9] animate-spin" />
+                        <Loader className="absolute right-3 top-2.5 w-5 h-5 text-intel-accent animate-spin" />
                       )}
                     </div>
                     <p className="text-xs text-gray-500 mt-1">Can be the same as existing CVE if adding another vendor</p>
                     {nvdAutoFilled && (
-                      <p className="text-xs text-green-600 mt-1 flex items-center gap-1">
+                      <p className="text-xs text-intel-success mt-1 flex items-center gap-1">
                         <CheckCircle className="w-3 h-3" />
                         Auto-filled from NVD
                       </p>
                     )}
                     {nvdError && (
-                      <p className="text-xs text-amber-600 mt-1 flex items-center gap-1">
+                      <p className="text-xs text-intel-warning mt-1 flex items-center gap-1">
                         <AlertCircle className="w-3 h-3" />
                         {nvdError}
                       </p>
                     )}
                   </div>
-                  
+
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                       Vendor *
                     </label>
                     <input
@@ -713,19 +730,19 @@ export default function App() {
                       placeholder="Microsoft, Cisco, Oracle, etc."
                       value={newCVE.vendor}
                       onChange={(e) => setNewCVE({...newCVE, vendor: e.target.value})}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                     <p className="text-xs text-gray-500 mt-1">Must be unique for this CVE-ID</p>
                   </div>
-                  
+
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                       Severity *
                     </label>
                     <select
                       value={newCVE.severity}
                       onChange={(e) => setNewCVE({...newCVE, severity: e.target.value})}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     >
                       <option value="Critical">Critical</option>
                       <option value="High">High</option>
@@ -733,9 +750,9 @@ export default function App() {
                       <option value="Low">Low</option>
                     </select>
                   </div>
-                  
+
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                       Description *
                     </label>
                     <textarea
@@ -744,12 +761,12 @@ export default function App() {
                       value={newCVE.description}
                       onChange={(e) => setNewCVE({...newCVE, description: e.target.value})}
                       rows={3}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
-                  
+
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                       Published Date *
                     </label>
                     <input
@@ -757,21 +774,21 @@ export default function App() {
                       required
                       value={newCVE.published_date}
                       onChange={(e) => setNewCVE({...newCVE, published_date: e.target.value})}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
-                  
+
                   <div className="flex gap-3 pt-4">
                     <button
                       type="submit"
-                      className="flex-1 px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors font-medium shadow-md"
+                      className="flex-1 intel-button intel-button-primary"
                     >
                       Add CVE Entry
                     </button>
                     <button
                       type="button"
                       onClick={() => { setShowAddCVE(false); setNvdLoading(false); setNvdError(null); setNvdAutoFilled(false); }}
-                      className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                      className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider"
                     >
                       Cancel
                     </button>
@@ -784,48 +801,48 @@ export default function App() {
 
         {/* Edit CVE Modal */}
         {showEditCVE && editingCVE && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-            <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+          <div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
+            <div className="intel-card rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border-intel-accent">
               <div className="p-6">
                 <div className="flex justify-between items-center mb-4">
-                  <h2 className="text-2xl font-bold text-gray-900">Edit CVE Entry</h2>
+                  <h2 className="text-2xl font-bold text-intel-accent font-mono">Edit CVE Entry</h2>
                   <button
                     onClick={() => { setShowEditCVE(false); setEditingCVE(null); }}
-                    className="text-gray-400 hover:text-gray-600"
+                    className="text-gray-400 hover:text-intel-accent transition-colors"
                   >
                     <XCircle className="w-6 h-6" />
                   </button>
                 </div>
 
-                <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
-                  <p className="text-sm text-amber-800">
-                    <strong>Note:</strong> Changing CVE ID or Vendor will move associated documents to the new path.
+                <div className="mb-4 p-3 bg-intel-medium border border-intel-warning/30 rounded">
+                  <p className="text-sm text-gray-300">
+                    <strong className="text-intel-warning">Note:</strong> Changing CVE ID or Vendor will move associated documents to the new path.
                   </p>
                 </div>
 
                 <form onSubmit={handleEditCVESubmit} className="space-y-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">CVE ID *</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">CVE ID *</label>
                     <div className="relative">
                       <input
                         type="text"
                         required
                         value={editForm.cve_id}
                         onChange={(e) => { setEditForm({...editForm, cve_id: e.target.value.toUpperCase()}); setEditNvdAutoFilled(false); setEditNvdError(null); }}
-                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                        className="intel-input w-full"
                       />
                       {editNvdLoading && (
-                        <Loader className="absolute right-3 top-2.5 w-5 h-5 text-[#0476D9] animate-spin" />
+                        <Loader className="absolute right-3 top-2.5 w-5 h-5 text-intel-accent animate-spin" />
                       )}
                     </div>
                     {editNvdAutoFilled && (
-                      <p className="text-xs text-green-600 mt-1 flex items-center gap-1">
+                      <p className="text-xs text-intel-success mt-1 flex items-center gap-1">
                         <CheckCircle className="w-3 h-3" />
                         Updated from NVD
                       </p>
                     )}
                     {editNvdError && (
-                      <p className="text-xs text-amber-600 mt-1 flex items-center gap-1">
+                      <p className="text-xs text-intel-warning mt-1 flex items-center gap-1">
                         <AlertCircle className="w-3 h-3" />
                         {editNvdError}
                       </p>
@@ -833,22 +850,22 @@ export default function App() {
                   </div>
 
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Vendor *</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Vendor *</label>
                     <input
                       type="text"
                       required
                       value={editForm.vendor}
                       onChange={(e) => setEditForm({...editForm, vendor: e.target.value})}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
 
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Severity *</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Severity *</label>
                     <select
                       value={editForm.severity}
                       onChange={(e) => setEditForm({...editForm, severity: e.target.value})}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     >
                       <option value="Critical">Critical</option>
                       <option value="High">High</option>
@@ -858,33 +875,33 @@ export default function App() {
                   </div>
 
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Description *</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Description *</label>
                     <textarea
                       required
                       value={editForm.description}
                       onChange={(e) => setEditForm({...editForm, description: e.target.value})}
                       rows={3}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
 
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Published Date *</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Published Date *</label>
                     <input
                       type="date"
                       required
                       value={editForm.published_date}
                       onChange={(e) => setEditForm({...editForm, published_date: e.target.value})}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
 
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Status *</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Status *</label>
                     <select
                       value={editForm.status}
                       onChange={(e) => setEditForm({...editForm, status: e.target.value})}
-                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     >
                       <option value="Open">Open</option>
                       <option value="Addressed">Addressed</option>
@@ -898,21 +915,21 @@ export default function App() {
                       type="button"
                       onClick={() => lookupNVDForEdit(editForm.cve_id)}
                       disabled={editNvdLoading}
-                      className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium flex items-center gap-2 disabled:opacity-50"
+                      className="intel-button intel-button-success flex items-center gap-2 disabled:opacity-50"
                     >
                       <RefreshCw className={`w-4 h-4 ${editNvdLoading ? 'animate-spin' : ''}`} />
-                      Update from NVD
+                      NVD Update
                     </button>
                     <button
                       type="submit"
-                      className="flex-1 px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors font-medium shadow-md"
+                      className="flex-1 intel-button intel-button-primary"
                     >
                       Save Changes
                     </button>
                     <button
                       type="button"
                       onClick={() => { setShowEditCVE(false); setEditingCVE(null); }}
-                      className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                      className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider"
                     >
                       Cancel
                     </button>
@@ -925,12 +942,12 @@ export default function App() {
 
         {/* Add JIRA Ticket Modal */}
         {showAddTicket && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-            <div className="bg-white rounded-lg shadow-xl max-w-md w-full">
+          <div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
+            <div className="intel-card rounded-lg shadow-2xl max-w-md w-full border-intel-warning">
               <div className="p-6">
                 <div className="flex justify-between items-center mb-4">
-                  <h2 className="text-xl font-bold text-gray-900">Add JIRA Ticket</h2>
-                  <button onClick={() => { setShowAddTicket(false); setAddTicketContext(null); }} className="text-gray-400 hover:text-gray-600">
+                  <h2 className="text-xl font-bold text-intel-warning font-mono">Add JIRA Ticket</h2>
+                  <button onClick={() => { setShowAddTicket(false); setAddTicketContext(null); }} className="text-gray-400 hover:text-intel-accent transition-colors">
                     <XCircle className="w-6 h-6" />
                   </button>
                 </div>
@@ -938,71 +955,71 @@ export default function App() {
                   {!addTicketContext && (
                     <>
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">CVE ID *</label>
+                        <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">CVE ID *</label>
                         <input
                           type="text"
                           required
                           placeholder="CVE-2024-1234"
                           value={ticketForm.cve_id}
                           onChange={(e) => setTicketForm({...ticketForm, cve_id: e.target.value.toUpperCase()})}
-                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                          className="intel-input w-full"
                         />
                       </div>
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">Vendor *</label>
+                        <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Vendor *</label>
                         <input
                           type="text"
                           required
                           placeholder="Cisco"
                           value={ticketForm.vendor}
                           onChange={(e) => setTicketForm({...ticketForm, vendor: e.target.value})}
-                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                          className="intel-input w-full"
                         />
                       </div>
                     </>
                   )}
                   {addTicketContext && (
-                    <div className="p-3 bg-blue-50 rounded-lg text-sm text-blue-800">
-                      Adding ticket for <strong>{addTicketContext.cve_id}</strong> / <strong>{addTicketContext.vendor}</strong>
+                    <div className="p-3 bg-intel-medium border border-intel-warning/30 rounded text-sm text-gray-300">
+                      Adding ticket for <strong className="text-intel-warning">{addTicketContext.cve_id}</strong> / <strong className="text-intel-warning">{addTicketContext.vendor}</strong>
                     </div>
                   )}
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Ticket Key *</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Ticket Key *</label>
                     <input
                       type="text"
                       required
                       placeholder="VULN-1234"
                       value={ticketForm.ticket_key}
                       onChange={(e) => setTicketForm({...ticketForm, ticket_key: e.target.value.toUpperCase()})}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">JIRA URL</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">JIRA URL</label>
                     <input
                       type="url"
                       placeholder="https://jira.company.com/browse/VULN-1234"
                       value={ticketForm.url}
                       onChange={(e) => setTicketForm({...ticketForm, url: e.target.value})}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Summary</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Summary</label>
                     <input
                       type="text"
                       placeholder="Brief description"
                       value={ticketForm.summary}
                       onChange={(e) => setTicketForm({...ticketForm, summary: e.target.value})}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Status</label>
                     <select
                       value={ticketForm.status}
                       onChange={(e) => setTicketForm({...ticketForm, status: e.target.value})}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     >
                       <option value="Open">Open</option>
                       <option value="In Progress">In Progress</option>
@@ -1010,10 +1027,10 @@ export default function App() {
                     </select>
                   </div>
                   <div className="flex gap-3 pt-4">
-                    <button type="submit" className="flex-1 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors font-medium">
+                    <button type="submit" className="flex-1 intel-button intel-button-primary">
                       Add Ticket
                     </button>
-                    <button type="button" onClick={() => { setShowAddTicket(false); setAddTicketContext(null); }} className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                    <button type="button" onClick={() => { setShowAddTicket(false); setAddTicketContext(null); }} className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider">
                       Cancel
                     </button>
                   </div>
@@ -1025,53 +1042,53 @@ export default function App() {
 
         {/* Edit JIRA Ticket Modal */}
         {showEditTicket && editingTicket && (
-          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-            <div className="bg-white rounded-lg shadow-xl max-w-md w-full">
+          <div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
+            <div className="intel-card rounded-lg shadow-2xl max-w-md w-full border-intel-warning">
               <div className="p-6">
                 <div className="flex justify-between items-center mb-4">
-                  <h2 className="text-xl font-bold text-gray-900">Edit JIRA Ticket</h2>
-                  <button onClick={() => { setShowEditTicket(false); setEditingTicket(null); }} className="text-gray-400 hover:text-gray-600">
+                  <h2 className="text-xl font-bold text-intel-warning font-mono">Edit JIRA Ticket</h2>
+                  <button onClick={() => { setShowEditTicket(false); setEditingTicket(null); }} className="text-gray-400 hover:text-intel-accent transition-colors">
                     <XCircle className="w-6 h-6" />
                   </button>
                 </div>
-                <div className="p-3 bg-gray-50 rounded-lg text-sm text-gray-600 mb-4">
+                <div className="p-3 bg-intel-medium rounded text-sm text-gray-300 mb-4 font-mono">
                   {editingTicket.cve_id} / {editingTicket.vendor}
                 </div>
                 <form onSubmit={handleUpdateTicket} className="space-y-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Ticket Key *</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Ticket Key *</label>
                     <input
                       type="text"
                       required
                       value={ticketForm.ticket_key}
                       onChange={(e) => setTicketForm({...ticketForm, ticket_key: e.target.value.toUpperCase()})}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">JIRA URL</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">JIRA URL</label>
                     <input
                       type="url"
                       value={ticketForm.url}
                       onChange={(e) => setTicketForm({...ticketForm, url: e.target.value})}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Summary</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Summary</label>
                     <input
                       type="text"
                       value={ticketForm.summary}
                       onChange={(e) => setTicketForm({...ticketForm, summary: e.target.value})}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+                    <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">Status</label>
                     <select
                       value={ticketForm.status}
                       onChange={(e) => setTicketForm({...ticketForm, status: e.target.value})}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                      className="intel-input w-full"
                     >
                       <option value="Open">Open</option>
                       <option value="In Progress">In Progress</option>
@@ -1079,10 +1096,10 @@ export default function App() {
                     </select>
                   </div>
                   <div className="flex gap-3 pt-4">
-                    <button type="submit" className="flex-1 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors font-medium">
+                    <button type="submit" className="flex-1 intel-button intel-button-primary">
                       Save Changes
                     </button>
-                    <button type="button" onClick={() => { setShowEditTicket(false); setEditingTicket(null); }} className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                    <button type="button" onClick={() => { setShowEditTicket(false); setEditingTicket(null); }} className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider">
                       Cancel
                     </button>
                   </div>
@@ -1093,8 +1110,9 @@ export default function App() {
         )}
 
         {/* Quick Check */}
-        <div className="bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg shadow-md p-6 mb-6 border-2 border-[#0476D9]">
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">Quick CVE Status Check</h2>
+        <div className="intel-card rounded-lg p-6 mb-6 border-intel-accent relative overflow-hidden">
+          <div className="scan-line"></div>
+          <h2 className="text-lg font-semibold text-intel-accent mb-3 font-mono uppercase tracking-wider">Quick CVE Lookup</h2>
           <div className="flex gap-3">
             <input
               type="text"
@@ -1102,39 +1120,39 @@ export default function App() {
               value={quickCheckCVE}
               onChange={(e) => setQuickCheckCVE(e.target.value)}
               onKeyPress={(e) => e.key === 'Enter' && quickCheckCVEStatus()}
-              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+              className="flex-1 intel-input"
             />
             <button
               onClick={quickCheckCVEStatus}
-              className="px-6 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors font-medium shadow-md"
+              className="intel-button intel-button-primary"
             >
-              Check Status
+              Scan
             </button>
           </div>
-          
+
           {quickCheckResult && (
-            <div className={`mt-4 p-4 rounded-lg ${quickCheckResult.exists ? 'bg-green-50 border border-green-200' : 'bg-yellow-50 border border-yellow-200'}`}>
+            <div className={`mt-4 p-4 rounded border ${quickCheckResult.exists ? 'bg-intel-success/10 border-intel-success/30' : 'bg-intel-warning/10 border-intel-warning/30'}`}>
               {quickCheckResult.error ? (
                 <div className="flex items-start gap-3">
-                  <XCircle className="w-5 h-5 text-red-600 mt-0.5" />
+                  <XCircle className="w-5 h-5 text-intel-danger mt-0.5" />
                   <div>
-                    <p className="font-medium text-red-900">Error</p>
-                    <p className="text-sm text-red-700">{quickCheckResult.error}</p>
+                    <p className="font-medium text-intel-danger font-mono">Error</p>
+                    <p className="text-sm text-gray-400">{quickCheckResult.error}</p>
                   </div>
                 </div>
               ) : quickCheckResult.exists ? (
                 <div className="flex items-start gap-3">
-                  <CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
+                  <CheckCircle className="w-5 h-5 text-intel-success mt-0.5" />
                   <div className="flex-1">
-                    <p className="font-medium text-green-900">✓ CVE Addressed ({quickCheckResult.vendors.length} vendor{quickCheckResult.vendors.length > 1 ? 's' : ''})</p>
+                    <p className="font-medium text-intel-success font-mono">✓ CVE Addressed ({quickCheckResult.vendors.length} vendor{quickCheckResult.vendors.length > 1 ? 's' : ''})</p>
                     <div className="mt-3 space-y-3">
                       {quickCheckResult.vendors.map((vendorInfo, idx) => (
-                        <div key={idx} className="p-3 bg-white rounded border border-green-200">
-                          <p className="font-semibold text-gray-900 mb-2">{vendorInfo.vendor}</p>
-                          <div className="grid grid-cols-2 gap-2 text-sm text-gray-700 mb-2">
-                            <p><strong>Severity:</strong> {vendorInfo.severity}</p>
-                            <p><strong>Status:</strong> {vendorInfo.status}</p>
-                            <p><strong>Documents:</strong> {vendorInfo.total_documents} attached</p>
+                        <div key={idx} className="p-3 bg-intel-dark/50 rounded border border-intel-accent/20">
+                          <p className="font-semibold text-gray-200 mb-2 font-sans">{vendorInfo.vendor}</p>
+                          <div className="grid grid-cols-2 gap-2 text-sm text-gray-400 mb-2 font-mono">
+                            <p><strong className="text-gray-300">Severity:</strong> {vendorInfo.severity}</p>
+                            <p><strong className="text-gray-300">Status:</strong> {vendorInfo.status}</p>
+                            <p><strong className="text-gray-300">Documents:</strong> {vendorInfo.total_documents} attached</p>
                           </div>
                         </div>
                       ))}
@@ -1143,10 +1161,10 @@ export default function App() {
                 </div>
               ) : (
                 <div className="flex items-start gap-3">
-                  <AlertCircle className="w-5 h-5 text-yellow-600 mt-0.5" />
+                  <AlertCircle className="w-5 h-5 text-intel-warning mt-0.5" />
                   <div>
-                    <p className="font-medium text-yellow-900">Not Found</p>
-                    <p className="text-sm text-yellow-700">This CVE has not been addressed yet. No entry exists in the database.</p>
+                    <p className="font-medium text-intel-warning font-mono">Not Found</p>
+                    <p className="text-sm text-gray-400">This CVE has not been addressed yet. No entry exists in the database.</p>
                   </div>
                 </div>
               )}
@@ -1156,49 +1174,49 @@ export default function App() {
 
         {/* Open Vendor Tickets Dashboard */}
         {jiraTickets.filter(t => t.status !== 'Closed').length > 0 && (
-          <div className="bg-white rounded-lg shadow-md p-6 mb-6 border-l-4 border-orange-500">
+          <div className="intel-card rounded-lg p-6 mb-6 border-l-4 border-intel-warning">
             <div className="flex justify-between items-center mb-4">
-              <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-                <AlertCircle className="w-5 h-5 text-orange-500" />
-                Open Vendor Tickets ({jiraTickets.filter(t => t.status !== 'Closed').length})
+              <h2 className="text-lg font-semibold text-intel-warning flex items-center gap-2 font-mono uppercase tracking-wider">
+                <AlertCircle className="w-5 h-5" />
+                Open Tickets ({jiraTickets.filter(t => t.status !== 'Closed').length})
               </h2>
               {canWrite() && (
                 <button
                   onClick={() => { setAddTicketContext(null); setTicketForm({ cve_id: '', vendor: '', ticket_key: '', url: '', summary: '', status: 'Open' }); setShowAddTicket(true); }}
-                  className="px-3 py-1 text-sm bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors flex items-center gap-1"
+                  className="intel-button intel-button-primary flex items-center gap-1"
                 >
                   <Plus className="w-4 h-4" />
-                  Add Ticket
+                  Add
                 </button>
               )}
             </div>
             <div className="space-y-2">
               {jiraTickets.filter(t => t.status !== 'Closed').map(ticket => (
-                <div key={ticket.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
+                <div key={ticket.id} className="data-row flex items-center justify-between p-3 bg-intel-dark/50 rounded border border-intel-grid hover:border-intel-warning/30">
                   <div className="flex items-center gap-4 flex-1">
                     <a
                       href={ticket.url || '#'}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="font-mono text-sm font-semibold text-[#0476D9] hover:underline"
+                      className="font-mono text-sm font-semibold text-intel-accent hover:text-intel-warning transition-colors"
                     >
                       {ticket.ticket_key}
                     </a>
-                    <span className="text-sm text-gray-600">{ticket.cve_id}</span>
-                    <span className="text-sm text-gray-500">({ticket.vendor})</span>
-                    {ticket.summary && <span className="text-sm text-gray-600 truncate max-w-xs">{ticket.summary}</span>}
-                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${
-                      ticket.status === 'Open' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
+                    <span className="text-sm text-gray-300 font-mono">{ticket.cve_id}</span>
+                    <span className="text-sm text-gray-500 font-mono">({ticket.vendor})</span>
+                    {ticket.summary && <span className="text-sm text-gray-400 truncate max-w-xs">{ticket.summary}</span>}
+                    <span className={`status-badge ${
+                      ticket.status === 'Open' ? 'status-critical' : 'status-high'
                     }`}>
                       {ticket.status}
                     </span>
                   </div>
                   {canWrite() && (
                     <div className="flex gap-2">
-                      <button onClick={() => handleEditTicket(ticket)} className="text-gray-500 hover:text-orange-600">
+                      <button onClick={() => handleEditTicket(ticket)} className="text-gray-500 hover:text-intel-warning transition-colors">
                         <Edit2 className="w-4 h-4" />
                       </button>
-                      <button onClick={() => handleDeleteTicket(ticket)} className="text-gray-500 hover:text-red-600">
+                      <button onClick={() => handleDeleteTicket(ticket)} className="text-gray-500 hover:text-intel-danger transition-colors">
                         <Trash2 className="w-4 h-4" />
                       </button>
                     </div>
@@ -1210,10 +1228,10 @@ export default function App() {
         )}
 
         {/* Search and Filters */}
-        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div className="intel-card rounded-lg p-6 mb-6">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             <div className="md:col-span-1">
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                 <Search className="inline w-4 h-4 mr-1" />
                 Search CVEs
               </label>
@@ -1222,35 +1240,35 @@ export default function App() {
                 placeholder="CVE ID or description..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                className="intel-input w-full"
               />
             </div>
-            
+
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                 <Filter className="inline w-4 h-4 mr-1" />
                 Vendor
               </label>
               <select
                 value={selectedVendor}
                 onChange={(e) => setSelectedVendor(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                className="intel-input w-full"
               >
                 {vendors.map(vendor => (
                   <option key={vendor} value={vendor}>{vendor}</option>
                 ))}
               </select>
             </div>
-            
+
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                 <AlertCircle className="inline w-4 h-4 mr-1" />
                 Severity
               </label>
               <select
                 value={selectedSeverity}
                 onChange={(e) => setSelectedSeverity(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
+                className="intel-input w-full"
               >
                 {severityLevels.map(level => (
                   <option key={level} value={level}>{level}</option>
@@ -1262,35 +1280,36 @@ export default function App() {
 
         {/* Results Summary */}
         <div className="mb-4 flex justify-between items-center">
-          <p className="text-gray-600">
-            Found {Object.keys(filteredGroupedCVEs).length} CVE{Object.keys(filteredGroupedCVEs).length !== 1 ? 's' : ''} 
-            ({cves.length} vendor entr{cves.length !== 1 ? 'ies' : 'y'})
+          <p className="text-gray-400 font-mono text-sm">
+            <span className="text-intel-accent font-bold">{Object.keys(filteredGroupedCVEs).length}</span> CVE{Object.keys(filteredGroupedCVEs).length !== 1 ? 's' : ''}
+            <span className="text-gray-500 mx-2">•</span>
+            <span className="text-gray-300">{cves.length}</span> vendor entr{cves.length !== 1 ? 'ies' : 'y'}
           </p>
           {selectedDocuments.length > 0 && (
             <button
               onClick={exportSelectedDocuments}
-              className="flex items-center gap-2 px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors shadow-md"
+              className="intel-button intel-button-primary flex items-center gap-2"
             >
               <Download className="w-4 h-4" />
-              Export {selectedDocuments.length} Document{selectedDocuments.length !== 1 ? 's' : ''} for Report
+              Export {selectedDocuments.length} Doc{selectedDocuments.length !== 1 ? 's' : ''}
             </button>
           )}
         </div>
 
         {/* CVE List - Grouped by CVE ID */}
         {loading ? (
-          <div className="bg-white rounded-lg shadow-md p-12 text-center">
-            <Loader className="w-12 h-12 text-[#0476D9] mx-auto mb-4 animate-spin" />
-            <p className="text-gray-600">Loading CVEs...</p>
+          <div className="intel-card rounded-lg p-12 text-center">
+            <div className="loading-spinner w-12 h-12 mx-auto mb-4"></div>
+            <p className="text-gray-400 font-mono text-sm uppercase tracking-wider">Scanning Vulnerabilities...</p>
           </div>
         ) : error ? (
-          <div className="bg-white rounded-lg shadow-md p-12 text-center">
-            <XCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">Error Loading CVEs</h3>
-            <p className="text-gray-600 mb-4">{error}</p>
-            <button 
+          <div className="intel-card rounded-lg p-12 text-center border-intel-danger">
+            <XCircle className="w-12 h-12 text-intel-danger mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-gray-200 mb-2 font-mono">Error Loading CVEs</h3>
+            <p className="text-gray-400 mb-4">{error}</p>
+            <button
               onClick={fetchCVEs}
-              className="px-4 py-2 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] shadow-md"
+              className="intel-button intel-button-primary"
             >
               Retry
             </button>
@@ -1309,35 +1328,35 @@ export default function App() {
               const overallStatuses = [...new Set(vendorEntries.map(e => e.status))];
 
               return (
-              <div key={cveId} className="bg-white rounded-lg shadow-md border-2 border-gray-200">
+              <div key={cveId} className="intel-card rounded-lg relative overflow-hidden">
                 {/* Clickable CVE Header */}
                 <div
-                  className="p-6 cursor-pointer hover:bg-gray-50 transition-colors duration-200 select-none"
+                  className="p-6 cursor-pointer hover:bg-intel-medium/30 transition-all duration-200 select-none"
                   onClick={() => toggleCVEExpand(cveId)}
                 >
                   <div className="flex items-start justify-between">
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-3 mb-1">
                         <ChevronDown
-                          className={`w-5 h-5 text-gray-500 transition-transform duration-200 flex-shrink-0 ${isCVEExpanded ? 'rotate-0' : '-rotate-90'}`}
+                          className={`w-5 h-5 text-intel-accent transition-transform duration-200 flex-shrink-0 ${isCVEExpanded ? 'rotate-0' : '-rotate-90'}`}
                         />
-                        <h3 className="text-2xl font-bold text-gray-900">{cveId}</h3>
+                        <h3 className="text-2xl font-bold text-intel-accent font-mono tracking-tight">{cveId}</h3>
                       </div>
 
                       {/* Collapsed: truncated description + summary row */}
                       {!isCVEExpanded && (
                         <div className="ml-8">
-                          <p className="text-gray-600 text-sm truncate mb-2">{vendorEntries[0].description}</p>
+                          <p className="text-gray-400 text-sm truncate mb-2">{vendorEntries[0].description}</p>
                           <div className="flex items-center gap-3 flex-wrap">
-                            <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium ${getSeverityColor(highestSeverity)}`}>
+                            <span className={`status-badge status-${highestSeverity.toLowerCase()}`}>
                               {highestSeverity}
                             </span>
-                            <span className="text-xs text-gray-500">{vendorEntries.length} vendor{vendorEntries.length > 1 ? 's' : ''}</span>
-                            <span className="text-xs text-gray-500 flex items-center gap-1">
+                            <span className="text-xs text-gray-500 font-mono">{vendorEntries.length} vendor{vendorEntries.length > 1 ? 's' : ''}</span>
+                            <span className="text-xs text-gray-500 flex items-center gap-1 font-mono">
                               <FileText className="w-3 h-3" />
                               {totalDocCount} doc{totalDocCount !== 1 ? 's' : ''}
                             </span>
-                            <span className="text-xs text-gray-500">
+                            <span className="text-xs text-gray-500 font-mono">
                               {overallStatuses.join(', ')}
                             </span>
                           </div>
@@ -1347,18 +1366,18 @@ export default function App() {
                       {/* Expanded: full description + metadata */}
                       {isCVEExpanded && (
                         <div className="ml-8">
-                          <p className="text-gray-600 mb-3">{vendorEntries[0].description}</p>
-                          <div className="flex items-center gap-2 text-sm text-gray-500">
+                          <p className="text-gray-300 mb-3">{vendorEntries[0].description}</p>
+                          <div className="flex items-center gap-2 text-sm text-gray-400 font-mono">
                             <span>Published: {vendorEntries[0].published_date}</span>
-                            <span>•</span>
+                            <span className="text-intel-accent">•</span>
                             <span>{vendorEntries.length} affected vendor{vendorEntries.length > 1 ? 's' : ''}</span>
                             {canWrite() && vendorEntries.length >= 2 && (
                               <button
                                 onClick={(e) => { e.stopPropagation(); handleDeleteEntireCVE(cveId, vendorEntries.length); }}
-                                className="ml-2 px-3 py-1 text-xs text-red-600 hover:bg-red-50 rounded transition-colors border border-red-300 flex items-center gap-1"
+                                className="ml-2 px-3 py-1 text-xs intel-button intel-button-danger flex items-center gap-1"
                               >
                                 <Trash2 className="w-3 h-3" />
-                                Delete All Vendors
+                                Delete All
                               </button>
                             )}
                           </div>
@@ -1378,35 +1397,35 @@ export default function App() {
                         const isDocExpanded = selectedCVE === cve.cve_id && selectedVendorView === cve.vendor;
 
                         return (
-                          <div key={cve.id} className="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                          <div key={cve.id} className="border border-intel-accent/20 rounded-lg p-4 bg-intel-dark/50 hover:bg-intel-dark transition-all">
                             <div className="flex justify-between items-start">
                               <div className="flex-1">
                                 <div className="flex items-center gap-3 mb-2">
-                                  <h4 className="text-lg font-semibold text-gray-900">{cve.vendor}</h4>
-                                  <span className={`px-3 py-1 rounded-full text-sm font-medium ${getSeverityColor(cve.severity)}`}>
+                                  <h4 className="text-lg font-semibold text-gray-200 font-sans">{cve.vendor}</h4>
+                                  <span className={`status-badge status-${cve.severity.toLowerCase()}`}>
                                     {cve.severity}
                                   </span>
                                 </div>
-                                <div className="flex items-center gap-4 text-sm text-gray-500">
-                                  <span>Status: <span className="font-medium text-gray-700">{cve.status}</span></span>
+                                <div className="flex items-center gap-4 text-sm text-gray-400 font-mono">
+                                  <span>Status: <span className="font-medium text-gray-300">{cve.status}</span></span>
                                   <span className="flex items-center gap-1">
                                     <FileText className="w-4 h-4" />
-                                    {cve.document_count} document{cve.document_count !== 1 ? 's' : ''}
+                                    {cve.document_count} doc{cve.document_count !== 1 ? 's' : ''}
                                   </span>
                                 </div>
                               </div>
                               <div className="flex gap-2">
                                 <button
                                   onClick={() => handleViewDocuments(cve.cve_id, cve.vendor)}
-                                  className="px-4 py-2 text-[#0476D9] hover:bg-blue-50 rounded-lg transition-colors flex items-center gap-2 border border-[#0476D9]"
+                                  className="px-4 py-2 text-intel-accent hover:bg-intel-medium rounded border border-intel-accent/50 transition-all flex items-center gap-2 font-mono text-xs uppercase tracking-wider"
                                 >
                                   <Eye className="w-4 h-4" />
-                                  {isDocExpanded ? 'Hide' : 'View'} Documents
+                                  {isDocExpanded ? 'Hide' : 'View'}
                                 </button>
                                 {canWrite() && (
                                   <button
                                     onClick={() => handleEditCVE(cve)}
-                                    className="px-3 py-2 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors flex items-center gap-1 border border-orange-300"
+                                    className="px-3 py-2 text-intel-warning hover:bg-intel-medium rounded border border-intel-warning/50 transition-all flex items-center gap-1"
                                     title="Edit CVE entry"
                                   >
                                     <Edit2 className="w-4 h-4" />
@@ -1415,7 +1434,7 @@ export default function App() {
                                 {canWrite() && (
                                   <button
                                     onClick={() => handleDeleteCVEEntry(cve)}
-                                    className="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors flex items-center gap-1 border border-red-300"
+                                    className="px-3 py-2 text-intel-danger hover:bg-intel-medium rounded border border-intel-danger/50 transition-all flex items-center gap-1"
                                     title="Delete this vendor entry"
                                   >
                                     <Trash2 className="w-4 h-4" />
@@ -1426,31 +1445,31 @@ export default function App() {
 
                             {/* Documents Section */}
                             {isDocExpanded && (
-                              <div className="mt-4 pt-4 border-t border-gray-300">
-                                <h5 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
+                              <div className="mt-4 pt-4 border-t border-intel-accent/20">
+                                <h5 className="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2 font-mono uppercase tracking-wider">
                                   <FileText className="w-4 h-4" />
-                                  Documents for {cve.vendor} ({documents.length})
+                                  Documents ({documents.length})
                                 </h5>
                                 {documents.length > 0 ? (
                                   <div className="space-y-2">
                                     {documents.map(doc => (
                                       <div
                                         key={doc.id}
-                                        className="flex items-center justify-between p-3 bg-white rounded-lg hover:bg-gray-50 transition-colors border border-gray-200"
+                                        className="data-row flex items-center justify-between p-3 bg-intel-darkest/50 rounded hover:bg-intel-medium/30 transition-all border border-intel-grid"
                                       >
                                         <div className="flex items-center gap-3 flex-1">
                                           <input
                                             type="checkbox"
                                             checked={selectedDocuments.includes(doc.id)}
                                             onChange={() => toggleDocumentSelection(doc.id)}
-                                            className="w-4 h-4 text-[#0476D9] rounded focus:ring-2 focus:ring-[#0476D9]"
+                                            className="w-4 h-4 text-intel-accent rounded focus:ring-2 focus:ring-intel-accent bg-intel-dark border-intel-accent/50"
                                           />
-                                          <FileText className="w-5 h-5 text-gray-400" />
+                                          <FileText className="w-5 h-5 text-intel-accent/70" />
                                           <div className="flex-1">
-                                            <p className="text-sm font-medium text-gray-900">{doc.name}</p>
-                                            <p className="text-xs text-gray-500 capitalize">
-                                              {doc.type} • {doc.file_size}
-                                              {doc.notes && ` • ${doc.notes}`}
+                                            <p className="text-sm font-medium text-gray-200 font-mono">{doc.name}</p>
+                                            <p className="text-xs text-gray-500 capitalize font-mono">
+                                              {doc.type} <span className="text-intel-accent">•</span> {doc.file_size}
+                                              {doc.notes && <span> <span className="text-intel-accent">•</span> {doc.notes}</span>}
                                             </p>
                                           </div>
                                         </div>
@@ -1459,17 +1478,17 @@ export default function App() {
                                             href={`${API_HOST}/${doc.file_path}`}
                                             target="_blank"
                                             rel="noopener noreferrer"
-                                            className="px-3 py-1 text-sm text-[#0476D9] hover:bg-blue-50 rounded transition-colors border border-[#0476D9]"
+                                            className="px-3 py-1 text-sm text-intel-accent hover:bg-intel-medium rounded transition-all border border-intel-accent/50 font-mono uppercase tracking-wider"
                                           >
                                             View
                                           </a>
                                           {isAdmin() && (
                                           <button
                                             onClick={() => handleDeleteDocument(doc.id, cve.cve_id, cve.vendor)}
-                                            className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded transition-colors border border-red-600 flex items-center gap-1"
+                                            className="px-3 py-1 text-sm text-intel-danger hover:bg-intel-medium rounded transition-all border border-intel-danger/50 flex items-center gap-1 font-mono uppercase tracking-wider"
                                           >
                                             <Trash2 className="w-3 h-3" />
-                                            Delete
+                                            Del
                                           </button>
                                           )}
                                         </div>
@@ -1477,16 +1496,16 @@ export default function App() {
                                     ))}
                                   </div>
                                 ) : (
-                                  <p className="text-sm text-gray-500 italic">No documents attached yet</p>
+                                  <p className="text-sm text-gray-500 italic font-mono">No documents attached</p>
                                 )}
                                 {canWrite() && (
                                   <button
                                     onClick={() => handleFileUpload(cve.cve_id, cve.vendor)}
                                     disabled={uploadingFile}
-                                    className="mt-3 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2 disabled:opacity-50 border border-gray-300"
+                                    className="mt-3 px-4 py-2 text-sm text-gray-400 hover:text-intel-accent hover:bg-intel-medium rounded transition-all flex items-center gap-2 disabled:opacity-50 border border-gray-600 font-mono uppercase tracking-wider"
                                   >
                                     <Upload className="w-4 h-4" />
-                                    {uploadingFile ? 'Uploading...' : 'Upload Document'}
+                                    {uploadingFile ? 'Uploading...' : 'Upload Doc'}
                                   </button>
                                 )}
                               </div>
diff --git a/frontend/src/components/LoginForm.js b/frontend/src/components/LoginForm.js
index 846e768..a4914c2 100644
--- a/frontend/src/components/LoginForm.js
+++ b/frontend/src/components/LoginForm.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Loader, AlertCircle, Lock, User } from 'lucide-react';
+import { AlertCircle, Lock, User } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 
 export default function LoginForm() {
@@ -24,57 +24,60 @@ export default function LoginForm() {
     };
 
     return (
-        <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
-            <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-8">
+        <div className="min-h-screen bg-intel-darkest grid-bg flex items-center justify-center p-4 relative overflow-hidden fade-in">
+            {/* Scanning line effect */}
+            <div className="scan-line"></div>
+
+            <div className="intel-card rounded-lg shadow-2xl max-w-md w-full p-8 border-intel-accent relative z-10">
                 <div className="text-center mb-8">
-                    <div className="w-16 h-16 bg-[#0476D9] rounded-full flex items-center justify-center mx-auto mb-4">
-                        <Lock className="w-8 h-8 text-white" />
+                    <div className="w-16 h-16 bg-gradient-to-br from-intel-accent to-intel-accent-dim rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg" style={{boxShadow: '0 0 30px rgba(0, 217, 255, 0.4)'}}>
+                        <Lock className="w-8 h-8 text-intel-darkest" />
                     </div>
-                    <h1 className="text-2xl font-bold text-gray-900">CVE Dashboard</h1>
-                    <p className="text-gray-600 mt-2">Sign in to access the dashboard</p>
+                    <h1 className="text-3xl font-bold text-intel-accent font-mono tracking-tight">CVE INTEL</h1>
+                    <p className="text-gray-400 mt-2 font-sans text-sm">Threat Intelligence Access Portal</p>
                 </div>
 
                 {error && (
-                    <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
-                        <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-                        <p className="text-sm text-red-700">{error}</p>
+                    <div className="mb-6 p-4 bg-intel-danger/10 border border-intel-danger/30 rounded flex items-start gap-3">
+                        <AlertCircle className="w-5 h-5 text-intel-danger flex-shrink-0 mt-0.5" />
+                        <p className="text-sm text-gray-300">{error}</p>
                     </div>
                 )}
 
                 <form onSubmit={handleSubmit} className="space-y-6">
                     <div>
-                        <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
+                        <label htmlFor="username" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                             Username
                         </label>
                         <div className="relative">
-                            <User className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+                            <User className="w-5 h-5 text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                             <input
                                 id="username"
                                 type="text"
                                 required
                                 value={username}
                                 onChange={(e) => setUsername(e.target.value)}
-                                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
-                                placeholder="Enter your username"
+                                className="intel-input w-full pl-10"
+                                placeholder="Enter username"
                                 disabled={loading}
                             />
                         </div>
                     </div>
 
                     <div>
-                        <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                        <label htmlFor="password" className="block text-xs font-medium text-gray-400 mb-2 uppercase tracking-wider">
                             Password
                         </label>
                         <div className="relative">
-                            <Lock className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
+                            <Lock className="w-5 h-5 text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                             <input
                                 id="password"
                                 type="password"
                                 required
                                 value={password}
                                 onChange={(e) => setPassword(e.target.value)}
-                                className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0476D9] focus:border-transparent"
-                                placeholder="Enter your password"
+                                className="intel-input w-full pl-10"
+                                placeholder="Enter password"
                                 disabled={loading}
                             />
                         </div>
@@ -83,22 +86,22 @@ export default function LoginForm() {
                     <button
                         type="submit"
                         disabled={loading}
-                        className="w-full py-3 bg-[#0476D9] text-white rounded-lg hover:bg-[#0360B8] transition-colors font-medium shadow-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                        className="w-full intel-button intel-button-primary py-3 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                     >
                         {loading ? (
                             <>
-                                <Loader className="w-5 h-5 animate-spin" />
-                                Signing in...
+                                <div className="loading-spinner w-5 h-5"></div>
+                                <span className="font-mono uppercase tracking-wider">Authenticating...</span>
                             </>
                         ) : (
-                            'Sign In'
+                            <span className="font-mono uppercase tracking-wider">Access System</span>
                         )}
                     </button>
                 </form>
 
-                <div className="mt-6 pt-6 border-t border-gray-200">
-                    <p className="text-sm text-gray-500 text-center">
-                        Default admin credentials: admin / admin123
+                <div className="mt-6 pt-6 border-t border-intel-grid">
+                    <p className="text-sm text-gray-500 text-center font-mono">
+                        Default: <span className="text-intel-accent">admin</span> / <span className="text-intel-accent">admin123</span>
                     </p>
                 </div>
             </div>