diff --git a/package-lock.json b/package-lock.json
index dd190df..5527d7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,8 +17,10 @@
                 "@radix-ui/react-slot": "^1.2.4",
                 "@radix-ui/react-tabs": "^1.1.13",
                 "@radix-ui/react-tooltip": "^1.2.8",
+                "@tanstack/react-table": "^8.21.3",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
+                "date-fns": "^4.1.0",
                 "dotenv": "^16.5.0",
                 "eslint-config-prettier": "^9.1.2",
                 "framer-motion": "^12.17.3",
@@ -29,6 +31,7 @@
                 "next-sitemap": "^4.2.3",
                 "nextra": "3.3.1",
                 "nextra-theme-docs": "3.3.1",
+                "ogl": "^1.0.11",
                 "p-limit": "^6.2.0",
                 "postprocessing": "^6.38.2",
                 "radix-ui": "^1.4.3",
@@ -37,12 +40,14 @@
                 "react-hook-form": "^7.57.0",
                 "react-markdown": "^9.0.3",
                 "react-use-measure": "^2.1.7",
+                "recharts": "^2.15.4",
                 "remark-gemoji": "^8.0.0",
                 "remark-gfm": "^4.0.1",
                 "remark-mdx-disable-explicit-jsx": "^0.1.0",
                 "sass": "^1.89.2",
                 "sharp": "^0.34.5",
                 "swagger-ui-react": "^5.31.0",
+                "swr": "^2.4.0",
                 "tailwind-merge": "^3.3.1",
                 "tailwindcss-animate": "^1.0.7",
                 "three": "^0.181.2",
@@ -120,7 +125,6 @@
             "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/code-frame": "^7.28.6",
                 "@babel/generator": "^7.28.6",
@@ -708,6 +712,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
             "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "ajv": "^6.12.4",
                 "debug": "^4.3.2",
@@ -731,6 +736,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
             "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
@@ -832,6 +838,7 @@
             "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
             "deprecated": "Use @eslint/config-array instead",
             "license": "Apache-2.0",
+            "peer": true,
             "dependencies": {
                 "@humanwhocodes/object-schema": "^2.0.2",
                 "debug": "^4.3.1",
@@ -846,6 +853,7 @@
             "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
             "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
             "license": "Apache-2.0",
+            "peer": true,
             "engines": {
                 "node": ">=12.22"
             },
@@ -859,7 +867,8 @@
             "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
             "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
             "deprecated": "Use @eslint/object-schema instead",
-            "license": "BSD-3-Clause"
+            "license": "BSD-3-Clause",
+            "peer": true
         },
         "node_modules/@iconify/types": {
             "version": "2.0.0",
@@ -5210,6 +5219,18 @@
                 "node": "^18 || ^20 || >= 21"
             }
         },
+        "node_modules/@swagger-api/apidom-parser-adapter-yaml-1-2/node_modules/tree-sitter": {
+            "version": "0.22.4",
+            "resolved": "https://registry.npmjs.org/tree-sitter/-/tree-sitter-0.22.4.tgz",
+            "integrity": "sha512-usbHZP9/oxNsUY65MQUsduGRqDHQOou1cagUSwjhoSYAmSahjQDAVsh9s+SlZkn8X8+O1FULRGwHu7AFP3kjzg==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "node-addon-api": "^8.3.0",
+                "node-gyp-build": "^4.8.4"
+            }
+        },
         "node_modules/@swagger-api/apidom-reference": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@swagger-api/apidom-reference/-/apidom-reference-1.1.0.tgz",
@@ -5308,6 +5329,26 @@
                 "tslib": "^2.8.0"
             }
         },
+        "node_modules/@tanstack/react-table": {
+            "version": "8.21.3",
+            "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+            "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/table-core": "8.21.3"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
         "node_modules/@tanstack/react-virtual": {
             "version": "3.13.10",
             "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.10.tgz",
@@ -5325,6 +5366,19 @@
                 "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
             }
         },
+        "node_modules/@tanstack/table-core": {
+            "version": "8.21.3",
+            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+            "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
         "node_modules/@tanstack/virtual-core": {
             "version": "3.13.10",
             "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.10.tgz",
@@ -5856,7 +5910,6 @@
             "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
             "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/prop-types": "*",
                 "csstype": "^3.0.2"
@@ -5998,7 +6051,6 @@
             "integrity": "sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==",
             "dev": true,
             "license": "BSD-2-Clause",
-            "peer": true,
             "dependencies": {
                 "@typescript-eslint/scope-manager": "8.14.0",
                 "@typescript-eslint/types": "8.14.0",
@@ -6213,7 +6265,6 @@
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
             "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -6272,6 +6323,7 @@
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
             "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "fast-deep-equal": "^3.1.1",
                 "fast-json-stable-stringify": "^2.0.0",
@@ -6930,7 +6982,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.9.0",
                 "caniuse-lite": "^1.0.30001759",
@@ -7743,7 +7794,6 @@
             "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.3.tgz",
             "integrity": "sha512-HncJ9gGJbVtw7YXtIs3+6YAFSSiKsom0amWc33Z7QbylbY2JGMrA0yz4EwrdTScZxnwclXeEZHzO5pxoy0ZE4g==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=0.10"
             }
@@ -8153,7 +8203,6 @@
             "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
             "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
             "license": "ISC",
-            "peer": true,
             "engines": {
                 "node": ">=12"
             }
@@ -8324,6 +8373,16 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/date-fns": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+            "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
+            }
+        },
         "node_modules/dayjs": {
             "version": "1.11.19",
             "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
@@ -8354,6 +8413,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/decimal.js-light": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+            "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+            "license": "MIT"
+        },
         "node_modules/decode-named-character-reference": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -8395,7 +8460,8 @@
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
             "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/deepmerge": {
             "version": "4.3.1",
@@ -8533,6 +8599,7 @@
             "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
             "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
             "license": "Apache-2.0",
+            "peer": true,
             "dependencies": {
                 "esutils": "^2.0.2"
             },
@@ -8540,6 +8607,16 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
         "node_modules/domexception": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -8898,6 +8975,7 @@
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -9016,7 +9094,6 @@
             "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz",
             "integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==",
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "eslint-config-prettier": "bin/cli.js"
             },
@@ -9106,7 +9183,6 @@
             "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@rtsao/scc": "^1.1.0",
                 "array-includes": "^3.1.9",
@@ -9321,6 +9397,7 @@
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
             "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
             "license": "BSD-2-Clause",
+            "peer": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
                 "estraverse": "^5.2.0"
@@ -9358,6 +9435,7 @@
             "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
             "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
             "license": "BSD-2-Clause",
+            "peer": true,
             "dependencies": {
                 "acorn": "^8.9.0",
                 "acorn-jsx": "^5.3.2",
@@ -9388,6 +9466,7 @@
             "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
             "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
             "license": "BSD-3-Clause",
+            "peer": true,
             "dependencies": {
                 "estraverse": "^5.1.0"
             },
@@ -9400,6 +9479,7 @@
             "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
             "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
             "license": "BSD-2-Clause",
+            "peer": true,
             "dependencies": {
                 "estraverse": "^5.2.0"
             },
@@ -9553,6 +9633,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/eventemitter3": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+            "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+            "license": "MIT"
+        },
         "node_modules/execa": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -9632,7 +9718,8 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/fast-diff": {
             "version": "1.3.0",
@@ -9641,6 +9728,15 @@
             "dev": true,
             "license": "Apache-2.0"
         },
+        "node_modules/fast-equals": {
+            "version": "5.4.0",
+            "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.0.tgz",
+            "integrity": "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/fast-glob": {
             "version": "3.3.3",
             "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -9685,7 +9781,8 @@
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
             "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/fastq": {
             "version": "1.17.1",
@@ -9737,6 +9834,7 @@
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
             "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "flat-cache": "^3.0.4"
             },
@@ -9761,6 +9859,7 @@
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
             "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "locate-path": "^6.0.0",
                 "path-exists": "^4.0.0"
@@ -9777,6 +9876,7 @@
             "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
             "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "flatted": "^3.2.9",
                 "keyv": "^4.5.3",
@@ -9790,7 +9890,8 @@
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
             "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-            "license": "ISC"
+            "license": "ISC",
+            "peer": true
         },
         "node_modules/flexsearch": {
             "version": "0.7.43",
@@ -10187,6 +10288,7 @@
             "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
             "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "type-fest": "^0.20.2"
             },
@@ -10850,14 +10952,14 @@
             "version": "5.0.2",
             "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.2.tgz",
             "integrity": "sha512-1NU7hWZDkV7hJ4PJ9dur9gTNQ4ePNPN4k9/0YhwjzykTi/+3Q5pF93YU5QoVj8BuOnhLgaY8gs0U2pj4kSYVcw==",
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/import-fresh": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
             "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "parent-module": "^1.0.0",
                 "resolve-from": "^4.0.0"
@@ -11348,6 +11450,7 @@
             "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
             "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -12826,7 +12929,8 @@
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
             "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/json-parse-even-better-errors": {
             "version": "2.3.1",
@@ -12839,13 +12943,15 @@
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/json-stable-stringify-without-jsonify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
             "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/json5": {
             "version": "2.2.3",
@@ -12897,6 +13003,7 @@
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
             "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "json-buffer": "3.0.1"
             }
@@ -12988,6 +13095,7 @@
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
             "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "prelude-ls": "^1.2.1",
                 "type-check": "~0.4.0"
@@ -13019,6 +13127,7 @@
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
             "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "p-locate": "^5.0.0"
             },
@@ -13051,7 +13160,8 @@
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/logform": {
             "version": "2.7.0",
@@ -14659,7 +14769,6 @@
             "resolved": "https://registry.npmjs.org/next/-/next-15.4.10.tgz",
             "integrity": "sha512-itVlc79QjpKMFMRhP+kbGKaSG/gZM6RCvwhEbwmCNF06CdDiNaoHcbeg0PqkEa2GOcn8KJ0nnc7+yL7EjoYLHQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@next/env": "15.4.10",
                 "@swc/helpers": "0.5.15",
@@ -15148,6 +15257,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/ogl": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.11.tgz",
+            "integrity": "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==",
+            "license": "Unlicense"
+        },
         "node_modules/once": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -15222,6 +15337,7 @@
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
             "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "deep-is": "^0.1.3",
                 "fast-levenshtein": "^2.0.6",
@@ -15272,6 +15388,7 @@
             "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
             "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "p-limit": "^3.0.2"
             },
@@ -15287,6 +15404,7 @@
             "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
             "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "yocto-queue": "^0.1.0"
             },
@@ -15302,6 +15420,7 @@
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -15336,6 +15455,7 @@
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
             "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "callsites": "^3.0.0"
             },
@@ -15651,7 +15771,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.11",
                 "picocolors": "^1.1.1",
@@ -15790,6 +15909,7 @@
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
             "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">= 0.8.0"
             }
@@ -16144,7 +16264,6 @@
             "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.30.1.tgz",
             "integrity": "sha512-tEF5I22zJnuclswcZMc8bDIrwRHRzf+NqVEmqg50ShAZMP7MWeR/RGDthfM/p+BlqvF2fXAzpn8i+SJcYD3alw==",
             "license": "MIT",
-            "peer": true,
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/ramda"
@@ -16193,7 +16312,6 @@
             "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
             "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0"
             },
@@ -16232,7 +16350,6 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
             "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
                 "scheduler": "^0.23.2"
@@ -16407,6 +16524,21 @@
                 }
             }
         },
+        "node_modules/react-smooth": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+            "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+            "license": "MIT",
+            "dependencies": {
+                "fast-equals": "^5.0.1",
+                "prop-types": "^15.8.1",
+                "react-transition-group": "^4.4.5"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/react-style-singleton": {
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -16449,6 +16581,22 @@
                 "react": ">= 0.14.0"
             }
         },
+        "node_modules/react-transition-group": {
+            "version": "4.4.5",
+            "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+            "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5",
+                "dom-helpers": "^5.0.1",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2"
+            },
+            "peerDependencies": {
+                "react": ">=16.6.0",
+                "react-dom": ">=16.6.0"
+            }
+        },
         "node_modules/react-use-measure": {
             "version": "2.1.7",
             "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
@@ -16505,6 +16653,44 @@
             "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==",
             "license": "MIT"
         },
+        "node_modules/recharts": {
+            "version": "2.15.4",
+            "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+            "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
+            "license": "MIT",
+            "dependencies": {
+                "clsx": "^2.0.0",
+                "eventemitter3": "^4.0.1",
+                "lodash": "^4.17.21",
+                "react-is": "^18.3.1",
+                "react-smooth": "^4.0.4",
+                "recharts-scale": "^0.4.4",
+                "tiny-invariant": "^1.3.1",
+                "victory-vendor": "^36.6.8"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "peerDependencies": {
+                "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/recharts-scale": {
+            "version": "0.4.5",
+            "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+            "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+            "license": "MIT",
+            "dependencies": {
+                "decimal.js-light": "^2.4.1"
+            }
+        },
+        "node_modules/recharts/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "license": "MIT"
+        },
         "node_modules/recma-build-jsx": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/recma-build-jsx/-/recma-build-jsx-1.0.0.tgz",
@@ -16573,8 +16759,7 @@
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
             "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/reflect.getprototypeof": {
             "version": "1.0.10",
@@ -17163,6 +17348,7 @@
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=4"
             }
@@ -17273,6 +17459,7 @@
             "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
             "deprecated": "Rimraf versions prior to v4 are no longer supported",
             "license": "ISC",
+            "peer": true,
             "dependencies": {
                 "glob": "^7.1.3"
             },
@@ -17289,6 +17476,7 @@
             "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
             "deprecated": "Glob versions prior to v9 are no longer supported",
             "license": "ISC",
+            "peer": true,
             "dependencies": {
                 "fs.realpath": "^1.0.0",
                 "inflight": "^1.0.4",
@@ -17446,7 +17634,6 @@
             "resolved": "https://registry.npmjs.org/sass/-/sass-1.89.2.tgz",
             "integrity": "sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "chokidar": "^4.0.0",
                 "immutable": "^5.0.2",
@@ -17699,7 +17886,6 @@
             "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.23.0.tgz",
             "integrity": "sha512-xfdu9DqPkIpExH29cmiTlgo0/jBki5la1Tkfhsv+Wu5TT3APLNHslR1acxuKJOCWqVdSc+pIbs/2ozjVRGppdg==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@shikijs/core": "1.23.0",
                 "@shikijs/engine-javascript": "1.23.0",
@@ -18405,7 +18591,6 @@
             "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
             "integrity": "sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -18419,6 +18604,19 @@
                 "immutable": "^3.8.1 || ^4.0.0-rc.1"
             }
         },
+        "node_modules/swr": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/swr/-/swr-2.4.0.tgz",
+            "integrity": "sha512-sUlC20T8EOt1pHmDiqueUWMmRRX03W7w5YxovWX7VR2KHEPCTMly85x05vpkP5i6Bu4h44ePSMD9Tc+G2MItFw==",
+            "license": "MIT",
+            "dependencies": {
+                "dequal": "^2.0.3",
+                "use-sync-external-store": "^1.6.0"
+            },
+            "peerDependencies": {
+                "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
         "node_modules/symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -18475,7 +18673,6 @@
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
             "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
                 "arg": "^5.0.2",
@@ -18574,7 +18771,8 @@
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/thenify": {
             "version": "3.3.1",
@@ -18601,8 +18799,13 @@
             "version": "0.181.2",
             "resolved": "https://registry.npmjs.org/three/-/three-0.181.2.tgz",
             "integrity": "sha512-k/CjiZ80bYss6Qs7/ex1TBlPD11whT9oKfT8oTGiHa34W4JRd1NiH/Tr1DbHWQ2/vMUypxksLnF2CfmlmM5XFQ==",
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
+        },
+        "node_modules/tiny-invariant": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+            "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+            "license": "MIT"
         },
         "node_modules/tinyexec": {
             "version": "1.0.2",
@@ -18894,6 +19097,7 @@
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
             "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "prelude-ls": "^1.2.1"
             },
@@ -19014,7 +19218,6 @@
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
             "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
             "license": "Apache-2.0",
-            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -19395,6 +19598,7 @@
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
             "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
             "license": "BSD-2-Clause",
+            "peer": true,
             "dependencies": {
                 "punycode": "^2.1.0"
             }
@@ -19453,9 +19657,9 @@
             }
         },
         "node_modules/use-sync-external-store": {
-            "version": "1.5.0",
-            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-            "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+            "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
             "license": "MIT",
             "peerDependencies": {
                 "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -19555,6 +19759,28 @@
             "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
             "license": "MIT"
         },
+        "node_modules/victory-vendor": {
+            "version": "36.9.2",
+            "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+            "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+            "license": "MIT AND ISC",
+            "dependencies": {
+                "@types/d3-array": "^3.0.3",
+                "@types/d3-ease": "^3.0.0",
+                "@types/d3-interpolate": "^3.0.1",
+                "@types/d3-scale": "^4.0.2",
+                "@types/d3-shape": "^3.1.0",
+                "@types/d3-time": "^3.0.0",
+                "@types/d3-timer": "^3.0.0",
+                "d3-array": "^3.1.6",
+                "d3-ease": "^3.0.1",
+                "d3-interpolate": "^3.0.1",
+                "d3-scale": "^4.0.2",
+                "d3-shape": "^3.1.0",
+                "d3-time": "^3.0.0",
+                "d3-timer": "^3.0.1"
+            }
+        },
         "node_modules/vscode-jsonrpc": {
             "version": "8.2.0",
             "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
@@ -19850,6 +20076,7 @@
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
             "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -20141,7 +20368,6 @@
             "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
             "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
             "license": "MIT",
-            "peer": true,
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"
             }
diff --git a/package.json b/package.json
index 3eb20a1..65ea037 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "scripts": {
         "dev": "next dev",
         "build": "next build",
-        "postbuild": "next-sitemap",
+        "postbuild": "next-sitemap && cp sitemap.xml public/sitemap.xml",
         "start": "next start",
         "lint": "next lint"
     },
@@ -42,8 +42,10 @@
         "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "dotenv": "^16.5.0",
         "eslint-config-prettier": "^9.1.2",
         "framer-motion": "^12.17.3",
@@ -54,6 +56,7 @@
         "next-sitemap": "^4.2.3",
         "nextra": "3.3.1",
         "nextra-theme-docs": "3.3.1",
+        "ogl": "^1.0.11",
         "p-limit": "^6.2.0",
         "postprocessing": "^6.38.2",
         "radix-ui": "^1.4.3",
@@ -62,12 +65,14 @@
         "react-hook-form": "^7.57.0",
         "react-markdown": "^9.0.3",
         "react-use-measure": "^2.1.7",
+        "recharts": "^2.15.4",
         "remark-gemoji": "^8.0.0",
         "remark-gfm": "^4.0.1",
         "remark-mdx-disable-explicit-jsx": "^0.1.0",
         "sass": "^1.89.2",
         "sharp": "^0.34.5",
         "swagger-ui-react": "^5.31.0",
+        "swr": "^2.4.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7",
         "three": "^0.181.2",
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 0000000..960cfaa
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<sitemap><loc>https://devguard.org/sitemap-0.xml</loc></sitemap>
+<sitemap><loc>https://devguard.org/api/sitemap.xml</loc></sitemap>
+</sitemapindex>
\ No newline at end of file
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..983c971
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            'rounded-lg border bg-card text-card-foreground shadow-sm',
+            className,
+        )}
+        {...props}
+    />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn('flex flex-col space-y-1.5 p-6', className)}
+        {...props}
+    />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            'text-2xl font-semibold leading-none tracking-tight',
+            className,
+        )}
+        {...props}
+    />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+    />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn('flex items-center p-6 pt-0', className)}
+        {...props}
+    />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 0000000..2e0fe17
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,407 @@
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+
+import { cn } from '@/lib/utils'
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const
+
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode
+        icon?: React.ComponentType
+    } & (
+        | { color?: string; theme?: never }
+        | { color?: never; theme: Record<keyof typeof THEMES, string> }
+    )
+}
+
+type ChartContextProps = {
+    config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+    const context = React.useContext(ChartContext)
+
+    if (!context) {
+        throw new Error('useChart must be used within a <ChartContainer />')
+    }
+
+    return context
+}
+
+const ChartContainer = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        config: ChartConfig
+        children: React.ComponentProps<
+            typeof RechartsPrimitive.ResponsiveContainer
+        >['children']
+    }
+>(({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = React.useId()
+    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+
+    return (
+        <ChartContext.Provider value={{ config }}>
+            <div
+                data-chart={chartId}
+                ref={ref}
+                className={cn(
+                    "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+                    className,
+                )}
+                {...props}
+            >
+                <ChartStyle id={chartId} config={config} />
+                <RechartsPrimitive.ResponsiveContainer>
+                    {children}
+                </RechartsPrimitive.ResponsiveContainer>
+            </div>
+        </ChartContext.Provider>
+    )
+})
+ChartContainer.displayName = 'Chart'
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+    const colorConfig = Object.entries(config).filter(
+        ([, config]) => config.theme || config.color,
+    )
+
+    if (!colorConfig.length) {
+        return null
+    }
+
+    return (
+        <style
+            dangerouslySetInnerHTML={{
+                __html: Object.entries(THEMES)
+                    .map(
+                        ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+    .map(([key, itemConfig]) => {
+        const color =
+            itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+            itemConfig.color
+        return color ? `  --color-${key}: ${color};` : null
+    })
+    .join('\n')}
+}
+`,
+                    )
+                    .join('\n'),
+            }}
+        />
+    )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+        React.ComponentProps<'div'> & {
+            hideLabel?: boolean
+            hideIndicator?: boolean
+            indicator?: 'line' | 'dot' | 'dashed'
+            nameKey?: string
+            labelKey?: string
+        }
+>(
+    (
+        {
+            active,
+            payload,
+            className,
+            indicator = 'dot',
+            hideLabel = false,
+            hideIndicator = false,
+            label,
+            labelFormatter,
+            labelClassName,
+            formatter,
+            color,
+            nameKey,
+            labelKey,
+        },
+        ref,
+    ) => {
+        const { config } = useChart()
+
+        const tooltipLabel = React.useMemo(() => {
+            if (hideLabel || !payload?.length) {
+                return null
+            }
+
+            const [item] = payload
+            const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const value =
+                !labelKey && typeof label === 'string'
+                    ? config[label as keyof typeof config]?.label || label
+                    : itemConfig?.label
+
+            if (labelFormatter) {
+                return (
+                    <div className={cn('font-medium', labelClassName)}>
+                        {labelFormatter(value, payload)}
+                    </div>
+                )
+            }
+
+            if (!value) {
+                return null
+            }
+
+            return (
+                <div className={cn('font-medium', labelClassName)}>{value}</div>
+            )
+        }, [
+            label,
+            labelFormatter,
+            payload,
+            hideLabel,
+            labelClassName,
+            config,
+            labelKey,
+        ])
+
+        if (!active || !payload?.length) {
+            return null
+        }
+
+        const nestLabel = payload.length === 1 && indicator !== 'dot'
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+                    className,
+                )}
+            >
+                {!nestLabel ? tooltipLabel : null}
+                <div className="grid gap-1.5">
+                    {payload
+                        .filter((item) => item.type !== 'none')
+                        .map((item, index) => {
+                            const key = `${nameKey || item.name || item.dataKey || 'value'}`
+                            const itemConfig = getPayloadConfigFromPayload(
+                                config,
+                                item,
+                                key,
+                            )
+                            const indicatorColor =
+                                color || item.payload.fill || item.color
+
+                            return (
+                                <div
+                                    key={item.dataKey}
+                                    className={cn(
+                                        'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+                                        indicator === 'dot' && 'items-center',
+                                    )}
+                                >
+                                    {formatter &&
+                                    item?.value !== undefined &&
+                                    item.name ? (
+                                        formatter(
+                                            item.value,
+                                            item.name,
+                                            item,
+                                            index,
+                                            item.payload,
+                                        )
+                                    ) : (
+                                        <>
+                                            {itemConfig?.icon ? (
+                                                <itemConfig.icon />
+                                            ) : (
+                                                !hideIndicator && (
+                                                    <div
+                                                        className={cn(
+                                                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                                                            {
+                                                                'h-2.5 w-2.5':
+                                                                    indicator ===
+                                                                    'dot',
+                                                                'w-1':
+                                                                    indicator ===
+                                                                    'line',
+                                                                'w-0 border-[1.5px] border-dashed bg-transparent':
+                                                                    indicator ===
+                                                                    'dashed',
+                                                                'my-0.5':
+                                                                    nestLabel &&
+                                                                    indicator ===
+                                                                        'dashed',
+                                                            },
+                                                        )}
+                                                        style={
+                                                            {
+                                                                '--color-bg':
+                                                                    indicatorColor,
+                                                                '--color-border':
+                                                                    indicatorColor,
+                                                            } as React.CSSProperties
+                                                        }
+                                                    />
+                                                )
+                                            )}
+                                            <div
+                                                className={cn(
+                                                    'flex flex-1 justify-between leading-none',
+                                                    nestLabel
+                                                        ? 'items-end'
+                                                        : 'items-center',
+                                                )}
+                                            >
+                                                <div className="grid gap-1.5">
+                                                    {nestLabel
+                                                        ? tooltipLabel
+                                                        : null}
+                                                    <span className="text-muted-foreground">
+                                                        {itemConfig?.label ||
+                                                            item.name}
+                                                    </span>
+                                                </div>
+                                                {item.value && (
+                                                    <span className="font-mono font-medium tabular-nums text-foreground">
+                                                        {item.value.toLocaleString()}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </>
+                                    )}
+                                </div>
+                            )
+                        })}
+                </div>
+            </div>
+        )
+    },
+)
+ChartTooltipContent.displayName = 'ChartTooltip'
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> &
+        Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+            hideIcon?: boolean
+            nameKey?: string
+        }
+>(
+    (
+        {
+            className,
+            hideIcon = false,
+            payload,
+            verticalAlign = 'bottom',
+            nameKey,
+        },
+        ref,
+    ) => {
+        const { config } = useChart()
+
+        if (!payload?.length) {
+            return null
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    'flex items-center justify-center gap-4',
+                    verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+                    className,
+                )}
+            >
+                {payload
+                    .filter((item) => item.type !== 'none')
+                    .map((item) => {
+                        const key = `${nameKey || item.dataKey || 'value'}`
+                        const itemConfig = getPayloadConfigFromPayload(
+                            config,
+                            item,
+                            key,
+                        )
+
+                        return (
+                            <div
+                                key={item.value}
+                                className={cn(
+                                    'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
+                                )}
+                            >
+                                {itemConfig?.icon && !hideIcon ? (
+                                    <itemConfig.icon />
+                                ) : (
+                                    <div
+                                        className="h-2 w-2 shrink-0 rounded-[2px]"
+                                        style={{
+                                            backgroundColor: item.color,
+                                        }}
+                                    />
+                                )}
+                                {itemConfig?.label}
+                            </div>
+                        )
+                    })}
+            </div>
+        )
+    },
+)
+ChartLegendContent.displayName = 'ChartLegend'
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+    config: ChartConfig,
+    payload: unknown,
+    key: string,
+) {
+    if (typeof payload !== 'object' || payload === null) {
+        return undefined
+    }
+
+    const payloadPayload =
+        'payload' in payload &&
+        typeof payload.payload === 'object' &&
+        payload.payload !== null
+            ? payload.payload
+            : undefined
+
+    let configLabelKey: string = key
+
+    if (
+        key in payload &&
+        typeof payload[key as keyof typeof payload] === 'string'
+    ) {
+        configLabelKey = payload[key as keyof typeof payload] as string
+    } else if (
+        payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+    ) {
+        configLabelKey = payloadPayload[
+            key as keyof typeof payloadPayload
+        ] as string
+    }
+
+    return configLabelKey in config
+        ? config[configLabelKey]
+        : config[key as keyof typeof config]
+}
+
+export {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    ChartLegend,
+    ChartLegendContent,
+    ChartStyle,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..8e28079
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { Search } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+    return (
+        <div className="group relative">
+            <Search
+                className="absolute left-3 h-5 w-5 text-muted-foreground"
+                style={{ top: '2.125rem' }}
+            />
+            <input
+                type={type}
+                placeholder="Search vulnerability..."
+                data-slot="input"
+                className={cn(
+                    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px] h-12 w-full min-w-0 rounded-xl border border-input bg-transparent py-0 pl-10 pr-2.5 text-base outline-none transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 dark:bg-input/30 dark:disabled:bg-input/80 md:text-lg',
+                    className,
+                )}
+                {...props}
+            />
+        </div>
+    )
+}
+
+export { Input }
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..54e576e
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn('animate-pulse rounded-md bg-muted', className)}
+            {...props}
+        />
+    )
+}
+
+export { Skeleton }
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..3a6e80f
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Table = React.forwardRef<
+    HTMLTableElement,
+    React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+        <table
+            ref={ref}
+            className={cn('w-full caption-bottom text-sm', className)}
+            {...props}
+        />
+    </div>
+))
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tbody
+        ref={ref}
+        className={cn('[&_tr:last-child]:border-0', className)}
+        {...props}
+    />
+))
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tfoot
+        ref={ref}
+        className={cn(
+            'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+            className,
+        )}
+        {...props}
+    />
+))
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<
+    HTMLTableRowElement,
+    React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+    <tr
+        ref={ref}
+        className={cn(
+            'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+            className,
+        )}
+        {...props}
+    />
+))
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <th
+        ref={ref}
+        className={cn(
+            'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+            className,
+        )}
+        {...props}
+    />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn(
+            'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+            className,
+        )}
+        {...props}
+    />
+))
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+    <caption
+        ref={ref}
+        className={cn('mt-4 text-sm text-muted-foreground', className)}
+        {...props}
+    />
+))
+TableCaption.displayName = 'TableCaption'
+
+export {
+    Table,
+    TableHeader,
+    TableBody,
+    TableFooter,
+    TableHead,
+    TableRow,
+    TableCell,
+    TableCaption,
+}
diff --git a/src/components/vulnerability-database/cve-detail.tsx b/src/components/vulnerability-database/cve-detail.tsx
new file mode 100644
index 0000000..0f87a7e
--- /dev/null
+++ b/src/components/vulnerability-database/cve-detail.tsx
@@ -0,0 +1,405 @@
+import { useState } from 'react'
+import { Container } from '../top-level-pages/container'
+import { affectedComponent } from '@/types/api'
+import { ChartContainer } from '@/components/ui/chart'
+import { Label, Pie, PieChart } from 'recharts'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { ExternalLink } from 'lucide-react'
+import { fetcher } from '@/lib/fetcher'
+import useSWR from 'swr'
+
+interface CVEData {
+    cve: string
+    affectedComponents: affectedComponent[]
+    cvss: number
+    datePublished: Date
+    dateLastModified: Date
+    description: string
+    epss?: number
+    risk?: {
+        baseScore: number
+        withEnvironment?: number
+        withThreatIntelligence?: number
+        withEnvironmentAndThreatIntelligence?: number
+    }
+}
+
+export default function CVEDetailComponent({ cveId }: { cveId?: string }) {
+    const { data, error, isLoading } = useSWR<CVEData>(
+        cveId ? `https://api.main.devguard.org/api/v1/vulndb/${cveId}` : null,
+        fetcher,
+    )
+
+    const [isDescriptionOpen, setIsDescriptionOpen] = useState(true)
+    const [isComponentsOpen, setIsComponentsOpen] = useState(false)
+
+    const options: Intl.DateTimeFormatOptions = {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    }
+
+    if (isLoading) {
+        return (
+            <Container>
+                <div className="mb-6 grid gap-4 lg:grid-cols-3">
+                    <div className="relative lg:col-span-2">
+                        <div className="absolute inset-px rounded-lg bg-white dark:bg-gray-800" />
+                        <div className="relative flex flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] p-8">
+                            <div className="flex items-start justify-between">
+                                <div className="space-y-3">
+                                    <Skeleton className="h-9 w-64" />
+                                    <Skeleton className="h-4 w-48" />
+                                    <Skeleton className="h-4 w-48" />
+                                </div>
+                                <Skeleton className="h-48 w-48 rounded-full" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="relative">
+                        <div className="absolute inset-px rounded-lg bg-white dark:bg-gray-800" />
+                        <div className="relative flex flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] p-8">
+                            <Skeleton className="h-6 w-32" />
+                            <div className="mt-4 space-y-3">
+                                <Skeleton className="h-5 w-full" />
+                                <Skeleton className="h-5 w-full" />
+                                <Skeleton className="h-5 w-full" />
+                                <Skeleton className="h-5 w-3/4" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="relative mb-6">
+                    <div className="absolute inset-px rounded-lg bg-white dark:bg-gray-800" />
+                    <div className="relative flex flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] p-8">
+                        <Skeleton className="mb-4 h-6 w-32" />
+                        <Skeleton className="h-4 w-full" />
+                        <Skeleton className="mt-2 h-4 w-full" />
+                        <Skeleton className="mt-2 h-4 w-3/4" />
+                    </div>
+                </div>
+
+                <div className="relative">
+                    <div className="absolute inset-px rounded-lg bg-white dark:bg-gray-800" />
+                    <div className="relative flex flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] p-8">
+                        <Skeleton className="mb-4 h-6 w-48" />
+                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-6">
+                            {[...Array(6)].map((_, i) => (
+                                <Skeleton
+                                    key={i}
+                                    className="h-32 w-full rounded-lg"
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </Container>
+        )
+    }
+
+    if (error || !data) {
+        return <div>Not found</div>
+    }
+
+    return (
+        <Container>
+            <div className="mb-6 grid gap-4 lg:grid-cols-3">
+                <div className="relative lg:col-span-2">
+                    <div className="absolute inset-px rounded-lg bg-white dark:bg-gray-800" />
+                    <div className="relative flex flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] p-8">
+                        <div className="flex items-start justify-between">
+                            <div>
+                                <h1 className="text-3xl font-bold text-gray-950 dark:text-white">
+                                    {data.cve}
+                                </h1>
+                                <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                                    Published:{' '}
+                                    {data.datePublished instanceof Date
+                                        ? data.datePublished.toLocaleDateString()
+                                        : new Date(
+                                              data.datePublished,
+                                          ).toLocaleDateString(
+                                              'en-EN',
+                                              options,
+                                          )}
+                                </p>
+                                <p className="text-sm text-gray-600 dark:text-gray-400">
+                                    Last Modified:{' '}
+                                    {data.dateLastModified instanceof Date
+                                        ? data.dateLastModified.toLocaleDateString()
+                                        : new Date(
+                                              data.dateLastModified,
+                                          ).toLocaleDateString(
+                                              'en-EN',
+                                              options,
+                                          )}
+                                </p>
+                            </div>
+                            <div className="flex flex-col items-center">
+                                <div className="h-48 w-48 text-sm text-gray-600 dark:text-gray-400">
+                                    <ChartContainer
+                                        config={{}}
+                                        className="aspect-square w-full"
+                                    >
+                                        <PieChart>
+                                            <Pie
+                                                data={[
+                                                    {
+                                                        name: 'Total',
+                                                        score: Math.max(
+                                                            0,
+                                                            10 - data.cvss,
+                                                        ),
+                                                        fill: 'hsl(var(--bg))',
+                                                    },
+                                                    {
+                                                        name: 'CVSS',
+                                                        score: Math.max(
+                                                            0,
+                                                            data.cvss,
+                                                        ),
+                                                        fill: 'hsl(var(--primary))',
+                                                    },
+                                                ]}
+                                                startAngle={-270}
+                                                dataKey="score"
+                                                nameKey="name"
+                                                innerRadius={60}
+                                                outerRadius={80}
+                                                strokeWidth={5}
+                                            >
+                                                <Label
+                                                    content={({ viewBox }) => {
+                                                        if (
+                                                            viewBox &&
+                                                            'cx' in viewBox &&
+                                                            'cy' in viewBox
+                                                        ) {
+                                                            return (
+                                                                <text
+                                                                    x={
+                                                                        viewBox.cx
+                                                                    }
+                                                                    y={
+                                                                        viewBox.cy
+                                                                    }
+                                                                    textAnchor="middle"
+                                                                    dominantBaseline="middle"
+                                                                >
+                                                                    <tspan
+                                                                        x={
+                                                                            viewBox.cx
+                                                                        }
+                                                                        y={
+                                                                            viewBox.cy
+                                                                        }
+                                                                        className="fill-foreground text-3xl font-bold"
+                                                                    >
+                                                                        {data.cvss ===
+                                                                        -1
+                                                                            ? 'N/A'
+                                                                            : data.cvss}
+                                                                    </tspan>
+                                                                    <tspan
+                                                                        x={
+                                                                            viewBox.cx
+                                                                        }
+                                                                        y={
+                                                                            (viewBox.cy ||
+                                                                                0) +
+                                                                            24
+                                                                        }
+                                                                        className="fill-muted-foreground"
+                                                                    >
+                                                                        CVSS
+                                                                    </tspan>
+                                                                </text>
+                                                            )
+                                                        }
+                                                    }}
+                                                />
+                                            </Pie>
+                                        </PieChart>
+                                    </ChartContainer>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="pointer-events-none absolute inset-px rounded-lg shadow outline outline-1 outline-black/5 dark:outline-white/15" />
+                </div>
+
+                <div className="relative">
+                    <div className="absolute inset-px rounded-lg bg-white dark:bg-gray-800" />
+                    <div className="relative flex flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] p-8">
+                        <p className="text-lg font-medium text-gray-950 dark:text-white">
+                            Risk Scores
+                        </p>
+                        <div className="mt-4 space-y-2">
+                            <div>
+                                <span className="text-sm text-gray-600 dark:text-gray-400">
+                                    BaseScore:
+                                </span>
+                                <span className="ml-2 font-semibold text-gray-950 dark:text-white">
+                                    {data.risk?.baseScore.toFixed(1) ?? 'N/A'}
+                                </span>
+                            </div>
+                            {data.risk?.withEnvironment && (
+                                <div>
+                                    <span className="text-sm text-gray-600 dark:text-gray-400">
+                                        With Environment:
+                                    </span>
+                                    <span className="ml-2 font-semibold text-gray-950 dark:text-white">
+                                        {data.risk.withEnvironment.toFixed(1)}
+                                    </span>
+                                </div>
+                            )}
+                            {data.risk?.withThreatIntelligence && (
+                                <div>
+                                    <span className="text-sm text-gray-600 dark:text-gray-400">
+                                        With Threat Intelligence:
+                                    </span>
+                                    <span className="ml-2 font-semibold text-gray-950 dark:text-white">
+                                        {data.risk.withThreatIntelligence.toFixed(
+                                            1,
+                                        )}
+                                    </span>
+                                </div>
+                            )}
+                            <div className="border-t border-gray-200 pt-2 dark:border-gray-700">
+                                <span className="text-sm text-gray-600 dark:text-gray-400">
+                                    EPSS:
+                                </span>
+                                <span className="ml-2 font-semibold text-gray-950 dark:text-white">
+                                    {data.epss
+                                        ? `${(data.epss * 100).toFixed(2)}%`
+                                        : 'N/A'}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="pointer-events-none absolute inset-px rounded-lg shadow outline outline-1 outline-black/5 dark:outline-white/15" />
+                </div>
+            </div>
+
+            <div className="relative mb-6">
+                <div className="absolute inset-px rounded-lg bg-white dark:bg-gray-800" />
+                <div className="relative flex flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)]">
+                    <button
+                        onClick={() => setIsDescriptionOpen(!isDescriptionOpen)}
+                        className="flex w-full items-center justify-between p-8 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50"
+                    >
+                        <h2 className="text-lg font-medium text-gray-950 dark:text-white">
+                            Description
+                        </h2>
+                        <svg
+                            className={`h-5 w-5 transition-transform ${isDescriptionOpen ? 'rotate-180' : ''}`}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M19 9l-7 7-7-7"
+                            />
+                        </svg>
+                    </button>
+                    {isDescriptionOpen && (
+                        <div className="px-8 pb-8">
+                            <p className="whitespace-pre-wrap text-sm text-gray-600 dark:text-gray-400">
+                                {data.description}
+                            </p>
+                        </div>
+                    )}
+                </div>
+                <div className="pointer-events-none absolute inset-px rounded-lg shadow outline outline-1 outline-black/5 dark:outline-white/15" />
+            </div>
+
+            <div className="relative">
+                <div className="absolute inset-px rounded-lg bg-white dark:bg-gray-800" />
+                <div className="relative flex flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)]">
+                    <button
+                        onClick={() => setIsComponentsOpen(!isComponentsOpen)}
+                        className="flex w-full items-center justify-between p-8 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50"
+                    >
+                        <h2 className="text-lg font-medium text-gray-950 dark:text-white">
+                            Affected Components (
+                            {data.affectedComponents.length})
+                        </h2>
+                        <svg
+                            className={`h-5 w-5 transition-transform ${isComponentsOpen ? 'rotate-180' : ''}`}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M19 9l-7 7-7-7"
+                            />
+                        </svg>
+                    </button>
+                    {isComponentsOpen && (
+                        <div className="px-8 pb-8">
+                            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-6">
+                                {data.affectedComponents.map((ac) => (
+                                    <div
+                                        key={ac.id}
+                                        className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50"
+                                    >
+                                        <p className="font-semibold text-gray-950 dark:text-white">
+                                            {ac.name}
+                                        </p>
+                                        {ac.version && (
+                                            <p className="text-sm text-gray-600 dark:text-gray-400">
+                                                {ac.version}
+                                            </p>
+                                        )}
+                                        <p className="mt-1 text-xs text-gray-500 dark:text-gray-500">
+                                            Ecosystem: {ac.ecosystem}
+                                        </p>
+                                        <p className="mt-1 text-xs text-gray-500 dark:text-gray-500">
+                                            {}
+                                            <br /> Fix:{' '}
+                                            {ac.versionFixed
+                                                ? `${ac.versionFixed}%`
+                                                : 'N/A'}
+                                        </p>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <div className="pointer-events-none absolute inset-px rounded-lg shadow outline outline-1 outline-black/5 dark:outline-white/15" />
+            </div>
+            <div className="mt-6 flex justify-end gap-3">
+                <div>
+                    <Button>
+                        <Link href="/vulnerability-database">Get Back</Link>
+                    </Button>
+                </div>
+                <div>
+                    <Button>
+                        <a
+                            target="_blank"
+                            href="https://main.devguard.org/"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-2"
+                        >
+                            Try DevGuard
+                            <ExternalLink size={16} />
+                        </a>
+                    </Button>
+                </div>
+            </div>
+        </Container>
+    )
+}
diff --git a/src/components/vulnerability-database/hero.tsx b/src/components/vulnerability-database/hero.tsx
new file mode 100644
index 0000000..5b7234d
--- /dev/null
+++ b/src/components/vulnerability-database/hero.tsx
@@ -0,0 +1,98 @@
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { Input } from '@/components/ui/input'
+import LightRays from '@/components/vulnerability-database/light-rays'
+import { ChartRadarDots } from '@/components/vulnerability-database/radar-chart'
+
+interface VulnDBHeroProps {
+    searchTerm: string
+    setSearchTerm: (value: string) => void
+    onSearch: () => void
+}
+
+export default function VulnDBHero({
+    searchTerm,
+    setSearchTerm,
+    onSearch,
+}: VulnDBHeroProps) {
+    return (
+        <>
+            <div className="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-40">
+                <div className="px-6 lg:px-0 lg:pt-4">
+                    <div className="mx-auto max-w-2xl">
+                        <div className="max-w-lg">
+                            <div className="">
+                                <a
+                                    href="/introduction"
+                                    className="inline-flex space-x-6"
+                                >
+                                    <span className="text-primary-400 bg-primary-500/10 rounded-full px-3 py-1 text-sm/6 font-semibold ring-1 ring-inset ring-primary">
+                                        What&apos;s new
+                                    </span>
+                                    <span className="inline-flex items-center space-x-2 text-sm/6 font-medium text-gray-300">
+                                        <span>Just released v1.0</span>
+                                        <ChevronRightIcon
+                                            aria-hidden="true"
+                                            className="size-5 text-gray-500"
+                                        />
+                                    </span>
+                                </a>
+                            </div>
+
+                            <h1 className="mt-10 text-pretty text-5xl font-semibold tracking-tight text-white sm:text-7xl">
+                                Vulnerability Database
+                            </h1>
+                            <p className="mt-8 text-pretty text-lg font-medium text-gray-400 sm:text-xl/8">
+                                Search Vulnerabilities, Analyze Risks -<br />
+                                All in One Platform.
+                            </p>
+                            <form
+                                onSubmit={(e) => {
+                                    e.preventDefault()
+                                    onSearch()
+                                }}
+                            >
+                                <Input
+                                    className="mt-5"
+                                    value={searchTerm}
+                                    onChange={(e) =>
+                                        setSearchTerm(e.target.value)
+                                    }
+                                />
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0">
+                    <div
+                        style={{
+                            width: '100wh',
+                            height: '100vh',
+                        }}
+                        className="absolute inset-y-24 right-1 -z-20 opacity-70"
+                    >
+                        <LightRays
+                            raysOrigin="top-center"
+                            raysColor="#ffffff"
+                            raysSpeed={0.5}
+                            lightSpread={0.5}
+                            rayLength={3}
+                            followMouse={true}
+                            mouseInfluence={0.1}
+                            noiseAmount={0.1}
+                            distortion={0}
+                            className="custom-rays"
+                            pulsating={false}
+                            fadeDistance={1}
+                            saturation={1}
+                        />
+                    </div>
+                    <div>
+                        <div className="rounded-md bg-card">
+                            <ChartRadarDots />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
diff --git a/src/components/vulnerability-database/light-rays.tsx b/src/components/vulnerability-database/light-rays.tsx
new file mode 100644
index 0000000..6258778
--- /dev/null
+++ b/src/components/vulnerability-database/light-rays.tsx
@@ -0,0 +1,485 @@
+import { useRef, useEffect, useState } from 'react'
+import { Renderer, Program, Triangle, Mesh } from 'ogl'
+
+export type RaysOrigin =
+    | 'top-center'
+    | 'top-left'
+    | 'top-right'
+    | 'right'
+    | 'left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'bottom-left'
+
+interface LightRaysProps {
+    raysOrigin?: RaysOrigin
+    raysColor?: string
+    raysSpeed?: number
+    lightSpread?: number
+    rayLength?: number
+    pulsating?: boolean
+    fadeDistance?: number
+    saturation?: number
+    followMouse?: boolean
+    mouseInfluence?: number
+    noiseAmount?: number
+    distortion?: number
+    className?: string
+}
+
+const DEFAULT_COLOR = '#ffffff'
+
+const hexToRgb = (hex: string): [number, number, number] => {
+    const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return m
+        ? [
+              parseInt(m[1], 16) / 255,
+              parseInt(m[2], 16) / 255,
+              parseInt(m[3], 16) / 255,
+          ]
+        : [1, 1, 1]
+}
+
+const getAnchorAndDir = (
+    origin: RaysOrigin,
+    w: number,
+    h: number,
+): { anchor: [number, number]; dir: [number, number] } => {
+    const outside = 0.2
+    switch (origin) {
+        case 'top-left':
+            return { anchor: [0, -outside * h], dir: [0, 1] }
+        case 'top-right':
+            return { anchor: [w, -outside * h], dir: [0, 1] }
+        case 'left':
+            return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] }
+        case 'right':
+            return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] }
+        case 'bottom-left':
+            return { anchor: [0, (1 + outside) * h], dir: [0, -1] }
+        case 'bottom-center':
+            return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] }
+        case 'bottom-right':
+            return { anchor: [w, (1 + outside) * h], dir: [0, -1] }
+        default: // "top-center"
+            return { anchor: [0.5 * w, -outside * h], dir: [0, 1] }
+    }
+}
+
+type Vec2 = [number, number]
+type Vec3 = [number, number, number]
+
+interface Uniforms {
+    iTime: { value: number }
+    iResolution: { value: Vec2 }
+    rayPos: { value: Vec2 }
+    rayDir: { value: Vec2 }
+    raysColor: { value: Vec3 }
+    raysSpeed: { value: number }
+    lightSpread: { value: number }
+    rayLength: { value: number }
+    pulsating: { value: number }
+    fadeDistance: { value: number }
+    saturation: { value: number }
+    mousePos: { value: Vec2 }
+    mouseInfluence: { value: number }
+    noiseAmount: { value: number }
+    distortion: { value: number }
+}
+
+const LightRays: React.FC<LightRaysProps> = ({
+    raysOrigin = 'top-center',
+    raysColor = DEFAULT_COLOR,
+    raysSpeed = 1,
+    lightSpread = 1,
+    rayLength = 2,
+    pulsating = false,
+    fadeDistance = 1.0,
+    saturation = 1.0,
+    followMouse = true,
+    mouseInfluence = 0.1,
+    noiseAmount = 0.0,
+    distortion = 0.0,
+    className = '',
+}) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const uniformsRef = useRef<Uniforms | null>(null)
+    const rendererRef = useRef<Renderer | null>(null)
+    const mouseRef = useRef({ x: 0.5, y: 0.5 })
+    const smoothMouseRef = useRef({ x: 0.5, y: 0.5 })
+    const animationIdRef = useRef<number | null>(null)
+    const meshRef = useRef<Mesh | null>(null)
+    const cleanupFunctionRef = useRef<(() => void) | null>(null)
+    const [isVisible, setIsVisible] = useState(false)
+    const observerRef = useRef<IntersectionObserver | null>(null)
+
+    useEffect(() => {
+        if (!containerRef.current) return
+
+        observerRef.current = new IntersectionObserver(
+            (entries) => {
+                const entry = entries[0]
+                setIsVisible(entry.isIntersecting)
+            },
+            { threshold: 0.1 },
+        )
+
+        observerRef.current.observe(containerRef.current)
+
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect()
+                observerRef.current = null
+            }
+        }
+    }, [])
+
+    useEffect(() => {
+        if (!isVisible || !containerRef.current) return
+
+        if (cleanupFunctionRef.current) {
+            cleanupFunctionRef.current()
+            cleanupFunctionRef.current = null
+        }
+
+        const initializeWebGL = async () => {
+            if (!containerRef.current) return
+
+            await new Promise((resolve) => setTimeout(resolve, 10))
+
+            if (!containerRef.current) return
+
+            const renderer = new Renderer({
+                dpr: Math.min(window.devicePixelRatio, 2),
+                alpha: true,
+            })
+            rendererRef.current = renderer
+
+            const gl = renderer.gl
+            gl.canvas.style.width = '100%'
+            gl.canvas.style.height = '100%'
+
+            while (containerRef.current.firstChild) {
+                containerRef.current.removeChild(
+                    containerRef.current.firstChild,
+                )
+            }
+            containerRef.current.appendChild(gl.canvas)
+
+            const vert = `
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = position * 0.5 + 0.5;
+  gl_Position = vec4(position, 0.0, 1.0);
+}`
+
+            const frag = `precision highp float;
+
+uniform float iTime;
+uniform vec2  iResolution;
+
+uniform vec2  rayPos;
+uniform vec2  rayDir;
+uniform vec3  raysColor;
+uniform float raysSpeed;
+uniform float lightSpread;
+uniform float rayLength;
+uniform float pulsating;
+uniform float fadeDistance;
+uniform float saturation;
+uniform vec2  mousePos;
+uniform float mouseInfluence;
+uniform float noiseAmount;
+uniform float distortion;
+
+varying vec2 vUv;
+
+float noise(vec2 st) {
+  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+}
+
+float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,
+                  float seedA, float seedB, float speed) {
+  vec2 sourceToCoord = coord - raySource;
+  vec2 dirNorm = normalize(sourceToCoord);
+  float cosAngle = dot(dirNorm, rayRefDirection);
+
+  float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
+  
+  float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));
+
+  float distance = length(sourceToCoord);
+  float maxDistance = iResolution.x * rayLength;
+  float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
+  
+  float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);
+  float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;
+
+  float baseStrength = clamp(
+    (0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +
+    (0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),
+    0.0, 1.0
+  );
+
+  return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);
+  
+  vec2 finalRayDir = rayDir;
+  if (mouseInfluence > 0.0) {
+    vec2 mouseScreenPos = mousePos * iResolution.xy;
+    vec2 mouseDirection = normalize(mouseScreenPos - rayPos);
+    finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));
+  }
+
+  vec4 rays1 = vec4(1.0) *
+               rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349,
+                           1.5 * raysSpeed);
+  vec4 rays2 = vec4(1.0) *
+               rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234,
+                           1.1 * raysSpeed);
+
+  fragColor = rays1 * 0.5 + rays2 * 0.4;
+
+  if (noiseAmount > 0.0) {
+    float n = noise(coord * 0.01 + iTime * 0.1);
+    fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);
+  }
+
+  float brightness = 1.0 - (coord.y / iResolution.y);
+  fragColor.x *= 0.1 + brightness * 0.8;
+  fragColor.y *= 0.3 + brightness * 0.6;
+  fragColor.z *= 0.5 + brightness * 0.5;
+
+  if (saturation != 1.0) {
+    float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));
+    fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);
+  }
+
+  fragColor.rgb *= raysColor;
+}
+
+void main() {
+  vec4 color;
+  mainImage(color, gl_FragCoord.xy);
+  gl_FragColor  = color;
+}`
+
+            const uniforms: Uniforms = {
+                iTime: { value: 0 },
+                iResolution: { value: [1, 1] },
+
+                rayPos: { value: [0, 0] },
+                rayDir: { value: [0, 1] },
+
+                raysColor: { value: hexToRgb(raysColor) },
+                raysSpeed: { value: raysSpeed },
+                lightSpread: { value: lightSpread },
+                rayLength: { value: rayLength },
+                pulsating: { value: pulsating ? 1.0 : 0.0 },
+                fadeDistance: { value: fadeDistance },
+                saturation: { value: saturation },
+                mousePos: { value: [0.5, 0.5] },
+                mouseInfluence: { value: mouseInfluence },
+                noiseAmount: { value: noiseAmount },
+                distortion: { value: distortion },
+            }
+            uniformsRef.current = uniforms
+
+            const geometry = new Triangle(gl)
+            const program = new Program(gl, {
+                vertex: vert,
+                fragment: frag,
+                uniforms,
+            })
+            const mesh = new Mesh(gl, { geometry, program })
+            meshRef.current = mesh
+
+            const updatePlacement = () => {
+                if (!containerRef.current || !renderer) return
+
+                renderer.dpr = Math.min(window.devicePixelRatio, 2)
+
+                const { clientWidth: wCSS, clientHeight: hCSS } =
+                    containerRef.current
+                renderer.setSize(wCSS, hCSS)
+
+                const dpr = renderer.dpr
+                const w = wCSS * dpr
+                const h = hCSS * dpr
+
+                uniforms.iResolution.value = [w, h]
+
+                const { anchor, dir } = getAnchorAndDir(raysOrigin, w, h)
+                uniforms.rayPos.value = anchor
+                uniforms.rayDir.value = dir
+            }
+
+            const loop = (t: number) => {
+                if (
+                    !rendererRef.current ||
+                    !uniformsRef.current ||
+                    !meshRef.current
+                ) {
+                    return
+                }
+
+                uniforms.iTime.value = t * 0.001
+
+                if (followMouse && mouseInfluence > 0.0) {
+                    const smoothing = 0.92
+
+                    smoothMouseRef.current.x =
+                        smoothMouseRef.current.x * smoothing +
+                        mouseRef.current.x * (1 - smoothing)
+                    smoothMouseRef.current.y =
+                        smoothMouseRef.current.y * smoothing +
+                        mouseRef.current.y * (1 - smoothing)
+
+                    uniforms.mousePos.value = [
+                        smoothMouseRef.current.x,
+                        smoothMouseRef.current.y,
+                    ]
+                }
+
+                try {
+                    renderer.render({ scene: mesh })
+                    animationIdRef.current = requestAnimationFrame(loop)
+                } catch (error) {
+                    console.warn('WebGL rendering error:', error)
+                    return
+                }
+            }
+
+            window.addEventListener('resize', updatePlacement)
+            updatePlacement()
+            animationIdRef.current = requestAnimationFrame(loop)
+
+            cleanupFunctionRef.current = () => {
+                if (animationIdRef.current) {
+                    cancelAnimationFrame(animationIdRef.current)
+                    animationIdRef.current = null
+                }
+
+                window.removeEventListener('resize', updatePlacement)
+
+                if (renderer) {
+                    try {
+                        const canvas = renderer.gl.canvas
+                        const loseContextExt =
+                            renderer.gl.getExtension('WEBGL_lose_context')
+                        if (loseContextExt) {
+                            loseContextExt.loseContext()
+                        }
+
+                        if (canvas && canvas.parentNode) {
+                            canvas.parentNode.removeChild(canvas)
+                        }
+                    } catch (error) {
+                        console.warn('Error during WebGL cleanup:', error)
+                    }
+                }
+
+                rendererRef.current = null
+                uniformsRef.current = null
+                meshRef.current = null
+            }
+        }
+
+        initializeWebGL()
+
+        return () => {
+            if (cleanupFunctionRef.current) {
+                cleanupFunctionRef.current()
+                cleanupFunctionRef.current = null
+            }
+        }
+    }, [
+        isVisible,
+        raysOrigin,
+        raysColor,
+        raysSpeed,
+        lightSpread,
+        rayLength,
+        pulsating,
+        fadeDistance,
+        saturation,
+        followMouse,
+        mouseInfluence,
+        noiseAmount,
+        distortion,
+    ])
+
+    useEffect(() => {
+        if (
+            !uniformsRef.current ||
+            !containerRef.current ||
+            !rendererRef.current
+        )
+            return
+
+        const u = uniformsRef.current
+        const renderer = rendererRef.current
+
+        u.raysColor.value = hexToRgb(raysColor)
+        u.raysSpeed.value = raysSpeed
+        u.lightSpread.value = lightSpread
+        u.rayLength.value = rayLength
+        u.pulsating.value = pulsating ? 1.0 : 0.0
+        u.fadeDistance.value = fadeDistance
+        u.saturation.value = saturation
+        u.mouseInfluence.value = mouseInfluence
+        u.noiseAmount.value = noiseAmount
+        u.distortion.value = distortion
+
+        const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current
+        const dpr = renderer.dpr
+        const { anchor, dir } = getAnchorAndDir(
+            raysOrigin,
+            wCSS * dpr,
+            hCSS * dpr,
+        )
+        u.rayPos.value = anchor
+        u.rayDir.value = dir
+    }, [
+        raysColor,
+        raysSpeed,
+        lightSpread,
+        raysOrigin,
+        rayLength,
+        pulsating,
+        fadeDistance,
+        saturation,
+        mouseInfluence,
+        noiseAmount,
+        distortion,
+    ])
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!containerRef.current || !rendererRef.current) return
+            const rect = containerRef.current.getBoundingClientRect()
+            const x = (e.clientX - rect.left) / rect.width
+            const y = (e.clientY - rect.top) / rect.height
+            mouseRef.current = { x, y }
+        }
+
+        if (followMouse) {
+            window.addEventListener('mousemove', handleMouseMove)
+            return () =>
+                window.removeEventListener('mousemove', handleMouseMove)
+        }
+    }, [followMouse])
+
+    return (
+        <div
+            ref={containerRef}
+            className={`pointer-events-none relative z-[3] h-full w-full overflow-hidden ${className}`.trim()}
+        />
+    )
+}
+
+export default LightRays
diff --git a/src/components/vulnerability-database/radar-chart.tsx b/src/components/vulnerability-database/radar-chart.tsx
new file mode 100644
index 0000000..d90aa1f
--- /dev/null
+++ b/src/components/vulnerability-database/radar-chart.tsx
@@ -0,0 +1,128 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import {
+    PolarAngleAxis,
+    PolarGrid,
+    PolarRadiusAxis,
+    Radar,
+    RadarChart,
+} from 'recharts'
+
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card'
+import {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    type ChartConfig,
+} from '@/components/ui/chart'
+import { useRadarData } from '@/lib/api/vulndb'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export const description = 'A radar chart with dots'
+
+const chartConfig = {
+    desktop: {
+        label: 'Ecosystems',
+        color: '#fbbe24',
+    },
+} satisfies ChartConfig
+
+export function ChartRadarDots() {
+    const { data, isLoading, error } = useRadarData()
+    if (error) return <Card>Error loading data</Card>
+
+    const MIN_PERCENT = 0.2
+    const MAX_PERCENT = 0.9
+
+    const logValues = data.map((d) => Math.log10(d.count + 1))
+    const logMin = Math.min(...logValues)
+    const logMax = Math.max(...logValues)
+    const logRange = logMax - logMin || 1
+
+    const chartData = data.map((d, i) => {
+        const normalized =
+            MIN_PERCENT +
+            ((logValues[i] - logMin) / logRange) * (MAX_PERCENT - MIN_PERCENT)
+        return {
+            name: d.ecosystem,
+            value: normalized,
+            originalValue: d.count,
+        }
+    })
+    if (isLoading) {
+        return (
+            <Card>
+                <CardHeader className="items-center">
+                    <Skeleton className="h-8 w-64" />
+                    <Skeleton className="mt-2 h-4 w-48" />
+                </CardHeader>
+                <CardContent className="mb-3 pb-0">
+                    <Skeleton className="mx-auto h-[250px] w-[250px] rounded-full" />{' '}
+                </CardContent>
+            </Card>
+        )
+    }
+
+    return (
+        <Card>
+            <CardHeader className="items-center">
+                <CardTitle>Vulnerabilities - Amount</CardTitle>
+                <CardDescription>
+                    Showing total vulnerable packages in ecosystems
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="pb-0">
+                <ChartContainer
+                    config={chartConfig}
+                    className="mx-auto max-h-[250px]"
+                >
+                    <RadarChart data={chartData}>
+                        <ChartTooltip
+                            cursor={false}
+                            content={
+                                <ChartTooltipContent
+                                    formatter={(value, name, item) =>
+                                        item.payload.originalValue.toLocaleString()
+                                    }
+                                />
+                            }
+                        />
+                        <PolarAngleAxis dataKey="name" />
+                        <PolarGrid />
+                        <PolarRadiusAxis
+                            domain={[0, 1]}
+                            tick={false}
+                            axisLine={false}
+                        />
+                        <Radar
+                            dataKey="value"
+                            fill="var(--color-desktop)"
+                            fillOpacity={0.2}
+                            dot={{
+                                r: 3,
+                                fillOpacity: 1,
+                            }}
+                        />
+                    </RadarChart>
+                </ChartContainer>
+            </CardContent>
+            {/* <CardFooter className="flex-col gap-2 text-sm">
+                <div className="flex items-center gap-2 font-medium leading-none">
+                    14.232 Vulnerabilities added this month{' '}
+                    <TrendingUp className="h-4 w-4" />
+                </div>
+                <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                    January 2026
+                </div>
+            </CardFooter> */}
+        </Card>
+    )
+}
diff --git a/src/components/vulnerability-database/vulnerability-data-table/columns.tsx b/src/components/vulnerability-database/vulnerability-data-table/columns.tsx
new file mode 100644
index 0000000..53d5d37
--- /dev/null
+++ b/src/components/vulnerability-database/vulnerability-data-table/columns.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { ArrowUpDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { formatDistanceToNow, format } from 'date-fns'
+
+export type Vulnerability = {
+    cve: string
+    cvss: number
+    datePublished: Date
+    risk?: number
+    description: string
+}
+
+export const columns: ColumnDef<Vulnerability>[] = [
+    {
+        accessorKey: 'cve',
+        header: 'ID',
+        size: 150,
+        cell: ({ row }) => (
+            <Link href={`/vulnerability-database/${row.getValue('cve')}`}>
+                <div className="w-32">{row.getValue('cve')}</div>
+            </Link>
+        ),
+    },
+    {
+        accessorKey: 'description',
+        header: 'Description',
+        size: 600,
+        cell: ({ row }) => {
+            const description = row.getValue('description') as string
+            const truncated =
+                description?.length > 100
+                    ? description.substring(0, 100) + '...'
+                    : description
+            return <div className="w-108">{truncated}</div>
+        },
+    },
+    {
+        accessorKey: 'cvss',
+        size: 100,
+        header: ({ column }) => {
+            return (
+                <div
+                    className="flex cursor-pointer items-center hover:text-accent-foreground"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === 'asc')
+                    }
+                >
+                    CVSS
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </div>
+            )
+        },
+        cell: ({ row }) => <div className="w-20">{row.getValue('cvss')}</div>,
+    },
+    {
+        accessorKey: 'datePublished',
+        size: 150,
+        header: ({ column }) => {
+            return (
+                <div
+                    className="flex cursor-pointer items-center hover:text-accent-foreground"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === 'asc')
+                    }
+                >
+                    Published
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </div>
+            )
+        },
+        cell: ({ row }) => {
+            const dateStr = row.getValue('datePublished') as string
+            const date = new Date(dateStr)
+            const diffMs = Date.now() - date.getTime()
+            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+            const formatted =
+                diffDays < 1
+                    ? formatDistanceToNow(date, { addSuffix: true })
+                    : format(date, 'd. MMM yy')
+
+            return <div className="w-32">{formatted}</div>
+        },
+    },
+]
diff --git a/src/components/vulnerability-database/vulnerability-data-table/data-table.tsx b/src/components/vulnerability-database/vulnerability-data-table/data-table.tsx
new file mode 100644
index 0000000..98ba4e4
--- /dev/null
+++ b/src/components/vulnerability-database/vulnerability-data-table/data-table.tsx
@@ -0,0 +1,172 @@
+'use client'
+
+import {
+    ColumnDef,
+    SortingState,
+    flexRender,
+    getCoreRowModel,
+    getSortedRowModel,
+    useReactTable,
+} from '@tanstack/react-table'
+
+import { Button } from '@/components/ui/button'
+import * as React from 'react'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useRouter } from 'next/navigation'
+import { Vulnerability } from './columns'
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table'
+
+const PAGE_SIZE = 10
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    isLoading?: boolean
+    total?: number
+    page?: number
+    onPageChange?: (page: number) => void
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    isLoading = false,
+    total = 0,
+    page = 1,
+    onPageChange,
+}: DataTableProps<TData, TValue>) {
+    const router = useRouter()
+
+    const [sorting, setSorting] = React.useState<SortingState>([
+        {
+            id: 'datePublished',
+            desc: true,
+        },
+    ])
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            sorting,
+        },
+    })
+
+    return (
+        <div>
+            <div className="overflow-hidden rounded-md border">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext(),
+                                                  )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {isLoading ? (
+                            Array(PAGE_SIZE)
+                                .fill(0)
+                                .map((_, rowIndex) => (
+                                    <TableRow key={`skeleton-${rowIndex}`}>
+                                        {columns.map((column, cellIndex) => (
+                                            <TableCell
+                                                key={`skeleton-cell-${cellIndex}`}
+                                                className="h-[75px] overflow-hidden"
+                                                style={{ width: column.size }}
+                                            >
+                                                <Skeleton className="h-4 w-full" />
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                        ) : table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={
+                                        row.getIsSelected() && 'selected'
+                                    }
+                                    onClick={() =>
+                                        router.push(
+                                            `/vulnerability-database/${(row.original as Vulnerability).cve}`,
+                                        )
+                                    }
+                                    className="cursor-pointer hover:bg-muted/50"
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell
+                                            key={cell.id}
+                                            className="h-[75px] overflow-hidden"
+                                        >
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext(),
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="flex items-center justify-between py-4">
+                <div className="text-sm text-muted-foreground">
+                    Showing {Math.min((page - 1) * PAGE_SIZE + 1, total)}–
+                    {Math.min(page * PAGE_SIZE, total)} of {total} results
+                </div>
+                <div className="flex items-center space-x-2">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onPageChange?.(page - 1)}
+                        disabled={page <= 1}
+                    >
+                        Previous
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onPageChange?.(page + 1)}
+                        disabled={page * PAGE_SIZE >= total}
+                    >
+                        Next
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/vulnerability-database/vulnerability-database-page.tsx b/src/components/vulnerability-database/vulnerability-database-page.tsx
new file mode 100644
index 0000000..3e355f7
--- /dev/null
+++ b/src/components/vulnerability-database/vulnerability-database-page.tsx
@@ -0,0 +1,76 @@
+import { useState, useEffect, useRef } from 'react'
+import { Container } from '@/components/top-level-pages/container'
+import VulnDBHero from '@/components/vulnerability-database/hero'
+import { columns } from '@/components/vulnerability-database/vulnerability-data-table/columns'
+import { DataTable } from '@/components/vulnerability-database/vulnerability-data-table/data-table'
+import { useRouter } from 'next/router'
+import { fetcher } from '@/lib/fetcher'
+import useSWR from 'swr'
+
+export default function VulnerabilityDatabasePage() {
+    const router = useRouter()
+    const queryParam = router.query.query
+    const pageParam = router.query.page
+    const [searchTerm, setSearchTerm] = useState((queryParam as string) ?? '')
+    const tableRef = useRef<HTMLDivElement>(null)
+
+    const query = (queryParam as string)?.toUpperCase() ?? ''
+    const page = pageParam as string
+
+    let url = null
+    if (router.isReady && pageParam) {
+        url = `https://api.main.devguard.org/api/v1/vulndb/?pageSize=10&page=${page}`
+        if (query) {
+            url += `&filterQuery[cve][like]=%25${query}%25`
+        }
+    }
+
+    const { data: apiResponse, error, isLoading } = useSWR(url, fetcher)
+
+    const data = apiResponse?.data ?? []
+    const total = apiResponse?.total ?? 0
+
+    useEffect(() => {
+        if (router.isReady && router.query.query) {
+            setSearchTerm(router.query.query as string)
+        }
+    }, [router.isReady, router.query.query])
+
+    useEffect(() => {
+        if (apiResponse?.data && apiResponse.data.length > 0) {
+            tableRef.current?.scrollIntoView({ behavior: 'smooth' })
+        }
+    }, [apiResponse])
+
+    const handleSearch = () => {
+        router.push({ query: { query: searchTerm, page: 1 } }, undefined, {
+            scroll: false,
+        })
+    }
+
+    return (
+        <Container>
+            <VulnDBHero
+                searchTerm={searchTerm}
+                setSearchTerm={setSearchTerm}
+                onSearch={handleSearch}
+            />
+            <div ref={tableRef} className="scroll-mt-24">
+                <DataTable
+                    columns={columns}
+                    data={data}
+                    isLoading={isLoading}
+                    total={total}
+                    page={Number(pageParam) || 1}
+                    onPageChange={(page) =>
+                        router.push(
+                            { query: { ...router.query, page } },
+                            undefined,
+                            { scroll: false },
+                        )
+                    }
+                />
+            </div>
+        </Container>
+    )
+}
diff --git a/src/lib/api/vulndb.ts b/src/lib/api/vulndb.ts
new file mode 100644
index 0000000..036a59d
--- /dev/null
+++ b/src/lib/api/vulndb.ts
@@ -0,0 +1,39 @@
+import { fetcher } from '@/lib/fetcher'
+import { useMemo } from 'react'
+import useSWR from 'swr'
+
+export type RadarDatum = {
+    ecosystem: string
+    count: number
+}
+
+export function useRadarData() {
+    const { data, error, isLoading } = useSWR(
+        `https://api.main.devguard.org/api/v1/vulndb/affected-package-distribution/`,
+        fetcher,
+    )
+
+    const processedData = useMemo(
+        () =>
+            Object.entries(data || {})
+                .map(([ecosystem, count]) => ({
+                    ecosystem,
+                    count: Number(count),
+                }))
+                .sort((a, b) => b.count - a.count)
+                .slice(0, 7)
+                .sort(() => Math.random() - 0.5),
+        [data],
+    )
+
+    if (error) {
+        console.error('Failed API Fetch:', error)
+        return { data: [], isLoading: false, error }
+    }
+
+    if (isLoading || !data) {
+        return { data: [], isLoading: true, error: null }
+    }
+
+    return { data: processedData, isLoading: false, error: null }
+}
diff --git a/src/lib/fetcher.js b/src/lib/fetcher.js
new file mode 100644
index 0000000..1976ec4
--- /dev/null
+++ b/src/lib/fetcher.js
@@ -0,0 +1 @@
+export const fetcher = (url) => fetch(url).then((res) => res.json())
diff --git a/src/pages/_meta.ts b/src/pages/_meta.ts
index ce5c0af..917c911 100644
--- a/src/pages/_meta.ts
+++ b/src/pages/_meta.ts
@@ -24,8 +24,12 @@ export default {
     explanations: { title: 'Explanations' },
     reference: { title: 'Reference' },
     contributing: { title: 'Contributing' },
-    other: {
-        title: 'Other',
+    other: { title: 'Other' },
+    'vulnerability-database': {
+        theme: {
+            layout: 'raw',
+        },
+        title: 'Vulnerability Database',
     },
     'header-pricing': {
         title: 'Pricing',
diff --git a/src/pages/api/cve/[page].ts b/src/pages/api/cve/[page].ts
new file mode 100644
index 0000000..a31c0d8
--- /dev/null
+++ b/src/pages/api/cve/[page].ts
@@ -0,0 +1,67 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type CVEList = {
+    data: {
+        CVEID: string
+        CreatedAt: string
+    }[]
+}
+
+export const getServerSideCVEs = async (
+    offset: number,
+    CVES_PER_SITEMAP: number,
+) => {
+    try {
+        const res = await fetch(
+            `https://api.main.devguard.org/api/v1/vulndb/list-ids-by-creation-date?offset=${offset}&limit=${CVES_PER_SITEMAP}`,
+        )
+        const repo: CVEList = await res.json()
+        return repo
+    } catch (error) {
+        console.error('Failed API Fetch: ', error)
+    }
+}
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+    const { page } = req.query
+    const pageNum = parseInt((page as string).replace('.xml', ''), 10)
+
+    if (isNaN(pageNum) || pageNum < 0) {
+        return res.status(400).send('Invalid page number')
+    }
+
+    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://devguard.org'
+    const CVES_PER_SITEMAP = 50000
+    const offset = pageNum * CVES_PER_SITEMAP
+
+    const data = await getServerSideCVEs(offset, CVES_PER_SITEMAP)
+
+    if (!data) {
+        return res.status(500).send('Failed to fetch CVE data')
+    }
+
+    const cveUrls = data.data.map(
+        (item) => `${baseUrl}/vulnerability-database/${item.CVEID}`,
+    )
+
+    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${cveUrls
+    .map(
+        (cve) => `  <url>
+    <loc>${cve}</loc>
+  </url>`,
+    )
+    .join('\n')}
+</urlset>`
+
+    res.setHeader('Content-Type', 'text/xml')
+    res.setHeader(
+        'Cache-Control',
+        'public, s-maxage=43200, stale-while-revalidate',
+    )
+    res.status(200).send(sitemap)
+}
diff --git a/src/pages/api/sitemap.xml.ts b/src/pages/api/sitemap.xml.ts
new file mode 100644
index 0000000..be3fb71
--- /dev/null
+++ b/src/pages/api/sitemap.xml.ts
@@ -0,0 +1,47 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type CVEList = {
+    total: number
+}
+
+export const getServerSideCVEs = async () => {
+    const res = await fetch(
+        'https://api.main.devguard.org/api/v1/vulndb/list-ids-by-creation-date',
+    )
+    const repo: CVEList = await res.json()
+    return repo
+}
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse,
+) {
+    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://devguard.org'
+    let TOTAL_CVES = 0
+    try {
+        const data = await getServerSideCVEs()
+        TOTAL_CVES = data?.total ?? 0
+    } catch (e) {
+        console.log(e)
+    }
+    const CVES_PER_SITEMAP = 50000
+    const numberOfCveSitemaps = Math.ceil(TOTAL_CVES / CVES_PER_SITEMAP)
+
+    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${Array.from(
+    { length: numberOfCveSitemaps },
+    (_, i) => `  <sitemap>
+    <loc>${baseUrl}/api/cve/${i}.xml</loc>
+    <lastmod>${new Date().toISOString()}</lastmod>
+  </sitemap>`,
+).join('\n')}
+</sitemapindex>`
+
+    res.setHeader('Content-Type', 'text/xml')
+    res.setHeader(
+        'Cache-Control',
+        'public, s-maxage=43200, stale-while-revalidate',
+    )
+    res.status(200).send(sitemap)
+}
diff --git a/src/pages/other/comparison/index.md b/src/pages/other/comparison/index.md
index 5429588..3c55e72 100644
--- a/src/pages/other/comparison/index.md
+++ b/src/pages/other/comparison/index.md
@@ -26,4 +26,4 @@ This comparison is community driven, based on documentation and user feedback. I
 
 ## Details 
 
-- [AboutCode Software Suite vs DevGuard](/comparison/aboutcode)
\ No newline at end of file
+- [AboutCode Software Suite vs DevGuard](/other/comparison/aboutcode)
\ No newline at end of file
diff --git a/src/pages/vulnerability-database.mdx b/src/pages/vulnerability-database.mdx
new file mode 100644
index 0000000..adcd331
--- /dev/null
+++ b/src/pages/vulnerability-database.mdx
@@ -0,0 +1,3 @@
+import VulnerabilityDatabasePage from '@/components/vulnerability-database/vulnerability-database-page'
+
+<VulnerabilityDatabasePage />
\ No newline at end of file
diff --git a/src/pages/vulnerability-database/[ID].mdx b/src/pages/vulnerability-database/[ID].mdx
new file mode 100644
index 0000000..237c384
--- /dev/null
+++ b/src/pages/vulnerability-database/[ID].mdx
@@ -0,0 +1,35 @@
+import CVEDetailComponent from '@/components/vulnerability-database/cve-detail'
+import { useRouter } from 'next/router'
+
+export const CVEDetail = () => {
+    const router = useRouter()
+    const { ID } = router.query
+    const cveId = Array.isArray(ID) ? ID[0] : ID
+    return (
+        <>
+            <style jsx global>{`
+    aside.nextra-sidebar-container { display: none !important; }
+    .nextra-toc { display: none !important; }
+    aside[class*="nextra-toc"] { display: none !important; }
+    .nextra-content { 
+        max-width: 100% !important; 
+        padding: 0 !important;
+    }
+    .nextra-content > div,
+    [class*="_max-w-6xl"] {
+        max-width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+    nav.nextra-nav-container { position: sticky !important; top: 0 !important; }
+    a.nextra-focus[class*="max-w-"] { display: none !important; }
+    nav[class*="border-t"] { display: none !important; }
+    ._mt-12._mb-8._block._text-xs { display: none !important; }
+    ._mb-8._flex._items-center._border-t._pt-8 { display: none !important; }
+`}</style>
+            <CVEDetailComponent cveId={cveId} />
+        </>
+    )
+}
+
+<CVEDetail />
\ No newline at end of file
diff --git a/src/types/api.ts b/src/types/api.ts
new file mode 100644
index 0000000..063bea6
--- /dev/null
+++ b/src/types/api.ts
@@ -0,0 +1,19 @@
+export type affectedComponent = {
+    id: string
+    Source: string
+    purl: string
+    ecosystem: string
+    scheme: string
+    type: string
+    name: string
+    namespace: string
+    subpath?: string
+    version: string
+    semverStart?: string
+    semverEnd?: string
+    versionIntroduced?: string
+    versionFixed?: string
+    cves?: string
+}
+
+export type affectedComponents = affectedComponent[]