diff --git "a/assets.html" "b/assets.html"
--- "a/assets.html"
+++ "b/assets.html"
@@ -7,29 +7,57 @@
     <title>Assets Management - EY Quantum Safe</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
-    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
         body {
             font-family: 'Inter', sans-serif;
-            background-color: #f9fafb;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
+            min-height: 100vh;
+        }
+
+        /* Ensure content is visible by default */
+        [data-aos] {
+            opacity: 1 !important;
+            transform: none !important;
+        }
+
+        [data-aos].aos-animate {
+            opacity: 1 !important;
+        }
+
+        .gradient-text {
+            background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
         .sidebar {
+            backdrop-filter: blur(20px);
+            background: rgba(15, 23, 42, 0.8);
+            border-right: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .card-hover {
+            backdrop-filter: blur(15px);
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
             transition: all 0.3s ease;
         }
 
         .card-hover:hover {
             transform: translateY(-2px);
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+            background: rgba(255, 255, 255, 0.08);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
+            border-color: rgba(245, 158, 11, 0.3);
         }
 
         .tab-active {
             border-bottom: 3px solid #F59E0B;
-            color: #111827;
+            color: #F59E0B;
         }
 
         .risk-high {
@@ -44,6 +72,17 @@
             border-left: 4px solid #10B981;
         }
 
+        .action-button {
+            background: linear-gradient(135deg, #F59E0B, #FBBF24);
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
+        }
+
+        .action-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
+        }
+
         .table-container {
             max-height: 600px;
             overflow-y: auto;
@@ -54,63 +93,134 @@
         }
 
         .table-container::-webkit-scrollbar-track {
-            background: #f1f1f1;
+            background: rgba(255, 255, 255, 0.05);
         }
 
         .table-container::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
+            background: rgba(255, 255, 255, 0.2);
             border-radius: 3px;
         }
 
         .table-container::-webkit-scrollbar-thumb:hover {
-            background: #a8a8a8;
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        .particle {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background: #F59E0B;
+            border-radius: 50%;
+            animation: particle-float 8s linear infinite;
+            opacity: 0.7;
+        }
+
+        @keyframes particle-float {
+            0% {
+                transform: translateY(100vh) translateX(0px);
+                opacity: 0;
+            }
+            10% {
+                opacity: 0.7;
+            }
+            90% {
+                opacity: 0.7;
+            }
+            100% {
+                transform: translateY(-100px) translateX(100px);
+                opacity: 0;
+            }
+        }
+
+        /* Fix select dropdown styling */
+        select option {
+            background-color: #1e293b;
+            color: #ffffff;
+            padding: 8px;
+        }
+
+        select option:hover {
+            background-color: #334155;
+        }
+
+        select option:checked {
+            background-color: #475569;
+        }
+
+        select option:disabled {
+            background-color: #0f172a;
+            color: #6b7280;
+        }
+
+        /* Ensure select has proper background */
+        select {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+        }
+
+        select:focus {
+            background-color: rgba(255, 255, 255, 0.15);
         }
     </style>
 </head>
 
 <body class="flex h-screen overflow-hidden">
+    <!-- Animated Background Particles -->
+    <div class="fixed inset-0 pointer-events-none z-0">
+        <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
+        <div class="particle" style="left: 30%; animation-delay: 2s;"></div>
+        <div class="particle" style="left: 50%; animation-delay: 4s;"></div>
+        <div class="particle" style="left: 70%; animation-delay: 6s;"></div>
+        <div class="particle" style="left: 90%; animation-delay: 8s;"></div>
+    </div>
+
     <!-- Sidebar -->
-    <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
-        <div class="p-4 border-b border-gray-700">
-            <div class="flex items-center space-x-3">
-                <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">
-                    <i data-feather="shield" class="text-gray-900"></i>
+    <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
+        <div class="p-4 border-b border-white/10">
+            <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
+                    <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
                 </div>
-                <h1 class="text-xl font-bold">EY Quantum Safe</h1>
-            </div>
+                <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
+            </a>
         </div>
 
         <nav class="flex-1 overflow-y-auto p-4 space-y-1">
             <a href="index.html"
-                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
+                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
+                <i data-feather="home" class="w-5 h-5"></i>
+                <span>Home</span>
+            </a>
+            <a href="dashboard.html"
+                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
                 <i data-feather="layout" class="w-5 h-5"></i>
                 <span>Dashboard</span>
             </a>
             <a href="cboms.html"
-                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
+                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
                 <i data-feather="file-text" class="w-5 h-5"></i>
                 <span>CBOMs</span>
             </a>
-            <a href="assets.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400">
+            <a href="assets.html" class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
                 <i data-feather="lock" class="w-5 h-5"></i>
                 <span>Assets</span>
             </a>
             <a href="integrations.html"
-                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
+                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
                 <i data-feather="link" class="w-5 h-5"></i>
                 <span>Integrations</span>
             </a>
             <a href="analytics.html"
-                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
+                class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
                 <i data-feather="bar-chart-2" class="w-5 h-5"></i>
                 <span>Analytics</span>
             </a>
         </nav>
 
-        <div class="p-4 border-t border-gray-700">
+        <div class="p-4 border-t border-white/10">
             <div class="flex items-center space-x-3">
-                <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
-                    <i data-feather="user" class="text-gray-300"></i>
+                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
+                    <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
                 </div>
                 <div>
                     <p class="text-sm font-medium">Guillem Pétriz</p>
@@ -121,14 +231,14 @@
     </div>
 
     <!-- Main Content -->
-    <div class="flex-1 flex flex-col overflow-hidden">
+    <div class="flex-1 flex flex-col overflow-hidden relative z-10">
         <!-- Top Navigation -->
-        <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
+        <header class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
             <div class="flex items-center space-x-4">
-                <button class="md:hidden text-gray-500">
+                <button class="md:hidden text-white">
                     <i data-feather="menu"></i>
                 </button>
-                <h2 class="text-xl font-semibold text-gray-800">Assets Management</h2>
+                <h2 class="text-xl font-semibold text-white">Assets Management</h2>
             </div>
 
             <div class="flex items-center space-x-4">
@@ -136,10 +246,10 @@
                     <i data-feather="search"
                         class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                     <input type="text" placeholder="Search assets..."
-                        class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
+                        class="pl-10 pr-4 py-2 bg-white/10 border border-white/20 text-white placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
                 </div>
                 <button
-                    class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg font-medium hover:bg-yellow-500 transition-colors">
+                    class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
                     <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
                     Add Asset
                 </button>
@@ -147,425 +257,1104 @@
         </header>
 
         <!-- Main Content Area -->
-        <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
+        <main class="flex-1 overflow-y-auto p-6">
             <!-- Tabs Navigation -->
-            <div class="bg-white rounded-xl shadow-sm mb-6">
-                <div class="flex border-b border-gray-200 overflow-x-auto">
-                    <button class="px-6 py-4 font-medium tab-active">Asset List</button>
-                    <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Algorithms</button>
-                    <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Protocols</button>
-                    <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Certificates</button>
-                    <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Crypto Materials</button>
+            <div class="card-hover rounded-xl mb-6">
+                <div class="flex border-b border-white/10 overflow-x-auto">
+                    <button class="px-6 py-4 font-medium tab-active" onclick="showTab('assetList')">Asset List</button>
+                    <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('algorithms')">Algorithms</button>
+                    <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('protocols')">Protocols</button>
+                    <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('certificates')">Certificates</button>
+                    <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('cryptoMaterials')">Crypto Materials</button>
                 </div>
             </div>
 
-            <!-- Filters and Controls -->
-            <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
-                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Risk Level</label>
-                        <select
-                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
-                            <option value="">All Levels</option>
-                            <option value="high">High Risk</option>
-                            <option value="medium">Medium Risk</option>
-                            <option value="low">Low Risk</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Quantum Vulnerable</label>
-                        <select
-                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
-                            <option value="">All</option>
-                            <option value="true">Vulnerable</option>
-                            <option value="false">Secure</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Asset Type</label>
-                        <select
-                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
-                            <option value="">All Types</option>
-                            <option value="algorithm">Algorithm</option>
-                            <option value="protocol">Protocol</option>
-                            <option value="certificate">Certificate</option>
-                            <option value="crypto-material">Crypto Material</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">CBOM</label>
-                        <select
-                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
-                            <option value="">All CBOMs</option>
-                            <option value="enterprise">Enterprise Web App</option>
-                            <option value="payment">Payment Gateway</option>
-                            <option value="legacy">Legacy System</option>
-                        </select>
-                    </div>
-                </div>
+            <!-- Tab Content -->
+            <div id="tabContent">
+                <!-- Asset List Tab -->
+                <div id="assetList" class="tab-content">
+                    <!-- Existing Asset List Content -->
+                    <!-- Statistics Dashboard -->
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
+                        <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up">
+                            <div
+                                class="w-12 h-12 bg-blue-400/20 text-blue-400 rounded-full flex items-center justify-center mx-auto mb-3">
+                                <i data-feather="lock" class="w-6 h-6"></i>
+                            </div>
+                            <p class="text-2xl font-bold text-white">1,284</p>
+                            <p class="text-sm text-gray-400">Total Assets</p>
+                        </div>
 
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center space-x-4">
-                        <button
-                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
-                            <i data-feather="filter" class="w-4 h-4 inline mr-2"></i>
-                            Apply Filters
-                        </button>
-                        <button
-                            class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
-                            <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>
-                            Reset
-                        </button>
-                    </div>
+                        <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="100">
+                            <div
+                                class="w-12 h-12 bg-red-400/20 text-red-400 rounded-full flex items-center justify-center mx-auto mb-3">
+                                <i data-feather="alert-triangle" class="w-6 h-6"></i>
+                            </div>
+                            <p class="text-2xl font-bold text-white">154</p>
+                            <p class="text-sm text-gray-400">High Risk</p>
+                        </div>
 
-                    <div class="flex items-center space-x-2">
-                        <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i data-feather="download" class="w-5 h-5"></i>
-                        </button>
-                        <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
-                            <i data-feather="settings" class="w-5 h-5"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
+                        <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="200">
+                            <div
+                                class="w-12 h-12 bg-yellow-400/20 text-yellow-400 rounded-full flex items-center justify-center mx-auto mb-3">
+                                <i data-feather="alert-circle" class="w-6 h-6"></i>
+                            </div>
+                            <p class="text-2xl font-bold text-white">437</p>
+                            <p class="text-sm text-gray-400">Medium Risk</p>
+                        </div>
 
-            <!-- Statistics Dashboard -->
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
-                <div class="bg-white rounded-xl shadow-sm p-4 text-center">
-                    <div
-                        class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3">
-                        <i data-feather="lock" class="w-6 h-6"></i>
+                        <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="300">
+                            <div
+                                class="w-12 h-12 bg-green-400/20 text-green-400 rounded-full flex items-center justify-center mx-auto mb-3">
+                                <i data-feather="shield" class="w-6 h-6"></i>
+                            </div>
+                            <p class="text-2xl font-bold text-white">693</p>
+                            <p class="text-sm text-gray-400">Quantum Secure</p>
+                        </div>
                     </div>
-                    <p class="text-2xl font-bold text-gray-800">1,284</p>
-                    <p class="text-sm text-gray-600">Total Assets</p>
-                </div>
 
-                <div class="bg-white rounded-xl shadow-sm p-4 text-center">
-                    <div
-                        class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3">
-                        <i data-feather="alert-triangle" class="w-6 h-6"></i>
-                    </div>
-                    <p class="text-2xl font-bold text-gray-800">154</p>
-                    <p class="text-sm text-gray-600">High Risk</p>
-                </div>
+                    <!-- Asset Table -->
+                    <div class="card-hover rounded-xl overflow-hidden" data-aos="fade-up" data-aos-delay="400">
+                        <div class="p-6 border-b border-white/10">
+                            <div class="flex items-center justify-between">
+                                <h3 class="font-semibold text-lg text-white">Assets</h3>
+                                <div class="flex items-center space-x-2">
+                                    <span class="text-sm text-gray-400">1-10 of 1,284 assets</span>
+                                    <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg">
+                                        <i data-feather="chevron-left" class="w-4 h-4"></i>
+                                    </button>
+                                    <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg">
+                                        <i data-feather="chevron-right" class="w-4 h-4"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
 
-                <div class="bg-white rounded-xl shadow-sm p-4 text-center">
-                    <div
-                        class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mx-auto mb-3">
-                        <i data-feather="alert-circle" class="w-6 h-6"></i>
+                        <div class="table-container">
+                            <table class="w-full">
+                                <thead class="bg-white/5">
+                                    <tr>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                            <input type="checkbox"
+                                                class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
+                                        </th>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                            Name</th>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                            Type</th>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                            Version</th>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                            Risk Level</th>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                            Quantum</th>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                            CBOM</th>
+                                        <th
+                                            class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
+                                            Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-white/10">
+                                    <tr class="hover:bg-white/5 risk-high">
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <input type="checkbox"
+                                                class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <div class="flex items-center">
+                                                <div
+                                                    class="w-8 h-8 bg-red-400/20 text-red-400 rounded-full flex items-center justify-center mr-3">
+                                                    <i data-feather="alert-triangle" class="w-4 h-4"></i>
+                                                </div>
+                                                <div>
+                                                    <div class="font-medium text-white">SHA-1</div>
+                                                    <div class="text-sm text-gray-400">Hash algorithm</div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Algorithm</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.0</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-red-400/20 text-red-400 rounded-full">High</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-red-400/20 text-red-400 rounded-full">Vulnerable</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Legacy System</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <div class="flex space-x-2">
+                                                <button class="text-blue-400 hover:text-blue-300">
+                                                    <i data-feather="edit" class="w-4 h-4"></i>
+                                                </button>
+                                                <button class="text-red-400 hover:text-red-300">
+                                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+
+                                    <tr class="hover:bg-white/5 risk-medium">
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <input type="checkbox"
+                                                class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <div class="flex items-center">
+                                                <div
+                                                    class="w-8 h-8 bg-yellow-400/20 text-yellow-400 rounded-full flex items-center justify-center mr-3">
+                                                    <i data-feather="alert-circle" class="w-4 h-4"></i>
+                                                </div>
+                                                <div>
+                                                    <div class="font-medium text-white">TLS 1.2</div>
+                                                    <div class="text-sm text-gray-400">Security protocol</div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-purple-400/20 text-purple-400 rounded-full">Protocol</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.2</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-yellow-400/20 text-yellow-400 rounded-full">Medium</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Enterprise Web App</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <div class="flex space-x-2">
+                                                <button class="text-blue-400 hover:text-blue-300">
+                                                    <i data-feather="edit" class="w-4 h-4"></i>
+                                                </button>
+                                                <button class="text-red-400 hover:text-red-300">
+                                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+
+                                    <tr class="hover:bg-white/5 risk-low">
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <input type="checkbox"
+                                                class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <div class="flex items-center">
+                                                <div
+                                                    class="w-8 h-8 bg-green-400/20 text-green-400 rounded-full flex items-center justify-center mr-3">
+                                                    <i data-feather="shield" class="w-4 h-4"></i>
+                                                </div>
+                                                <div>
+                                                    <div class="font-medium text-white">AES-256</div>
+                                                    <div class="text-sm text-gray-400">Encryption algorithm</div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Algorithm</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2.0</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Low</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Payment Gateway</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <div class="flex space-x-2">
+                                                <button class="text-blue-400 hover:text-blue-300">
+                                                    <i data-feather="edit" class="w-4 h-4"></i>
+                                                </button>
+                                                <button class="text-red-400 hover:text-red-300">
+                                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+
+                                    <tr class="hover:bg-white/5 risk-high">
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <input type="checkbox"
+                                                class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <div class="flex items-center">
+                                                <div
+                                                    class="w-8 h-8 bg-red-400/20 text-red-400 rounded-full flex items-center justify-center mr-3">
+                                                    <i data-feather="alert-triangle" class="w-4 h-4"></i>
+                                                </div>
+                                                <div>
+                                                    <div class="font-medium text-white">RSA-1024</div>
+                                                    <div class="text-sm text-gray-400">Asymmetric key</div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-gray-400/20 text-gray-400 rounded-full">Crypto Material</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.0</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-red-400/20 text-red-400 rounded-full">High</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-red-400/20 text-red-400 rounded-full">Vulnerable</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Legacy System</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <div class="flex space-x-2">
+                                                <button class="text-blue-400 hover:text-blue-300">
+                                                    <i data-feather="edit" class="w-4 h-4"></i>
+                                                </button>
+                                                <button class="text-red-400 hover:text-red-300">
+                                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+
+                                    <tr class="hover:bg-white/5 risk-low">
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <input type="checkbox"
+                                                class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <div class="flex items-center">
+                                                <div
+                                                    class="w-8 h-8 bg-green-400/20 text-green-400 rounded-full flex items-center justify-center mr-3">
+                                                    <i data-feather="shield" class="w-4 h-4"></i>
+                                                </div>
+                                                <div>
+                                                    <div class="font-medium text-white">ECC-256</div>
+                                                    <div class="text-sm text-gray-400">Elliptic curve</div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-gray-400/20 text-gray-400 rounded-full">Crypto Material</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2.1</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Low</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span
+                                                class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Enterprise Web App</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <div class="flex space-x-2">
+                                                <button class="text-blue-400 hover:text-blue-300">
+                                                    <i data-feather="edit" class="w-4 h-4"></i>
+                                                </button>
+                                                <button class="text-red-400 hover:text-red-300">
+                                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div class="px-6 py-4 border-t border-white/10 bg-white/5">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center space-x-4">
+                                    <button
+                                        class="px-4 py-2 bg-red-400/20 text-red-400 rounded-lg text-sm hover:bg-red-400/30 transition-colors">
+                                        <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
+                                        Delete Selected
+                                    </button>
+                                    <button
+                                        class="px-4 py-2 action-button text-gray-900 rounded-lg text-sm font-semibold">
+                                        <i data-feather="edit" class="w-4 h-4 inline mr-2"></i>
+                                        Edit Selected
+                                    </button>
+                                </div>
+
+                                <div class="flex items-center space-x-4">
+                                    <button
+                                        class="px-4 py-2 border border-white/20 text-gray-300 rounded-lg text-sm hover:bg-white/10 transition-colors">
+                                        <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
+                                        Export to CSV
+                                    </button>
+                                    <button
+                                        class="px-4 py-2 border border-white/20 text-gray-300 rounded-lg text-sm hover:bg-white/10 transition-colors">
+                                        <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
+                                        Export to JSON
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <p class="text-2xl font-bold text-gray-800">437</p>
-                    <p class="text-sm text-gray-600">Medium Risk</p>
                 </div>
 
-                <div class="bg-white rounded-xl shadow-sm p-4 text-center">
-                    <div
-                        class="w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-3">
-                        <i data-feather="shield" class="w-6 h-6"></i>
+                <!-- Algorithms Tab -->
+                <div id="algorithms" class="tab-content hidden">
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <!-- Algorithm Input Form -->
+                        <div class="lg:col-span-2">
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up">
+                                <h3 class="font-semibold text-lg text-white mb-6">Add New Algorithm</h3>
+                                
+                                <form class="space-y-6">
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Algorithm Name *</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., AES-256-GCM">
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Algorithm Type *</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>Symmetric Encryption</option>
+                                                <option>Asymmetric Encryption</option>
+                                                <option>Hash Function</option>
+                                                <option>Digital Signature</option>
+                                                <option>Key Exchange</option>
+                                                <option>MAC (Message Authentication)</option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Key Size (bits)</label>
+                                            <input type="number" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., 256">
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Mode of Operation</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., GCM, CBC, CTR">
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Implementation Details</label>
+                                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">Library/Provider</label>
+                                                <input type="text" 
+                                                    class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                    placeholder="e.g., OpenSSL">
+                                            </div>
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">Version</label>
+                                                <input type="text" 
+                                                    class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                    placeholder="e.g., 3.0.11">
+                                            </div>
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">FIPS Validated</label>
+                                                <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                    <option>Yes</option>
+                                                    <option>No</option>
+                                                    <option>In Progress</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Quantum Resistance Status *</label>
+                                        <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                            <option>Quantum Safe</option>
+                                            <option>Quantum Vulnerable</option>
+                                            <option>Partially Resistant</option>
+                                            <option>Under Evaluation</option>
+                                        </select>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Purpose/Usage</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., Data at rest encryption">
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Associated CBOM</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>Select CBOM...</option>
+                                                <option>Enterprise Web App</option>
+                                                <option>Payment Gateway</option>
+                                                <option>Mobile Banking App</option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Additional Metadata</label>
+                                        <textarea 
+                                            class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                            rows="3" placeholder="Any additional information about this algorithm..."></textarea>
+                                    </div>
+
+                                    <div class="border-t border-white/10 pt-6">
+                                        <div class="flex justify-between items-center">
+                                            <p class="text-sm text-gray-400">* Required fields</p>
+                                            <div class="flex space-x-3">
+                                                <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
+                                                    Clear Form
+                                                </button>
+                                                <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
+                                                    Add Algorithm
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+
+                        <!-- Algorithm Templates -->
+                        <div class="space-y-6">
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
+                                <h4 class="font-semibold text-white mb-4">Quick Templates</h4>
+                                <div class="space-y-3">
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">AES-256-GCM</p>
+                                        <p class="text-xs text-gray-400">Symmetric encryption, 256-bit key</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">RSA-2048</p>
+                                        <p class="text-xs text-gray-400">Asymmetric encryption, 2048-bit key</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">SHA-256</p>
+                                        <p class="text-xs text-gray-400">Hash function, 256-bit output</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">ECDSA-P256</p>
+                                        <p class="text-xs text-gray-400">Digital signature, elliptic curve</p>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
+                                <h4 class="font-semibold text-white mb-4">Recently Added</h4>
+                                <div class="space-y-3 max-h-64 overflow-y-auto">
+                                    <div class="p-3 bg-white/5 rounded-lg">
+                                        <p class="font-medium text-white text-sm">ChaCha20-Poly1305</p>
+                                        <p class="text-xs text-gray-400">Added 2 hours ago</p>
+                                    </div>
+                                    <div class="p-3 bg-white/5 rounded-lg">
+                                        <p class="font-medium text-white text-sm">HMAC-SHA256</p>
+                                        <p class="text-xs text-gray-400">Added yesterday</p>
+                                    </div>
+                                    <div class="p-3 bg-white/5 rounded-lg">
+                                        <p class="font-medium text-white text-sm">PBKDF2</p>
+                                        <p class="text-xs text-gray-400">Added 3 days ago</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <p class="text-2xl font-bold text-gray-800">693</p>
-                    <p class="text-sm text-gray-600">Quantum Secure</p>
                 </div>
-            </div>
 
-            <!-- Asset Table -->
-            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-                <div class="p-6 border-b border-gray-200">
-                    <div class="flex items-center justify-between">
-                        <h3 class="font-semibold text-lg">Assets</h3>
-                        <div class="flex items-center space-x-2">
-                            <span class="text-sm text-gray-500">1-10 of 1,284 assets</span>
-                            <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
-                                <i data-feather="chevron-left" class="w-4 h-4"></i>
-                            </button>
-                            <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
-                                <i data-feather="chevron-right" class="w-4 h-4"></i>
-                            </button>
+                <!-- Protocols Tab -->
+                <div id="protocols" class="tab-content hidden">
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <!-- Protocol Input Form -->
+                        <div class="lg:col-span-2">
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up">
+                                <h3 class="font-semibold text-lg text-white mb-6">Add New Protocol</h3>
+                                
+                                <form class="space-y-6">
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Protocol Name *</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., TLS">
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Version *</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., 1.3">
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Protocol Type *</label>
+                                        <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                            <option>Transport Security</option>
+                                            <option>Authentication</option>
+                                            <option>Key Exchange</option>
+                                            <option>VPN/Tunneling</option>
+                                            <option>Email Security</option>
+                                            <option>Other</option>
+                                        </select>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Cipher Suites / Algorithms Used</label>
+                                        <div class="space-y-2">
+                                            <div class="flex items-center space-x-2">
+                                                <input type="text" 
+                                                    class="flex-1 px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                    placeholder="e.g., TLS_AES_256_GCM_SHA384">
+                                                <button type="button" class="p-2 text-yellow-400 hover:text-yellow-300">
+                                                    <i data-feather="plus-circle" class="w-5 h-5"></i>
+                                                </button>
+                                            </div>
+                                            <p class="text-xs text-gray-400">Add multiple cipher suites as needed</p>
+                                        </div>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Key Exchange Method</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., ECDHE, DHE">
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Authentication Method</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., RSA, ECDSA">
+                                        </div>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Port Number</label>
+                                            <input type="number" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., 443">
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Implementation</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., OpenSSL, BoringSSL">
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Security Settings</label>
+                                        <div class="space-y-3">
+                                            <div class="flex items-center space-x-3">
+                                                <input type="checkbox" id="pfs" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
+                                                <label for="pfs" class="text-sm text-gray-300">Perfect Forward Secrecy (PFS)</label>
+                                            </div>
+                                            <div class="flex items-center space-x-3">
+                                                <input type="checkbox" id="hsts" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
+                                                <label for="hsts" class="text-sm text-gray-300">HSTS Enabled</label>
+                                            </div>
+                                            <div class="flex items-center space-x-3">
+                                                <input type="checkbox" id="ocsp" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
+                                                <label for="ocsp" class="text-sm text-gray-300">OCSP Stapling</label>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Quantum Risk Assessment *</label>
+                                        <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                            <option>Low - Uses quantum-safe algorithms</option>
+                                            <option>Medium - Partially quantum-vulnerable</option>
+                                            <option>High - Fully quantum-vulnerable</option>
+                                            <option>Critical - Deprecated/Insecure</option>
+                                        </select>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Notes</label>
+                                        <textarea 
+                                            class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                            rows="3" placeholder="Additional configuration or security notes..."></textarea>
+                                    </div>
+
+                                    <div class="border-t border-white/10 pt-6">
+                                        <div class="flex justify-between items-center">
+                                            <p class="text-sm text-gray-400">* Required fields</p>
+                                            <div class="flex space-x-3">
+                                                <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
+                                                    Clear Form
+                                                </button>
+                                                <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
+                                                    Add Protocol
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+
+                        <!-- Protocol Templates -->
+                        <div class="space-y-6">
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
+                                <h4 class="font-semibold text-white mb-4">Protocol Templates</h4>
+                                <div class="space-y-3">
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">TLS 1.3</p>
+                                        <p class="text-xs text-gray-400">Modern transport security</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">SSH v2</p>
+                                        <p class="text-xs text-gray-400">Secure shell protocol</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">IPSec</p>
+                                        <p class="text-xs text-gray-400">VPN tunneling protocol</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">OAuth 2.0</p>
+                                        <p class="text-xs text-gray-400">Authentication protocol</p>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
+                                <h4 class="font-semibold text-white mb-4">Common Configurations</h4>
+                                <div class="space-y-2">
+                                    <div class="p-3 bg-white/5 rounded-lg">
+                                        <p class="text-sm text-white">Web Server TLS</p>
+                                        <p class="text-xs text-gray-400">HTTPS with modern ciphers</p>
+                                    </div>
+                                    <div class="p-3 bg-white/5 rounded-lg">
+                                        <p class="text-sm text-white">API Security</p>
+                                        <p class="text-xs text-gray-400">mTLS configuration</p>
+                                    </div>
+                                    <div class="p-3 bg-white/5 rounded-lg">
+                                        <p class="text-sm text-white">Email Security</p>
+                                        <p class="text-xs text-gray-400">S/MIME or PGP setup</p>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
 
-                <div class="table-container">
-                    <table class="w-full">
-                        <thead class="bg-gray-50">
-                            <tr>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    <input type="checkbox"
-                                        class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
-                                </th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Name</th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Type</th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Version</th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Risk Level</th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Quantum</th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    CBOM</th>
-                                <th
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
-                            <tr class="hover:bg-gray-50 risk-high">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <input type="checkbox"
-                                        class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <div
-                                            class="w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-3">
-                                            <i data-feather="alert-triangle" class="w-4 h-4"></i>
+                <!-- Certificates Tab -->
+                <div id="certificates" class="tab-content hidden">
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <!-- Certificate Input Form -->
+                        <div class="lg:col-span-2">
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up">
+                                <h3 class="font-semibold text-lg text-white mb-6">Add New Certificate</h3>
+                                
+                                <form class="space-y-6">
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Common Name (CN) *</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., *.example.com">
                                         </div>
                                         <div>
-                                            <div class="font-medium text-gray-900">SHA-1</div>
-                                            <div class="text-sm text-gray-500">Hash algorithm</div>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Algorithm</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.0</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">High</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Vulnerable</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Legacy System</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                    <div class="flex space-x-2">
-                                        <button class="text-blue-600 hover:text-blue-900">
-                                            <i data-feather="edit" class="w-4 h-4"></i>
-                                        </button>
-                                        <button class="text-red-600 hover:text-red-900">
-                                            <i data-feather="trash-2" class="w-4 h-4"></i>
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-
-                            <tr class="hover:bg-gray-50 risk-medium">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <input type="checkbox"
-                                        class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <div
-                                            class="w-8 h-8 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mr-3">
-                                            <i data-feather="alert-circle" class="w-4 h-4"></i>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Certificate Type *</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>SSL/TLS Server</option>
+                                                <option>SSL/TLS Client</option>
+                                                <option>Code Signing</option>
+                                                <option>Email (S/MIME)</option>
+                                                <option>Root CA</option>
+                                                <option>Intermediate CA</option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Subject Alternative Names (SANs)</label>
+                                        <textarea 
+                                            class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                            rows="2" placeholder="Enter SANs separated by commas (e.g., www.example.com, api.example.com)"></textarea>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Key Algorithm *</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>RSA</option>
+                                                <option>ECDSA</option>
+                                                <option>DSA</option>
+                                                <option>EdDSA</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Key Size *</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>2048 bits</option>
+                                                <option>3072 bits</option>
+                                                <option>4096 bits</option>
+                                                <option>P-256</option>
+                                                <option>P-384</option>
+                                            </select>
                                         </div>
                                         <div>
-                                            <div class="font-medium text-gray-900">TLS 1.2</div>
-                                            <div class="text-sm text-gray-500">Security protocol</div>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">Protocol</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.2</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Medium</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Secure</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Enterprise Web App
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                    <div class="flex space-x-2">
-                                        <button class="text-blue-600 hover:text-blue-900">
-                                            <i data-feather="edit" class="w-4 h-4"></i>
-                                        </button>
-                                        <button class="text-red-600 hover:text-red-900">
-                                            <i data-feather="trash-2" class="w-4 h-4"></i>
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-
-                            <tr class="hover:bg-gray-50 risk-low">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <input type="checkbox"
-                                        class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <div
-                                            class="w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-3">
-                                            <i data-feather="shield" class="w-4 h-4"></i>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Signature Algorithm *</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>SHA256withRSA</option>
+                                                <option>SHA384withRSA</option>
+                                                <option>SHA512withRSA</option>
+                                                <option>SHA256withECDSA</option>
+                                            </select>
                                         </div>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                         <div>
-                                            <div class="font-medium text-gray-900">AES-256</div>
-                                            <div class="text-sm text-gray-500">Encryption algorithm</div>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Algorithm</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2.0</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Low</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Secure</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Payment Gateway</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                    <div class="flex space-x-2">
-                                        <button class="text-blue-600 hover:text-blue-900">
-                                            <i data-feather="edit" class="w-4 h-4"></i>
-                                        </button>
-                                        <button class="text-red-600 hover:text-red-900">
-                                            <i data-feather="trash-2" class="w-4 h-4"></i>
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-
-                            <!-- Additional rows would follow the same pattern -->
-                            <tr class="hover:bg-gray-50 risk-high">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <input type="checkbox"
-                                        class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <div
-                                            class="w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-3">
-                                            <i data-feather="alert-triangle" class="w-4 h-4"></i>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Valid From *</label>
+                                            <input type="date" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
                                         </div>
                                         <div>
-                                            <div class="font-medium text-gray-900">RSA-1024</div>
-                                            <div class="text-sm text-gray-500">Asymmetric key</div>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">Crypto
-                                        Material</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.0</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">High</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Vulnerable</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Legacy System</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                    <div class="flex space-x-2">
-                                        <button class="text-blue-600 hover:text-blue-900">
-                                            <i data-feather="edit" class="w-4 h-4"></i>
-                                        </button>
-                                        <button class="text-red-600 hover:text-red-900">
-                                            <i data-feather="trash-2" class="w-4 h-4"></i>
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-
-                            <tr class="hover:bg-gray-50 risk-low">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <input type="checkbox"
-                                        class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <div
-                                            class="w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-3">
-                                            <i data-feather="shield" class="w-4 h-4"></i>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Valid Until *</label>
+                                            <input type="date" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
                                         </div>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                         <div>
-                                            <div class="font-medium text-gray-900">ECC-256</div>
-                                            <div class="text-sm text-gray-500">Elliptic curve</div>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">Crypto
-                                        Material</span>
-                                    </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2.1</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Low</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span
-                                        class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Secure</span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Enterprise Web App</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                    <div class="flex space-x-2">
-                                        <button class="text-blue-600 hover:text-blue-900">
-                                            <i data-feather="edit" class="w-4 h-4"></i>
-                                        </button>
-                                        <button class="text-red-600 hover:text-red-900">
-                                            <i data-feather="trash-2" class="w-4 h-4"></i>
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Issuer (CA) *</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., DigiCert SHA2 Secure Server CA">
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Serial Number</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., 0A:1B:2C:3D...">
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Certificate Chain</label>
+                                        <div class="space-y-2">
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="Root CA">
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="Intermediate CA (if applicable)">
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Storage Location</label>
+                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="Key store path or HSM identifier">
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>File System</option>
+                                                <option>HSM</option>
+                                                <option>Key Vault</option>
+                                                <option>Database</option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Associated Services/Applications</label>
+                                        <input type="text" 
+                                            class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                            placeholder="e.g., Web Server, Load Balancer, API Gateway">
+                                    </div>
+
+                                    <div class="border-t border-white/10 pt-6">
+                                        <div class="flex justify-between items-center">
+                                            <p class="text-sm text-gray-400">* Required fields</p>
+                                            <div class="flex space-x-3">
+                                                <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
+                                                    Clear Form
+                                                </button>
+                                                <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
+                                                    Add Certificate
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+
+                        <!-- Certificate Tools -->
+                        <div class="space-y-6">
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
+                                <h4 class="font-semibold text-white mb-4">Certificate Templates</h4>
+                                <div class="space-y-3">
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">Web Server SSL</p>
+                                        <p class="text-xs text-gray-400">Standard HTTPS certificate</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">Wildcard Certificate</p>
+                                        <p class="text-xs text-gray-400">*.domain.com coverage</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">Code Signing</p>
+                                        <p class="text-xs text-gray-400">Software signing certificate</p>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
+                                <h4 class="font-semibold text-white mb-4">Import Options</h4>
+                                <div class="space-y-3">
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
+                                        <div class="flex items-center space-x-3">
+                                            <i data-feather="upload" class="w-5 h-5 text-gray-400"></i>
+                                            <span class="text-sm text-white">Import from PEM/DER</span>
+                                        </div>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
+                                        <div class="flex items-center space-x-3">
+                                            <i data-feather="file-text" class="w-5 h-5 text-gray-400"></i>
+                                            <span class="text-sm text-white">Parse Certificate</span>
+                                        </div>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
-                <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center space-x-4">
-                            <button
-                                class="px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200 transition-colors">
-                                <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
-                                Delete Selected
-                            </button>
-                            <button
-                                class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg text-sm hover:bg-yellow-500 transition-colors">
-                                <i data-feather="edit" class="w-4 h-4 inline mr-2"></i>
-                                Edit Selected
-                            </button>
+                <!-- Crypto Materials Tab -->
+                <div id="cryptoMaterials" class="tab-content hidden">
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                        <!-- Crypto Material Input Form -->
+                        <div class="lg:col-span-2">
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up">
+                                <h3 class="font-semibold text-lg text-white mb-6">Add New Cryptographic Material</h3>
+                                
+                                <form class="space-y-6">
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Material Name/ID *</label>
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="e.g., API_SIGNING_KEY_PROD">
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Material Type *</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>Symmetric Key</option>
+                                                <option>Private Key</option>
+                                                <option>Public Key</option>
+                                                <option>Key Pair</option>
+                                                <option>Secret/Password</option>
+                                                <option>API Key/Token</option>
+                                                <option>Seed/Salt</option>
+                                                <option>IV (Initialization Vector)</option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Key Properties</label>
+                                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">Algorithm</label>
+                                                <input type="text" 
+                                                    class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                    placeholder="e.g., AES">
+                                            </div>
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">Key Length (bits)</label>
+                                                <input type="number" 
+                                                    class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                    placeholder="e.g., 256">
+                                            </div>
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">Format</label>
+                                                <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                    <option>Raw Binary</option>
+                                                    <option>Base64</option>
+                                                    <option>Hex</option>
+                                                    <option>PEM</option>
+                                                    <option>DER</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Purpose/Usage *</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>Data Encryption</option>
+                                                <option>Digital Signature</option>
+                                                <option>Authentication</option>
+                                                <option>Key Wrapping</option>
+                                                <option>Session Key</option>
+                                                <option>Master Key</option>
+                                                <option>Key Derivation</option>
+                                            </select>
+                                        </div>
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-300 mb-2">Storage Type *</label>
+                                            <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                <option>HSM</option>
+                                                <option>Key Management Service</option>
+                                                <option>Secure Enclave</option>
+                                                <option>Software Key Store</option>
+                                                <option>Environment Variable</option>
+                                                <option>Configuration File</option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Key Lifecycle Information</label>
+                                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">Created Date</label>
+                                                <input type="date" 
+                                                    class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                            </div>
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">Expiry Date</label>
+                                                <input type="date" 
+                                                    class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                            </div>
+                                            <div>
+                                                <label class="block text-xs text-gray-400 mb-1">Rotation Period</label>
+                                                <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
+                                                    <option>30 days</option>
+                                                    <option>90 days</option>
+                                                    <option>180 days</option>
+                                                    <option>1 year</option>
+                                                    <option>Custom</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Access Control</label>
+                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="Owner/Service Account">
+                                            <input type="text" 
+                                                class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                                placeholder="Access Policy/Role">
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Associated Systems</label>
+                                        <input type="text" 
+                                            class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                            placeholder="List systems/applications using this material">
+                                    </div>
+
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-300 mb-2">Compliance & Standards</label>
+                                        <div class="space-y-3">
+                                            <div class="flex items-center space-x-3">
+                                                <input type="checkbox" id="fips140" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
+                                                <label for="fips140" class="text-sm text-gray-300">FIPS 140-2/3 Compliant</label>
+                                            </div>
+                                            <div class="flex items-center space-x-3">
+                                                <input type="checkbox" id="pciCompliant" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
+                                                <label for="pciCompliant" class="text-sm text-gray-300">PCI-DSS Compliant</label>
+                                            </div>
+                                            <div class="flex items-center space-x-3">
+                                                <input type="checkbox" id="quantumSafe" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
+                                                <label for="quantumSafe" class="text-sm text-gray-300">Quantum-Safe</label>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="border-t border-white/10 pt-6">
+                                        <div class="flex justify-between items-center">
+                                            <p class="text-sm text-gray-400">* Required fields</p>
+                                            <div class="flex space-x-3">
+                                                <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
+                                                    Clear Form
+                                                </button>
+                                                <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
+                                                    Add Material
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
                         </div>
 
-                        <div class="flex items-center space-x-4">
-                            <button
-                                class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors">
-                                <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
-                                Export to CSV
-                            </button>
-                            <button
-                                class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors">
-                                <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
-                                Export to JSON
-                            </button>
+                        <!-- Crypto Material Templates & Info -->
+                        <div class="space-y-6">
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
+                                <h4 class="font-semibold text-white mb-4">Common Key Types</h4>
+                                <div class="space-y-3">
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">Data Encryption Key</p>
+                                        <p class="text-xs text-gray-400">DEK for data at rest</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">Key Encryption Key</p>
+                                        <p class="text-xs text-gray-400">KEK for key wrapping</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">API Authentication</p>
+                                        <p class="text-xs text-gray-400">JWT signing key</p>
+                                    </button>
+                                    <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
+                                        <p class="font-medium text-white">Database Encryption</p>
+                                        <p class="text-xs text-gray-400">TDE master key</p>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
+                                <h4 class="font-semibold text-white mb-4">Best Practices</h4>
+                                <div class="space-y-3">
+                                    <div class="flex items-start space-x-2">
+                                        <i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-0.5"></i>
+                                        <p class="text-sm text-gray-300">Use HSMs for high-value keys</p>
+                                    </div>
+                                    <div class="flex items-start space-x-2">
+                                        <i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-0.5"></i>
+                                        <p class="text-sm text-gray-300">Implement key rotation policies</p>
+                                    </div>
+                                    <div class="flex items-start space-x-2">
+                                        <i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-0.5"></i>
+                                        <p class="text-sm text-gray-300">Maintain key versioning</p>
+                                    </div>
+                                    <div class="flex items-start space-x-2">
+                                        <i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-0.5"></i>
+                                        <p class="text-sm text-gray-300">Document key purposes</p>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -573,29 +1362,121 @@
         </main>
     </div>
 
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script>
-        AOS.init();
-        feather.replace();
+        // Initialize feather icons immediately
+        document.addEventListener('DOMContentLoaded', function() {
+            // Replace feather icons
+            feather.replace();
+            
+            // Initialize AOS with better settings
+            AOS.init({
+                duration: 400,
+                once: true,
+                offset: 0,
+                easing: 'ease-out',
+                delay: 0,
+                anchorPlacement: 'top-bottom',
+                disable: function() {
+                    // Disable AOS on mobile devices to prevent issues
+                    return window.innerWidth < 768;
+                }
+            });
+            
+            // Force AOS refresh after a short delay
+            setTimeout(() => {
+                AOS.refresh();
+            }, 100);
+        });
 
         // Tab switching functionality
-        document.querySelectorAll('.flex button').forEach(button => {
-            button.addEventListener('click', function () {
-                document.querySelectorAll('.flex button').forEach(btn => {
-                    btn.classList.remove('tab-active');
-                    btn.classList.add('text-gray-500', 'hover:text-gray-700');
-                });
-                this.classList.add('tab-active');
-                this.classList.remove('text-gray-500', 'hover:text-gray-700');
+        function showTab(tabName) {
+            // Hide all tab contents
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.add('hidden');
             });
-        });
+            
+            // Remove active class from all tabs
+            document.querySelectorAll('.flex button[onclick^="showTab"]').forEach(button => {
+                button.classList.remove('tab-active');
+                button.classList.add('text-gray-400', 'hover:text-gray-200');
+            });
+            
+            // Show selected tab content
+            document.getElementById(tabName).classList.remove('hidden');
+            
+            // Add active class to clicked tab
+            event.target.classList.add('tab-active');
+            event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
+            
+            // Re-render feather icons and refresh AOS
+            feather.replace();
+            AOS.refresh();
+        }
 
         // Select all checkbox functionality
         const selectAll = document.querySelector('thead input[type="checkbox"]');
         const rowCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]');
 
-        selectAll.addEventListener('change', function () {
-            rowCheckboxes.forEach(checkbox => {
-                checkbox.checked = this.checked;
+        if (selectAll) {
+            selectAll.addEventListener('change', function () {
+                rowCheckboxes.forEach(checkbox => {
+                    checkbox.checked = this.checked;
+                });
+            });
+        }
+        
+        // Ensure all content is visible on load
+        window.addEventListener('load', function() {
+            // Force all AOS elements to animate
+            document.querySelectorAll('[data-aos]').forEach(el => {
+                el.classList.add('aos-animate');
+            });
+        });
+
+        // Add template auto-fill functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            // Algorithm templates
+            const algorithmTemplates = {
+                'AES-256-GCM': {
+                    name: 'AES-256-GCM',
+                    type: 'Symmetric Encryption',
+                    keySize: '256',
+                    mode: 'GCM',
+                    quantumStatus: 'Quantum Safe'
+                },
+                'RSA-2048': {
+                    name: 'RSA-2048',
+                    type: 'Asymmetric Encryption',
+                    keySize: '2048',
+                    mode: '',
+                    quantumStatus: 'Quantum Vulnerable'
+                },
+                'SHA-256': {
+                    name: 'SHA-256',
+                    type: 'Hash Function',
+                    keySize: '',
+                    mode: '',
+                    quantumStatus: 'Quantum Safe'
+                },
+                'ECDSA-P256': {
+                    name: 'ECDSA-P256',
+                    type: 'Digital Signature',
+                    keySize: '256',
+                    mode: '',
+                    quantumStatus: 'Quantum Vulnerable'
+                }
+            };
+
+            // Handle template clicks
+            document.querySelectorAll('.card-hover button').forEach(button => {
+                button.addEventListener('click', function() {
+                    const templateName = this.querySelector('.font-medium').textContent;
+                    if (algorithmTemplates[templateName]) {
+                        // Fill form with template data
+                        console.log('Filling form with template:', templateName);
+                    }
+                });
             });
         });
     </script>