diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..6e70a00
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ AI Gateway
+
+
+
+
+
+
diff --git a/frontend/src/App.css b/frontend/src/App.css
new file mode 100644
index 0000000..c664bcf
--- /dev/null
+++ b/frontend/src/App.css
@@ -0,0 +1,221 @@
+.app {
+ min-height: 100vh;
+}
+
+.navbar {
+ background: #1a1a2e;
+ color: #fff;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.navbar h1 {
+ font-size: 1.5rem;
+ font-weight: 600;
+}
+
+.nav-links {
+ display: flex;
+ gap: 1rem;
+}
+
+.nav-links button {
+ background: transparent;
+ border: none;
+ color: #aaa;
+ font-size: 1rem;
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ border-radius: 4px;
+ transition: all 0.2s;
+}
+
+.nav-links button:hover {
+ color: #fff;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.nav-links button.active {
+ color: #fff;
+ background: #4361ee;
+}
+
+.content {
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+h1 {
+ font-size: 1.75rem;
+ margin-bottom: 1.5rem;
+ color: #1a1a2e;
+}
+
+h2 {
+ font-size: 1.25rem;
+ margin-bottom: 1rem;
+ color: #333;
+}
+
+.section {
+ background: #fff;
+ border-radius: 8px;
+ padding: 1.5rem;
+ margin-bottom: 1.5rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.section h2 {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 1rem;
+}
+
+th, td {
+ text-align: left;
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid #eee;
+}
+
+th {
+ background: #fafafa;
+ font-weight: 600;
+ color: #555;
+ font-size: 0.9rem;
+}
+
+tr:hover {
+ background: #fafafa;
+}
+
+button {
+ background: #4361ee;
+ color: #fff;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.9rem;
+ transition: background 0.2s;
+}
+
+button:hover {
+ background: #3a56d4;
+}
+
+button:disabled {
+ background: #ccc;
+ cursor: not-allowed;
+}
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background: #fff;
+ border-radius: 8px;
+ padding: 2rem;
+ width: 100%;
+ max-width: 500px;
+ max-height: 90vh;
+ overflow-y: auto;
+}
+
+.modal-content h2 {
+ margin-bottom: 1.5rem;
+}
+
+.form-group {
+ margin-bottom: 1rem;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+ color: #555;
+}
+
+.form-group input[type="text"],
+.form-group input[type="password"],
+.form-group input[type="url"],
+.form-group input[type="date"],
+.form-group select {
+ width: 100%;
+ padding: 0.625rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+ outline: none;
+ border-color: #4361ee;
+}
+
+.form-actions {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1.5rem;
+}
+
+.form-actions button:first-child {
+ flex: 1;
+}
+
+.error {
+ background: #fee2e2;
+ color: #dc2626;
+ padding: 0.75rem;
+ border-radius: 4px;
+ margin-bottom: 1rem;
+}
+
+.loading {
+ text-align: center;
+ padding: 2rem;
+ color: #666;
+}
+
+.filter-form {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ margin-bottom: 1.5rem;
+ background: #fff;
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.filter-form select,
+.filter-form input {
+ padding: 0.625rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 0.95rem;
+}
+
+.filter-form button {
+ padding: 0.625rem 1.5rem;
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..26d6918
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,12 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+ background: #f5f5f5;
+ color: #333;
+ line-height: 1.6;
+}