diff --git a/app/static/index-openshift.html b/app/static/index-openshift.html
new file mode 100644
index 0000000..e2214d7
--- /dev/null
+++ b/app/static/index-openshift.html
@@ -0,0 +1,1051 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenShift Resource Governance Tool</title>
+    
+    <!-- Red Hat Fonts -->
+    <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=Red+Hat+Display:wght@300;400;500;600;700&family=Red+Hat+Text:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- PatternFly 6.3.1 CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly.css">
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly-addons.css">
+    
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Custom OpenShift-like styles -->
+    <style>
+        :root {
+            /* OpenShift Color Palette */
+            --pf-global--primary-color--100: #0066CC;
+            --pf-global--primary-color--200: #004080;
+            --pf-global--success-color--100: #3E8635;
+            --pf-global--warning-color--100: #F0AB00;
+            --pf-global--danger-color--100: #C9190B;
+            --pf-global--info-color--100: #009596;
+            
+            /* Dark Theme Colors */
+            --pf-global--BackgroundColor--100: #151515;
+            --pf-global--BackgroundColor--200: #1E1E1E;
+            --pf-global--BackgroundColor--300: #2B2B2B;
+            --pf-global--Color--100: #FFFFFF;
+            --pf-global--Color--200: #F0F0F0;
+            --pf-global--Color--300: #D2D2D2;
+            --pf-global--Color--400: #8A8A8A;
+            
+            /* Typography */
+            --pf-global--FontFamily--sans-serif: 'Red Hat Text', 'Helvetica Neue', Arial, sans-serif;
+            --pf-global--FontFamily--heading: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
+        }
+        
+        /* Dark Mode Base */
+        body {
+            background-color: var(--pf-global--BackgroundColor--100);
+            color: var(--pf-global--Color--100);
+            font-family: var(--pf-global--FontFamily--sans-serif);
+            margin: 0;
+            padding: 0;
+        }
+        
+        /* OpenShift-like Header */
+        .openshift-header {
+            background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
+            border-bottom: 1px solid #404040;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 24px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        
+        .openshift-header-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .openshift-header-right {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .hamburger-menu {
+            color: var(--pf-global--Color--100);
+            font-size: 18px;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        
+        .hamburger-menu:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .openshift-logo {
+            color: var(--pf-global--Color--100);
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 18px;
+            font-weight: 600;
+            text-decoration: none;
+        }
+        
+        .header-icon {
+            color: var(--pf-global--Color--100);
+            font-size: 16px;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+            position: relative;
+        }
+        
+        .header-icon:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .notification-badge {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            background-color: var(--pf-global--danger-color--100);
+            color: white;
+            font-size: 10px;
+            font-weight: 600;
+            padding: 2px 6px;
+            border-radius: 10px;
+            min-width: 16px;
+            text-align: center;
+        }
+        
+        .user-dropdown {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--pf-global--Color--100);
+            cursor: pointer;
+            padding: 8px 12px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        
+        .user-dropdown:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        /* OpenShift-like Sidebar */
+        .openshift-sidebar {
+            background-color: #000000;
+            width: 280px;
+            height: calc(100vh - 60px);
+            position: fixed;
+            left: 0;
+            top: 60px;
+            overflow-y: auto;
+            border-right: 1px solid #404040;
+            z-index: 1000;
+        }
+        
+        .sidebar-section {
+            padding: 16px 0;
+            border-bottom: 1px solid #404040;
+        }
+        
+        .sidebar-section-title {
+            color: var(--pf-global--Color--400);
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            padding: 0 24px 8px;
+            margin: 0;
+        }
+        
+        .sidebar-nav {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+        
+        .sidebar-nav-item {
+            margin: 0;
+        }
+        
+        .sidebar-nav-link {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: var(--pf-global--Color--100);
+            text-decoration: none;
+            padding: 12px 24px;
+            transition: all 0.2s;
+            border-left: 3px solid transparent;
+        }
+        
+        .sidebar-nav-link:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+            color: var(--pf-global--Color--100);
+        }
+        
+        .sidebar-nav-link.active {
+            background-color: rgba(0, 102, 204, 0.1);
+            border-left-color: var(--pf-global--primary-color--100);
+            color: var(--pf-global--primary-color--100);
+        }
+        
+        .sidebar-nav-icon {
+            font-size: 16px;
+            width: 20px;
+            text-align: center;
+        }
+        
+        .sidebar-nav-arrow {
+            margin-left: auto;
+            font-size: 12px;
+            opacity: 0.6;
+        }
+        
+        /* Main Content Area */
+        .main-content {
+            margin-left: 280px;
+            padding: 24px;
+            background-color: var(--pf-global--BackgroundColor--100);
+            min-height: calc(100vh - 60px);
+        }
+        
+        .page-header {
+            margin-bottom: 24px;
+        }
+        
+        .page-title {
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 28px;
+            font-weight: 600;
+            color: var(--pf-global--Color--100);
+            margin: 0 0 8px 0;
+        }
+        
+        .page-description {
+            color: var(--pf-global--Color--300);
+            font-size: 16px;
+            margin: 0;
+        }
+        
+        /* OpenShift-like Cards */
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+            margin-bottom: 24px;
+        }
+        
+        .openshift-card {
+            background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
+            border: 1px solid #404040;
+            border-radius: 8px;
+            padding: 24px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .openshift-card:hover {
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+            transform: translateY(-2px);
+        }
+        
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+        
+        .card-title {
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--pf-global--Color--100);
+            margin: 0;
+        }
+        
+        .card-action {
+            color: var(--pf-global--primary-color--100);
+            text-decoration: none;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        
+        .card-action:hover {
+            text-decoration: underline;
+        }
+        
+        /* Metrics Cards */
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
+            margin-bottom: 24px;
+        }
+        
+        .metric-card {
+            background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
+            border: 1px solid #404040;
+            border-radius: 8px;
+            padding: 20px;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+        
+        .metric-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+        }
+        
+        .metric-value {
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 32px;
+            font-weight: 700;
+            color: var(--pf-global--Color--100);
+            margin: 0 0 8px 0;
+        }
+        
+        .metric-label {
+            color: var(--pf-global--Color--300);
+            font-size: 14px;
+            font-weight: 500;
+            margin: 0;
+        }
+        
+        .metric-icon {
+            font-size: 24px;
+            margin-bottom: 12px;
+        }
+        
+        .metric-icon.success {
+            color: var(--pf-global--success-color--100);
+        }
+        
+        .metric-icon.warning {
+            color: var(--pf-global--warning-color--100);
+        }
+        
+        .metric-icon.danger {
+            color: var(--pf-global--danger-color--100);
+        }
+        
+        .metric-icon.info {
+            color: var(--pf-global--info-color--100);
+        }
+        
+        /* Status Indicators */
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 4px 12px;
+            border-radius: 16px;
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .status-indicator.success {
+            background-color: rgba(62, 134, 53, 0.2);
+            color: var(--pf-global--success-color--100);
+            border: 1px solid rgba(62, 134, 53, 0.3);
+        }
+        
+        .status-indicator.warning {
+            background-color: rgba(240, 171, 0, 0.2);
+            color: var(--pf-global--warning-color--100);
+            border: 1px solid rgba(240, 171, 0, 0.3);
+        }
+        
+        .status-indicator.danger {
+            background-color: rgba(201, 25, 11, 0.2);
+            color: var(--pf-global--danger-color--100);
+            border: 1px solid rgba(201, 25, 11, 0.3);
+        }
+        
+        .status-indicator.info {
+            background-color: rgba(0, 149, 150, 0.2);
+            color: var(--pf-global--info-color--100);
+            border: 1px solid rgba(0, 149, 150, 0.3);
+        }
+        
+        /* Tables */
+        .openshift-table {
+            background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
+            border: 1px solid #404040;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+        
+        .table-header {
+            background: linear-gradient(135deg, #404040 0%, #2B2B2B 100%);
+            padding: 16px 24px;
+            border-bottom: 1px solid #404040;
+        }
+        
+        .table-title {
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--pf-global--Color--100);
+            margin: 0;
+        }
+        
+        .table-content {
+            padding: 0;
+        }
+        
+        .table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        
+        .table th {
+            background-color: #404040;
+            color: var(--pf-global--Color--100);
+            font-weight: 600;
+            font-size: 14px;
+            padding: 12px 24px;
+            text-align: left;
+            border-bottom: 1px solid #404040;
+        }
+        
+        .table td {
+            color: var(--pf-global--Color--200);
+            font-size: 14px;
+            padding: 12px 24px;
+            border-bottom: 1px solid #404040;
+        }
+        
+        .table tr:hover {
+            background-color: rgba(255, 255, 255, 0.02);
+        }
+        
+        /* Buttons */
+        .openshift-button {
+            background: linear-gradient(135deg, var(--pf-global--primary-color--100) 0%, var(--pf-global--primary-color--200) 100%);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            padding: 8px 16px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .openshift-button:hover {
+            background: linear-gradient(135deg, var(--pf-global--primary-color--200) 0%, #003366 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
+        }
+        
+        .openshift-button.secondary {
+            background: linear-gradient(135deg, #404040 0%, #2B2B2B 100%);
+            color: var(--pf-global--Color--100);
+        }
+        
+        .openshift-button.secondary:hover {
+            background: linear-gradient(135deg, #505050 0%, #404040 100%);
+        }
+        
+        /* Loading States */
+        .loading-spinner {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 40px;
+            color: var(--pf-global--Color--300);
+        }
+        
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #404040;
+            border-top: 2px solid var(--pf-global--primary-color--100);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 12px;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        /* Responsive */
+        @media (max-width: 768px) {
+            .openshift-sidebar {
+                transform: translateX(-100%);
+                transition: transform 0.3s ease;
+            }
+            
+            .openshift-sidebar.open {
+                transform: translateX(0);
+            }
+            
+            .main-content {
+                margin-left: 0;
+            }
+            
+            .dashboard-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .metrics-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        
+        /* Hidden sections */
+        .section-hidden {
+            display: none !important;
+        }
+    </style>
+</head>
+<body>
+    <!-- OpenShift-like Header -->
+    <header class="openshift-header">
+        <div class="openshift-header-left">
+            <button class="hamburger-menu" id="sidebar-toggle">
+                <i class="fas fa-bars"></i>
+            </button>
+            <a href="#" class="openshift-logo">Red Hat OpenShift</a>
+        </div>
+        <div class="openshift-header-right">
+            <div class="header-icon">
+                <i class="fas fa-th"></i>
+            </div>
+            <div class="header-icon" style="position: relative;">
+                <i class="fas fa-bell"></i>
+                <span class="notification-badge">46</span>
+            </div>
+            <div class="header-icon">
+                <i class="fas fa-plus"></i>
+            </div>
+            <div class="header-icon">
+                <i class="fas fa-question-circle"></i>
+            </div>
+            <div class="user-dropdown">
+                <i class="fas fa-user-circle"></i>
+                <span>anobre</span>
+                <i class="fas fa-chevron-down"></i>
+            </div>
+        </div>
+    </header>
+
+    <!-- OpenShift-like Sidebar -->
+    <nav class="openshift-sidebar" id="sidebar">
+        <div class="sidebar-section">
+            <div class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link active" data-section="workload-scanner">
+                        <i class="fas fa-home sidebar-nav-icon"></i>
+                        <span>Home</span>
+                    </a>
+                </li>
+            </div>
+        </div>
+        
+        <div class="sidebar-section">
+            <h3 class="sidebar-section-title">Favorites</h3>
+            <ul class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link" data-section="workload-scanner">
+                        <i class="fas fa-search sidebar-nav-icon"></i>
+                        <span>Workload Scanner</span>
+                    </a>
+                </li>
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link" data-section="historical-analysis">
+                        <i class="fas fa-chart-line sidebar-nav-icon"></i>
+                        <span>Historical Analysis</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        
+        <div class="sidebar-section">
+            <h3 class="sidebar-section-title">Workloads</h3>
+            <ul class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-cube sidebar-nav-icon"></i>
+                        <span>Pods</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-layer-group sidebar-nav-icon"></i>
+                        <span>Deployments</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-server sidebar-nav-icon"></i>
+                        <span>Services</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        
+        <div class="sidebar-section">
+            <h3 class="sidebar-section-title">Observe</h3>
+            <ul class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-chart-bar sidebar-nav-icon"></i>
+                        <span>Metrics</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-search sidebar-nav-icon"></i>
+                        <span>Logs</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <!-- Workload Scanner Section -->
+        <section id="workload-scanner-section">
+            <div class="page-header">
+                <h1 class="page-title">Workload Scanner</h1>
+                <p class="page-description">Identify and analyze workloads with resource configuration issues</p>
+            </div>
+            
+            <!-- Metrics Cards -->
+            <div class="metrics-grid" id="metrics-grid">
+                <div class="metric-card">
+                    <div class="metric-icon success">
+                        <i class="fas fa-cube"></i>
+                    </div>
+                    <div class="metric-value" id="total-workloads">-</div>
+                    <div class="metric-label">Total Workloads</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-icon info">
+                        <i class="fas fa-layer-group"></i>
+                    </div>
+                    <div class="metric-value" id="total-namespaces">-</div>
+                    <div class="metric-label">Namespaces</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-icon danger">
+                        <i class="fas fa-exclamation-triangle"></i>
+                    </div>
+                    <div class="metric-value" id="critical-issues">-</div>
+                    <div class="metric-label">Critical Issues</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-icon warning">
+                        <i class="fas fa-exclamation-circle"></i>
+                    </div>
+                    <div class="metric-value" id="total-warnings">-</div>
+                    <div class="metric-label">Warnings</div>
+                </div>
+            </div>
+            
+            <!-- Workloads Table Card -->
+            <div class="openshift-card">
+                <div class="card-header">
+                    <h2 class="card-title">Workloads with Issues</h2>
+                    <button class="openshift-button" id="refresh-workloads">
+                        <i class="fas fa-sync-alt"></i>
+                        Refresh
+                    </button>
+                </div>
+                <div class="table-content" id="workloads-table-container">
+                    <div class="loading-spinner">
+                        <div class="spinner"></div>
+                        Loading workloads...
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Historical Analysis Section -->
+        <section id="historical-analysis-section" class="section-hidden">
+            <div class="page-header">
+                <h1 class="page-title">Historical Analysis</h1>
+                <p class="page-description">Resource consumption analysis and historical data</p>
+            </div>
+            
+            <!-- Workloads List Card -->
+            <div class="openshift-card">
+                <div class="card-header">
+                    <h2 class="card-title">Available Workloads</h2>
+                    <button class="openshift-button" id="refresh-historical">
+                        <i class="fas fa-sync-alt"></i>
+                        Refresh
+                    </button>
+                </div>
+                <div class="table-content" id="historical-workloads-container">
+                    <div class="loading-spinner">
+                        <div class="spinner"></div>
+                        Loading historical data...
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Workload Details Card (hidden initially) -->
+            <div class="openshift-card section-hidden" id="workload-details-container">
+                <div class="card-header">
+                    <h2 class="card-title" id="workload-details-title">Workload Details</h2>
+                    <button class="openshift-button secondary" id="close-workload-details">
+                        <i class="fas fa-times"></i>
+                        Close
+                    </button>
+                </div>
+                <div class="table-content" id="workload-details-content">
+                    <!-- Workload details will be populated here -->
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- JavaScript -->
+    <script>
+        // Global variables
+        let currentData = null;
+        let currentSection = 'workload-scanner';
+        
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeApp();
+        });
+        
+        function initializeApp() {
+            // Setup navigation
+            setupNavigation();
+            
+            // Load initial data
+            loadWorkloadScanner();
+        }
+        
+        function setupNavigation() {
+            // Sidebar navigation
+            const navLinks = document.querySelectorAll('.sidebar-nav-link[data-section]');
+            navLinks.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const section = this.getAttribute('data-section');
+                    showSection(section);
+                });
+            });
+            
+            // Sidebar toggle
+            document.getElementById('sidebar-toggle').addEventListener('click', function() {
+                const sidebar = document.getElementById('sidebar');
+                sidebar.classList.toggle('open');
+            });
+            
+            // Close workload details
+            document.getElementById('close-workload-details').addEventListener('click', function() {
+                document.getElementById('workload-details-container').classList.add('section-hidden');
+            });
+            
+            // Refresh buttons
+            document.getElementById('refresh-workloads').addEventListener('click', loadWorkloadScanner);
+            document.getElementById('refresh-historical').addEventListener('click', loadHistoricalAnalysis);
+        }
+        
+        function showSection(section) {
+            // Hide all sections
+            document.querySelectorAll('main section').forEach(sec => {
+                sec.classList.add('section-hidden');
+            });
+            
+            // Show selected section
+            document.getElementById(section + '-section').classList.remove('section-hidden');
+            
+            // Update active nav item
+            document.querySelectorAll('.sidebar-nav-link').forEach(link => {
+                link.classList.remove('active');
+            });
+            document.querySelector(`.sidebar-nav-link[data-section="${section}"]`).classList.add('active');
+            
+            currentSection = section;
+            
+            // Load section data
+            if (section === 'workload-scanner') {
+                loadWorkloadScanner();
+            } else if (section === 'historical-analysis') {
+                loadHistoricalAnalysis();
+            }
+        }
+        
+        async function loadWorkloadScanner() {
+            try {
+                showLoading('workloads-table-container');
+                
+                // Load cluster status
+                const clusterResponse = await fetch('/api/v1/cluster/status');
+                const clusterData = await clusterResponse.json();
+                
+                // Load validations
+                const validationsResponse = await fetch('/api/v1/validations');
+                const validationsData = await validationsResponse.json();
+                
+                currentData = { cluster: clusterData, validations: validationsData };
+                
+                // Update metrics cards
+                updateMetricsCards(clusterData);
+                
+                // Update workloads table
+                updateWorkloadsTable(validationsData);
+                
+            } catch (error) {
+                console.error('Error loading workload scanner data:', error);
+                showError('workloads-table-container', 'Failed to load workload data');
+            }
+        }
+        
+        async function loadHistoricalAnalysis() {
+            try {
+                showLoading('historical-workloads-container');
+                
+                // Load historical data
+                const response = await fetch('/api/v1/historical-analysis');
+                const data = await response.json();
+                
+                updateHistoricalWorkloads(data);
+                
+            } catch (error) {
+                console.error('Error loading historical analysis data:', error);
+                showError('historical-workloads-container', 'Failed to load historical data');
+            }
+        }
+        
+        function updateMetricsCards(data) {
+            document.getElementById('total-workloads').textContent = data.total_pods || 0;
+            document.getElementById('total-namespaces').textContent = data.total_namespaces || 0;
+            document.getElementById('critical-issues').textContent = data.critical_issues || 0;
+            document.getElementById('total-warnings').textContent = data.total_warnings || 0;
+        }
+        
+        function updateWorkloadsTable(data) {
+            const container = document.getElementById('workloads-table-container');
+            
+            if (!data.namespaces || data.namespaces.length === 0) {
+                container.innerHTML = `
+                    <div style="text-align: center; padding: 40px; color: var(--pf-global--Color--300);">
+                        <i class="fas fa-check-circle" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--success-color--100);"></i>
+                        <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">No Issues Found</h3>
+                        <p style="margin: 0;">All workloads are properly configured</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            const tableHTML = `
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Namespace</th>
+                            <th>Pods</th>
+                            <th>Issues</th>
+                            <th>Status</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${data.namespaces.map(namespace => `
+                            <tr>
+                                <td>
+                                    <strong style="color: var(--pf-global--Color--100);">${namespace.namespace}</strong>
+                                </td>
+                                <td>${Object.keys(namespace.pods || {}).length}</td>
+                                <td>${namespace.total_validations || 0}</td>
+                                <td>
+                                    <span class="status-indicator ${getSeverityClass(namespace)}">
+                                        ${getSeverityText(namespace)}
+                                    </span>
+                                </td>
+                                <td>
+                                    <button class="openshift-button secondary" onclick="analyzeWorkload('${namespace.namespace}')">
+                                        <i class="fas fa-search"></i>
+                                        Analyze
+                                    </button>
+                                </td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            `;
+            
+            container.innerHTML = tableHTML;
+        }
+        
+        function updateHistoricalWorkloads(data) {
+            const container = document.getElementById('historical-workloads-container');
+            
+            if (!data.workloads || data.workloads.length === 0) {
+                container.innerHTML = `
+                    <div style="text-align: center; padding: 40px; color: var(--pf-global--Color--300);">
+                        <i class="fas fa-chart-line" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--info-color--100);"></i>
+                        <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">No Historical Data</h3>
+                        <p style="margin: 0;">No workloads available for analysis</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            const tableHTML = `
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Workload</th>
+                            <th>Namespace</th>
+                            <th>Pods</th>
+                            <th>CPU Usage</th>
+                            <th>Memory Usage</th>
+                            <th>Last Updated</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${data.workloads.map(workload => `
+                            <tr>
+                                <td>
+                                    <strong style="color: var(--pf-global--Color--100);">${workload.name}</strong>
+                                </td>
+                                <td>${workload.namespace}</td>
+                                <td>${workload.pod_count || 0}</td>
+                                <td>${workload.cpu_usage || 'N/A'}</td>
+                                <td>${workload.memory_usage || 'N/A'}</td>
+                                <td>${workload.last_updated ? new Date(workload.last_updated).toLocaleString() : 'N/A'}</td>
+                                <td>
+                                    <button class="openshift-button" onclick="showWorkloadDetails('${workload.name}', '${workload.namespace}')">
+                                        <i class="fas fa-eye"></i>
+                                        View Details
+                                    </button>
+                                </td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            `;
+            
+            container.innerHTML = tableHTML;
+        }
+        
+        function showWorkloadDetails(workloadName, namespace) {
+            // Update title
+            document.getElementById('workload-details-title').textContent = `${workloadName} - ${namespace}`;
+            
+            // Load workload details
+            loadWorkloadDetails(workloadName, namespace);
+            
+            // Show details container
+            document.getElementById('workload-details-container').classList.remove('section-hidden');
+        }
+        
+        async function loadWorkloadDetails(workloadName, namespace) {
+            try {
+                const response = await fetch(`/api/v1/historical-analysis/${namespace}/${workloadName}`);
+                const data = await response.json();
+                
+                updateWorkloadDetails(data);
+                
+            } catch (error) {
+                console.error('Error loading workload details:', error);
+                document.getElementById('workload-details-content').innerHTML = 
+                    '<div style="text-align: center; padding: 40px; color: var(--pf-global--danger-color--100);">Failed to load workload details</div>';
+            }
+        }
+        
+        function updateWorkloadDetails(data) {
+            const container = document.getElementById('workload-details-content');
+            
+            container.innerHTML = `
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
+                    <div class="openshift-card">
+                        <div class="card-header">
+                            <h3 class="card-title">CPU Usage</h3>
+                        </div>
+                        <div style="padding: 20px; text-align: center; color: var(--pf-global--Color--300);">
+                            <i class="fas fa-microchip" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--info-color--100);"></i>
+                            <p>CPU usage data will be displayed here</p>
+                        </div>
+                    </div>
+                    <div class="openshift-card">
+                        <div class="card-header">
+                            <h3 class="card-title">Memory Usage</h3>
+                        </div>
+                        <div style="padding: 20px; text-align: center; color: var(--pf-global--Color--300);">
+                            <i class="fas fa-memory" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--warning-color--100);"></i>
+                            <p>Memory usage data will be displayed here</p>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+        
+        function analyzeWorkload(namespace) {
+            console.log('Analyzing workload:', namespace);
+            // TODO: Implement workload analysis
+        }
+        
+        function getSeverityClass(namespace) {
+            const breakdown = namespace.severity_breakdown || {};
+            if (breakdown.error > 0) return 'danger';
+            if (breakdown.warning > 0) return 'warning';
+            if (breakdown.info > 0) return 'info';
+            return 'success';
+        }
+        
+        function getSeverityText(namespace) {
+            const breakdown = namespace.severity_breakdown || {};
+            if (breakdown.error > 0) return 'Error';
+            if (breakdown.warning > 0) return 'Warning';
+            if (breakdown.info > 0) return 'Info';
+            return 'Healthy';
+        }
+        
+        function showLoading(containerId) {
+            const container = document.getElementById(containerId);
+            container.innerHTML = `
+                <div class="loading-spinner">
+                    <div class="spinner"></div>
+                    Loading...
+                </div>
+            `;
+        }
+        
+        function showError(containerId, message) {
+            const container = document.getElementById(containerId);
+            container.innerHTML = `
+                <div style="text-align: center; padding: 40px; color: var(--pf-global--danger-color--100);">
+                    <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 16px;"></i>
+                    <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">Error</h3>
+                    <p style="margin: 0;">${message}</p>
+                </div>
+            `;
+        }
+    </script>
+</body>
+</html>
diff --git a/app/static/index-patternfly-backup.html b/app/static/index-patternfly-backup.html
new file mode 100644
index 0000000..8c68f70
--- /dev/null
+++ b/app/static/index-patternfly-backup.html
@@ -0,0 +1,701 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenShift Resource Governance Tool</title>
+    
+    <!-- PatternFly 6.3.1 CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly.css">
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly-addons.css">
+    
+    <!-- PatternFly 6.3.1 Icons -->
+    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly-icons.css">
+    
+    <!-- Custom styles -->
+    <style>
+        .pf-c-page__main {
+            --pf-c-page__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
+        }
+        
+        .workload-card {
+            margin-bottom: var(--pf-global--spacer--md);
+        }
+        
+        .metric-card {
+            text-align: center;
+        }
+        
+        .metric-value {
+            font-size: var(--pf-global--FontSize--2xl);
+            font-weight: var(--pf-global--FontWeight--bold);
+            color: var(--pf-global--primary-color--100);
+        }
+        
+        .metric-label {
+            font-size: var(--pf-global--FontSize--sm);
+            color: var(--pf-global--Color--200);
+        }
+        
+        .severity-critical {
+            --pf-c-badge--m-read--BackgroundColor: var(--pf-global--danger-color--100);
+        }
+        
+        .severity-warning {
+            --pf-c-badge--m-read--BackgroundColor: var(--pf-global--warning-color--100);
+        }
+        
+        .severity-error {
+            --pf-c-badge--m-read--BackgroundColor: var(--pf-global--danger-color--200);
+        }
+        
+        .severity-info {
+            --pf-c-badge--m-read--BackgroundColor: var(--pf-global--info-color--100);
+        }
+        
+        .loading-spinner {
+            text-align: center;
+            padding: var(--pf-global--spacer--xl);
+        }
+        
+        .error-message {
+            color: var(--pf-global--danger-color--100);
+            text-align: center;
+            padding: var(--pf-global--spacer--lg);
+        }
+        
+        .breadcrumb-container {
+            margin-bottom: var(--pf-global--spacer--md);
+        }
+        
+        .chart-container {
+            height: 300px;
+            margin-bottom: var(--pf-global--spacer--lg);
+        }
+        
+        .workload-details {
+            margin-top: var(--pf-global--spacer--lg);
+        }
+        
+        .yaml-content {
+            font-family: 'Courier New', monospace;
+            font-size: var(--pf-global--FontSize--sm);
+            background-color: var(--pf-global--BackgroundColor--200);
+            padding: var(--pf-global--spacer--md);
+            border-radius: var(--pf-global--BorderRadius--sm);
+            white-space: pre-wrap;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <!-- Page Structure -->
+        <div class="pf-c-page" id="page-layout-default-nav">
+            <!-- Header -->
+            <header class="pf-c-page__header">
+                <div class="pf-c-page__header-brand">
+                    <div class="pf-c-page__header-brand-toggle">
+                        <button class="pf-c-button pf-m-plain" type="button" id="nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="primary-nav">
+                            <i class="fas fa-bars" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                    <div class="pf-c-page__header-brand-link">
+                        <img class="pf-c-brand" src="https://www.patternfly.org/assets/images/logo__pf--reverse-on-md.svg" alt="PatternFly" />
+                    </div>
+                </div>
+                <div class="pf-c-page__header-tools">
+                    <div class="pf-c-page__header-tools-group">
+                        <div class="pf-c-page__header-tools-item">
+                            <button class="pf-c-button pf-m-plain" type="button" aria-label="Settings">
+                                <i class="fas fa-cog" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                        <div class="pf-c-page__header-tools-item">
+                            <button class="pf-c-button pf-m-plain" type="button" aria-label="Help">
+                                <i class="fas fa-question-circle" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Sidebar -->
+            <div class="pf-c-page__sidebar" id="primary-nav">
+                <div class="pf-c-page__sidebar-body">
+                    <nav class="pf-c-nav" id="primary-nav" aria-label="Global">
+                        <ul class="pf-c-nav__list">
+                            <li class="pf-c-nav__item">
+                                <a href="#" class="pf-c-nav__link" data-section="workload-scanner">
+                                    <i class="fas fa-search" aria-hidden="true"></i>
+                                    Workload Scanner
+                                </a>
+                            </li>
+                            <li class="pf-c-nav__item">
+                                <a href="#" class="pf-c-nav__link" data-section="historical-analysis">
+                                    <i class="fas fa-chart-line" aria-hidden="true"></i>
+                                    Historical Analysis
+                                </a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <main class="pf-c-page__main" tabindex="-1">
+                <!-- Workload Scanner Section -->
+                <section class="pf-c-page__main-section" id="workload-scanner-section" style="display: block;">
+                    <div class="pf-c-page__main-breadcrumb">
+                        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
+                            <ol class="pf-c-breadcrumb__list">
+                                <li class="pf-c-breadcrumb__item">
+                                    <span class="pf-c-breadcrumb__item-divider">
+                                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                                    </span>
+                                    <a href="#" class="pf-c-breadcrumb__link">Workload Scanner</a>
+                                </li>
+                            </ol>
+                        </nav>
+                    </div>
+                    
+                    <div class="pf-c-page__main-section">
+                        <div class="pf-l-grid pf-m-gutter">
+                            <!-- Page Title -->
+                            <div class="pf-l-grid__item pf-m-12-col">
+                                <div class="pf-c-content">
+                                    <h1>Workload Scanner</h1>
+                                    <p>Identify and analyze workloads with resource configuration issues</p>
+                                </div>
+                            </div>
+                            
+                            <!-- Summary Cards -->
+                            <div class="pf-l-grid__item pf-m-12-col">
+                                <div class="pf-l-grid pf-m-gutter" id="summary-cards">
+                                    <!-- Cards will be populated by JavaScript -->
+                                </div>
+                            </div>
+                            
+                            <!-- Workloads Table -->
+                            <div class="pf-l-grid__item pf-m-12-col">
+                                <div class="pf-c-card">
+                                    <div class="pf-c-card__header">
+                                        <div class="pf-c-card__title">
+                                            <h2>Workloads with Issues</h2>
+                                        </div>
+                                        <div class="pf-c-card__actions">
+                                            <button class="pf-c-button pf-m-primary" id="refresh-workloads">
+                                                <i class="fas fa-sync-alt" aria-hidden="true"></i>
+                                                Refresh
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="pf-c-card__body">
+                                        <div id="workloads-table-container">
+                                            <div class="loading-spinner">
+                                                <div class="pf-c-spinner" role="progressbar" aria-label="Loading workloads">
+                                                    <span class="pf-c-spinner__clipper"></span>
+                                                    <span class="pf-c-spinner__lead-ball"></span>
+                                                    <span class="pf-c-spinner__tail-ball"></span>
+                                                </div>
+                                                <div>Loading workloads...</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Historical Analysis Section -->
+                <section class="pf-c-page__main-section" id="historical-analysis-section" style="display: none;">
+                    <div class="pf-c-page__main-breadcrumb">
+                        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
+                            <ol class="pf-c-breadcrumb__list">
+                                <li class="pf-c-breadcrumb__item">
+                                    <span class="pf-c-breadcrumb__item-divider">
+                                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                                    </span>
+                                    <a href="#" class="pf-c-breadcrumb__link" data-section="workload-scanner">Workload Scanner</a>
+                                </li>
+                                <li class="pf-c-breadcrumb__item">
+                                    <span class="pf-c-breadcrumb__item-divider">
+                                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="pf-c-breadcrumb__item-text">Historical Analysis</span>
+                                </li>
+                            </ol>
+                        </nav>
+                    </div>
+                    
+                    <div class="pf-c-page__main-section">
+                        <div class="pf-l-grid pf-m-gutter">
+                            <!-- Page Title -->
+                            <div class="pf-l-grid__item pf-m-12-col">
+                                <div class="pf-c-content">
+                                    <h1>Historical Analysis</h1>
+                                    <p>Resource consumption analysis and historical data</p>
+                                </div>
+                            </div>
+                            
+                            <!-- Workloads List -->
+                            <div class="pf-l-grid__item pf-m-12-col">
+                                <div class="pf-c-card">
+                                    <div class="pf-c-card__header">
+                                        <div class="pf-c-card__title">
+                                            <h2>Available Workloads</h2>
+                                        </div>
+                                        <div class="pf-c-card__actions">
+                                            <button class="pf-c-button pf-m-primary" id="refresh-historical">
+                                                <i class="fas fa-sync-alt" aria-hidden="true"></i>
+                                                Refresh
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="pf-c-card__body">
+                                        <div id="historical-workloads-container">
+                                            <div class="loading-spinner">
+                                                <div class="pf-c-spinner" role="progressbar" aria-label="Loading historical data">
+                                                    <span class="pf-c-spinner__clipper"></span>
+                                                    <span class="pf-c-spinner__lead-ball"></span>
+                                                    <span class="pf-c-spinner__tail-ball"></span>
+                                                </div>
+                                                <div>Loading historical data...</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- Workload Details (hidden initially) -->
+                            <div class="pf-l-grid__item pf-m-12-col" id="workload-details-container" style="display: none;">
+                                <div class="pf-c-card">
+                                    <div class="pf-c-card__header">
+                                        <div class="pf-c-card__title">
+                                            <h2 id="workload-details-title">Workload Details</h2>
+                                        </div>
+                                        <div class="pf-c-card__actions">
+                                            <button class="pf-c-button pf-m-plain" id="close-workload-details">
+                                                <i class="fas fa-times" aria-hidden="true"></i>
+                                                Close
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="pf-c-card__body">
+                                        <div id="workload-details-content">
+                                            <!-- Workload details will be populated here -->
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </div>
+    </div>
+
+    <!-- PatternFly 6.3.1 JavaScript -->
+    <script src="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly.js"></script>
+    
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Custom JavaScript -->
+    <script>
+        // Global variables
+        let currentData = null;
+        let currentSection = 'workload-scanner';
+        
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeApp();
+        });
+        
+        function initializeApp() {
+            // Setup navigation
+            setupNavigation();
+            
+            // Load initial data
+            loadWorkloadScanner();
+        }
+        
+        function setupNavigation() {
+            // Sidebar navigation
+            const navLinks = document.querySelectorAll('.pf-c-nav__link[data-section]');
+            navLinks.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const section = this.getAttribute('data-section');
+                    showSection(section);
+                });
+            });
+            
+            // Breadcrumb navigation
+            const breadcrumbLinks = document.querySelectorAll('.pf-c-breadcrumb__link[data-section]');
+            breadcrumbLinks.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const section = this.getAttribute('data-section');
+                    showSection(section);
+                });
+            });
+            
+            // Close workload details
+            document.getElementById('close-workload-details').addEventListener('click', function() {
+                document.getElementById('workload-details-container').style.display = 'none';
+            });
+            
+            // Refresh buttons
+            document.getElementById('refresh-workloads').addEventListener('click', loadWorkloadScanner);
+            document.getElementById('refresh-historical').addEventListener('click', loadHistoricalAnalysis);
+        }
+        
+        function showSection(section) {
+            // Hide all sections
+            document.querySelectorAll('.pf-c-page__main-section').forEach(sec => {
+                sec.style.display = 'none';
+            });
+            
+            // Show selected section
+            document.getElementById(section + '-section').style.display = 'block';
+            
+            // Update active nav item
+            document.querySelectorAll('.pf-c-nav__link').forEach(link => {
+                link.classList.remove('pf-m-current');
+            });
+            document.querySelector(`.pf-c-nav__link[data-section="${section}"]`).classList.add('pf-m-current');
+            
+            currentSection = section;
+            
+            // Load section data
+            if (section === 'workload-scanner') {
+                loadWorkloadScanner();
+            } else if (section === 'historical-analysis') {
+                loadHistoricalAnalysis();
+            }
+        }
+        
+        async function loadWorkloadScanner() {
+            try {
+                showLoading('workloads-table-container');
+                
+                // Load cluster status
+                const clusterResponse = await fetch('/api/v1/cluster/status');
+                const clusterData = await clusterResponse.json();
+                
+                // Load validations
+                const validationsResponse = await fetch('/api/v1/validations');
+                const validationsData = await validationsResponse.json();
+                
+                currentData = { cluster: clusterData, validations: validationsData };
+                
+                // Update summary cards
+                updateSummaryCards(clusterData);
+                
+                // Update workloads table
+                updateWorkloadsTable(validationsData);
+                
+            } catch (error) {
+                console.error('Error loading workload scanner data:', error);
+                showError('workloads-table-container', 'Failed to load workload data');
+            }
+        }
+        
+        async function loadHistoricalAnalysis() {
+            try {
+                showLoading('historical-workloads-container');
+                
+                // Load historical data
+                const response = await fetch('/api/v1/historical-analysis');
+                const data = await response.json();
+                
+                updateHistoricalWorkloads(data);
+                
+            } catch (error) {
+                console.error('Error loading historical analysis data:', error);
+                showError('historical-workloads-container', 'Failed to load historical data');
+            }
+        }
+        
+        function updateSummaryCards(data) {
+            const container = document.getElementById('summary-cards');
+            
+            const cards = [
+                {
+                    title: 'Total Workloads',
+                    value: data.total_pods || 0,
+                    icon: 'fas fa-cube',
+                    color: 'blue'
+                },
+                {
+                    title: 'Namespaces',
+                    value: data.total_namespaces || 0,
+                    icon: 'fas fa-layer-group',
+                    color: 'green'
+                },
+                {
+                    title: 'Critical Issues',
+                    value: data.critical_issues || 0,
+                    icon: 'fas fa-exclamation-triangle',
+                    color: 'red'
+                },
+                {
+                    title: 'Warnings',
+                    value: data.total_warnings || 0,
+                    icon: 'fas fa-exclamation-circle',
+                    color: 'orange'
+                }
+            ];
+            
+            container.innerHTML = cards.map(card => `
+                <div class="pf-l-grid__item pf-m-3-col">
+                    <div class="pf-c-card metric-card">
+                        <div class="pf-c-card__body">
+                            <div class="metric-value">${card.value}</div>
+                            <div class="metric-label">
+                                <i class="${card.icon}" aria-hidden="true"></i>
+                                ${card.title}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+        }
+        
+        function updateWorkloadsTable(data) {
+            const container = document.getElementById('workloads-table-container');
+            
+            if (!data.namespaces || data.namespaces.length === 0) {
+                container.innerHTML = '<div class="error-message">No workload data available</div>';
+                return;
+            }
+            
+            const tableHTML = `
+                <div class="pf-c-table">
+                    <table class="pf-c-table__table" role="grid" aria-label="Workloads table">
+                        <thead>
+                            <tr class="pf-c-table__row">
+                                <th class="pf-c-table__th">Namespace</th>
+                                <th class="pf-c-table__th">Pods</th>
+                                <th class="pf-c-table__th">Issues</th>
+                                <th class="pf-c-table__th">Severity</th>
+                                <th class="pf-c-table__th">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${data.namespaces.map(namespace => `
+                                <tr class="pf-c-table__row">
+                                    <td class="pf-c-table__td">
+                                        <strong>${namespace.namespace}</strong>
+                                    </td>
+                                    <td class="pf-c-table__td">${Object.keys(namespace.pods || {}).length}</td>
+                                    <td class="pf-c-table__td">${namespace.total_validations || 0}</td>
+                                    <td class="pf-c-table__td">
+                                        <span class="pf-c-badge severity-${getHighestSeverity(namespace)}">
+                                            ${getHighestSeverity(namespace)}
+                                        </span>
+                                    </td>
+                                    <td class="pf-c-table__td">
+                                        <div class="pf-c-button-group">
+                                            <button class="pf-c-button pf-m-primary pf-m-small" onclick="analyzeWorkload('${namespace.namespace}')">
+                                                Analyze
+                                            </button>
+                                            <button class="pf-c-button pf-m-secondary pf-m-small" onclick="fixWorkload('${namespace.namespace}')">
+                                                Fix
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
+                            `).join('')}
+                        </tbody>
+                    </table>
+                </div>
+            `;
+            
+            container.innerHTML = tableHTML;
+        }
+        
+        function updateHistoricalWorkloads(data) {
+            const container = document.getElementById('historical-workloads-container');
+            
+            if (!data.workloads || data.workloads.length === 0) {
+                container.innerHTML = '<div class="error-message">No historical data available</div>';
+                return;
+            }
+            
+            const tableHTML = `
+                <div class="pf-c-table">
+                    <table class="pf-c-table__table" role="grid" aria-label="Historical workloads table">
+                        <thead>
+                            <tr class="pf-c-table__row">
+                                <th class="pf-c-table__th">Workload</th>
+                                <th class="pf-c-table__th">Namespace</th>
+                                <th class="pf-c-table__th">CPU Usage</th>
+                                <th class="pf-c-table__th">Memory Usage</th>
+                                <th class="pf-c-table__th">Last Updated</th>
+                                <th class="pf-c-table__th">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${data.workloads.map(workload => `
+                                <tr class="pf-c-table__row">
+                                    <td class="pf-c-table__td">
+                                        <strong>${workload.name}</strong>
+                                    </td>
+                                    <td class="pf-c-table__td">${workload.namespace}</td>
+                                    <td class="pf-c-table__td">${workload.cpu_usage || 'N/A'}</td>
+                                    <td class="pf-c-table__td">${workload.memory_usage || 'N/A'}</td>
+                                    <td class="pf-c-table__td">${workload.last_updated || 'N/A'}</td>
+                                    <td class="pf-c-table__td">
+                                        <button class="pf-c-button pf-m-primary pf-m-small" onclick="showWorkloadDetails('${workload.name}', '${workload.namespace}')">
+                                            View Details
+                                        </button>
+                                    </td>
+                                </tr>
+                            `).join('')}
+                        </tbody>
+                    </table>
+                </div>
+            `;
+            
+            container.innerHTML = tableHTML;
+        }
+        
+        function showWorkloadDetails(workloadName, namespace) {
+            // Update breadcrumb
+            const breadcrumb = document.querySelector('#historical-analysis-section .pf-c-breadcrumb__list');
+            breadcrumb.innerHTML = `
+                <li class="pf-c-breadcrumb__item">
+                    <span class="pf-c-breadcrumb__item-divider">
+                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                    </span>
+                    <a href="#" class="pf-c-breadcrumb__link" data-section="workload-scanner">Workload Scanner</a>
+                </li>
+                <li class="pf-c-breadcrumb__item">
+                    <span class="pf-c-breadcrumb__item-divider">
+                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                    </span>
+                    <a href="#" class="pf-c-breadcrumb__link" data-section="historical-analysis">Historical Analysis</a>
+                </li>
+                <li class="pf-c-breadcrumb__item">
+                    <span class="pf-c-breadcrumb__item-divider">
+                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                    </span>
+                    <span class="pf-c-breadcrumb__item-text">${workloadName}</span>
+                </li>
+            `;
+            
+            // Update title
+            document.getElementById('workload-details-title').textContent = `${workloadName} - ${namespace}`;
+            
+            // Load workload details
+            loadWorkloadDetails(workloadName, namespace);
+            
+            // Show details container
+            document.getElementById('workload-details-container').style.display = 'block';
+        }
+        
+        async function loadWorkloadDetails(workloadName, namespace) {
+            try {
+                const response = await fetch(`/api/v1/historical-analysis/${namespace}/${workloadName}`);
+                const data = await response.json();
+                
+                updateWorkloadDetails(data);
+                
+            } catch (error) {
+                console.error('Error loading workload details:', error);
+                document.getElementById('workload-details-content').innerHTML = 
+                    '<div class="error-message">Failed to load workload details</div>';
+            }
+        }
+        
+        function updateWorkloadDetails(data) {
+            const container = document.getElementById('workload-details-content');
+            
+            container.innerHTML = `
+                <div class="pf-l-grid pf-m-gutter">
+                    <div class="pf-l-grid__item pf-m-6-col">
+                        <div class="pf-c-card">
+                            <div class="pf-c-card__header">
+                                <div class="pf-c-card__title">
+                                    <h3>CPU Usage</h3>
+                                </div>
+                            </div>
+                            <div class="pf-c-card__body">
+                                <div class="chart-container" id="cpu-chart">
+                                    <!-- CPU chart will be rendered here -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="pf-l-grid__item pf-m-6-col">
+                        <div class="pf-c-card">
+                            <div class="pf-c-card__header">
+                                <div class="pf-c-card__title">
+                                    <h3>Memory Usage</h3>
+                                </div>
+                            </div>
+                            <div class="pf-c-card__body">
+                                <div class="chart-container" id="memory-chart">
+                                    <!-- Memory chart will be rendered here -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="pf-l-grid__item pf-m-12-col">
+                        <div class="pf-c-card">
+                            <div class="pf-c-card__header">
+                                <div class="pf-c-card__title">
+                                    <h3>Resource Recommendations</h3>
+                                </div>
+                            </div>
+                            <div class="pf-c-card__body">
+                                <div class="yaml-content">${data.recommendations || 'No recommendations available'}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+        
+        function analyzeWorkload(namespace) {
+            console.log('Analyzing workload:', namespace);
+            // TODO: Implement workload analysis
+        }
+        
+        function fixWorkload(namespace) {
+            console.log('Fixing workload:', namespace);
+            // TODO: Implement workload fixing
+        }
+        
+        function getHighestSeverity(namespace) {
+            const breakdown = namespace.severity_breakdown || {};
+            if (breakdown.error > 0) return 'error';
+            if (breakdown.warning > 0) return 'warning';
+            if (breakdown.info > 0) return 'info';
+            return 'info';
+        }
+        
+        function showLoading(containerId) {
+            const container = document.getElementById(containerId);
+            container.innerHTML = `
+                <div class="loading-spinner">
+                    <div class="pf-c-spinner" role="progressbar" aria-label="Loading">
+                        <span class="pf-c-spinner__clipper"></span>
+                        <span class="pf-c-spinner__lead-ball"></span>
+                        <span class="pf-c-spinner__tail-ball"></span>
+                    </div>
+                    <div>Loading...</div>
+                </div>
+            `;
+        }
+        
+        function showError(containerId, message) {
+            const container = document.getElementById(containerId);
+            container.innerHTML = `<div class="error-message">${message}</div>`;
+        }
+    </script>
+</body>
+</html>
diff --git a/app/static/index.html b/app/static/index.html
index 8c68f70..e2214d7 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -5,304 +5,729 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OpenShift Resource Governance Tool</title>
     
+    <!-- Red Hat Fonts -->
+    <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=Red+Hat+Display:wght@300;400;500;600;700&family=Red+Hat+Text:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
     <!-- PatternFly 6.3.1 CSS -->
     <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly.css">
     <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly-addons.css">
     
-    <!-- PatternFly 6.3.1 Icons -->
-    <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly-icons.css">
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     
-    <!-- Custom styles -->
+    <!-- Custom OpenShift-like styles -->
     <style>
-        .pf-c-page__main {
-            --pf-c-page__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
+        :root {
+            /* OpenShift Color Palette */
+            --pf-global--primary-color--100: #0066CC;
+            --pf-global--primary-color--200: #004080;
+            --pf-global--success-color--100: #3E8635;
+            --pf-global--warning-color--100: #F0AB00;
+            --pf-global--danger-color--100: #C9190B;
+            --pf-global--info-color--100: #009596;
+            
+            /* Dark Theme Colors */
+            --pf-global--BackgroundColor--100: #151515;
+            --pf-global--BackgroundColor--200: #1E1E1E;
+            --pf-global--BackgroundColor--300: #2B2B2B;
+            --pf-global--Color--100: #FFFFFF;
+            --pf-global--Color--200: #F0F0F0;
+            --pf-global--Color--300: #D2D2D2;
+            --pf-global--Color--400: #8A8A8A;
+            
+            /* Typography */
+            --pf-global--FontFamily--sans-serif: 'Red Hat Text', 'Helvetica Neue', Arial, sans-serif;
+            --pf-global--FontFamily--heading: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
         }
         
-        .workload-card {
-            margin-bottom: var(--pf-global--spacer--md);
+        /* Dark Mode Base */
+        body {
+            background-color: var(--pf-global--BackgroundColor--100);
+            color: var(--pf-global--Color--100);
+            font-family: var(--pf-global--FontFamily--sans-serif);
+            margin: 0;
+            padding: 0;
         }
         
-        .metric-card {
+        /* OpenShift-like Header */
+        .openshift-header {
+            background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
+            border-bottom: 1px solid #404040;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 24px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        
+        .openshift-header-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .openshift-header-right {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .hamburger-menu {
+            color: var(--pf-global--Color--100);
+            font-size: 18px;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        
+        .hamburger-menu:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .openshift-logo {
+            color: var(--pf-global--Color--100);
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 18px;
+            font-weight: 600;
+            text-decoration: none;
+        }
+        
+        .header-icon {
+            color: var(--pf-global--Color--100);
+            font-size: 16px;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+            position: relative;
+        }
+        
+        .header-icon:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .notification-badge {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            background-color: var(--pf-global--danger-color--100);
+            color: white;
+            font-size: 10px;
+            font-weight: 600;
+            padding: 2px 6px;
+            border-radius: 10px;
+            min-width: 16px;
             text-align: center;
         }
         
-        .metric-value {
-            font-size: var(--pf-global--FontSize--2xl);
-            font-weight: var(--pf-global--FontWeight--bold);
+        .user-dropdown {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--pf-global--Color--100);
+            cursor: pointer;
+            padding: 8px 12px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        
+        .user-dropdown:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        /* OpenShift-like Sidebar */
+        .openshift-sidebar {
+            background-color: #000000;
+            width: 280px;
+            height: calc(100vh - 60px);
+            position: fixed;
+            left: 0;
+            top: 60px;
+            overflow-y: auto;
+            border-right: 1px solid #404040;
+            z-index: 1000;
+        }
+        
+        .sidebar-section {
+            padding: 16px 0;
+            border-bottom: 1px solid #404040;
+        }
+        
+        .sidebar-section-title {
+            color: var(--pf-global--Color--400);
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            padding: 0 24px 8px;
+            margin: 0;
+        }
+        
+        .sidebar-nav {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+        
+        .sidebar-nav-item {
+            margin: 0;
+        }
+        
+        .sidebar-nav-link {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: var(--pf-global--Color--100);
+            text-decoration: none;
+            padding: 12px 24px;
+            transition: all 0.2s;
+            border-left: 3px solid transparent;
+        }
+        
+        .sidebar-nav-link:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+            color: var(--pf-global--Color--100);
+        }
+        
+        .sidebar-nav-link.active {
+            background-color: rgba(0, 102, 204, 0.1);
+            border-left-color: var(--pf-global--primary-color--100);
             color: var(--pf-global--primary-color--100);
         }
         
+        .sidebar-nav-icon {
+            font-size: 16px;
+            width: 20px;
+            text-align: center;
+        }
+        
+        .sidebar-nav-arrow {
+            margin-left: auto;
+            font-size: 12px;
+            opacity: 0.6;
+        }
+        
+        /* Main Content Area */
+        .main-content {
+            margin-left: 280px;
+            padding: 24px;
+            background-color: var(--pf-global--BackgroundColor--100);
+            min-height: calc(100vh - 60px);
+        }
+        
+        .page-header {
+            margin-bottom: 24px;
+        }
+        
+        .page-title {
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 28px;
+            font-weight: 600;
+            color: var(--pf-global--Color--100);
+            margin: 0 0 8px 0;
+        }
+        
+        .page-description {
+            color: var(--pf-global--Color--300);
+            font-size: 16px;
+            margin: 0;
+        }
+        
+        /* OpenShift-like Cards */
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+            margin-bottom: 24px;
+        }
+        
+        .openshift-card {
+            background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
+            border: 1px solid #404040;
+            border-radius: 8px;
+            padding: 24px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+        }
+        
+        .openshift-card:hover {
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+            transform: translateY(-2px);
+        }
+        
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+        
+        .card-title {
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--pf-global--Color--100);
+            margin: 0;
+        }
+        
+        .card-action {
+            color: var(--pf-global--primary-color--100);
+            text-decoration: none;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        
+        .card-action:hover {
+            text-decoration: underline;
+        }
+        
+        /* Metrics Cards */
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
+            margin-bottom: 24px;
+        }
+        
+        .metric-card {
+            background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
+            border: 1px solid #404040;
+            border-radius: 8px;
+            padding: 20px;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+        
+        .metric-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+        }
+        
+        .metric-value {
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 32px;
+            font-weight: 700;
+            color: var(--pf-global--Color--100);
+            margin: 0 0 8px 0;
+        }
+        
         .metric-label {
-            font-size: var(--pf-global--FontSize--sm);
-            color: var(--pf-global--Color--200);
+            color: var(--pf-global--Color--300);
+            font-size: 14px;
+            font-weight: 500;
+            margin: 0;
         }
         
-        .severity-critical {
-            --pf-c-badge--m-read--BackgroundColor: var(--pf-global--danger-color--100);
+        .metric-icon {
+            font-size: 24px;
+            margin-bottom: 12px;
         }
         
-        .severity-warning {
-            --pf-c-badge--m-read--BackgroundColor: var(--pf-global--warning-color--100);
+        .metric-icon.success {
+            color: var(--pf-global--success-color--100);
         }
         
-        .severity-error {
-            --pf-c-badge--m-read--BackgroundColor: var(--pf-global--danger-color--200);
+        .metric-icon.warning {
+            color: var(--pf-global--warning-color--100);
         }
         
-        .severity-info {
-            --pf-c-badge--m-read--BackgroundColor: var(--pf-global--info-color--100);
-        }
-        
-        .loading-spinner {
-            text-align: center;
-            padding: var(--pf-global--spacer--xl);
-        }
-        
-        .error-message {
+        .metric-icon.danger {
             color: var(--pf-global--danger-color--100);
-            text-align: center;
-            padding: var(--pf-global--spacer--lg);
         }
         
-        .breadcrumb-container {
-            margin-bottom: var(--pf-global--spacer--md);
+        .metric-icon.info {
+            color: var(--pf-global--info-color--100);
         }
         
-        .chart-container {
-            height: 300px;
-            margin-bottom: var(--pf-global--spacer--lg);
+        /* Status Indicators */
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 4px 12px;
+            border-radius: 16px;
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
         
-        .workload-details {
-            margin-top: var(--pf-global--spacer--lg);
+        .status-indicator.success {
+            background-color: rgba(62, 134, 53, 0.2);
+            color: var(--pf-global--success-color--100);
+            border: 1px solid rgba(62, 134, 53, 0.3);
         }
         
-        .yaml-content {
-            font-family: 'Courier New', monospace;
-            font-size: var(--pf-global--FontSize--sm);
-            background-color: var(--pf-global--BackgroundColor--200);
-            padding: var(--pf-global--spacer--md);
-            border-radius: var(--pf-global--BorderRadius--sm);
-            white-space: pre-wrap;
-            overflow-x: auto;
+        .status-indicator.warning {
+            background-color: rgba(240, 171, 0, 0.2);
+            color: var(--pf-global--warning-color--100);
+            border: 1px solid rgba(240, 171, 0, 0.3);
+        }
+        
+        .status-indicator.danger {
+            background-color: rgba(201, 25, 11, 0.2);
+            color: var(--pf-global--danger-color--100);
+            border: 1px solid rgba(201, 25, 11, 0.3);
+        }
+        
+        .status-indicator.info {
+            background-color: rgba(0, 149, 150, 0.2);
+            color: var(--pf-global--info-color--100);
+            border: 1px solid rgba(0, 149, 150, 0.3);
+        }
+        
+        /* Tables */
+        .openshift-table {
+            background: linear-gradient(135deg, #2B2B2B 0%, #1E1E1E 100%);
+            border: 1px solid #404040;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+        
+        .table-header {
+            background: linear-gradient(135deg, #404040 0%, #2B2B2B 100%);
+            padding: 16px 24px;
+            border-bottom: 1px solid #404040;
+        }
+        
+        .table-title {
+            font-family: var(--pf-global--FontFamily--heading);
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--pf-global--Color--100);
+            margin: 0;
+        }
+        
+        .table-content {
+            padding: 0;
+        }
+        
+        .table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        
+        .table th {
+            background-color: #404040;
+            color: var(--pf-global--Color--100);
+            font-weight: 600;
+            font-size: 14px;
+            padding: 12px 24px;
+            text-align: left;
+            border-bottom: 1px solid #404040;
+        }
+        
+        .table td {
+            color: var(--pf-global--Color--200);
+            font-size: 14px;
+            padding: 12px 24px;
+            border-bottom: 1px solid #404040;
+        }
+        
+        .table tr:hover {
+            background-color: rgba(255, 255, 255, 0.02);
+        }
+        
+        /* Buttons */
+        .openshift-button {
+            background: linear-gradient(135deg, var(--pf-global--primary-color--100) 0%, var(--pf-global--primary-color--200) 100%);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            padding: 8px 16px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .openshift-button:hover {
+            background: linear-gradient(135deg, var(--pf-global--primary-color--200) 0%, #003366 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
+        }
+        
+        .openshift-button.secondary {
+            background: linear-gradient(135deg, #404040 0%, #2B2B2B 100%);
+            color: var(--pf-global--Color--100);
+        }
+        
+        .openshift-button.secondary:hover {
+            background: linear-gradient(135deg, #505050 0%, #404040 100%);
+        }
+        
+        /* Loading States */
+        .loading-spinner {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 40px;
+            color: var(--pf-global--Color--300);
+        }
+        
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #404040;
+            border-top: 2px solid var(--pf-global--primary-color--100);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 12px;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        /* Responsive */
+        @media (max-width: 768px) {
+            .openshift-sidebar {
+                transform: translateX(-100%);
+                transition: transform 0.3s ease;
+            }
+            
+            .openshift-sidebar.open {
+                transform: translateX(0);
+            }
+            
+            .main-content {
+                margin-left: 0;
+            }
+            
+            .dashboard-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .metrics-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        
+        /* Hidden sections */
+        .section-hidden {
+            display: none !important;
         }
     </style>
 </head>
 <body>
-    <div id="app">
-        <!-- Page Structure -->
-        <div class="pf-c-page" id="page-layout-default-nav">
-            <!-- Header -->
-            <header class="pf-c-page__header">
-                <div class="pf-c-page__header-brand">
-                    <div class="pf-c-page__header-brand-toggle">
-                        <button class="pf-c-button pf-m-plain" type="button" id="nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="primary-nav">
-                            <i class="fas fa-bars" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                    <div class="pf-c-page__header-brand-link">
-                        <img class="pf-c-brand" src="https://www.patternfly.org/assets/images/logo__pf--reverse-on-md.svg" alt="PatternFly" />
-                    </div>
-                </div>
-                <div class="pf-c-page__header-tools">
-                    <div class="pf-c-page__header-tools-group">
-                        <div class="pf-c-page__header-tools-item">
-                            <button class="pf-c-button pf-m-plain" type="button" aria-label="Settings">
-                                <i class="fas fa-cog" aria-hidden="true"></i>
-                            </button>
-                        </div>
-                        <div class="pf-c-page__header-tools-item">
-                            <button class="pf-c-button pf-m-plain" type="button" aria-label="Help">
-                                <i class="fas fa-question-circle" aria-hidden="true"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </header>
+    <!-- OpenShift-like Header -->
+    <header class="openshift-header">
+        <div class="openshift-header-left">
+            <button class="hamburger-menu" id="sidebar-toggle">
+                <i class="fas fa-bars"></i>
+            </button>
+            <a href="#" class="openshift-logo">Red Hat OpenShift</a>
+        </div>
+        <div class="openshift-header-right">
+            <div class="header-icon">
+                <i class="fas fa-th"></i>
+            </div>
+            <div class="header-icon" style="position: relative;">
+                <i class="fas fa-bell"></i>
+                <span class="notification-badge">46</span>
+            </div>
+            <div class="header-icon">
+                <i class="fas fa-plus"></i>
+            </div>
+            <div class="header-icon">
+                <i class="fas fa-question-circle"></i>
+            </div>
+            <div class="user-dropdown">
+                <i class="fas fa-user-circle"></i>
+                <span>anobre</span>
+                <i class="fas fa-chevron-down"></i>
+            </div>
+        </div>
+    </header>
 
-            <!-- Sidebar -->
-            <div class="pf-c-page__sidebar" id="primary-nav">
-                <div class="pf-c-page__sidebar-body">
-                    <nav class="pf-c-nav" id="primary-nav" aria-label="Global">
-                        <ul class="pf-c-nav__list">
-                            <li class="pf-c-nav__item">
-                                <a href="#" class="pf-c-nav__link" data-section="workload-scanner">
-                                    <i class="fas fa-search" aria-hidden="true"></i>
-                                    Workload Scanner
-                                </a>
-                            </li>
-                            <li class="pf-c-nav__item">
-                                <a href="#" class="pf-c-nav__link" data-section="historical-analysis">
-                                    <i class="fas fa-chart-line" aria-hidden="true"></i>
-                                    Historical Analysis
-                                </a>
-                            </li>
-                        </ul>
-                    </nav>
+    <!-- OpenShift-like Sidebar -->
+    <nav class="openshift-sidebar" id="sidebar">
+        <div class="sidebar-section">
+            <div class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link active" data-section="workload-scanner">
+                        <i class="fas fa-home sidebar-nav-icon"></i>
+                        <span>Home</span>
+                    </a>
+                </li>
+            </div>
+        </div>
+        
+        <div class="sidebar-section">
+            <h3 class="sidebar-section-title">Favorites</h3>
+            <ul class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link" data-section="workload-scanner">
+                        <i class="fas fa-search sidebar-nav-icon"></i>
+                        <span>Workload Scanner</span>
+                    </a>
+                </li>
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link" data-section="historical-analysis">
+                        <i class="fas fa-chart-line sidebar-nav-icon"></i>
+                        <span>Historical Analysis</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        
+        <div class="sidebar-section">
+            <h3 class="sidebar-section-title">Workloads</h3>
+            <ul class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-cube sidebar-nav-icon"></i>
+                        <span>Pods</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-layer-group sidebar-nav-icon"></i>
+                        <span>Deployments</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-server sidebar-nav-icon"></i>
+                        <span>Services</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        
+        <div class="sidebar-section">
+            <h3 class="sidebar-section-title">Observe</h3>
+            <ul class="sidebar-nav">
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-chart-bar sidebar-nav-icon"></i>
+                        <span>Metrics</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+                <li class="sidebar-nav-item">
+                    <a href="#" class="sidebar-nav-link">
+                        <i class="fas fa-search sidebar-nav-icon"></i>
+                        <span>Logs</span>
+                        <i class="fas fa-chevron-right sidebar-nav-arrow"></i>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <!-- Workload Scanner Section -->
+        <section id="workload-scanner-section">
+            <div class="page-header">
+                <h1 class="page-title">Workload Scanner</h1>
+                <p class="page-description">Identify and analyze workloads with resource configuration issues</p>
+            </div>
+            
+            <!-- Metrics Cards -->
+            <div class="metrics-grid" id="metrics-grid">
+                <div class="metric-card">
+                    <div class="metric-icon success">
+                        <i class="fas fa-cube"></i>
+                    </div>
+                    <div class="metric-value" id="total-workloads">-</div>
+                    <div class="metric-label">Total Workloads</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-icon info">
+                        <i class="fas fa-layer-group"></i>
+                    </div>
+                    <div class="metric-value" id="total-namespaces">-</div>
+                    <div class="metric-label">Namespaces</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-icon danger">
+                        <i class="fas fa-exclamation-triangle"></i>
+                    </div>
+                    <div class="metric-value" id="critical-issues">-</div>
+                    <div class="metric-label">Critical Issues</div>
+                </div>
+                <div class="metric-card">
+                    <div class="metric-icon warning">
+                        <i class="fas fa-exclamation-circle"></i>
+                    </div>
+                    <div class="metric-value" id="total-warnings">-</div>
+                    <div class="metric-label">Warnings</div>
                 </div>
             </div>
+            
+            <!-- Workloads Table Card -->
+            <div class="openshift-card">
+                <div class="card-header">
+                    <h2 class="card-title">Workloads with Issues</h2>
+                    <button class="openshift-button" id="refresh-workloads">
+                        <i class="fas fa-sync-alt"></i>
+                        Refresh
+                    </button>
+                </div>
+                <div class="table-content" id="workloads-table-container">
+                    <div class="loading-spinner">
+                        <div class="spinner"></div>
+                        Loading workloads...
+                    </div>
+                </div>
+            </div>
+        </section>
 
-            <!-- Main Content -->
-            <main class="pf-c-page__main" tabindex="-1">
-                <!-- Workload Scanner Section -->
-                <section class="pf-c-page__main-section" id="workload-scanner-section" style="display: block;">
-                    <div class="pf-c-page__main-breadcrumb">
-                        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-                            <ol class="pf-c-breadcrumb__list">
-                                <li class="pf-c-breadcrumb__item">
-                                    <span class="pf-c-breadcrumb__item-divider">
-                                        <i class="fas fa-angle-right" aria-hidden="true"></i>
-                                    </span>
-                                    <a href="#" class="pf-c-breadcrumb__link">Workload Scanner</a>
-                                </li>
-                            </ol>
-                        </nav>
+        <!-- Historical Analysis Section -->
+        <section id="historical-analysis-section" class="section-hidden">
+            <div class="page-header">
+                <h1 class="page-title">Historical Analysis</h1>
+                <p class="page-description">Resource consumption analysis and historical data</p>
+            </div>
+            
+            <!-- Workloads List Card -->
+            <div class="openshift-card">
+                <div class="card-header">
+                    <h2 class="card-title">Available Workloads</h2>
+                    <button class="openshift-button" id="refresh-historical">
+                        <i class="fas fa-sync-alt"></i>
+                        Refresh
+                    </button>
+                </div>
+                <div class="table-content" id="historical-workloads-container">
+                    <div class="loading-spinner">
+                        <div class="spinner"></div>
+                        Loading historical data...
                     </div>
-                    
-                    <div class="pf-c-page__main-section">
-                        <div class="pf-l-grid pf-m-gutter">
-                            <!-- Page Title -->
-                            <div class="pf-l-grid__item pf-m-12-col">
-                                <div class="pf-c-content">
-                                    <h1>Workload Scanner</h1>
-                                    <p>Identify and analyze workloads with resource configuration issues</p>
-                                </div>
-                            </div>
-                            
-                            <!-- Summary Cards -->
-                            <div class="pf-l-grid__item pf-m-12-col">
-                                <div class="pf-l-grid pf-m-gutter" id="summary-cards">
-                                    <!-- Cards will be populated by JavaScript -->
-                                </div>
-                            </div>
-                            
-                            <!-- Workloads Table -->
-                            <div class="pf-l-grid__item pf-m-12-col">
-                                <div class="pf-c-card">
-                                    <div class="pf-c-card__header">
-                                        <div class="pf-c-card__title">
-                                            <h2>Workloads with Issues</h2>
-                                        </div>
-                                        <div class="pf-c-card__actions">
-                                            <button class="pf-c-button pf-m-primary" id="refresh-workloads">
-                                                <i class="fas fa-sync-alt" aria-hidden="true"></i>
-                                                Refresh
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="pf-c-card__body">
-                                        <div id="workloads-table-container">
-                                            <div class="loading-spinner">
-                                                <div class="pf-c-spinner" role="progressbar" aria-label="Loading workloads">
-                                                    <span class="pf-c-spinner__clipper"></span>
-                                                    <span class="pf-c-spinner__lead-ball"></span>
-                                                    <span class="pf-c-spinner__tail-ball"></span>
-                                                </div>
-                                                <div>Loading workloads...</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
+                </div>
+            </div>
+            
+            <!-- Workload Details Card (hidden initially) -->
+            <div class="openshift-card section-hidden" id="workload-details-container">
+                <div class="card-header">
+                    <h2 class="card-title" id="workload-details-title">Workload Details</h2>
+                    <button class="openshift-button secondary" id="close-workload-details">
+                        <i class="fas fa-times"></i>
+                        Close
+                    </button>
+                </div>
+                <div class="table-content" id="workload-details-content">
+                    <!-- Workload details will be populated here -->
+                </div>
+            </div>
+        </section>
+    </main>
 
-                <!-- Historical Analysis Section -->
-                <section class="pf-c-page__main-section" id="historical-analysis-section" style="display: none;">
-                    <div class="pf-c-page__main-breadcrumb">
-                        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-                            <ol class="pf-c-breadcrumb__list">
-                                <li class="pf-c-breadcrumb__item">
-                                    <span class="pf-c-breadcrumb__item-divider">
-                                        <i class="fas fa-angle-right" aria-hidden="true"></i>
-                                    </span>
-                                    <a href="#" class="pf-c-breadcrumb__link" data-section="workload-scanner">Workload Scanner</a>
-                                </li>
-                                <li class="pf-c-breadcrumb__item">
-                                    <span class="pf-c-breadcrumb__item-divider">
-                                        <i class="fas fa-angle-right" aria-hidden="true"></i>
-                                    </span>
-                                    <span class="pf-c-breadcrumb__item-text">Historical Analysis</span>
-                                </li>
-                            </ol>
-                        </nav>
-                    </div>
-                    
-                    <div class="pf-c-page__main-section">
-                        <div class="pf-l-grid pf-m-gutter">
-                            <!-- Page Title -->
-                            <div class="pf-l-grid__item pf-m-12-col">
-                                <div class="pf-c-content">
-                                    <h1>Historical Analysis</h1>
-                                    <p>Resource consumption analysis and historical data</p>
-                                </div>
-                            </div>
-                            
-                            <!-- Workloads List -->
-                            <div class="pf-l-grid__item pf-m-12-col">
-                                <div class="pf-c-card">
-                                    <div class="pf-c-card__header">
-                                        <div class="pf-c-card__title">
-                                            <h2>Available Workloads</h2>
-                                        </div>
-                                        <div class="pf-c-card__actions">
-                                            <button class="pf-c-button pf-m-primary" id="refresh-historical">
-                                                <i class="fas fa-sync-alt" aria-hidden="true"></i>
-                                                Refresh
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="pf-c-card__body">
-                                        <div id="historical-workloads-container">
-                                            <div class="loading-spinner">
-                                                <div class="pf-c-spinner" role="progressbar" aria-label="Loading historical data">
-                                                    <span class="pf-c-spinner__clipper"></span>
-                                                    <span class="pf-c-spinner__lead-ball"></span>
-                                                    <span class="pf-c-spinner__tail-ball"></span>
-                                                </div>
-                                                <div>Loading historical data...</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <!-- Workload Details (hidden initially) -->
-                            <div class="pf-l-grid__item pf-m-12-col" id="workload-details-container" style="display: none;">
-                                <div class="pf-c-card">
-                                    <div class="pf-c-card__header">
-                                        <div class="pf-c-card__title">
-                                            <h2 id="workload-details-title">Workload Details</h2>
-                                        </div>
-                                        <div class="pf-c-card__actions">
-                                            <button class="pf-c-button pf-m-plain" id="close-workload-details">
-                                                <i class="fas fa-times" aria-hidden="true"></i>
-                                                Close
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="pf-c-card__body">
-                                        <div id="workload-details-content">
-                                            <!-- Workload details will be populated here -->
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            </main>
-        </div>
-    </div>
-
-    <!-- PatternFly 6.3.1 JavaScript -->
-    <script src="https://unpkg.com/@patternfly/patternfly@6.3.1/patternfly.js"></script>
-    
-    <!-- Font Awesome for icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    
-    <!-- Custom JavaScript -->
+    <!-- JavaScript -->
     <script>
         // Global variables
         let currentData = null;
@@ -323,7 +748,7 @@
         
         function setupNavigation() {
             // Sidebar navigation
-            const navLinks = document.querySelectorAll('.pf-c-nav__link[data-section]');
+            const navLinks = document.querySelectorAll('.sidebar-nav-link[data-section]');
             navLinks.forEach(link => {
                 link.addEventListener('click', function(e) {
                     e.preventDefault();
@@ -332,19 +757,15 @@
                 });
             });
             
-            // Breadcrumb navigation
-            const breadcrumbLinks = document.querySelectorAll('.pf-c-breadcrumb__link[data-section]');
-            breadcrumbLinks.forEach(link => {
-                link.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    const section = this.getAttribute('data-section');
-                    showSection(section);
-                });
+            // Sidebar toggle
+            document.getElementById('sidebar-toggle').addEventListener('click', function() {
+                const sidebar = document.getElementById('sidebar');
+                sidebar.classList.toggle('open');
             });
             
             // Close workload details
             document.getElementById('close-workload-details').addEventListener('click', function() {
-                document.getElementById('workload-details-container').style.display = 'none';
+                document.getElementById('workload-details-container').classList.add('section-hidden');
             });
             
             // Refresh buttons
@@ -354,18 +775,18 @@
         
         function showSection(section) {
             // Hide all sections
-            document.querySelectorAll('.pf-c-page__main-section').forEach(sec => {
-                sec.style.display = 'none';
+            document.querySelectorAll('main section').forEach(sec => {
+                sec.classList.add('section-hidden');
             });
             
             // Show selected section
-            document.getElementById(section + '-section').style.display = 'block';
+            document.getElementById(section + '-section').classList.remove('section-hidden');
             
             // Update active nav item
-            document.querySelectorAll('.pf-c-nav__link').forEach(link => {
-                link.classList.remove('pf-m-current');
+            document.querySelectorAll('.sidebar-nav-link').forEach(link => {
+                link.classList.remove('active');
             });
-            document.querySelector(`.pf-c-nav__link[data-section="${section}"]`).classList.add('pf-m-current');
+            document.querySelector(`.sidebar-nav-link[data-section="${section}"]`).classList.add('active');
             
             currentSection = section;
             
@@ -391,8 +812,8 @@
                 
                 currentData = { cluster: clusterData, validations: validationsData };
                 
-                // Update summary cards
-                updateSummaryCards(clusterData);
+                // Update metrics cards
+                updateMetricsCards(clusterData);
                 
                 // Update workloads table
                 updateWorkloadsTable(validationsData);
@@ -419,99 +840,61 @@
             }
         }
         
-        function updateSummaryCards(data) {
-            const container = document.getElementById('summary-cards');
-            
-            const cards = [
-                {
-                    title: 'Total Workloads',
-                    value: data.total_pods || 0,
-                    icon: 'fas fa-cube',
-                    color: 'blue'
-                },
-                {
-                    title: 'Namespaces',
-                    value: data.total_namespaces || 0,
-                    icon: 'fas fa-layer-group',
-                    color: 'green'
-                },
-                {
-                    title: 'Critical Issues',
-                    value: data.critical_issues || 0,
-                    icon: 'fas fa-exclamation-triangle',
-                    color: 'red'
-                },
-                {
-                    title: 'Warnings',
-                    value: data.total_warnings || 0,
-                    icon: 'fas fa-exclamation-circle',
-                    color: 'orange'
-                }
-            ];
-            
-            container.innerHTML = cards.map(card => `
-                <div class="pf-l-grid__item pf-m-3-col">
-                    <div class="pf-c-card metric-card">
-                        <div class="pf-c-card__body">
-                            <div class="metric-value">${card.value}</div>
-                            <div class="metric-label">
-                                <i class="${card.icon}" aria-hidden="true"></i>
-                                ${card.title}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `).join('');
+        function updateMetricsCards(data) {
+            document.getElementById('total-workloads').textContent = data.total_pods || 0;
+            document.getElementById('total-namespaces').textContent = data.total_namespaces || 0;
+            document.getElementById('critical-issues').textContent = data.critical_issues || 0;
+            document.getElementById('total-warnings').textContent = data.total_warnings || 0;
         }
         
         function updateWorkloadsTable(data) {
             const container = document.getElementById('workloads-table-container');
             
             if (!data.namespaces || data.namespaces.length === 0) {
-                container.innerHTML = '<div class="error-message">No workload data available</div>';
+                container.innerHTML = `
+                    <div style="text-align: center; padding: 40px; color: var(--pf-global--Color--300);">
+                        <i class="fas fa-check-circle" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--success-color--100);"></i>
+                        <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">No Issues Found</h3>
+                        <p style="margin: 0;">All workloads are properly configured</p>
+                    </div>
+                `;
                 return;
             }
             
             const tableHTML = `
-                <div class="pf-c-table">
-                    <table class="pf-c-table__table" role="grid" aria-label="Workloads table">
-                        <thead>
-                            <tr class="pf-c-table__row">
-                                <th class="pf-c-table__th">Namespace</th>
-                                <th class="pf-c-table__th">Pods</th>
-                                <th class="pf-c-table__th">Issues</th>
-                                <th class="pf-c-table__th">Severity</th>
-                                <th class="pf-c-table__th">Actions</th>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Namespace</th>
+                            <th>Pods</th>
+                            <th>Issues</th>
+                            <th>Status</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${data.namespaces.map(namespace => `
+                            <tr>
+                                <td>
+                                    <strong style="color: var(--pf-global--Color--100);">${namespace.namespace}</strong>
+                                </td>
+                                <td>${Object.keys(namespace.pods || {}).length}</td>
+                                <td>${namespace.total_validations || 0}</td>
+                                <td>
+                                    <span class="status-indicator ${getSeverityClass(namespace)}">
+                                        ${getSeverityText(namespace)}
+                                    </span>
+                                </td>
+                                <td>
+                                    <button class="openshift-button secondary" onclick="analyzeWorkload('${namespace.namespace}')">
+                                        <i class="fas fa-search"></i>
+                                        Analyze
+                                    </button>
+                                </td>
                             </tr>
-                        </thead>
-                        <tbody>
-                            ${data.namespaces.map(namespace => `
-                                <tr class="pf-c-table__row">
-                                    <td class="pf-c-table__td">
-                                        <strong>${namespace.namespace}</strong>
-                                    </td>
-                                    <td class="pf-c-table__td">${Object.keys(namespace.pods || {}).length}</td>
-                                    <td class="pf-c-table__td">${namespace.total_validations || 0}</td>
-                                    <td class="pf-c-table__td">
-                                        <span class="pf-c-badge severity-${getHighestSeverity(namespace)}">
-                                            ${getHighestSeverity(namespace)}
-                                        </span>
-                                    </td>
-                                    <td class="pf-c-table__td">
-                                        <div class="pf-c-button-group">
-                                            <button class="pf-c-button pf-m-primary pf-m-small" onclick="analyzeWorkload('${namespace.namespace}')">
-                                                Analyze
-                                            </button>
-                                            <button class="pf-c-button pf-m-secondary pf-m-small" onclick="fixWorkload('${namespace.namespace}')">
-                                                Fix
-                                            </button>
-                                        </div>
-                                    </td>
-                                </tr>
-                            `).join('')}
-                        </tbody>
-                    </table>
-                </div>
+                        `).join('')}
+                    </tbody>
+                </table>
             `;
             
             container.innerHTML = tableHTML;
@@ -521,72 +904,56 @@
             const container = document.getElementById('historical-workloads-container');
             
             if (!data.workloads || data.workloads.length === 0) {
-                container.innerHTML = '<div class="error-message">No historical data available</div>';
+                container.innerHTML = `
+                    <div style="text-align: center; padding: 40px; color: var(--pf-global--Color--300);">
+                        <i class="fas fa-chart-line" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--info-color--100);"></i>
+                        <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">No Historical Data</h3>
+                        <p style="margin: 0;">No workloads available for analysis</p>
+                    </div>
+                `;
                 return;
             }
             
             const tableHTML = `
-                <div class="pf-c-table">
-                    <table class="pf-c-table__table" role="grid" aria-label="Historical workloads table">
-                        <thead>
-                            <tr class="pf-c-table__row">
-                                <th class="pf-c-table__th">Workload</th>
-                                <th class="pf-c-table__th">Namespace</th>
-                                <th class="pf-c-table__th">CPU Usage</th>
-                                <th class="pf-c-table__th">Memory Usage</th>
-                                <th class="pf-c-table__th">Last Updated</th>
-                                <th class="pf-c-table__th">Actions</th>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Workload</th>
+                            <th>Namespace</th>
+                            <th>Pods</th>
+                            <th>CPU Usage</th>
+                            <th>Memory Usage</th>
+                            <th>Last Updated</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${data.workloads.map(workload => `
+                            <tr>
+                                <td>
+                                    <strong style="color: var(--pf-global--Color--100);">${workload.name}</strong>
+                                </td>
+                                <td>${workload.namespace}</td>
+                                <td>${workload.pod_count || 0}</td>
+                                <td>${workload.cpu_usage || 'N/A'}</td>
+                                <td>${workload.memory_usage || 'N/A'}</td>
+                                <td>${workload.last_updated ? new Date(workload.last_updated).toLocaleString() : 'N/A'}</td>
+                                <td>
+                                    <button class="openshift-button" onclick="showWorkloadDetails('${workload.name}', '${workload.namespace}')">
+                                        <i class="fas fa-eye"></i>
+                                        View Details
+                                    </button>
+                                </td>
                             </tr>
-                        </thead>
-                        <tbody>
-                            ${data.workloads.map(workload => `
-                                <tr class="pf-c-table__row">
-                                    <td class="pf-c-table__td">
-                                        <strong>${workload.name}</strong>
-                                    </td>
-                                    <td class="pf-c-table__td">${workload.namespace}</td>
-                                    <td class="pf-c-table__td">${workload.cpu_usage || 'N/A'}</td>
-                                    <td class="pf-c-table__td">${workload.memory_usage || 'N/A'}</td>
-                                    <td class="pf-c-table__td">${workload.last_updated || 'N/A'}</td>
-                                    <td class="pf-c-table__td">
-                                        <button class="pf-c-button pf-m-primary pf-m-small" onclick="showWorkloadDetails('${workload.name}', '${workload.namespace}')">
-                                            View Details
-                                        </button>
-                                    </td>
-                                </tr>
-                            `).join('')}
-                        </tbody>
-                    </table>
-                </div>
+                        `).join('')}
+                    </tbody>
+                </table>
             `;
             
             container.innerHTML = tableHTML;
         }
         
         function showWorkloadDetails(workloadName, namespace) {
-            // Update breadcrumb
-            const breadcrumb = document.querySelector('#historical-analysis-section .pf-c-breadcrumb__list');
-            breadcrumb.innerHTML = `
-                <li class="pf-c-breadcrumb__item">
-                    <span class="pf-c-breadcrumb__item-divider">
-                        <i class="fas fa-angle-right" aria-hidden="true"></i>
-                    </span>
-                    <a href="#" class="pf-c-breadcrumb__link" data-section="workload-scanner">Workload Scanner</a>
-                </li>
-                <li class="pf-c-breadcrumb__item">
-                    <span class="pf-c-breadcrumb__item-divider">
-                        <i class="fas fa-angle-right" aria-hidden="true"></i>
-                    </span>
-                    <a href="#" class="pf-c-breadcrumb__link" data-section="historical-analysis">Historical Analysis</a>
-                </li>
-                <li class="pf-c-breadcrumb__item">
-                    <span class="pf-c-breadcrumb__item-divider">
-                        <i class="fas fa-angle-right" aria-hidden="true"></i>
-                    </span>
-                    <span class="pf-c-breadcrumb__item-text">${workloadName}</span>
-                </li>
-            `;
-            
             // Update title
             document.getElementById('workload-details-title').textContent = `${workloadName} - ${namespace}`;
             
@@ -594,7 +961,7 @@
             loadWorkloadDetails(workloadName, namespace);
             
             // Show details container
-            document.getElementById('workload-details-container').style.display = 'block';
+            document.getElementById('workload-details-container').classList.remove('section-hidden');
         }
         
         async function loadWorkloadDetails(workloadName, namespace) {
@@ -607,7 +974,7 @@
             } catch (error) {
                 console.error('Error loading workload details:', error);
                 document.getElementById('workload-details-content').innerHTML = 
-                    '<div class="error-message">Failed to load workload details</div>';
+                    '<div style="text-align: center; padding: 40px; color: var(--pf-global--danger-color--100);">Failed to load workload details</div>';
             }
         }
         
@@ -615,45 +982,23 @@
             const container = document.getElementById('workload-details-content');
             
             container.innerHTML = `
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-l-grid__item pf-m-6-col">
-                        <div class="pf-c-card">
-                            <div class="pf-c-card__header">
-                                <div class="pf-c-card__title">
-                                    <h3>CPU Usage</h3>
-                                </div>
-                            </div>
-                            <div class="pf-c-card__body">
-                                <div class="chart-container" id="cpu-chart">
-                                    <!-- CPU chart will be rendered here -->
-                                </div>
-                            </div>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
+                    <div class="openshift-card">
+                        <div class="card-header">
+                            <h3 class="card-title">CPU Usage</h3>
+                        </div>
+                        <div style="padding: 20px; text-align: center; color: var(--pf-global--Color--300);">
+                            <i class="fas fa-microchip" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--info-color--100);"></i>
+                            <p>CPU usage data will be displayed here</p>
                         </div>
                     </div>
-                    <div class="pf-l-grid__item pf-m-6-col">
-                        <div class="pf-c-card">
-                            <div class="pf-c-card__header">
-                                <div class="pf-c-card__title">
-                                    <h3>Memory Usage</h3>
-                                </div>
-                            </div>
-                            <div class="pf-c-card__body">
-                                <div class="chart-container" id="memory-chart">
-                                    <!-- Memory chart will be rendered here -->
-                                </div>
-                            </div>
+                    <div class="openshift-card">
+                        <div class="card-header">
+                            <h3 class="card-title">Memory Usage</h3>
                         </div>
-                    </div>
-                    <div class="pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card">
-                            <div class="pf-c-card__header">
-                                <div class="pf-c-card__title">
-                                    <h3>Resource Recommendations</h3>
-                                </div>
-                            </div>
-                            <div class="pf-c-card__body">
-                                <div class="yaml-content">${data.recommendations || 'No recommendations available'}</div>
-                            </div>
+                        <div style="padding: 20px; text-align: center; color: var(--pf-global--Color--300);">
+                            <i class="fas fa-memory" style="font-size: 48px; margin-bottom: 16px; color: var(--pf-global--warning-color--100);"></i>
+                            <p>Memory usage data will be displayed here</p>
                         </div>
                     </div>
                 </div>
@@ -665,36 +1010,41 @@
             // TODO: Implement workload analysis
         }
         
-        function fixWorkload(namespace) {
-            console.log('Fixing workload:', namespace);
-            // TODO: Implement workload fixing
-        }
-        
-        function getHighestSeverity(namespace) {
+        function getSeverityClass(namespace) {
             const breakdown = namespace.severity_breakdown || {};
-            if (breakdown.error > 0) return 'error';
+            if (breakdown.error > 0) return 'danger';
             if (breakdown.warning > 0) return 'warning';
             if (breakdown.info > 0) return 'info';
-            return 'info';
+            return 'success';
+        }
+        
+        function getSeverityText(namespace) {
+            const breakdown = namespace.severity_breakdown || {};
+            if (breakdown.error > 0) return 'Error';
+            if (breakdown.warning > 0) return 'Warning';
+            if (breakdown.info > 0) return 'Info';
+            return 'Healthy';
         }
         
         function showLoading(containerId) {
             const container = document.getElementById(containerId);
             container.innerHTML = `
                 <div class="loading-spinner">
-                    <div class="pf-c-spinner" role="progressbar" aria-label="Loading">
-                        <span class="pf-c-spinner__clipper"></span>
-                        <span class="pf-c-spinner__lead-ball"></span>
-                        <span class="pf-c-spinner__tail-ball"></span>
-                    </div>
-                    <div>Loading...</div>
+                    <div class="spinner"></div>
+                    Loading...
                 </div>
             `;
         }
         
         function showError(containerId, message) {
             const container = document.getElementById(containerId);
-            container.innerHTML = `<div class="error-message">${message}</div>`;
+            container.innerHTML = `
+                <div style="text-align: center; padding: 40px; color: var(--pf-global--danger-color--100);">
+                    <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 16px;"></i>
+                    <h3 style="margin: 0 0 8px 0; color: var(--pf-global--Color--100);">Error</h3>
+                    <p style="margin: 0;">${message}</p>
+                </div>
+            `;
         }
     </script>
 </body>
